chore: remove the need for an active execution route at all times (#391)

* remove direct need for active execution route and add failing spec

* adjust spec

* adjust tests to default to not having an active route

* adjust specs

* remove now obsolete components

extension/src/panel/pages/$activeRouteId/transactions/Transactions.spec.ts

@@ -1,6 +1,6 @@
 import {
+  createMockRoute,
   createTransaction,
-  mockRoutes,
   mockTabSwitch,
   render,
 } from '@/test-utils'
@@ -11,19 +11,23 @@ import { Transactions } from './Transactions'
 describe('Transactions', () => {
   describe('Recording state', () => {
     it('hides the info when Pilot is ready', async () => {
-      await render('/test-route', [
-        { path: '/:activeRouteId', Component: Transactions },
-      ])
+      await render(
+        '/test-route/transactions',
+        [{ path: '/:activeRouteId/transactions', Component: Transactions }],
+        { initialSelectedRoute: createMockRoute({ id: 'test-route' }) },
+      )
 
       expect(
         screen.getByRole('heading', { name: 'Recording transactions' }),
       ).not.toHaveAccessibleDescription()
     })
 
     it('shows that transactions cannot be recorded when Pilot is not ready, yet', async () => {
-      await render('/test-route', [
-        { path: '/:activeRouteId', Component: Transactions },
-      ])
+      await render(
+        '/test-route/transactions',
+        [{ path: '/:activeRouteId/transactions', Component: Transactions }],
+        { initialSelectedRoute: createMockRoute({ id: 'test-route' }) },
+      )
 
       await mockTabSwitch({ url: 'chrome://extensions' })
 
@@ -35,11 +39,14 @@ describe('Transactions', () => {
 
   describe('List', () => {
     it('lists transactions', async () => {
-      await mockRoutes()
-
-      await render('/', [{ path: '/', Component: Transactions }], {
-        initialState: [createTransaction()],
-      })
+      await render(
+        '/test-route/transactions',
+        [{ path: '/:activeRouteId/transactions', Component: Transactions }],
+        {
+          initialState: [createTransaction()],
+          initialSelectedRoute: createMockRoute({ id: 'test-route' }),
+        },
+      )
 
       expect(
         screen.getByRole('region', { name: 'Raw transaction' }),
@@ -50,10 +57,11 @@ describe('Transactions', () => {
   describe('Submit', () => {
     it('disables the submit button when the current tab goes into a state where submit is not possible', async () => {
       await render(
-        '/test-route',
-        [{ path: '/:activeRouteId', Component: Transactions }],
+        '/test-route/transactions',
+        [{ path: '/:activeRouteId/transactions', Component: Transactions }],
         {
           initialState: [createTransaction()],
+          initialSelectedRoute: createMockRoute({ id: 'test-route' }),
         },
       )
 

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

@@ -1,14 +1,11 @@
 import { redirect, type RouteObject } from 'react-router'
 import { EditRoute } from './edit.$routeId'
 import { ListRoutes } from './list'
-import { loader, Routes } from './Routes'
 
 export const routes: RouteObject = {
   path: 'routes',
-  element: <Routes />,
-  loader,
   children: [
-    { path: '', loader: () => redirect('list') },
+    { index: true, loader: () => redirect('list') },
     ListRoutes,
     EditRoute,
   ],

extension/src/panel/pages/routes/list/ListRoutes.spec.ts

@@ -71,7 +71,6 @@ describe('List routes', () => {
         '/routes',
         [{ path: '/routes', Component: ListRoutes, loader, action }],
         {
-          initialSelectedRoute: selectedRoute,
           initialState: [createTransaction()],
           inspectRoutes: [
             '/:activeRouteId/clear-transactions/:newActiveRouteId',
@@ -99,13 +98,16 @@ describe('List routes', () => {
         label: 'First route',
       })
 
-      mockRoutes(selectedRoute, { id: 'secondRoute', label: 'Second route' })
+      await mockRoutes(selectedRoute, {
+        id: 'secondRoute',
+        label: 'Second route',
+      })
+      await saveLastUsedRouteId(selectedRoute.id)
 
       await render(
         '/routes',
         [{ path: '/routes', Component: ListRoutes, loader, action }],
         {
-          initialSelectedRoute: selectedRoute,
           initialState: [createTransaction()],
         },
       )
@@ -128,17 +130,17 @@ describe('List routes', () => {
         avatar: ETH_ZERO_ADDRESS,
       })
 
-      mockRoutes(selectedRoute, {
+      await mockRoutes(selectedRoute, {
         id: 'secondRoute',
         label: 'Second route',
         avatar: ETH_ZERO_ADDRESS,
       })
+      await saveLastUsedRouteId(selectedRoute.id)
 
       await render(
         '/routes',
         [{ path: '/routes', Component: ListRoutes, loader, action }],
         {
-          initialSelectedRoute: selectedRoute,
           initialState: [createTransaction()],
         },
       )
@@ -160,15 +162,15 @@ describe('List routes', () => {
         label: 'First route',
       })
 
-      mockRoutes(selectedRoute, { id: 'secondRoute', label: 'Second route' })
+      await mockRoutes(selectedRoute, {
+        id: 'secondRoute',
+        label: 'Second route',
+      })
+      await saveLastUsedRouteId(selectedRoute.id)
 
-      await render(
-        '/routes',
-        [{ path: '/routes', Component: ListRoutes, loader, action }],
-        {
-          initialSelectedRoute: selectedRoute,
-        },
-      )
+      await render('/routes', [
+        { path: '/routes', Component: ListRoutes, loader, action },
+      ])
 
       const { getByRole } = within(
         screen.getByRole('region', { name: 'Second route' }),

extension/src/panel/pages/routes/list/ListRoutes.tsx

@@ -1,14 +1,32 @@
 import { Breadcrumbs, InlineForm, Page, PrimaryButton } from '@/components'
-import { createRoute, getLastUsedRouteId, getRoutes } from '@/execution-routes'
+import {
+  createRoute,
+  getLastUsedRouteId,
+  getRoute,
+  getRoutes,
+} from '@/execution-routes'
 import { getString } from '@/utils'
 import { Plus } from 'lucide-react'
 import { redirect, useLoaderData, type ActionFunctionArgs } from 'react-router'
 import { Route } from './Route'
 import { Intent } from './intents'
 
 export const loader = async () => {
+  const routes = await getRoutes()
+  const activeRouteId = await getLastUsedRouteId()
+
+  if (activeRouteId != null) {
+    const { avatar } = await getRoute(activeRouteId)
+
+    return {
+      routes,
+      currentlyActiveAvatar: avatar,
+    }
+  }
+
   return {
-    routes: await getRoutes(),
+    routes,
+    currentlyActiveAvatar: null,
   }
 }
 
@@ -41,7 +59,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 }
 
 export const ListRoutes = () => {
-  const { routes } = useLoaderData<typeof loader>()
+  const { routes, currentlyActiveAvatar } = useLoaderData<typeof loader>()
 
   return (
     <Page>
@@ -55,7 +73,11 @@ export const ListRoutes = () => {
 
       <Page.Content>
         {routes.map((route) => (
-          <Route key={route.id} route={route} />
+          <Route
+            key={route.id}
+            route={route}
+            currentlyActiveAvatar={currentlyActiveAvatar}
+          />
         ))}
       </Page.Content>
 

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

@@ -4,24 +4,25 @@ import {
   SecondaryLinkButton,
   Tag,
 } from '@/components'
-import { useExecutionRoute, useRouteConnect } from '@/execution-routes'
+import { useRouteConnect } from '@/execution-routes'
 import { useTransactions } from '@/state'
 import type { ExecutionRoute } from '@/types'
 import { formatDistanceToNow } from 'date-fns'
 import { Cable, PlugZap, Unplug } from 'lucide-react'
 import { useRef, useState } from 'react'
+import type { PrefixedAddress } from 'ser-kit'
 import { ClearTransactionsModal } from '../../ClearTransactionsModal'
 import { ConnectionStack } from '../../ConnectionStack'
 import { asLegacyConnection } from '../../legacyConnectionMigrations'
 import { Intent } from './intents'
 
 interface RouteProps {
+  currentlyActiveAvatar: PrefixedAddress | null
   route: ExecutionRoute
 }
 
-export const Route = ({ route }: RouteProps) => {
+export const Route = ({ route, currentlyActiveAvatar }: RouteProps) => {
   const [connected, connect] = useRouteConnect(route)
-  const currentlySelectedRoute = useExecutionRoute()
   const [confirmClearTransactions, setConfirmClearTransactions] =
     useState(false)
   const transactions = useTransactions()
@@ -80,8 +81,7 @@ export const Route = ({ route }: RouteProps) => {
                 }
                 // we continue working with the same avatar, so don't have to clear the recorded transaction
                 const keepTransactionBundle =
-                  currentlySelectedRoute &&
-                  currentlySelectedRoute.avatar === route.avatar
+                  currentlyActiveAvatar === route.avatar
 
                 if (keepTransactionBundle) {
                   return

extension/test-utils/RenderWrapper.tsx

@@ -4,28 +4,31 @@ import { ProvideConnectProvider, ProvideInjectedWallet } from '@/providers'
 import { ProvideProvider } from '@/providers-ui'
 import { ProvideState, type TransactionState } from '@/state'
 import type { Eip1193Provider, ExecutionRoute } from '@/types'
-import type { PropsWithChildren } from 'react'
-import { createMockRoute } from './creators'
+import { type PropsWithChildren } from 'react'
 
 type RenderWraperProps = PropsWithChildren<{
   initialState?: TransactionState[]
-  initialSelectedRoute?: ExecutionRoute
+  initialSelectedRoute?: ExecutionRoute | null
   initialProvider?: Eip1193Provider
 }>
 
 export const RenderWrapper = ({
   children,
   initialState,
-  initialSelectedRoute = createMockRoute(),
+  initialSelectedRoute = null,
   initialProvider,
 }: RenderWraperProps) => (
   <ProvidePort>
     <ProvideState initialState={initialState}>
       <ProvideConnectProvider initialProvider={initialProvider}>
         <ProvideInjectedWallet>
-          <ProvideExecutionRoute route={initialSelectedRoute}>
-            <ProvideProvider>{children}</ProvideProvider>
-          </ProvideExecutionRoute>
+          {initialSelectedRoute == null ? (
+            children
+          ) : (
+            <ProvideExecutionRoute route={initialSelectedRoute}>
+              <ProvideProvider>{children}</ProvideProvider>
+            </ProvideExecutionRoute>
+          )}
         </ProvideInjectedWallet>
       </ProvideConnectProvider>
     </ProvideState>

extension/test-utils/render.tsx

@@ -39,7 +39,7 @@ type Options = Parameters<typeof baseRender>[1] & {
   /**
    * Pass a route id here to define the currently launched route
    */
-  initialSelectedRoute?: ExecutionRoute
+  initialSelectedRoute?: ExecutionRoute | null
   /**
    * Pass a custom provider instance to be used as the connect provider
    */