implement clear transactions route

extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/ClearTransactions.spec.ts

@@ -1,9 +1,45 @@
-import { describe, it, vi } from 'vitest'
+import { expectRouteToBe, render } from '@/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { action, ClearTransactions } from './ClearTransactions'
 
-vi.mock('')
+const { mockClearTransactions } = vi.hoisted(() => ({
+  mockClearTransactions: vi.fn(),
+}))
+
+vi.mock('./useClearTransactions', () => ({
+  useClearTransactions: () => mockClearTransactions,
+}))
 
 describe('Clear transactions', () => {
+  beforeEach(() => {
+    mockClearTransactions.mockResolvedValue(undefined)
+  })
+
   it('clears all transactions', async () => {
-    throw new Error('Fail')
+    await render('/test-route/clear-transactions/new-route', [
+      {
+        path: '/:activeRouteId/clear-transactions/:newActiveRouteId',
+        Component: ClearTransactions,
+        action,
+      },
+    ])
+
+    expect(mockClearTransactions).toHaveBeenCalled()
+  })
+
+  it('redirects to the new active route', async () => {
+    await render(
+      '/test-route/clear-transactions/new-route',
+      [
+        {
+          path: '/:activeRouteId/clear-transactions/:newActiveRouteId',
+          Component: ClearTransactions,
+          action,
+        },
+      ],
+      { inspectRoutes: ['/:activeRouteId'] },
+    )
+
+    await expectRouteToBe('/new-route')
   })
 })

extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/ClearTransactions.tsx

@@ -1 +1,20 @@
-export const ClearTransactions = () => null
+import { useEffect } from 'react'
+import { redirect, useSubmit, type ActionFunctionArgs } from 'react-router'
+import { useClearTransactions } from './useClearTransactions'
+
+export const action = async ({ params }: ActionFunctionArgs) => {
+  const { newActiveRouteId } = params
+
+  return redirect(`/${newActiveRouteId}`)
+}
+
+export const ClearTransactions = () => {
+  const clearTransactions = useClearTransactions()
+  const submit = useSubmit()
+
+  useEffect(() => {
+    clearTransactions().then(() => submit(null, { method: 'post' }))
+  }, [clearTransactions, submit])
+
+  return null
+}

extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/index.tsx

@@ -1,6 +1,7 @@
-import { ClearTransactions as Component } from './ClearTransactions'
+import { action, ClearTransactions as Component } from './ClearTransactions'
 
 export const ClearTransactions = {
   path: 'clear-transactions/:newActiveRouteId',
   element: <Component />,
+  action,
 }

extension/src/panel/pages/useClearTransactions.ts → extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/useClearTransactions.ts

@@ -8,8 +8,7 @@ export const useClearTransactions = () => {
   const provider = useProvider()
   const dispatch = useDispatch()
 
-  const hasTransactions = transactions.length > 0
-  const clearTransactions = useCallback(async () => {
+  return useCallback(async () => {
     if (transactions.length === 0) {
       return
     }
@@ -22,7 +21,5 @@ export const useClearTransactions = () => {
     if (provider instanceof ForkProvider) {
       await provider.deleteFork()
     }
-  }, [provider, transactions, dispatch])
-
-  return { hasTransactions, clearTransactions }
+  }, [dispatch, transactions, provider])
 }

extension/src/panel/pages/$activeRouteId/index.tsx

@@ -8,7 +8,7 @@ export const ActiveRoute: RouteObject = {
   element: <Component />,
   loader,
   children: [
-    { path: '', loader: () => redirect('transactions') },
+    { index: true, loader: () => redirect('transactions') },
     Transactions,
     ClearTransactions,
   ],