fix: clear module when switching piloted account (#463)

* fix: make sure to clear the module input when the pilot address changes

* chore: create some test utils

extension/src/panel/pages/routes/edit.$routeId/EditRoute.spec.tsx

@@ -7,6 +7,8 @@ import {
 import { useInjectedWallet } from '@/providers'
 import {
   createMockRoute,
+  createRoleWaypoint,
+  createStartingWaypoint,
   createTransaction,
   expectRouteToBe,
   MockProvider,
@@ -171,7 +173,7 @@ describe('Edit Zodiac route', () => {
 
   describe('Piloted Safe', () => {
     it('is possible to define a safe', async () => {
-      mockRoute({ id: 'route-id' })
+      await mockRoute({ id: 'route-id' })
 
       await render('/routes/edit/route-id', [
         {
@@ -197,6 +199,40 @@ describe('Edit Zodiac route', () => {
         formatPrefixedAddress(1, address).toLowerCase(),
       )
     })
+
+    it('clears the module when the piloted safe changes', async () => {
+      const moduleAddress = randomAddress()
+
+      await mockRoute({
+        id: 'route-id',
+        avatar: randomPrefixedAddress(),
+        waypoints: [
+          createStartingWaypoint(),
+          createRoleWaypoint({ moduleAddress }),
+        ],
+      })
+
+      mockFetchZodiacModules.mockResolvedValue([
+        { moduleAddress, type: KnownContracts.ROLES_V2 },
+      ])
+
+      mockQueryRolesV2MultiSend.mockResolvedValue({})
+
+      await render('/routes/edit/route-id', [
+        {
+          path: '/routes/edit/:routeId',
+          Component: EditRoute,
+          loader,
+          action,
+        },
+      ])
+
+      await userEvent.click(
+        screen.getByRole('button', { name: 'Clear piloted Safe' }),
+      )
+
+      expect(screen.queryByText('Roles v2')).not.toBeInTheDocument()
+    })
   })
 
   describe('Zodiac modules', () => {

extension/src/panel/pages/routes/edit.$routeId/ZodiacMod.tsx

@@ -83,7 +83,9 @@ export const ZodiacMod = ({
                 value: value.moduleAddress,
                 label: MODULE_NAMES[value.moduleType],
               }
-            : defaultModOption
+            : defaultModOption != null
+              ? defaultModOption
+              : null
         }
         isDisabled={disabled}
         placeholder="Select a module"

extension/test-utils/creators/createRoleWaypoint.ts

@@ -0,0 +1,30 @@
+import type { HexAddress } from '@/types'
+import {
+  AccountType,
+  ConnectionType,
+  formatPrefixedAddress,
+  type Waypoint,
+} from 'ser-kit'
+import { randomAddress, randomPrefixedAddress } from './randomHex'
+
+type CreateRoleWaypointOptions = {
+  moduleAddress?: HexAddress
+}
+
+export const createRoleWaypoint = ({
+  moduleAddress = randomAddress(),
+}: CreateRoleWaypointOptions = {}): Waypoint => ({
+  account: {
+    type: AccountType.ROLES,
+    address: moduleAddress,
+    prefixedAddress: formatPrefixedAddress(1, moduleAddress),
+    chain: 1,
+    multisend: [],
+    version: 2,
+  },
+  connection: {
+    from: randomPrefixedAddress(),
+    type: ConnectionType.IS_MEMBER,
+    roles: [],
+  },
+})

extension/test-utils/creators/createStartingWaypoint.ts

@@ -0,0 +1,14 @@
+import { AccountType, type StartingPoint } from 'ser-kit'
+import { randomAddress, randomPrefixedAddress } from './randomHex'
+
+export const createStartingWaypoint = ({
+  account,
+}: Partial<StartingPoint> = {}): StartingPoint => ({
+  account: {
+    address: randomAddress(),
+    prefixedAddress: randomPrefixedAddress(),
+    type: AccountType.EOA,
+
+    ...account,
+  },
+})

extension/test-utils/creators/index.ts

@@ -3,5 +3,7 @@ export { createMockRoute } from './createMockRoute'
 export { createMockTab } from './createMockTab'
 export type { MockTab } from './createMockTab'
 export { createMockWebRequest } from './createMockWebRequest'
+export { createRoleWaypoint } from './createRoleWaypoint'
+export { createStartingWaypoint } from './createStartingWaypoint'
 export { createTransaction } from './createTransaction'
 export { randomAddress, randomPrefixedAddress } from './randomHex'