@web3auth/modal 10.9.0 → 10.10.0

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

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

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

@@ -70,12 +70,20 @@ class Web3Auth extends noModal.Web3AuthNoModal {
             noModal.log.error(`Error while disconnecting to wallet connect in core`, error);
           }
         }
-        if (!visibility && this.status === noModal.CONNECTOR_STATUS.CONNECTED && (walletConnectStatus === noModal.CONNECTOR_STATUS.READY || walletConnectStatus === noModal.CONNECTOR_STATUS.CONNECTING)) {
+        if (!visibility && noModal.CONNECTED_STATUSES.includes(this.status) && (walletConnectStatus === noModal.CONNECTOR_STATUS.READY || walletConnectStatus === noModal.CONNECTOR_STATUS.CONNECTING)) {
           noModal.log.debug("this stops wc connector from trying to reconnect once proposal expires");
           wcConnector.status = noModal.CONNECTOR_STATUS.READY;
         }
       }
     });
+    _defineProperty(this, "onMobileVerifyConnect", async params => {
+      try {
+        const connector = this.getConnector(params.connector);
+        await connector.getIdentityToken();
+      } catch (error) {
+        noModal.log.error(`Error while connecting to connector: ${params.connector}`, error);
+      }
+    });
     _defineProperty(this, "getChainNamespaces", () => {
       var _this$coreOptions$cha;
       return [...new Set(((_this$coreOptions$cha = this.coreOptions.chains) === null || _this$coreOptions$cha === void 0 ? void 0 : _this$coreOptions$cha.map(x => x.chainNamespace)) || [])];
@@ -136,12 +144,14 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         authBuildEnv: this.options.authBuildEnv,
         chainNamespaces: this.getChainNamespaces(),
         walletRegistry: filteredWalletRegistry,
-        analytics: this.analytics
+        analytics: this.analytics,
+        initialAuthenticationMode: this.options.initialAuthenticationMode
       }), {
         onInitExternalWallets: this.onInitExternalWallets,
         onSocialLogin: this.onSocialLogin,
         onExternalWalletLogin: this.onExternalWalletLogin,
-        onModalVisibility: this.onModalVisibility
+        onModalVisibility: this.onModalVisibility,
+        onMobileVerifyConnect: this.onMobileVerifyConnect
       });
       await noModal.withAbort(() => this.loginModal.initModal(), signal);
       // setup common JRPC provider
