@web3auth/modal 10.0.0-beta.1 → 10.0.0-beta.11

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

@@ -1,6 +1,7 @@
 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 } from '@web3auth/no-modal';
+import { serializeError } from '@web3auth/auth';
+import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, LOGIN_MODE, 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';
@@ -9,8 +10,8 @@ import { LoginModal } from './ui/loginModal.js';
 import { getUserLanguage } from './ui/utils.js';
 
 class Web3Auth extends Web3AuthNoModal {
-  constructor(options) {
-    super(options);
+  constructor(options, initialState) {
+    super(options, initialState);
     _defineProperty(this, "loginModal", void 0);
     _defineProperty(this, "options", void 0);
     _defineProperty(this, "modalConfig", cloneDeep(defaultConnectorsModalConfig));
@@ -24,14 +25,14 @@ 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, LOGIN_MODE.MODAL);
       } catch (error) {
         log.error(`Error while connecting to connector: ${params.connector}`, error);
       }
     });
     _defineProperty(this, "onExternalWalletLogin", async params => {
       try {
-        await this.connectTo(params.connector, params.loginParams);
+        await this.connectTo(params.connector, params.loginParams, LOGIN_MODE.MODAL);
       } catch (error) {
         log.error(`Error while connecting to connector: ${params.connector}`, error);
       }
@@ -39,6 +40,8 @@ class Web3Auth extends Web3AuthNoModal {
     _defineProperty(this, "onModalVisibility", async visibility => {
       log.debug("is login modal visible", visibility);
       this.emit(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
+
+      // handle WC session refresh
       const wcConnector = this.getConnector(WALLET_CONNECTORS.WALLET_CONNECT_V2);
       if (wcConnector) {
         const walletConnectStatus = wcConnector === null || wcConnector === void 0 ? void 0 : wcConnector.status;
@@ -61,26 +64,53 @@ class Web3Auth extends Web3AuthNoModal {
           wcConnector.status = CONNECTOR_STATUS.READY;
         }
       }
+
+      // handle MM session refresh if MM is not injected
+      const metamaskConnector = this.getConnector(WALLET_CONNECTORS.METAMASK);
+      if (metamaskConnector && !metamaskConnector.isInjected) {
+        const status = metamaskConnector === null || metamaskConnector === void 0 ? void 0 : metamaskConnector.status;
+        log.debug("trying refreshing MM session", visibility, status);
+        if (visibility && (status === CONNECTOR_STATUS.READY || status === CONNECTOR_STATUS.CONNECTING)) {
+          log.debug("refreshing MM session");
+
+          // refreshing session for MM whenever modal is opened.
+          try {
+            const initialChain = this.getInitialChainIdForConnector(metamaskConnector);
+            metamaskConnector.connect({
+              chainId: initialChain.chainId
+            });
+          } catch (error) {
+            log.error(`Error while connecting to MM`, error);
+          }
+        }
+        if (!visibility && this.status === CONNECTOR_STATUS.CONNECTED && (status === CONNECTOR_STATUS.READY || status === CONNECTOR_STATUS.CONNECTING)) {
+          log.debug("this stops MM connector from trying to reconnect once proposal expires");
+          metamaskConnector.status = CONNECTOR_STATUS.READY;
+        }
+      }
+    });
+    _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)) || [])];
     });
     this.options = _objectSpread({}, options);
     if (!this.options.uiConfig) this.options.uiConfig = {};
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
     log.info("modalConfig", this.modalConfig);
   }
-  async initModal() {
-    var _this$coreOptions$cha;
+  async init(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();
@@ -94,7 +124,8 @@ class Web3Auth extends Web3AuthNoModal {
       connectorListener: this,
       web3authClientId: this.options.clientId,
       web3authNetwork: this.options.web3AuthNetwork,
-      chainNamespaces: [...new Set(((_this$coreOptions$cha = this.coreOptions.chains) === null || _this$coreOptions$cha === void 0 ? void 0 : _this$coreOptions$cha.map(x => x.chainNamespace)) || [])],
+      authBuildEnv: this.options.authBuildEnv,
+      chainNamespaces: this.getChainNamespaces(),
       walletRegistry: filteredWalletRegistry
     }), {
       onInitExternalWallets: this.onInitExternalWallets,
@@ -102,25 +133,35 @@ 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,
+      modalMode: true
+    }), signal);
 
     // initialize plugins
