add spec and update layout for wrong chain

gnosisguild · Oct 22, 2024 · 5d5962c · 5d5962c
1 parent 2d5cabf
commit 5d5962c
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 31 deletions.
diff --git a/extension/e2e/accountHandling.spec.ts b/extension/e2e/accountHandling.spec.ts
@@ -1,9 +1,12 @@
 import { Page } from '@playwright/test'
 import { expect, test } from './fixture'
 import { loadExtension } from './loadExtension'
-import { mockWeb3 } from './mockWeb3'
+import { defaultMockAccount, mockWeb3 } from './mockWeb3'
 
-const openConfiguration = async (page: Page, account: `0x${string}`) => {
+const openConfiguration = async (
+  page: Page,
+  account: `0x${string}` = defaultMockAccount
+) => {
   await page.getByRole('link', { name: 'Configure routes' }).click()
   await page.getByRole('button', { name: 'Add Route' }).click()
   await page.getByRole('button', { name: 'Connect with MetaMask' }).click()
@@ -14,13 +17,11 @@ test.describe('Locked account', () => {
   const account = '0x1000000000000000000000000000000000000000'
 
   test('handles wallet disconnect gracefully', async ({ page }) => {
-    const { lockWallet } = await mockWeb3(page, {
-      accounts: [account],
-    })
+    const { lockWallet } = await mockWeb3(page)
 
     const extension = await loadExtension(page)
 
-    await openConfiguration(extension, account)
+    await openConfiguration(extension)
     await lockWallet()
 
     await expect(
@@ -46,13 +47,11 @@ test.describe('Locked account', () => {
   })
 
   test('it is possible to disconnect a locked account', async ({ page }) => {
-    const { lockWallet } = await mockWeb3(page, {
-      accounts: [account],
-    })
+    const { lockWallet } = await mockWeb3(page)
 
     const extension = await loadExtension(page)
 
-    await openConfiguration(extension, account)
+    await openConfiguration(extension)
     await lockWallet()
 
     await extension.getByRole('button', { name: 'Disconnect' }).click()
@@ -86,3 +85,33 @@ test.describe('Account unavailable', () => {
     )
   })
 })
+
+test.describe('Wrong chain selected', () => {
+  test('it is possible to switch to the correct chain', async ({ page }) => {
+    const { switchChain } = await mockWeb3(page)
+
+    const extension = await loadExtension(page)
+
+    await openConfiguration(extension)
+    await switchChain(10)
+
+    await expect(
+      extension.getByRole('alert', { name: 'Chain mismatch' })
+    ).toBeInViewport()
+  })
+
+  test('it is possible to switch back to the connected chain', async ({
+    page,
+  }) => {
+    const { switchChain } = await mockWeb3(page)
+
+    const extension = await loadExtension(page)
+
+    await openConfiguration(extension)
+    await switchChain(10)
+
+    await expect(
+      extension.getByRole('button', { name: 'Switch wallet to Ethereum' })
+    ).toBeInViewport()
+  })
+})
diff --git a/extension/e2e/mockWeb3.ts b/extension/e2e/mockWeb3.ts
@@ -2,6 +2,7 @@ import { invariant } from '@epic-web/invariant'
 import { Page } from '@playwright/test'
 import { readFileSync } from 'fs'
 import { MutableRefObject } from 'react'
+import { ChainId } from 'ser-kit'
 import { fileURLToPath } from 'url'
 
 const web3Content: MutableRefObject<string | null> = { current: null }
@@ -17,7 +18,12 @@ declare global {
 
 type MockOptions = { accounts: string[] }
 
-export const mockWeb3 = async (page: Page, { accounts }: MockOptions) => {
+export const defaultMockAccount = '0x1000000000000000000000000000000000000000'
+
+export const mockWeb3 = async (
+  page: Page,
+  { accounts }: MockOptions = { accounts: [defaultMockAccount] }
+) => {
   page.addInitScript({
     content: `${getLibraryCode()}\n(() => { Web3Mock.mock(${JSON.stringify({ blockchain: 'ethereum', accounts: { return: accounts } })})})()`,
   })
@@ -36,6 +42,14 @@ export const mockWeb3 = async (page: Page, { accounts }: MockOptions) => {
         [accounts]
       )
     },
+    switchChain(chainId: ChainId) {
+      return getConnectFrame(page).evaluate(
+        ([chainId]) => {
+          Web3Mock.trigger('chainChanged', `0x${chainId}`)
+        },
+        [chainId]
+      )
+    },
   }
 }
 

diff --git a/extension/src/panel/routes/ConnectButton/index.tsx b/extension/src/panel/routes/ConnectButton/index.tsx
@@ -158,27 +158,24 @@ const ConnectButton: React.FC<Props> = ({ route, onConnect, onDisconnect }) => {
 
     // Injected wallet: right account, wrong chain
     if (accountInWallet && injectedWallet.chainId !== chainId) {
+      const chainName = CHAIN_NAME[chainId] || `#${chainId}`
+
       return (
-        <div
-          className={classNames(
-            classes.connectedContainer,
-            classes.connectionWarning
-          )}
-        >
-          <RawAddress>{validateAddress(pilotAddress)}</RawAddress>
-          <Tag head={<RiAlertLine />} color="warning">
-            Chain mismatch
-          </Tag>
-          {chainId && (
-            <Button
-              className={classes.disconnectButton}
-              onClick={() => {
-                injectedWallet.switchChain(chainId)
-              }}
-            >
-              Switch wallet to {CHAIN_NAME[chainId] || `#${chainId}`}
-            </Button>
-          )}
+        <div className="flex flex-col gap-4">
+          <Alert title="Chain mismatch">
+            The connected wallet belongs to a different chain. To use it you
+            need to switch back to {chainName}
+          </Alert>
+
+          <Account providerType={route.providerType}>{pilotAddress}</Account>
+
+          <Button
+            onClick={() => {
+              injectedWallet.switchChain(chainId)
+            }}
+          >
+            Switch wallet to {chainName}
+          </Button>
         </div>
       )
     }