@web3auth/modal 10.0.5 → 10.0.6

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

@@ -1,5 +1,5 @@
 import { BUILD_ENV_TYPE, WEB3AUTH_NETWORK_TYPE } from "@web3auth/auth";
-import type { ButtonRadiusType, ExternalButton, ExternalWalletEventType, LogoAlignmentType, SocialLoginEventType, SocialLoginsConfig } from "../../interfaces";
+import type { browser, ButtonRadiusType, ExternalButton, ExternalWalletEventType, LogoAlignmentType, os, platform, SocialLoginEventType, SocialLoginsConfig } from "../../interfaces";
 export interface LoginProps {
     web3authClientId: string;
     web3authNetwork: WEB3AUTH_NETWORK_TYPE;
@@ -22,6 +22,11 @@ export interface LoginProps {
     totalExternalWallets: number;
     logoAlignment?: LogoAlignmentType;
     buttonRadius?: ButtonRadiusType;
+    deviceDetails: {
+        platform: platform;
+        browser: browser;
+        os: os;
+    };
     handleExternalWalletBtnClick?: (flag: boolean) => void;
     handleSocialLoginClick: (params: SocialLoginEventType) => void;
     handleExternalWalletClick: (params: ExternalWalletEventType) => void;

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

@@ -1,5 +1,5 @@
 import type { ChainNamespaceType, WalletRegistry } from "@web3auth/no-modal";
-import { ModalState, SocialLoginEventType, SocialLoginsConfig, UIConfig } from "../../interfaces";
+import { browser, ModalState, os, platform, SocialLoginEventType, SocialLoginsConfig, UIConfig } from "../../interfaces";
 export interface RootProps {
     appLogo?: string;
     appName?: string;
@@ -16,6 +16,11 @@ export interface RootProps {
     isEmailPasswordLessLoginVisible: boolean;
     isSmsPasswordLessLoginVisible: boolean;
     uiConfig: UIConfig;
+    deviceDetails: {
+        platform: platform;
+        browser: browser;
+        os: os;
+    };
     handleSocialLoginClick: (params: SocialLoginEventType) => void;
     handleExternalWalletBtnClick?: (flag: boolean) => void;
     preHandleExternalWalletClick: (params: {

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

@@ -1,15 +1,20 @@
 import { SafeEventEmitter } from "@web3auth/auth";
 import { ChainNamespaceType, WalletRegistry } from "@web3auth/no-modal";
-import { ExternalWalletEventType, SocialLoginEventType, StateEmitterEvents, UIConfig } from "../../interfaces";
+import { browser, ExternalWalletEventType, os, platform, SocialLoginEventType, StateEmitterEvents, UIConfig } from "../../interfaces";
 export interface WidgetProps {
     stateListener: SafeEventEmitter<StateEmitterEvents>;
     appLogo?: string;
     appName?: string;
     chainNamespaces: ChainNamespaceType[];
     walletRegistry?: WalletRegistry;
+    uiConfig: UIConfig;
+    deviceDetails: {
+        platform: platform;
+        browser: browser;
+        os: os;
+    };
     handleSocialLoginClick: (params: SocialLoginEventType) => void;
     handleExternalWalletClick: (params: ExternalWalletEventType) => void;
     handleShowExternalWallets: (externalWalletsInitialized: boolean) => void;
     closeModal: () => void;
-    uiConfig: UIConfig;
 }

package/dist/lib.cjs/types/ui/loginModal.d.ts

@@ -1,6 +1,6 @@
 import "./css/index.css";
 import { type BaseConnectorConfig, type LoginMethodConfig, type WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
-import { LoginModalCallbacks, LoginModalProps, UIConfig } from "./interfaces";
+import { browser, LoginModalCallbacks, LoginModalProps, os, platform, UIConfig } from "./interfaces";
 export declare class LoginModal {
     private uiConfig;
     private stateEmitter;
@@ -11,6 +11,11 @@ export declare class LoginModal {
     private analytics;
     constructor(uiConfig: LoginModalProps, callbacks: LoginModalCallbacks);
     get isDark(): boolean;
+    get deviceDetails(): {
+        platform: platform;
+        browser: browser;
+        os: os;
+    };
     initModal: () => Promise<void>;
     addSocialLogins: (connector: WALLET_CONNECTOR_TYPE, loginMethods: LoginMethodConfig, loginMethodsOrder: string[], uiConfig: Omit<UIConfig, "connectorListener">) => void;
     addWalletLogins: (externalWalletsConfig: Record<string, BaseConnectorConfig>, options?: {

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

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

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

@@ -34,8 +34,8 @@ class Web3Auth extends Web3AuthNoModal {
       try {
         var _params$loginParams;
         const connector = this.getConnector(params.connector, (_params$loginParams = params.loginParams) === null || _params$loginParams === void 0 ? void 0 : _params$loginParams.chainNamespace);
-        // auto-connect WalletConnect and non-injected MetaMask in background to generate QR code URI without interfering with user's selected connection
-        const shouldStartConnectionInBackground = connector.name === WALLET_CONNECTORS.WALLET_CONNECT_V2 || connector.name === WALLET_CONNECTORS.METAMASK && !connector.isInjected;
+        // auto-connect WalletConnect in background to generate QR code URI without interfering with user's selected connection
+        const shouldStartConnectionInBackground = connector.name === WALLET_CONNECTORS.WALLET_CONNECT_V2;
         if (shouldStartConnectionInBackground) {
           const initialChain = this.getInitialChainIdForConnector(connector);
           await connector.connect({
@@ -75,30 +75,6 @@ class Web3Auth extends Web3AuthNoModal {
           wcConnector.status = CONNECTOR_STATUS.READY;
         }
       }
-
-      // handle MM session refresh if MM is not injected
-      const metamaskConnector = this.getConnector(WALLET_CONNECTORS.METAMASK);
-      if (metamaskConnector && !metamaskConnector.isInjected) {
-        const status = metamaskConnector === null || metamaskConnector === void 0 ? void 0 : metamaskConnector.status;
-        log.debug("trying refreshing MM session", visibility, status);
-        if (visibility && (status === CONNECTOR_STATUS.READY || status === CONNECTOR_STATUS.CONNECTING)) {
-          log.debug("refreshing MM session");
-
-          // refreshing session for MM whenever modal is opened.
-          try {
-            const initialChain = this.getInitialChainIdForConnector(metamaskConnector);
-            metamaskConnector.connect({
-              chainId: initialChain.chainId
-            });
-          } catch (error) {
-            log.error(`Error while connecting to MM`, error);
-          }
-        }
-        if (!visibility && this.status === CONNECTOR_STATUS.CONNECTED && (status === CONNECTOR_STATUS.READY || status === CONNECTOR_STATUS.CONNECTING)) {
-          log.debug("this stops MM connector from trying to reconnect once proposal expires");
-          metamaskConnector.status = CONNECTOR_STATUS.READY;
-        }
-      }
     });
     _defineProperty(this, "getChainNamespaces", () => {
       var _this$coreOptions$cha;
@@ -607,7 +583,7 @@ class Web3Auth extends Web3AuthNoModal {
       }
 
       // update connector config
-      if ([CONNECTOR_STATUS.NOT_READY, CONNECTOR_STATUS.READY, CONNECTOR_STATUS.CONNECTING].includes(connector.status)) {
+      if ([CONNECTOR_STATUS.NOT_READY, CONNECTOR_STATUS.READY, CONNECTOR_STATUS.CONNECTING, CONNECTOR_STATUS.CONNECTED].includes(connector.status)) {
         const connectorModalConfig = this.modalConfig.connectors[connectorName];
         connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
           isInjected: connector.isInjected,

package/dist/lib.esm/packages/modal/src/react/wagmi/provider.js

@@ -11,12 +11,12 @@ import 'deepmerge';
 import '../../config.js';
 import '../../ui/config.js';
 import '../../ui/css/index.css.js';
+import 'bowser';
 import 'react-dom/client';
 import '@toruslabs/http-helpers';
 import 'clsx';
 import 'tailwind-merge';
 import 'react/jsx-runtime';
-import 'bowser';
 import 'react-i18next';
 import '../../ui/localeImport.js';
 import 'classnames';

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

@@ -20,7 +20,7 @@ function ButtonWallet(props) {
     buttonRadius
   } = props;
   const isDark = useContext(ThemedContext);
-  const isLink = useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.hasInjectedWallet, [deviceDetails, button]);
+  const isLink = useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.isInstalled, [deviceDetails, button]);
   const href = useMemo(() => button.href ? formatIOSMobile({
     uri: walletConnectUri,
     link: button.href

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

@@ -134,8 +134,18 @@ function ConnectWallet(props) {
     if (isShowAllWallets) return totalExternalWalletsCount;
     return walletDiscoverySupported ? defaultButtons.length : installedWalletButtons.length;
   }, [walletDiscoverySupported, defaultButtons, installedWalletButtons, isShowAllWallets, totalExternalWalletsCount]);
+
+  /**
+   * Wallet click logic
+   * - For installed wallets
+   *  - For MetaMask non-injected on desktop, show QR code for connection
+   *  - Ask user to select a chain namespace if it has multiple namespaces
+   *  - Otherwise, use their connectors to connect
+   * - For wallet-discovery wallets (not installed)
+   *  - On desktop, show QR code for connection if wallet connect v2 is supported, otherwise show install links
+   *  - On mobile, open deeplink with wallet connect uri (won't go into this function as it'll open the deeplink)
+   */
   const handleWalletClick = button => {
-    var _button$chainNamespac2, _button$chainNamespac3;
     analytics === null || analytics === void 0 || analytics.track(ANALYTICS_EVENTS.EXTERNAL_WALLET_SELECTED, {
       connector: button.isInstalled ? button.name : button.hasWalletConnect ? WALLET_CONNECTORS.WALLET_CONNECT_V2 : "",
       wallet_name: button.displayName,
@@ -148,41 +158,53 @@ function ConnectWallet(props) {
       total_external_wallets: allUniqueButtons.length
     });
 
-    // show chain namespace selector if the button is an injected connector with multiple chain namespaces
-    const isChainNamespaceSelectorRequired = button.hasInjectedWallet && ((_button$chainNamespac2 = button.chainNamespaces) === null || _button$chainNamespac2 === void 0 ? void 0 : _button$chainNamespac2.length) > 1;
-    if (isChainNamespaceSelectorRequired) {
-      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        multiChainSelector: {
-          show: true,
-          wallet: button
-        }
-      }));
-      return;
-    }
+    // for installed wallets
+    if (button.isInstalled) {
+      var _button$chainNamespac2;
+      // for MetaMask non-injected on desktop, show QR code for connection
+      if (button.name === WALLET_CONNECTORS.METAMASK && !button.hasInjectedWallet && deviceDetails.platform === "desktop") {
+        handleExternalWalletClick({
+          connector: button.name
+        });
+        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) {
+        setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+          multiChainSelector: {
+            show: true,
+            wallet: button
+          }
+        }));
+        return;
+      }
 
-    // connect with connector if injected and single chain namespace or custom connector (except MetaMask)
-    const isInjectedConnectorAndSingleChainNamespace = button.hasInjectedWallet && ((_button$chainNamespac3 = button.chainNamespaces) === null || _button$chainNamespac3 === void 0 ? void 0 : _button$chainNamespac3.length) === 1;
-    const isCustomConnector = !button.hasInjectedWallet && button.isInstalled;
-    if (isInjectedConnectorAndSingleChainNamespace || isCustomConnector && button.name !== WALLET_CONNECTORS.METAMASK) {
-      return handleExternalWalletClick({
+      // otherwise, use their connectors to connect
+      handleExternalWalletClick({
         connector: button.name
       });
-    }
-
-    // show QR code for wallet connect v2 and MM (non-injected)
-    if (button.hasWalletConnect) {
-      setSelectedButton(button);
-      setSelectedWallet(true);
-      setCurrentPage(CONNECT_WALLET_PAGES.SELECTED_WALLET);
-      handleWalletDetailsHeight();
+      return;
     } else {
-      // show install links
-      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        installLinks: {
-          show: true,
-          wallet: button
-        }
-      }));
+      // show QR code if wallet connect v2 is supported
+      if (button.hasWalletConnect) {
+        setSelectedButton(button);
+        setSelectedWallet(true);
+        setCurrentPage(CONNECT_WALLET_PAGES.SELECTED_WALLET);
+        handleWalletDetailsHeight();
+      } else {
+        // otherwise, show install links
+        setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+          installLinks: {
+            show: true,
+            wallet: button
+          }
+        }));
+      }
     }
   };
   const handleMoreWallets = () => {

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

@@ -13,7 +13,7 @@ const ConnectWalletChainNamespaceSelect = props => {
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
   });
-  const chainNamespaces = wallet.chainNamespaces.map(chainNamespace => {
+  const chainNamespaces = wallet.chainNamespaces.sort().map(chainNamespace => {
     const imageId = chainNamespace === "eip155" ? "evm" : chainNamespace;
     const displayName = chainNamespace === "eip155" ? "EVM" : chainNamespace;
     return {

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

@@ -10,7 +10,7 @@ import { AnalyticsContext } from '../../context/AnalyticsContext.js';
 import { RootContext } from '../../context/RootContext.js';
 import { createPasswordlessHandler } from '../../handlers/factory.js';
 import i18nInstance from '../../localeImport.js';
-import { cn, getIcons, getUserCountry, validatePhoneNumber } from '../../utils.js';
+import { cn, getUserCountry, getIcons, validatePhoneNumber } from '../../utils.js';
 import Image from '../Image/Image.js';
 import SocialLoginList from '../SocialLoginList/SocialLoginList.js';
 import LoginOtp from './LoginOtp/LoginOtp.js';
@@ -42,7 +42,8 @@ function Login(props) {
     showExternalWalletCount,
     showInstalledExternalWallets,
     logoAlignment = "center",
-    buttonRadius = "pill"
+    buttonRadius = "pill",
+    deviceDetails
   } = props;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
@@ -311,6 +312,13 @@ function Login(props) {
       setOtpLoading(false);
     }
   };
+
+  /**
+   * Installed wallet click logic:
+   * - For MetaMask: If not injected and on desktop, display QR code for connection.
+   * - If wallet supports multiple chain namespaces, prompt user to select a chain.
+   * - Otherwise, connect directly using the wallet connector.
+   */
   const handleInstalledWalletClick = wallet => {
     var _wallet$chainNamespac;
     analytics === null || analytics === void 0 || analytics.track(ANALYTICS_EVENTS.EXTERNAL_WALLET_SELECTED, {
@@ -324,8 +332,12 @@ function Login(props) {
       has_wallet_registry_item: !!wallet.walletRegistryItem,
       total_external_wallets: totalExternalWallets
     });
-    // for non-injected Metamask, show QR code to connect
-    if (wallet.name === WALLET_CONNECTORS.METAMASK && !wallet.hasInjectedWallet) {
+    // for non-injected Metamask on desktop, show QR code to connect
+    if (wallet.name === WALLET_CONNECTORS.METAMASK && !wallet.hasInjectedWallet && deviceDetails.platform === "desktop") {
+      handleExternalWalletClick({
+        connector: wallet.name
+      });
+      // We should show QR code only if the wallet is not installed.
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
         metamaskQrCode: {
           show: true,
@@ -453,9 +465,10 @@ function Login(props) {
       })]
     }, "external-wallets-section");
   };
+  const headerLogo = [DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(appLogo) ? "" : appLogo;
   const delimiter = index => {
     return /*#__PURE__*/jsxs("div", {
-      className: "w3a--flex w3a--w-full w3a--items-center w3a--gap-x-2",
+      className: cn("w3a--flex w3a--w-full w3a--items-center w3a--gap-x-2", headerLogo ? "w3a--my-2" : "w3a--my-4"),
       children: [/*#__PURE__*/jsx("div", {
         className: "w3a--h-px w3a--w-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-500"
       }), /*#__PURE__*/jsx("p", {
@@ -511,20 +524,19 @@ function Login(props) {
     return sections;
   };
   const expandedView = () => socialLoginSection(otherRow);
-  const headerLogo = [DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(appLogo) ? "" : appLogo;
   return /*#__PURE__*/jsxs("div", {
     className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-4 w3a--p-2",
     children: [/*#__PURE__*/jsxs("div", {
       className: cn("w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2 w3a--pt-6", logoAlignment === "center" ? "" : "w3a--w-full"),
-      children: [/*#__PURE__*/jsx("figure", {
+      children: [headerLogo && /*#__PURE__*/jsx("figure", {
         className: cn("w3a--mx-auto w3a--h-12 w3a--w-[200px]", logoAlignment === "center" ? "w3a--flex w3a--justify-center w3a--items-center" : "w3a--ml-0 w3a--w-auto"),
         children: /*#__PURE__*/jsx("img", {
-          src: headerLogo || getIcons(isDark ? "logo-w-dark" : "logo-w-light"),
+          src: headerLogo,
           alt: "Logo",
           className: "w3a--size-full w3a--object-contain"
         })
       }), /*#__PURE__*/jsx("p", {
-        className: cn("w3a--text-lg w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white", logoAlignment === "center" ? "w3a--text-center" : "w3a--text-left w3a--w-full w3a--ml-4"),
+        className: cn("w3a--text-app-gray-900 dark:w3a--text-app-white", logoAlignment === "center" ? "w3a--text-center" : "w3a--text-left w3a--w-full w3a--ml-4", headerLogo ? "w3a--text-lg w3a--font-semibold" : "w3a--text-3xl w3a--font-medium"),
         children: t("modal.social.sign-in")
       })]
     }), /*#__PURE__*/jsx(HCaptcha, {

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

@@ -1,6 +1,5 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { WALLET_CONNECTORS } from '@web3auth/no-modal';
-import Bowser from 'bowser';
 import { useContext, useState, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DEFAULT_METAMASK_WALLET_REGISTRY_ITEM, PAGES, CONNECT_WALLET_PAGES } from '../../constants.js';
@@ -42,7 +41,8 @@ function Root(props) {
     isEmailPasswordLessLoginVisible,
     isSmsPasswordLessLoginVisible,
     preHandleExternalWalletClick,
-    uiConfig
+    uiConfig,
+    deviceDetails
   } = props;
   const {
     logoAlignment = "center",
@@ -92,19 +92,6 @@ function Root(props) {
   };
 
   // Wallet Details
-  const deviceDetails = useMemo(() => {
-    if (typeof window === "undefined") return {
-      platform: "mobile",
-      browser: "chrome",
-      os: "ios"
-    };
-    const browserData = Bowser.getParser(window.navigator.userAgent);
-    return {
-      platform: browserData.getPlatformType(),
-      browser: browserData.getBrowserName().toLowerCase(),
-      os: browserData.getOSName()
-    };
-  }, []);
   const mobileInstallLinks = useMemo(() => {
     var _bodyState$installLin;
     if (deviceDetails.platform === "desktop") return [];
@@ -371,12 +358,8 @@ function Root(props) {
     setToast
   }), [bodyState, setBodyState, toast, setToast]);
   const isShowLoader = useMemo(() => {
-    // don't show loader if metamask is connecting and there is a connect uri
-    if (modalState.detailedLoaderConnector === WALLET_CONNECTORS.METAMASK && modalState.metamaskConnectUri) {
-      return false;
-    }
     return modalState.status !== MODAL_STATUS.INITIALIZED;
-  }, [modalState.detailedLoaderConnector, modalState.metamaskConnectUri, modalState.status]);
+  }, [modalState.status]);
   return /*#__PURE__*/jsx(RootContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/jsxs("div", {
@@ -437,6 +420,7 @@ function Root(props) {
                 totalExternalWallets: totalExternalWallets,
                 logoAlignment: logoAlignment,
                 buttonRadius: buttonRadiusType,
+                deviceDetails: deviceDetails,
                 handleSocialLoginClick: handleSocialLoginClick,
                 handleExternalWalletBtnClick: onExternalWalletBtnClick,
                 handleSocialLoginHeight: handleSocialLoginHeight,
@@ -450,11 +434,7 @@ function Root(props) {
                 allExternalButtons: allButtons,
                 connectorVisibilityMap: connectorVisibilityMap,
                 customConnectorButtons: customConnectorButtons,
-                deviceDetails: {
-                  platform: deviceDetails.platform,
-                  browser: deviceDetails.browser,
-                  os: deviceDetails.os
-                },
+                deviceDetails: deviceDetails,
                 chainNamespace: chainNamespaces,
                 buttonRadius: buttonRadiusType,
                 handleWalletDetailsHeight: handleWalletDetailsHeight,

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

@@ -21,7 +21,8 @@ function Widget(props) {
     appName,
     chainNamespaces,
     walletRegistry,
-    uiConfig
+    uiConfig,
+    deviceDetails
   } = props;
   const {
     widgetType
@@ -123,8 +124,8 @@ function Widget(props) {
     return ((_modalState$socialLog6 = modalState.socialLoginsConfig) === null || _modalState$socialLog6 === void 0 || (_modalState$socialLog6 = _modalState$socialLog6.uiConfig) === null || _modalState$socialLog6 === void 0 ? void 0 : _modalState$socialLog6.primaryButton) === "externalLogin";
   }, [modalState.socialLoginsConfig]);
   const showPasswordLessInput = useMemo(() => isEmailPasswordLessLoginVisible || isSmsPasswordLessLoginVisible, [isEmailPasswordLessLoginVisible, isSmsPasswordLessLoginVisible]);
-  const showExternalWalletButton = useMemo(() => modalState.hasExternalWallets, [modalState]);
-  const showExternalWalletPage = useMemo(() => (areSocialLoginsVisible || showPasswordLessInput) && !modalState.externalWalletsVisibility, [areSocialLoginsVisible, showPasswordLessInput, modalState.externalWalletsVisibility]);
+  const showExternalWalletButton = useMemo(() => modalState.hasExternalWallets || !!modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK], [modalState]);
+  const showExternalWalletPage = useMemo(() => (areSocialLoginsVisible || showPasswordLessInput || !!modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK]) && !modalState.externalWalletsVisibility, [areSocialLoginsVisible, showPasswordLessInput, modalState]);
   const handleExternalWalletBtnClick = flag => {
     setModalState(prevState => {
       return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -162,7 +163,7 @@ function Widget(props) {
     // TODO: maybe move this inside root
     if (!modalState.modalVisibility) return;
     if (typeof modalState.externalWalletsConfig === "object") {
-      var _modalState$externalW, _modalState$externalW2;
+      var _modalState$externalW;
       // auto connect to WC if not injected to generate QR code URI for mobile connection
       const wcAvailable = (((_modalState$externalW = modalState.externalWalletsConfig[WALLET_CONNECTORS.WALLET_CONNECT_V2]) === null || _modalState$externalW === void 0 ? void 0 : _modalState$externalW.showOnModal) || false) !== false;
       if (wcAvailable && !modalState.walletConnectUri && typeof handleExternalWalletClick === "function") {
@@ -170,14 +171,6 @@ function Widget(props) {
           connector: WALLET_CONNECTORS.WALLET_CONNECT_V2
         });
       }
-
-      // auto connect to MetaMask if not injected to generate QR code URI for mobile connection
-      const mmAvailable = modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK] && !((_modalState$externalW2 = modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK]) !== null && _modalState$externalW2 !== void 0 && _modalState$externalW2.isInjected);
-      if (mmAvailable && !modalState.metamaskConnectUri && typeof handleExternalWalletClick === "function") {
-        handleExternalWalletClick({
-          connector: WALLET_CONNECTORS.METAMASK
-        });
-      }
     }
   }, [modalState, handleExternalWalletClick]);
   if (widgetType === WIDGET_TYPE.MODAL) {
@@ -208,7 +201,8 @@ function Widget(props) {
         onCloseLoader: onCloseLoader,
         isEmailPasswordLessLoginVisible: isEmailPasswordLessLoginVisible,
         isSmsPasswordLessLoginVisible: isSmsPasswordLessLoginVisible,
-        uiConfig: uiConfig
+        uiConfig: uiConfig,
+        deviceDetails: deviceDetails
       })
     });
   }
@@ -237,7 +231,8 @@ function Widget(props) {
       onCloseLoader: onCloseLoader,
       isEmailPasswordLessLoginVisible: isEmailPasswordLessLoginVisible,
       isSmsPasswordLessLoginVisible: isSmsPasswordLessLoginVisible,
-      uiConfig: uiConfig
+      uiConfig: uiConfig,
+      deviceDetails: deviceDetails
     })
   });
 }