[NO CHANGELOG][Add Funds Widget]Add params to enable network check in…

… Connect Loader and Connect Widget (#2153)
immutable · Sep 9, 2024 · aa70955 · aa70955
1 parent 96824ab
commit aa70955
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx b/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx
@@ -39,6 +39,7 @@ export interface ConnectLoaderParams {
   web3Provider?: Web3Provider;
   checkout: Checkout;
   allowedChains: ChainId[];
+  isCheckNetworkEnabled?: boolean;
 }
 
 export function ConnectLoader({
@@ -53,6 +54,7 @@ export function ConnectLoader({
     walletProviderName,
     allowedChains,
     web3Provider,
+    isCheckNetworkEnabled,
   } = params;
 
   const { t } = useTranslation();
@@ -186,7 +188,8 @@ export function ConnectLoader({
 
           // If unsupported network or current network is not in the allowed chains
           // then show the switch network screen
-          if (!currentNetworkInfo.isSupported || !allowedChains.includes(currentNetworkInfo.chainId)) {
+          if ((isCheckNetworkEnabled === undefined || isCheckNetworkEnabled)
+              && (!allowedChains.includes(currentNetworkInfo.chainId) || !currentNetworkInfo.isSupported)) {
             connectLoaderDispatch({
               payload: {
                 type: ConnectLoaderActions.UPDATE_CONNECTION_STATUS,
@@ -236,17 +239,18 @@ export function ConnectLoader({
       )}
       <ConnectLoaderContext.Provider value={connectLoaderReducerValues}>
         {(connectionStatus === ConnectionStatus.NOT_CONNECTED_NO_PROVIDER
-          || connectionStatus === ConnectionStatus.NOT_CONNECTED
-          || connectionStatus === ConnectionStatus.CONNECTED_WRONG_NETWORK) && (
-            <ConnectWidget
-              config={widgetConfig}
-              targetChainId={targetChainId}
-              web3Provider={provider}
-              checkout={checkout}
-              deepLink={deepLink}
-              sendCloseEventOverride={closeEvent}
-              allowedChains={allowedChains}
-            />
+                    || connectionStatus === ConnectionStatus.NOT_CONNECTED
+                    || connectionStatus === ConnectionStatus.CONNECTED_WRONG_NETWORK) && (
+                    <ConnectWidget
+                      config={widgetConfig}
+                      targetChainId={targetChainId}
+                      web3Provider={provider}
+                      checkout={checkout}
+                      deepLink={deepLink}
+                      sendCloseEventOverride={closeEvent}
+                      allowedChains={allowedChains}
+                      isCheckNetworkEnabled={isCheckNetworkEnabled ?? true}
+                    />
         )}
         {/* If the user has connected then render the widget */}
         {connectionStatus === ConnectionStatus.CONNECTED_WITH_NETWORK && (children)}

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx
@@ -65,6 +65,7 @@ export type ConnectWidgetInputs = ConnectWidgetParams & {
   allowedChains?: ChainId[];
   checkout: Checkout;
   web3Provider?: Web3Provider;
+  isCheckNetworkEnabled?: boolean;
 };
 
 export default function ConnectWidget({
@@ -77,6 +78,7 @@ export default function ConnectWidget({
   allowedChains,
   blocklistWalletRdns,
   deepLink = ConnectWidgetViews.CONNECT_WALLET,
+  isCheckNetworkEnabled,
 }: ConnectWidgetInputs) {
   const { t } = useTranslation();
   const { environment } = config;
@@ -221,6 +223,7 @@ export default function ConnectWidget({
               targetChainId={targetChain}
               allowedChains={allowedChains ?? [targetChain]}
               blocklistWalletRdns={blocklistWalletRdns}
+              checkNetwork={isCheckNetworkEnabled ?? true}
             />
           )}
           {view.type === ConnectWidgetViews.SWITCH_NETWORK && isZkEvmChainId(targetChain) && (

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx
@@ -57,11 +57,17 @@ export interface WalletListProps {
   targetChainId: ChainId;
   allowedChains: ChainId[];
   blocklistWalletRdns?: string[];
+  isCheckNetworkEnabled: boolean;
 }
 
 export function WalletList(props: WalletListProps) {
   const { t } = useTranslation();
-  const { targetWalletRdns, targetChainId, allowedChains } = props;
+  const {
+    targetWalletRdns,
+    targetChainId,
+    allowedChains,
+    isCheckNetworkEnabled,
+  } = props;
   const blocklistWalletRdns = props?.blocklistWalletRdns || [];
   const {
     connectDispatch,
@@ -138,13 +144,15 @@ export function WalletList(props: WalletListProps) {
         });
         return;
       }
-      viewDispatch({
-        payload: {
-          type: ViewActions.UPDATE_VIEW,
-          view: { type: ConnectWidgetViews.SWITCH_NETWORK },
-        },
-      });
-      return;
+      if (isCheckNetworkEnabled) {
+        viewDispatch({
+          payload: {
+            type: ViewActions.UPDATE_VIEW,
+            view: { type: ConnectWidgetViews.SWITCH_NETWORK },
+          },
+        });
+        return;
+      }
     }
 
     viewDispatch({

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/views/ConnectWallet.tsx b/packages/checkout/widgets-lib/src/widgets/connect/views/ConnectWallet.tsx
@@ -14,13 +14,15 @@ export interface ConnectWalletProps {
   targetChainId: ChainId;
   allowedChains: ChainId[];
   blocklistWalletRdns?: string[];
+  checkNetwork: boolean;
 }
 
 export function ConnectWallet({
   targetWalletRdns,
   targetChainId,
   allowedChains,
   blocklistWalletRdns,
+  checkNetwork,
 }: ConnectWalletProps) {
   const { t } = useTranslation();
   const {
@@ -79,6 +81,7 @@ export function ConnectWallet({
           targetChainId={targetChainId}
           allowedChains={allowedChains}
           blocklistWalletRdns={blocklistWalletRdns}
+          isCheckNetworkEnabled={checkNetwork}
         />
       </Box>
     </SimpleLayout>