fix(checkout): Allow targetChainId to use overrides

Author: keithbro-imx

packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx

@@ -114,12 +114,7 @@ export default function ConnectWidget({
 
   const { identify, page, user } = useAnalytics();
 
-  let targetChain = targetChainId;
-  if (!targetChain) {
-    targetChain = checkout.config.isProduction
-      ? ChainId.IMTBL_ZKEVM_MAINNET
-      : ChainId.IMTBL_ZKEVM_TESTNET;
-  }
+  const targetChain = targetChainId ?? checkout.config.l2ChainId;
 
   useEffect(() => {
     if (!browserProvider) return;

packages/checkout/widgets-lib/src/widgets/connect/ConnectWidgetRoot.tsx

@@ -1,9 +1,7 @@
 import React, { Suspense } from 'react';
 import {
-  ChainId,
   ConnectWidgetParams, IMTBLWidgetEvents, WidgetProperties, WidgetType,
 } from '@imtbl/checkout-sdk';
-import { Environment } from '@imtbl/config';
 import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
 import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
 import { LoadingView } from '../../views/loading/LoadingView';
@@ -28,29 +26,15 @@ export class Connect extends Base<WidgetType.CONNECT> {
   protected getValidatedParameters(params: ConnectWidgetParams): ConnectWidgetParams {
     const validatedParams = params;
 
-    // validating targetChainId per environment
-    if (!params.targetChainId
-      && this.checkout.config.isProduction) {
-      validatedParams.targetChainId = ChainId.IMTBL_ZKEVM_MAINNET;
-    } else if (params.targetChainId
-      && this.checkout.config.isProduction
-      && (params.targetChainId !== ChainId.ETHEREUM && params.targetChainId !== ChainId.IMTBL_ZKEVM_MAINNET)
-    ) {
-      // eslint-disable-next-line max-len, no-console
-      console.warn(`Cannot set targetChainId to ${params.targetChainId} in ${Environment.PRODUCTION} environment, defaulting to ${getChainNameById(ChainId.IMTBL_ZKEVM_MAINNET)}, chainId ${ChainId.IMTBL_ZKEVM_MAINNET}`);
-      validatedParams.targetChainId = ChainId.IMTBL_ZKEVM_MAINNET;
-    }
+    const { l1ChainId, l2ChainId, environment } = this.checkout.config;
 
-    if (!params.targetChainId
-      && this.checkout.config.environment === Environment.SANDBOX) {
-      validatedParams.targetChainId = ChainId.IMTBL_ZKEVM_TESTNET;
-    } else if (params.targetChainId
-      && this.checkout.config.environment === Environment.SANDBOX
-      && (params.targetChainId !== ChainId.SEPOLIA && params.targetChainId !== ChainId.IMTBL_ZKEVM_TESTNET)
-    ) {
+    // validating targetChainId per environment
+    if (!params.targetChainId) {
+      validatedParams.targetChainId = l2ChainId;
+    } else if (![l1ChainId, l2ChainId].includes(params.targetChainId)) {
       // eslint-disable-next-line max-len, no-console
-      console.warn(`Cannot set targetChainId to ${params.targetChainId} in ${Environment.SANDBOX} environment, defaulting to ${getChainNameById(ChainId.IMTBL_ZKEVM_TESTNET)}, chainId ${ChainId.IMTBL_ZKEVM_TESTNET}`);
-      validatedParams.targetChainId = ChainId.IMTBL_ZKEVM_TESTNET;
+      console.warn(`Cannot set targetChainId to ${params.targetChainId} in ${environment} environment, defaulting to ${getChainNameById(l2ChainId)}, chainId ${l2ChainId}`);
+      validatedParams.targetChainId = l2ChainId;
     }
 
     return params;

packages/checkout/widgets-sample-app/src/components/ui/connect/connect.tsx

@@ -1,12 +1,53 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Checkout, ConnectEventType, WalletProviderRdns, WidgetTheme, WidgetType } from '@imtbl/checkout-sdk';
+import { ChainId, ChainName, ChainSlug, Checkout, CheckoutModuleConfiguration, ConnectEventType, WalletProviderRdns, WidgetTheme, WidgetType } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
 import { WidgetsFactory } from '@imtbl/checkout-widgets';
 
+const ZKEVM_NATIVE_TOKEN = {
+  name: "IMX",
+  symbol: "IMX",
+  decimals: 18,
+  address: "native",
+};
+
+const DEV_CHAIN_ID_NETWORK_MAP = new Map([
+  [
+    ChainId.SEPOLIA,
+    {
+      chainIdHex: `0x${ChainId.SEPOLIA.toString(16)}`,
+      chainName: ChainName.SEPOLIA,
+      rpcUrls: ["https://checkout-api.dev.immutable.com/v1/rpc/eth-sepolia"],
+      nativeCurrency: {
+        name: "Sep Eth",
+        symbol: "ETH",
+        decimals: 18,
+      },
+      blockExplorerUrls: ["https://sepolia.etherscan.io/"],
+    },
+  ],
+  [
+    ChainId.IMTBL_ZKEVM_DEVNET,
+    {
+      chainIdHex: `0x${ChainId.IMTBL_ZKEVM_DEVNET.toString(16)}`,
+      chainName: ChainName.IMTBL_ZKEVM_DEVNET,
+      rpcUrls: ["https://rpc.dev.immutable.com"],
+      nativeCurrency: ZKEVM_NATIVE_TOKEN,
+    },
+  ],
+]);
+
+const overrides: CheckoutModuleConfiguration["overrides"] = {
+    baseUrl: "https://api.dev.immutable.com",
+    chainSlug: ChainSlug.IMTBL_ZKEVM_DEVNET,
+    l2ChainId: ChainId.IMTBL_ZKEVM_DEVNET,
+    networkMap: DEV_CHAIN_ID_NETWORK_MAP,
+    remoteConfigEndpoint: "https://checkout-api.dev.immutable.com",
+  };
+
 const CONNECT_TARGET_ID = "connect-widget-target";
 function ConnectUI() {
-  const checkout = useMemo(() => new Checkout({ baseConfig: { environment: Environment.SANDBOX } }), []);
+  const checkout = useMemo(() => new Checkout({ baseConfig: { environment: Environment.SANDBOX }, overrides }), []);
   const [factory, setFactory] = useState<ImmutableCheckoutWidgets.WidgetsFactory>();
   const connect = useMemo(() => {
     if(!factory) return;