feat: handle account disconnects (lock wallet)

extension/e2e/errorHandling.spec.ts

@@ -0,0 +1,23 @@
+import { mock } from '@depay/web3-mock'
+import { expect, test } from './fixture'
+import { loadExtension } from './loadExtension'
+import { mockWeb3 } from './mockWeb3'
+
+test('handles wallet disconnect gracefully', async ({ page, extensionId }) => {
+  mockWeb3(page, () =>
+    mock({
+      blockchain: 'ethereum',
+      accounts: { return: ['0x0000000000000000000000000000000000000000'] },
+    })
+  )
+
+  const extension = await loadExtension(page, extensionId)
+
+  await extension.getByRole('link', { name: 'Configure routes' }).click()
+  await extension.getByRole('button', { name: 'Add Route' }).click()
+  await extension.getByRole('button', { name: 'Connect with MetaMask' }).click()
+
+  await expect(
+    extension.getByRole('alert', { name: 'Account disconnected' })
+  ).toBeInViewport()
+})

extension/e2e/mockWeb3.ts

@@ -0,0 +1,25 @@
+import { Page } from '@playwright/test'
+import { readFileSync } from 'fs'
+import { MutableRefObject } from 'react'
+import { fileURLToPath } from 'url'
+
+const web3Content: MutableRefObject<string | null> = { current: null }
+
+export const mockWeb3 = (page: Page, fn: () => unknown) => {
+  page.addInitScript({
+    content: `${getLibraryCode()}\n(${fn.toString().replaceAll('mock', 'Web3Mock.mock')})()`,
+  })
+}
+
+const getLibraryCode = () => {
+  if (web3Content.current == null) {
+    web3Content.current = readFileSync(
+      fileURLToPath(
+        import.meta.resolve('@depay/web3-mock/dist/umd/index.bundle.js')
+      ),
+      'utf-8'
+    )
+  }
+
+  return web3Content.current
+}

extension/src/components/RouteBubble/index.tsx

@@ -51,6 +51,7 @@ const RouteBubble: React.FC = () => {
         </Box>
         <Link to="/routes">
           <Box bg className={classes.connectionsContainer}>
+            <span className="sr-only">Configure routes</span>
             <ConnectionsIcon height="100%" width="100%" />
           </Box>
         </Link>