feat(extension): make extension load companion app

.github/workflows/live-tests.yaml

@@ -8,7 +8,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     env:
-      CONNECT_IFRAME_URL: https://connect.pilot.gnosisguild.org
+      CONNECT_IFRAME_URL: https://app.pilot.gnosisguild.org
     if: github.event.deployment_status.state == 'success'
     defaults:
       run:

.github/workflows/prod-release.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     name: Build Extension
     env:
-      CONNECT_IFRAME_URL: https://connect.pilot.gnosisguild.org
+      CONNECT_IFRAME_URL: https://app.pilot.gnosisguild.org
     defaults:
       run:
         working-directory: ./deployables/extension

deployables/app/app/components/DebugRouteData.tsx

@@ -9,7 +9,7 @@ export const DebugRouteData = () => {
   }
 
   return (
-    <code>
+    <code className="overflow-y-auto text-sm">
       <pre>{JSON.stringify(parseRouteData(data), undefined, 2)}</pre>
     </code>
   )

deployables/app/app/components/ZodiacMod.tsx

@@ -1,3 +1,4 @@
+import { getChainId } from '@zodiac/chains'
 import {
   decodeRoleKey,
   encodeRoleKey,
@@ -13,7 +14,7 @@ import { useFetcher } from 'react-router'
 import {
   AccountType,
   ConnectionType,
-  splitPrefixedAddress,
+  parsePrefixedAddress,
   type PrefixedAddress,
 } from 'ser-kit'
 import { ModSelect, NO_MODULE_OPTION } from './ModSelect'
@@ -53,7 +54,7 @@ export const ZodiacMod = ({
   } = useFetcher<ZodiacModule[]>({
     key: 'modules',
   })
-  const [chainId] = splitPrefixedAddress(avatar)
+  const chainId = getChainId(avatar)
   const pilotAddress = waypoints == null ? null : getPilotAddress(waypoints)
 
   useEffect(() => {
@@ -66,7 +67,7 @@ export const ZodiacMod = ({
   }, [chainId, loadDelegates, loadSafes, pilotAddress])
 
   useEffect(() => {
-    const [, address] = splitPrefixedAddress(avatar)
+    const address = parsePrefixedAddress(avatar)
 
     loadModules(`/${address}/${chainId}/modules`)
   }, [avatar, chainId, loadModules])

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

@@ -7,8 +7,7 @@ import {
   ZodiacMod,
 } from '@/components'
 import { editRoute, jsonRpcProvider, parseRouteData } from '@/utils'
-import { invariantResponse } from '@epic-web/invariant'
-import { verifyChainId, ZERO_ADDRESS } from '@zodiac/chains'
+import { getChainId, verifyChainId, ZERO_ADDRESS } from '@zodiac/chains'
 import {
   formData,
   getHexString,
@@ -39,14 +38,14 @@ import {
   type Waypoints,
 } from '@zodiac/schema'
 import { PrimaryButton, TextInput } from '@zodiac/ui'
+import classNames from 'classnames'
 import { Form, useSubmit } from 'react-router'
-import { splitPrefixedAddress } from 'ser-kit'
 import type { Route } from './+types/edit-route.$data'
 
 export const loader = ({ params }: Route.LoaderArgs) => {
   const route = parseRouteData(params.data)
 
-  const [chainId] = splitPrefixedAddress(route.avatar)
+  const chainId = getChainId(route.avatar)
 
   return {
     label: route.label,
@@ -79,7 +78,7 @@ export const clientAction = async ({
   request,
   params,
 }: Route.ClientActionArgs) => {
-  const data = await request.formData()
+  const data = await request.clone().formData()
 
   const intent = getOptionalString(data, 'intent')
 
@@ -148,80 +147,82 @@ const EditRoute = ({
   const submit = useSubmit()
 
   return (
-    <main className="mx-auto flex max-w-3xl flex-col gap-4">
-      <h1 className="my-8 text-3xl font-semibold">Route configuration</h1>
-
-      <Form method="POST" className="flex flex-col gap-4">
-        <TextInput label="Label" name="label" defaultValue={label} />
-
-        <ChainSelect
-          value={chainId}
-          onChange={(chainId) => {
-            submit(formData({ intent: Intent.UpdateChain, chainId }), {
-              method: 'POST',
-            })
-          }}
-        />
-
-        <WalletProvider>
-          <ConnectWallet
-            chainId={chainId}
-            pilotAddress={getPilotAddress(waypoints)}
-            providerType={providerType}
-            onConnect={({ account, chainId, providerType }) => {
-              submit(
-                formData({
-                  intent: Intent.ConnectWallet,
-                  account,
-                  chainId,
-                  providerType,
-                }),
-                { method: 'POST' },
-              )
-            }}
-            onDisconnect={() => {
-              submit(formData({ intent: Intent.DisconnectWallet }), {
+    <div className={classNames('grid', isDev && 'grid-cols-2')}>
+      <main className="mx-auto flex max-w-3xl flex-col gap-4">
+        <h1 className="my-8 text-3xl font-semibold">Route configuration</h1>
+
+        <Form method="POST" className="flex flex-col gap-4">
+          <TextInput label="Label" name="label" defaultValue={label} />
+
+          <ChainSelect
+            value={chainId}
+            onChange={(chainId) => {
+              submit(formData({ intent: Intent.UpdateChain, chainId }), {
                 method: 'POST',
               })
             }}
           />
-        </WalletProvider>
-
-        <AvatarInput
-          value={avatar}
-          startingWaypoint={startingWaypoint}
-          onChange={(avatar) => {
-            if (avatar != null) {
-              submit(formData({ intent: Intent.UpdateAvatar, avatar }), {
-                method: 'POST',
-              })
-            } else {
-              submit(formData({ intent: Intent.RemoveAvatar }), {
+
+          <WalletProvider>
+            <ConnectWallet
+              chainId={chainId}
+              pilotAddress={getPilotAddress(waypoints)}
+              providerType={providerType}
+              onConnect={({ account, chainId, providerType }) => {
+                submit(
+                  formData({
+                    intent: Intent.ConnectWallet,
+                    account,
+                    chainId,
+                    providerType,
+                  }),
+                  { method: 'POST' },
+                )
+              }}
+              onDisconnect={() => {
+                submit(formData({ intent: Intent.DisconnectWallet }), {
+                  method: 'POST',
+                })
+              }}
+            />
+          </WalletProvider>
+
+          <AvatarInput
+            value={avatar}
+            startingWaypoint={startingWaypoint}
+            onChange={(avatar) => {
+              if (avatar != null) {
+                submit(formData({ intent: Intent.UpdateAvatar, avatar }), {
+                  method: 'POST',
+                })
+              } else {
+                submit(formData({ intent: Intent.RemoveAvatar }), {
+                  method: 'POST',
+                })
+              }
+            }}
+          />
+
+          <ZodiacMod
+            avatar={avatar}
+            waypoints={waypoints}
+            onSelect={(module) => {
+              submit(formData({ module: JSON.stringify(module) }), {
                 method: 'POST',
               })
-            }
-          }}
-        />
-
-        <ZodiacMod
-          avatar={avatar}
-          waypoints={waypoints}
-          onSelect={(module) => {
-            submit(formData({ module: JSON.stringify(module) }), {
-              method: 'POST',
-            })
-          }}
-        />
-
-        <div className="mt-8 flex justify-end">
-          <PrimaryButton submit intent={Intent.Save}>
-            Save
-          </PrimaryButton>
-        </div>
-      </Form>
+            }}
+          />
+
+          <div className="mt-8 flex justify-end">
+            <PrimaryButton submit intent={Intent.Save}>
+              Save
+            </PrimaryButton>
+          </div>
+        </Form>
+      </main>
 
       {isDev && <DebugRouteData />}
-    </main>
+    </div>
   )
 }
 
@@ -247,12 +248,7 @@ const getPilotAddress = (waypoints?: Waypoints) => {
 }
 
 const getMultisend = (route: ExecutionRoute, module: ZodiacModule) => {
-  const [chainId] = splitPrefixedAddress(route.avatar)
-
-  invariantResponse(
-    chainId != null,
-    `chainId is required but could not be retrieved from avatar "${route.avatar}"`,
-  )
+  const chainId = getChainId(route.avatar)
 
   switch (module.type) {
     case SupportedZodiacModuleType.ROLES_V1:

deployables/app/package.json

@@ -21,6 +21,7 @@
     "@zodiac/safe": "workspace:*",
     "@zodiac/schema": "workspace:*",
     "@zodiac/ui": "workspace:*",
+    "classnames": "^2.5.1",
     "connectkit": "^1.8.2",
     "ethers": "6.13.5",
     "isbot": "^5.1.17",

deployables/extension/manifest-util.js

@@ -12,19 +12,27 @@ config()
 //
 // node manifest-util.js ./public/manifest.json
 
-const updateManifest = (templateFileName, outFileName, version) => {
+const getIframeUrl = () => {
   const iframeUrl = process.env.CONNECT_IFRAME_URL
 
   invariant(iframeUrl != null, 'CONNECT_IFRAME_URL is missing')
 
+  if (iframeUrl.endsWith('/')) {
+    return iframeUrl
+  }
+
+  return `${iframeUrl}/`
+}
+
+const updateManifest = (templateFileName, outFileName, version) => {
   try {
     console.log(chalk.white.bold('Manifest template file:'))
     console.log(new URL(templateFileName, import.meta.url).pathname)
 
     const data = fs
       .readFileSync(templateFileName)
       .toString()
-      .replaceAll('<CONNECT_IFRAME_URL>', iframeUrl)
+      .replaceAll('<CONNECT_IFRAME_URL>', getIframeUrl())
 
     const manifest = JSON.parse(data)
     manifest['version'] = version.replace('v', '')

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

@@ -18,7 +18,7 @@ const alreadyInjected =
 
 if (
   !alreadyInjected &&
-  window.location.origin !== 'https://connect.pilot.gnosisguild.org' &&
+  window.location.origin !== process.env.CONNECT_IFRAME_URL &&
   isValidTab(window.location.href)
 ) {
   document.documentElement.dataset.__zodiacPilotInjected = 'true'

deployables/extension/src/manifest.template.json

@@ -34,19 +34,19 @@
   "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"]
     },
     {
       "matches": ["<all_urls>"],
-      "exclude_globs": ["<CONNECT_IFRAME_URL>/", "about:*", "chrome:*"],
+      "exclude_globs": ["<CONNECT_IFRAME_URL>", "about:*", "chrome:*"],
       "run_at": "document_start",
       "js": ["build/monitor/contentScript/main.js"]
     }

packages/modules/src/removeAvatar.ts

@@ -1,19 +1,9 @@
-import { invariant } from '@epic-web/invariant'
-import { ZERO_ADDRESS } from '@zodiac/chains'
+import { getChainId, ZERO_ADDRESS } from '@zodiac/chains'
 import type { ExecutionRoute } from '@zodiac/schema'
-import {
-  AccountType,
-  formatPrefixedAddress,
-  splitPrefixedAddress,
-} from 'ser-kit'
+import { AccountType, formatPrefixedAddress } from 'ser-kit'
 
 export const removeAvatar = (route: ExecutionRoute): ExecutionRoute => {
-  const [chainId] = splitPrefixedAddress(route.avatar)
-
-  invariant(
-    chainId,
-    `Could not retrieve chain ID from avatar "${route.avatar}"`,
-  )
+  const chainId = getChainId(route.avatar)
 
   if (route.waypoints == null) {
     return { ...route, avatar: formatPrefixedAddress(chainId, ZERO_ADDRESS) }

packages/modules/src/updateRolesWaypoint.ts

@@ -1,6 +1,7 @@
 import { invariant } from '@epic-web/invariant'
+import { getChainId } from '@zodiac/chains'
 import type { ExecutionRoute, HexAddress, Waypoints } from '@zodiac/schema'
-import { AccountType, splitPrefixedAddress } from 'ser-kit'
+import { AccountType } from 'ser-kit'
 import { createRolesWaypoint } from './createRolesWaypoint'
 
 type RoleUpdatePayload = {
@@ -13,12 +14,7 @@ export const updateRolesWaypoint = (
   route: ExecutionRoute,
   { moduleAddress, multisend, version }: RoleUpdatePayload,
 ): ExecutionRoute => {
-  const [chainId] = splitPrefixedAddress(route.avatar)
-
-  invariant(
-    chainId != null,
-    `chainId is required but could not be retrieved from avatar "${route.avatar}"`,
-  )
+  const chainId = getChainId(route.avatar)
 
   invariant(
     route.waypoints,

packages/test-utils/src/renderFramework.tsx

@@ -99,13 +99,7 @@ export async function createRenderFramework<Config extends RouteConfig>(
           if (clientAction != null) {
             return clientAction({
               ...actionArgs,
-              serverAction: action
-                ? () =>
-                    action({
-                      ...actionArgs,
-                      request: new Request(actionArgs.request),
-                    })
-                : undefined,
+              serverAction: action ? () => action(actionArgs) : undefined,
             })
           }