diff --git a/extension/src/panel/pages/routes/list/ListRoutes.spec.ts b/extension/src/panel/pages/routes/list/ListRoutes.spec.ts index 8430f63e4..2938a34a6 100644 --- a/extension/src/panel/pages/routes/list/ListRoutes.spec.ts +++ b/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', () => { diff --git a/extension/src/panel/pages/routes/list/ListRoutes.tsx b/extension/src/panel/pages/routes/list/ListRoutes.tsx index e866e83e2..4a0fb1f24 100644 --- a/extension/src/panel/pages/routes/list/ListRoutes.tsx +++ b/extension/src/panel/pages/routes/list/ListRoutes.tsx @@ -1,5 +1,10 @@ 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' @@ -7,8 +12,21 @@ 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() + const { routes, currentlyActiveAvatar } = useLoaderData() return ( @@ -45,7 +63,11 @@ export const ListRoutes = () => { {routes.map((route) => ( - + ))} diff --git a/extension/src/panel/pages/routes/list/Route.tsx b/extension/src/panel/pages/routes/list/Route.tsx index 1105e2966..fc112f8bf 100644 --- a/extension/src/panel/pages/routes/list/Route.tsx +++ b/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 diff --git a/extension/test-utils/RenderWrapper.tsx b/extension/test-utils/RenderWrapper.tsx index a2974064a..6598b3068 100644 --- a/extension/test-utils/RenderWrapper.tsx +++ b/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 = ({ - - {children} - + {initialSelectedRoute == null ? ( + children + ) : ( + + {children} + + )} diff --git a/extension/test-utils/render.tsx b/extension/test-utils/render.tsx index c3b542715..dfae4d1d2 100644 --- a/extension/test-utils/render.tsx +++ b/extension/test-utils/render.tsx @@ -39,7 +39,7 @@ type Options = Parameters[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 */