@web3auth/modal 10.8.3 → 10.9.0-alpha.0

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/ConnectWallet/ConnectWalletList/ConnectWalletList.type.d.ts

@@ -14,7 +14,6 @@ export interface ConnectWalletListProps {
     buttonRadius: ButtonRadiusType;
     handleWalletClick: (button: ExternalButton) => void;
     handleMoreWallets: () => void;
-    isShowAllWallets: boolean;
 }
 export type WalletsFoundProps = Pick<ConnectWalletListProps, "externalButtons" | "isLoading" | "handleWalletClick" | "deviceDetails" | "walletConnectUri" | "buttonRadius">;
 export type MoreWalletsButtonProps = Pick<ConnectWalletListProps, "totalExternalWalletsCount" | "initialWalletCount" | "handleMoreWallets" | "isLoading" | "isDark" | "buttonRadius">;

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.8.3";
+const version = "10.9.0-alpha.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);
     });

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(() => {

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.off("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);
@@ -119,6 +132,7 @@ function Web3AuthInnerProvider(params) {
         web3Auth.off(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
         web3Auth.off(CONNECTOR_EVENTS.READY, readyListener);
         web3Auth.off(CONNECTOR_EVENTS.CONNECTED, connectedListener);
+        web3Auth.off(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
         web3Auth.off(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
         web3Auth.off(CONNECTOR_EVENTS.CONNECTING, connectingListener);
         web3Auth.off(CONNECTOR_EVENTS.ERRORED, errorListener);
@@ -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/ConnectWallet.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { WALLET_CONNECTORS, ANALYTICS_EVENTS, log } from '@web3auth/no-modal';
-import { useContext, useState, useMemo, useEffect } from 'react';
+import { useContext, useState, useMemo } from 'react';
 import { CONNECT_WALLET_PAGES } from '../../constants.js';
 import { AnalyticsContext } from '../../context/AnalyticsContext.js';
 import { RootContext } from '../../context/RootContext.js';
@@ -116,6 +116,7 @@ function ConnectWallet(props) {
   };
   const handleChainFilterChange = chain => {
     setSelectedChain(chain);
+    setIsShowAllWallets(false);
   };
   const filteredButtons = useMemo(() => {
     if (walletDiscoverySupported) {
@@ -135,16 +136,6 @@ function ConnectWallet(props) {
     return walletDiscoverySupported ? defaultButtons.length : installedWalletButtons.length;
   }, [walletDiscoverySupported, defaultButtons, installedWalletButtons, isShowAllWallets, totalExternalWalletsCount]);
 
-  // Automatically show all wallets if there are less than or equal to 15 wallets
-  // also resets everytime we search causing no. of wallets to change or select different chain
-  useEffect(() => {
-    if (walletDiscoverySupported && totalExternalWalletsCount <= 15) {
-      setIsShowAllWallets(true);
-    } else {
-      setIsShowAllWallets(false);
-    }
-  }, [walletDiscoverySupported, selectedChain, totalExternalWalletsCount]);
-
   /**
    * Wallet click logic
    * - For installed wallets
@@ -272,8 +263,7 @@ function ConnectWallet(props) {
         isDark: isDark,
         deviceDetails: deviceDetails,
         walletConnectUri: walletConnectUri,
-        buttonRadius: buttonRadius,
-        isShowAllWallets: isShowAllWallets
+        buttonRadius: buttonRadius
       })]
     })]
   });

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", {

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import i18nInstance from '../../../localeImport.js';
 import { cn, getIcons } from '../../../utils.js';
@@ -111,17 +112,17 @@ function ConnectWalletList(props) {
     isDark,
     deviceDetails,
     walletConnectUri,
-    buttonRadius,
-    isShowAllWallets
+    buttonRadius
   } = props;
+  const [showMoreWallets, setShowMoreWallets] = useState(true);
   const onShowMoreWalletsClick = () => {
+    setShowMoreWallets(false);
     handleMoreWallets();
   };
-  const showMoreWalletsButton = !isShowAllWallets;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("ul", {
       className: cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px] w3a--social-container w3a--pr-2.5", {
-        "w3a--h-[328px]": !showMoreWalletsButton
+        "w3a--h-[328px]": !showMoreWallets
       }),
       children: externalButtons.length === 0 ? /*#__PURE__*/jsx(NoWalletsFound, {}) : /*#__PURE__*/jsx(WalletsFound, {
         externalButtons: externalButtons,
@@ -131,7 +132,7 @@ function ConnectWalletList(props) {
         walletConnectUri: walletConnectUri,
         buttonRadius: buttonRadius
       })
-    }), showMoreWalletsButton && !isLoading && initialWalletCount < totalExternalWalletsCount && /*#__PURE__*/jsx(MoreWalletsButton, {
+    }), showMoreWallets && totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && /*#__PURE__*/jsx(MoreWalletsButton, {
       totalExternalWalletsCount: totalExternalWalletsCount,
       initialWalletCount: initialWalletCount,
       handleMoreWallets: onShowMoreWalletsClick,