@@ -192,7 +202,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
   async connect() {
     if (!this.loginModal) throw noModal.WalletInitializationError.notReady("Login modal is not initialized");
     // if already connected return provider
-    if (this.connectedConnectorName && this.status === noModal.CONNECTOR_STATUS.CONNECTED && this.provider) return this.provider;
+    if (this.connectedConnectorName && noModal.CONNECTED_STATUSES.includes(this.status) && this.provider) return this.provider;
     this.loginModal.open();
     return new Promise((resolve, reject) => {
       // remove all listeners when promise is resolved or rejected.
@@ -204,18 +214,24 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       };
       const handleError = err => {
         this.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, handleConnected);
+        this.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
         this.removeListener(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
         return reject(err);
       };
       const handleVisibility = visibility => {
         // modal is closed but user is not connected to any wallet.
-        if (!visibility && this.status !== noModal.CONNECTOR_STATUS.CONNECTED) {
+        if (!visibility && !noModal.CONNECTED_STATUSES.includes(this.status)) {
           this.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, handleConnected);
           this.removeListener(noModal.CONNECTOR_EVENTS.ERRORED, handleError);
+          this.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
           return reject(new Error("User closed the modal"));
         }
       };
-      this.once(noModal.CONNECTOR_EVENTS.CONNECTED, handleConnected);
+      if (this.coreOptions.initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN) {
+        this.once(noModal.CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
+      } else {
+        this.once(noModal.CONNECTOR_EVENTS.CONNECTED, handleConnected);
+      }
       this.once(noModal.CONNECTOR_EVENTS.ERRORED, handleError);
       this.once(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
     });
@@ -508,7 +524,8 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         const autoConnect = super.checkIfAutoConnect(connector);
         await connector.init({
           autoConnect,
-          chainId: initialChain.chainId
+          chainId: initialChain.chainId,
+          getIdentityToken: this.options.initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
         });
         // note: not adding cachedWallet to modal if it is external wallet.
         // adding it later if no in-app wallets are available.
@@ -548,7 +565,8 @@ class Web3Auth extends noModal.Web3AuthNoModal {
           const initialChain = this.getInitialChainIdForConnector(connector);
           await connector.init({
             autoConnect: this.cachedConnector === connectorName,
-            chainId: initialChain.chainId
+            chainId: initialChain.chainId,
+            getIdentityToken: this.options.initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
           });
         } catch (error) {
           noModal.log.error(error, "error while initializing connector", connectorName);

package/dist/lib.cjs/packages/modal/src/react/context/WalletServicesInnerContext.js

@@ -28,7 +28,7 @@ function WalletServicesContextProvider({
       const plugin = getPlugin(noModal.EVM_PLUGINS.WALLET_SERVICES);
       setWalletServicesPlugin(plugin);
       // when rehydrating, the connectedListener may be registered after the connected event is emitted, we need to check the status here
-      if ((plugin === null || plugin === void 0 ? void 0 : plugin.status) === noModal.CONNECTOR_STATUS.CONNECTED) setReady(true);
+      if (noModal.CONNECTED_STATUSES.includes(plugin === null || plugin === void 0 ? void 0 : plugin.status)) setReady(true);
     }
   }, [isConnected, getPlugin, walletServicesPlugin]);
   react.useEffect(() => {

package/dist/lib.cjs/packages/modal/src/react/context/Web3AuthInnerContext.js

@@ -26,6 +26,7 @@ function Web3AuthInnerProvider(params) {
     return new modalManager.Web3Auth(web3AuthOptions, initialState);
   }, [web3AuthOptions, initialState]);
   const [isConnected, setIsConnected] = react.useState(web3Auth.status === noModal.CONNECTOR_STATUS.CONNECTED);
+  const [isAuthorized, setIsAuthorized] = react.useState(web3Auth.status === noModal.CONNECTOR_STATUS.AUTHORIZED);
   const [status, setStatus] = react.useState(web3Auth.status);
   const getPlugin = react.useCallback(name => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
@@ -66,7 +67,9 @@ function Web3AuthInnerProvider(params) {
     if (provider) {
       provider.on("chainChanged", handleChainChange);
       return () => {
-        provider.off("chainChanged", handleChainChange);
+        if (provider) {
+          provider.off("chainChanged", handleChainChange);
+        }
       };
     }
   }, [web3Auth, provider]);
@@ -85,9 +88,17 @@ function Web3AuthInnerProvider(params) {
         setProvider(data.provider);
       }
     };
+    const authorizedListener = _data => {
+      setStatus(web3Auth.status);
+      if (web3Auth.status === noModal.CONNECTOR_STATUS.AUTHORIZED) {
+        setIsConnected(true);
+        setIsAuthorized(true);
+      }
+    };
     const disconnectedListener = () => {
       setStatus(web3Auth.status);
       setIsConnected(false);
+      setIsAuthorized(false);
       setProvider(null);
     };
     const connectingListener = () => {
@@ -99,6 +110,7 @@ function Web3AuthInnerProvider(params) {
     const rehydrationErrorListener = () => {
       setStatus(web3Auth.status);
       setIsConnected(false);
+      setIsAuthorized(false);
       setProvider(null);
     };
     const mfaEnabledListener = isMFAEnabled => {
@@ -110,6 +122,7 @@ function Web3AuthInnerProvider(params) {
       web3Auth.on(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
       web3Auth.on(noModal.CONNECTOR_EVENTS.READY, readyListener);
       web3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
+      web3Auth.on(noModal.CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
       web3Auth.on(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
       web3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
       web3Auth.on(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
@@ -121,6 +134,7 @@ function Web3AuthInnerProvider(params) {
         web3Auth.off(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
         web3Auth.off(noModal.CONNECTOR_EVENTS.READY, readyListener);
         web3Auth.off(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
+        web3Auth.off(noModal.CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
         web3Auth.off(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
         web3Auth.off(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
         web3Auth.off(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
@@ -134,6 +148,7 @@ function Web3AuthInnerProvider(params) {
     return {
       web3Auth,
       isConnected,
+      isAuthorized,
       isInitialized,
       provider,
       status,
@@ -145,7 +160,7 @@ function Web3AuthInnerProvider(params) {
       getPlugin,
       setIsMFAEnabled
     };
-  }, [web3Auth, isConnected, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, status, getPlugin, isInitializing, initError, chainId, chainNamespace]);
+  }, [web3Auth, isConnected, isAuthorized, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, status, getPlugin, isInitializing, initError, chainId, chainNamespace]);
   return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Provider, {
     value
   }, children);

package/dist/lib.cjs/packages/modal/src/react/hooks/useIdentityToken.js

@@ -6,7 +6,7 @@ var useWeb3AuthInner = require('./useWeb3AuthInner.js');
 const useIdentityToken = () => {
   const {
     web3Auth,
-    isConnected
+    isAuthorized
   } = useWeb3AuthInner.useWeb3AuthInner();
   const [loading, setLoading] = react.useState(false);
   const [error, setError] = react.useState(null);
@@ -27,10 +27,14 @@ const useIdentityToken = () => {
     }
   }, [web3Auth]);
   react.useEffect(() => {
-    if (!isConnected && token) {
+    if (!web3Auth) return;
+    if (!isAuthorized && token) {
       setToken(null);
     }
-  }, [isConnected, token]);
+    if (isAuthorized && !token) {
+      setToken(web3Auth.idToken);
+    }
+  }, [isAuthorized, token, web3Auth]);
   return {
     loading,
     error,

package/dist/lib.cjs/packages/modal/src/react/hooks/useWeb3Auth.js

@@ -6,6 +6,7 @@ const useWeb3Auth = () => {
   const {
     initError,
     isConnected,
+    isAuthorized,
     isInitialized,
     isInitializing,
     provider,
@@ -16,6 +17,7 @@ const useWeb3Auth = () => {
   return {
     initError,
     isConnected,
+    isAuthorized,
     isInitialized,
     isInitializing,
     provider,

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

@@ -11,7 +11,9 @@ function BottomSheet({
   isShown,
   onClose,
   children,
-  uiConfig
+  uiConfig,
+  sheetClassName,
+  showCloseButton = true
 }) {
   const {
     borderRadiusType = "large"
@@ -34,8 +36,8 @@ function BottomSheet({
         "w3a--rounded-[30px]": borderRadiusType === "large",
         "w3a--rounded-2xl": borderRadiusType === "medium",
         "w3a--rounded-none": borderRadiusType === "small"
-      }),
-      children: [jsxRuntime.jsx("div", {
+      }, sheetClassName),
+      children: [showCloseButton && jsxRuntime.jsx("div", {
         className: "w3a--absolute w3a--right-4 w3a--top-[16px] w3a--z-10 w3a--cursor-pointer",
         children: jsxRuntime.jsx("svg", {
           width: "13",

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

@@ -0,0 +1,88 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('../../utils.js');
+
+function toSize(value, fallback = 160) {
+  return value !== null && value !== void 0 ? value : fallback;
+}
+const CircularLoader = props => {
+  const {
+    width,
+    height,
+    thickness = 12,
+    className = "",
+    children,
+    showChildren = true,
+    trackColor = "rgba(226, 232, 240, 1)",
+    // Tailwind slate-200 equivalent
+    gradient,
+    arcSizeDeg = 36,
+    arcColors
+  } = props;
+  const w = toSize(width, 160);
+  const h = toSize(height, 160);
+  const ringMask = `radial-gradient(farthest-side, transparent calc(100% - ${thickness}px), #000 calc(100% - ${thickness}px))`;
+  function hexToRgba(hex, alpha) {
+    const normalized = hex.replace("#", "");
+    const full = normalized.length === 3 ? normalized.split("").map(c => c + c).join("") : normalized;
+    const r = parseInt(full.substring(0, 2), 16);
+    const g = parseInt(full.substring(2, 4), 16);
+    const b = parseInt(full.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  function withAlpha(color, alpha) {
+    if (!color) return color;
+    const c = color.trim().toLowerCase();
+    if (c.startsWith("#")) return hexToRgba(c, alpha);
+    if (c.startsWith("rgba(")) return color;
+    if (c.startsWith("rgb(")) {
+      const nums = c.slice(4, -1);
+      return `rgba(${nums}, ${alpha})`;
+    }
+    // Fallback: return the same color (alpha may be ignored by browser)
+    return color;
+  }
+  const arcColorGradient = gradient || (arcColors ? `radial-gradient(210.91% 85.29% at 14.56% 18.67%, ${withAlpha(arcColors[0], 0)} 9.5%, ${arcColors[1]} 41.82%, ${arcColors[1]} 64.83%, ${withAlpha(arcColors[0], 0.44)} 100%)` : "radial-gradient(210.91% 85.29% at 14.56% 18.67%, rgba(255, 98, 58, 0.00) 9.5%, #FF623A 41.82%, #FF623A 64.83%, rgba(255, 98, 58, 0.44) 100%)");
+  const wedgeMask = `conic-gradient(#000 0deg ${arcSizeDeg}deg, transparent ${arcSizeDeg}deg 360deg)`;
+  return jsxRuntime.jsxs("div", {
+    className: utils.cn("w3a--relative w3a--inline-flex w3a--items-center w3a--justify-center", className),
+    style: {
+      width: w,
+      height: h
+    },
+    children: [jsxRuntime.jsx("div", {
+      className: "w3a--absolute w3a--inset-0 w3a--rounded-full",
+      style: {
+        background: trackColor,
+        WebkitMaskImage: ringMask,
+        maskImage: ringMask,
+        WebkitMaskRepeat: "no-repeat",
+        maskRepeat: "no-repeat"
+      }
+    }), jsxRuntime.jsx("div", {
+      className: "w3a--absolute w3a--inset-0 w3a--animate-spin",
+      style: {
+        WebkitMaskImage: wedgeMask,
+        maskImage: wedgeMask,
+        WebkitMaskRepeat: "no-repeat",
+        maskRepeat: "no-repeat"
+      },
+      children: jsxRuntime.jsx("div", {
+        className: "w3a--absolute w3a--inset-0 w3a--rounded-full",
+        style: {
+          background: arcColorGradient,
+          WebkitMaskImage: ringMask,
+          maskImage: ringMask,
+          WebkitMaskRepeat: "no-repeat",
+          maskRepeat: "no-repeat"
+        }
+      })
+    }), showChildren && children ? jsxRuntime.jsx("div", {
+      className: "w3a--relative",
+      children: children
+    }) : null]
+  });
+};
+
+module.exports = CircularLoader;

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

@@ -21,7 +21,7 @@ function ConnectWallet(props) {
     walletConnectUri,
     metamaskConnectUri,
     walletRegistry,
-    allExternalButtons,
+    allRegistryButtons,
     customConnectorButtons,
     connectorVisibilityMap,
     deviceDetails,
@@ -63,16 +63,16 @@ function ConnectWallet(props) {
   }, [walletRegistry]);
   const allUniqueButtons = react.useMemo(() => {
     const uniqueButtonSet = new Set();
-    return customConnectorButtons.concat(allExternalButtons).filter(button => {
+    return customConnectorButtons.concat(allRegistryButtons).filter(button => {
       if (uniqueButtonSet.has(button.name)) return false;
       uniqueButtonSet.add(button.name);
       return true;
     });
-  }, [allExternalButtons, customConnectorButtons]);
+  }, [allRegistryButtons, customConnectorButtons]);
   const defaultButtonKeys = react.useMemo(() => new Set(Object.keys(walletRegistry.default)), [walletRegistry]);
   const defaultButtons = react.useMemo(() => {
     // display order: default injected buttons > custom adapter buttons > default non-injected buttons
-    const buttons = [...allExternalButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customConnectorButtons, ...allExternalButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))].sort((a, b) => {
+    const buttons = [...allRegistryButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customConnectorButtons, ...allRegistryButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))].sort((a, b) => {
       // favor MetaMask over other wallets
       if (a.name === noModal.WALLET_CONNECTORS.METAMASK && b.name === noModal.WALLET_CONNECTORS.METAMASK) {
         // favor installed MetaMask over non-installed MetaMask
@@ -96,7 +96,7 @@ function ConnectWallet(props) {
       var _button$chainNamespac;
       return selectedChain === "all" || ((_button$chainNamespac = button.chainNamespaces) === null || _button$chainNamespac === void 0 ? void 0 : _button$chainNamespac.includes(selectedChain));
     });
-  }, [allExternalButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);
+  }, [allRegistryButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);
   const installedWalletButtons = react.useMemo(() => {
     const visibilityMap = connectorVisibilityMap;
     return Object.keys(config).reduce((acc, localConnector) => {

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

@@ -43,7 +43,7 @@ const ConnectWalletChainNamespaceSelect = props => {
         extension: wallet.imgExtension
       })
     }), jsxRuntime.jsx("p", {
-      className: "w3a--my-6 w3a--text-center w3a--text-sm w3a--text-app-gray-500",
+      className: "w3a--my-6 w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
       children: t("modal.external.select-chain-description", {
         wallet: wallet.displayName
       })
@@ -72,7 +72,7 @@ const ConnectWalletChainNamespaceSelect = props => {
               isButton: true,
               extension: "svg"
             }), jsxRuntime.jsx("p", {
-              className: "w3a--ml-2 w3a--text-left w3a--text-sm first-letter:w3a--capitalize",
+              className: "w3a--ml-2 w3a--text-left w3a--text-sm w3a--text-app-gray-900 first-letter:w3a--capitalize dark:w3a--text-app-gray-200",
               children: displayName
             })]
           }), jsxRuntime.jsx("img", {

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

@@ -5,6 +5,7 @@ var react = require('react');
 var reactI18next = require('react-i18next');
 var interfaces = require('../../interfaces.js');
 var localeImport = require('../../localeImport.js');
+var CircularLoader = require('../CircularLoader/CircularLoader.js');
 var Image = require('../Image/Image.js');
 var PulseLoader = require('../PulseLoader/PulseLoader.js');
 
@@ -113,6 +114,56 @@ function ErroredStatus(props) {
     })]
   });
 }
+function AuthorizingStatus(props) {
+  var _walletRegistry$defau, _walletRegistry$other;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  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
+    });
+  };
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--size-full w3a--flex-col w3a--items-center w3a--justify-between w3a--gap-y-6",
+    children: [jsxRuntime.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
+      })
+    }), jsxRuntime.jsx("div", {
+      className: "w3a--flex w3a--justify-center",
+      children: jsxRuntime.jsx(CircularLoader, {
+        width: 95,
+        height: 95,
+        thickness: 6,
+        arcSizeDeg: 100,
+        arcColors: primaryColor ? [primaryColor, primaryColor] : undefined,
+        children: jsxRuntime.jsx(Image, {
+          imageId: `login-${connector}`,
+          hoverImageId: `login-${connector}`,
+          height: "45",
+          width: "45"
+        })
+      })
+    }), jsxRuntime.jsx("p", {
+      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+      children: t("modal.loader.authorizing-message")
+    }), jsxRuntime.jsx("button", {
+      onClick: handleMobileVerifyConnectClick,
+      className: "w3a--w-full w3a--rounded-xl w3a--bg-app-gray-100 w3a--p-2 w3a--py-3 w3a--text-center w3a--text-sm w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white md:w3a--hidden",
+      children: t("modal.loader.authorizing-verify-btn")
+    })]
+  });
+}
 /**
  * Loader component
  * @param props - LoaderProps
@@ -125,25 +176,36 @@ function Loader(props) {
     modalStatus,
     onClose,
     appLogo,
-    message
+    message,
+    isConnectAndSignAuthenticationMode,
+    externalWalletsConfig,
+    walletRegistry,
+    handleMobileVerifyConnect
   } = props;
+  const isConnectedAccordingToAuthenticationMode = react.useMemo(() => !isConnectAndSignAuthenticationMode && modalStatus === interfaces.MODAL_STATUS.CONNECTED || isConnectAndSignAuthenticationMode && modalStatus === interfaces.MODAL_STATUS.AUTHORIZED, [modalStatus, isConnectAndSignAuthenticationMode]);
   react.useEffect(() => {
-    if (modalStatus === interfaces.MODAL_STATUS.CONNECTED) {
-      setTimeout(() => {
+    if (isConnectedAccordingToAuthenticationMode) {
+      const timeout = setTimeout(() => {
         onClose();
       }, 1000);
+      return () => clearTimeout(timeout);
     }
-  }, [modalStatus, onClose]);
+  }, [isConnectedAccordingToAuthenticationMode, onClose]);
   return jsxRuntime.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: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && jsxRuntime.jsx(ConnectingStatus, {
       connector: connector,
       connectorName: connectorName,
       appLogo: appLogo
-    }), modalStatus === interfaces.MODAL_STATUS.CONNECTED && jsxRuntime.jsx(ConnectedStatus, {
+    }), isConnectedAccordingToAuthenticationMode && jsxRuntime.jsx(ConnectedStatus, {
       message: message
     }), modalStatus === interfaces.MODAL_STATUS.ERRORED && jsxRuntime.jsx(ErroredStatus, {
       message: message
+    }), modalStatus === interfaces.MODAL_STATUS.AUTHORIZING && jsxRuntime.jsx(AuthorizingStatus, {
+      connector: connector,
+      externalWalletsConfig: externalWalletsConfig,
+      walletRegistry: walletRegistry,
+      handleMobileVerifyConnect: handleMobileVerifyConnect
     })]
   });
 }

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

@@ -35,6 +35,7 @@ function Login(props) {
     isDark,
     handleSocialLoginClick,
     totalExternalWallets,
+    remainingUndisplayedWallets,
     isEmailPasswordLessLoginVisible,
     isSmsPasswordLessLoginVisible,
     handleExternalWalletBtnClick,
@@ -448,7 +449,7 @@ function Login(props) {
           src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
           alt: "arrow"
         })]
-      }, wallet.name)), totalExternalWallets > 3 && jsxRuntime.jsxs("button", {
+      }, wallet.name)), remainingUndisplayedWallets > 0 && jsxRuntime.jsxs("button", {
         type: "button",
         className: utils.cn("w3a--btn !w3a--justify-between w3a--group w3a--relative w3a--overflow-hidden", {
           "w3a--rounded-full": buttonRadius === "pill",
@@ -459,10 +460,10 @@ function Login(props) {
         children: [jsxRuntime.jsx("p", {
           className: "w3a--text-base w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
           children: t("modal.external.all-wallets")
-        }), showExternalWalletCount && totalExternalWallets > 0 && jsxRuntime.jsx("div", {
+        }), showExternalWalletCount && jsxRuntime.jsx("div", {
           id: "external-wallet-count",
           className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--w-auto -w3a--translate-y-1/2 w3a--rounded-full w3a--bg-app-primary-100 w3a--px-2.5 w3a--py-0.5 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 w3a--transition-all w3a--delay-300 w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 group-hover:w3a--delay-0 dark:w3a--border dark:w3a--border-app-primary-500 dark:w3a--bg-transparent dark:w3a--text-app-primary-500",
-          children: totalExternalWallets - 1
+          children: remainingUndisplayedWallets
         }), jsxRuntime.jsx("img", {
           id: "external-wallet-arrow",
           className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",

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

@@ -28,6 +28,7 @@ function Root(props) {
     setModalState,
     modalState,
     handleExternalWalletBtnClick,
+    handleMobileVerifyConnect,
     chainNamespaces,
     walletRegistry,
     appLogo,
@@ -44,7 +45,8 @@ function Root(props) {
     isSmsPasswordLessLoginVisible,
     preHandleExternalWalletClick,
     uiConfig,
-    deviceDetails
+    deviceDetails,
+    isConnectAndSignAuthenticationMode
   } = props;
   const {
     logoAlignment = "center",
@@ -242,7 +244,7 @@ function Root(props) {
       return acc;
     }, []);
   }, [connectorVisibilityMap, chainNamespaces, config, deviceDetails.platform, isWalletConnectConnectorIncluded]);
-  const allButtons = react.useMemo(() => {
+  const allRegistryButtons = react.useMemo(() => {
     return [...generateWalletButtons(walletRegistry.default), ...generateWalletButtons(walletRegistry.others)];
   }, [generateWalletButtons, walletRegistry.default, walletRegistry.others]);
   const installedConnectorButtons = react.useMemo(() => {
@@ -265,7 +267,7 @@ function Root(props) {
     const metamaskConnectorIdx = installedConnectors.findIndex(x => x.name === noModal.WALLET_CONNECTORS.METAMASK && !x.hasInjectedWallet);
     if (metamaskConnectorIdx !== -1) {
       const metamaskConnector = installedConnectors[metamaskConnectorIdx];
-      let metamaskRegistryButton = allButtons.find(button => button.name === noModal.WALLET_CONNECTORS.METAMASK);
+      let metamaskRegistryButton = allRegistryButtons.find(button => button.name === noModal.WALLET_CONNECTORS.METAMASK);
       if (!metamaskRegistryButton) {
         // use the default metamask registry item if it's not in the registry
         metamaskRegistryButton = generateWalletButtons({
@@ -282,7 +284,7 @@ function Root(props) {
     }
     // make metamask the first button and limit the number of buttons
     return installedConnectors;
-  }, [allButtons, config, connectorVisibilityMap, generateWalletButtons]);
+  }, [allRegistryButtons, config, connectorVisibilityMap, generateWalletButtons]);
   const customConnectorButtons = react.useMemo(() => {
     return installedConnectorButtons.filter(button => !button.hasInjectedWallet);
   }, [installedConnectorButtons]);
@@ -291,14 +293,19 @@ function Root(props) {
     // make metamask the first button and limit the number of buttons
     return installedConnectorButtons.sort((a, _) => a.name === noModal.WALLET_CONNECTORS.METAMASK ? -1 : 1).slice(0, displayInstalledExternalWallets ? MAX_TOP_INSTALLED_CONNECTORS : 1);
   }, [installedConnectorButtons, displayInstalledExternalWallets]);
-  const totalExternalWallets = react.useMemo(() => {
-    const uniqueWalletSet = new Set();
-    return allButtons.concat(installedConnectorButtons).filter(button => {
-      if (uniqueWalletSet.has(button.name)) return false;
-      uniqueWalletSet.add(button.name);
+  const allExternalWallets = react.useMemo(() => {
+    const uniqueButtonSet = new Set();
+    return installedConnectorButtons.concat(allRegistryButtons).filter(button => {
+      if (uniqueButtonSet.has(button.name)) return false;
+      uniqueButtonSet.add(button.name);
       return true;
+    });
+  }, [allRegistryButtons, installedConnectorButtons]);
+  const remainingUndisplayedWallets = react.useMemo(() => {
+    return allExternalWallets.filter(button => {
+      return !topInstalledConnectorButtons.includes(button);
     }).length;
-  }, [allButtons, installedConnectorButtons]);
+  }, [allExternalWallets, topInstalledConnectorButtons]);
   const handleSocialLoginHeight = () => {
     setIsSocialLoginsExpanded(prev => !prev);
   };
@@ -370,7 +377,11 @@ function Root(props) {
             connectorName: modalState.detailedLoaderConnectorName,
             modalStatus: modalState.status,
             onClose: onCloseLoader,
-            appLogo: appLogo
+            appLogo: appLogo,
+            isConnectAndSignAuthenticationMode: isConnectAndSignAuthenticationMode,
+            externalWalletsConfig: modalState.externalWalletsConfig,
+            walletRegistry: walletRegistry,
+            handleMobileVerifyConnect: handleMobileVerifyConnect
           }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
             children: (_bodyState$metamaskQr3 = bodyState.metamaskQrCode) !== null && _bodyState$metamaskQr3 !== void 0 && _bodyState$metamaskQr3.show ? jsxRuntime.jsxs("div", {
               className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
@@ -409,7 +420,8 @@ function Root(props) {
                 installedExternalWalletConfig: topInstalledConnectorButtons,
                 isEmailPasswordLessLoginVisible: isEmailPasswordLessLoginVisible,
                 isSmsPasswordLessLoginVisible: isSmsPasswordLessLoginVisible,
-                totalExternalWallets: totalExternalWallets,
+                totalExternalWallets: allExternalWallets.length,
+                remainingUndisplayedWallets: remainingUndisplayedWallets,
                 logoAlignment: logoAlignment,
                 buttonRadius: buttonRadiusType,
                 deviceDetails: deviceDetails,
@@ -423,7 +435,7 @@ function Root(props) {
                 metamaskConnectUri: modalState.metamaskConnectUri,
                 config: modalState.externalWalletsConfig,
                 walletRegistry: walletRegistry,
-                allExternalButtons: allButtons,
+                allRegistryButtons: allRegistryButtons,
                 connectorVisibilityMap: connectorVisibilityMap,
                 customConnectorButtons: customConnectorButtons,
                 deviceDetails: deviceDetails,