@web3auth/modal 10.14.1 → 11.0.0-beta.0

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

@@ -6,7 +6,9 @@ var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var constants = require('../../constants.js');
 var AnalyticsContext = require('../../context/AnalyticsContext.js');
+var ModalStateContext = require('../../context/ModalStateContext.js');
 var RootContext = require('../../context/RootContext.js');
+var WidgetContext = require('../../context/WidgetContext.js');
 var ConnectWalletChainFilter = require('./ConnectWalletChainFilter/ConnectWalletChainFilter.js');
 var ConnectWalletHeader = require('./ConnectWalletHeader/ConnectWalletHeader.js');
 var ConnectWalletList = require('./ConnectWalletList/ConnectWalletList.js');
@@ -14,32 +16,39 @@ var ConnectWalletQrCode = require('./ConnectWalletQrCode/ConnectWalletQrCode.js'
 var ConnectWalletSearch = require('./ConnectWalletSearch/ConnectWalletSearch.js');
 
 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
-  } = react.useContext(RootContext.RootContext);
+  } = RootContext.useBodyState();
   const {
     analytics
   } = react.useContext(AnalyticsContext.AnalyticsContext);
+  const {
+    deviceDetails,
+    isDark,
+    uiConfig
+  } = WidgetContext.useWidget();
+  const {
+    walletRegistry
+  } = uiConfig;
+  const {
+    modalState,
+    setModalState,
+    handleShowExternalWallets,
+    preHandleExternalWalletClick: handleExternalWalletClick
+  } = ModalStateContext.useModalState();
+  const {
+    externalWalletsConfig: config,
+    walletConnectUri,
+    metamaskConnectUri
+  } = modalState;
   const [currentPage, setCurrentPage] = react.useState(constants.CONNECT_WALLET_PAGES.CONNECT_WALLET);
   const [selectedWallet, setSelectedWallet] = react.useState(false);
   const [isLoading] = react.useState(false);
@@ -47,17 +56,36 @@ function ConnectWallet(props) {
   const [walletSearch, setWalletSearch] = react.useState("");
   const [selectedChain, setSelectedChain] = react.useState("all");
   const [isShowAllWallets, setIsShowAllWallets] = react.useState(false);
+  // Track if user came directly from Login page with a pre-selected wallet
+  const [isPreSelectedFromLogin, setIsPreSelectedFromLogin] = react.useState(false);
+  const onBackClick = react.useCallback(flag => {
+    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+      currentPage: constants.PAGES.LOGIN_OPTIONS
+    }));
+    handleShowExternalWallets(flag);
+  }, [modalState, setModalState, handleShowExternalWallets]);
   const handleBack = () => {
     if (!selectedWallet && currentPage === constants.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(constants.CONNECT_WALLET_PAGES.CONNECT_WALLET);
       setSelectedWallet(false);
-      handleWalletDetailsHeight();
     }
   };
