feat(pilot-app,extension): save route to extension

deployables/app/app/routes/$avatar.$chainId/modules.ts

@@ -18,7 +18,7 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
       chainId: verifiedChainId,
     })
   } catch (e) {
-    console.log(e)
+    console.error(e)
     return []
   }
 }

deployables/app/app/routes/edit-route.$data.spec.ts

@@ -2,6 +2,7 @@ import { render } from '@/test-utils'
 import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Chain, CHAIN_NAME } from '@zodiac/chains'
+import { CompanionAppMessageType } from '@zodiac/messages'
 import {
   encodeRoleKey,
   fetchZodiacModules,
@@ -24,7 +25,6 @@ import {
   randomAddress,
   randomPrefixedAddress,
 } from '@zodiac/test-utils'
-import { chromeMock } from '@zodiac/test-utils/chrome'
 import { formatPrefixedAddress, type ChainId } from 'ser-kit'
 import { describe, expect, it, vi } from 'vitest'
 
@@ -64,6 +64,8 @@ const mockFetchZodiacModules = vi.mocked(fetchZodiacModules)
 const mockQueryRolesV1MultiSend = vi.mocked(queryRolesV1MultiSend)
 const mockQueryRolesV2MultiSend = vi.mocked(queryRolesV2MultiSend)
 
+const mockPostMessage = vi.spyOn(window, 'postMessage')
+
 describe('Edit route', () => {
   describe('Label', () => {
     it('shows the name of a route', async () => {
@@ -88,9 +90,12 @@ describe('Edit route', () => {
 
       await userEvent.click(screen.getByRole('button', { name: 'Save' }))
 
-      expect(chromeMock.runtime.sendMessage).toHaveBeenCalledWith(
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: CompanionAppMessageType.SAVE_ROUTE,
+          data: expect.objectContaining({ label: 'New route label' }),
+        },
         expect.anything(),
-        expect.objectContaining({ label: 'New route label' }),
       )
     })
   })
@@ -213,9 +218,12 @@ describe('Edit route', () => {
 
         await userEvent.click(screen.getByRole('button', { name: 'Save' }))
 
-        expect(chromeMock.runtime.sendMessage).toHaveBeenCalledWith(
+        expect(mockPostMessage).toHaveBeenCalledWith(
+          {
+            type: CompanionAppMessageType.SAVE_ROUTE,
+            data: updateAvatar(route, { safe }),
+          },
           expect.anything(),
-          updateAvatar(route, { safe }),
         )
       })
 
@@ -234,9 +242,12 @@ describe('Edit route', () => {
         )
         await userEvent.click(screen.getByRole('button', { name: 'Save' }))
 
-        expect(chromeMock.runtime.sendMessage).toHaveBeenCalledWith(
+        expect(mockPostMessage).toHaveBeenCalledWith(
+          {
+            type: CompanionAppMessageType.SAVE_ROUTE,
+            data: updateAvatar(route, { safe }),
+          },
           expect.anything(),
-          updateAvatar(route, { safe }),
         )
       })
 
@@ -257,9 +268,12 @@ describe('Edit route', () => {
         )
         await userEvent.click(screen.getByRole('button', { name: 'Save' }))
 
-        expect(chromeMock.runtime.sendMessage).toHaveBeenCalledWith(
+        expect(mockPostMessage).toHaveBeenCalledWith(
+          {
+            type: CompanionAppMessageType.SAVE_ROUTE,
+            data: removeAvatar(route),
+          },
           expect.anything(),
-          removeAvatar(route),
         )
       })
     })
@@ -424,9 +438,12 @@ describe('Edit route', () => {
 
           await userEvent.click(screen.getByRole('button', { name: 'Save' }))
 
-          expect(chromeMock.runtime.sendMessage).toHaveBeenCalledWith(
+          expect(mockPostMessage).toHaveBeenCalledWith(
+            {
+              type: CompanionAppMessageType.SAVE_ROUTE,
+              data: updateRoleId(route, roleId),
+            },
             expect.anything(),
-            updateRoleId(route, roleId),
           )
         })
       })
@@ -535,9 +552,12 @@ describe('Edit route', () => {
 
           await userEvent.click(screen.getByRole('button', { name: 'Save' }))
 
-          expect(chromeMock.runtime.sendMessage).toHaveBeenCalledWith(
+          expect(mockPostMessage).toHaveBeenCalledWith(
+            {
+              type: CompanionAppMessageType.SAVE_ROUTE,
+              data: updateRoleId(route, encodeRoleKey('MANAGER')),
+            },
             expect.anything(),
-            updateRoleId(route, encodeRoleKey('MANAGER')),
           )
         })
       })

deployables/app/app/routes/edit-route.$data.tsx

@@ -15,6 +15,7 @@ import {
   getOptionalString,
   getString,
 } from '@zodiac/form-data'
+import { CompanionAppMessageType } from '@zodiac/messages'
 import {
   getRolesVersion,
   queryRolesV1MultiSend,
@@ -94,7 +95,11 @@ export const clientAction = async ({
 
       route = updateLabel(route, getString(data, 'label'))
 
-      chrome.runtime.sendMessage('', route)
+      window.postMessage(
+        { type: CompanionAppMessageType.SAVE_ROUTE, data: route },
+        '*',
+      )
+      // chrome.runtime.sendMessage('', route)
 
       return editRoute(request.url, route)
     }

deployables/app/package.json

@@ -17,6 +17,7 @@
     "@tanstack/react-query": "^5.56.2",
     "@zodiac/chains": "workspace:*",
     "@zodiac/form-data": "workspace:*",
+    "@zodiac/messages": "workspace:*",
     "@zodiac/modules": "workspace:*",
     "@zodiac/safe": "workspace:*",
     "@zodiac/schema": "workspace:*",

deployables/extension/esbuild.mjs

@@ -29,6 +29,9 @@ esbuild
       './src/monitor/contentScript/main.ts',
       './src/monitor/injectedScript/main.ts',
 
+      // COMPANION APP TO EDIT ROUTES
+      './src/companion/contentScripts/main.ts',
+
       // SIDEPANEL APP
       './src/panel/app.tsx',
     ],

deployables/extension/package.json

@@ -93,6 +93,7 @@
     "@headlessui/react": "^2.2.0",
     "@zodiac/chains": "workspace:*",
     "@zodiac/form-data": "workspace:*",
+    "@zodiac/messages": "workspace:*",
     "@zodiac/modules": "workspace:*",
     "@zodiac/safe": "workspace:*",
     "@zodiac/schema": "workspace:*",

deployables/extension/src/background/PilotSession.ts

@@ -1,6 +1,6 @@
-import { type Message, PilotMessageType } from '@/messages'
 import { sendMessageToTab } from '@/utils'
 import { invariant } from '@epic-web/invariant'
+import { PilotMessageType, type Message } from '@zodiac/messages'
 import { removeCSPHeaderRule, updateCSPHeaderRule } from './cspHeaderRule'
 import { addRpcRedirectRules, removeAllRpcRedirectRules } from './rpcRedirect'
 import type { TrackRequestsResult } from './rpcTracking'

deployables/extension/src/background/enableExternalPanelOpen.spec.ts

@@ -1,5 +1,5 @@
-import { PilotMessageType } from '@/messages'
 import { callListeners, chromeMock, createMockTab } from '@/test-utils'
+import { PilotMessageType } from '@zodiac/messages'
 import { describe, expect, it } from 'vitest'
 import { enableExternalPanelOpen } from './enableExternalPanelOpen'
 

deployables/extension/src/background/enableExternalPanelOpen.ts

@@ -1,5 +1,5 @@
-import { PilotMessageType } from '@/messages'
 import { invariant } from '@epic-web/invariant'
+import { PilotMessageType } from '@zodiac/messages'
 import { resolve } from 'path'
 
 export const enableExternalPanelOpen = () => {

deployables/extension/src/background/rpcTracking.ts

@@ -1,5 +1,5 @@
-import { RpcMessageType } from '@/messages'
 import { sendMessageToTab } from '@/utils'
+import { RpcMessageType } from '@zodiac/messages'
 import type { ChainId } from 'ser-kit'
 import { createEventListener } from './createEventListener'
 import { hasJsonRpcBody } from './hasJsonRpcBody'

deployables/extension/src/background/sessionTracking.spec.ts

@@ -1,11 +1,11 @@
-import { PilotMessageType } from '@/messages'
 import {
   callListeners,
   chromeMock,
   createMockTab,
   mockActiveTab,
   startPilotSession,
 } from '@/test-utils'
+import { PilotMessageType } from '@zodiac/messages'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { trackRequests } from './rpcTracking'
 import { trackSessions } from './sessionTracking'

deployables/extension/src/background/sessionTracking.ts

@@ -1,13 +1,13 @@
-import { type Message, PilotMessageType } from '@/messages'
 import { PILOT_PANEL_PORT } from '@/port-handling'
 import { isValidTab, reloadActiveTab, reloadTab } from '@/utils'
+import { PilotMessageType, type Message } from '@zodiac/messages'
 import type { RefObject } from 'react'
 import { createEventListener } from './createEventListener'
 import { getPilotSession } from './getPilotSession'
 import { PilotSession, type Sessions } from './PilotSession'
 import type { TrackRequestsResult } from './rpcTracking'
 import type { Event } from './types'
-import { type CallbackFn, withPilotSession } from './withPilotSession'
+import { withPilotSession, type CallbackFn } from './withPilotSession'
 
 type SessionDeletedEventListener = (windowId: number) => void
 

deployables/extension/src/background/simulationTracking.ts

@@ -1,4 +1,7 @@
-import { PilotSimulationMessageType, type SimulationMessage } from '@/messages'
+import {
+  PilotSimulationMessageType,
+  type SimulationMessage,
+} from '@zodiac/messages'
 import type { TrackSessionsResult } from './sessionTracking'
 import { updateBadge } from './updateBadge'
 

deployables/extension/src/companion/contentScripts/main.ts

@@ -0,0 +1,15 @@
+import {
+  CompanionAppMessageType,
+  type CompanionAppMessage,
+} from '@zodiac/messages'
+
+window.addEventListener(
+  'message',
+  (event: MessageEvent<CompanionAppMessage>) => {
+    if (event.data.type !== CompanionAppMessageType.SAVE_ROUTE) {
+      return
+    }
+
+    chrome.runtime.sendMessage(event.data)
+  },
+)

deployables/extension/src/connect/contentScripts/dApp.spec.ts

@@ -1,9 +1,9 @@
-import {
-  type ConnectedWalletMessage,
-  ConnectedWalletMessageType,
-} from '@/messages'
 import { chromeMock, createMockPort } from '@/test-utils'
 import { waitFor } from '@testing-library/react'
+import {
+  ConnectedWalletMessageType,
+  type ConnectedWalletMessage,
+} from '@zodiac/messages'
 import { describe, expect, it } from 'vitest'
 
 describe('Connect Pilot to DApp', () => {

deployables/extension/src/connect/contentScripts/dApp.ts

@@ -1,8 +1,8 @@
+import { invariant } from '@epic-web/invariant'
 import {
-  type ConnectedWalletMessage,
   ConnectedWalletMessageType,
-} from '@/messages'
-import { invariant } from '@epic-web/invariant'
+  type ConnectedWalletMessage,
+} from '@zodiac/messages'
 
 const CONNECT_IFRAME_URL = process.env.CONNECT_IFRAME_URL
 

deployables/extension/src/connect/injectedScript/main.ts

@@ -1,8 +1,8 @@
+import type { Eip1193Provider } from '@/types'
 import {
-  type ConnectedWalletMessage,
   ConnectedWalletMessageType,
-} from '@/messages'
-import type { Eip1193Provider } from '@/types'
+  type ConnectedWalletMessage,
+} from '@zodiac/messages'
 
 declare global {
   interface Window {

deployables/extension/src/inject/bridge/useBridgeError.ts

@@ -1,7 +1,7 @@
 import {
   InjectedProviderMessageTyp,
   type InjectedProviderMessage,
-} from '@/messages'
+} from '@zodiac/messages'
 import { errorToast } from '@zodiac/ui'
 import { useEffect, useId } from 'react'
 import { useWindowId } from './BridgeContext'

deployables/extension/src/inject/bridge/useProviderBridge.spec.tsx

@@ -1,4 +1,3 @@
-import { InjectedProviderMessageTyp } from '@/messages'
 import {
   chromeMock,
   createMockTab,
@@ -10,6 +9,7 @@ import {
 import type { Eip1193Provider } from '@/types'
 import { cleanup, waitFor } from '@testing-library/react'
 import { ZERO_ADDRESS } from '@zodiac/chains'
+import { InjectedProviderMessageTyp } from '@zodiac/messages'
 import { toQuantity } from 'ethers'
 import type { PropsWithChildren } from 'react'
 import type { ChainId } from 'ser-kit'

deployables/extension/src/inject/bridge/useProviderBridge.ts

@@ -1,11 +1,10 @@
-// this will be bundled in the panel app
-import {
-  type InjectedProviderMessage,
-  InjectedProviderMessageTyp,
-} from '@/messages'
 import type { Eip1193Provider } from '@/types'
 import { getActiveTab, sendMessageToTab } from '@/utils'
 import { invariant } from '@epic-web/invariant'
+import {
+  InjectedProviderMessageTyp,
+  type InjectedProviderMessage,
+} from '@zodiac/messages'
 import { toQuantity } from 'ethers'
 import { useCallback, useEffect, useRef } from 'react'
 import type { ChainId } from 'ser-kit'

deployables/extension/src/inject/contentScript/main.ts

@@ -1,13 +1,13 @@
+import { injectScript, isValidTab } from '@/utils'
 import {
-  type InjectedProviderMessage,
   InjectedProviderMessageTyp,
+  PilotMessageType,
+  RpcMessageType,
+  type InjectedProviderMessage,
   type InjectedProviderResponse,
   type Message,
-  PilotMessageType,
   type RpcMessage,
-  RpcMessageType,
-} from '@/messages'
-import { injectScript, isValidTab } from '@/utils'
+} from '@zodiac/messages'
 import { probeChainId } from './probeChainId'
 
 // The content script is injected on tab update events, which can be triggered multiple times for the same page load.

deployables/extension/src/inject/injectedScript/InjectedProvider.ts

@@ -1,7 +1,7 @@
 import {
   type InjectedProviderMessage,
   InjectedProviderMessageTyp,
-} from '@/messages'
+} from '@zodiac/messages'
 import { EventEmitter } from 'events'
 import { nanoid } from 'nanoid'
 

deployables/extension/src/manifest.template.json

@@ -34,15 +34,18 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "exclude_globs": ["<CONNECT_IFRAME_URL>", "about:*", "chrome:*"],
+      "exclude_globs": ["<CONNECT_IFRAME_URL>*", "about:*", "chrome:*"],
       "run_at": "document_start",
       "js": ["build/connect/contentScripts/dApp.js"]
     },
     {
-      "matches": ["<CONNECT_IFRAME_URL>"],
+      "matches": ["<CONNECT_IFRAME_URL>*"],
       "run_at": "document_start",
       "all_frames": true,
-      "js": ["build/connect/contentScripts/connectIframe.js"]
+      "js": [
+        "build/connect/contentScripts/connectIframe.js",
+        "build/companion/contentScripts/main.js"
+      ]
     },
     {
       "matches": ["<all_urls>"],