@web3auth/modal 10.0.0-beta.2 → 10.0.0-beta.4

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

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, log, CONNECTOR_STATUS, CONNECTOR_EVENTS, WalletInitializationError, fetchProjectConfig, fetchWalletRegistry, CONNECTOR_CATEGORY, CONNECTOR_NAMES, CONNECTOR_NAMESPACES } from '@web3auth/no-modal';
+import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, log, CONNECTOR_STATUS, withAbort, CONNECTOR_EVENTS, WalletInitializationError, fetchProjectConfig, fetchWalletRegistry, CONNECTOR_CATEGORY, CONNECTOR_NAMES, CONNECTOR_NAMESPACES } from '@web3auth/no-modal';
 import deepmerge from 'deepmerge';
 import { defaultConnectorsModalConfig, walletRegistryUrl } from './config.js';
 import { AUTH_PROVIDERS_NAMES, AUTH_PROVIDERS, capitalizeFirstLetter } from './ui/config.js';
@@ -24,7 +24,7 @@ class Web3Auth extends Web3AuthNoModal {
     });
     _defineProperty(this, "onSocialLogin", async params => {
       try {
-        await this.connectTo(params.connector, params.loginParams);
+        await this.connectTo(WALLET_CONNECTORS.AUTH, params.loginParams);
       } catch (error) {
         log.error(`Error while connecting to connector: ${params.connector}`, error);
       }
@@ -71,19 +71,19 @@ class Web3Auth extends Web3AuthNoModal {
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
     log.info("modalConfig", this.modalConfig);
   }
-  async initModal() {
+  async initModal(options) {
+    const {
+      signal
+    } = options || {};
     super.checkInitRequirements();
     // get project config and wallet registry
     const {
       projectConfig,
       walletRegistry
     } = await this.getProjectAndWalletConfig();
-    this.options.uiConfig = deepmerge(cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
-    if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = getUserLanguage(this.options.uiConfig.defaultLanguage);
-    if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
-    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig || {});
 
     // init config
+    this.initUIConfig(projectConfig);
     super.initAccountAbstractionConfig(projectConfig);
     super.initChainsConfig(projectConfig);
     super.initCachedConnectorAndChainId();
@@ -97,6 +97,7 @@ class Web3Auth extends Web3AuthNoModal {
       connectorListener: this,
       web3authClientId: this.options.clientId,
       web3authNetwork: this.options.web3AuthNetwork,
+      authBuildEnv: this.options.authBuildEnv,
       chainNamespaces: this.getChainNamespaces(),
       walletRegistry: filteredWalletRegistry
     }), {
@@ -105,25 +106,34 @@ class Web3Auth extends Web3AuthNoModal {
       onExternalWalletLogin: this.onExternalWalletLogin,
       onModalVisibility: this.onModalVisibility
     });
-    await this.loginModal.initModal();
+    await withAbort(() => this.loginModal.initModal(), signal);
 
     // setup common JRPC provider
-    await this.setupCommonJRPCProvider();
+    await withAbort(() => this.setupCommonJRPCProvider(), signal);
 
     // initialize connectors
     this.on(CONNECTOR_EVENTS.CONNECTORS_UPDATED, ({
       connectors: newConnectors
-    }) => this.initConnectors({
-      connectors: newConnectors,
-      projectConfig,
-      disabledExternalWallets
-    }));
-    await this.loadConnectors({
-      projectConfig
+    }) => {
+      const onAbortHandler = () => {
+        var _this$connectors;
+        log.debug("init aborted");
+        if (((_this$connectors = this.connectors) === null || _this$connectors === void 0 ? void 0 : _this$connectors.length) > 0) {
+          super.cleanup();
+        }
+      };
+      withAbort(() => this.initConnectors({
+        connectors: newConnectors,
+        projectConfig,
+        disabledExternalWallets
+      }), signal, onAbortHandler);
     });
+    await withAbort(() => super.loadConnectors({
+      projectConfig
+    }), signal);
 
     // initialize plugins
-    await this.initPlugins();
+    await withAbort(() => super.initPlugins(), signal);
   }
   async connect() {
     if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
@@ -219,6 +229,24 @@ class Web3Auth extends Web3AuthNoModal {
       walletRegistry
     };
   }
+  initUIConfig(projectConfig) {
+    this.options.uiConfig = deepmerge(cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
+    if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = getUserLanguage(this.options.uiConfig.defaultLanguage);
+    if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
+    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig);
+
+    // merge login methods order from project config and user config, with user config taking precedence
+    const defaultAuthConnections = projectConfig.embeddedWalletAuth.filter(x => x.isDefault).map(x => x.authConnection);
+    const mergedAuthConnections = [...(this.options.uiConfig.loginMethodsOrder || []), ...defaultAuthConnections];
+    const loginMethodsOrder = [];
+    const authConnectionSet = new Set();
+    for (const authConnection of mergedAuthConnections) {
+      if (authConnectionSet.has(authConnection)) continue;
+      authConnectionSet.add(authConnection);
+      loginMethodsOrder.push(authConnection);
+    }
+    this.options.uiConfig.loginMethodsOrder = loginMethodsOrder;
+  }
   async initConnectors({
     connectors,
     projectConfig,
@@ -288,9 +316,7 @@ class Web3Auth extends Web3AuthNoModal {
           groupedAuthConnectionId: groupedAuthConnectionId,
           extraLoginOptions: authConnectionConfig.jwtParameters,
           isDefault: true,
-          showOnModal: true,
-          showOnDesktop: true,
-          showOnMobile: true
+          showOnModal: true
         };
       }
       embedWalletConfigMap.set(groupedAuthConnectionId || authConnectionId, authConnectionConfig);
@@ -339,9 +365,7 @@ class Web3Auth extends Web3AuthNoModal {
       // start with the default config of connector.
       const defaultConnectorConfig = {
         label: CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(capitalizeFirstLetter).join(" "),
-        showOnModal: true,
-        showOnMobile: true,
-        showOnDesktop: true
+        showOnModal: true
       };
       this.modalConfig.connectors[connectorName] = _objectSpread(_objectSpread({}, defaultConnectorConfig), ((_this$modalConfig3 = this.modalConfig) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3.connectors) === null || _this$modalConfig3 === void 0 ? void 0 : _this$modalConfig3[connectorName]) || {});
 
@@ -395,7 +419,7 @@ class Web3Auth extends Web3AuthNoModal {
     const hasExternalConnectors = connectorNames.some(connectorName => {
       var _this$getConnector, _this$modalConfig$con5;
       if (connectorName === WALLET_CONNECTORS.WALLET_CONNECT_V2) return true;
-      return ((_this$getConnector = this.getConnector(connectorName)) === null || _this$getConnector === void 0 ? void 0 : _this$getConnector.type) === CONNECTOR_CATEGORY.EXTERNAL && ((_this$modalConfig$con5 = this.modalConfig.connectors) === null || _this$modalConfig$con5 === void 0 ? void 0 : _this$modalConfig$con5[connectorName].showOnModal);
+      return ((_this$getConnector = this.getConnector(connectorName)) === null || _this$getConnector === void 0 ? void 0 : _this$getConnector.type) === CONNECTOR_CATEGORY.EXTERNAL && ((_this$modalConfig$con5 = this.modalConfig.connectors) === null || _this$modalConfig$con5 === void 0 || (_this$modalConfig$con5 = _this$modalConfig$con5[connectorName]) === null || _this$modalConfig$con5 === void 0 ? void 0 : _this$modalConfig$con5.showOnModal);
     });
     return {
       hasInAppConnectors,

package/dist/lib.esm/packages/modal/src/react/Web3AuthProvider.js

@@ -1,13 +1,17 @@
 import { createElement } from 'react';
-import { Web3AuthInnerProvider } from './context/Web3AuthInnerContext.js';
+import { WalletServicesContextProvider } from './context/WalletServicesInnerContext.js';
+import { Web3AuthInnerProvider, Web3AuthInnerContext } from './context/Web3AuthInnerContext.js';
 
 function Web3AuthProvider({
   config,
   children
 }) {
+  const pluginChild = /*#__PURE__*/createElement(WalletServicesContextProvider, {
+    context: Web3AuthInnerContext
+  }, children);
   return /*#__PURE__*/createElement(Web3AuthInnerProvider, {
     config
-  }, children);
+  }, pluginChild);
 }
 
 export { Web3AuthProvider };

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

@@ -0,0 +1,69 @@
+import { EVM_PLUGINS, CONNECTOR_STATUS, PLUGIN_EVENTS } from '@web3auth/no-modal';
+import { createContext, useContext, useState, useEffect, useMemo, createElement } from 'react';
+
+const WalletServicesContext = /*#__PURE__*/createContext(null);
+function WalletServicesContextProvider({
+  children,
+  context
+}) {
+  const web3AuthContext = useContext(context);
+  const {
+    getPlugin,
+    isInitialized,
+    isConnected
+  } = web3AuthContext;
+  const [ready, setReady] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [walletServicesPlugin, setWalletServicesPlugin] = useState(null);
+  useEffect(() => {
+    if (isInitialized) {
+      const plugin = getPlugin(EVM_PLUGINS.WALLET_SERVICES);
+      setWalletServicesPlugin(plugin);
+    }
+  }, [isInitialized, getPlugin]);
+  useEffect(() => {
+    if (isConnected) {
+      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);
+    }
+  }, [isConnected, getPlugin, walletServicesPlugin]);
+  useEffect(() => {
+    const connectedListener = () => {
+      setReady(true);
+      setConnecting(false);
+    };
+    const disconnectedListener = () => {
+      setReady(false);
+      setConnecting(false);
+    };
+    const connectingListener = () => {
+      setConnecting(true);
+    };
+    if (walletServicesPlugin) {
+      walletServicesPlugin.on(PLUGIN_EVENTS.CONNECTED, connectedListener);
+      walletServicesPlugin.on(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+      walletServicesPlugin.on(PLUGIN_EVENTS.CONNECTING, connectingListener);
+    }
+    return () => {
+      if (walletServicesPlugin) {
+        walletServicesPlugin.off(PLUGIN_EVENTS.CONNECTED, connectedListener);
+        walletServicesPlugin.off(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+        walletServicesPlugin.off(PLUGIN_EVENTS.CONNECTING, connectingListener);
+      }
+    };
+  }, [walletServicesPlugin]);
+  const value = useMemo(() => {
+    return {
+      plugin: walletServicesPlugin,
+      ready,
+      connecting
+    };
+  }, [walletServicesPlugin, ready, connecting]);
+  return /*#__PURE__*/createElement(WalletServicesContext.Provider, {
+    value
+  }, children);
+}
+
+export { WalletServicesContext, WalletServicesContextProvider };

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

@@ -1,4 +1,4 @@
-import { WalletInitializationError, WalletLoginError, CONNECTOR_EVENTS, CONNECTOR_STATUS } from '@web3auth/no-modal';
+import { WalletInitializationError, CONNECTOR_EVENTS, CONNECTOR_STATUS } from '@web3auth/no-modal';
 import { createContext, useState, useCallback, useEffect, useMemo, createElement } from 'react';
 import { Web3Auth } from '../../modalManager.js';
 
@@ -9,67 +9,20 @@ function Web3AuthInnerProvider(params) {
     config
   } = params;
   const [web3Auth, setWeb3Auth] = useState(null);
-  const [isConnecting, setIsConnecting] = useState(false);
   const [isInitializing, setIsInitializing] = useState(false);
   const [initError, setInitError] = useState(null);
-  const [connectError, setConnectError] = useState(null);
   const [isConnected, setIsConnected] = useState(false);
   const [provider, setProvider] = useState(null);
-  const [userInfo, setUserInfo] = useState(null);
-  const [isMFAEnabled, setIsMFAEnabled] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [status, setStatus] = useState(null);
+  const [isMFAEnabled, setIsMFAEnabled] = useState(false);
   const getPlugin = useCallback(name => {
     if (!web3Auth) throw WalletInitializationError.notReady();
     return web3Auth.getPlugin(name);
   }, [web3Auth]);
-  const enableMFA = useCallback(async loginParams => {
-    if (!web3Auth) throw WalletInitializationError.notReady();
-    if (!isConnected) throw WalletLoginError.notConnectedError();
-    await web3Auth.enableMFA(loginParams);
-    const localUserInfo = await web3Auth.getUserInfo();
-    setUserInfo(localUserInfo);
-    setIsMFAEnabled(localUserInfo.isMfaEnabled || false);
-  }, [web3Auth, isConnected]);
-  const manageMFA = useCallback(async loginParams => {
-    if (!web3Auth) throw WalletInitializationError.notReady();
-    if (!isConnected) throw WalletLoginError.notConnectedError();
-    await web3Auth.manageMFA(loginParams);
-  }, [web3Auth, isConnected]);
-  const logout = useCallback(async (logoutParams = {
-    cleanup: false
-  }) => {
-    if (!web3Auth) throw WalletInitializationError.notReady();
-    if (!isConnected) throw WalletLoginError.notConnectedError();
-    await web3Auth.logout(logoutParams);
-  }, [web3Auth, isConnected]);
-  const connect = useCallback(async () => {
-    if (!web3Auth) throw WalletInitializationError.notReady();
-    try {
-      setConnectError(null);
-      setIsConnecting(true);
-      const localProvider = await web3Auth.connect();
-      return localProvider;
-    } catch (error) {
-      setConnectError(error);
-      throw error;
-    } finally {
-      setIsConnecting(false);
-    }
-  }, [web3Auth]);
-  const authenticateUser = useCallback(async () => {
-    if (!web3Auth) throw WalletInitializationError.notReady();
-    return web3Auth.authenticateUser();
-  }, [web3Auth]);
-  const switchChain = useCallback(chainParams => {
-    if (!web3Auth) throw WalletInitializationError.notReady();
-    return web3Auth.switchChain(chainParams);
-  }, [web3Auth]);
   useEffect(() => {
     const resetHookState = () => {
       setProvider(null);
-      setUserInfo(null);
-      setIsMFAEnabled(false);
       setIsConnected(false);
       setStatus(null);
     };
@@ -81,11 +34,14 @@ function Web3AuthInnerProvider(params) {
     setWeb3Auth(web3AuthInstance);
   }, [config]);
   useEffect(() => {
+    const controller = new AbortController();
     async function init() {
       try {
         setInitError(null);
         setIsInitializing(true);
-        await web3Auth.initModal();
+        await web3Auth.initModal({
+          signal: controller.signal
+        });
       } catch (error) {
         setInitError(error);
       } finally {
@@ -93,40 +49,29 @@ function Web3AuthInnerProvider(params) {
       }
     }
     if (web3Auth) init();
-  }, [web3Auth, config]);
-  useEffect(() => {
-    const addState = async () => {
-      setProvider(web3Auth.provider);
-      const userState = await web3Auth.getUserInfo();
-      setUserInfo(userState);
-      setIsMFAEnabled((userState === null || userState === void 0 ? void 0 : userState.isMfaEnabled) || false);
-    };
-    const resetState = () => {
-      setProvider(null);
-      setUserInfo(null);
-      setIsMFAEnabled(false);
+    return () => {
+      controller.abort();
     };
-    if (web3Auth) {
-      if (isConnected) addState();else resetState();
-    }
-  }, [web3Auth, isConnected]);
+  }, [web3Auth, config]);
   useEffect(() => {
     const notReadyListener = () => setStatus(web3Auth.status);
     const readyListener = () => {
       setStatus(web3Auth.status);
       setIsInitialized(true);
     };
-    const connectedListener = () => {
+    const connectedListener = data => {
       setStatus(web3Auth.status);
       // we do this because of rehydration issues. status connected is fired first but web3auth sdk is not ready yet.
       if (web3Auth.status === CONNECTOR_STATUS.CONNECTED) {
         setIsInitialized(true);
         setIsConnected(true);
+        setProvider(data.provider);
       }
     };
     const disconnectedListener = () => {
       setStatus(web3Auth.status);
       setIsConnected(false);
+      setProvider(null);
     };
     const connectingListener = () => {
       setStatus(web3Auth.status);
@@ -134,6 +79,9 @@ function Web3AuthInnerProvider(params) {
     const errorListener = () => {
       setStatus(CONNECTOR_STATUS.ERRORED);
     };
+    const mfaEnabledListener = isMFAEnabled => {
+      if (typeof isMFAEnabled === "boolean") setIsMFAEnabled(isMFAEnabled);
+    };
     if (web3Auth) {
       // web3Auth is initialized here.
       setStatus(web3Auth.status);
@@ -143,6 +91,7 @@ function Web3AuthInnerProvider(params) {
       web3Auth.on(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
       web3Auth.on(CONNECTOR_EVENTS.CONNECTING, connectingListener);
       web3Auth.on(CONNECTOR_EVENTS.ERRORED, errorListener);
+      web3Auth.on(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
     }
     return () => {
       if (web3Auth) {
@@ -152,6 +101,8 @@ function Web3AuthInnerProvider(params) {
         web3Auth.off(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
         web3Auth.off(CONNECTOR_EVENTS.CONNECTING, connectingListener);
         web3Auth.off(CONNECTOR_EVENTS.ERRORED, errorListener);
+        web3Auth.off(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
+        web3Auth.cleanup();
       }
     };
   }, [web3Auth]);
@@ -161,22 +112,14 @@ function Web3AuthInnerProvider(params) {
       isConnected,
       isInitialized,
       provider,
-      userInfo,
-      isMFAEnabled,
       status,
-      connect,
-      enableMFA,
-      manageMFA,
-      logout,
-      authenticateUser,
-      switchChain,
-      getPlugin,
       isInitializing,
-      isConnecting,
       initError,
-      connectError
+      isMFAEnabled,
+      getPlugin,
+      setIsMFAEnabled
     };
-  }, [web3Auth, isConnected, isInitialized, provider, userInfo, isMFAEnabled, status, getPlugin, connect, enableMFA, manageMFA, logout, authenticateUser, switchChain, isInitializing, isConnecting, initError, connectError]);
+  }, [web3Auth, isConnected, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, status, getPlugin, isInitializing, initError]);
   return /*#__PURE__*/createElement(Web3AuthInnerContext.Provider, {
     value
   }, children);

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

@@ -0,0 +1,32 @@
+import { WalletServicesPluginError } from '@web3auth/no-modal';
+import { useState, useCallback } from 'react';
+import { useWalletServicesPlugin } from './useWalletServicesPlugin.js';
+
+const useCheckout = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const showCheckout = useCallback(async showCheckoutParams => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!plugin) throw WalletServicesPluginError.notInitialized();
+      if (!ready) throw WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.showCheckout(showCheckoutParams);
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [plugin, ready]);
+  return {
+    loading,
+    error,
+    showCheckout
+  };
+};
+
+export { useCheckout };

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

@@ -0,0 +1,28 @@
+import { useState, useCallback } from 'react';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useEnableMFA = () => {
+  const {
+    web3Auth
+  } = useWeb3AuthInner();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const enableMFA = useCallback(async params => {
+    setLoading(true);
+    setError(null);
+    try {
+      await web3Auth.enableMFA(params);
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+  return {
+    loading,
+    error,
+    enableMFA
+  };
+};
+
+export { useEnableMFA };

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

@@ -0,0 +1,40 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useIdentityToken = () => {
+  const {
+    web3Auth,
+    isConnected
+  } = useWeb3AuthInner();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [token, setToken] = useState(null);
+  const authenticateUser = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const userAuthInfo = await web3Auth.authenticateUser();
+      if (userAuthInfo !== null && userAuthInfo !== void 0 && userAuthInfo.idToken) {
+        setToken(userAuthInfo.idToken);
+      }
+      return userAuthInfo === null || userAuthInfo === void 0 ? void 0 : userAuthInfo.idToken;
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+  useEffect(() => {
+    if (!isConnected && token) {
+      setToken(null);
+    }
+  }, [isConnected, token]);
+  return {
+    loading,
+    error,
+    token,
+    authenticateUser
+  };
+};
+
+export { useIdentityToken };

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

@@ -0,0 +1,28 @@
+import { useState, useCallback } from 'react';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useManageMFA = () => {
+  const {
+    web3Auth
+  } = useWeb3AuthInner();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const manageMFA = useCallback(async params => {
+    setLoading(true);
+    setError(null);
+    try {
+      await web3Auth.manageMFA(params);
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+  return {
+    loading,
+    error,
+    manageMFA
+  };
+};
+
+export { useManageMFA };

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

@@ -0,0 +1,32 @@
+import { WalletServicesPluginError } from '@web3auth/no-modal';
+import { useState, useCallback } from 'react';
+import { useWalletServicesPlugin } from './useWalletServicesPlugin.js';
+
+const useSwap = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const showSwap = useCallback(async showSwapParams => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!plugin) throw WalletServicesPluginError.notInitialized();
+      if (!ready) throw WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.showSwap(showSwapParams);
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [plugin, ready]);
+  return {
+    loading,
+    error,
+    showSwap
+  };
+};
+
+export { useSwap };

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

@@ -0,0 +1,30 @@
+import { useState, useCallback } from 'react';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useSwitchChain = () => {
+  const {
+    web3Auth
+  } = useWeb3AuthInner();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const switchChain = useCallback(async chainId => {
+    setLoading(true);
+    setError(null);
+    try {
+      await web3Auth.switchChain({
+        chainId
+      });
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+  return {
+    loading,
+    error,
+    switchChain
+  };
+};
+
+export { useSwitchChain };

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

@@ -0,0 +1,32 @@
+import { WalletServicesPluginError } from '@web3auth/no-modal';
+import { useState, useCallback } from 'react';
+import { useWalletServicesPlugin } from './useWalletServicesPlugin.js';
+
+const useWalletConnectScanner = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const showWalletConnectScanner = useCallback(async showWalletConnectScannerParams => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!plugin) throw WalletServicesPluginError.notInitialized();
+      if (!ready) throw WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.showWalletConnectScanner(showWalletConnectScannerParams);
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [plugin, ready]);
+  return {
+    loading,
+    error,
+    showWalletConnectScanner
+  };
+};
+
+export { useWalletConnectScanner };

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

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { WalletServicesContext } from '../context/WalletServicesInnerContext.js';
+
+const useWalletServicesPlugin = () => {
+  const context = useContext(WalletServicesContext);
+  if (!context) throw new Error("WalletServicesContext not found");
+  return context;
+};
+
+export { useWalletServicesPlugin };