refactoring to get e2e tests back on track

deployables/app/app/components/pilotStatus/PilotStatus.tsx

@@ -1,9 +1,6 @@
 import { GhostButton } from '@zodiac/ui'
 import { Power, PowerOff } from 'lucide-react'
-import { useState } from 'react'
-import { useConnectChangeOnPilotEvents } from './useConnectChangeOnPilotEvents'
-import { useDisconnectWhenUnreachable } from './useDisconnectWhenUnreachable'
-import { usePingWhileDisconnected } from './usePingWhileDisconnected'
+import { useConnected } from './PilotStatusContext'
 
 export const PilotStatus = () => {
   const connected = useConnected()
@@ -32,18 +29,3 @@ export const PilotStatus = () => {
     </div>
   )
 }
-
-const useConnected = () => {
-  const [connected, setConnected] = useState(false)
-
-  useConnectChangeOnPilotEvents({
-    onConnect: () => setConnected(true),
-    onDisconnect: () => setConnected(false),
-  })
-  usePingWhileDisconnected(connected, { onConnect: () => setConnected(true) })
-  useDisconnectWhenUnreachable(connected, {
-    onDisconnect: () => setConnected(false),
-  })
-
-  return connected
-}

deployables/app/app/components/pilotStatus/PilotStatusContext.tsx

@@ -0,0 +1,34 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  type PropsWithChildren,
+} from 'react'
+import { useConnectChangeOnPilotEvents } from './useConnectChangeOnPilotEvents'
+import { useDisconnectWhenUnreachable } from './useDisconnectWhenUnreachable'
+import { usePingWhileDisconnected } from './usePingWhileDisconnected'
+
+const PilotStatusContext = createContext(false)
+
+export const ProvidePilotStatus = ({ children }: PropsWithChildren) => (
+  <PilotStatusContext value={useUpdatedConnectionStatus()}>
+    {children}
+  </PilotStatusContext>
+)
+
+const useUpdatedConnectionStatus = () => {
+  const [connected, setConnected] = useState(false)
+
+  useConnectChangeOnPilotEvents({
+    onConnect: () => setConnected(true),
+    onDisconnect: () => setConnected(false),
+  })
+  usePingWhileDisconnected(connected, { onConnect: () => setConnected(true) })
+  useDisconnectWhenUnreachable(connected, {
+    onDisconnect: () => setConnected(false),
+  })
+
+  return connected
+}
+
+export const useConnected = () => useContext(PilotStatusContext)

deployables/app/app/components/pilotStatus/index.ts

@@ -1 +1,2 @@
 export { PilotStatus } from './PilotStatus'
+export { ProvidePilotStatus, useConnected } from './PilotStatusContext'

deployables/app/app/routes/layout.tsx

