From 2cb51255ee44ba49d1e2444f2d56433807dda81e Mon Sep 17 00:00:00 2001
From: Francisco Ramos <jscriptcoder@gmail.com>
Date: Fri, 9 Jun 2023 16:04:21 +0200
Subject: [PATCH] fix(bridge-ui): mobile issues (#13927)

---
 .../BridgeForm/AddTokenToWallet.svelte        |  2 +-
 .../components/BridgeForm/BridgeForm.svelte   | 12 ++-
 .../components/BridgeForm/SelectChain.svelte  |  6 +-
 .../src/components/ChainDropdown.svelte       |  4 +-
 .../src/components/Faucet/Faucet.svelte       | 16 ++--
 .../src/components/SwitchChainModal.svelte    | 14 +--
 .../Transactions/Transaction.svelte           |  7 +-
 .../src/utils/injectedProvider.spec.ts        | 88 +++++++++++++++++++
 .../bridge-ui/src/utils/injectedProvider.ts   | 52 +++++++++++
 .../bridge-ui/src/utils/isMobileDevice.ts     | 25 ++++++
 .../bridge-ui/src/utils/mintERC20.spec.ts     | 20 +----
 packages/bridge-ui/src/utils/mintERC20.ts     |  8 --
 packages/bridge-ui/src/utils/rpcCall.spec.ts  | 46 ----------
 packages/bridge-ui/src/utils/rpcCall.ts       | 48 ----------
 .../bridge-ui/src/utils/selectChain.spec.ts   | 83 -----------------
 packages/bridge-ui/src/utils/selectChain.ts   | 35 --------
 .../bridge-ui/src/utils/switchNetwork.spec.ts | 60 +++++++++++++
 packages/bridge-ui/src/utils/switchNetwork.ts | 43 +++++++++
 packages/bridge-ui/src/wagmi/client.ts        | 13 +--
 packages/bridge-ui/src/wagmi/watcher.ts       | 15 +++-
 20 files changed, 321 insertions(+), 276 deletions(-)
 create mode 100644 packages/bridge-ui/src/utils/injectedProvider.spec.ts
 create mode 100644 packages/bridge-ui/src/utils/isMobileDevice.ts
 delete mode 100644 packages/bridge-ui/src/utils/rpcCall.spec.ts
 delete mode 100644 packages/bridge-ui/src/utils/rpcCall.ts
 delete mode 100644 packages/bridge-ui/src/utils/selectChain.spec.ts
 delete mode 100644 packages/bridge-ui/src/utils/selectChain.ts
 create mode 100644 packages/bridge-ui/src/utils/switchNetwork.spec.ts
 create mode 100644 packages/bridge-ui/src/utils/switchNetwork.ts

diff --git a/packages/bridge-ui/src/components/BridgeForm/AddTokenToWallet.svelte b/packages/bridge-ui/src/components/BridgeForm/AddTokenToWallet.svelte
index 66709224ee..96e7351104 100644
--- a/packages/bridge-ui/src/components/BridgeForm/AddTokenToWallet.svelte
+++ b/packages/bridge-ui/src/components/BridgeForm/AddTokenToWallet.svelte
@@ -2,7 +2,7 @@
   import { L1_CHAIN_ID } from '../../constants/envVars';
   import type { Token } from '../../domain/token';
   import { token } from '../../store/token';
-  import { errorCodes, rpcCall } from '../../utils/rpcCall';
+  import { errorCodes, rpcCall } from '../../utils/injectedProvider';
   import MetaMask from '../icons/MetaMask.svelte';
   import { errorToast, warningToast } from '../NotificationToast.svelte';
 
diff --git a/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte b/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
index a1e329fe2d..63307fd804 100644
--- a/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
+++ b/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
@@ -21,9 +21,10 @@
     pendingTransactions,
     transactions as transactionsStore,
   } from '../../store/transaction';
-  import { isETH } from '../../token/tokens';
+  import { isERC20, isETH } from '../../token/tokens';
   import { checkIfTokenIsDeployedCrossChain } from '../../utils/checkIfTokenIsDeployedCrossChain';
   import { getAddressForToken } from '../../utils/getAddressForToken';
+  import { hasInjectedProvider } from '../../utils/injectedProvider';
   import { isOnCorrectChain } from '../../utils/isOnCorrectChain';
   import { getLogger } from '../../utils/logger';
   import { truncateString } from '../../utils/truncateString';