-    await this.initPlugins();
+    await withAbort(() => super.initPlugins(), signal);
   }
   async connect() {
     if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
@@ -183,32 +224,33 @@ class Web3Auth extends Web3AuthNoModal {
     };
   }
   async getProjectAndWalletConfig() {
-    var _this$modalConfig;
-    // get project config
-    let projectConfig;
-    try {
-      var _this$options$account;
-      projectConfig = await 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) {
-      log.error("Failed to fetch project configurations", e);
-      throw WalletInitializationError.notReady("failed to fetch project configurations", e);
+    var _this$options$account, _this$modalConfig;
+    const [projectConfigResult, walletRegistryResult] = await Promise.allSettled([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
+    }), fetchWalletRegistry(walletRegistryUrl)]);
+
+    // handle project config result
+    if (projectConfigResult.status === "rejected") {
+      const error = await serializeError(projectConfigResult.reason);
+      log.error("Failed to fetch project configurations", error);
+      throw WalletInitializationError.notReady("failed to fetch project configurations", error);
     }
-    // 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 fetchWalletRegistry(walletRegistryUrl);
-      } catch (e) {
-        log.error("Failed to fetch wallet registry", e);
+      if (walletRegistryResult.status === "fulfilled") {
+        walletRegistry = walletRegistryResult.value;
+      } else {
+        log.error("Failed to fetch wallet registry", walletRegistryResult.reason);
       }
     }
     return {
@@ -216,6 +258,26 @@ 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, {
+      arrayMerge: (_, sourceArray) => sourceArray
+    });
+
+    // 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,
@@ -285,9 +347,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);
@@ -336,9 +396,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]) || {});
 
@@ -392,7 +450,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,
@@ -407,7 +465,7 @@ class Web3Auth extends Web3AuthNoModal {
         if (connector.status !== CONNECTOR_STATUS.NOT_READY) return;
 
         // only initialize a external connectors here if it is a cached connector.
-        if (this.cachedConnector !== connectorName && connectorName !== WALLET_CONNECTORS.METAMASK && connector.type === CONNECTOR_CATEGORY.EXTERNAL) return;
+        if (this.cachedConnector !== connectorName && connector.type === CONNECTOR_CATEGORY.EXTERNAL) return;
 
         // in-app wallets or cached wallet (being connected or already connected) are initialized first.
         // if connector is configured then only initialize in app or cached connector.
@@ -437,13 +495,24 @@ class Web3Auth extends Web3AuthNoModal {
   }
   async initExternalConnectors(externalConnectors, options) {
     const connectorsConfig = {};
+    const connectorChainNamespaceMap = {};
+
     // we do it like this because we don't want one slow connector to delay the load of the entire external wallet section.
     externalConnectors.forEach(async connector => {
       const connectorName = connector.name;
       log.debug("init external wallet", this.cachedConnector, connectorName, connector.status);
-      if (connector.status === CONNECTOR_STATUS.NOT_READY) {
-        // we are not initializing cached connector here as it is already being initialized in initModal before.
-        if (this.cachedConnector === connectorName) return;
+
+      // a wallet can support multiple chain namespaces e.g. Phantom has EvmInjected connector and WalletStandard connector.
+      if (!connectorChainNamespaceMap[connectorName]) connectorChainNamespaceMap[connectorName] = new Set();
+      if (connector.connectorNamespace === CONNECTOR_NAMESPACES.MULTICHAIN) {
+        this.getChainNamespaces().forEach(x => connectorChainNamespaceMap[connectorName].add(x));
+      } else {
+        connectorChainNamespaceMap[connectorName].add(connector.connectorNamespace);
+      }
+
+      // initialize connectors
+      // skip initializing cached connector here as it is already being initialized in initModal before.
+      if (connector.status === CONNECTOR_STATUS.NOT_READY && this.cachedConnector !== connectorName) {
         try {
           this.subscribeToConnectorEvents(connector);
           const initialChain = this.getInitialChainIdForConnector(connector);
@@ -451,33 +520,24 @@ class Web3Auth extends Web3AuthNoModal {
             autoConnect: this.cachedConnector === connectorName,
             chainId: initialChain.chainId
           });
-          const connectorModalConfig = this.modalConfig.connectors[connectorName];
-          connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
-            isInjected: connector.isInjected,
-            icon: connector.icon
-          });
-          this.loginModal.addWalletLogins(connectorsConfig, {
-            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
-            externalWalletsVisibility: !!options.externalWalletsVisibility,
-            externalWalletsInitialized: !!options.externalWalletsInitialized
-          });
         } catch (error) {
           log.error(error, "error while initializing connector", connectorName);
         }
-      } else {
-        if (connector.status === CONNECTOR_STATUS.READY || connector.status === CONNECTOR_STATUS.CONNECTING) {
-          // we use connecting status for wallet connect
-          const connectorModalConfig = this.modalConfig.connectors[connectorName];
-          connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
-            isInjected: connector.isInjected,
-            icon: connector.icon
-          });
-          this.loginModal.addWalletLogins(connectorsConfig, {
-            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
-            externalWalletsVisibility: !!options.externalWalletsVisibility,
-            externalWalletsInitialized: !!options.externalWalletsInitialized
-          });
-        }
+      }
+
+      // update connector config
+      if ([CONNECTOR_STATUS.NOT_READY, CONNECTOR_STATUS.READY, CONNECTOR_STATUS.CONNECTING].includes(connector.status)) {
+        const connectorModalConfig = this.modalConfig.connectors[connectorName];
+        connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
+          isInjected: connector.isInjected,
+          icon: connector.icon,
+          chainNamespaces: Array.from(connectorChainNamespaceMap[connectorName])
+        });
+        this.loginModal.addWalletLogins(connectorsConfig, {
+          showExternalWalletsOnly: !!options.showExternalWalletsOnly,
+          externalWalletsVisibility: !!options.externalWalletsVisibility,
+          externalWalletsInitialized: !!options.externalWalletsInitialized
+        });
       }
     });
   }

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

