remove direct need for active execution route and add failing spec

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

@@ -86,6 +86,20 @@ describe('List routes', () => {
 
       await expectRouteToBe('/secondRoute')
     })
+
+    it('works without an active route', async () => {
+      await mockRoute({ id: 'test-route' })
+
+      await render(
+        '/routes/list',
+        [{ path: '/routes/list', Component: ListRoutes, loader, action }],
+        { inspectRoutes: ['/:activeRouteId'], initialSelectedRoute: null },
+      )
+
+      await userEvent.click(screen.getByRole('button', { name: 'Launch' }))
+
+      await expectRouteToBe('/test-route')
+    })
   })
 
   describe('Clearing transactions', () => {

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

@@ -1,14 +1,32 @@
 import { Breadcrumbs, InlineForm, Page, PrimaryButton } from '@/components'
-import { createRoute, 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,
   }
 }
 
@@ -31,7 +49,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 }
 
 export const ListRoutes = () => {
-  const { routes } = useLoaderData<typeof loader>()
+  const { routes, currentlyActiveAvatar } = useLoaderData<typeof loader>()
 
   return (
     <Page>
@@ -45,7 +63,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,25 +4,26 @@ 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 { useSubmit } from 'react-router'
+import type { PrefixedAddress } from 'ser-kit'
 import { ConnectionStack } from '../../ConnectionStack'
 import { asLegacyConnection } from '../../legacyConnectionMigrations'
 import { ClearTransactionsModal } from '../../useConfirmClearTransaction'
 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()
@@ -82,8 +83,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,12 +4,12 @@ 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 { type PropsWithChildren } from 'react'
 import { createMockRoute } from './creators'
 
 type RenderWraperProps = PropsWithChildren<{
   initialState?: TransactionState[]
-  initialSelectedRoute?: ExecutionRoute
+  initialSelectedRoute?: ExecutionRoute | null
   initialProvider?: Eip1193Provider
 }>
 
@@ -23,9 +23,13 @@ export const RenderWrapper = ({
     <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
    */