@@ -138,7 +139,9 @@
     const parsedAmount = ethers.utils.parseUnits(amount, token.decimals);
 
     log(
-      `Checking allowance for token ${token.symbol} and amount ${parsedAmount}`,
+      `Checking allowance for token ${
+        token.symbol
+      } and amount ${parsedAmount.toString()}`,
     );
 
     const isRequired = await $activeBridge.requiresAllowance({
@@ -277,7 +280,7 @@
     const hasEnoughBalance = balanceAvailableForTx.gte(requiredGas);
 
     log(
-      `Is required gas ${requiredGas} less than available balance ${balanceAvailableForTx}? ${hasEnoughBalance}`,
+      `Is required gas ${requiredGas.toString()} less than available balance ${balanceAvailableForTx.toString()}? ${hasEnoughBalance}`,
     );
 
     return hasEnoughBalance;
@@ -514,7 +517,8 @@
   }
 
   function toggleShowAddTokenToWallet(token: Token) {
-    showAddToWallet = token.symbol !== 'ETH';
+    // If there is no injected provider we can't add the token to the wallet
+    showAddToWallet = isERC20(token) && hasInjectedProvider();
   }
 
   $: updateTokenBalance($signer, $token).finally(() => {
diff --git a/packages/bridge-ui/src/components/BridgeForm/SelectChain.svelte b/packages/bridge-ui/src/components/BridgeForm/SelectChain.svelte
index 5d73272635..8615b04e7c 100644
--- a/packages/bridge-ui/src/components/BridgeForm/SelectChain.svelte
+++ b/packages/bridge-ui/src/components/BridgeForm/SelectChain.svelte
@@ -3,10 +3,10 @@
   import { ArrowRight } from 'svelte-heros-v2';
 
   import { mainnetChain, taikoChain } from '../../chain/chains';
-  import { destChain,srcChain } from '../../store/chain';
+  import { destChain, srcChain } from '../../store/chain';
   import { signer } from '../../store/signer';
   import { pendingTransactions } from '../../store/transaction';
-  import { selectChain } from '../../utils/selectChain';
+  import { switchNetwork } from '../../utils/switchNetwork';
   import {
     errorToast,
     successToast,
@@ -22,7 +22,7 @@
     const chain = $srcChain === mainnetChain ? taikoChain : mainnetChain;
 
     try {
-      await selectChain(chain);
+      await switchNetwork(chain.id);
       successToast('Successfully changed chain.');
     } catch (error) {
       console.error(error);
diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
index 4ec10756cc..4075470bcb 100644
--- a/packages/bridge-ui/src/components/ChainDropdown.svelte
+++ b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -7,7 +7,7 @@
   import { srcChain } from '../store/chain';
   import { signer } from '../store/signer';
   import { pendingTransactions } from '../store/transaction';
-  import { selectChain } from '../utils/selectChain';
+  import { switchNetwork } from '../utils/switchNetwork';
   import {
     errorToast,
     successToast,
@@ -26,7 +26,7 @@
     }
 
     try {
-      await selectChain(chain);
+      await switchNetwork(chain.id);
       successToast('Successfully changed chain.');
     } catch (error) {
       console.error(error);
diff --git a/packages/bridge-ui/src/components/Faucet/Faucet.svelte b/packages/bridge-ui/src/components/Faucet/Faucet.svelte
index 1292ef652c..282f9e0982 100644
--- a/packages/bridge-ui/src/components/Faucet/Faucet.svelte
+++ b/packages/bridge-ui/src/components/Faucet/Faucet.svelte
@@ -2,7 +2,6 @@
   import { UserRejectedRequestError } from '@wagmi/core';
   import { ethers, type Signer } from 'ethers';
 
-  import { chains } from '../../chain/chains';
   import {
     L1_CHAIN_ID,
     L1_CHAIN_NAME,
@@ -19,7 +18,7 @@
   import { getIsMintedWithEstimation } from '../../utils/getIsMintedWithEstimation';
   import { getLogger } from '../../utils/logger';
   import { mintERC20 } from '../../utils/mintERC20';
-  import { selectChain } from '../../utils/selectChain';
+  import { switchNetwork } from '../../utils/switchNetwork';
   import Button from '../Button.svelte';
   import Eth from '../icons/ETH.svelte';
   import Tko from '../icons/TKO.svelte';
@@ -91,7 +90,12 @@
     loading = true;
 
     try {
-      const tx = await mintERC20(srcChain.id, _token, signer);
+      // If we're not already, switch to L1
+      if (srcChain.id !== L1_CHAIN_ID) {
+        await switchNetwork(L1_CHAIN_ID);
+      }
+
+      const tx = await mintERC20(_token, signer);
 
       successToast(`Transaction sent to mint ${_token.symbol} tokens.`);
 
@@ -124,11 +128,11 @@
     }
   }
 
-  async function switchNetwork() {
+  async function switchNetworkToL1() {
     switchingNetwork = true;
 
     try {
-      await selectChain(chains[L1_CHAIN_ID]);
+      await switchNetwork(L1_CHAIN_ID);
     } catch (error) {
       console.error(error);
 
@@ -171,7 +175,7 @@
     <Button
       type="accent"
       class="w-full"
-      on:click={switchNetwork}
+      on:click={switchNetworkToL1}
       disabled={disableSwitchButton}>
       <span>
         {#if switchingNetwork}
diff --git a/packages/bridge-ui/src/components/SwitchChainModal.svelte b/packages/bridge-ui/src/components/SwitchChainModal.svelte
index a7757d1faf..f24caf11dd 100644
--- a/packages/bridge-ui/src/components/SwitchChainModal.svelte
+++ b/packages/bridge-ui/src/components/SwitchChainModal.svelte
@@ -1,26 +1,20 @@
 <script lang="ts">
-  import { fetchSigner, switchNetwork } from '@wagmi/core';
   import { _ } from 'svelte-i18n';
 
   import { mainnetChain, taikoChain } from '../chain/chains';
   import type { Chain } from '../domain/chain';
   import { isSwitchChainModalOpen } from '../store/modal';
-  import { signer } from '../store/signer';
+  import { switchNetwork } from '../utils/switchNetwork';
   import Modal from './Modal.svelte';
   import { errorToast, successToast } from './NotificationToast.svelte';
 
   const switchChain = async (chain: Chain) => {
     try {
-      await switchNetwork({
-        chainId: chain.id,
-      });
-      const wagmiSigner = await fetchSigner();
-
-      signer.set(wagmiSigner);
+      await switchNetwork(chain.id);
       isSwitchChainModalOpen.set(false);
       successToast('Successfully switched chain');
-    } catch (e) {
-      console.error(e);
+    } catch (error) {
+      console.error(error);
       errorToast('Error switching chain.');
     }
   };
diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
index e983537e03..2dbcc57763 100644
--- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -27,7 +27,7 @@
   import { isOnCorrectChain } from '../../utils/isOnCorrectChain';
   import { isTransactionProcessable } from '../../utils/isTransactionProcessable';
   import { getLogger } from '../../utils/logger';
-  import { selectChain } from '../../utils/selectChain';
+  import { switchNetwork } from '../../utils/switchNetwork';
   import { tokenVaults } from '../../vault/tokenVaults';
   import Button from '../Button.svelte';
   import ButtonWithTooltip from '../ButtonWithTooltip.svelte';
@@ -95,8 +95,7 @@
         });
       }
 
-      const chain = chains[bridgeTx.destChainId];
-      await selectChain(chain);
+      await switchNetwork(bridgeTx.destChainId);
     }
   }
 
@@ -376,7 +375,7 @@
     {:else}
       {utils.formatUnits(transaction.amount, transaction.decimals)}
     {/if}
-    {transaction.symbol ?? 'ETH'}
+    {transaction.symbol || 'ETH'}
   </td>
 
   <td>
diff --git a/packages/bridge-ui/src/utils/injectedProvider.spec.ts b/packages/bridge-ui/src/utils/injectedProvider.spec.ts
new file mode 100644
index 0000000000..27dbce7592
--- /dev/null
+++ b/packages/bridge-ui/src/utils/injectedProvider.spec.ts
@@ -0,0 +1,88 @@
+import { ethers } from 'ethers';
+
+import {
+  getInjectedSigner,
+  hasInjectedProvider,
+  rpcCall,
+} from './injectedProvider';
+
+jest.mock('../constants/envVars');
+
+jest.mock('ethers', () => {
+  const Web3Provider = jest.fn();
+  Web3Provider.prototype = {
+    getSigner: jest.fn(),
+    send: jest.fn(),
+  };
+
+  return {
+    ethers: {
+      providers: {
+        Web3Provider,
+      },
+    },
+  };
+});
+
+beforeEach(() => {
+  globalThis.ethereum = {
+    isMetaMask: true,
+    request: jest.fn(),
+  };
+
+  jest.clearAllMocks();
+});
+
+describe('injectedProvider - rpcCall', () => {
+  it('should call rpc method', async () => {
+    jest
+      .mocked(ethers.providers.Web3Provider.prototype.send)
+      .mockResolvedValueOnce('test value');
+
+    const result = await rpcCall('eth_requestAccounts');
+
+    expect(result).toEqual('test value');
+    expect(ethers.providers.Web3Provider.prototype.send).toHaveBeenCalledWith(
+      'eth_requestAccounts',
+      undefined,
+    );
+  });
+
+  it('should throw error if rpc method fails', async () => {
+    jest
+      .mocked(ethers.providers.Web3Provider.prototype.send)
+      .mockRejectedValue(new Error('test error'));
+
+    await expect(rpcCall('eth_requestAccounts')).rejects.toThrowError(
+      'RPC call "eth_requestAccounts" failed',
+    );
+  });
+});
+
+describe('injectedProvider - getInjectedSigner', () => {
+  it('should return signer', () => {
+    const mockSigner = {} as ethers.providers.JsonRpcSigner;
+    jest
+      .mocked(ethers.providers.Web3Provider.prototype.getSigner)
+      .mockReturnValue(mockSigner);
+
+    expect(getInjectedSigner()).toEqual(mockSigner);
+
+    expect(ethers.providers.Web3Provider).toHaveBeenCalledWith(
+      globalThis.ethereum,
+      'any',
+    );
+  });
+});
+
+describe('injectedProvider - hasInjectedProvider', () => {
+  it('should return true if injected provider is available', () => {
+    expect(hasInjectedProvider()).toBeTruthy();
+  });
+
+  it('should return false if injected provider is not available', () => {
+    globalThis.ethereum = undefined;
+
+    expect(hasInjectedProvider()).toBeFalsy();
+  });
+});
diff --git a/packages/bridge-ui/src/utils/injectedProvider.ts b/packages/bridge-ui/src/utils/injectedProvider.ts
index c9e6effddd..0855cb61fb 100644
--- a/packages/bridge-ui/src/utils/injectedProvider.ts
+++ b/packages/bridge-ui/src/utils/injectedProvider.ts
@@ -1,5 +1,7 @@
 import { ethers } from 'ethers';
 
+import { getLogger } from './logger';
+
 type Network = {
   name: string;
   chainId: number;
@@ -8,6 +10,36 @@ type Network = {
 
 type Networkish = Network | string | number;
 
+type RPCMethod =
+  | 'eth_requestAccounts'
+  | 'wallet_watchAsset'
+  | 'wallet_addEthereumChain';
+
+const log = getLogger('util:injectedProvider');
+
+export const errorCodes = {
+  rpc: {
+    invalidInput: -32000,
+    resourceNotFound: -32001,
+    resourceUnavailable: -32002,
+    transactionRejected: -32003,
+    methodNotSupported: -32004,
+    limitExceeded: -32005,
+    parse: -32700,
+    invalidRequest: -32600,
+    methodNotFound: -32601,
+    invalidParams: -32602,
+    internal: -32603,
+  },
+  provider: {
+    userRejectedRequest: 4001,
+    unauthorized: 4100,
+    unsupportedMethod: 4200,
+    disconnected: 4900,
+    chainDisconnected: 4901,
+  },
+};
+
 export function getInjectedProvider(network: Networkish = 'any') {
   return new ethers.providers.Web3Provider(
     // The globalThis property provides a standard way of accessing the global this value
@@ -23,3 +55,23 @@ export function getInjectedSigner(
 ) {
   return getInjectedProvider(network).getSigner(addressOrIndex);
 }
+
+// The type definition for provider.send method is actually incorrect, hence:
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function rpcCall(method: RPCMethod, params?: any) {
+  const provider = getInjectedProvider();
+
+  log(`RPC call "${method}" with params`, params);
+
+  try {
+    return await provider.send(method, params);
+  } catch (error) {
+    console.error(error);
+
+    throw new Error(`RPC call "${method}" failed`, { cause: error });
+  }
+}
+
+export function hasInjectedProvider() {
+  return Boolean(globalThis.ethereum);
+}
diff --git a/packages/bridge-ui/src/utils/isMobileDevice.ts b/packages/bridge-ui/src/utils/isMobileDevice.ts
new file mode 100644
index 0000000000..5e0e642758
--- /dev/null
+++ b/packages/bridge-ui/src/utils/isMobileDevice.ts
@@ -0,0 +1,25 @@
+type MobileOS = 'Windows' | 'Android' | 'iOS' | null;
+
+function getMobileOS(): MobileOS {
+  const { userAgent } = navigator;
+
+  // Windows Phone must come first because its UA might contain "Android"
+  if (/windows phone/i.test(userAgent)) {
+    return 'Windows';
+  }
+
+  if (/android/i.test(userAgent)) {
+    return 'Android';
+  }
+
+  if (/ipad|iphone|ipod/i.test(userAgent)) {
+    return 'iOS';
+  }
+
+  return null; // unknown or simply not a mobile
+}
+
+// This includes tablets
+export function isMobileDevice() {
+  return ['Windows', 'Android', 'iOS'].includes(getMobileOS());
+}
diff --git a/packages/bridge-ui/src/utils/mintERC20.spec.ts b/packages/bridge-ui/src/utils/mintERC20.spec.ts
index 0910cd8463..74b2748098 100644
--- a/packages/bridge-ui/src/utils/mintERC20.spec.ts
+++ b/packages/bridge-ui/src/utils/mintERC20.spec.ts
@@ -1,18 +1,12 @@
 import { Contract, ethers, type Signer } from 'ethers';
 
-import { chains } from '../chain/chains';
 import { freeMintErc20ABI } from '../constants/abi';
-import { L1_CHAIN_ID, L2_CHAIN_ID } from '../constants/envVars';
+import { L1_CHAIN_ID } from '../constants/envVars';
 import type { Token } from '../domain/token';
 import { mintERC20 } from './mintERC20';
-import { selectChain } from './selectChain';
 
 jest.mock('../constants/envVars');
 
-jest.mock('./selectChain', () => ({
-  selectChain: jest.fn(),
-}));
-
 jest.mock('ethers', () => {
   const MockContract = jest.fn();
   MockContract.prototype.mint = jest.fn();
@@ -37,16 +31,12 @@ const mockTx = {} as ethers.Transaction;
 
 describe('mintERC20', () => {
   beforeEach(() => {
-    jest.mocked(selectChain).mockClear();
     jest.mocked(Contract).mockClear();
     jest.mocked(Contract.prototype.mint).mockResolvedValue(mockTx);
   });
 
   it('should mint ERC20', async () => {
-    const tx = await mintERC20(L1_CHAIN_ID, mockToken, mockSigner);
-
-    // There was no switch of chain since token is on L1
-    expect(selectChain).not.toHaveBeenCalled();
+    const tx = await mintERC20(mockToken, mockSigner);
 
     expect(Contract).toHaveBeenCalledWith('0x00', freeMintErc20ABI, mockSigner);
 
@@ -55,9 +45,7 @@ describe('mintERC20', () => {
   });
 
   it('should switch network before minting ERC20', async () => {
-    const tx = await mintERC20(L2_CHAIN_ID, mockToken, mockSigner);
-
-    expect(selectChain).toHaveBeenCalledWith(chains[L1_CHAIN_ID]);
+    const tx = await mintERC20(mockToken, mockSigner);
 
     expect(Contract).toHaveBeenCalledWith('0x00', freeMintErc20ABI, mockSigner);
 
@@ -70,7 +58,7 @@ describe('mintERC20', () => {
       .mocked(Contract.prototype.mint)
       .mockRejectedValue(new Error('test error'));
 
-    await expect(mintERC20(L1_CHAIN_ID, mockToken, mockSigner)).rejects.toThrow(
+    await expect(mintERC20(mockToken, mockSigner)).rejects.toThrow(
       `found a problem minting ${mockToken.symbol}`,
     );
   });
diff --git a/packages/bridge-ui/src/utils/mintERC20.ts b/packages/bridge-ui/src/utils/mintERC20.ts
index 27fdd17e93..8ffdc968b9 100644
--- a/packages/bridge-ui/src/utils/mintERC20.ts
+++ b/packages/bridge-ui/src/utils/mintERC20.ts
@@ -1,24 +1,16 @@
 import { Contract, Signer, type Transaction } from 'ethers';
 import type { Token } from 'src/domain/token';
 
-import { chains } from '../chain/chains';
 import { freeMintErc20ABI } from '../constants/abi';
 import { L1_CHAIN_ID } from '../constants/envVars';
 import { getLogger } from './logger';
-import { selectChain } from './selectChain';
 
 const log = getLogger('util:mintERC20');
 
 export async function mintERC20(
-  srcChainId: number,
   token: Token,
   signer: Signer,
 ): Promise<Transaction> {
-  // If we're not already, switch to L1
-  if (srcChainId !== L1_CHAIN_ID) {
-    await selectChain(chains[L1_CHAIN_ID]);
-  }
-
   const l1TokenContract = new Contract(
     token.addresses[L1_CHAIN_ID],
     freeMintErc20ABI,
diff --git a/packages/bridge-ui/src/utils/rpcCall.spec.ts b/packages/bridge-ui/src/utils/rpcCall.spec.ts
deleted file mode 100644
index 88196653c9..0000000000
--- a/packages/bridge-ui/src/utils/rpcCall.spec.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ethers } from 'ethers';
-
-import { rpcCall } from './rpcCall';
-
-jest.mock('../constants/envVars');
-
-jest.mock('ethers', () => {
-  const Web3Provider = jest.fn();
-  Web3Provider.prototype = {
-    send: jest.fn(),
-  };
-
-  return {
-    ethers: {
-      providers: {
-        Web3Provider,
-      },
-    },
-  };
-});
-
-describe('rpcCall', () => {
-  it('should call rpc method', async () => {
-    jest
-      .mocked(ethers.providers.Web3Provider.prototype.send)
-      .mockResolvedValueOnce('test value');
-
-    const result = await rpcCall('eth_requestAccounts');
-
-    expect(result).toEqual('test value');
-    expect(ethers.providers.Web3Provider.prototype.send).toHaveBeenCalledWith(
-      'eth_requestAccounts',
-      undefined,
-    );
-  });
-
-  it('should throw error if rpc method fails', async () => {
-    jest
-      .mocked(ethers.providers.Web3Provider.prototype.send)
-      .mockRejectedValue(new Error('test error'));
-
-    await expect(rpcCall('eth_requestAccounts')).rejects.toThrowError(
-      'RPC call "eth_requestAccounts" failed',
-    );
-  });
-});
diff --git a/packages/bridge-ui/src/utils/rpcCall.ts b/packages/bridge-ui/src/utils/rpcCall.ts
deleted file mode 100644
index 99d6a510b2..0000000000
--- a/packages/bridge-ui/src/utils/rpcCall.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { getInjectedProvider } from './injectedProvider';
-import { getLogger } from './logger';
-
-type RPCMethod =
-  | 'eth_requestAccounts'
-  | 'wallet_watchAsset'
-  | 'wallet_addEthereumChain';
-
-const log = getLogger('util:rpcCall');
-
-export const errorCodes = {
-  rpc: {
-    invalidInput: -32000,
-    resourceNotFound: -32001,
-    resourceUnavailable: -32002,
-    transactionRejected: -32003,
-    methodNotSupported: -32004,
-    limitExceeded: -32005,
-    parse: -32700,
-    invalidRequest: -32600,
-    methodNotFound: -32601,
-    invalidParams: -32602,
-    internal: -32603,
-  },
-  provider: {
-    userRejectedRequest: 4001,
-    unauthorized: 4100,
-    unsupportedMethod: 4200,
-    disconnected: 4900,
-    chainDisconnected: 4901,
-  },
-};
-
-// The type definition for provider.send method is actually incorrect, hence:
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function rpcCall(method: RPCMethod, params?: any) {
-  const provider = getInjectedProvider();
-
-  log(`RPC call "${method}" with params`, params);
-
-  try {
-    return await provider.send(method, params);
-  } catch (error) {
-    console.error(error);
-
-    throw new Error(`RPC call "${method}" failed`, { cause: error });
-  }
-}
diff --git a/packages/bridge-ui/src/utils/selectChain.spec.ts b/packages/bridge-ui/src/utils/selectChain.spec.ts
deleted file mode 100644
index 0dad768f63..0000000000
--- a/packages/bridge-ui/src/utils/selectChain.spec.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { switchNetwork } from '@wagmi/core';
-import { ethers } from 'ethers';
-
-import { mainnetChain, taikoChain } from '../chain/chains';
-import { destChain, srcChain } from '../store/chain';
-import { signer } from '../store/signer';
-import { selectChain } from './selectChain';
-
-jest.mock('../constants/envVars');
-
-jest.mock('@wagmi/core', () => ({
-  switchNetwork: jest.fn(),
-}));
-
-jest.mock('ethers', () => {
-  const Web3Provider = jest.fn();
-  Web3Provider.prototype = {
-    getSigner: jest.fn(),
-    send: jest.fn(),
-  };
-  return {
-    ethers: {
-      providers: {
-        Web3Provider,
-      },
-    },
-  };
-});
-
-jest.mock('../store/chain', () => ({
-  srcChain: {
-    set: jest.fn(),
-  },
-  destChain: {
-    set: jest.fn(),
-  },
-}));
-
-jest.mock('../store/signer', () => ({
-  signer: {
-    set: jest.fn(),
-  },
-}));
-
-const mockSigner = {} as ethers.providers.JsonRpcSigner;
-
-describe('selectChain', () => {
-  beforeAll(() => {
-    jest
-      .mocked(ethers.providers.Web3Provider.prototype.getSigner)
-      .mockReturnValue(mockSigner);
-  });
-
-  beforeEach(() => {
-    jest.mocked(ethers.providers.Web3Provider.prototype.getSigner).mockClear();
-  });
-
-  it('should select chain', async () => {
-    await selectChain(mainnetChain);
-
-    expect(switchNetwork).toHaveBeenCalledWith({ chainId: mainnetChain.id });
-    expect(srcChain.set).toHaveBeenCalledWith(mainnetChain);
-    expect(destChain.set).toHaveBeenCalledWith(taikoChain);
-
-    expect(ethers.providers.Web3Provider.prototype.send).toHaveBeenCalledWith(
-      'eth_requestAccounts',
-      undefined,
-    );
-
-    // By default the signer is not updated as
-    // there might be no change in the account.
-    expect(
-      ethers.providers.Web3Provider.prototype.getSigner,
-    ).toHaveBeenCalled();
-
-    expect(signer.set).toHaveBeenCalledWith(mockSigner);
-
-    // Select the other chain now
-    await selectChain(taikoChain);
-
-    expect(switchNetwork).toHaveBeenCalledWith({ chainId: taikoChain.id });
-  });
-});
diff --git a/packages/bridge-ui/src/utils/selectChain.ts b/packages/bridge-ui/src/utils/selectChain.ts
deleted file mode 100644
index 86eacdfda5..0000000000
--- a/packages/bridge-ui/src/utils/selectChain.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { switchNetwork } from '@wagmi/core';
-
-import { mainnetChain, taikoChain } from '../chain/chains';
-import type { Chain } from '../domain/chain';
-import { destChain, srcChain } from '../store/chain';
-import { signer } from '../store/signer';
-import { getLogger } from '../utils/logger';
-import { getInjectedSigner } from './injectedProvider';
-import { rpcCall } from './rpcCall';
-
-const log = getLogger('selectChain');
-
-export async function selectChain(chain: Chain) {
-  const chainId = chain.id;
-
-  await switchNetwork({ chainId });
-
-  // Requires requesting permission to connect users accounts
-  const accounts = await rpcCall('eth_requestAccounts');
-
-  log('Accounts', accounts);
-
-  srcChain.set(chain);
-  if (chain.id === mainnetChain.id) {
-    destChain.set(taikoChain);
-  } else {
-    destChain.set(mainnetChain);
-  }
-
-  const _signer = getInjectedSigner();
-
-  log('Signer', _signer);
-
-  signer.set(_signer);
-}
diff --git a/packages/bridge-ui/src/utils/switchNetwork.spec.ts b/packages/bridge-ui/src/utils/switchNetwork.spec.ts
new file mode 100644
index 0000000000..a943fd587b
--- /dev/null
+++ b/packages/bridge-ui/src/utils/switchNetwork.spec.ts
@@ -0,0 +1,60 @@
+import { switchNetwork as wagmiSwitchNetwork } from '@wagmi/core';
+import { get } from 'svelte/store';
+
+import { L1_CHAIN_ID, L2_CHAIN_ID } from '../constants/envVars';
+import { switchNetwork } from './switchNetwork';
+
+jest.mock('../constants/envVars');
+
+jest.mock('@wagmi/core', () => ({
+  switchNetwork: jest.fn(),
+}));
+
+jest.mock('svelte/store', () => ({
+  ...jest.requireActual('svelte/store'),
+  get: jest.fn(),
+}));
+
+describe('switchNetwork', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should switch network', async () => {
+    const starting = Date.now();
+    let getCalls = 0;
+
+    jest.mocked(get).mockImplementation(() => {
+      getCalls += 1;
+
+      // We deliver the chain after 1 second has passed
+      if (Date.now() > starting + 1000) {
+        return { id: L2_CHAIN_ID };
+      }
+
+      return null;
+    });
+
+    await switchNetwork(L2_CHAIN_ID);
+
+    expect(wagmiSwitchNetwork).toHaveBeenCalledWith({ chainId: L2_CHAIN_ID });
+    expect(get).toHaveBeenCalledTimes(getCalls);
+  });
+
+  it('should throw if timeout', async () => {
+    // It always returns the same chain. Never changes it
+    jest.mocked(get).mockReturnValue({ id: L1_CHAIN_ID });
+
+    await expect(switchNetwork(L2_CHAIN_ID)).rejects.toThrow(
+      'timeout switching network',
+    );
+  });
+
+  it('should do nothing if already on the target network', async () => {
+    jest.mocked(get).mockReturnValue({ id: L2_CHAIN_ID });
+
+    await switchNetwork(L2_CHAIN_ID);
+
+    expect(wagmiSwitchNetwork).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/bridge-ui/src/utils/switchNetwork.ts b/packages/bridge-ui/src/utils/switchNetwork.ts
new file mode 100644
index 0000000000..92c4dc1f1b
--- /dev/null
+++ b/packages/bridge-ui/src/utils/switchNetwork.ts
@@ -0,0 +1,43 @@
+import { switchNetwork as wagmiSwitchNetwork } from '@wagmi/core';
+import { get } from 'svelte/store';
+
+import { srcChain } from '../store/chain';
+import { Deferred } from './Deferred';
+
+export async function switchNetwork(chainId: number) {
+  const prevChainId = get(srcChain)?.id;
+
+  if (prevChainId === chainId) return;
+
+  await wagmiSwitchNetwork({ chainId });
+
+  // What are we doing here? we have a watcher waiting for network changes.
+  // When this happens this watcher is called and takes care of setting
+  // the signer and chains in the store. We are actually waiting here
+  // for these stores to change due to some race conditions in the UI.
+  // There will be a better design around this in alpha-4: fewer stores
+  // and '$:' tags. They're evil.
+  const deferred = new Deferred<void>();
+
+  // This will prevent an unlikely infinite loop
+  const starting = Date.now();
+  const timeout = 3000; // TODO: config?
+
+  const waitForNetworkChange = () => {
+    const srcChainId = get(srcChain)?.id;
+
+    if (srcChainId && srcChainId !== prevChainId) {
+      // We have finally set the chain in the store. We're done here.
+      deferred.resolve();
+    } else if (Date.now() > starting + timeout) {
+      // Wait, what???
+      deferred.reject(new Error('timeout switching network'));
+    } else {
+      setTimeout(waitForNetworkChange, 300); // TODO: config those 300?
+    }
+  };
+
+  waitForNetworkChange();
+
+  return deferred.promise;
+}
diff --git a/packages/bridge-ui/src/wagmi/client.ts b/packages/bridge-ui/src/wagmi/client.ts
index 51cf21bdd9..b353d590da 100644
--- a/packages/bridge-ui/src/wagmi/client.ts
+++ b/packages/bridge-ui/src/wagmi/client.ts
@@ -16,6 +16,7 @@ import {
   L2_RPC,
 } from '../constants/envVars';
 import { providers } from '../provider/providers';
+import { isMobileDevice } from '../utils/isMobileDevice';
 
 export const mainnetWagmiChain: Chain = {
   id: L1_CHAIN_ID,
@@ -69,14 +70,14 @@ export const client = createClient({
   autoConnect: true,
   provider,
   connectors: [
-    new MetaMaskConnector({ chains }),
-    new CoinbaseWalletConnector({
-      chains,
-      options: { appName: 'Taiko Bridge' },
-    }),
+    !isMobileDevice() ? new MetaMaskConnector({ chains }) : null,
     new WalletConnectConnector({
       chains,
       options: { qrcode: true },
     }),
-  ],
+    new CoinbaseWalletConnector({
+      chains,
+      options: { appName: 'Taiko Bridge' },
+    }),
+  ].filter(Boolean), // remove nulls
 });
diff --git a/packages/bridge-ui/src/wagmi/watcher.ts b/packages/bridge-ui/src/wagmi/watcher.ts
index a80551500d..cf3e490678 100644
--- a/packages/bridge-ui/src/wagmi/watcher.ts
+++ b/packages/bridge-ui/src/wagmi/watcher.ts
@@ -1,7 +1,7 @@
 import { fetchSigner, watchAccount, watchNetwork } from '@wagmi/core';
 
 import { mainnetChain, taikoChain } from '../chain/chains';
-import { destChain,srcChain } from '../store/chain';
+import { destChain, srcChain } from '../store/chain';
 import { isSwitchChainModalOpen } from '../store/modal';
 import { signer } from '../store/signer';
 import { getLogger } from '../utils/logger';
@@ -12,13 +12,17 @@ let isWatching = false;
 let unWatchNetwork: () => void;
 let unWatchAccount: () => void;
 
-const changeChain = (chainId: number) => {
+const setChain = (chainId: number) => {
   if (chainId === mainnetChain.id) {
     srcChain.set(mainnetChain);
     destChain.set(taikoChain);
+
+    log(`Network swtiched to ${mainnetChain.name}`);
   } else if (chainId === taikoChain.id) {
     srcChain.set(taikoChain);
     destChain.set(mainnetChain);
+
+    log(`Network swtiched to ${taikoChain.name}`);
   } else {
     isSwitchChainModalOpen.set(true);
   }
@@ -28,11 +32,14 @@ export function startWatching() {
   if (!isWatching) {
     // Action for subscribing to network changes.
     // See https://wagmi.sh/core/actions/watchNetwork
-    unWatchNetwork = watchNetwork((networkResult) => {
+    unWatchNetwork = watchNetwork(async (networkResult) => {
       log('Network changed', networkResult);
 
       if (networkResult.chain?.id) {
-        changeChain(networkResult.chain.id);
+        const _signer = await fetchSigner();
+        signer.set(_signer);
+
+        setChain(networkResult.chain.id);
       } else {
         log('No chain id found');
         srcChain.set(null);