@web3auth/modal 10.0.0-beta.3 → 10.0.0-beta.5

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

@@ -2,6 +2,7 @@
 
 var noModal = require('@web3auth/no-modal');
 
+const version = "10.0.0-beta.5";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {
@@ -14,4 +15,5 @@ const defaultConnectorsModalConfig = {
 const walletRegistryUrl = "https://assets.web3auth.io/v1/wallet-registry.json";
 
 exports.defaultConnectorsModalConfig = defaultConnectorsModalConfig;
+exports.version = version;
 exports.walletRegistryUrl = walletRegistryUrl;

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

@@ -7,6 +7,7 @@ var noModal = require('@web3auth/no-modal');
 
 
 exports.defaultConnectorsModalConfig = config.defaultConnectorsModalConfig;
+exports.version = config.version;
 exports.walletRegistryUrl = config.walletRegistryUrl;
 exports.Web3Auth = modalManager.Web3Auth;
 Object.keys(noModal).forEach(function (k) {

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

@@ -26,7 +26,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     });
     _defineProperty(this, "onSocialLogin", async params => {
       try {
-        await this.connectTo(params.connector, params.loginParams);
+        await this.connectTo(noModal.WALLET_CONNECTORS.AUTH, params.loginParams);
       } catch (error) {
         noModal.log.error(`Error while connecting to connector: ${params.connector}`, error);
       }
@@ -190,32 +190,30 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     };
   }
   async getProjectAndWalletConfig() {
-    var _this$modalConfig;
-    // get project config
-    let projectConfig;
-    try {
-      var _this$options$account;
-      projectConfig = await noModal.fetchProjectConfig({
-        clientId: this.options.clientId,
-        web3AuthNetwork: this.options.web3AuthNetwork,
-        aaProvider: (_this$options$account = this.options.accountAbstractionConfig) === null || _this$options$account === void 0 ? void 0 : _this$options$account.smartAccountType,
-        authBuildEnv: this.options.authBuildEnv
-      });
-    } catch (e) {
-      noModal.log.error("Failed to fetch project configurations", e);
-      throw noModal.WalletInitializationError.notReady("failed to fetch project configurations", e);
+    var _this$options$account, _this$modalConfig;
+    const [projectConfigResult, walletRegistryResult] = await Promise.allSettled([noModal.fetchProjectConfig({
+      clientId: this.options.clientId,
+      web3AuthNetwork: this.options.web3AuthNetwork,
+      aaProvider: (_this$options$account = this.options.accountAbstractionConfig) === null || _this$options$account === void 0 ? void 0 : _this$options$account.smartAccountType,
+      authBuildEnv: this.options.authBuildEnv
+    }), noModal.fetchWalletRegistry(config.walletRegistryUrl)]);
+    // handle project config result
+    if (projectConfigResult.status === "rejected") {
+      noModal.log.error("Failed to fetch project configurations", projectConfigResult.reason);
+      throw noModal.WalletInitializationError.notReady("failed to fetch project configurations", projectConfigResult.reason);
     }
-    // get wallet registry
+    const projectConfig = projectConfigResult.value;
+    // handle wallet registry result
     let walletRegistry = {
       others: {},
       default: {}
     };
     const isExternalWalletEnabled = Boolean(projectConfig.externalWalletAuth);
     if (isExternalWalletEnabled && !((_this$modalConfig = this.modalConfig) !== null && _this$modalConfig !== void 0 && _this$modalConfig.hideWalletDiscovery)) {
-      try {
-        walletRegistry = await noModal.fetchWalletRegistry(config.walletRegistryUrl);
-      } catch (e) {
-        noModal.log.error("Failed to fetch wallet registry", e);
+      if (walletRegistryResult.status === "fulfilled") {
+        walletRegistry = walletRegistryResult.value;
+      } else {
+        noModal.log.error("Failed to fetch wallet registry", walletRegistryResult.reason);
       }
     }
     return {
@@ -401,7 +399,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     const hasExternalConnectors = connectorNames.some(connectorName => {
       var _this$getConnector, _this$modalConfig$con5;
       if (connectorName === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2) return true;
-      return ((_this$getConnector = this.getConnector(connectorName)) === null || _this$getConnector === void 0 ? void 0 : _this$getConnector.type) === noModal.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) === noModal.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.cjs/packages/modal/src/react/Web3AuthProvider.js

@@ -1,15 +1,19 @@
 'use strict';
 
 var react = require('react');
+var WalletServicesInnerContext = require('./context/WalletServicesInnerContext.js');
 var Web3AuthInnerContext = require('./context/Web3AuthInnerContext.js');
 
 function Web3AuthProvider({
   config,
   children
 }) {
+  const pluginChild = /*#__PURE__*/react.createElement(WalletServicesInnerContext.WalletServicesContextProvider, {
+    context: Web3AuthInnerContext.Web3AuthInnerContext
+  }, children);
   return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Web3AuthInnerProvider, {
     config
-  }, children);
+  }, pluginChild);
 }
 
 exports.Web3AuthProvider = Web3AuthProvider;

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

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

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

@@ -11,67 +11,20 @@ function Web3AuthInnerProvider(params) {
     config
   } = params;
   const [web3Auth, setWeb3Auth] = react.useState(null);
-  const [isConnecting, setIsConnecting] = react.useState(false);
   const [isInitializing, setIsInitializing] = react.useState(false);
   const [initError, setInitError] = react.useState(null);
-  const [connectError, setConnectError] = react.useState(null);
   const [isConnected, setIsConnected] = react.useState(false);
   const [provider, setProvider] = react.useState(null);
-  const [userInfo, setUserInfo] = react.useState(null);
-  const [isMFAEnabled, setIsMFAEnabled] = react.useState(false);
   const [isInitialized, setIsInitialized] = react.useState(false);
   const [status, setStatus] = react.useState(null);
+  const [isMFAEnabled, setIsMFAEnabled] = react.useState(false);
   const getPlugin = react.useCallback(name => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     return web3Auth.getPlugin(name);
   }, [web3Auth]);
-  const enableMFA = react.useCallback(async loginParams => {
-    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
-    if (!isConnected) throw noModal.WalletLoginError.notConnectedError();
-    await web3Auth.enableMFA(loginParams);
-    const localUserInfo = await web3Auth.getUserInfo();
-    setUserInfo(localUserInfo);
-    setIsMFAEnabled(localUserInfo.isMfaEnabled || false);
-  }, [web3Auth, isConnected]);
-  const manageMFA = react.useCallback(async loginParams => {
-    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
-    if (!isConnected) throw noModal.WalletLoginError.notConnectedError();
-    await web3Auth.manageMFA(loginParams);
-  }, [web3Auth, isConnected]);
-  const logout = react.useCallback(async (logoutParams = {
-    cleanup: false
-  }) => {
-    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
-    if (!isConnected) throw noModal.WalletLoginError.notConnectedError();
-    await web3Auth.logout(logoutParams);
-  }, [web3Auth, isConnected]);
-  const connect = react.useCallback(async () => {
-    if (!web3Auth) throw noModal.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 = react.useCallback(async () => {
-    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
-    return web3Auth.authenticateUser();
-  }, [web3Auth]);
-  const switchChain = react.useCallback(chainParams => {
-    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
-    return web3Auth.switchChain(chainParams);
-  }, [web3Auth]);
   react.useEffect(() => {
     const resetHookState = () => {
       setProvider(null);
-      setUserInfo(null);
-      setIsMFAEnabled(false);
       setIsConnected(false);
       setStatus(null);
     };
@@ -102,39 +55,25 @@ function Web3AuthInnerProvider(params) {
       controller.abort();
     };
   }, [web3Auth, config]);
-  react.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);
-    };
-    if (web3Auth) {
-      if (isConnected) addState();else resetState();
-    }
-  }, [web3Auth, isConnected]);
   react.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 === noModal.CONNECTOR_STATUS.CONNECTED) {
         setIsInitialized(true);
         setIsConnected(true);
+        setProvider(data.provider);
       }
     };
     const disconnectedListener = () => {
       setStatus(web3Auth.status);
       setIsConnected(false);
+      setProvider(null);
     };
     const connectingListener = () => {
       setStatus(web3Auth.status);
@@ -142,6 +81,9 @@ function Web3AuthInnerProvider(params) {
     const errorListener = () => {
       setStatus(noModal.CONNECTOR_STATUS.ERRORED);
     };
+    const mfaEnabledListener = isMFAEnabled => {
+      if (typeof isMFAEnabled === "boolean") setIsMFAEnabled(isMFAEnabled);
+    };
     if (web3Auth) {
       // web3Auth is initialized here.
       setStatus(web3Auth.status);
@@ -151,6 +93,7 @@ function Web3AuthInnerProvider(params) {
       web3Auth.on(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
       web3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
       web3Auth.on(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
+      web3Auth.on(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
     }
     return () => {
       if (web3Auth) {
@@ -160,6 +103,7 @@ function Web3AuthInnerProvider(params) {
         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.MFA_ENABLED, mfaEnabledListener);
         web3Auth.cleanup();
       }
     };
@@ -170,22 +114,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__*/react.createElement(Web3AuthInnerContext.Provider, {
     value
   }, children);

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

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

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

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

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

@@ -0,0 +1,42 @@
+'use strict';
+
+var react = require('react');
+var useWeb3AuthInner = require('./useWeb3AuthInner.js');
+
+const useIdentityToken = () => {
+  const {
+    web3Auth,
+    isConnected
+  } = useWeb3AuthInner.useWeb3AuthInner();
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [token, setToken] = react.useState(null);
+  const authenticateUser = react.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]);
+  react.useEffect(() => {
+    if (!isConnected && token) {
+      setToken(null);
+    }
+  }, [isConnected, token]);
+  return {
+    loading,
+    error,
+    token,
+    authenticateUser
+  };
+};
+
+exports.useIdentityToken = useIdentityToken;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var react = require('react');
+var WalletServicesInnerContext = require('../context/WalletServicesInnerContext.js');
+
+const useWalletServicesPlugin = () => {
+  const context = react.useContext(WalletServicesInnerContext.WalletServicesContext);
+  if (!context) throw new Error("WalletServicesContext not found");
+  return context;
+};
+
+exports.useWalletServicesPlugin = useWalletServicesPlugin;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var useWalletServicesPlugin = require('./useWalletServicesPlugin.js');
+
+const useWalletUI = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin.useWalletServicesPlugin();
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const showWalletUI = react.useCallback(async showWalletUiParams => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!plugin) throw noModal.WalletServicesPluginError.notInitialized();
+      if (!ready) throw noModal.WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.showWalletUi(showWalletUiParams);
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [plugin, ready]);
+  return {
+    loading,
+    error,
+    showWalletUI
+  };
+};
+
+exports.useWalletUI = useWalletUI;

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

@@ -1,15 +1,28 @@
 'use strict';
 
-var noModal = require('@web3auth/no-modal');
-var react = require('react');
-var Web3AuthInnerContext = require('../context/Web3AuthInnerContext.js');
+var useWeb3AuthInner = require('./useWeb3AuthInner.js');
 
 const useWeb3Auth = () => {
-  const context = react.useContext(Web3AuthInnerContext.Web3AuthInnerContext);
-  if (!context) {
-    throw noModal.WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in `Web3AuthContextProvider`.");
-  }
-  return context;
+  const {
+    initError,
+    isConnected,
+    isInitialized,
+    isInitializing,
+    provider,
+    status,
+    web3Auth,
+    getPlugin
+  } = useWeb3AuthInner.useWeb3AuthInner();
+  return {
+    initError,
+    isConnected,
+    isInitialized,
+    isInitializing,
+    provider,
+    status,
+    web3Auth,
+    getPlugin
+  };
 };
 
 exports.useWeb3Auth = useWeb3Auth;