fix(bridge-ui): Chain id check

packages/bridge-ui/src/components/Transaction.svelte

@@ -25,6 +25,7 @@
   import { providers } from '../provider/providers';
   import { bridges } from '../bridge/bridges';
   import { tokenVaults } from '../vault/tokenVaults';
+  import { isOnCorrectChain } from '../utils/isOnCorrectChain';
 
   export let transaction: BridgeTransaction;
   export let fromChain: Chain;
@@ -77,6 +78,12 @@
         await switchChainAndSetSigner(chain);
       }
 
+      // confirm after switch chain that it worked.
+      if (!isOnCorrectChain($signer, bridgeTx.toChainId)) {
+        errorToast('You are connected to the wrong chain in your wallet');
+        return;
+      }
+
       // For now just handling this case for when the user has near 0 balance during their first bridge transaction to L2
       // TODO: estimate Claim transaction
       const userBalance = await $signer.getBalance('latest');
@@ -120,6 +127,12 @@
         await switchChainAndSetSigner(chain);
       }
 
+      // confirm after switch chain that it worked.
+      if (!isOnCorrectChain($signer, bridgeTx.fromChainId)) {
+        errorToast('You are connected to the wrong chain in your wallet');
+        return;
+      }
+
       const tx = await bridges[
         bridgeTx.message?.data === '0x' || !bridgeTx.message?.data
           ? BridgeType.ETH

packages/bridge-ui/src/components/form/BridgeForm.svelte

@@ -38,6 +38,7 @@
   import { chains } from '../../chain/chains';
   import { providers } from '../../provider/providers';
   import { tokenVaults } from '../../vault/tokenVaults';
+  import { isOnCorrectChain } from '../../utils/isOnCorrectChain';
 
   let amount: string;
   let amountInput: HTMLInputElement;
@@ -217,6 +218,11 @@
         throw Error('Invalid custom recipient address');
       }
 
+      if (!isOnCorrectChain($signer, $fromChain.id)) {
+        errorToast('You are connected to the wrong chain in your wallet');
+        return;
+      }
+
       const amountInWei = ethers.utils.parseUnits(amount, $token.decimals);
 
       const provider = providers[$toChain.id];
@@ -230,14 +236,17 @@
           $fromChain,
         );
 
+      const bridgeAddress = chains[$fromChain.id].bridgeAddress;
+      const tokenVaultAddress = tokenVaults[$fromChain.id];
+
       const bridgeOpts: BridgeOpts = {
         amountInWei: amountInWei,
         signer: $signer,
         tokenAddress: await addrForToken(),
         fromChainId: $fromChain.id,
         toChainId: $toChain.id,
-        tokenVaultAddress: tokenVaults[$fromChain.id],
-        bridgeAddress: chains[$fromChain.id].bridgeAddress,
+        tokenVaultAddress: tokenVaultAddress,
+        bridgeAddress: bridgeAddress,
         processingFeeInWei: getProcessingFee(),
         memo: memo,
         isBridgedTokenAlreadyDeployed,

packages/bridge-ui/src/components/modals/SwitchEthereumChainModal.svelte

@@ -27,6 +27,7 @@
 
 <Modal
   title={$_('switchChainModal.title')}
+  showXButton={false}
   isOpen={$isSwitchEthereumChainModalOpen}>
   <div class="w-100 text-center px-4">
     <span class="font-light text-sm">{$_('switchChainModal.subtitle')}</span>

packages/bridge-ui/src/utils/isOnCorrectChain.ts

@@ -0,0 +1,28 @@
+import type { ethers } from 'ethers';
+import { chains } from '../chain/chains';
+import { tokenVaults } from '../vault/tokenVaults';
+
+export async function isOnCorrectChain(
+  signer: ethers.Signer,
+  wantChain: number,
+) {
+  const signerChain = await signer.getChainId();
+  if (signerChain !== wantChain) {
+    return false;
+  }
+
+  const bridgeAddress = chains[wantChain].bridgeAddress;
+  const tokenVaultAddress = tokenVaults[wantChain];
+
+  const bridgeAddressCode = await signer.provider.getCode(bridgeAddress);
+
+  const tokenVaultAddressCode = await signer.provider.getCode(
+    tokenVaultAddress,
+  );
+
+  if (bridgeAddressCode === '0x' || tokenVaultAddressCode === '0x') {
+    return false;
+  }
+
+  return true;
+}