@imtbl/checkout-widgets 2.2.0 → 2.2.1-alpha.1

package/dist/browser/{index-BO9ARDoY.js → index-D18hBbWb.js}

@@ -1,4 +1,4 @@
-import { e6 as __awaiter, e7 as __generator, e8 as loadScript, e9 as getNextIntegrationsURL, ea as unloadScript, eb as __spreadArray, ec as isOffline, ed as __assign, ee as ContextCancelation, ef as applyDestinationMiddleware, eg as dist, eh as isServer, ei as mergedOptions, ej as isPlainObject, ek as pWhile, el as PriorityQueue, em as PersistedPriorityQueue, en as attempt, eo as isOnline, ep as Context } from './index-CqT6H9W-.js';
+import { e4 as __awaiter, e5 as __generator, e6 as loadScript, e7 as getNextIntegrationsURL, e8 as unloadScript, e9 as __spreadArray, ea as isOffline, eb as __assign, ec as ContextCancelation, ed as applyDestinationMiddleware, ee as dist, ef as isServer, eg as mergedOptions, eh as isPlainObject, ei as pWhile, ej as PriorityQueue, ek as PersistedPriorityQueue, el as attempt, em as isOnline, en as Context } from './index-CVAaj9Qm.js';
 import { i as isPlanEventEnabled } from './is-plan-event-enabled-mXX0dwl-.js';
 
 function normalizeName(name) {

package/dist/browser/{index-R2dpGmlF.js → index-DpNna0MG.js}

@@ -1,4 +1,4 @@
-import { e6 as __awaiter, e7 as __generator } from './index-CqT6H9W-.js';
+import { e4 as __awaiter, e5 as __generator } from './index-CVAaj9Qm.js';
 
 function loadLegacyVideoPlugins(analytics) {
     return __awaiter(this, void 0, void 0, function () {
@@ -7,7 +7,7 @@ function loadLegacyVideoPlugins(analytics) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, import(
                     // @ts-expect-error
-                    './index.umd-B82ymo2S.js').then(function (n) { return n.i; })
+                    './index.umd-BwrkBBu0.js').then(function (n) { return n.i; })
                     // This is super gross, but we need to support the `window.analytics.plugins` namespace
                     // that is linked in the segment docs in order to be backwards compatible with ajs-classic
                     // @ts-expect-error

package/dist/browser/{index-ByPgvc_F.js → index-Dpv6KyQF.js}

@@ -1,4 +1,4 @@
-import { ed as __assign } from './index-CqT6H9W-.js';
+import { eb as __assign } from './index-CVAaj9Qm.js';
 import { i as isPlanEventEnabled } from './is-plan-event-enabled-mXX0dwl-.js';
 
 function disabledActionDestinations(plan, settings) {

package/dist/browser/{index-qkgda0uC.js → index-lgFyRHj_.js}

@@ -1,4 +1,4 @@
-import { er as gracefulDecodeURIComponent, ej as isPlainObject } from './index-CqT6H9W-.js';
+import { ep as gracefulDecodeURIComponent, eh as isPlainObject } from './index-CVAaj9Qm.js';
 
 /**
  * Returns an object containing only the properties prefixed by the input

package/dist/browser/{index-B92IZgyS.js → index-qgsQUTip.js}

@@ -1,4 +1,4 @@
-import { dY as se$1, dZ as T$2, d_ as oe$1, d$ as R$1, e0 as a$2, e1 as te$1, e2 as p$1, e3 as ne$1, e4 as y$1 } from './index-CqT6H9W-.js';
+import { dW as se$1, dX as T$2, dY as oe$1, dZ as R$1, d_ as a$2, d$ as te$1, e0 as p$1, e1 as ne$1, e2 as y$1 } from './index-CVAaj9Qm.js';
 
 /**
  * @license

package/dist/browser/index.js

@@ -1 +1 @@
-export { es as WidgetsFactory } from './index-CqT6H9W-.js';
+export { eq as WidgetsFactory } from './index-CVAaj9Qm.js';

package/dist/browser/{index.umd-B82ymo2S.js → index.umd-BwrkBBu0.js}

@@ -1,4 +1,4 @@
-import { aB as getDefaultExportFromCjs } from './index-CqT6H9W-.js';
+import { ay as getDefaultExportFromCjs } from './index-CVAaj9Qm.js';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/dist/browser/{useInterval-Dp4GWqSc.js → useInterval-BE4Wp_87.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, dX as useBrowserLayoutEffect } from './index-CqT6H9W-.js';
+import { b as reactExports, dV as useBrowserLayoutEffect } from './index-CVAaj9Qm.js';
 
 // Inspired by https://usehooks-ts.com/react-hook/use-interval
 function useInterval(callback, delay) {

package/dist/types/lib/index.d.ts

@@ -1,6 +1,5 @@
 export * from './storage';
 export * from './constants';
-export * from './networkUtils';
 export * from './networkStyles';
 export * from './eip1193Events';
 export * from './providerEvents';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imtbl/checkout-widgets",
-  "version": "2.2.0",
+  "version": "2.2.1-alpha.1",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -18,12 +18,12 @@
     "@biom3/design-tokens": "^0.4.5",
     "@biom3/react": "^0.29.4",
     "@emotion/react": "^11.11.3",
-    "@imtbl/bridge-sdk": "2.2.0",
-    "@imtbl/checkout-sdk": "2.2.0",
-    "@imtbl/config": "2.2.0",
-    "@imtbl/cryptofiat": "2.2.0",
-    "@imtbl/dex-sdk": "2.2.0",
-    "@imtbl/passport": "2.2.0",
+    "@imtbl/bridge-sdk": "2.2.1-alpha.1",
+    "@imtbl/checkout-sdk": "2.2.1-alpha.1",
+    "@imtbl/config": "2.2.1-alpha.1",
+    "@imtbl/cryptofiat": "2.2.1-alpha.1",
+    "@imtbl/dex-sdk": "2.2.1-alpha.1",
+    "@imtbl/passport": "2.2.1-alpha.1",
     "@imtbl/react-analytics": "0.3.2-alpha",
     "@rive-app/react-canvas-lite": "^4.9.0",
     "@walletconnect/ethereum-provider": "^2.11.1",

package/src/components/NetworkSwitchDrawer/NetworkSwitchDrawer.tsx

@@ -14,7 +14,6 @@ import { useTranslation } from 'react-i18next';
 import { ChainId, Checkout, WrappedBrowserProvider } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
 import { FooterLogo } from '../Footer/FooterLogo';
-import { getL1ChainId } from '../../lib';
 import { getChainNameById } from '../../lib/chains';
 import {
   isMetaMaskProvider,
@@ -51,7 +50,7 @@ export function NetworkSwitchDrawer({
   );
 
   const targetChainName = getChainNameById(targetChainId);
-  const showEthImage = targetChainId === getL1ChainId(checkout.config);
+  const showEthImage = targetChainId === checkout.config.l1ChainId;
 
   const handleSwitchNetwork = useCallback(async () => {
     if (!checkout) return;

package/src/components/Transactions/Transactions.tsx

@@ -22,8 +22,6 @@ import {
 } from '../../lib/provider';
 import {
   DEFAULT_TRANSACTIONS_RETRY_POLICY,
-  getL1ChainId,
-  getL2ChainId,
 } from '../../lib';
 import { CheckoutApi, Transaction, TransactionType } from '../../lib/clients';
 import { retry } from '../../lib/retry';
@@ -94,7 +92,7 @@ export function Transactions({
   const rootChainTokensHashmap = useCallback(async () => {
     if (!checkout) return {};
 
-    const rootChainId = getL1ChainId(checkout.config);
+    const rootChainId = checkout.config.l1ChainId;
     try {
       const tokens = (
         await checkout.getTokenAllowList({
@@ -123,7 +121,7 @@ export function Transactions({
 
     if (!from?.walletAddress) return {};
 
-    const childChainId = getL2ChainId(checkout.config);
+    const childChainId = checkout.config.l2ChainId;
 
     try {
       const data = await checkout.getAllBalances({
@@ -146,8 +144,8 @@ export function Transactions({
   const getTokensDetails = async (tokensWithChainSlug: {
     [p: string]: string;
   }) => {
-    const rootChainName = getChainSlugById(getL1ChainId(checkout.config));
-    const childChainName = getChainSlugById(getL2ChainId(checkout.config));
+    const rootChainName = getChainSlugById(checkout.config.l1ChainId);
+    const childChainName = getChainSlugById(checkout.config.l2ChainId);
 
     const [rootData, childData] = await Promise.all([
       rootChainTokensHashmap(),
@@ -164,12 +162,12 @@ export function Transactions({
     });
     // Root provider is always L1
     const rootProvider = new JsonRpcProvider(
-      checkout.config.networkMap.get(getL1ChainId(checkout.config))?.rpcUrls[0],
+      checkout.config.networkMap.get(checkout.config.l1ChainId)?.rpcUrls[0],
     );
 
     // Child provider is always L2
     const childProvider = new JsonRpcProvider(
-      checkout.config.networkMap.get(getL2ChainId(checkout.config))?.rpcUrls[0],
+      checkout.config.networkMap.get(checkout.config.l2ChainId)?.rpcUrls[0],
     );
 
     const rootTokenInfoPromises: Promise<TokenInfo | undefined>[] = [];

package/src/lib/index.ts

@@ -1,6 +1,5 @@
 export * from './storage';
 export * from './constants';
-export * from './networkUtils';
 export * from './networkStyles';
 export * from './eip1193Events';
 export * from './providerEvents';

package/src/lib/utils.ts

@@ -5,7 +5,6 @@ import {
 import { Environment } from '@imtbl/config';
 import { Contract, formatUnits } from 'ethers';
 import { TransactionResponse } from '@imtbl/dex-sdk';
-import { getL1ChainId, getL2ChainId } from './networkUtils';
 import {
   CHECKOUT_CDN_BASE_URL,
   DEFAULT_GT_ONE_TOKEN_FORMATTING_DECIMALS,
@@ -25,7 +24,7 @@ export const sortTokensByAmount = (
 ) => tokens.sort((a, b) => {
   // make sure IMX is at the top of the list
   if (
-    chainId === getL2ChainId(config)
+    chainId === config.l2ChainId
     && a.token.symbol.toLowerCase() === 'imx'
     && b.token.symbol.toLowerCase() !== 'imx'
   ) {
@@ -33,7 +32,7 @@ export const sortTokensByAmount = (
   }
 
   if (
-    chainId === getL2ChainId(config)
+    chainId === config.l2ChainId
     && b.token.symbol.toLowerCase() === 'imx'
     && a.token.symbol.toLowerCase() !== 'imx'
   ) {
@@ -57,10 +56,10 @@ export const sortNetworksCompareFn = (
   config: CheckoutConfiguration,
 ) => {
   // make sure zkEVM at start of the list then L1
-  if (Number(a.chainId) === getL2ChainId(config)) {
+  if (Number(a.chainId) === config.l2ChainId) {
     return -1;
   }
-  if (Number(a.chainId) === getL1ChainId(config)) {
+  if (Number(a.chainId) === config.l1ChainId) {
     return 0;
   }
   return 1;

package/src/widgets/add-tokens/components/TokenDrawerMenu.tsx

@@ -36,7 +36,6 @@ import {
   useAnalytics,
   UserJourney,
 } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
-import { getL2ChainId } from '../../../lib';
 import { AddTokensErrorTypes } from '../types';
 import { TokenImage } from '../../../components/TokenImage/TokenImage';
 import { PULSE_SHADOW } from '../utils/animation';
@@ -133,7 +132,7 @@ export function TokenDrawerMenu({
       try {
         const tokenResponse = await checkout.getTokenAllowList({
           type: TokenFilterTypes.SWAP,
-          chainId: getL2ChainId(checkout.config),
+          chainId: checkout.config.l2ChainId,
         });
 
         if (tokenResponse?.tokens.length > 0) {

package/src/widgets/add-tokens/views/AddTokens.tsx

@@ -37,7 +37,6 @@ import {
   ViewActions,
   ViewContext,
 } from '../../../context/view-context/ViewContext';
-import { getL2ChainId } from '../../../lib';
 import { orchestrationEvents } from '../../../lib/orchestrationEvents';
 import {
   AddTokensActions,
@@ -410,7 +409,7 @@ export function AddTokens({
       try {
         const tokenResponse = await checkout.getTokenAllowList({
           type: TokenFilterTypes.ONRAMP,
-          chainId: getL2ChainId(checkout.config),
+          chainId: checkout.config.l2ChainId,
         });
 
         if (tokenResponse?.tokens.length > 0) {

package/src/widgets/bridge/BridgeWidget.tsx

@@ -25,7 +25,6 @@ import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
 import { CryptoFiatProvider } from '../../context/crypto-fiat-context/CryptoFiatProvider';
 import { StatusView } from '../../components/Status/StatusView';
 import { StatusType } from '../../components/Status/StatusType';
-import { getL1ChainId, getL2ChainId } from '../../lib';
 import { Transactions } from '../../components/Transactions/Transactions';
 import { UserJourney, useAnalytics } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { TopUpView } from '../../views/top-up/TopUpView';
@@ -114,12 +113,12 @@ export default function BridgeWidget({
 
         // Root provider is always L1
         const rootProvider = new JsonRpcProvider(
-          checkout.config.networkMap.get(getL1ChainId(checkout.config))?.rpcUrls[0],
+          checkout.config.networkMap.get(checkout.config.l1ChainId)?.rpcUrls[0],
         );
 
         // Child provider is always L2
         const childProvider = new JsonRpcProvider(
-          checkout.config.networkMap.get(getL2ChainId(checkout.config))?.rpcUrls[0],
+          checkout.config.networkMap.get(checkout.config.l2ChainId)?.rpcUrls[0],
         );
         const bridgeConfiguration = new BridgeConfiguration({
           baseConfig: new ImmutableConfiguration({ environment: checkout.config.environment }),

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

@@ -29,8 +29,6 @@ import {
   IMX_TOKEN_SYMBOL,
   NATIVE,
   addChainChangedListener,
-  getL1ChainId,
-  getL2ChainId,
   networkName,
   removeChainChangedListener,
 } from '../../../lib';
@@ -119,7 +117,7 @@ export function BridgeReviewSummary() {
 
   const isTransfer = useMemo(() => from?.network === to?.network, [from, to]);
   const isDeposit = useMemo(
-    () => (getL2ChainId(checkout.config) === to?.network),
+    () => (checkout.config.l2ChainId === to?.network),
     [from, to, checkout],
   );
   const insufficientFundsForGas = useMemo(() => {
@@ -637,7 +635,7 @@ export function BridgeReviewSummary() {
         onCloseDrawer={() => setShowNotEnoughGasDrawer(false)}
         walletAddress={from?.walletAddress || ''}
         tokenSymbol={
-            from?.network === getL1ChainId(checkout?.config)
+            from?.network === checkout.config.l1ChainId
               ? ETH_TOKEN_SYMBOL
               : IMX_TOKEN_SYMBOL
           }

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

@@ -22,7 +22,6 @@ import {
   isPassportProvider,
   isWalletConnectProvider,
 } from '../../../lib/provider';
-import { getL1ChainId, getL2ChainId } from '../../../lib';
 import { getChainNameById } from '../../../lib/chains';
 import { ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
 import { abbreviateAddress } from '../../../lib/addressUtils';
@@ -85,9 +84,9 @@ export function WalletAndNetworkSelector() {
   } as unknown as WalletChangeEvent : null;
 
   // calculating l1/l2 chains to work with based on Checkout environment
-  const l1NetworkChainId = getL1ChainId(checkout.config);
+  const l1NetworkChainId = checkout.config.l1ChainId;
   const l1NetworkName = getChainNameById(l1NetworkChainId);
-  const imtblZkEvmNetworkChainId = getL2ChainId(checkout.config);
+  const imtblZkEvmNetworkChainId = checkout.config.l2ChainId;
   const imtblZkEvmNetworkName = getChainNameById(imtblZkEvmNetworkChainId);
 
   /** From wallet and from network local state */

package/src/widgets/bridge/views/ClaimWithdrawal.tsx

@@ -12,7 +12,7 @@ import { FeeData } from 'ethers';
 import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { Transaction } from '../../../lib/clients';
 import { getChainNameById } from '../../../lib/chains';
-import { WITHDRAWAL_CLAIM_GAS_LIMIT, getL1ChainId } from '../../../lib';
+import { WITHDRAWAL_CLAIM_GAS_LIMIT } from '../../../lib';
 import { isPassportProvider } from '../../../lib/provider';
 import { isNativeToken } from '../../../lib/utils';
 import { NotEnoughEthToWithdraw } from '../../../components/Transactions/NotEnoughEthToWithdraw';
@@ -95,7 +95,7 @@ export function ClaimWithdrawal({ transaction }: ClaimWithdrawalProps) {
     }
 
     let providerToUse = from?.browserProvider;
-    const l1ChainId = getL1ChainId(checkout.config);
+    const { l1ChainId } = checkout.config;
 
     setTxProcessing(true);
 
@@ -263,7 +263,7 @@ export function ClaimWithdrawal({ transaction }: ClaimWithdrawalProps) {
     >
       <SimpleTextBody
         heading={
-          `${t('views.CLAIM_WITHDRAWAL.content.heading')} ${getChainNameById(getL1ChainId(checkout.config))}`
+          `${t('views.CLAIM_WITHDRAWAL.content.heading')} ${getChainNameById(checkout.config.l1ChainId)}`
         }
       >
         <Box sx={{ display: 'flex', flexWrap: 'wrap', pb: 'base.spacing.x1' }}>

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

@@ -38,7 +38,7 @@ import {
   getProviderSlugFromRdns,
   isPassportProvider,
 } from '../../../lib/provider';
-import { addProviderListenersForWidgetRoot, getL1ChainId } from '../../../lib';
+import { addProviderListenersForWidgetRoot } from '../../../lib';
 import {
   listItemVariants,
   listVariants,
@@ -96,7 +96,7 @@ export function WalletList(props: WalletListProps) {
 
   // Don't allow Passport if targetChainId is L1
   const passportProviderDetail = useMemo(
-    () => targetChainId !== getL1ChainId(checkout!.config)
+    () => targetChainId !== checkout!.config.l1ChainId
       && providers
         .filter((provider) => !blocklistWalletRdns.includes(provider.info.rdns))
         .find((provider) => provider.info.rdns === WalletProviderRdns.PASSPORT),

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

@@ -10,7 +10,6 @@ import { EthereumPlanetHero } from '../../../components/Hero/EthereumPlanetHero'
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { ConnectWidgetViews } from '../../../context/view-context/ConnectViewContextTypes';
 import { ConnectActions, ConnectContext } from '../context/ConnectContext';
-import { getL1ChainId } from '../../../lib/networkUtils';
 import {
   ViewContext,
   ViewActions,
@@ -45,7 +44,7 @@ export function SwitchNetworkEth() {
     try {
       const switchRes = await checkout.switchNetwork({
         provider,
-        chainId: getL1ChainId(checkout.config),
+        chainId: checkout.config.l1ChainId,
       });
 
       connectDispatch({
@@ -88,7 +87,7 @@ export function SwitchNetworkEth() {
     >
       <SimpleTextBody
         heading={t('views.SWITCH_NETWORK.eth.heading', {
-          networkName: getChainNameById(getL1ChainId(checkout!.config)),
+          networkName: getChainNameById(checkout!.config.l1ChainId),
         })}
       >
         {t('views.SWITCH_NETWORK.eth.body')}

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

@@ -10,7 +10,7 @@ import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { ConnectWidgetViews } from '../../../context/view-context/ConnectViewContextTypes';
 import { ConnectActions, ConnectContext } from '../context/ConnectContext';
 import { ViewContext, ViewActions } from '../../../context/view-context/ViewContext';
-import { addChainChangedListener, getL2ChainId, removeChainChangedListener } from '../../../lib';
+import { addChainChangedListener, removeChainChangedListener } from '../../../lib';
 import { ImmutablePlanetHero } from '../../../components/Hero/ImmutablePlanetHero';
 import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
@@ -36,7 +36,7 @@ export function SwitchNetworkZkEVM() {
       const currentChainId = await provider.send('eth_chainId', []);
       // eslint-disable-next-line radix
       const parsedChainId = Number(currentChainId.toString());
-      if (parsedChainId === getL2ChainId(checkout.config)) {
+      if (parsedChainId === checkout.config.l2ChainId) {
         connectDispatch({
           payload: {
             type: ConnectActions.SET_PROVIDER,
@@ -79,7 +79,7 @@ export function SwitchNetworkZkEVM() {
     // eslint-disable-next-line radix
     const parsedChainId = Number(currentChainId.toString());
 
-    if (parsedChainId === getL2ChainId(checkout.config)) {
+    if (parsedChainId === checkout.config.l2ChainId) {
       connectDispatch({
         payload: {
           type: ConnectActions.SET_PROVIDER,
@@ -108,7 +108,7 @@ export function SwitchNetworkZkEVM() {
         try {
           await checkout.addNetwork({
             provider,
-            chainId: getL2ChainId(checkout.config),
+            chainId: checkout.config.l2ChainId,
           });
           connectDispatch({
             payload: {
@@ -134,7 +134,7 @@ export function SwitchNetworkZkEVM() {
 
       const switchRes = await checkout.switchNetwork({
         provider,
-        chainId: getL2ChainId(checkout.config),
+        chainId: checkout.config.l2ChainId,
       });
       connectDispatch({
         payload: {

package/src/widgets/immutable-commerce/functions/getConnectLoaderParams.ts

@@ -1,17 +1,9 @@
 import {
-  ChainId, Checkout, CommerceFlowType, WrappedBrowserProvider,
+  Checkout, CommerceFlowType, WrappedBrowserProvider,
 } from '@imtbl/checkout-sdk';
 import { ConnectLoaderParams } from '../../../components/ConnectLoader/ConnectLoader';
-import { getL1ChainId, getL2ChainId } from '../../../lib/networkUtils';
 import { View } from '../../../context/view-context/ViewContext';
 
-/**
- * Get the chain id for the checkout
- */
-const getChainId = (checkout: Checkout) => (checkout.config.isProduction
-  ? ChainId.IMTBL_ZKEVM_MAINNET
-  : ChainId.IMTBL_ZKEVM_TESTNET);
-
 /**
  * Get the connect loader params for the widget
  */
@@ -27,10 +19,10 @@ export function getConnectLoaderParams(
       return {
         checkout,
         browserProvider,
-        targetChainId: getChainId(checkout),
+        targetChainId: checkout.config.l2ChainId,
         allowedChains: [
-          getL1ChainId(checkout.config),
-          getL2ChainId(checkout.config),
+          checkout.config.l1ChainId,
+          checkout.config.l2ChainId,
         ],
       };
     case CommerceFlowType.ONRAMP:
@@ -38,10 +30,10 @@ export function getConnectLoaderParams(
       return {
         checkout,
         browserProvider,
-        targetChainId: getChainId(checkout),
+        targetChainId: checkout.config.l2ChainId,
         allowedChains: [
-          getL1ChainId(checkout.config),
-          getL2ChainId(checkout.config),
+          checkout.config.l1ChainId,
+          checkout.config.l2ChainId,
         ],
       };
     case CommerceFlowType.SALE:
@@ -50,8 +42,8 @@ export function getConnectLoaderParams(
       return {
         checkout,
         browserProvider,
-        targetChainId: getChainId(checkout),
-        allowedChains: [getL2ChainId(checkout.config)],
+        targetChainId: checkout.config.l2ChainId,
+        allowedChains: [checkout.config.l2ChainId],
       };
     default:
       return {} as ConnectLoaderParams;

package/src/widgets/on-ramp/OnRampWidgetRoot.tsx

@@ -10,7 +10,6 @@ import {
 } from '@imtbl/checkout-sdk';
 import { Base } from '../BaseWidgetRoot';
 import { ConnectLoader, ConnectLoaderParams } from '../../components/ConnectLoader/ConnectLoader';
-import { getL1ChainId, getL2ChainId } from '../../lib';
 import { isValidAddress, isValidAmount } from '../../lib/validations/widgetValidators';
 import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
 import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
@@ -82,7 +81,7 @@ export class OnRamp extends Base<WidgetType.ONRAMP> {
       walletProviderName: this.parameters.walletProviderName,
       browserProvider: this.browserProvider,
       checkout: this.checkout,
-      allowedChains: [getL1ChainId(this.checkout.config), getL2ChainId(this.checkout.config)],
+      allowedChains: [this.checkout.config.l1ChainId, this.checkout.config.l2ChainId],
     };
 
     this.reactRoot.render(

package/src/widgets/sale/SaleWidgetRoot.tsx

@@ -15,7 +15,6 @@ import {
   ConnectLoader,
   ConnectLoaderParams,
 } from '../../components/ConnectLoader/ConnectLoader';
-import { getL2ChainId } from '../../lib';
 import { isValidWalletProvider } from '../../lib/validations/widgetValidators';
 import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
 import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
@@ -124,7 +123,7 @@ export class Sale extends Base<WidgetType.SALE> {
         : ChainId.IMTBL_ZKEVM_TESTNET,
       browserProvider: this.browserProvider,
       checkout: this.checkout,
-      allowedChains: [getL2ChainId(this.checkout!.config)],
+      allowedChains: [this.checkout.config.l2ChainId],
     };
     const config = this.strongConfig();
 

package/src/widgets/sale/components/FundingRouteExecute/FundingRouteExecute.tsx

@@ -46,7 +46,6 @@ import {
   ViewActions,
   ViewContext,
 } from '../../../../context/view-context/ViewContext';
-import { getL1ChainId, getL2ChainId } from '../../../../lib/networkUtils';
 import { LoadingView } from '../../../../views/loading/LoadingView';
 import ConnectWidget from '../../../connect/ConnectWidget';
 import SwapWidget from '../../../swap/SwapWidget';
@@ -142,7 +141,7 @@ export function FundingRouteExecute({
           tokenAddress: step.fundingItem.token.address,
           amount: step.fundingItem.fundsRequired.formattedAmount,
         });
-        if (Number(network.chainId) === getL1ChainId(checkout!.config)) {
+        if (Number(network.chainId) === checkout!.config.l1ChainId) {
           setView(FundingRouteExecuteViews.EXECUTE_BRIDGE);
           return;
         }
@@ -158,7 +157,7 @@ export function FundingRouteExecute({
           toTokenAddress: requiredTokenAddress,
           autoProceed: true,
         });
-        if (Number(network.chainId) === getL2ChainId(checkout!.config)) {
+        if (Number(network.chainId) === checkout!.config.l2ChainId) {
           setView(FundingRouteExecuteViews.EXECUTE_SWAP);
           return;
         }

package/src/widgets/swap/SwapWidget.tsx

@@ -34,7 +34,7 @@ import {
   SwapWidgetViews,
 } from '../../context/view-context/SwapViewContextTypes';
 import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
-import { DEFAULT_BALANCE_RETRY_POLICY, getL2ChainId } from '../../lib';
+import { DEFAULT_BALANCE_RETRY_POLICY } from '../../lib';
 import { StatusView } from '../../components/Status/StatusView';
 import { StatusType } from '../../components/Status/StatusType';
 import { ErrorView } from '../../views/error/ErrorView';
@@ -176,7 +176,7 @@ export default function SwapWidget({
 
       // If the provider's network is not the correct network, return out of this and let the
       // connect loader handle the switch network functionality
-      if (Number(network.chainId) !== getL2ChainId(checkout.config)) return;
+      if (Number(network.chainId) !== checkout.config.l2ChainId) return;
 
       swapDispatch({
         payload: {

package/src/widgets/swap/SwapWidgetRoot.tsx

@@ -11,7 +11,6 @@ import {
 } from '@imtbl/checkout-sdk';
 import { Base } from '../BaseWidgetRoot';
 import { ConnectLoader, ConnectLoaderParams } from '../../components/ConnectLoader/ConnectLoader';
-import { getL2ChainId } from '../../lib';
 import { isValidAddress, isValidAmount, isValidWalletProvider } from '../../lib/validations/widgetValidators';
 import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
 import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
@@ -84,7 +83,7 @@ export class Swap extends Base<WidgetType.SWAP> {
       walletProviderName: this.parameters.walletProviderName,
       browserProvider: this.browserProvider,
       checkout: this.checkout,
-      allowedChains: [getL2ChainId(this.checkout!.config)],
+      allowedChains: [this.checkout.config.l2ChainId],
     };
 
     this.reactRoot!.render(

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

@@ -26,7 +26,6 @@ import {
   NATIVE,
   DEFAULT_TOKEN_VALIDATION_DECIMALS,
   ESTIMATE_DEBOUNCE,
-  getL2ChainId,
 } from '../../../lib';
 import { SelectInput } from '../../../components/FormComponents/SelectInput/SelectInput';
 import {
@@ -844,7 +843,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
       const currentChainId = await (provider.provider as any).send('eth_chainId', []);
       // eslint-disable-next-line radix
       const parsedChainId = parseInt(currentChainId.toString());
-      if (parsedChainId !== getL2ChainId(checkout.config)) {
+      if (parsedChainId !== checkout.config.l2ChainId) {
         setShowNetworkSwitchDrawer(true);
         return;
       }
@@ -1126,7 +1125,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
       />
       <NetworkSwitchDrawer
         visible={showNetworkSwitchDrawer}
-        targetChainId={getL2ChainId(checkout?.config!)}
+        targetChainId={checkout?.config.l2ChainId!}
         provider={provider!}
         checkout={checkout!}
         onCloseDrawer={() => setShowNetworkSwitchDrawer(false)}

package/src/widgets/transfer/TransferWidget.tsx

@@ -22,7 +22,6 @@ import {
 } from '../../context/crypto-fiat-context/CryptoFiatContext';
 import { CryptoFiatProvider } from '../../context/crypto-fiat-context/CryptoFiatProvider';
 import { sendTokens, loadBalances } from './functions';
-import { getL2ChainId } from '../../lib';
 import { TransferComplete } from './TransferComplete';
 import { SendingTokens } from './SendingTokens';
 import { AwaitingApproval } from './AwaitingApproval';
@@ -154,7 +153,7 @@ function TransferWidgetInner(props: TransferWidgetInputs) {
       setViewState({
         type: 'COMPLETE',
         receipt,
-        chainId: getL2ChainId(viewState.checkout.config),
+        chainId: viewState.checkout.config.l2ChainId,
         checkout: viewState.checkout,
         provider: viewState.provider,
         allowedBalances: viewState.allowedBalances,