redirect from edit route to new clear transactions route

gnosisguild · Dec 18, 2024 · 29dba9b · 29dba9b
1 parent b5fcf7a
commit 29dba9b
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 4 deletions.
diff --git a/extension/src/components/InlineForm.tsx b/extension/src/components/InlineForm.tsx
@@ -1,8 +1,10 @@
 import type { ComponentPropsWithRef } from 'react'
 import { Form } from 'react-router'
 
+export type InlineFormContext = Record<string, string | number | undefined>
+
 type InlineFormProps = ComponentPropsWithRef<typeof Form> & {
-  context?: Record<string, string | number | undefined>
+  context?: InlineFormContext
   intent?: string
 }
 

diff --git a/extension/src/components/index.ts b/extension/src/components/index.ts
@@ -7,6 +7,7 @@ export { ConfirmationModal, useConfirmationModal } from './ConfirmationModal'
 export { CopyToClipboard } from './CopyToClipboard'
 export { Divider } from './Divider'
 export { InlineForm } from './InlineForm'
+export type { InlineFormContext } from './InlineForm'
 export * from './inputs'
 export * from './logos'
 export { Modal } from './Modal'

diff --git a/extension/src/panel/pages/ClearTransactionsModal.tsx b/extension/src/panel/pages/ClearTransactionsModal.tsx
@@ -1,8 +1,15 @@
-import { GhostButton, InlineForm, Modal, PrimaryButton } from '@/components'
+import {
+  GhostButton,
+  InlineForm,
+  Modal,
+  PrimaryButton,
+  type InlineFormContext,
+} from '@/components'
 
 type ClearTransactionsModalProps = {
   open: boolean
   newActiveRouteId: string
+  additionalContext?: InlineFormContext
   intent: string
   onClose: () => void
 }
@@ -11,6 +18,7 @@ export const ClearTransactionsModal = ({
   open,
   newActiveRouteId,
   intent,
+  additionalContext,
   onClose,
 }: ClearTransactionsModalProps) => {
   return (
@@ -26,7 +34,7 @@ export const ClearTransactionsModal = ({
           Cancel
         </GhostButton>
 
-        <InlineForm context={{ newActiveRouteId }}>
+        <InlineForm context={{ newActiveRouteId, ...additionalContext }}>
           <PrimaryButton submit intent={intent} style="contrast">
             Clear transactions
           </PrimaryButton>

diff --git a/extension/src/panel/pages/routes/edit.$routeId/EditRoute.spec.tsx b/extension/src/panel/pages/routes/edit.$routeId/EditRoute.spec.tsx
@@ -598,6 +598,57 @@ describe('Edit Zodiac route', () => {
           screen.queryByRole('dialog', { name: 'Clear transactions' }),
         ).not.toBeInTheDocument()
       })
+
+      it('is possible to launch a new route and clear transactions', async () => {
+        const selectedRoute = createMockRoute({
+          id: 'firstRoute',
+          label: 'First route',
+          avatar: randomPrefixedAddress(),
+        })
+
+        await mockRoutes(selectedRoute, {
+          id: 'another-route',
+          avatar: randomPrefixedAddress(),
+        })
+        await saveLastUsedRouteId('another-route')
+
+        await render(
+          '/routes/edit/firstRoute',
+          [
+            {
+              path: '/routes/edit/:routeId',
+              Component: EditRoute,
+              loader,
+              action,
+            },
+          ],
+          {
+            initialState: [createTransaction()],
+            inspectRoutes: [
+              '/:activeRouteId/clear-transactions/:newActiveRouteId',
+            ],
+          },
+        )
+
+        await userEvent.click(
+          screen.getByRole('button', { name: 'Clear piloted Safe' }),
+        )
+
+        await userEvent.type(
+          screen.getByRole('textbox', { name: 'Piloted Safe' }),
+          randomAddress(),
+        )
+
+        await userEvent.click(
+          screen.getByRole('button', { name: 'Save & Launch' }),
+        )
+
+        await userEvent.click(
+          screen.getByRole('button', { name: 'Clear transactions' }),
+        )
+
+        await expectRouteToBe('/another-route/clear-transactions/firstRoute')
+      })
     })
   })
 })
diff --git a/extension/src/panel/pages/routes/edit.$routeId/EditRoute.tsx b/extension/src/panel/pages/routes/edit.$routeId/EditRoute.tsx
@@ -167,6 +167,31 @@ export const action = async ({ params, request }: ActionFunctionArgs) => {
 
       return redirect(`/${routeId}`)
     }
+
+    case Intent.clearTransactions: {
+      const lastUsedRouteId = await getLastUsedRouteId()
+
+      await saveRoute(
+        fromLegacyConnection({
+          id: routeId,
+          label: getString(data, 'label'),
+          chainId: getInt(data, 'chainId') as ChainId,
+          avatarAddress: getString(data, 'avatarAddress'),
+          moduleAddress: getString(data, 'moduleAddress'),
+          pilotAddress: getString(data, 'pilotAddress'),
+          providerType: getInt(data, 'providerType'),
+          moduleType: getOptionalString(
+            data,
+            'moduleType',
+          ) as SupportedModuleType,
+          multisend: getOptionalString(data, 'multisend'),
+          multisendCallOnly: getOptionalString(data, 'multisendCallOnly'),
+          roleId: getOptionalString(data, 'roleId'),
+        }),
+      )
+
+      return redirect(`/${lastUsedRouteId}/clear-transactions/${routeId}`)
+    }
   }
 }
 
@@ -442,9 +467,11 @@ export const EditRoute = () => {
       </Page>
 
       <ClearTransactionsModal
+        newActiveRouteId={initialRouteState.id}
+        additionalContext={{ ...legacyConnection }}
         open={confirmClearTransactions}
+        intent={Intent.clearTransactions}
         onClose={() => setConfirmClearTransactions(false)}
-        onConfirm={() => submit(formRef.current, { method: 'post' })}
       />
     </>
   )

diff --git a/extension/src/panel/pages/routes/edit.$routeId/intents.ts b/extension/src/panel/pages/routes/edit.$routeId/intents.ts
@@ -1,4 +1,5 @@
 export enum Intent {
   saveRoute = 'saveRoute',
   removeRoute = 'removeRoute',
+  clearTransactions = 'clearTransactions',
 }