@web3auth/no-modal 10.0.0-beta.1 → 10.0.0-beta.10

package/dist/lib.esm/react/context/WalletServicesInnerContext.js

@@ -0,0 +1,70 @@
+import { createContext, useContext, useState, useEffect, useMemo, createElement } from 'react';
+import { EVM_PLUGINS, PLUGIN_EVENTS } from '../../base/plugin/IPlugin.js';
+import { CONNECTOR_STATUS } from '../../base/connector/constants.js';
+
+const WalletServicesContext = 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 createElement(WalletServicesContext.Provider, {
+    value
+  }, children);
+}
+
+export { WalletServicesContext, WalletServicesContextProvider };

package/dist/lib.esm/react/context/Web3AuthInnerContext.js

@@ -0,0 +1,129 @@
+import { createContext, useMemo, useState, useCallback, useEffect, createElement } from 'react';
+import { Web3AuthNoModal } from '../../noModal.js';
+import { WalletInitializationError } from '../../base/errors/index.js';
+import { CONNECTOR_EVENTS, CONNECTOR_STATUS } from '../../base/connector/constants.js';
+
+const Web3AuthInnerContext = createContext(null);
+function Web3AuthInnerProvider(params) {
+  const {
+    children,
+    config,
+    initialState
+  } = params;
+  const {
+    web3AuthOptions
+  } = config;
+  const web3Auth = useMemo(() => {
+    setProvider(null);
+    return new Web3AuthNoModal(web3AuthOptions, initialState);
+  }, [web3AuthOptions, initialState]);
+  const [isInitializing, setIsInitializing] = useState(false);
+  const [initError, setInitError] = useState(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [provider, setProvider] = useState(null);
+  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]);
+  useEffect(() => {
+    const controller = new AbortController();
+    async function init() {
+      try {
+        setInitError(null);
+        setIsInitializing(true);
+        await web3Auth.init({
+          signal: controller.signal
+        });
+      } catch (error) {
+        setInitError(error);
+      } finally {
+        setIsInitializing(false);
+      }
+    }
+    if (web3Auth) init();
+    return () => {
+      controller.abort();
+    };
+  }, [web3Auth]);
+  useEffect(() => {
+    const notReadyListener = () => setStatus(CONNECTOR_STATUS.NOT_READY);
+    const readyListener = () => {
+      setStatus(web3Auth.status);
+      setIsInitialized(true);
+    };
+    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);
+    };
+    const errorListener = () => {
+      setStatus(web3Auth.status);
+    };
+    const rehydrationErrorListener = () => {
+      setStatus(web3Auth.status);
+      setIsConnected(false);
+      setProvider(null);
+    };
+    const mfaEnabledListener = isMFAEnabled => {
+      if (typeof isMFAEnabled === "boolean") setIsMFAEnabled(isMFAEnabled);
+    };
+    if (web3Auth) {
+      // web3Auth is initialized here.
+      setStatus(web3Auth.status);
+      web3Auth.on(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
+      web3Auth.on(CONNECTOR_EVENTS.READY, readyListener);
+      web3Auth.on(CONNECTOR_EVENTS.CONNECTED, connectedListener);
+      web3Auth.on(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
+      web3Auth.on(CONNECTOR_EVENTS.CONNECTING, connectingListener);
+      web3Auth.on(CONNECTOR_EVENTS.ERRORED, errorListener);
+      web3Auth.on(CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
+      web3Auth.on(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
+    }
+    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]);
+  const value = useMemo(() => {
+    return {
+      web3Auth,
+      isConnected,
+      isInitialized,
+      provider,
+      status,
+      isInitializing,
+      initError,
+      isMFAEnabled,
+      getPlugin,
+      setIsMFAEnabled
+    };
+  }, [web3Auth, isConnected, isInitialized, provider, status, getPlugin, isInitializing, initError, isMFAEnabled, setIsMFAEnabled]);
+  return createElement(Web3AuthInnerContext.Provider, {
+    value
+  }, children);
+}
+
+export { Web3AuthInnerContext, Web3AuthInnerProvider };

package/dist/lib.esm/react/hooks/useCheckout.js

@@ -0,0 +1,32 @@
+import { useState, useCallback } from 'react';
+import { useWalletServicesPlugin } from './useWalletServicesPlugin.js';
+import { WalletServicesPluginError } from '../../base/plugin/errors.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/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/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/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/react/hooks/useSwap.js

@@ -0,0 +1,32 @@
+import { useState, useCallback } from 'react';
+import { useWalletServicesPlugin } from './useWalletServicesPlugin.js';
+import { WalletServicesPluginError } from '../../base/plugin/errors.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/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/react/hooks/useWalletConnectScanner.js

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

package/dist/lib.esm/react/hooks/useWalletServicesPlugin.js

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+import { WalletServicesContext } from '../context/WalletServicesInnerContext.js';
+
+const useWalletServicesPlugin = () => {
+  const {
+    ready,
+    plugin,
+    connecting
+  } = useContext(WalletServicesContext);
+  return {
+    ready,
+    plugin,
+    connecting
+  };
+};
+
+export { useWalletServicesPlugin };

package/dist/lib.esm/react/hooks/useWalletUI.js

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

package/dist/lib.esm/react/hooks/useWeb3Auth.js

@@ -0,0 +1,26 @@
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useWeb3Auth = () => {
+  const {
+    initError,
+    isConnected,
+    isInitialized,
+    isInitializing,
+    provider,
+    status,
+    web3Auth,
+    getPlugin
+  } = useWeb3AuthInner();
+  return {
+    initError,
+    isConnected,
+    isInitialized,
+    isInitializing,
+    provider,
+    status,
+    web3Auth,
+    getPlugin
+  };
+};
+
+export { useWeb3Auth };

package/dist/lib.esm/react/hooks/useWeb3AuthConnect.js

@@ -0,0 +1,46 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useWeb3AuthConnect = () => {
+  const context = useWeb3AuthInner();
+  const {
+    web3Auth,
+    isConnected
+  } = context;
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [connectorName, setConnectorName] = useState(null);
+  useEffect(() => {
+    if (!web3Auth) return;
+    if (!isConnected && connectorName) {
+      setConnectorName(null);
+    }
+    if (isConnected && !connectorName) {
+      setConnectorName(web3Auth.connectedConnectorName);
+    }
+  }, [isConnected, connectorName, web3Auth]);
+  const connect = useCallback(async (connector, params) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const provider = await web3Auth.connectTo(connector, params);
+      if (provider) {
+        setConnectorName(web3Auth.connectedConnectorName);
+      }
+      return provider;
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+  return {
+    isConnected,
+    loading,
+    error,
+    connectorName,
+    connect
+  };
+};
+
+export { useWeb3AuthConnect };

package/dist/lib.esm/react/hooks/useWeb3AuthDisconnect.js

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

package/dist/lib.esm/react/hooks/useWeb3AuthInner.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { Web3AuthInnerContext } from '../context/Web3AuthInnerContext.js';
+import { WalletInitializationError } from '../../base/errors/index.js';
+
+const useWeb3AuthInner = () => {
+  const context = useContext(Web3AuthInnerContext);
+  if (!context) {
+    throw WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in `Web3AuthContextProvider`.");
+  }
+  return context;
+};
+
+export { useWeb3AuthInner };

package/dist/lib.esm/react/hooks/useWeb3AuthUser.js

@@ -0,0 +1,48 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useWeb3AuthUser = () => {
+  const {
+    web3Auth,
+    isConnected,
+    isMFAEnabled,
+    setIsMFAEnabled
+  } = useWeb3AuthInner();
+  const [userInfo, setUserInfo] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const getUserInfo = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const userInfo = await web3Auth.getUserInfo();
+      setUserInfo(userInfo);
+      return userInfo;
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+  useEffect(() => {
+    const saveUserInfo = async () => {
+      const userInfo = await getUserInfo();
+      setUserInfo(userInfo);
+      setIsMFAEnabled((userInfo === null || userInfo === void 0 ? void 0 : userInfo.isMfaEnabled) || false);
+    };
+    if (isConnected && !userInfo) saveUserInfo();
+    if (!isConnected && userInfo) {
+      setUserInfo(null);
+      setIsMFAEnabled(false);
+    }
+  }, [isConnected, userInfo, getUserInfo, setIsMFAEnabled]);
+  return {
+    loading,
+    error,
+    userInfo,
+    isMFAEnabled,
+    getUserInfo
+  };
+};
+
+export { useWeb3AuthUser };

package/dist/lib.esm/react/index.js

@@ -1,5 +1,14 @@
-export { useWeb3Auth } from './no-modal/hooks/useWeb3Auth.js';
-export { Web3AuthProvider } from './no-modal/Web3AuthProvider.js';
-export { useWalletServicesPlugin } from './wallet-services-plugin/hooks/useWalletServicesPlugin.js';
-export { WalletServicesContext, WalletServicesContextProvider } from './wallet-services-plugin/WalletServicesContext.js';
-export { WalletServicesProvider } from './wallet-services-plugin/WalletServicesProvider.js';
+export { Web3AuthProvider } from './Web3AuthProvider.js';
+export { useCheckout } from './hooks/useCheckout.js';
+export { useEnableMFA } from './hooks/useEnableMFA.js';
+export { useIdentityToken } from './hooks/useIdentityToken.js';
+export { useManageMFA } from './hooks/useManageMFA.js';
+export { useSwap } from './hooks/useSwap.js';
+export { useSwitchChain } from './hooks/useSwitchChain.js';
+export { useWalletConnectScanner } from './hooks/useWalletConnectScanner.js';
+export { useWalletServicesPlugin } from './hooks/useWalletServicesPlugin.js';
+export { useWalletUI } from './hooks/useWalletUI.js';
+export { useWeb3Auth } from './hooks/useWeb3Auth.js';
+export { useWeb3AuthConnect } from './hooks/useWeb3AuthConnect.js';
+export { useWeb3AuthDisconnect } from './hooks/useWeb3AuthDisconnect.js';
+export { useWeb3AuthUser } from './hooks/useWeb3AuthUser.js';