@@ -1,13 +1,19 @@
 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,
+  initialState,
   children
 }) {
-  return /*#__PURE__*/createElement(Web3AuthInnerProvider, {
-    config
+  const pluginChild = /*#__PURE__*/createElement(WalletServicesContextProvider, {
+    context: Web3AuthInnerContext
   }, children);
+  return /*#__PURE__*/createElement(Web3AuthInnerProvider, {
+    config,
+    initialState
+  }, 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,91 +1,41 @@
-import { WalletInitializationError, WalletLoginError, CONNECTOR_EVENTS, CONNECTOR_STATUS } from '@web3auth/no-modal';
-import { createContext, useState, useCallback, useEffect, useMemo, createElement } from 'react';
+import { CONNECTOR_STATUS, WalletInitializationError, CONNECTOR_EVENTS } from '@web3auth/no-modal';
+import { createContext, useState, useMemo, useCallback, useEffect, createElement } from 'react';
 import { Web3Auth } from '../../modalManager.js';
 
 const Web3AuthInnerContext = /*#__PURE__*/createContext(null);
 function Web3AuthInnerProvider(params) {
   const {
     children,
-    config
+    config,
+    initialState
   } = params;
-  const [web3Auth, setWeb3Auth] = useState(null);
-  const [isConnecting, setIsConnecting] = useState(false);
+  const {
+    web3AuthOptions
+  } = config;
   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 web3Auth = useMemo(() => {
+    setProvider(null);
+    return new Web3Auth(web3AuthOptions, initialState);
+  }, [web3AuthOptions, initialState]);
+  const [isConnected, setIsConnected] = useState(web3Auth.status === CONNECTOR_STATUS.CONNECTED);
+  const [status, setStatus] = useState(web3Auth.status);
   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);
-    };
-    resetHookState();
-    const {
-      web3AuthOptions
-    } = config;
-    const web3AuthInstance = new Web3Auth(web3AuthOptions);
-    setWeb3Auth(web3AuthInstance);
-  }, [config]);
   useEffect(() => {
+    const controller = new AbortController();
     async function init() {
       try {
         setInitError(null);
         setIsInitializing(true);
-        await web3Auth.initModal();
+        await web3Auth.init({
+          signal: controller.signal
+        });
       } catch (error) {
         setInitError(error);
       } finally {
@@ -93,46 +43,43 @@ 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);
     };
     const errorListener = () => {
-      setStatus(CONNECTOR_STATUS.ERRORED);
+      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.
@@ -143,6 +90,8 @@ 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.REHYDRATION_ERROR, rehydrationErrorListener);
+      web3Auth.on(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
     }
     return () => {
       if (web3Auth) {
@@ -152,6 +101,9 @@ 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.REHYDRATION_ERROR, rehydrationErrorListener);
+        web3Auth.off(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
+        web3Auth.cleanup();
       }
     };
   }, [web3Auth]);
@@ -161,22 +113,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);