@web3auth/modal 10.3.1 → 10.4.0

package/dist/lib.cjs/packages/modal/src/config.js

@@ -2,7 +2,7 @@
 
 var noModal = require('@web3auth/no-modal');
 
-const version = "10.3.1";
+const version = "10.4.0";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

package/dist/lib.cjs/packages/modal/src/modalManager.js

@@ -391,7 +391,8 @@ class Web3Auth extends noModal.Web3AuthNoModal {
           showOnModal: true
         };
       }
-      embedWalletConfigMap.set(groupedAuthConnectionId || authConnectionId, authConnectionConfig);
+      const id = this.getCombinedConnectionId(authConnectionId, groupedAuthConnectionId);
+      embedWalletConfigMap.set(id, authConnectionConfig);
     }
     const dashboardConnectorConfig = {
       [noModal.WALLET_CONNECTORS.AUTH]: {
@@ -415,15 +416,16 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       }
       // only throw error if one of them is defined in the config.
       if (groupedAuthConnectionId || authConnectionId) {
-        if (!embedWalletConfigMap.has(groupedAuthConnectionId || authConnectionId)) throw noModal.WalletInitializationError.invalidParams(`Invalid auth connection config, authConnection: ${key}. Missing AuthConnectionConfig from the dashboard.`);
-        const configFromDashboard = embedWalletConfigMap.get(groupedAuthConnectionId || authConnectionId);
-        this.modalConfig.connectors[noModal.WALLET_CONNECTORS.AUTH].loginMethods[key] = {
+        const id = this.getCombinedConnectionId(authConnectionId, groupedAuthConnectionId);
+        if (!embedWalletConfigMap.has(id)) throw noModal.WalletInitializationError.invalidParams(`Invalid auth connection config, authConnection: ${key}. Missing AuthConnectionConfig from the dashboard.`);
+        const configFromDashboard = embedWalletConfigMap.get(id);
+        this.modalConfig.connectors[noModal.WALLET_CONNECTORS.AUTH].loginMethods[key] = _objectSpread(_objectSpread({}, userConfig), {}, {
           authConnection: configFromDashboard.authConnection,
           authConnectionId: configFromDashboard.authConnectionId,
           groupedAuthConnectionId: configFromDashboard.groupedAuthConnectionId,
           isDefault: configFromDashboard.isDefault || false,
           extraLoginOptions: _objectSpread(_objectSpread({}, configFromDashboard.jwtParameters), userConfig.extraLoginOptions)
-        };
+        });
       }
     });
     this.modalConfig.connectors = deepmerge(dashboardConnectorConfig, noModal.cloneDeep(this.modalConfig.connectors || {}));
@@ -567,6 +569,13 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       }
     });
   }
+  getCombinedConnectionId(authConnectionId, groupedAuthConnectionId) {
+    let id = authConnectionId;
+    if (groupedAuthConnectionId) {
+      id = `${groupedAuthConnectionId}_${authConnectionId}`;
+    }
+    return id;
+  }
 }
 
 exports.Web3Auth = Web3Auth;

package/dist/lib.cjs/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.js

@@ -27,6 +27,7 @@ function ConnectWallet(props) {
     deviceDetails,
     buttonRadius = "pill",
     chainNamespace,
+    isExternalWalletModeOnly,
     onBackClick,
     handleExternalWalletClick,
     handleWalletDetailsHeight
@@ -215,9 +216,17 @@ function ConnectWallet(props) {
     }
     return walletConnectUri;
   }, [metamaskConnectUri, selectedButton, selectedWallet, walletConnectUri]);
