@web3auth/modal 10.15.0 → 11.0.0-beta.0

package/dist/lib.esm/packages/modal/src/ui/components/Loader/Loader.js

@@ -1,10 +1,9 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MODAL_STATUS } from '../../interfaces.js';
 import i18nInstance from '../../localeImport.js';
-import CircularLoader from '../CircularLoader/CircularLoader.js';
 import Image from '../Image/Image.js';
-import PulseLoader from '../PulseLoader/PulseLoader.js';
+import SpinnerLoader from '../SpinnerLoader/SpinnerLoader.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /**
@@ -18,7 +17,6 @@ function ConnectingStatus(props) {
   });
   const {
     connector,
-    appLogo,
     connectorName
   } = props;
   const providerIcon = useMemo(() => connector === "twitter" ? /*#__PURE__*/jsx(Image, {
@@ -30,16 +28,10 @@ function ConnectingStatus(props) {
   }), [connector]);
   return /*#__PURE__*/jsxs("div", {
     className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-6",
-      children: [/*#__PURE__*/jsx("figure", {
-        className: "w3a--flex w3a--size-10 w3a--items-center w3a--justify-center w3a--overflow-hidden",
-        children: /*#__PURE__*/jsx("img", {
-          src: appLogo,
-          alt: "",
-          className: "w3a--size-full w3a--object-contain"
-        })
-      }), /*#__PURE__*/jsx(PulseLoader, {}), providerIcon]
+    children: [/*#__PURE__*/jsx(SpinnerLoader, {
+      width: 95,
+      height: 95,
+      children: providerIcon
     }), /*#__PURE__*/jsxs("div", {
       className: "w3a--flex w3a--flex-col w3a--gap-y-1",
       children: [/*#__PURE__*/jsx("div", {
@@ -115,18 +107,15 @@ function ErroredStatus(props) {
   });
 }
 function AuthorizingStatus(props) {
-  var _walletRegistry$defau, _walletRegistry$other;
+  var _externalWalletsConfi;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
   });
   const {
     connector,
     externalWalletsConfig,
-    walletRegistry,
     handleMobileVerifyConnect
   } = props;
-  const registryItem = (walletRegistry === null || walletRegistry === void 0 || (_walletRegistry$defau = walletRegistry.default) === null || _walletRegistry$defau === void 0 ? void 0 : _walletRegistry$defau[connector]) || (walletRegistry === null || walletRegistry === void 0 || (_walletRegistry$other = walletRegistry.others) === null || _walletRegistry$other === void 0 ? void 0 : _walletRegistry$other[connector]);
-  const primaryColor = (registryItem === null || registryItem === void 0 ? void 0 : registryItem.primaryColor) || "";
   const handleMobileVerifyConnectClick = () => {
     handleMobileVerifyConnect({
       connector: connector
@@ -137,16 +126,13 @@ function AuthorizingStatus(props) {
     children: [/*#__PURE__*/jsx("p", {
       className: "w3a--p-2 w3a--text-center w3a--text-base w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white",
       children: t("modal.loader.authorizing-header", {
-        connector: externalWalletsConfig[connector].label
+        connector: (_externalWalletsConfi = externalWalletsConfig[connector]) === null || _externalWalletsConfi === void 0 ? void 0 : _externalWalletsConfi.label
       })
     }), /*#__PURE__*/jsx("div", {
       className: "w3a--flex w3a--justify-center",
-      children: /*#__PURE__*/jsx(CircularLoader, {
+      children: /*#__PURE__*/jsx(SpinnerLoader, {
         width: 95,
         height: 95,
-        thickness: 6,
-        arcSizeDeg: 100,
-        arcColors: primaryColor ? [primaryColor, primaryColor] : undefined,
         children: /*#__PURE__*/jsx(Image, {
           imageId: `login-${connector}`,
           hoverImageId: `login-${connector}`,
@@ -164,6 +150,102 @@ function AuthorizingStatus(props) {
     })]
   });
 }
+function ConsentRequiredStatus(props) {
+  const {
+    onAccept,
+    onDecline,
+    privacyPolicy,
+    tncLink
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const handleAccept = async () => {
+    setIsSubmitting(true);
+    try {
+      await (onAccept === null || onAccept === void 0 ? void 0 : onAccept());
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleDecline = async () => {
+    setIsSubmitting(true);
+    try {
+      await (onDecline === null || onDecline === void 0 ? void 0 : onDecline());
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--gap-y-6 w3a--mt-8",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w3a--flex w3a--items-center w3a--justify-center w3a--p-3 w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--rounded-full w3a--text-app-gray-600 dark:w3a--text-app-white",
+      children: /*#__PURE__*/jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        className: "w3a--size-10",
+        children: /*#__PURE__*/jsx("path", {
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "2",
+          d: "M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2"
+        })
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "w3a--w-full w3a--px-8 w3a--text-center w3a--text-app-gray-900 dark:w3a--text-app-white",
+      children: t("modal.consent.description", {
+        defaultValue: "To proceed, please accept the terms and privacy policy"
+      })
+    }), (tncLink || privacyPolicy) && /*#__PURE__*/jsxs("div", {
+      className: "w3a--flex w3a--w-full w3a--flex-col w3a--gap-y-2",
+      children: [tncLink && /*#__PURE__*/jsx("a", {
+        href: tncLink,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "w3a--btn !w3a--text-sm w3a--font-light !w3a--justify-start w3a--rounded-full w3a--border-app-gray-50 w3a--bg-app-gray-50 w3a--p-3 w3a--text-left w3a--text-app-gray-700 hover:w3a--border-app-gray-200 hover:w3a--bg-app-gray-200 hover:w3a--text-app-gray-900 dark:w3a--border-app-gray-800 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white dark:hover:w3a--border-app-gray-600 dark:hover:w3a--bg-app-gray-600",
+        children: t("modal.consent.tnc", {
+          defaultValue: "Terms of service"
+        })
+      }), privacyPolicy && /*#__PURE__*/jsx("a", {
+        href: privacyPolicy,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "w3a--btn !w3a--text-sm w3a--font-light !w3a--justify-start w3a--rounded-full w3a--border-app-gray-50 w3a--bg-app-gray-50 w3a--p-3 w3a--text-left w3a--text-app-gray-700 hover:w3a--border-app-gray-200 hover:w3a--bg-app-gray-200 hover:w3a--text-app-gray-900 dark:w3a--border-app-gray-800 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white dark:hover:w3a--border-app-gray-600 dark:hover:w3a--bg-app-gray-600",
+        children: t("modal.consent.privacy", {
+          defaultValue: "Privacy Policy"
+        })
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "w3a--flex w3a--w-full w3a--gap-x-2",
+      children: [/*#__PURE__*/jsx("button", {
+        type: "button",
+        disabled: isSubmitting,
+        onClick: handleDecline,
+        className: "w3a--btn w3a--rounded-full disabled:w3a--opacity-60",
+        children: /*#__PURE__*/jsx("p", {
+          className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+          children: t("modal.consent.decline", {
+            defaultValue: "Decline"
+          })
+        })
+      }), /*#__PURE__*/jsx("button", {
+        type: "button",
+        disabled: isSubmitting,
+        onClick: handleAccept,
+        className: "w3a--btn w3a--rounded-full w3a--border-app-primary-600 w3a--bg-app-primary-600 hover:w3a--border-app-primary-700 hover:w3a--bg-app-primary-700 disabled:w3a--opacity-60 dark:w3a--border-app-primary-600 dark:w3a--bg-app-primary-600 dark:hover:w3a--border-app-primary-700 dark:hover:w3a--bg-app-primary-700",
+        children: /*#__PURE__*/jsx("p", {
+          className: "w3a--text-app-onPrimary",
+          children: t("modal.consent.accept", {
+            defaultValue: "Accept"
+          })
+        })
+      })]
+    })]
+  });
+}
 
 /**
  * Loader component
@@ -176,13 +258,15 @@ function Loader(props) {
     connectorName,
     modalStatus,
     onClose,
-    appLogo,
     message,
     isConnectAndSignAuthenticationMode,
     externalWalletsConfig,
-    walletRegistry,
     handleMobileVerifyConnect,
-    hideSuccessScreen = false
+    hideSuccessScreen = false,
+    onAcceptConsent,
+    onDeclineConsent,
+    privacyPolicy,
+    tncLink
   } = props;
   const isConnectedAccordingToAuthenticationMode = useMemo(() => !isConnectAndSignAuthenticationMode && modalStatus === MODAL_STATUS.CONNECTED || isConnectAndSignAuthenticationMode && modalStatus === MODAL_STATUS.AUTHORIZED, [modalStatus, isConnectAndSignAuthenticationMode]);
   useEffect(() => {
@@ -196,12 +280,12 @@ function Loader(props) {
       return () => clearTimeout(timeout);
     }
   }, [isConnectedAccordingToAuthenticationMode, hideSuccessScreen, onClose]);
+  const isConsentRequiringStatus = modalStatus === MODAL_STATUS.CONSENT_REQUIRING;
   return /*#__PURE__*/jsxs("div", {
-    className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+    className: isConsentRequiringStatus ? "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4" : "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
     children: [modalStatus === MODAL_STATUS.CONNECTING && /*#__PURE__*/jsx(ConnectingStatus, {
       connector: connector,
-      connectorName: connectorName,
-      appLogo: appLogo
+      connectorName: connectorName
     }), isConnectedAccordingToAuthenticationMode && !hideSuccessScreen && /*#__PURE__*/jsx(ConnectedStatus, {
       message: message
     }), modalStatus === MODAL_STATUS.ERRORED && /*#__PURE__*/jsx(ErroredStatus, {
@@ -209,8 +293,12 @@ function Loader(props) {
     }), modalStatus === MODAL_STATUS.AUTHORIZING && /*#__PURE__*/jsx(AuthorizingStatus, {
       connector: connector,
       externalWalletsConfig: externalWalletsConfig,
-      walletRegistry: walletRegistry,
       handleMobileVerifyConnect: handleMobileVerifyConnect
+    }), isConsentRequiringStatus && /*#__PURE__*/jsx(ConsentRequiredStatus, {
+      onAccept: onAcceptConsent,
+      onDecline: onDeclineConsent,
+      privacyPolicy: privacyPolicy,
+      tncLink: tncLink
     })]
   });
 }

package/dist/lib.esm/packages/modal/src/ui/components/Modal/Modal.js

@@ -28,6 +28,7 @@ function Modal(props) {
         setIsOpen(true);
       }, 50);
     } else {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
       setIsOpen(false);
       // Remove overflow styling to enable scroll again.
       document.body.style.overflow = "";

package/dist/lib.esm/packages/modal/src/ui/components/SocialLoginList/SocialLoginList.js

@@ -62,7 +62,6 @@ function SocialLoginList(props) {
               children: getProviderIcon(row.method, isDark, ".svg")
             }),
             onClick: () => handleSocialLoginClick({
-              connector: row.connector,
               loginParams: row.loginParams
             }),
             buttonRadius
@@ -86,7 +85,6 @@ function SocialLoginList(props) {
                 children: getProviderIcon(row.method, isDark, ".svg")
               }),
               onClick: () => handleSocialLoginClick({
-                connector: row.connector,
                 loginParams: row.loginParams
               }),
               buttonRadius
@@ -95,6 +93,7 @@ function SocialLoginList(props) {
         }, row.method)), canShowMore && visibleRow.length > 4 && /*#__PURE__*/jsx(Button, {
           type: BUTTON_TYPE.SOCIAL,
           props: {
+            isDark,
             showIcon: false,
             onClick: handleExpandSocialLogins,
             btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11",
@@ -131,7 +130,6 @@ function SocialLoginList(props) {
             isDark,
             isPrimaryBtn: false,
             onClick: () => handleSocialLoginClick({
-              connector: row.connector,
               loginParams: row.loginParams
             }),
             btnStyle: "w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--items-center !w3a--justify-start w3a--w-full w3a--h-11",

package/dist/lib.esm/packages/modal/src/ui/components/SpinnerLoader/SpinnerLoader.css.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".w3a-parent-container .w3a--spinner-loader{display:inline-flex;height:60px;position:relative;width:60px}.w3a-parent-container .w3a--spinner-loader-ring{--spinner-color:var(--app-gray-400);background-image:conic-gradient(from 0deg at 50% 50%,var(--spinner-color) 0,#e5e7ebcc 90deg,#e5e7ebcc 270deg,var(--spinner-color) 1turn);background-position:0 0;background-size:100% 100%;border-radius:100vw;display:inline-block;height:100%;-webkit-mask:radial-gradient(farthest-side,#000 98%,#0000) center/85% 85% no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:destination-out;mask:radial-gradient(farthest-side,#000 98%,#0000) center/85% 85% no-repeat,linear-gradient(#000 0 0);mask-composite:exclude;position:absolute;width:100%}.w3a-parent-container .w3a--dark .w3a--spinner-loader-ring{background-image:conic-gradient(from 0deg at 50% 50%,var(--spinner-color) 0,#e5e7eb33 90deg,#e5e7eb33 270deg,var(--spinner-color) 1turn)}.w3a-parent-container .w3a--spinner-loader-image{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}";
+styleInject(css_248z);

package/dist/lib.esm/packages/modal/src/ui/components/SpinnerLoader/SpinnerLoader.js

@@ -0,0 +1,28 @@
+import './SpinnerLoader.css.js';
+import { cn } from '../../utils.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const SpinnerLoader = props => {
+  const {
+    children,
+    classes,
+    width = 60,
+    height = 60,
+    className
+  } = props;
+  return /*#__PURE__*/jsxs("div", {
+    className: cn("w3a--spinner-loader", className),
+    style: {
+      width,
+      height
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: cn("w3a--spinner-loader-ring w3a--animate-spin", classes === null || classes === void 0 ? void 0 : classes.spinner)
+    }), children && /*#__PURE__*/jsx("div", {
+      className: "w3a--spinner-loader-image",
+      children: children
+    })]
+  });
+};
+
+export { SpinnerLoader as default };

package/dist/lib.esm/packages/modal/src/ui/components/Toast/Toast.js

@@ -1,5 +1,5 @@
-import { useContext, useEffect } from 'react';
-import { RootContext } from '../../context/RootContext.js';
+import { useEffect } from 'react';
+import { useToast } from '../../context/RootContext.js';
 import { TOAST_TYPE } from '../../interfaces.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -7,7 +7,7 @@ const Toast = () => {
   const {
     toast,
     setToast
-  } = useContext(RootContext);
+  } = useToast();
   useEffect(() => {
     if (toast.message) {
       setTimeout(() => {

package/dist/lib.esm/packages/modal/src/ui/constants.js

@@ -1,8 +1,11 @@
 const PAGES = {
-  LOGIN: "login",
-  CONNECT_WALLET: "connect_wallet"};
+  /** Main login options: social logins and wallet button (e.g. MetaMask) */
+  LOGIN_OPTIONS: "login",
+  /** List of all available wallets to connect */
+  WALLET_LIST: "connect_wallet"};
 const CONNECT_WALLET_PAGES = {
   CONNECT_WALLET: "Connect Your Wallet",
+  /** Sub-page title when showing QR/instructions for selected wallet */
   SELECTED_WALLET: "Selected Wallet"
 };
 const DEFAULT_LOGO_LIGHT = "https://images.web3auth.io/web3auth-logo-w.svg"; // logo used on light mode

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/ConnectWallet/ConnectWallet.js

@@ -1,9 +1,11 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { WALLET_CONNECTORS, ANALYTICS_EVENTS, log } from '@web3auth/no-modal';
-import { useContext, useState, useMemo, useEffect } from 'react';
-import { CONNECT_WALLET_PAGES } from '../../constants.js';
+import { useContext, useState, useCallback, useMemo, useEffect } from 'react';
+import { CONNECT_WALLET_PAGES, PAGES } from '../../constants.js';
 import { AnalyticsContext } from '../../context/AnalyticsContext.js';
-import { RootContext } from '../../context/RootContext.js';
+import { useModalState } from '../../context/ModalStateContext.js';
+import { useBodyState } from '../../context/RootContext.js';
+import { useWidget } from '../../context/WidgetContext.js';
 import ConnectWalletChainFilter from './ConnectWalletChainFilter/ConnectWalletChainFilter.js';
 import ConnectWalletHeader from './ConnectWalletHeader/ConnectWalletHeader.js';
 import ConnectWalletList from './ConnectWalletList/ConnectWalletList.js';
@@ -12,32 +14,39 @@ import ConnectWalletSearch from './ConnectWalletSearch/ConnectWalletSearch.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ConnectWallet(props) {
-  var _selectedButton$walle;
+  var _bodyState$installLin2, _bodyState$multiChain2, _selectedButton$walle;
   const {
-    isDark,
-    config,
-    walletConnectUri,
-    metamaskConnectUri,
-    walletRegistry,
     allRegistryButtons,
     customConnectorButtons,
     connectorVisibilityMap,
-    deviceDetails,
-    buttonRadius = "pill",
-    chainNamespace,
-    isExternalWalletModeOnly,
-    onBackClick,
-    handleExternalWalletClick,
-    handleWalletDetailsHeight,
-    disableBackButton
+    isExternalWalletModeOnly
   } = props;
   const {
     bodyState,
     setBodyState
-  } = useContext(RootContext);
+  } = useBodyState();
   const {
     analytics
   } = useContext(AnalyticsContext);
+  const {
+    deviceDetails,
+    isDark,
+    uiConfig
+  } = useWidget();
+  const {
+    walletRegistry
+  } = uiConfig;
+  const {
+    modalState,
+    setModalState,
+    handleShowExternalWallets,
+    preHandleExternalWalletClick: handleExternalWalletClick
+  } = useModalState();
+  const {
+    externalWalletsConfig: config,
+    walletConnectUri,
+    metamaskConnectUri
+  } = modalState;
   const [currentPage, setCurrentPage] = useState(CONNECT_WALLET_PAGES.CONNECT_WALLET);
   const [selectedWallet, setSelectedWallet] = useState(false);
   const [isLoading] = useState(false);
@@ -45,17 +54,36 @@ function ConnectWallet(props) {
   const [walletSearch, setWalletSearch] = useState("");
   const [selectedChain, setSelectedChain] = useState("all");
   const [isShowAllWallets, setIsShowAllWallets] = useState(false);
+  // Track if user came directly from Login page with a pre-selected wallet
+  const [isPreSelectedFromLogin, setIsPreSelectedFromLogin] = useState(false);
+  const onBackClick = useCallback(flag => {
+    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+      currentPage: PAGES.LOGIN_OPTIONS
+    }));
+    handleShowExternalWallets(flag);
+  }, [modalState, setModalState, handleShowExternalWallets]);
   const handleBack = () => {
     if (!selectedWallet && currentPage === CONNECT_WALLET_PAGES.CONNECT_WALLET && onBackClick) {
       onBackClick(false);
       return;
     }
     if (selectedWallet) {
+      // If user came from Login page with pre-selected wallet, go back to Login
+      if (isPreSelectedFromLogin && onBackClick) {
+        setSelectedWallet(false);
+        setIsPreSelectedFromLogin(false);
+        onBackClick(false);
+        return;
+      }
+      // Otherwise, go back to wallet list
       setCurrentPage(CONNECT_WALLET_PAGES.CONNECT_WALLET);
       setSelectedWallet(false);
-      handleWalletDetailsHeight();
     }
   };
+  const disableBackButton = useMemo(() => {
+    var _bodyState$installLin, _bodyState$multiChain;
+    return ((_bodyState$installLin = bodyState.installLinks) === null || _bodyState$installLin === void 0 ? void 0 : _bodyState$installLin.show) || ((_bodyState$multiChain = bodyState.multiChainSelector) === null || _bodyState$multiChain === void 0 ? void 0 : _bodyState$multiChain.show);
+  }, [(_bodyState$installLin2 = bodyState.installLinks) === null || _bodyState$installLin2 === void 0 ? void 0 : _bodyState$installLin2.show, (_bodyState$multiChain2 = bodyState.multiChainSelector) === null || _bodyState$multiChain2 === void 0 ? void 0 : _bodyState$multiChain2.show]);
   const walletDiscoverySupported = useMemo(() => {
     const supported = walletRegistry && (Object.keys(walletRegistry.default || {}).length > 0 || Object.keys(walletRegistry.others || {}).length > 0);
     return supported;
@@ -140,12 +168,28 @@ function ConnectWallet(props) {
   // also resets everytime we search causing no. of wallets to change or select different chain
   useEffect(() => {
     if (walletDiscoverySupported && totalExternalWalletsCount <= 15) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
       setIsShowAllWallets(true);
     } else {
       setIsShowAllWallets(false);
     }
   }, [walletDiscoverySupported, selectedChain, totalExternalWalletsCount]);
 
+  // Handle pre-selected wallet from Login page (e.g., MetaMask QR code flow)
+  useEffect(() => {
+    if (bodyState.preSelectedWallet) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
+      setSelectedButton(bodyState.preSelectedWallet);
+      setSelectedWallet(true);
+      setCurrentPage(CONNECT_WALLET_PAGES.SELECTED_WALLET);
+      setIsPreSelectedFromLogin(true);
+      // Clear pre-selected wallet after handling
+      setBodyState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        preSelectedWallet: null
+      }));
+    }
+  }, [bodyState.preSelectedWallet, setBodyState]);
+
   /**
    * Wallet click logic
    * - For installed wallets
@@ -181,12 +225,11 @@ function ConnectWallet(props) {
         setSelectedButton(button);
         setSelectedWallet(true);
         setCurrentPage(CONNECT_WALLET_PAGES.SELECTED_WALLET);
-        handleWalletDetailsHeight();
         return;
       }
 
       // show chain namespace selector if the button has multiple chain namespaces
-      if (((_button$chainNamespac2 = button.chainNamespaces) === null || _button$chainNamespac2 === void 0 ? void 0 : _button$chainNamespac2.length) > 1) {
+      if (((_button$chainNamespac2 = button.chainNamespaces) === null || _button$chainNamespac2 === void 0 ? void 0 : _button$chainNamespac2.length) > 1 && button.name !== WALLET_CONNECTORS.METAMASK) {
         setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
           multiChainSelector: {
             show: true,
@@ -207,7 +250,6 @@ function ConnectWallet(props) {
         setSelectedButton(button);
         setSelectedWallet(true);
         setCurrentPage(CONNECT_WALLET_PAGES.SELECTED_WALLET);
-        handleWalletDetailsHeight();
       } else {
         // otherwise, show install links
         setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
@@ -253,18 +295,16 @@ function ConnectWallet(props) {
       platform: deviceDetails.platform
     }) : /*#__PURE__*/jsxs("div", {
       className: "w3a--flex w3a--flex-col w3a--gap-y-2",
-      children: [chainNamespace.length > 1 && /*#__PURE__*/jsx(ConnectWalletChainFilter, {
+      children: [/*#__PURE__*/jsx(ConnectWalletChainFilter, {
         isDark: isDark,
         isLoading: isLoading,
         selectedChain: selectedChain,
-        setSelectedChain: handleChainFilterChange,
-        chainNamespace: chainNamespace
+        setSelectedChain: handleChainFilterChange
       }), /*#__PURE__*/jsx(ConnectWalletSearch, {
         totalExternalWalletCount: totalExternalWalletsCount,
         isLoading: isLoading,
         walletSearch: walletSearch,
-        handleWalletSearch: handleWalletSearch,
-        buttonRadius: buttonRadius
+        handleWalletSearch: handleWalletSearch
       }), /*#__PURE__*/jsx(ConnectWalletList, {
         externalButtons: externalButtons,
         isLoading: isLoading,
@@ -273,9 +313,7 @@ function ConnectWallet(props) {
         handleWalletClick: handleWalletClick,
         handleMoreWallets: handleMoreWallets,
         isDark: isDark,
-        deviceDetails: deviceDetails,
         walletConnectUri: walletConnectUri,
-        buttonRadius: buttonRadius,
         isShowAllWallets: isShowAllWallets
       })]
     })]

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/ConnectWallet/ConnectWalletChainFilter/ConnectWalletChainFilter.js

@@ -1,6 +1,7 @@
 import { CHAIN_NAMESPACES } from '@web3auth/no-modal';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useWidget } from '../../../context/WidgetContext.js';
 import i18nInstance from '../../../localeImport.js';
 import { getIcons, cn } from '../../../utils.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -10,9 +11,14 @@ function ConnectWalletChainFilter(props) {
     isDark,
     isLoading,
     selectedChain,
-    setSelectedChain,
-    chainNamespace
+    setSelectedChain
   } = props;
+  const {
+    uiConfig
+  } = useWidget();
+  const {
+    chainNamespaces
+  } = uiConfig;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
   });
@@ -22,7 +28,7 @@ function ConnectWalletChainFilter(props) {
       name: "modal.allChains",
       icon: ""
     }];
-    for (const chain of chainNamespace) {
+    for (const chain of chainNamespaces) {
       if (chain === CHAIN_NAMESPACES.EIP155 || chain === CHAIN_NAMESPACES.SOLANA) {
         chains.push({
           id: chain,
@@ -32,7 +38,10 @@ function ConnectWalletChainFilter(props) {
       }
     }
     return chains;
-  }, [chainNamespace]);
+  }, [chainNamespaces]);
+  if (chainNamespaces.length > 1) {
+    return null;
+  }
   if (isLoading) {
     return /*#__PURE__*/jsx("div", {
       className: "w3a--flex w3a--items-center w3a--justify-between w3a--gap-x-2",

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.js

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
+import Image from '../../../components/Image/Image.js';
 import i18nInstance from '../../../localeImport.js';
 import { getIcons } from '../../../utils.js';
-import Image from '../../Image/Image.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const ConnectWalletChainNamespaceSelect = props => {