@@ -1,52 +1,59 @@
-import { MinimumVersion, Navigation, PilotStatus } from '@/components'
+import {
+  MinimumVersion,
+  Navigation,
+  PilotStatus,
+  ProvidePilotStatus,
+} from '@/components'
 import { PilotType, ZodiacOsPlain } from '@zodiac/ui'
 import { ArrowUpFromLine, Edit, Landmark, Plus } from 'lucide-react'
 import { Outlet } from 'react-router'
 
 const Sidebar = () => {
   return (
-    <div className="flex h-full flex-1">
-      <div className="flex w-64 flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-800/80 dark:bg-zinc-950">
-        <div className="my-12 flex items-center justify-center gap-2">
-          <ZodiacOsPlain className="h-6" />
-          <PilotType className="h-7 dark:invert" />
-        </div>
-
-        <div className="flex-1">
-          <Navigation>
-            <Navigation.Section title="Tokens">
-              <Navigation.Link to="/tokens/send" icon={ArrowUpFromLine}>
-                Send tokens
-              </Navigation.Link>
-
-              <Navigation.Link to="/tokens/balances" icon={Landmark}>
-                Balances
-              </Navigation.Link>
-            </Navigation.Section>
-
-            <Navigation.Section title="Routes">
-              <Navigation.Link to="/new-route" icon={Plus}>
-                Create new route
-              </Navigation.Link>
-
-              <Navigation.Link to="/edit-route" icon={Edit}>
-                Edit a route
-              </Navigation.Link>
-            </Navigation.Section>
-          </Navigation>
-        </div>
+    <ProvidePilotStatus>
+      <div className="flex h-full flex-1">
+        <div className="flex w-64 flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-800/80 dark:bg-zinc-950">
+          <div className="my-12 flex items-center justify-center gap-2">
+            <ZodiacOsPlain className="h-6" />
+            <PilotType className="h-7 dark:invert" />
+          </div>
 
-        <MinimumVersion version="3.3.2">
-          <div className="flex justify-center py-8">
-            <PilotStatus />
+          <div className="flex-1">
+            <Navigation>
+              <Navigation.Section title="Tokens">
+                <Navigation.Link to="/tokens/send" icon={ArrowUpFromLine}>
+                  Send tokens
+                </Navigation.Link>
+
+                <Navigation.Link to="/tokens/balances" icon={Landmark}>
+                  Balances
+                </Navigation.Link>
+              </Navigation.Section>
+
+              <Navigation.Section title="Routes">
+                <Navigation.Link to="/new-route" icon={Plus}>
+                  Create new route
+                </Navigation.Link>
+
+                <Navigation.Link to="/edit-route" icon={Edit}>
+                  Edit a route
+                </Navigation.Link>
+              </Navigation.Section>
+            </Navigation>
           </div>
-        </MinimumVersion>
-      </div>
 
-      <div className="flex flex-1 flex-col">
-        <Outlet />
+          <MinimumVersion version="3.3.2">
+            <div className="flex justify-center py-8">
+              <PilotStatus />
+            </div>
+          </MinimumVersion>
+        </div>
+
+        <div className="flex flex-1 flex-col">
+          <Outlet />
+        </div>
       </div>
-    </div>
+    </ProvidePilotStatus>
   )
 }
 

deployables/app/e2e/edit-route/saveRoute.spec.ts

@@ -1,5 +1,4 @@
-import test, { expect } from '@playwright/test'
-import { loadExtension } from '../utils'
+import { expect, loadExtension, test } from '../utils'
 
 test.describe('Edit route', () => {
   test('it is possible to save a route', async ({ page }) => {

deployables/app/e2e/utils/fixture.ts

@@ -8,7 +8,7 @@ export const test = base.extend<{
 }>({
   context: async ({}, use) => {
     const pathToExtension = fileURLToPath(
-      new URL('../../public', import.meta.url),
+      new URL('../../../extension/public', import.meta.url),
     )
 
     const context = await chromium.launchPersistentContext('', {

deployables/app/e2e/utils/loadExtension.ts

@@ -1,10 +1,15 @@
 import type { Page } from '@playwright/test'
+import { expect } from './fixture'
 import { getExtensionPage } from './getExtensionPage'
 
 export const loadExtension = async (page: Page) => {
-  await page.goto('/')
+  await page.getByRole('button', { name: 'Open Pilot' }).click()
 
-  await page.getByRole('button', { name: 'Open extension' }).click()
+  const extension = await getExtensionPage(page)
 
-  return getExtensionPage(page)
+  await expect(
+    extension.getByRole('heading', { name: 'Welcome to Zodiac Pilot' }),
+  ).toBeInViewport()
+
+  return extension
 }

deployables/app/package.json

@@ -7,7 +7,7 @@
     "dev": "cross-env NODE_ENV=development node ./dev-server.js",
     "check-types": "react-router typegen && tsc -b",
     "test": "cross-env NODE_ENV=test vitest",
-    "test:e2e": "playwright test --headed",
+    "test:e2e": "PW_CHROMIUM_ATTACH_TO_OTHER=1 playwright test --headed",
     "test:e2e:ui": "pnpm test:e2e --ui",
     "lint": "eslint . --max-warnings=0"
   },

deployables/extension/src/panel/pages/$activeRouteId/transactions/RouteBubble/index.tsx

@@ -56,9 +56,9 @@ export const RouteBubble = () => {
           pilotAddress={pilotAddress}
         />
 
-        <p className="overflow-hidden text-ellipsis whitespace-nowrap">
+        <h1 className="overflow-hidden text-ellipsis whitespace-nowrap">
           {route.label || <span className="italic">Unnamed route</span>}
-        </p>
+        </h1>
       </div>
 
       <div className="flex shrink-0">