@imtbl/checkout-widgets 2.24.4 → 2.24.6

package/src/lib/chains.test.ts

@@ -1,5 +1,7 @@
 import { ChainId, ChainName, ChainSlug } from '@imtbl/checkout-sdk';
-import { getChainIdBySlug, getChainNameById, getChainSlugById } from './chains';
+import {
+  getChainIdBySlug, getChainNameById, getChainSlugById, parseChainId,
+} from './chains';
 
 describe('getChainNameById', () => {
   const tests = [
@@ -48,3 +50,42 @@ describe('getChainIdBySlug', () => {
     });
   });
 });
+
+describe('parseChainId', () => {
+  // Regression: a lint autofix once rewrote `parseInt(chainId)` to
+  // `parseInt(chainId, 10)`, which returns 0 for the hex values EIP-695
+  // mandates. Every chain then read as "wrong network" and the bridge became
+  // unusable. These cases pin the hex handling down.
+  const hexCases = [
+    { value: '0x343b', expected: ChainId.IMTBL_ZKEVM_MAINNET },
+    { value: '0x34a1', expected: ChainId.IMTBL_ZKEVM_TESTNET },
+    { value: '0x1', expected: ChainId.ETHEREUM },
+    { value: '0xaa36a7', expected: ChainId.SEPOLIA },
+  ];
+
+  hexCases.forEach(({ value, expected }) => {
+    it(`should parse hex ${value} as ${expected}`, () => {
+      expect(parseChainId(value)).toEqual(expected);
+    });
+  });
+
+  it('should parse a decimal string', () => {
+    expect(parseChainId('13371')).toEqual(ChainId.IMTBL_ZKEVM_MAINNET);
+  });
+
+  it('should pass through a number', () => {
+    expect(parseChainId(13371)).toEqual(ChainId.IMTBL_ZKEVM_MAINNET);
+  });
+
+  it('should parse a bigint', () => {
+    expect(parseChainId(BigInt(13371))).toEqual(ChainId.IMTBL_ZKEVM_MAINNET);
+  });
+
+  const invalidCases = [null, undefined, '', 'not-a-chain', '0x', 0, -1, 1.5];
+
+  invalidCases.forEach((value) => {
+    it(`should return null for ${JSON.stringify(value)}`, () => {
+      expect(parseChainId(value)).toBeNull();
+    });
+  });
+});

package/src/lib/chains.ts

@@ -1,5 +1,26 @@
 import { ChainId, ChainName, ChainSlug } from '@imtbl/checkout-sdk';
 
