feat(pilot-app): show v2 roles config in companion app

deployables/app/app/components/ZodiacMod.tsx

@@ -1,4 +1,5 @@
 import {
+  decodeRoleKey,
   SupportedZodiacModuleType,
   ZODIAC_MODULE_NAMES,
   type ZodiacModule,
@@ -151,6 +152,14 @@ export const ZodiacMod = ({
           placeholder="0"
         />
       )}
+
+      {selectedModule?.type === SupportedZodiacModuleType.ROLES_V2 && (
+        <TextInput
+          label="Role Key"
+          defaultValue={getRoleKey(waypoints) ?? ''}
+          placeholder="Enter key as bytes32 hex string or in human-readable decoding"
+        />
+      )}
     </>
   )
 }
@@ -179,6 +188,16 @@ const getRoleId = (waypoints?: Waypoints) => {
   return moduleWaypoint.connection.roles[0]
 }
 
+const getRoleKey = (waypoints?: Waypoints) => {
+  const roleId = getRoleId(waypoints)
+
+  if (roleId == null) {
+    return null
+  }
+
+  return decodeRoleKey(roleId)
+}
+
 const getModuleWaypoint = (waypoints?: Waypoints) => {
   if (waypoints == null) {
     return null

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

@@ -2,7 +2,11 @@ import { render } from '@/test-utils'
 import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Chain, CHAIN_NAME } from '@zodiac/chains'
-import { fetchZodiacModules, SupportedZodiacModuleType } from '@zodiac/modules'
+import {
+  encodeRoleKey,
+  fetchZodiacModules,
+  SupportedZodiacModuleType,
+} from '@zodiac/modules'
 import type { initSafeApiKit } from '@zodiac/safe'
 import { ProviderType } from '@zodiac/schema'
 import {
@@ -227,5 +231,40 @@ describe('Edit route', () => {
         roleId,
       )
     })
+
+    it('shows the v2 role config when the v2 route mod is used', async () => {
+      const moduleAddress = randomAddress()
+
+      mockFetchZodiacModules.mockResolvedValue([
+        {
+          type: SupportedZodiacModuleType.ROLES_V2,
+          moduleAddress,
+        },
+      ])
+
+      const route = createMockExecutionRoute({
+        avatar: formatPrefixedAddress(
+          Chain.ETH,
+          '0x58e6c7ab55Aa9012eAccA16d1ED4c15795669E1C',
+        ),
+        waypoints: [
+          createStartingWaypoint(),
+          createRoleWaypoint({
+            moduleAddress,
+            roleId: encodeRoleKey('TEST-KEY'),
+            version: 2,
+          }),
+        ],
+        providerType: ProviderType.InjectedWallet,
+      })
+
+      await render('/edit-route', {
+        searchParams: { route: btoa(JSON.stringify(route)) },
+      })
+
+      expect(screen.getByRole('textbox', { name: 'Role Key' })).toHaveValue(
+        'TEST-KEY',
+      )
+    })
   })
 })

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

@@ -9,14 +9,7 @@ import {
 import { useDisconnectWalletConnectIfNeeded } from '@/providers'
 import { useTransactions } from '@/state'
 import type { HexAddress, LegacyConnection } from '@/types'
-import {
-  decodeRoleKey,
-  encodeRoleKey,
-  formData,
-  getInt,
-  getOptionalString,
-  getString,
-} from '@/utils'
+import { formData, getInt, getOptionalString, getString } from '@/utils'
 import {
   fetchZodiacModules,
   queryRolesV1MultiSend,
@@ -25,6 +18,7 @@ import {
 } from '@/zodiac'
 import { invariantResponse } from '@epic-web/invariant'
 import { EOA_ZERO_ADDRESS } from '@zodiac/chains'
+import { decodeRoleKey, encodeRoleKey } from '@zodiac/modules'
 import {
   Breadcrumbs,
   Error,

deployables/extension/src/panel/pages/routes/edit.$routeId/useConnectionDryRun.tsx

@@ -8,13 +8,12 @@ import type {
 } from '@/types'
 import {
   decodeGenericError,
-  decodeRoleKey,
   decodeRolesV1Error,
   decodeRolesV2Error,
   isSmartContractAddress,
   validateAddress,
 } from '@/utils'
-import { SupportedZodiacModuleType } from '@zodiac/modules'
+import { decodeRoleKey, SupportedZodiacModuleType } from '@zodiac/modules'
 import { useEffect, useState } from 'react'
 import { asLegacyConnection } from '../../legacyConnectionMigrations'
 import { wrapRequest } from './wrapRequest'

deployables/extension/src/utils/index.ts

@@ -9,7 +9,6 @@ export { injectScript } from './injectScript'
 export { isValidTab } from './isValidTab'
 export { reloadActiveTab } from './reloadActiveTab'
 export { reloadTab } from './reloadTab'
-export * from './roleKey'
 export { sendMessageToTab } from './sendMessageToTab'
 export { shortenAddress } from './shortenAddress'
 export { sleep } from './sleep'

packages/modules/src/index.ts

@@ -1,4 +1,5 @@
 export { fetchZodiacModules } from './fetchZodiacModules'
+export { decodeRoleKey, encodeRoleKey } from './roleKey'
 export {
   SUPPORTED_ZODIAC_MODULES,
   SupportedZodiacModuleType,