fix(checkout): Correctly handle adding a new network (#2625)

Author: keithbro-imx

packages/checkout/sdk/src/network/network.test.ts

@@ -41,6 +41,17 @@ const zkevmNetworkInfo = {
   nativeCurrency: ZKEVM_NATIVE_SANDBOX_TOKEN,
 };
 
+const unrecognisedChainError = {
+  error: {
+    data: {
+      originalError: {
+        message: 'Provider error',
+        code: 4902,
+      },
+    },
+  },
+};
+
 jest.mock('../api/http', () => ({
   // eslint-disable-next-line @typescript-eslint/naming-convention
   HttpClient: jest.fn().mockImplementation(() => ({
@@ -234,10 +245,7 @@ describe('network functions', () => {
       (WrappedBrowserProvider as unknown as jest.Mock).mockReturnValue({
         send: jest
           .fn()
-          .mockRejectedValue({
-            message: 'Provider error',
-            code: 4902,
-          }),
+          .mockRejectedValue(unrecognisedChainError),
         ethereumProvider: {
           isMetaMask: true,
         },
@@ -291,7 +299,7 @@ describe('network functions', () => {
         .mockReturnValueOnce({
           send: jest
             .fn()
-            .mockRejectedValueOnce({ code: 4902 })
+            .mockRejectedValueOnce(unrecognisedChainError)
             .mockResolvedValueOnce({}),
           ethereumProvider: {
             isMetaMask: true,

packages/checkout/sdk/src/network/network.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { JsonRpcProvider } from 'ethers';
 import { CheckoutError, CheckoutErrorType, withCheckoutError } from '../errors';
 import {
@@ -132,9 +131,16 @@ export async function getNetworkInfo(
   );
 }
 
+/**
+ * Errors in ethers v6 are broken - https://github.com/ethers-io/ethers.js/issues/4576
+ * You get "Error: could not coalesce error....".
+ * This is a workaround to check if the error is an unrecognised chain error.
+ * */
+const isUnrecognisedChainError = (err: any) => err.error?.data?.originalError?.code === UNRECOGNISED_CHAIN_ERROR_CODE;
+
 export async function switchWalletNetwork(
   config: CheckoutConfiguration,
-  provider: JsonRpcProvider | WrappedBrowserProvider,
+  provider: WrappedBrowserProvider,
   chainId: ChainId,
 ): Promise<SwitchNetworkResult> {
   const { networkMap } = config;
@@ -144,15 +150,15 @@ export async function switchWalletNetwork(
   });
 
   if (
-    !allowedNetworks.networks.some((network) => Number(network.chainId) === chainId)
+    !allowedNetworks.networks.some((network) => network.chainId === chainId)
   ) {
     throw new CheckoutError(
       `Chain:${chainId} is not a supported chain`,
       CheckoutErrorType.CHAIN_NOT_SUPPORTED_ERROR,
     );
   }
 
-  if ('ethereumProvider' in provider && provider.ethereumProvider?.isPassport) {
+  if (provider.ethereumProvider?.isPassport) {
     throw new CheckoutError(
       'Switching networks with Passport provider is not supported',
       CheckoutErrorType.SWITCH_NETWORK_UNSUPPORTED,
@@ -161,29 +167,15 @@ export async function switchWalletNetwork(
 
   // WT-1146 - Refer to the README in this folder for explanation on the switch network flow
   try {
-    if (provider && 'ethereumProvider' in provider) {
-      await switchNetworkInWallet(networkMap, provider, chainId);
-    } else {
-      throw new CheckoutError(
-        'Incorrect provider type',
-        CheckoutErrorType.PROVIDER_ERROR,
-      );
-    }
-  } catch (err: any) {
+    await switchNetworkInWallet(networkMap, provider, chainId);
+  } catch (err) {
     // eslint-disable-next-line no-console
     console.error(err);
-    if (err.code === UNRECOGNISED_CHAIN_ERROR_CODE) {
+    if (isUnrecognisedChainError(err)) {
       try {
-        if ('ethereumProvider' in provider) {
-          await addNetworkToWallet(networkMap, provider, chainId);
-        } else {
-          throw new CheckoutError(
-            'Incorrect provider type',
-            CheckoutErrorType.PROVIDER_ERROR,
-          );
-        }
+        await addNetworkToWallet(networkMap, provider, chainId);
         // eslint-disable-next-line @typescript-eslint/no-shadow
-      } catch (err: any) {
+      } catch (err) {
         throw new CheckoutError(
           'User cancelled add network request',
           CheckoutErrorType.USER_REJECTED_REQUEST_ERROR,
@@ -209,10 +201,10 @@ export async function switchWalletNetwork(
     );
   }
 
-  const networkInfo: NetworkInfo = await getNetworkInfo(config, newProvider);
+  const networkInfo = await getNetworkInfo(config, newProvider);
 
   return {
     network: networkInfo,
     provider: newProvider,
-  } as SwitchNetworkResult;
+  };
 }

packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx

@@ -75,9 +75,8 @@ export function SwitchNetworkZkEVM() {
 
     if (!provider.send) return;
 
-    const currentChainId = await provider.send('eth_chainId', []);
-    // eslint-disable-next-line radix
-    const parsedChainId = Number(currentChainId.toString());
+    const currentChainId = await provider.send('eth_chainId', []) as `0x${string}`;
+    const parsedChainId = Number(currentChainId);
 
     if (parsedChainId === checkout.config.l2ChainId) {
       connectDispatch({
@@ -102,7 +101,7 @@ export function SwitchNetworkZkEVM() {
     try {
       let walletName = '';
       if (isWalletConnectProvider(provider)) {
-        walletName = (provider.provider as any)?.session?.peer?.metadata?.name.toLowerCase();
+        walletName = (provider.ethereumProvider as any)?.session?.peer?.metadata?.name.toLowerCase();
       }
       if (walletName.includes('metamask')) {
         try {