fix: wrong route used when creating a new one (#260)

* chore: update route schema

* add failing spec

* useZodiacMod operates solely on the safe address

* remove obsolete call to validateAddress

* show placeholder for unnamed routes

* use same names for mods

extension/src/components/index.ts

@@ -5,7 +5,6 @@ export { Breadcrumbs } from './Breadcrumbs'
 export * from './buttons'
 export { Circle } from './Circle'
 export { ConfirmationModal, useConfirmationModal } from './ConfirmationModal'
-export { ConnectionStack } from './ConnectionStack'
 export { CopyToClipboard } from './CopyToClipboard'
 export { Divider } from './Divider'
 export * from './inputs'

extension/src/panel/integrations/zodiac/index.ts

@@ -0,0 +1,8 @@
+export {
+  MULTISEND,
+  MULTISEND_CALL_ONLY,
+  queryRolesV1MultiSend,
+  queryRolesV2MultiSend,
+} from './rolesMultisend'
+export type { SupportedModuleType } from './types'
+export { useZodiacModules } from './useZodiacModules'

extension/src/panel/integrations/zodiac/useZodiacModules.ts

@@ -1,7 +1,6 @@
 import { getChainId } from '@/chains'
-import { useExecutionRoute } from '@/execution-routes'
 import { getReadOnlyProvider } from '@/providers'
-import { validateAddress } from '@/utils'
+import { HexAddress } from '@/types'
 import {
   ContractAbis,
   ContractAddresses,
@@ -11,7 +10,7 @@ import { selectorsFromBytecode } from '@shazow/whatsabi'
 import { Contract, id, Interface, ZeroAddress } from 'ethers'
 import detectProxyTarget from 'evm-proxy-detection'
 import { useEffect, useState } from 'react'
-import { ChainId } from 'ser-kit'
+import { ChainId, parsePrefixedAddress, PrefixedAddress } from 'ser-kit'
 import { SupportedModuleType } from './types'
 
 const SUPPORTED_MODULES = [
@@ -27,37 +26,35 @@ interface Module {
 }
 
 export const useZodiacModules = (
-  safeAddress: string,
-  connectionId?: string
+  safeAddress: PrefixedAddress
 ): { loading: boolean; isValidSafe: boolean; modules: Module[] } => {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(false)
   const [modules, setModules] = useState<Module[]>([])
-
-  const route = useExecutionRoute(connectionId)
-  const chainId = getChainId(route.avatar)
+  const chainId = getChainId(safeAddress)
+  const [, address] = parsePrefixedAddress(safeAddress)
 
   useEffect(() => {
     setLoading(true)
     setError(false)
-    fetchModules(safeAddress, chainId)
+    fetchModules(address, chainId)
       .then((modules) => setModules(modules))
       .catch((e) => {
-        console.error(`Could not fetch modules of Safe ${safeAddress}`, e)
+        console.error(`Could not fetch modules of Safe ${address}`, e)
         setError(true)
       })
       .finally(() => setLoading(false))
-  }, [chainId, safeAddress])
+  }, [address, chainId])
 
-  if (!validateAddress(safeAddress) || error) {
+  if (error) {
     return { isValidSafe: false, loading, modules: [] }
   }
 
   return { loading, isValidSafe: true, modules }
 }
 
 async function fetchModules(
-  safeOrModifierAddress: string,
+  safeOrModifierAddress: HexAddress,
   chainId: ChainId,
   previous: Set<string> = new Set()
 ): Promise<Module[]> {
@@ -82,7 +79,7 @@ async function fetchModules(
   )
   const moduleAddresses = (
     await contract.getModulesPaginated(ADDRESS_ONE, 100)
-  )[0] as string[]
+  )[0] as HexAddress[]
 
   const enabledAndSupportedModules = moduleAddresses.map(
     async (moduleAddress) => {

extension/src/components/ConnectionStack/Address.tsx → extension/src/panel/pages/ConnectionStack/Address.tsx

@@ -1,8 +1,6 @@
+import { Address as BaseAddress, Blockie, Tag } from '@/components'
 import { shortenAddress, validateAddress } from '@/utils'
 import { Unlink } from 'lucide-react'
-import { Address as BaseAddress } from '../Address'
-import { Blockie } from '../Blockie'
-import { Tag } from '../Tag'
 
 interface Props {
   address: string

extension/src/components/ConnectionStack/index.tsx → extension/src/panel/pages/ConnectionStack/index.tsx

@@ -1,5 +1,5 @@
-import { MODULE_NAMES } from '../../const'
-import { LegacyConnection } from '../../types'
+import { MODULE_NAMES } from '@/const'
+import { LegacyConnection } from '@/types'
 import { Address } from './Address'
 
 interface Props {

extension/src/panel/pages/index.tsx

@@ -1,7 +1,6 @@
 import { RouteObject } from 'react-router-dom'
-import { EditRoute } from './edit-route'
-import { ListRoutes } from './list-routes'
 import { Root } from './Root'
+import { routes } from './routes'
 import { Transactions } from './transactions'
 
 export const pages: RouteObject[] = [
@@ -15,11 +14,7 @@ export const pages: RouteObject[] = [
       },
       {
         path: '/routes',
-        element: <ListRoutes />,
-      },
-      {
-        path: '/routes/:routeId',
-        element: <EditRoute />,
+        children: routes,
       },
     ],
   },

extension/src/panel/pages/legacyConnectionMigrations.ts

@@ -1,4 +1,5 @@
 import { ExecutionRoute, LegacyConnection, ProviderType } from '@/types'
+import { MULTISEND, MULTISEND_CALL_ONLY } from '@/zodiac'
 import { KnownContracts } from '@gnosis.pm/zodiac'
 import { ZeroAddress } from 'ethers'
 import {
@@ -10,10 +11,6 @@ import {
   Roles,
   Waypoint,
 } from 'ser-kit'
-import {
-  MULTISEND,
-  MULTISEND_CALL_ONLY,
-} from '../integrations/zodiac/rolesMultisend'
 
 export function fromLegacyConnection(
   connection: LegacyConnection

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

@@ -1,9 +1,28 @@
-import { chromeMock, expectRouteToBe, mockRoute, render } from '@/test-utils'
+import { getReadOnlyProvider } from '@/providers'
+import {
+  chromeMock,
+  expectRouteToBe,
+  mockRoute,
+  mockRoutes,
+  render,
+} from '@/test-utils'
 import { screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { EditRoute } from './EditRoute'
 
+vi.mock('@/providers', async (importOriginal) => {
+  const module = await importOriginal<typeof import('@/providers')>()
+
+  return {
+    ...module,
+
+    getReadOnlyProvider: vi.fn(module.getReadOnlyProvider),
+  }
+})
+
+const mockGetReadOnlyProvider = vi.mocked(getReadOnlyProvider)
+
 describe('Edit Zodiac route', () => {
   it('is possible to rename a route', async () => {
     mockRoute({ id: 'route-id' })
@@ -103,4 +122,29 @@ describe('Edit Zodiac route', () => {
       await expectRouteToBe('/routes')
     })
   })
+
+  describe('New route', () => {
+    it('uses the correct chain to fetch zodiac modules', async () => {
+      mockRoutes()
+
+      await render('/routes/route-id', [
+        {
+          path: '/routes/:routeId',
+          Component: EditRoute,
+        },
+      ])
+
+      await userEvent.click(screen.getByRole('combobox', { name: 'Chain' }))
+      await userEvent.click(
+        screen.getByRole('option', { name: 'Arbitrum One' })
+      )
+
+      await userEvent.type(
+        screen.getByRole('textbox', { name: 'Piloted Safe' }),
+        '0x5a064eC22bf46dfFAb8a23b52a442FC98bBBD0Fb'
+      )
+
+      expect(mockGetReadOnlyProvider).toHaveBeenCalledWith(42161)
+    })
+  })
 })

extension/src/panel/pages/edit-route/EditRoute.tsx → extension/src/panel/pages/routes/edit.$routeId/EditRoute.tsx

@@ -9,21 +9,22 @@ import {
 } from '@/components'
 import { INITIAL_DEFAULT_ROUTE, useExecutionRoutes } from '@/execution-routes'
 import { useDisconnectWalletConnectIfNeeded } from '@/providers'
-import { LegacyConnection } from '@/types'
+import { HexAddress, LegacyConnection } from '@/types'
 import { decodeRoleKey, encodeRoleKey } from '@/utils'
-import { KnownContracts } from '@gnosis.pm/zodiac'
-import { ZeroAddress } from 'ethers'
-import { useState } from 'react'
 import {
   queryRolesV1MultiSend,
   queryRolesV2MultiSend,
-} from '../../integrations/zodiac/rolesMultisend'
-import { useZodiacModules } from '../../integrations/zodiac/useZodiacModules'
+  useZodiacModules,
+} from '@/zodiac'
+import { KnownContracts } from '@gnosis.pm/zodiac'
+import { ZeroAddress } from 'ethers'
+import { useState } from 'react'
+import { formatPrefixedAddress } from 'ser-kit'
 import {
   asLegacyConnection,
   fromLegacyConnection,
-} from '../legacyConnectionMigrations'
-import { useConfirmClearTransactions } from '../useConfirmClearTransaction'
+} from '../../legacyConnectionMigrations'
+import { useConfirmClearTransactions } from '../../useConfirmClearTransaction'
 import { AvatarInput } from './AvatarInput'
 import { ChainSelect } from './ChainSelect'
 import { LaunchButton } from './LaunchButton'
@@ -53,8 +54,12 @@ export const EditRoute = () => {
 
   const decodedRoleKey = roleId && decodeRoleKey(roleId)
 
+  const prefixedAvatarAddress = formatPrefixedAddress(
+    chainId,
+    avatarAddress as HexAddress
+  )
   // TODO modules is a nested list, but we currently only render the top-level items
-  const { modules } = useZodiacModules(avatarAddress, routeId)
+  const { modules } = useZodiacModules(prefixedAvatarAddress)
 
   const [confirmClearTransactions, ConfirmationModal] =
     useConfirmClearTransactions()
@@ -157,7 +162,7 @@ export const EditRoute = () => {
           />
 
           <ZodiacMod
-            avatarAddress={avatarAddress}
+            avatarAddress={prefixedAvatarAddress}
             pilotAddress={pilotAddress}
             value={
               selectedModule

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

@@ -1,7 +1,7 @@
 import { Warning } from '@/components'
-import { MODULE_NAMES } from '../../../const'
-import { SupportedModuleType } from '../../integrations/zodiac/types'
-import { useZodiacModules } from '../../integrations/zodiac/useZodiacModules'
+import { MODULE_NAMES } from '@/const'
+import { SupportedModuleType, useZodiacModules } from '@/zodiac'
+import { PrefixedAddress } from 'ser-kit'
 import { ModSelect, NO_MODULE_OPTION } from './ModSelect'
 import { useRouteId } from './useRouteId'
 import { useSafeDelegates } from './useSafeDelegates'
@@ -13,7 +13,7 @@ type Value = {
 }
 
 type ZodiacModProps = {
-  avatarAddress: string
+  avatarAddress: PrefixedAddress
   pilotAddress: string
 
   value: Value | null
@@ -32,7 +32,7 @@ export const ZodiacMod = ({
     loading: loadingMods,
     isValidSafe,
     modules,
-  } = useZodiacModules(avatarAddress, routeId)
+  } = useZodiacModules(avatarAddress)
 
   const { safes } = useSafesWithOwner(pilotAddress, routeId)
   const { delegates } = useSafeDelegates(avatarAddress, routeId)
@@ -61,7 +61,7 @@ export const ZodiacMod = ({
           ...(pilotIsOwner || pilotIsDelegate ? [NO_MODULE_OPTION] : []),
           ...modules.map((mod) => ({
             value: mod.moduleAddress,
-            label: `${MODULE_NAMES[mod.type]} Mod`,
+            label: MODULE_NAMES[mod.type],
           })),
         ]}
         onChange={async (selected) => {

extension/src/panel/pages/routes/index.tsx

@@ -0,0 +1,8 @@
+import { RouteObject } from 'react-router-dom'
+import { EditRoute } from './edit.$routeId'
+import { ListRoutes } from './list'
+
+export const routes: RouteObject[] = [
+  { path: '', element: <ListRoutes /> },
+  { path: ':routeId', element: <EditRoute /> },
+]

extension/src/panel/pages/list-routes/Route.tsx → extension/src/panel/pages/routes/list/Route.tsx

@@ -1,16 +1,12 @@
-import {
-  ConnectionStack,
-  SecondaryButton,
-  SecondaryLinkButton,
-  Tag,
-} from '@/components'
+import { SecondaryButton, SecondaryLinkButton, Tag } from '@/components'
 import { useExecutionRoute, useRouteConnect } from '@/execution-routes'
 import { ExecutionRoute } from '@/types'
 import { formatDistanceToNow } from 'date-fns'
 import { Cable, PlugZap, Unplug } from 'lucide-react'
 import { useState } from 'react'
-import { asLegacyConnection } from '../legacyConnectionMigrations'
-import { ClearTransactionsModal } from '../useConfirmClearTransaction'
+import { ConnectionStack } from '../../ConnectionStack'
+import { asLegacyConnection } from '../../legacyConnectionMigrations'
+import { ClearTransactionsModal } from '../../useConfirmClearTransaction'
 
 interface RouteProps {
   route: ExecutionRoute

extension/src/panel/pages/transactions/RouteBubble/index.tsx

@@ -1,10 +1,11 @@
-import { Blockie, ConnectionStack } from '@/components'
+import { Blockie } from '@/components'
 import { useExecutionRoute } from '@/execution-routes'
 import { Transition } from '@headlessui/react'
 import { AlignJustify, Cog } from 'lucide-react'
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import Stick from 'react-stick'
+import { ConnectionStack } from '../../ConnectionStack'
 import { asLegacyConnection } from '../../legacyConnectionMigrations'
 
 export const RouteBubble = () => {
@@ -45,7 +46,7 @@ export const RouteBubble = () => {
         />
 
         <p className="overflow-hidden text-ellipsis whitespace-nowrap">
-          {connection.label}
+          {connection.label || <span className="italic">Unnamed route</span>}
         </p>
       </div>
 

extension/tsconfig.json

@@ -21,6 +21,7 @@
       "@/components": ["./src/components/index.ts"],
       "@/utils": ["./src/utils/index.ts"],
       "@/types": ["./src/types.ts"],
+      "@/const": ["./src/const.ts"],
       "@/chains": ["./src/chains/index.ts"],
       "@/execution-routes": ["./src/panel/execution-routes/index.ts"],
       "@/state": ["./src/panel/state/index.tsx"],
@@ -33,7 +34,8 @@
       "@/transaction-translation": [
         "./src/panel/transactionTranslations/index.ts"
       ],
-      "@/safe": ["./src/panel/integrations/safe/index.ts"]
+      "@/safe": ["./src/panel/integrations/safe/index.ts"],
+      "@/zodiac": ["./src/panel/integrations/zodiac/index.ts"]
     }
   },
   "include": ["src", "e2e", "test-utils", "./vitest.setup.mts"]