feat(pilot-app): make it possible to edit the chain and process side-effects

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

@@ -1,5 +1,5 @@
 import { render } from '@/test-utils'
-import { screen } from '@testing-library/react'
+import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Chain, CHAIN_NAME } from '@zodiac/chains'
 import {
@@ -202,6 +202,28 @@ describe('Edit route', () => {
       expect(await screen.findByText('Roles v2')).toBeInTheDocument()
     })
 
+    it('reloads the modules when the chain changes', async () => {
+      mockFetchZodiacModules.mockResolvedValue([])
+
+      const route = createMockExecutionRoute({
+        avatar: randomPrefixedAddress({ chainId: Chain.ETH }),
+        providerType: ProviderType.InjectedWallet,
+        waypoints: [createStartingWaypoint(), createEndWaypoint()],
+      })
+
+      await render(`/edit-route/${btoa(JSON.stringify(route))}`)
+
+      await userEvent.click(screen.getByRole('combobox', { name: 'Chain' }))
+      await userEvent.click(screen.getByRole('option', { name: 'Gnosis' }))
+
+      await waitFor(() => {
+        expect(mockFetchZodiacModules).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({ chainId: Chain.GNO }),
+        )
+      })
+    })
+
     describe('V1', () => {
       it('shows the when the v1 role mod is selected', async () => {
         const moduleAddress = randomAddress()

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

@@ -6,7 +6,13 @@ import {
 } from '@/components'
 import { jsonRpcProvider } from '@/utils'
 import { invariantResponse } from '@epic-web/invariant'
-import { formData, getOptionalString, getString } from '@zodiac/form-data'
+import { verifyChainId } from '@zodiac/chains'
+import {
+  formData,
+  getInt,
+  getOptionalString,
+  getString,
+} from '@zodiac/form-data'
 import {
   getRolesVersion,
   queryRolesV1MultiSend,
@@ -24,7 +30,11 @@ import {
 } from '@zodiac/schema'
 import { PrimaryButton, TextInput } from '@zodiac/ui'
 import { Form, useSubmit } from 'react-router'
-import { splitPrefixedAddress } from 'ser-kit'
+import {
+  formatPrefixedAddress,
+  splitPrefixedAddress,
+  type ChainId,
+} from 'ser-kit'
 import type { Route } from './+types/edit-route.$data'
 
 export const loader = ({ params }: Route.LoaderArgs) => {
@@ -69,18 +79,35 @@ export const clientAction = async ({
 
   const intent = getOptionalString(data, 'intent')
 
-  if (intent === 'save') {
-    let route = parseRouteData(params.data)
+  switch (intent) {
+    case Intent.Save: {
+      let route = parseRouteData(params.data)
+
+      const roleId = getOptionalString(data, 'roleId')
 
-    const roleId = getOptionalString(data, 'roleId')
+      if (roleId != null) {
+        route = updateRoleId(route, roleId)
+      }
 
-    if (roleId != null) {
-      route = updateRoleId(route, roleId)
+      chrome.runtime.sendMessage('', route)
+
+      return null
     }
+    case Intent.UpdateChain: {
+      const route = parseRouteData(params.data)
+      const chainId = verifyChainId(getInt(data, 'chainId'))
+
+      const url = new URL(request.url)
 
-    chrome.runtime.sendMessage('', route)
-  } else {
-    return serverAction()
+      return Response.redirect(
+        new URL(
+          `/edit-route/${btoa(JSON.stringify(updateChainId(route, chainId)))}`,
+          url.origin,
+        ),
+      )
+    }
+    default:
+      return serverAction()
   }
 }
 
@@ -96,7 +123,14 @@ const EditRoute = ({
 
       <Form method="POST" className="flex flex-col gap-4">
         <TextInput label="Label" defaultValue={label} />
-        <ChainSelect value={chainId} onChange={() => {}} />
+        <ChainSelect
+          value={chainId}
+          onChange={(chainId) => {
+            submit(formData({ intent: Intent.UpdateChain, chainId }), {
+              method: 'POST',
+            })
+          }}
+        />
         <ConnectWallet
           chainId={chainId}
           pilotAddress={getPilotAddress(waypoints)}
@@ -120,7 +154,7 @@ const EditRoute = ({
         />
 
         <div className="mt-8 flex justify-end">
-          <PrimaryButton submit intent="save">
+          <PrimaryButton submit intent={Intent.Save}>
             Save
           </PrimaryButton>
         </div>
@@ -131,6 +165,11 @@ const EditRoute = ({
 
 export default EditRoute
 
+enum Intent {
+  Save = 'Save',
+  UpdateChain = 'UpdateChain',
+}
+
 const getPilotAddress = (waypoints?: Waypoints) => {
   if (waypoints == null) {
     return null
@@ -179,3 +218,15 @@ const getMultisend = (route: ExecutionRoute, module: ZodiacModule) => {
 
   throw new Error(`Cannot get multisend for module type "${module.type}"`)
 }
+
+const updateChainId = (
+  route: ExecutionRoute,
+  chainId: ChainId,
+): ExecutionRoute => {
+  const [, address] = splitPrefixedAddress(route.avatar)
+
+  return {
+    ...route,
+    avatar: formatPrefixedAddress(chainId, address),
+  }
+}