@web3auth/modal 10.9.1 → 10.11.0

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

@@ -2,7 +2,7 @@
 
 var noModal = require('@web3auth/no-modal');
 
-const version = "10.9.1";
+const version = "10.11.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,14 +565,15 @@ 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);
         }
       }
       // update connector config
-      if ([noModal.CONNECTOR_STATUS.NOT_READY, noModal.CONNECTOR_STATUS.READY, noModal.CONNECTOR_STATUS.CONNECTING, noModal.CONNECTOR_STATUS.CONNECTED].includes(connector.status)) {
+      if ([noModal.CONNECTOR_STATUS.NOT_READY, noModal.CONNECTOR_STATUS.READY, noModal.CONNECTOR_STATUS.CONNECTING, noModal.CONNECTOR_STATUS.CONNECTED, noModal.CONNECTOR_STATUS.AUTHORIZING, noModal.CONNECTOR_STATUS.AUTHORIZED].includes(connector.status)) {
         const connectorModalConfig = this.modalConfig.connectors[connectorName];
         connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
           isInjected: connector.isInjected,

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(() => {
@@ -50,9 +50,9 @@ function WalletServicesContextProvider({
     }
     return () => {
       if (walletServicesPlugin) {
-        walletServicesPlugin.off(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
-        walletServicesPlugin.off(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-        walletServicesPlugin.off(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
+        walletServicesPlugin.removeListener(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
+        walletServicesPlugin.removeListener(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+        walletServicesPlugin.removeListener(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
       }
     };
   }, [walletServicesPlugin]);

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.removeListener("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);
@@ -118,14 +131,15 @@ function Web3AuthInnerProvider(params) {
     }
     return () => {
       if (web3Auth) {
-        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.DISCONNECTED, disconnectedListener);
-        web3Auth.off(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
-        web3Auth.off(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
-        web3Auth.off(noModal.CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
-        web3Auth.off(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
+        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
+        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.READY, readyListener);
+        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
+        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
+        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
+        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
+        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
+        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
+        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
         web3Auth.cleanup();
       }
     };
@@ -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/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/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",
@@ -375,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",

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

@@ -17,6 +17,7 @@ function Widget(props) {
     stateListener,
     handleSocialLoginClick,
     handleExternalWalletClick,
+    handleMobileVerifyConnect,
     handleShowExternalWallets,
     closeModal,
     appLogo,
@@ -24,7 +25,8 @@ function Widget(props) {
     chainNamespaces,
     walletRegistry,
     uiConfig,
-    deviceDetails
+    deviceDetails,
+    initialAuthenticationMode
   } = props;
   const {
     widgetType
@@ -55,6 +57,7 @@ function Widget(props) {
     web3authNetwork: auth.WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
     authBuildEnv: auth.BUILD_ENV.PRODUCTION
   });
+  const isConnectAndSignAuthenticationMode = react.useMemo(() => initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN, [initialAuthenticationMode]);
   react.useEffect(() => {
     setModalState(prev => _objectSpread(_objectSpread({}, prev), {}, {
       modalVisibility: visible
@@ -141,7 +144,13 @@ function Widget(props) {
     closeModal();
   };
   const onCloseLoader = () => {
-    if (modalState.status === interfaces.MODAL_STATUS.CONNECTED) {
+    if (!isConnectAndSignAuthenticationMode && modalState.status === interfaces.MODAL_STATUS.CONNECTED) {
+      setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+        modalVisibility: false,
+        externalWalletsVisibility: false
+      }));
+    }
+    if (isConnectAndSignAuthenticationMode && modalState.status === interfaces.MODAL_STATUS.AUTHORIZED) {
       setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
         modalVisibility: false,
         externalWalletsVisibility: false
@@ -155,7 +164,7 @@ function Widget(props) {
     }
   };
   const showCloseIcon = react.useMemo(() => {
-    return modalState.status === interfaces.MODAL_STATUS.INITIALIZED || modalState.status === interfaces.MODAL_STATUS.CONNECTED || modalState.status === interfaces.MODAL_STATUS.ERRORED;
+    return modalState.status === interfaces.MODAL_STATUS.INITIALIZED || modalState.status === interfaces.MODAL_STATUS.CONNECTED || modalState.status === interfaces.MODAL_STATUS.ERRORED || modalState.status === interfaces.MODAL_STATUS.AUTHORIZED;
   }, [modalState.status]);
   react.useEffect(() => {
     // TODO: maybe move this inside root
@@ -200,7 +209,9 @@ function Widget(props) {
         isEmailPasswordLessLoginVisible: isEmailPasswordLessLoginVisible,
         isSmsPasswordLessLoginVisible: isSmsPasswordLessLoginVisible,
         uiConfig: uiConfig,
-        deviceDetails: deviceDetails
+        deviceDetails: deviceDetails,
+        isConnectAndSignAuthenticationMode: isConnectAndSignAuthenticationMode,
+        handleMobileVerifyConnect: handleMobileVerifyConnect
       })
     });
   }
@@ -230,7 +241,9 @@ function Widget(props) {
       isEmailPasswordLessLoginVisible: isEmailPasswordLessLoginVisible,
       isSmsPasswordLessLoginVisible: isSmsPasswordLessLoginVisible,
       uiConfig: uiConfig,
-      deviceDetails: deviceDetails
+      deviceDetails: deviceDetails,
+      isConnectAndSignAuthenticationMode: isConnectAndSignAuthenticationMode,
+      handleMobileVerifyConnect: handleMobileVerifyConnect
     })
   });
 }