@web3auth/modal 10.9.1 → 10.11.0

package/dist/lib.cjs/packages/modal/src/vue/solana/composables/useSignTransaction.js

@@ -20,6 +20,7 @@ const useSignTransaction = () => {
       data.value = signedTransaction;
       return signedTransaction;
     } catch (err) {
+      noModal.log.error("Error signing transaction", err);
       error.value = err;
     } finally {
       loading.value = false;

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

@@ -33,6 +33,7 @@ export declare class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal
     private onSocialLogin;
     private onExternalWalletLogin;
     private onModalVisibility;
+    private onMobileVerifyConnect;
     private getChainNamespaces;
     private getCombinedConnectionId;
 }

package/dist/lib.cjs/types/ui/components/BottomSheet/BottomSheet.d.ts

@@ -3,5 +3,5 @@ import { BottomSheetProps } from "./BottomSheet.type";
  * BottomSheet component
  * @returns BottomSheet component
  */
-declare function BottomSheet({ isShown, onClose, children, uiConfig }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheet({ isShown, onClose, children, uiConfig, sheetClassName, showCloseButton }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
 export default BottomSheet;

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

@@ -4,4 +4,6 @@ export interface BottomSheetProps {
     uiConfig: UIConfig;
     onClose: () => void;
     children: React.ReactNode;
+    sheetClassName?: string;
+    showCloseButton?: boolean;
 }

package/dist/lib.cjs/types/ui/components/CircularLoader/CircularLoader.d.ts

@@ -0,0 +1,3 @@
+import type { CircularLoaderProps } from "./CircularLoader.type";
+declare const CircularLoader: (props: CircularLoaderProps) => import("react/jsx-runtime").JSX.Element;
+export default CircularLoader;

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export interface CircularLoaderProps {
+    width?: number | string;
+    height?: number | string;
+    thickness?: number;
+    showChildren?: boolean;
+    children?: ReactNode;
+    className?: string;
+    trackColor?: string;
+    /** Size of the colored arc in degrees (0-360). Default: 40 */
+    arcSizeDeg?: number;
+    /** Two colors for the orange arc gradient [start, end]. */
+    arcColors?: [string, string];
+    /**
+     * CSS color stops for conic-gradient. Example:
+     * "conic-gradient(#f97316, #fdba74 320deg, transparent 320deg)"
+     */
+    gradient?: string;
+}

package/dist/lib.cjs/types/ui/components/CircularLoader/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./CircularLoader";
+export type { CircularLoaderProps } from "./CircularLoader.type";

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

@@ -1,12 +1,20 @@
+import { BaseConnectorConfig, WALLET_CONNECTOR_TYPE, WalletRegistry } from "@web3auth/no-modal";
 import type { ModalStatusType } from "../../interfaces";
 export interface LoaderProps {
+    externalWalletsConfig: Record<string, BaseConnectorConfig>;
+    walletRegistry?: WalletRegistry;
     message?: string;
     appLogo?: string;
     connector: string;
     connectorName: string;
     modalStatus: ModalStatusType;
     onClose: () => void;
+    isConnectAndSignAuthenticationMode: boolean;
+    handleMobileVerifyConnect: (params: {
+        connector: WALLET_CONNECTOR_TYPE;
+    }) => void;
 }
 export type ConnectingStatusType = Pick<LoaderProps, "connectorName" | "appLogo" | "connector">;
 export type ConnectedStatusType = Pick<LoaderProps, "message">;
 export type ErroredStatusType = Pick<LoaderProps, "message">;
+export type AuthorizingStatusType = Pick<LoaderProps, "connector" | "externalWalletsConfig" | "walletRegistry" | "handleMobileVerifyConnect">;

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

@@ -1,4 +1,4 @@
-import type { ChainNamespaceType, WalletRegistry } from "@web3auth/no-modal";
+import type { ChainNamespaceType, WALLET_CONNECTOR_TYPE, WalletRegistry } from "@web3auth/no-modal";
 import { browser, ModalState, os, platform, SocialLoginEventType, SocialLoginsConfig, UIConfig } from "../../interfaces";
 export interface RootProps {
     appLogo?: string;
@@ -29,4 +29,8 @@ export interface RootProps {
     }) => void;
     setModalState: (state: ModalState) => void;
     onCloseLoader: () => void;
+    isConnectAndSignAuthenticationMode: boolean;
+    handleMobileVerifyConnect: (params: {
+        connector: WALLET_CONNECTOR_TYPE;
+    }) => void;
 }

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

@@ -1,5 +1,5 @@
 import { SafeEventEmitter } from "@web3auth/auth";
-import { ChainNamespaceType, WalletRegistry } from "@web3auth/no-modal";
+import { ChainNamespaceType, ConnectorInitialAuthenticationModeType, WALLET_CONNECTOR_TYPE, WalletRegistry } from "@web3auth/no-modal";
 import { browser, ExternalWalletEventType, os, platform, SocialLoginEventType, StateEmitterEvents, UIConfig } from "../../interfaces";
 export interface WidgetProps {
     stateListener: SafeEventEmitter<StateEmitterEvents>;
@@ -8,6 +8,7 @@ export interface WidgetProps {
     chainNamespaces: ChainNamespaceType[];
     walletRegistry?: WalletRegistry;
     uiConfig: UIConfig;
+    initialAuthenticationMode: ConnectorInitialAuthenticationModeType;
     deviceDetails: {
         platform: platform;
         browser: browser;
@@ -15,6 +16,9 @@ export interface WidgetProps {
     };
     handleSocialLoginClick: (params: SocialLoginEventType) => void;
     handleExternalWalletClick: (params: ExternalWalletEventType) => void;
+    handleMobileVerifyConnect: (params: {
+        connector: WALLET_CONNECTOR_TYPE;
+    }) => void;
     handleShowExternalWallets: (externalWalletsInitialized: boolean) => void;
     closeModal: () => void;
 }

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

@@ -1,5 +1,5 @@
 import type { AUTH_CONNECTION_TYPE, BUILD_ENV_TYPE, EMAIL_FLOW_TYPE, ExtraLoginOptions, LANGUAGES, SafeEventEmitter, THEME_MODE_TYPE, WEB3AUTH_NETWORK_TYPE } from "@web3auth/auth";
-import { type Analytics, type AuthLoginParams, type BaseConnectorConfig, type ChainNamespaceType, type LoginMethodConfig, type LoginModalConfig, type UIConfig as CoreUIConfig, type WALLET_CONNECTOR_TYPE, type WalletRegistry, type WalletRegistryItem, type Web3AuthNoModalEvents } from "@web3auth/no-modal";
+import { type Analytics, type AuthLoginParams, type BaseConnectorConfig, type ChainNamespaceType, type ConnectorInitialAuthenticationModeType, type LoginMethodConfig, type LoginModalConfig, type UIConfig as CoreUIConfig, type WALLET_CONNECTOR_TYPE, type WalletRegistry, type WalletRegistryItem, type Web3AuthNoModalEvents } from "@web3auth/no-modal";
 export interface UIConfig extends CoreUIConfig, LoginModalConfig {
     /**
      * ID of the element to embed the widget into
@@ -42,6 +42,7 @@ export type ModalLoginParams = Pick<AuthLoginParams, "authConnection" | "authCon
     name: string;
 };
 export interface LoginModalProps extends UIConfig {
+    initialAuthenticationMode: ConnectorInitialAuthenticationModeType;
     chainNamespaces: ChainNamespaceType[];
     walletRegistry: WalletRegistry;
     web3authClientId: string;
@@ -64,6 +65,9 @@ export interface LoginModalCallbacks {
         };
     }) => Promise<void>;
     onModalVisibility: (visibility: boolean) => Promise<void>;
+    onMobileVerifyConnect: (params: {
+        connector: WALLET_CONNECTOR_TYPE;
+    }) => Promise<void>;
 }
 export declare const LOGIN_MODAL_EVENTS: {
     readonly MODAL_VISIBILITY: "MODAL_VISIBILITY";
@@ -79,6 +83,8 @@ export declare const MODAL_STATUS: {
     readonly CONNECTED: "connected";
     readonly CONNECTING: "connecting";
     readonly ERRORED: "errored";
+    readonly AUTHORIZING: "authorizing";
+    readonly AUTHORIZED: "authorized";
 };
 export type ModalStatusType = (typeof MODAL_STATUS)[keyof typeof MODAL_STATUS];
 export interface ModalState {

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

@@ -28,6 +28,7 @@ export declare class LoginModal {
     initExternalWalletContainer: () => void;
     private handleShowExternalWallets;
     private handleExternalWalletClick;
+    private handleMobileVerifyConnect;
     private handleSocialLoginClick;
     private setState;
     private handleConnectorData;

package/dist/lib.cjs/types/vue/interfaces.d.ts

@@ -9,6 +9,7 @@ export interface Web3AuthProviderProps {
 }
 interface IBaseWeb3AuthComposableContext {
     isConnected: Ref<boolean>;
+    isAuthorized: Ref<boolean>;
     provider: Ref<IProvider | null>;
     isInitializing: Ref<boolean>;
     initError: Ref<Error | null>;

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

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

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

@@ -1,7 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { serializeError } from '@web3auth/auth';
-import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, LOGIN_MODE, log, CONNECTOR_STATUS, sdkVersion, ANALYTICS_SDK_TYPE, withAbort, CONNECTOR_EVENTS, ANALYTICS_EVENTS, getErrorAnalyticsProperties, WalletInitializationError, fetchProjectConfig, fetchWalletRegistry, WALLET_REGISTRY_URL, CONNECTOR_CATEGORY, CONNECTOR_NAMES, CONNECTOR_NAMESPACES } from '@web3auth/no-modal';
+import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, LOGIN_MODE, log, CONNECTOR_STATUS, CONNECTED_STATUSES, sdkVersion, ANALYTICS_SDK_TYPE, withAbort, CONNECTOR_EVENTS, ANALYTICS_EVENTS, getErrorAnalyticsProperties, WalletInitializationError, CONNECTOR_INITIAL_AUTHENTICATION_MODE, fetchProjectConfig, fetchWalletRegistry, WALLET_REGISTRY_URL, CONNECTOR_CATEGORY, CONNECTOR_NAMES, CONNECTOR_NAMESPACES } from '@web3auth/no-modal';
 import deepmerge from 'deepmerge';
 import { defaultConnectorsModalConfig } from './config.js';
 import { AUTH_PROVIDERS_NAMES, AUTH_PROVIDERS, capitalizeFirstLetter } from './ui/config.js';
@@ -70,12 +70,20 @@ class Web3Auth extends Web3AuthNoModal {
             log.error(`Error while disconnecting to wallet connect in core`, error);
           }
         }
-        if (!visibility && this.status === CONNECTOR_STATUS.CONNECTED && (walletConnectStatus === CONNECTOR_STATUS.READY || walletConnectStatus === CONNECTOR_STATUS.CONNECTING)) {
+        if (!visibility && CONNECTED_STATUSES.includes(this.status) && (walletConnectStatus === CONNECTOR_STATUS.READY || walletConnectStatus === CONNECTOR_STATUS.CONNECTING)) {
           log.debug("this stops wc connector from trying to reconnect once proposal expires");
           wcConnector.status = CONNECTOR_STATUS.READY;
         }
       }
     });
+    _defineProperty(this, "onMobileVerifyConnect", async params => {
+      try {
+        const connector = this.getConnector(params.connector);
+        await connector.getIdentityToken();
+      } catch (error) {
+        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)) || [])];
@@ -138,12 +146,14 @@ class Web3Auth extends 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 withAbort(() => this.loginModal.initModal(), signal);
 
@@ -199,7 +209,7 @@ class Web3Auth extends Web3AuthNoModal {
   async connect() {
     if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
     // if already connected return provider
-    if (this.connectedConnectorName && this.status === CONNECTOR_STATUS.CONNECTED && this.provider) return this.provider;
+    if (this.connectedConnectorName && 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.
@@ -211,18 +221,24 @@ class Web3Auth extends Web3AuthNoModal {
       };
       const handleError = err => {
         this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+        this.removeListener(CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
         this.removeListener(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 !== CONNECTOR_STATUS.CONNECTED) {
+        if (!visibility && !CONNECTED_STATUSES.includes(this.status)) {
           this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleConnected);
           this.removeListener(CONNECTOR_EVENTS.ERRORED, handleError);
+          this.removeListener(CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
           return reject(new Error("User closed the modal"));
         }
       };
-      this.once(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+      if (this.coreOptions.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN) {
+        this.once(CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
+      } else {
+        this.once(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+      }
       this.once(CONNECTOR_EVENTS.ERRORED, handleError);
       this.once(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
     });
@@ -534,7 +550,8 @@ class Web3Auth extends Web3AuthNoModal {
         const autoConnect = super.checkIfAutoConnect(connector);
         await connector.init({
           autoConnect,
-          chainId: initialChain.chainId
+          chainId: initialChain.chainId,
+          getIdentityToken: this.options.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
         });
 
         // note: not adding cachedWallet to modal if it is external wallet.
@@ -578,7 +595,8 @@ class Web3Auth extends Web3AuthNoModal {
           const initialChain = this.getInitialChainIdForConnector(connector);
           await connector.init({
             autoConnect: this.cachedConnector === connectorName,
-            chainId: initialChain.chainId
+            chainId: initialChain.chainId,
+            getIdentityToken: this.options.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
           });
         } catch (error) {
           log.error(error, "error while initializing connector", connectorName);
@@ -586,7 +604,7 @@ class Web3Auth extends Web3AuthNoModal {
       }
 
       // update connector config
-      if ([CONNECTOR_STATUS.NOT_READY, CONNECTOR_STATUS.READY, CONNECTOR_STATUS.CONNECTING, CONNECTOR_STATUS.CONNECTED].includes(connector.status)) {
+      if ([CONNECTOR_STATUS.NOT_READY, CONNECTOR_STATUS.READY, CONNECTOR_STATUS.CONNECTING, CONNECTOR_STATUS.CONNECTED, CONNECTOR_STATUS.AUTHORIZING, CONNECTOR_STATUS.AUTHORIZED].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/context/WalletServicesInnerContext.js

@@ -1,4 +1,4 @@
-import { EVM_PLUGINS, CONNECTOR_STATUS, PLUGIN_EVENTS } from '@web3auth/no-modal';
+import { EVM_PLUGINS, CONNECTED_STATUSES, PLUGIN_EVENTS } from '@web3auth/no-modal';
 import { createContext, useContext, useState, useEffect, useMemo, createElement } from 'react';
 
 const WalletServicesContext = /*#__PURE__*/createContext(null);
@@ -26,7 +26,7 @@ function WalletServicesContextProvider({
       const plugin = getPlugin(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) === CONNECTOR_STATUS.CONNECTED) setReady(true);
+      if (CONNECTED_STATUSES.includes(plugin === null || plugin === void 0 ? void 0 : plugin.status)) setReady(true);
     }
   }, [isConnected, getPlugin, walletServicesPlugin]);
   useEffect(() => {
@@ -48,9 +48,9 @@ function WalletServicesContextProvider({
     }
     return () => {
       if (walletServicesPlugin) {
-        walletServicesPlugin.off(PLUGIN_EVENTS.CONNECTED, connectedListener);
-        walletServicesPlugin.off(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-        walletServicesPlugin.off(PLUGIN_EVENTS.CONNECTING, connectingListener);
+        walletServicesPlugin.removeListener(PLUGIN_EVENTS.CONNECTED, connectedListener);
+        walletServicesPlugin.removeListener(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+        walletServicesPlugin.removeListener(PLUGIN_EVENTS.CONNECTING, connectingListener);
       }
     };
   }, [walletServicesPlugin]);

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

@@ -24,6 +24,7 @@ function Web3AuthInnerProvider(params) {
     return new Web3Auth(web3AuthOptions, initialState);
   }, [web3AuthOptions, initialState]);
   const [isConnected, setIsConnected] = useState(web3Auth.status === CONNECTOR_STATUS.CONNECTED);
+  const [isAuthorized, setIsAuthorized] = useState(web3Auth.status === CONNECTOR_STATUS.AUTHORIZED);
   const [status, setStatus] = useState(web3Auth.status);
   const getPlugin = useCallback(name => {
     if (!web3Auth) throw WalletInitializationError.notReady();
@@ -64,7 +65,9 @@ function Web3AuthInnerProvider(params) {
     if (provider) {
       provider.on("chainChanged", handleChainChange);
       return () => {
-        provider.off("chainChanged", handleChainChange);
+        if (provider) {
+          provider.removeListener("chainChanged", handleChainChange);
+        }
       };
     }
   }, [web3Auth, provider]);
@@ -83,9 +86,17 @@ function Web3AuthInnerProvider(params) {
         setProvider(data.provider);
       }
     };
+    const authorizedListener = _data => {
+      setStatus(web3Auth.status);
+      if (web3Auth.status === CONNECTOR_STATUS.AUTHORIZED) {
+        setIsConnected(true);
+        setIsAuthorized(true);
+      }
+    };
     const disconnectedListener = () => {
       setStatus(web3Auth.status);
       setIsConnected(false);
+      setIsAuthorized(false);
       setProvider(null);
     };
     const connectingListener = () => {
@@ -97,6 +108,7 @@ function Web3AuthInnerProvider(params) {
     const rehydrationErrorListener = () => {
       setStatus(web3Auth.status);
       setIsConnected(false);
+      setIsAuthorized(false);
       setProvider(null);
     };
     const mfaEnabledListener = isMFAEnabled => {
@@ -108,6 +120,7 @@ function Web3AuthInnerProvider(params) {
       web3Auth.on(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
       web3Auth.on(CONNECTOR_EVENTS.READY, readyListener);
       web3Auth.on(CONNECTOR_EVENTS.CONNECTED, connectedListener);
+      web3Auth.on(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
       web3Auth.on(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
       web3Auth.on(CONNECTOR_EVENTS.CONNECTING, connectingListener);
       web3Auth.on(CONNECTOR_EVENTS.ERRORED, errorListener);
@@ -116,14 +129,15 @@ function Web3AuthInnerProvider(params) {
     }
     return () => {
       if (web3Auth) {
-        web3Auth.off(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-        web3Auth.off(CONNECTOR_EVENTS.READY, readyListener);
-        web3Auth.off(CONNECTOR_EVENTS.CONNECTED, connectedListener);
-        web3Auth.off(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
-        web3Auth.off(CONNECTOR_EVENTS.CONNECTING, connectingListener);
-        web3Auth.off(CONNECTOR_EVENTS.ERRORED, errorListener);
-        web3Auth.off(CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
-        web3Auth.off(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
+        web3Auth.removeListener(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
+        web3Auth.removeListener(CONNECTOR_EVENTS.READY, readyListener);
+        web3Auth.removeListener(CONNECTOR_EVENTS.CONNECTED, connectedListener);
+        web3Auth.removeListener(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
+        web3Auth.removeListener(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
+        web3Auth.removeListener(CONNECTOR_EVENTS.CONNECTING, connectingListener);
+        web3Auth.removeListener(CONNECTOR_EVENTS.ERRORED, errorListener);
+        web3Auth.removeListener(CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
+        web3Auth.removeListener(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
         web3Auth.cleanup();
       }
     };
@@ -132,6 +146,7 @@ function Web3AuthInnerProvider(params) {
     return {
       web3Auth,
       isConnected,
+      isAuthorized,
       isInitialized,
       provider,
       status,
@@ -143,7 +158,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__*/createElement(Web3AuthInnerContext.Provider, {
     value
   }, children);

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

@@ -4,7 +4,7 @@ import { useWeb3AuthInner } from './useWeb3AuthInner.js';
 const useIdentityToken = () => {
   const {
     web3Auth,
-    isConnected
+    isAuthorized
   } = useWeb3AuthInner();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -25,10 +25,14 @@ const useIdentityToken = () => {
     }
   }, [web3Auth]);
   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.esm/packages/modal/src/react/hooks/useWeb3Auth.js

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

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

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

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

@@ -0,0 +1,86 @@
+import { cn } from '../../utils.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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 /*#__PURE__*/jsxs("div", {
+    className: cn("w3a--relative w3a--inline-flex w3a--items-center w3a--justify-center", className),
+    style: {
+      width: w,
+      height: h
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w3a--absolute w3a--inset-0 w3a--rounded-full",
+      style: {
+        background: trackColor,
+        WebkitMaskImage: ringMask,
+        maskImage: ringMask,
+        WebkitMaskRepeat: "no-repeat",
+        maskRepeat: "no-repeat"
+      }
+    }), /*#__PURE__*/jsx("div", {
+      className: "w3a--absolute w3a--inset-0 w3a--animate-spin",
+      style: {
+        WebkitMaskImage: wedgeMask,
+        maskImage: wedgeMask,
+        WebkitMaskRepeat: "no-repeat",
+        maskRepeat: "no-repeat"
+      },
+      children: /*#__PURE__*/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 ? /*#__PURE__*/jsx("div", {
+      className: "w3a--relative",
+      children: children
+    }) : null]
+  });
+};
+
+export { CircularLoader as default };

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

@@ -41,7 +41,7 @@ const ConnectWalletChainNamespaceSelect = props => {
         extension: wallet.imgExtension
       })
     }), /*#__PURE__*/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
       })
@@ -70,7 +70,7 @@ const ConnectWalletChainNamespaceSelect = props => {
               isButton: true,
               extension: "svg"
             }), /*#__PURE__*/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
             })]
           }), /*#__PURE__*/jsx("img", {