+  const disableBackButton = react.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 = react.useMemo(() => {
     const supported = walletRegistry && (Object.keys(walletRegistry.default || {}).length > 0 || Object.keys(walletRegistry.others || {}).length > 0);
     return supported;
@@ -141,11 +169,26 @@ function ConnectWallet(props) {
   // also resets everytime we search causing no. of wallets to change or select different chain
   react.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)
+  react.useEffect(() => {
+    if (bodyState.preSelectedWallet) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
+      setSelectedButton(bodyState.preSelectedWallet);
+      setSelectedWallet(true);
+      setCurrentPage(constants.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
@@ -180,11 +223,10 @@ function ConnectWallet(props) {
         setSelectedButton(button);
         setSelectedWallet(true);
         setCurrentPage(constants.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 !== noModal.WALLET_CONNECTORS.METAMASK) {
         setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
           multiChainSelector: {
             show: true,
@@ -204,7 +246,6 @@ function ConnectWallet(props) {
         setSelectedButton(button);
         setSelectedWallet(true);
         setCurrentPage(constants.CONNECT_WALLET_PAGES.SELECTED_WALLET);
-        handleWalletDetailsHeight();
       } else {
         // otherwise, show install links
         setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
@@ -250,18 +291,16 @@ function ConnectWallet(props) {
       platform: deviceDetails.platform
     }) : jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--flex-col w3a--gap-y-2",
-      children: [chainNamespace.length > 1 && jsxRuntime.jsx(ConnectWalletChainFilter, {
+      children: [jsxRuntime.jsx(ConnectWalletChainFilter, {
         isDark: isDark,
         isLoading: isLoading,
         selectedChain: selectedChain,
-        setSelectedChain: handleChainFilterChange,
-        chainNamespace: chainNamespace
+        setSelectedChain: handleChainFilterChange
       }), jsxRuntime.jsx(ConnectWalletSearch, {
         totalExternalWalletCount: totalExternalWalletsCount,
         isLoading: isLoading,
         walletSearch: walletSearch,
-        handleWalletSearch: handleWalletSearch,
-        buttonRadius: buttonRadius
+        handleWalletSearch: handleWalletSearch
       }), jsxRuntime.jsx(ConnectWalletList, {
         externalButtons: externalButtons,
         isLoading: isLoading,
@@ -270,9 +309,7 @@ function ConnectWallet(props) {
         handleWalletClick: handleWalletClick,
         handleMoreWallets: handleMoreWallets,
         isDark: isDark,
-        deviceDetails: deviceDetails,
         walletConnectUri: walletConnectUri,
-        buttonRadius: buttonRadius,
         isShowAllWallets: isShowAllWallets
       })]
     })]

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

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var reactI18next = require('react-i18next');
+var WidgetContext = require('../../../context/WidgetContext.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
 
@@ -12,9 +13,14 @@ function ConnectWalletChainFilter(props) {
     isDark,
     isLoading,
     selectedChain,
-    setSelectedChain,
-    chainNamespace
+    setSelectedChain
   } = props;
+  const {
+    uiConfig
+  } = WidgetContext.useWidget();
+  const {
+    chainNamespaces
+  } = uiConfig;
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
@@ -24,7 +30,7 @@ function ConnectWalletChainFilter(props) {
       name: "modal.allChains",
       icon: ""
     }];
-    for (const chain of chainNamespace) {
+    for (const chain of chainNamespaces) {
       if (chain === noModal.CHAIN_NAMESPACES.EIP155 || chain === noModal.CHAIN_NAMESPACES.SOLANA) {
         chains.push({
           id: chain,
@@ -34,7 +40,10 @@ function ConnectWalletChainFilter(props) {
       }
     }
     return chains;
-  }, [chainNamespace]);
+  }, [chainNamespaces]);
+  if (chainNamespaces.length > 1) {
+    return null;
+  }
   if (isLoading) {
     return jsxRuntime.jsx("div", {
       className: "w3a--flex w3a--items-center w3a--justify-between w3a--gap-x-2",

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

@@ -2,9 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
+var Image = require('../../../components/Image/Image.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
-var Image = require('../../Image/Image.js');
 
 const ConnectWalletChainNamespaceSelect = props => {
   const {

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

@@ -2,10 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
+var Button = require('../../../components/Button/Button.js');
+var Button_type = require('../../../components/Button/Button.type.js');
+var WidgetContext = require('../../../context/WidgetContext.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
-var Button = require('../../Button/Button.js');
-var Button_type = require('../../Button/Button.type.js');
 
 function NoWalletsFound() {
   const [t] = reactI18next.useTranslation(undefined, {
@@ -21,10 +22,16 @@ function WalletsFound(props) {
     externalButtons,
     isLoading,
     handleWalletClick,
-    deviceDetails,
-    walletConnectUri,
-    buttonRadius
+    walletConnectUri
   } = props;
+  const {
+    deviceDetails,
+    uiConfig,
+    isDark
+  } = WidgetContext.useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = uiConfig;
   if (isLoading) {
     return jsxRuntime.jsx("div", {
       className: "w3a--flex w3a--flex-col w3a--gap-y-2",
@@ -40,10 +47,11 @@ function WalletsFound(props) {
     });
   }
   return jsxRuntime.jsx("div", {
-    className: "w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5",
+    className: "w3a--flex w3a--flex-col w3a--gap-y-2",
     children: externalButtons.map(button => jsxRuntime.jsx(Button, {
       type: Button_type.BUTTON_TYPE.WALLET,
       props: {
+        isDark,
         label: button.displayName,
         onClick: () => handleWalletClick(button),
         button,
@@ -60,9 +68,14 @@ function MoreWalletsButton(props) {
     initialWalletCount,
     handleMoreWallets,
     isLoading,
-    isDark,
-    buttonRadius
+    isDark
   } = props;
+  const {
+    uiConfig
+  } = WidgetContext.useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = uiConfig;
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
@@ -82,7 +95,7 @@ function MoreWalletsButton(props) {
   }
   return jsxRuntime.jsxs("button", {
     type: "button",
-    className: utils.cn("w3a--flex w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600 active:w3a--scale-95 w3a--transition-all w3a--duration-150 w3a--mr-2.5", {
+    className: utils.cn("w3a--flex w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600 active:w3a--scale-95 w3a--transition-all w3a--duration-150", {
       "w3a--rounded-full": buttonRadius === "pill",
       "w3a--rounded-lg": buttonRadius === "rounded",
       "w3a--rounded-none": buttonRadius === "square"
@@ -111,9 +124,7 @@ function ConnectWalletList(props) {
     handleWalletClick,
     handleMoreWallets,
     isDark,
-    deviceDetails,
     walletConnectUri,
-    buttonRadius,
     isShowAllWallets
   } = props;
   const onShowMoreWalletsClick = () => {
@@ -122,24 +133,21 @@ function ConnectWalletList(props) {
   const showMoreWalletsButton = !isShowAllWallets;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("ul", {
-      className: utils.cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px] w3a--social-container w3a--pr-2.5", {
+      className: utils.cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px] w3a--social-container -w3a--mx-5 w3a--pl-5 w3a--pr-1", {
         "w3a--h-[328px]": !showMoreWalletsButton
       }),
       children: externalButtons.length === 0 ? jsxRuntime.jsx(NoWalletsFound, {}) : jsxRuntime.jsx(WalletsFound, {
         externalButtons: externalButtons,
         isLoading: isLoading,
         handleWalletClick: handleWalletClick,
-        deviceDetails: deviceDetails,
-        walletConnectUri: walletConnectUri,
-        buttonRadius: buttonRadius
+        walletConnectUri: walletConnectUri
       })
     }), showMoreWalletsButton && !isLoading && initialWalletCount < totalExternalWalletsCount && jsxRuntime.jsx(MoreWalletsButton, {
       totalExternalWalletsCount: totalExternalWalletsCount,
       initialWalletCount: initialWalletCount,
       handleMoreWallets: onShowMoreWalletsClick,
       isLoading: isLoading,
-      isDark: isDark,
-      buttonRadius: buttonRadius
+      isDark: isDark
     })]
   });
 }

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

@@ -6,11 +6,11 @@ var Bowser = require('bowser');
 var react = require('react');
 var reactI18next = require('react-i18next');
 var reactQrcodeLogo = require('react-qrcode-logo');
+var Image = require('../../../components/Image/Image.js');
 var constants = require('../../../constants.js');
 var RootContext = require('../../../context/RootContext.js');
 var interfaces = require('../../../interfaces.js');
 var localeImport = require('../../../localeImport.js');
-var Image = require('../../Image/Image.js');
 
 function ConnectWalletQrCode(props) {
   var _selectedButton$walle2, _getComputedStyle;
@@ -19,9 +19,11 @@ function ConnectWalletQrCode(props) {
   });
   const {
     bodyState,
-    setBodyState,
+    setBodyState
+  } = RootContext.useBodyState();
+  const {
     setToast
-  } = react.useContext(RootContext.RootContext);
+  } = RootContext.useToast();
   const {
     qrCodeValue,
     isDark,

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactI18next = require('react-i18next');
+var WidgetContext = require('../../../context/WidgetContext.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
 
@@ -11,9 +12,14 @@ function ConnectWalletSearch(props) {
     totalExternalWalletCount,
     isLoading,
     walletSearch,
-    handleWalletSearch,
-    buttonRadius
+    handleWalletSearch
   } = props;
+  const {
+    uiConfig
+  } = WidgetContext.useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = uiConfig;
   const [isInputFocused, setIsInputFocused] = react.useState(false);
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport

package/dist/lib.cjs/packages/modal/src/ui/{components → containers}/Embed/Embed.js

@@ -28,6 +28,7 @@ function Embed(props) {
         setIsOpen(true);
       }, 50);
     } else {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
       setIsOpen(false);
     }
   }, [open]);

package/dist/lib.cjs/packages/modal/src/ui/{components → containers}/Login/Login.js

@@ -7,47 +7,27 @@ var auth = require('@web3auth/auth');
 var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var reactI18next = require('react-i18next');
+var Image = require('../../components/Image/Image.js');
+var SocialLoginList = require('../../components/SocialLoginList/SocialLoginList.js');
 var config = require('../../config.js');
 var constants = require('../../constants.js');
 var AnalyticsContext = require('../../context/AnalyticsContext.js');
+var ModalStateContext = require('../../context/ModalStateContext.js');
 var RootContext = require('../../context/RootContext.js');
+var WidgetContext = require('../../context/WidgetContext.js');
 var factory = require('../../handlers/factory.js');
 var testAccounts = require('../../helper/testAccounts.js');
 var localeImport = require('../../localeImport.js');
 var utils = require('../../utils.js');
-var Image = require('../Image/Image.js');
-var SocialLoginList = require('../SocialLoginList/SocialLoginList.js');
 var LoginOtp = require('./LoginOtp/LoginOtp.js');
 var LoginPasswordLess = require('./LoginPasswordLess/LoginPasswordLess.js');
 
 const restrictedLoginMethods = [auth.AUTH_CONNECTION.SMS_PASSWORDLESS, auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS, auth.AUTH_CONNECTION.AUTHENTICATOR, auth.AUTH_CONNECTION.PASSKEYS, auth.AUTH_CONNECTION.TELEGRAM, auth.AUTH_CONNECTION.CUSTOM];
 function Login(props) {
-  // TODO: add appName, isEmailPrimary, isExternalPrimary
   const {
-    web3authClientId,
-    web3authNetwork,
-    authBuildEnv,
-    appLogo,
-    isModalVisible,
-    handleSocialLoginHeight,
-    socialLoginsConfig,
     installedExternalWalletConfig,
-    isDark,
-    handleSocialLoginClick,
     totalExternalWallets,
-    remainingUndisplayedWallets,
-    isEmailPasswordLessLoginVisible,
-    isSmsPasswordLessLoginVisible,
-    handleExternalWalletBtnClick,
-    handleExternalWalletClick,
-    areSocialLoginsVisible,
-    showPasswordLessInput,
-    showExternalWalletButton,
-    showExternalWalletCount,
-    showInstalledExternalWallets,
-    logoAlignment = "center",
-    buttonRadius = "pill",
-    deviceDetails
+    remainingUndisplayedWallets
   } = props;
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
@@ -55,10 +35,42 @@ function Login(props) {
   const {
     bodyState,
     setBodyState
-  } = react.useContext(RootContext.RootContext);
+  } = RootContext.useBodyState();
   const {
     analytics
   } = react.useContext(AnalyticsContext.AnalyticsContext);
+  const {
+    appLogo,
+    deviceDetails,
+    uiConfig,
+    isDark
+  } = WidgetContext.useWidget();
+  // TODO: add appName, isEmailPrimary, isExternalPrimary
+  const {
+    modalState,
+    setModalState,
+    areSocialLoginsVisible,
+    isEmailPasswordLessLoginVisible,
+    isSmsPasswordLessLoginVisible,
+    showPasswordLessInput,
+    showExternalWalletButton,
+    handleShowExternalWallets,
+    preHandleSocialLoginClick: handleSocialLoginClick,
+    preHandleExternalWalletClick: handleExternalWalletClick
+  } = ModalStateContext.useModalState();
+  const {
+    modalVisibility: isModalVisible,
+    socialLoginsConfig
+  } = modalState;
+  const {
+    buttonRadiusType: buttonRadius,
+    logoAlignment,
+    displayInstalledExternalWallets: showInstalledExternalWallets,
+    displayExternalWalletsCount: showExternalWalletCount,
+    web3authClientId,
+    web3authNetwork,
+    authBuildEnv
+  } = uiConfig;
   const [countryCode, setCountryCode] = react.useState("");
   const [countryFlag, setCountryFlag] = react.useState("");
   const [passwordlessErrorMessage, setPasswordlessErrorMessage] = react.useState("");
@@ -80,7 +92,6 @@ function Login(props) {
   const handleSocialLoginExpand = () => {
     setExpandSocialLogins(prev => !prev);
     setIsPasswordLessCtaClicked(false);
-    handleSocialLoginHeight();
   };
   react.useEffect(() => {
     const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter(loginMethodKey => {
@@ -132,7 +143,6 @@ function Login(props) {
         isDark,
         isPrimaryBtn,
         name: name === "Twitter" ? "X" : name,
-        connector: socialLoginsConfig.connector,
         loginParams: {
           authConnection: connectorConfig.authConnection || method,
           authConnectionId: connectorConfig.authConnectionId,
@@ -200,7 +210,6 @@ function Login(props) {
         const connectorConfig = socialLoginsConfig.loginMethods[auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS];
         if (connectorConfig.isDefault) {
           return handleSocialLoginClick({
-            connector: socialLoginsConfig.connector,
             loginParams: {
               authConnection: auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS,
               authConnectionId: connectorConfig.authConnectionId,
@@ -223,7 +232,6 @@ function Login(props) {
         const connectorConfig = socialLoginsConfig.loginMethods[auth.AUTH_CONNECTION.SMS_PASSWORDLESS];
         if (connectorConfig.isDefault) {
           return handleSocialLoginClick({
-            connector: socialLoginsConfig.connector,
             loginParams: {
               authConnection: auth.AUTH_CONNECTION.SMS_PASSWORDLESS,
               authConnectionId: connectorConfig.authConnectionId,
@@ -281,7 +289,6 @@ function Login(props) {
       if (result !== null && result !== void 0 && (_result$data = result.data) !== null && _result$data !== void 0 && _result$data.id_token) {
         var _result$data2;
         return handleSocialLoginClick({
-          connector: socialLoginsConfig.connector,
           loginParams: {
             authConnection: authConnection,
             authConnectionId: connectorConfig.authConnectionId,
@@ -300,6 +307,12 @@ function Login(props) {
       setOtpLoading(false);
     }
   };
+  const handleExternalWalletBtnClick = react.useCallback(flag => {
+    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+      currentPage: constants.PAGES.WALLET_LIST
+    }));
+    handleShowExternalWallets(flag);
+  }, [modalState, setModalState, handleShowExternalWallets]);
   /**
    * Installed wallet click logic:
    * - For MetaMask: If not injected and on desktop, display QR code for connection.
@@ -320,22 +333,20 @@ function Login(props) {
       total_external_wallets: totalExternalWallets
     });
     noModal.log.info("handleInstalledWalletClick", wallet);
-    // for non-injected Metamask on desktop, show QR code to connect
+    // for non-injected MetaMask on desktop, navigate to ConnectWallet page with pre-selected wallet
     if (wallet.name === noModal.WALLET_CONNECTORS.METAMASK && !wallet.hasInjectedWallet && deviceDetails.platform === "desktop") {
       handleExternalWalletClick({
         connector: wallet.name
       });
-      // We should show QR code only if the wallet is not installed.
+      // Set pre-selected wallet and navigate to ConnectWallet page
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        metamaskQrCode: {
-          show: true,
-          wallet: wallet
-        }
+        preSelectedWallet: wallet
       }));
+      handleExternalWalletBtnClick(true);
       return;
     }
     // when having multiple namespaces, ask user to select one
-    if (((_wallet$chainNamespac = wallet.chainNamespaces) === null || _wallet$chainNamespac === void 0 ? void 0 : _wallet$chainNamespac.length) > 1) {
+    if (((_wallet$chainNamespac = wallet.chainNamespaces) === null || _wallet$chainNamespac === void 0 ? void 0 : _wallet$chainNamespac.length) > 1 && wallet.name !== noModal.WALLET_CONNECTORS.METAMASK) {
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
         multiChainSelector: {
           show: true,
@@ -360,7 +371,7 @@ function Login(props) {
     });
     setIsPasswordLessCtaClicked(false);
     e === null || e === void 0 || e.preventDefault();
-    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
+    handleExternalWalletBtnClick(true);
   }, [analytics, handleExternalWalletBtnClick, installedExternalWallets.length, totalExternalWallets]);
   react.useEffect(() => {
     if (showExternalWalletButton && !areSocialLoginsVisible && !showPasswordLessInput) {

package/dist/lib.cjs/packages/modal/src/ui/{components → containers}/Login/LoginOtp/LoginOtp.js

@@ -4,9 +4,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var auth = require('@web3auth/auth');
 var react = require('react');
 var reactI18next = require('react-i18next');
+var Otp = require('../../../components/Otp/Otp.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
-var Otp = require('../../Otp/Otp.js');
 
 /**
  * OtpInput component

package/dist/lib.cjs/packages/modal/src/ui/{components → containers}/Login/LoginPasswordLess/LoginPasswordLess.js

@@ -3,9 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactI18next = require('react-i18next');
+var PulseLoader = require('../../../components/PulseLoader/PulseLoader.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
-var PulseLoader = require('../../PulseLoader/PulseLoader.js');
 
 function LoginPasswordLess(props) {
   const {