@web3auth/modal 9.7.0 → 10.0.0-alpha.1

package/dist/lib.esm/{config.js → packages/modal/src/config.js}

@@ -1,15 +1,9 @@
-import { CHAIN_NAMESPACES, SOLANA_ADAPTERS, EVM_ADAPTERS } from '@web3auth/base';
+import { SOLANA_CONNECTORS, CHAIN_NAMESPACES, EVM_CONNECTORS } from '@web3auth/no-modal';
 
 const defaultSolanaDappModalConfig = {
   chainNamespace: CHAIN_NAMESPACES.SOLANA,
-  adapters: {
-    [SOLANA_ADAPTERS.TORUS_SOLANA]: {
-      label: "Torus Wallet",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true
-    },
-    [SOLANA_ADAPTERS.AUTH]: {
+  connectors: {
+    [SOLANA_CONNECTORS.AUTH]: {
       label: "Auth",
       showOnModal: true,
       showOnMobile: true,
@@ -19,20 +13,14 @@ const defaultSolanaDappModalConfig = {
 };
 const defaultEvmDappModalConfig = {
   chainNamespace: CHAIN_NAMESPACES.EIP155,
-  adapters: {
-    [EVM_ADAPTERS.TORUS_EVM]: {
-      label: "Torus Wallet",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true
-    },
-    [EVM_ADAPTERS.AUTH]: {
+  connectors: {
+    [EVM_CONNECTORS.AUTH]: {
       label: "Auth",
       showOnModal: true,
       showOnMobile: true,
       showOnDesktop: true
     },
-    [EVM_ADAPTERS.WALLET_CONNECT_V2]: {
+    [EVM_CONNECTORS.WALLET_CONNECT_V2]: {
       label: "Wallet Connect",
       showOnModal: true,
       showOnMobile: true,
@@ -42,8 +30,8 @@ const defaultEvmDappModalConfig = {
 };
 const defaultSolanaWalletModalConfig = {
   chainNamespace: CHAIN_NAMESPACES.SOLANA,
-  adapters: {
-    [SOLANA_ADAPTERS.AUTH]: {
+  connectors: {
+    [SOLANA_CONNECTORS.AUTH]: {
       label: "Auth",
       showOnModal: true,
       showOnMobile: true,
@@ -53,8 +41,8 @@ const defaultSolanaWalletModalConfig = {
 };
 const defaultEvmWalletModalConfig = {
   chainNamespace: CHAIN_NAMESPACES.EIP155,
-  adapters: {
-    [EVM_ADAPTERS.AUTH]: {
+  connectors: {
+    [EVM_CONNECTORS.AUTH]: {
       label: "Auth",
       showOnModal: true,
       showOnMobile: true,
@@ -64,8 +52,8 @@ const defaultEvmWalletModalConfig = {
 };
 const defaultOtherModalConfig = {
   chainNamespace: CHAIN_NAMESPACES.OTHER,
-  adapters: {
-    [EVM_ADAPTERS.AUTH]: {
+  connectors: {
+    [EVM_CONNECTORS.AUTH]: {
       label: "Auth",
       showOnModal: true,
       showOnMobile: true,

package/dist/lib.esm/{index.js → packages/modal/src/index.js}

@@ -1,2 +1,3 @@
 export { defaultEvmDappModalConfig, defaultEvmWalletModalConfig, defaultOtherModalConfig, defaultSolanaDappModalConfig, defaultSolanaWalletModalConfig, walletRegistryUrl } from './config.js';
 export { Web3Auth } from './modalManager.js';
+export * from '@web3auth/no-modal';

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

@@ -0,0 +1,374 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Web3AuthNoModal, cloneDeep, CONNECTOR_EVENTS, WalletInitializationError, CONNECTOR_STATUS, fetchProjectConfig, log, fetchWalletRegistry, WALLET_CONNECTORS, LOGIN_PROVIDER, CONNECTOR_NAMES, CONNECTOR_CATEGORY } from '@web3auth/no-modal';
+import deepmerge from 'deepmerge';
+import { defaultOtherModalConfig, walletRegistryUrl } from './config.js';
+import { capitalizeFirstLetter, AUTH_PROVIDERS } from './ui/config.js';
+import { LOGIN_MODAL_EVENTS } from './ui/interfaces.js';
+import { LoginModal } from './ui/loginModal.js';
+import { getUserLanguage, getConnectorSocialLogins } from './ui/utils.js';
+
+class Web3Auth extends Web3AuthNoModal {
+  constructor(options) {
+    super(options);
+    _defineProperty(this, "loginModal", void 0);
+    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "modalConfig", cloneDeep(defaultOtherModalConfig));
+    this.options = _objectSpread({}, options);
+    if (!this.options.uiConfig) this.options.uiConfig = {};
+  }
+  setModalConfig(modalConfig) {
+    super.checkInitRequirements();
+    this.modalConfig = modalConfig;
+  }
+  async initModal(params) {
+    super.checkInitRequirements();
+    super.initCachedConnectorAndChainId();
+    // get project config and wallet registry
+    const {
+      projectConfig,
+      walletRegistry
+    } = await this.getProjectAndWalletConfig(params);
+    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";
+
+    // init login modal
+    this.loginModal = new LoginModal(_objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
+      connectorListener: this,
+      chainNamespace: this.currentChain.chainNamespace,
+      walletRegistry
+    }));
+    this.subscribeToLoginModalEvents();
+    await this.loginModal.initModal();
+
+    // setup common JRPC provider
+    await this.setupCommonJRPCProvider();
+
+    // initialize connectors
+    this.on(CONNECTOR_EVENTS.CONNECTORS_UPDATED, ({
+      connectors: newConnectors
+    }) => this.initConnectors({
+      connectors: newConnectors,
+      projectConfig,
+      modalConfig: params
+    }));
+    await this.loadConnectors({
+      projectConfig
+    });
+
+    // initialize plugins
+    await this.initPlugins();
+  }
+  async connect() {
+    if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
+    // if already connected return provider
+    if (this.connectedConnectorName && this.status === CONNECTOR_STATUS.CONNECTED && this.provider) return this.provider;
+    this.loginModal.open();
+    return new Promise((resolve, reject) => {
+      this.once(CONNECTOR_EVENTS.CONNECTED, () => {
+        return resolve(this.provider);
+      });
+      this.once(CONNECTOR_EVENTS.ERRORED, err => {
+        return reject(err);
+      });
+      this.once(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility => {
+        // modal is closed but user is not connected to any wallet.
+        if (!visibility && this.status !== CONNECTOR_STATUS.CONNECTED) {
+          return reject(new Error("User closed the modal"));
+        }
+      });
+    });
+  }
+  async getProjectAndWalletConfig(params) {
+    // get project config
+    let projectConfig;
+    try {
+      var _this$options$account;
+      projectConfig = await fetchProjectConfig(this.options.clientId, this.options.web3AuthNetwork, (_this$options$account = this.options.accountAbstractionConfig) === null || _this$options$account === void 0 ? void 0 : _this$options$account.smartAccountType);
+    } catch (e) {
+      log.error("Failed to fetch project configurations", e);
+      throw WalletInitializationError.notReady("failed to fetch project configurations", e);
+    }
+
+    // get wallet registry
+    let walletRegistry = {
+      others: {},
+      default: {}
+    };
+    if (!(params !== null && params !== void 0 && params.hideWalletDiscovery)) {
+      try {
+        walletRegistry = await fetchWalletRegistry(walletRegistryUrl);
+      } catch (e) {
+        log.error("Failed to fetch wallet registry", e);
+      }
+    }
+    return {
+      projectConfig,
+      walletRegistry
+    };
+  }
+  async initConnectors({
+    connectors,
+    projectConfig,
+    modalConfig
+  }) {
+    // filter connectors based on config
+    const filteredConnectorNames = await this.filterConnectors(modalConfig, projectConfig);
+
+    // initialize connectors based on availability
+    const {
+      hasInAppConnectors,
+      hasExternalConnectors
+    } = await this.checkConnectorAvailability(filteredConnectorNames, modalConfig);
+    if (hasInAppConnectors) {
+      await this.initInAppAndCachedConnectors(connectors, filteredConnectorNames);
+      // show connect button if external wallets are available
+      if (hasExternalConnectors) this.loginModal.initExternalWalletContainer();
+    } else if (hasExternalConnectors) {
+      // if no in app wallet is available then initialize external wallets in modal
+      await this.initExternalConnectors(connectors, false, {
+        showExternalWalletsOnly: true
+      });
+    }
+
+    // emit ready event if connector is ready
+    if (this.status === CONNECTOR_STATUS.NOT_READY) {
+      this.status = CONNECTOR_STATUS.READY;
+      this.emit(CONNECTOR_EVENTS.READY);
+    }
+  }
+  async filterConnectors(params, projectConfig) {
+    // update auth connector config
+    const {
+      sms_otp_enabled: smsOtpEnabled
+    } = projectConfig;
+    if (smsOtpEnabled !== undefined) {
+      var _params, _params$modalConfig$W;
+      // TODO: use the new login config method
+      const connectorConfig = {
+        [WALLET_CONNECTORS.AUTH]: {
+          label: WALLET_CONNECTORS.AUTH,
+          loginMethods: {
+            [LOGIN_PROVIDER.SMS_PASSWORDLESS]: {
+              name: LOGIN_PROVIDER.SMS_PASSWORDLESS,
+              showOnModal: smsOtpEnabled,
+              showOnDesktop: smsOtpEnabled,
+              showOnMobile: smsOtpEnabled
+            }
+          }
+        }
+      };
+      if (!((_params = params) !== null && _params !== void 0 && _params.modalConfig)) params = {
+        modalConfig: {}
+      };
+      const localSmsOtpEnabled = (_params$modalConfig$W = params.modalConfig[WALLET_CONNECTORS.AUTH]) === null || _params$modalConfig$W === void 0 || (_params$modalConfig$W = _params$modalConfig$W.loginMethods) === null || _params$modalConfig$W === void 0 || (_params$modalConfig$W = _params$modalConfig$W[LOGIN_PROVIDER.SMS_PASSWORDLESS]) === null || _params$modalConfig$W === void 0 ? void 0 : _params$modalConfig$W.showOnModal;
+      if (localSmsOtpEnabled === true && smsOtpEnabled === false) {
+        throw WalletInitializationError.invalidParams("must enable sms otp on dashboard in order to utilise it");
+      }
+      params.modalConfig = deepmerge(connectorConfig, cloneDeep(params.modalConfig));
+    }
+
+    // merge default connectors with the custom configured connectors.
+    const allConnectorNames = [...new Set([...Object.keys(this.modalConfig.connectors || {}), ...this.connectors.map(connector => connector.name)])];
+    const connectorConfigurationPromises = allConnectorNames.map(async connectorName => {
+      var _this$modalConfig$con, _params2, _this$modalConfig$con2, _this$modalConfig$con3;
+      // start with the default config of connector.
+      let connectorConfig = ((_this$modalConfig$con = this.modalConfig.connectors) === null || _this$modalConfig$con === void 0 ? void 0 : _this$modalConfig$con[connectorName]) || {
+        label: CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(capitalizeFirstLetter).join(" "),
+        showOnModal: true,
+        showOnMobile: true,
+        showOnDesktop: true
+      };
+      // override the default config of connector if some config is being provided by the user.
+      if ((_params2 = params) !== null && _params2 !== void 0 && (_params2 = _params2.modalConfig) !== null && _params2 !== void 0 && _params2[connectorName]) {
+        connectorConfig = _objectSpread(_objectSpread({}, connectorConfig), params.modalConfig[connectorName]);
+      }
+      this.modalConfig.connectors[connectorName] = connectorConfig;
+
+      // check if connector is configured/added by user and exist in connectors map.
+      const connector = this.getConnector(connectorName);
+      log.debug("connector config", connectorName, (_this$modalConfig$con2 = this.modalConfig.connectors) === null || _this$modalConfig$con2 === void 0 ? void 0 : _this$modalConfig$con2[connectorName].showOnModal, connector);
+
+      // if connector is not custom configured then check if it is available in default connectors.
+      // and if connector is not hidden by user
+      if (!connector && (_this$modalConfig$con3 = this.modalConfig.connectors) !== null && _this$modalConfig$con3 !== void 0 && _this$modalConfig$con3[connectorName].showOnModal) {
+        throw WalletInitializationError.invalidParams(`Connector ${connectorName} is not configured`);
+      } else if ((connector === null || connector === void 0 ? void 0 : connector.type) === CONNECTOR_CATEGORY.IN_APP || (connector === null || connector === void 0 ? void 0 : connector.type) === CONNECTOR_CATEGORY.EXTERNAL || connectorName === this.cachedConnector) {
+        var _this$modalConfig$con4;
+        if (!((_this$modalConfig$con4 = this.modalConfig.connectors) !== null && _this$modalConfig$con4 !== void 0 && _this$modalConfig$con4[connectorName].showOnModal)) return;
+        if (connectorName === WALLET_CONNECTORS.WALLET_CONNECT_V2) {
+          const {
+            wallet_connect_enabled: walletConnectEnabled
+          } = projectConfig;
+          if (walletConnectEnabled === false) {
+            var _this$modalConfig$con5, _this$modalConfig$con6, _this$modalConfig$con7;
+            // override user specified config by hiding wallet connect
+            this.modalConfig.connectors = _objectSpread(_objectSpread({}, (_this$modalConfig$con5 = this.modalConfig.connectors) !== null && _this$modalConfig$con5 !== void 0 ? _this$modalConfig$con5 : {}), {}, {
+              [WALLET_CONNECTORS.WALLET_CONNECT_V2]: _objectSpread(_objectSpread({}, (_this$modalConfig$con6 = (_this$modalConfig$con7 = this.modalConfig.connectors) === null || _this$modalConfig$con7 === void 0 ? void 0 : _this$modalConfig$con7[WALLET_CONNECTORS.WALLET_CONNECT_V2]) !== null && _this$modalConfig$con6 !== void 0 ? _this$modalConfig$con6 : {}), {}, {
+                showOnModal: false
+              })
+            });
+            this.modalConfig.connectors[WALLET_CONNECTORS.WALLET_CONNECT_V2].showOnModal = false;
+          }
+        }
+        return connectorName;
+      }
+    });
+    const connectorNames = await Promise.all(connectorConfigurationPromises);
+    return connectorNames.filter(name => name !== undefined);
+  }
+  async checkConnectorAvailability(connectorNames, modalConfig) {
+    // currently all default in app and external wallets can be hidden or shown based on config.
+    // check if in app connectors are available
+    const hasInAppConnectors = this.connectors.some(connector => {
+      var _this$modalConfig$con8, _this$modalConfig$con9, _connector$name;
+      if (connector.type !== CONNECTOR_CATEGORY.IN_APP) return false;
+      if (((_this$modalConfig$con8 = this.modalConfig.connectors) === null || _this$modalConfig$con8 === void 0 || (_this$modalConfig$con8 = _this$modalConfig$con8[connector.name]) === null || _this$modalConfig$con8 === void 0 ? void 0 : _this$modalConfig$con8.showOnModal) !== true) return false;
+      if (!((_this$modalConfig$con9 = this.modalConfig.connectors) !== null && _this$modalConfig$con9 !== void 0 && (_this$modalConfig$con9 = _this$modalConfig$con9[connector.name]) !== null && _this$modalConfig$con9 !== void 0 && _this$modalConfig$con9.loginMethods)) return true;
+      const mergedLoginMethods = getConnectorSocialLogins(connector.name, (_connector$name = this.modalConfig.connectors[connector.name]) === null || _connector$name === void 0 ? void 0 : _connector$name.loginMethods);
+      if (Object.values(mergedLoginMethods).some(method => method.showOnModal)) return true;
+      return false;
+    });
+    log.debug(hasInAppConnectors, this.connectors, connectorNames, "hasInAppWallets");
+
+    // check if external connectors are available
+    const hasExternalConnectors = connectorNames.some(connectorName => {
+      var _this$getConnector, _this$modalConfig$con10;
+      // if wallet connect connector is available but hideWalletDiscovery is true then don't consider it as external wallet
+      if (connectorName === WALLET_CONNECTORS.WALLET_CONNECT_V2 && modalConfig !== null && modalConfig !== void 0 && modalConfig.hideWalletDiscovery) return false;
+      return ((_this$getConnector = this.getConnector(connectorName)) === null || _this$getConnector === void 0 ? void 0 : _this$getConnector.type) === CONNECTOR_CATEGORY.EXTERNAL && ((_this$modalConfig$con10 = this.modalConfig.connectors) === null || _this$modalConfig$con10 === void 0 ? void 0 : _this$modalConfig$con10[connectorName].showOnModal);
+    });
+    return {
+      hasInAppConnectors,
+      hasExternalConnectors
+    };
+  }
+  async initInAppAndCachedConnectors(connectors, connectorNames) {
+    await Promise.all(connectorNames.map(async connectorName => {
+      const connector = connectors.find(x => x.name === connectorName);
+      if (!connector) return;
+      try {
+        // skip if connector is already initialized
+        if (connector.status !== CONNECTOR_STATUS.NOT_READY) return;
+
+        // only initialize a external connectors here if it is a cached connector.
+        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.
+        // external wallets are initialized on INIT_EXTERNAL_WALLET event.
+        this.subscribeToConnectorEvents(connector);
+        const initialChain = this.getInitialChainIdForConnector(connector);
+        await connector.init({
+          autoConnect: this.cachedConnector === connectorName,
+          chainId: initialChain.chainId
+        });
+
+        // note: not adding cachedWallet to modal if it is external wallet.
+        // adding it later if no in-app wallets are available.
+        if (connector.type === CONNECTOR_CATEGORY.IN_APP) {
+          var _connectorName, _this$options$uiConfi, _this$options$uiConfi2, _this$options$uiConfi3;
+          log.info("connectorInitResults", connectorName);
+          const loginMethods = getConnectorSocialLogins(connectorName, (_connectorName = this.modalConfig.connectors[connectorName]) === null || _connectorName === void 0 ? void 0 : _connectorName.loginMethods);
+          this.loginModal.addSocialLogins(connectorName, loginMethods, ((_this$options$uiConfi = this.options.uiConfig) === null || _this$options$uiConfi === void 0 ? void 0 : _this$options$uiConfi.loginMethodsOrder) || AUTH_PROVIDERS, _objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
+            loginGridCol: ((_this$options$uiConfi2 = this.options.uiConfig) === null || _this$options$uiConfi2 === void 0 ? void 0 : _this$options$uiConfi2.loginGridCol) || 3,
+            primaryButton: ((_this$options$uiConfi3 = this.options.uiConfig) === null || _this$options$uiConfi3 === void 0 ? void 0 : _this$options$uiConfi3.primaryButton) || "socialLogin"
+          }));
+        }
+      } catch (error) {
+        log.error(error, "error while initializing connector ", connectorName);
+      }
+    }));
+  }
+  async initExternalConnectors(connectors, externalWalletsInitialized, options) {
+    if (externalWalletsInitialized) return;
+    const connectorsConfig = {};
+    // we do it like this because we don't want one slow connector to delay the load of the entire external wallet section.
+    connectors.forEach(async connector => {
+      const connectorName = connector.name;
+      if ((connector === null || connector === void 0 ? void 0 : connector.type) === CONNECTOR_CATEGORY.EXTERNAL) {
+        log.debug("init external wallet", this.cachedConnector, connectorName, connector.status);
+        this.subscribeToConnectorEvents(connector);
+        // we are not initializing cached connector here as it is already being initialized in initModal before.
+        if (this.cachedConnector === connectorName) {
+          return;
+        }
+        if (connector.status === CONNECTOR_STATUS.NOT_READY) {
+          try {
+            const initialChain = this.getInitialChainIdForConnector(connector);
+            await connector.init({
+              autoConnect: this.cachedConnector === connectorName,
+              chainId: initialChain.chainId
+            });
+            const connectorModalConfig = this.modalConfig.connectors[connectorName];
+            connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
+              isInjected: connector.isInjected
+            });
+            this.loginModal.addWalletLogins(connectorsConfig, {
+              showExternalWalletsOnly: !!(options !== null && options !== void 0 && options.showExternalWalletsOnly)
+            });
+          } 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
+          });
+          this.loginModal.addWalletLogins(connectorsConfig, {
+            showExternalWalletsOnly: !!(options !== null && options !== void 0 && options.showExternalWalletsOnly)
+          });
+        }
+      }
+    });
+  }
+  subscribeToLoginModalEvents() {
+    this.loginModal.on(LOGIN_MODAL_EVENTS.LOGIN, async params => {
+      try {
+        await this.connectTo(params.connector, params.loginParams);
+      } catch (error) {
+        log.error(`Error while connecting to connector: ${params.connector}`, error);
+      }
+    });
+    this.loginModal.on(LOGIN_MODAL_EVENTS.INIT_EXTERNAL_WALLETS, async params => {
+      await this.initExternalConnectors(this.connectors, params.externalWalletsInitialized);
+    });
+    this.loginModal.on(LOGIN_MODAL_EVENTS.DISCONNECT, async () => {
+      try {
+        await this.logout();
+      } catch (error) {
+        log.error(`Error while disconnecting`, error);
+      }
+    });
+    this.loginModal.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, async visibility => {
+      log.debug("is login modal visible", visibility);
+      this.emit(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
+      const wcConnector = this.getConnector(WALLET_CONNECTORS.WALLET_CONNECT_V2);
+      if (wcConnector) {
+        const walletConnectStatus = wcConnector === null || wcConnector === void 0 ? void 0 : wcConnector.status;
+        log.debug("trying refreshing wc session", visibility, walletConnectStatus);
+        if (visibility && (walletConnectStatus === CONNECTOR_STATUS.READY || walletConnectStatus === CONNECTOR_STATUS.CONNECTING)) {
+          log.debug("refreshing wc session");
+
+          // refreshing session for wallet connect whenever modal is opened.
+          try {
+            const initialChain = this.getInitialChainIdForConnector(wcConnector);
+            wcConnector.connect({
+              chainId: initialChain.chainId
+            });
+          } catch (error) {
+            log.error(`Error while disconnecting to wallet connect in core`, error);
+          }
+        }
+        if (!visibility && this.status === CONNECTOR_STATUS.CONNECTED && (walletConnectStatus === CONNECTOR_STATUS.READY || walletConnectStatus === CONNECTOR_STATUS.CONNECTING)) {
+          log.debug("this stops wc connector from trying to reconnect once proposal expires");
+          wcConnector.status = CONNECTOR_STATUS.READY;
+        }
+      }
+    });
+  }
+}
+
+export { Web3Auth };

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

@@ -0,0 +1,13 @@
+import { createElement } from 'react';
+import { Web3AuthInnerProvider } from './context/Web3AuthInnerContext.js';
+
+function Web3AuthProvider({
+  config,
+  children
+}) {
+  return /*#__PURE__*/createElement(Web3AuthInnerProvider, {
+    config
+  }, children);
+}
+
+export { Web3AuthProvider };

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

@@ -0,0 +1,196 @@
+import { WalletInitializationError, WalletLoginError, CONNECTOR_EVENTS, CONNECTOR_STATUS } from '@web3auth/no-modal';
+import { createContext, useState, useCallback, useEffect, useMemo, createElement } from 'react';
+import { Web3Auth } from '../../modalManager.js';
+
+const Web3AuthInnerContext = /*#__PURE__*/createContext(null);
+function Web3AuthInnerProvider(params) {
+  const {
+    children,
+    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 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(() => {
+    async function init() {
+      try {
+        setInitError(null);
+        setIsInitializing(true);
+        const {
+          modalConfig,
+          hideWalletDiscovery
+        } = config;
+        if (modalConfig) {
+          await web3Auth.initModal({
+            modalConfig,
+            hideWalletDiscovery
+          });
+        } else {
+          await web3Auth.initModal();
+        }
+      } catch (error) {
+        setInitError(error);
+      } finally {
+        setIsInitializing(false);
+      }
+    }
+    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);
+    };
+    if (web3Auth) {
+      if (isConnected) addState();else resetState();
+    }
+  }, [web3Auth, isConnected]);
+  useEffect(() => {
+    const notReadyListener = () => setStatus(web3Auth.status);
+    const readyListener = () => {
+      setStatus(web3Auth.status);
+      setIsInitialized(true);
+    };
+    const connectedListener = () => {
+      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);
+      }
+    };
+    const disconnectedListener = () => {
+      setStatus(web3Auth.status);
+      setIsConnected(false);
+    };
+    const connectingListener = () => {
+      setStatus(web3Auth.status);
+    };
+    const errorListener = () => {
+      setStatus(CONNECTOR_STATUS.ERRORED);
+    };
+    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);
+    }
+    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]);
+  const value = useMemo(() => {
+    return {
+      web3Auth,
+      isConnected,
+      isInitialized,
+      provider,
+      userInfo,
+      isMFAEnabled,
+      status,
+      connect,
+      enableMFA,
+      manageMFA,
+      logout,
+      authenticateUser,
+      switchChain,
+      getPlugin,
+      isInitializing,
+      isConnecting,
+      initError,
+      connectError
+    };
+  }, [web3Auth, isConnected, isInitialized, provider, userInfo, isMFAEnabled, status, getPlugin, connect, enableMFA, manageMFA, logout, authenticateUser, switchChain, isInitializing, isConnecting, initError, connectError]);
+  return /*#__PURE__*/createElement(Web3AuthInnerContext.Provider, {
+    value
+  }, children);
+}
+
+export { Web3AuthInnerContext, Web3AuthInnerProvider };

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

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

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

@@ -0,0 +1,3 @@
+export { Web3AuthInnerContext, Web3AuthInnerProvider } from './context/Web3AuthInnerContext.js';
+export { useWeb3Auth } from './hooks/useWeb3Auth.js';
+export { Web3AuthProvider } from './Web3AuthProvider.js';