+  const disableBackButton = react.useMemo(() => {
+    // If wallet is selected, show the back button
+    if (selectedWallet) return false;
+    // Otherwise, if external wallet mode only, login screen is skipped so back button is not needed
+    if (isExternalWalletModeOnly) return true;
+    return false;
+  }, [selectedWallet, isExternalWalletModeOnly]);
   return jsxRuntime.jsxs("div", {
     className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
     children: [jsxRuntime.jsx(ConnectWalletHeader, {
+      disableBackButton: disableBackButton,
       onBackClick: handleBack,
       currentPage: currentPage,
       selectedButton: selectedButton
@@ -229,7 +238,7 @@ function ConnectWallet(props) {
       logoImage: `https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`
     }) : jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--flex-col w3a--gap-y-2",
-      children: [jsxRuntime.jsx(ConnectWalletChainFilter, {
+      children: [chainNamespace.length > 1 && jsxRuntime.jsx(ConnectWalletChainFilter, {
         isDark: isDark,
         isLoading: isLoading,
         selectedChain: selectedChain,

package/dist/lib.cjs/packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.js

@@ -7,6 +7,7 @@ var localeImport = require('../../../localeImport.js');
 
 function ConnectWalletHeader(props) {
   const {
+    disableBackButton,
     onBackClick,
     currentPage,
     selectedButton
@@ -21,7 +22,7 @@ function ConnectWalletHeader(props) {
   };
   return jsxRuntime.jsxs("div", {
     className: "w3a--flex w3a--items-center w3a--justify-between",
-    children: [jsxRuntime.jsx("button", {
+    children: [!disableBackButton ? jsxRuntime.jsx("button", {
       type: "button",
       className: "w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full",
       onClick: handleBack,
@@ -37,7 +38,7 @@ function ConnectWalletHeader(props) {
           clipRule: "evenodd"
         })
       })
-    }), jsxRuntime.jsx("p", {
+    }) : jsxRuntime.jsx("div", {}), jsxRuntime.jsx("p", {
       className: "w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
       children: currentPage === constants.CONNECT_WALLET_PAGES.SELECTED_WALLET ? selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName : currentPage === constants.CONNECT_WALLET_PAGES.CONNECT_WALLET ? t("modal.connectYourWallet") : currentPage
     }), jsxRuntime.jsx("div", {

package/dist/lib.cjs/packages/modal/src/ui/components/Login/Login.js

@@ -62,7 +62,7 @@ function Login(props) {
   const [countryFlag, setCountryFlag] = react.useState("");
   const [passwordlessErrorMessage, setPasswordlessErrorMessage] = react.useState("");
   const [otpErrorMessage, setOtpErrorMessage] = react.useState("");
-  const [expand, setExpand] = react.useState(false);
+  const [expandSocialLogins, setExpandSocialLogins] = react.useState(false);
   const [canShowMore, setCanShowMore] = react.useState(false);
   const [visibleRow, setVisibleRow] = react.useState([]);
   const [otherRow, setOtherRow] = react.useState([]);
@@ -75,14 +75,14 @@ function Login(props) {
   const [showCaptcha, setShowCaptcha] = react.useState(false);
   const [captchaError, setCaptchaError] = react.useState("");
   const captchaRef = react.useRef(null);
-  const handleExpand = () => {
-    setExpand(prev => !prev);
+  const handleSocialLoginExpand = () => {
+    setExpandSocialLogins(prev => !prev);
     setIsPasswordLessCtaClicked(false);
     handleSocialLoginHeight();
   };
   react.useEffect(() => {
     const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter(loginMethodKey => {
-      return socialLoginsConfig.loginMethods[loginMethodKey].showOnModal;
+      return socialLoginsConfig.loginMethods[loginMethodKey].showOnModal && !restrictedLoginMethods.includes(loginMethodKey);
     });
     const visibleRows = [];
     const otherRows = [];
@@ -273,15 +273,6 @@ function Login(props) {
     };
     if (isSmsPasswordLessLoginVisible) getLocation();
   }, [isSmsPasswordLessLoginVisible]);
-  const handleConnectWallet = e => {
-    analytics === null || analytics === void 0 || analytics.track(noModal.ANALYTICS_EVENTS.EXTERNAL_WALLET_LIST_EXPANDED, {
-      total_external_wallets: totalExternalWallets,
-      installed_external_wallets: installedExternalWallets.length
-    });
-    setIsPasswordLessCtaClicked(false);
-    e.preventDefault();
-    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
-  };
   const handleOtpComplete = async otp => {
     setOtpLoading(true);
     if (otpErrorMessage) setOtpErrorMessage("");
@@ -367,6 +358,20 @@ function Login(props) {
     // always show MetaMask
     return installedExternalWalletConfig.filter(wallet => wallet.name === noModal.WALLET_CONNECTORS.METAMASK);
   }, [installedExternalWalletConfig, showInstalledExternalWallets]);
+  const handleConnectWallet = react.useCallback(e => {
+    analytics === null || analytics === void 0 || analytics.track(noModal.ANALYTICS_EVENTS.EXTERNAL_WALLET_LIST_EXPANDED, {
+      total_external_wallets: totalExternalWallets,
+      installed_external_wallets: installedExternalWallets.length
+    });
+    setIsPasswordLessCtaClicked(false);
+    e === null || e === void 0 || e.preventDefault();
+    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
+  }, [analytics, handleExternalWalletBtnClick, installedExternalWallets.length, totalExternalWallets]);
+  react.useEffect(() => {
+    if (showExternalWalletButton && !areSocialLoginsVisible && !showPasswordLessInput) {
+      handleConnectWallet();
+    }
+  }, [showExternalWalletButton, areSocialLoginsVisible, showPasswordLessInput, handleConnectWallet]);
   if (showOtpFlow) {
     return jsxRuntime.jsx(LoginOtp, {
       otpLoading: otpLoading,
@@ -386,7 +391,7 @@ function Login(props) {
       canShowMore: canShowMore,
       handleSocialLoginClick: handleSocialLoginClick,
       socialLoginsConfig: socialLoginsConfig,
-      handleExpandSocialLogins: handleExpand,
+      handleExpandSocialLogins: handleSocialLoginExpand,
       buttonRadius: buttonRadius
     }, "social-login-section");
   };
@@ -522,7 +527,7 @@ function Login(props) {
     }
     return sections;
   };
-  const expandedView = () => socialLoginSection(otherRow);
+  const socialLoginExpandedView = () => socialLoginSection(otherRow);
   return jsxRuntime.jsxs("div", {
     className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-4 w3a--p-2",
     children: [jsxRuntime.jsxs("div", {
@@ -553,7 +558,7 @@ function Login(props) {
       children: t(captchaError)
     }), !showCaptcha && jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
-      children: [!expand && defaultView(), expand && expandedView()]
+      children: [!expandSocialLogins && defaultView(), expandSocialLogins && socialLoginExpandedView()]
     })]
   });
 }

package/dist/lib.cjs/packages/modal/src/ui/components/Root/Root.js

@@ -92,6 +92,9 @@ function Root(props) {
     }));
     if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(flag);
   };
+  const isExternalWalletModeOnly = react.useMemo(() => {
+    return !showPasswordLessInput && !areSocialLoginsVisible;
+  }, [areSocialLoginsVisible, showPasswordLessInput]);
   // Wallet Details
   const mobileInstallLinks = react.useMemo(() => {
     var _bodyState$installLin;
@@ -427,6 +430,7 @@ function Root(props) {
                 chainNamespace: chainNamespaces,
                 buttonRadius: buttonRadiusType,
                 handleWalletDetailsHeight: handleWalletDetailsHeight,
+                isExternalWalletModeOnly: isExternalWalletModeOnly,
                 onBackClick: onBackClick,
                 handleExternalWalletClick: preHandleExternalWalletClick
               })]

package/dist/lib.cjs/packages/modal/src/ui/components/Widget/Widget.js

@@ -100,7 +100,7 @@ function Widget(props) {
     var _modalState$socialLog, _modalState$socialLog2;
     if (modalState.showExternalWalletsOnly) return false;
     if (Object.keys(((_modalState$socialLog = modalState.socialLoginsConfig) === null || _modalState$socialLog === void 0 ? void 0 : _modalState$socialLog.loginMethods) || {}).length === 0) return false;
-    const isAnySocialLoginVisible = Object.entries(((_modalState$socialLog2 = modalState.socialLoginsConfig) === null || _modalState$socialLog2 === void 0 ? void 0 : _modalState$socialLog2.loginMethods) || {}).some(([k, v]) => k !== auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS && v.showOnModal !== false);
+    const isAnySocialLoginVisible = Object.entries(((_modalState$socialLog2 = modalState.socialLoginsConfig) === null || _modalState$socialLog2 === void 0 ? void 0 : _modalState$socialLog2.loginMethods) || {}).some(([k, v]) => ![auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS, auth.AUTH_CONNECTION.SMS_PASSWORDLESS].includes(k) && v.showOnModal !== false);
     return isAnySocialLoginVisible;
   }, [modalState]);
   // Memo for checking if email passwordless login is visible

package/dist/lib.cjs/types/modalManager.d.ts

@@ -34,4 +34,5 @@ export declare class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal
     private onExternalWalletLogin;
     private onModalVisibility;
     private getChainNamespaces;
+    private getCombinedConnectionId;
 }

package/dist/lib.cjs/types/ui/components/ConnectWallet/ConnectWallet.type.d.ts

@@ -16,6 +16,7 @@ export interface ConnectWalletProps {
     };
     chainNamespace: ChainNamespaceType[];
     buttonRadius: ButtonRadiusType;
+    isExternalWalletModeOnly: boolean;
     onBackClick?: (flag: boolean) => void;
     handleExternalWalletClick: (params: {
         connector: string;

package/dist/lib.cjs/types/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.type.d.ts

@@ -1,5 +1,6 @@
 import { ExternalButton } from "../../../interfaces";
 export interface ConnectWalletHeaderProps {
+    disableBackButton?: boolean;
     onBackClick: () => void;
     currentPage: string;
     selectedButton: ExternalButton;

package/dist/lib.esm/packages/modal/src/config.js

@@ -1,6 +1,6 @@
 import { EVM_CONNECTORS } from '@web3auth/no-modal';
 
-const version = "10.3.1";
+const version = "10.4.0";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

package/dist/lib.esm/packages/modal/src/modalManager.js

@@ -406,7 +406,8 @@ class Web3Auth extends Web3AuthNoModal {
           showOnModal: true
         };
       }
-      embedWalletConfigMap.set(groupedAuthConnectionId || authConnectionId, authConnectionConfig);
+      const id = this.getCombinedConnectionId(authConnectionId, groupedAuthConnectionId);
+      embedWalletConfigMap.set(id, authConnectionConfig);
     }
     const dashboardConnectorConfig = {
       [WALLET_CONNECTORS.AUTH]: {
@@ -432,15 +433,16 @@ class Web3Auth extends Web3AuthNoModal {
 
       // only throw error if one of them is defined in the config.
       if (groupedAuthConnectionId || authConnectionId) {
-        if (!embedWalletConfigMap.has(groupedAuthConnectionId || authConnectionId)) throw WalletInitializationError.invalidParams(`Invalid auth connection config, authConnection: ${key}. Missing AuthConnectionConfig from the dashboard.`);
-        const configFromDashboard = embedWalletConfigMap.get(groupedAuthConnectionId || authConnectionId);
-        this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods[key] = {
+        const id = this.getCombinedConnectionId(authConnectionId, groupedAuthConnectionId);
+        if (!embedWalletConfigMap.has(id)) throw WalletInitializationError.invalidParams(`Invalid auth connection config, authConnection: ${key}. Missing AuthConnectionConfig from the dashboard.`);
+        const configFromDashboard = embedWalletConfigMap.get(id);
+        this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods[key] = _objectSpread(_objectSpread({}, userConfig), {}, {
           authConnection: configFromDashboard.authConnection,
           authConnectionId: configFromDashboard.authConnectionId,
           groupedAuthConnectionId: configFromDashboard.groupedAuthConnectionId,
           isDefault: configFromDashboard.isDefault || false,
           extraLoginOptions: _objectSpread(_objectSpread({}, configFromDashboard.jwtParameters), userConfig.extraLoginOptions)
-        };
+        });
       }
     });
     this.modalConfig.connectors = deepmerge(dashboardConnectorConfig, cloneDeep(this.modalConfig.connectors || {}));
@@ -598,6 +600,13 @@ class Web3Auth extends Web3AuthNoModal {
       }
     });
   }
+  getCombinedConnectionId(authConnectionId, groupedAuthConnectionId) {
+    let id = authConnectionId;
+    if (groupedAuthConnectionId) {
+      id = `${groupedAuthConnectionId}_${authConnectionId}`;
+    }
+    return id;
+  }
 }
 
 export { Web3Auth };

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

@@ -25,6 +25,7 @@ function ConnectWallet(props) {
     deviceDetails,
     buttonRadius = "pill",
     chainNamespace,
+    isExternalWalletModeOnly,
     onBackClick,
     handleExternalWalletClick,
     handleWalletDetailsHeight
@@ -217,9 +218,17 @@ function ConnectWallet(props) {
     }
     return walletConnectUri;
   }, [metamaskConnectUri, selectedButton, selectedWallet, walletConnectUri]);
+  const disableBackButton = useMemo(() => {
+    // If wallet is selected, show the back button
+    if (selectedWallet) return false;
+    // Otherwise, if external wallet mode only, login screen is skipped so back button is not needed
+    if (isExternalWalletModeOnly) return true;
+    return false;
+  }, [selectedWallet, isExternalWalletModeOnly]);
   return /*#__PURE__*/jsxs("div", {
     className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
     children: [/*#__PURE__*/jsx(ConnectWalletHeader, {
+      disableBackButton: disableBackButton,
       onBackClick: handleBack,
       currentPage: currentPage,
       selectedButton: selectedButton
@@ -231,7 +240,7 @@ function ConnectWallet(props) {
       logoImage: `https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`
     }) : /*#__PURE__*/jsxs("div", {
       className: "w3a--flex w3a--flex-col w3a--gap-y-2",
-      children: [/*#__PURE__*/jsx(ConnectWalletChainFilter, {
+      children: [chainNamespace.length > 1 && /*#__PURE__*/jsx(ConnectWalletChainFilter, {
         isDark: isDark,
         isLoading: isLoading,
         selectedChain: selectedChain,

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

@@ -5,6 +5,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ConnectWalletHeader(props) {
   const {
+    disableBackButton,
     onBackClick,
     currentPage,
     selectedButton
@@ -19,7 +20,7 @@ function ConnectWalletHeader(props) {
   };
   return /*#__PURE__*/jsxs("div", {
     className: "w3a--flex w3a--items-center w3a--justify-between",
-    children: [/*#__PURE__*/jsx("button", {
+    children: [!disableBackButton ? /*#__PURE__*/jsx("button", {
       type: "button",
       className: "w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full",
       onClick: handleBack,
@@ -35,7 +36,7 @@ function ConnectWalletHeader(props) {
           clipRule: "evenodd"
         })
       })
-    }), /*#__PURE__*/jsx("p", {
+    }) : /*#__PURE__*/jsx("div", {}), /*#__PURE__*/jsx("p", {
       className: "w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
       children: currentPage === CONNECT_WALLET_PAGES.SELECTED_WALLET ? selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName : currentPage === CONNECT_WALLET_PAGES.CONNECT_WALLET ? t("modal.connectYourWallet") : currentPage
     }), /*#__PURE__*/jsx("div", {

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

@@ -1,8 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import HCaptcha from '@hcaptcha/react-hcaptcha';
 import { AUTH_CONNECTION } from '@web3auth/auth';
-import { WALLET_CONNECTORS, log, ANALYTICS_EVENTS, WalletLoginError } from '@web3auth/no-modal';
-import { useContext, useState, useRef, useEffect, useMemo } from 'react';
+import { WALLET_CONNECTORS, ANALYTICS_EVENTS, log, WalletLoginError } from '@web3auth/no-modal';
+import { useContext, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { capitalizeFirstLetter, CAPTCHA_SITE_KEY } from '../../config.js';
 import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from '../../constants.js';
@@ -60,7 +60,7 @@ function Login(props) {
   const [countryFlag, setCountryFlag] = useState("");
   const [passwordlessErrorMessage, setPasswordlessErrorMessage] = useState("");
   const [otpErrorMessage, setOtpErrorMessage] = useState("");
-  const [expand, setExpand] = useState(false);
+  const [expandSocialLogins, setExpandSocialLogins] = useState(false);
   const [canShowMore, setCanShowMore] = useState(false);
   const [visibleRow, setVisibleRow] = useState([]);
   const [otherRow, setOtherRow] = useState([]);
@@ -73,14 +73,14 @@ function Login(props) {
   const [showCaptcha, setShowCaptcha] = useState(false);
   const [captchaError, setCaptchaError] = useState("");
   const captchaRef = useRef(null);
-  const handleExpand = () => {
-    setExpand(prev => !prev);
+  const handleSocialLoginExpand = () => {
+    setExpandSocialLogins(prev => !prev);
     setIsPasswordLessCtaClicked(false);
     handleSocialLoginHeight();
   };
   useEffect(() => {
     const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter(loginMethodKey => {
-      return socialLoginsConfig.loginMethods[loginMethodKey].showOnModal;
+      return socialLoginsConfig.loginMethods[loginMethodKey].showOnModal && !restrictedLoginMethods.includes(loginMethodKey);
     });
     const visibleRows = [];
     const otherRows = [];
@@ -274,15 +274,6 @@ function Login(props) {
     };
     if (isSmsPasswordLessLoginVisible) getLocation();
   }, [isSmsPasswordLessLoginVisible]);
-  const handleConnectWallet = e => {
-    analytics === null || analytics === void 0 || analytics.track(ANALYTICS_EVENTS.EXTERNAL_WALLET_LIST_EXPANDED, {
-      total_external_wallets: totalExternalWallets,
-      installed_external_wallets: installedExternalWallets.length
-    });
-    setIsPasswordLessCtaClicked(false);
-    e.preventDefault();
-    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
-  };
   const handleOtpComplete = async otp => {
     setOtpLoading(true);
     if (otpErrorMessage) setOtpErrorMessage("");
@@ -370,6 +361,20 @@ function Login(props) {
     // always show MetaMask
     return installedExternalWalletConfig.filter(wallet => wallet.name === WALLET_CONNECTORS.METAMASK);
   }, [installedExternalWalletConfig, showInstalledExternalWallets]);
+  const handleConnectWallet = useCallback(e => {
+    analytics === null || analytics === void 0 || analytics.track(ANALYTICS_EVENTS.EXTERNAL_WALLET_LIST_EXPANDED, {
+      total_external_wallets: totalExternalWallets,
+      installed_external_wallets: installedExternalWallets.length
+    });
+    setIsPasswordLessCtaClicked(false);
+    e === null || e === void 0 || e.preventDefault();
+    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
+  }, [analytics, handleExternalWalletBtnClick, installedExternalWallets.length, totalExternalWallets]);
+  useEffect(() => {
+    if (showExternalWalletButton && !areSocialLoginsVisible && !showPasswordLessInput) {
+      handleConnectWallet();
+    }
+  }, [showExternalWalletButton, areSocialLoginsVisible, showPasswordLessInput, handleConnectWallet]);
   if (showOtpFlow) {
     return /*#__PURE__*/jsx(LoginOtp, {
       otpLoading: otpLoading,
@@ -389,7 +394,7 @@ function Login(props) {
       canShowMore: canShowMore,
       handleSocialLoginClick: handleSocialLoginClick,
       socialLoginsConfig: socialLoginsConfig,
-      handleExpandSocialLogins: handleExpand,
+      handleExpandSocialLogins: handleSocialLoginExpand,
       buttonRadius: buttonRadius
     }, "social-login-section");
   };
@@ -527,7 +532,7 @@ function Login(props) {
     }
     return sections;
   };
-  const expandedView = () => socialLoginSection(otherRow);
+  const socialLoginExpandedView = () => socialLoginSection(otherRow);
   return /*#__PURE__*/jsxs("div", {
     className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-4 w3a--p-2",
     children: [/*#__PURE__*/jsxs("div", {
@@ -558,7 +563,7 @@ function Login(props) {
       children: t(captchaError)
     }), !showCaptcha && /*#__PURE__*/jsxs("div", {
       className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
-      children: [!expand && defaultView(), expand && expandedView()]
+      children: [!expandSocialLogins && defaultView(), expandSocialLogins && socialLoginExpandedView()]
     })]
   });
 }

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

@@ -90,6 +90,9 @@ function Root(props) {
     }));
     if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(flag);
   };
+  const isExternalWalletModeOnly = useMemo(() => {
+    return !showPasswordLessInput && !areSocialLoginsVisible;
+  }, [areSocialLoginsVisible, showPasswordLessInput]);
 
   // Wallet Details
   const mobileInstallLinks = useMemo(() => {
@@ -438,6 +441,7 @@ function Root(props) {
                 chainNamespace: chainNamespaces,
                 buttonRadius: buttonRadiusType,
                 handleWalletDetailsHeight: handleWalletDetailsHeight,
+                isExternalWalletModeOnly: isExternalWalletModeOnly,
                 onBackClick: onBackClick,
                 handleExternalWalletClick: preHandleExternalWalletClick
               })]

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

@@ -100,7 +100,7 @@ function Widget(props) {
     var _modalState$socialLog, _modalState$socialLog2;
     if (modalState.showExternalWalletsOnly) return false;
     if (Object.keys(((_modalState$socialLog = modalState.socialLoginsConfig) === null || _modalState$socialLog === void 0 ? void 0 : _modalState$socialLog.loginMethods) || {}).length === 0) return false;
-    const isAnySocialLoginVisible = Object.entries(((_modalState$socialLog2 = modalState.socialLoginsConfig) === null || _modalState$socialLog2 === void 0 ? void 0 : _modalState$socialLog2.loginMethods) || {}).some(([k, v]) => k !== AUTH_CONNECTION.EMAIL_PASSWORDLESS && v.showOnModal !== false);
+    const isAnySocialLoginVisible = Object.entries(((_modalState$socialLog2 = modalState.socialLoginsConfig) === null || _modalState$socialLog2 === void 0 ? void 0 : _modalState$socialLog2.loginMethods) || {}).some(([k, v]) => ![AUTH_CONNECTION.EMAIL_PASSWORDLESS, AUTH_CONNECTION.SMS_PASSWORDLESS].includes(k) && v.showOnModal !== false);
     return isAnySocialLoginVisible;
   }, [modalState]);