+/**
+ * Parse a chain id as returned by an EIP-1193 provider (e.g. `eth_chainId`).
+ *
+ * EIP-695 specifies a hex-encoded quantity such as `0x343b`, but providers are
+ * inconsistent and may return a decimal string or a number instead. `Number()`
+ * handles all three.
+ *
+ * Do NOT reach for `parseInt(value, 10)` here: it silently returns 0 for hex
+ * input, which reads as "wrong network" for every chain. Use this helper so the
+ * radix decision lives in one tested place rather than at each call site.
+ *
+ * Returns `null` when the value cannot be parsed, so callers can tell an
+ * unknown chain apart from a legitimately parsed id.
+ */
+export function parseChainId(chainId: unknown): ChainId | null {
+  if (chainId === null || chainId === undefined || chainId === '') return null;
+  const parsed = Number(chainId);
+  if (!Number.isInteger(parsed) || parsed <= 0) return null;
+  return parsed as ChainId;
+}
+
 export function getChainNameById(chainId: ChainId): ChainName {
   switch (chainId) {
     case ChainId.ETHEREUM: return ChainName.ETHEREUM;

package/src/locales/en.json

@@ -1237,7 +1237,14 @@
       "controlledSwitch": {
         "body": "You'll need to switch to the {{chain}} network to proceed"
       },
-      "switchButton": "Switch to {{chain}}"
+      "unsupportedSwitch": {
+        "body": "Your {{wallet}} can't switch networks. Go back and choose a different wallet to use the {{chain}} network."
+      },
+      "switchFailed": {
+        "body": "We couldn't switch to the {{chain}} network. Check your {{wallet}} and try again."
+      },
+      "switchButton": "Switch to {{chain}}",
+      "retryButton": "Try again"
     },
     "walletConnectionError": {
       "unableToConnect": {

package/src/widgets/bridge/components/BridgeReviewSummary.tsx

@@ -22,6 +22,7 @@ import {
   isWalletConnectProvider,
 } from '../../../lib/provider';
 import { calculateCryptoToFiat, getChainImage, isNativeToken } from '../../../lib/utils';
+import { parseChainId } from '../../../lib/chains';
 import {
   DEFAULT_QUOTE_REFRESH_INTERVAL,
   DEFAULT_TOKEN_DECIMALS,
@@ -391,7 +392,7 @@ export function BridgeReviewSummary() {
         return;
       }
       const currentChainId = await provider.send('eth_chainId', []);
-      const parsedChainId = parseInt(String(currentChainId), 10);
+      const parsedChainId = parseChainId(currentChainId);
       if (parsedChainId !== from?.network) {
         setShowSwitchNetworkDrawer(true);
         return;

package/src/widgets/connect/components/WalletList.tsx

@@ -51,6 +51,7 @@ import { BrowserWalletItem } from './BrowserWalletItem';
 import { identifyUser } from '../../../lib/analytics/identifyUser';
 import { NonPassportWarningDrawer } from './NonPassportWarningDrawer';
 import { removeSpace } from '../../../lib/utils';
+import { parseChainId } from '../../../lib/chains';
 
 export interface WalletListProps {
   targetWalletRdns?: string;
@@ -136,11 +137,10 @@ export function WalletList(props: WalletListProps) {
   const handleConnectViewUpdate = async (provider: WrappedBrowserProvider) => {
     const isPassport = isPassportProvider(provider);
     const chainId = await provider.send!('eth_chainId', []);
-    // eslint-disable-next-line radix
-    const parsedChainId = parseInt(chainId.toString());
+    const parsedChainId = parseChainId(chainId);
     if (
       parsedChainId !== targetChainId
-      && !allowedChains?.includes(parsedChainId)
+      && !(parsedChainId && allowedChains?.includes(parsedChainId))
     ) {
       // TODO: What do we do with Passport here as it can't connect to L1
       if (isPassport) {

package/src/widgets/connect/views/ReadyToConnect.tsx

@@ -20,6 +20,7 @@ import { ViewContext, ViewActions } from '../../../context/view-context/ViewCont
 import { isMetaMaskProvider, isPassportProvider } from '../../../lib/provider';
 import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { identifyUser } from '../../../lib/analytics/identifyUser';
+import { parseChainId } from '../../../lib/chains';
 
 export interface ReadyToConnectProps {
   targetChainId: ChainId;
@@ -89,9 +90,8 @@ export function ReadyToConnect({ targetChainId, allowedChains }: ReadyToConnectP
   // eslint-disable-next-line @typescript-eslint/no-shadow
   const handleConnectViewUpdate = async (provider: WrappedBrowserProvider) => {
     const chainId = await provider.send!('eth_chainId', []);
-    // eslint-disable-next-line radix
-    const parsedChainId = parseInt(chainId.toString());
-    if (parsedChainId !== targetChainId && !allowedChains?.includes(parsedChainId)) {
+    const parsedChainId = parseChainId(chainId);
+    if (parsedChainId !== targetChainId && !(parsedChainId && allowedChains?.includes(parsedChainId))) {
       // TODO: What do we do with Passport here as it can't connect to L1
       if (isPassport) {
         viewDispatch({

package/src/widgets/connect/views/SwitchNetworkZkEVM.tsx

@@ -3,6 +3,7 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isWalletConnectProvider } from '../../../lib/provider';
+import { parseChainId } from '../../../lib/chains';
 import { SimpleTextBody } from '../../../components/Body/SimpleTextBody';
 import { FooterButton } from '../../../components/Footer/FooterButton';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
@@ -34,8 +35,7 @@ export function SwitchNetworkZkEVM() {
 
     const checkCorrectNetwork = async () => {
       const currentChainId = await provider.send('eth_chainId', []);
-      // eslint-disable-next-line radix
-      const parsedChainId = Number(currentChainId.toString());
+      const parsedChainId = parseChainId(currentChainId);
       if (parsedChainId === checkout.config.l2ChainId) {
         connectDispatch({
           payload: {
@@ -76,7 +76,7 @@ export function SwitchNetworkZkEVM() {
     if (!provider.send) return;
 
     const currentChainId = await provider.send('eth_chainId', []) as `0x${string}`;
-    const parsedChainId = Number(currentChainId);
+    const parsedChainId = parseChainId(currentChainId);
 
     if (parsedChainId === checkout.config.l2ChainId) {
       connectDispatch({

package/src/widgets/swap/components/SwapForm.tsx

@@ -47,6 +47,7 @@ import { ConnectLoaderContext } from '../../../context/connect-loader-context/Co
 import useDebounce from '../../../lib/hooks/useDebounce';
 import { CancellablePromise } from '../../../lib/async/cancellablePromise';
 import { isPassportProvider } from '../../../lib/provider';
+import { parseChainId } from '../../../lib/chains';
 import { formatSwapFees } from '../functions/swapFees';
 import { processGasFree } from '../functions/processGasFree';
 import { processSecondaryFees } from '../functions/processSecondaryFees';
@@ -885,8 +886,7 @@ export function SwapForm({
     try {
     // check for switch network here
       const currentChainId = await (provider.provider as any).send('eth_chainId', []);
-      // eslint-disable-next-line radix
-      const parsedChainId = parseInt(currentChainId.toString());
+      const parsedChainId = parseChainId(currentChainId);
       if (parsedChainId !== checkout.config.l2ChainId) {
         setShowNetworkSwitchDrawer(true);
         return;