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

package/dist/lib.cjs/node_modules/style-inject/dist/style-inject.es.js

@@ -3,7 +3,7 @@
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
-  if (!css || typeof document === 'undefined') {
+  if (typeof document === 'undefined') {
     return;
   }
   var head = document.head || document.getElementsByTagName('head')[0];

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

@@ -16,13 +16,63 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     _defineProperty(this, "loginModal", void 0);
     _defineProperty(this, "options", void 0);
     _defineProperty(this, "modalConfig", noModal.cloneDeep(config.defaultConnectorsModalConfig));
+    _defineProperty(this, "onInitExternalWallets", async params => {
+      if (params.externalWalletsInitialized) return;
+      // initialize WC connector only as other external wallets are initialized in initModal
+      await this.initExternalConnectors(this.connectors.filter(x => x.name === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2), {
+        externalWalletsInitialized: true,
+        externalWalletsVisibility: true
+      });
+    });
+    _defineProperty(this, "onSocialLogin", async params => {
+      try {
+        await this.connectTo(params.connector, params.loginParams);
+      } catch (error) {
+        noModal.log.error(`Error while connecting to connector: ${params.connector}`, error);
+      }
+    });
+    _defineProperty(this, "onExternalWalletLogin", async params => {
+      try {
+        await this.connectTo(params.connector, params.loginParams);
+      } catch (error) {
+        noModal.log.error(`Error while connecting to connector: ${params.connector}`, error);
+      }
+    });
+    _defineProperty(this, "onModalVisibility", async visibility => {
+      noModal.log.debug("is login modal visible", visibility);
+      this.emit(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
+      const wcConnector = this.getConnector(noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2);
+      if (wcConnector) {
+        const walletConnectStatus = wcConnector === null || wcConnector === void 0 ? void 0 : wcConnector.status;
+        noModal.log.debug("trying refreshing wc session", visibility, walletConnectStatus);
+        if (visibility && (walletConnectStatus === noModal.CONNECTOR_STATUS.READY || walletConnectStatus === noModal.CONNECTOR_STATUS.CONNECTING)) {
+          noModal.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) {
+            noModal.log.error(`Error while disconnecting to wallet connect in core`, error);
+          }
+        }
+        if (!visibility && this.status === noModal.CONNECTOR_STATUS.CONNECTED && (walletConnectStatus === noModal.CONNECTOR_STATUS.READY || walletConnectStatus === noModal.CONNECTOR_STATUS.CONNECTING)) {
+          noModal.log.debug("this stops wc connector from trying to reconnect once proposal expires");
+          wcConnector.status = noModal.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;
     noModal.log.info("modalConfig", this.modalConfig);
   }
   async initModal() {
-    var _this$coreOptions$cha;
     super.checkInitRequirements();
     // get project config and wallet registry
     const {
@@ -32,6 +82,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     this.options.uiConfig = deepmerge(noModal.cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
     if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = utils.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
     super.initAccountAbstractionConfig(projectConfig);
     super.initChainsConfig(projectConfig);
@@ -43,10 +94,16 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     } = this.filterWalletRegistry(walletRegistry, projectConfig);
     this.loginModal = new loginModal.LoginModal(_objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
       connectorListener: this,
-      chainNamespaces: [...new Set(((_this$coreOptions$cha = this.coreOptions.chains) === null || _this$coreOptions$cha === void 0 ? void 0 : _this$coreOptions$cha.map(x => x.chainNamespace)) || [])],
+      web3authClientId: this.options.clientId,
+      web3authNetwork: this.options.web3AuthNetwork,
+      chainNamespaces: this.getChainNamespaces(),
       walletRegistry: filteredWalletRegistry
-    }));
-    this.subscribeToLoginModalEvents();
+    }), {
+      onInitExternalWallets: this.onInitExternalWallets,
+      onSocialLogin: this.onSocialLogin,
+      onExternalWalletLogin: this.onExternalWalletLogin,
+      onModalVisibility: this.onModalVisibility
+    });
     await this.loginModal.initModal();
     // setup common JRPC provider
     await this.setupCommonJRPCProvider();
@@ -70,18 +127,29 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     if (this.connectedConnectorName && this.status === noModal.CONNECTOR_STATUS.CONNECTED && this.provider) return this.provider;
     this.loginModal.open();
     return new Promise((resolve, reject) => {
-      this.once(noModal.CONNECTOR_EVENTS.CONNECTED, () => {
+      // remove all listeners when promise is resolved or rejected.
+      // this is to prevent memory leaks if user clicks connect button multiple times.
+      const handleConnected = () => {
+        this.removeListener(noModal.CONNECTOR_EVENTS.ERRORED, handleError);
+        this.removeListener(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
         return resolve(this.provider);
-      });
-      this.once(noModal.CONNECTOR_EVENTS.ERRORED, err => {
+      };
+      const handleError = err => {
+        this.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, handleConnected);
+        this.removeListener(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
         return reject(err);
-      });
-      this.once(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility => {
+      };
+      const handleVisibility = visibility => {
         // modal is closed but user is not connected to any wallet.
         if (!visibility && this.status !== noModal.CONNECTOR_STATUS.CONNECTED) {
+          this.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, handleConnected);
+          this.removeListener(noModal.CONNECTOR_EVENTS.ERRORED, handleError);
           return reject(new Error("User closed the modal"));
         }
-      });
+      };
+      this.once(noModal.CONNECTOR_EVENTS.CONNECTED, handleConnected);
+      this.once(noModal.CONNECTOR_EVENTS.ERRORED, handleError);
+      this.once(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
     });
   }
   filterWalletRegistry(walletRegistry, projectConfig) {
@@ -98,6 +166,8 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     if (disableAllOtherWallets) {
       Object.keys(walletRegistry.others).forEach(wallet => disabledExternalWallets.add(wallet));
     }
+    // always show MetaMask, force enable it
+    disabledExternalWallets.delete(noModal.WALLET_CONNECTORS.METAMASK);
     // remove wallets that are disabled in project config from wallet registry
     const filteredWalletRegistry = noModal.cloneDeep(walletRegistry);
     disabledExternalWallets.forEach(wallet => {
@@ -115,7 +185,12 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     let projectConfig;
     try {
       var _this$options$account;
-      projectConfig = await noModal.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);
+      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);
@@ -153,15 +228,28 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       hasInAppConnectors,
       hasExternalConnectors
     } = await this.checkConnectorAvailability(filteredConnectorNames);
+    const filteredConnectors = connectors.filter(x => filteredConnectorNames.includes(x.name));
     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
-      });
+      await this.initInAppAndCachedConnectors(filteredConnectors);
+    }
+    if (hasExternalConnectors) {
+      if (hasInAppConnectors) {
+        // show connect button if both in-app and external wallets are available
+        this.loginModal.initExternalWalletContainer();
+        // initialize installed external wallets (except WC), don't mark external wallets as fully initialized
+        this.initExternalConnectors(filteredConnectors.filter(x => x.type === noModal.CONNECTOR_CATEGORY.EXTERNAL && x.name !== noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2), {
+          externalWalletsInitialized: false,
+          showExternalWalletsOnly: false,
+          externalWalletsVisibility: false
+        });
+      } else {
+        // if no in app wallet is available then initialize all external wallets in modal
+        await this.initExternalConnectors(filteredConnectors.filter(x => x.type === noModal.CONNECTOR_CATEGORY.EXTERNAL), {
+          externalWalletsInitialized: true,
+          showExternalWalletsOnly: true,
+          externalWalletsVisibility: true
+        });
+      }
     }
     // emit ready event if connector is ready
     if (this.status === noModal.CONNECTOR_STATUS.NOT_READY) {
@@ -173,25 +261,31 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     projectConfig,
     disabledExternalWallets
   }) {
-    var _this$modalConfig2, _this$modalConfig3, _projectConfig$loginM, _projectConfig$loginM2;
-    // Auth connector config: merge code config with config from dashboard
+    var _this$modalConfig2;
+    // Auth connector config: populate this with the default config for auth connectors.
     const loginMethods = {};
+    const embedWalletConfigMap = new Map();
     for (const authConnectionConfig of projectConfig.embeddedWalletAuth || []) {
       const {
         isDefault,
-        authConnectionId,
+        authConnection,
         groupedAuthConnectionId,
-        authConnection
+        authConnectionId
       } = authConnectionConfig;
-      // for custom auth connections, authConnectionId or groupedAuthConnectionId are required.
-      if (!isDefault && (!authConnectionId || !groupedAuthConnectionId)) return;
-      loginMethods[authConnection] = _objectSpread(_objectSpread({
-        name: authConnection
-      }, authConnectionConfig), {}, {
-        showOnModal: true,
-        showOnDesktop: true,
-        showOnMobile: true
-      });
+      if (isDefault) {
+        loginMethods[authConnection] = {
+          name: config$1.AUTH_PROVIDERS_NAMES[authConnection],
+          authConnection: authConnection,
+          authConnectionId: authConnectionId,
+          groupedAuthConnectionId: groupedAuthConnectionId,
+          extraLoginOptions: authConnectionConfig.jwtParameters,
+          isDefault: true,
+          showOnModal: true,
+          showOnDesktop: true,
+          showOnMobile: true
+        };
+      }
+      embedWalletConfigMap.set(groupedAuthConnectionId || authConnectionId, authConnectionConfig);
     }
     const dashboardConnectorConfig = {
       [noModal.WALLET_CONNECTORS.AUTH]: {
@@ -199,26 +293,38 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         loginMethods
       }
     };
+    // populate the user config data with the dashboard config.
     if ((_this$modalConfig2 = this.modalConfig) !== null && _this$modalConfig2 !== void 0 && (_this$modalConfig2 = _this$modalConfig2.connectors) !== null && _this$modalConfig2 !== void 0 && _this$modalConfig2[noModal.WALLET_CONNECTORS.AUTH]) {
       if (!this.modalConfig.connectors[noModal.WALLET_CONNECTORS.AUTH].loginMethods) this.modalConfig.connectors[noModal.WALLET_CONNECTORS.AUTH].loginMethods = {};
     }
+    const authProviders = new Set(config$1.AUTH_PROVIDERS);
+    Object.keys(this.modalConfig.connectors[noModal.WALLET_CONNECTORS.AUTH].loginMethods).forEach(key => {
+      const userConfig = this.modalConfig.connectors[noModal.WALLET_CONNECTORS.AUTH].loginMethods[key];
+      const {
+        authConnectionId,
+        groupedAuthConnectionId
+      } = userConfig;
+      if (!authProviders.has(key)) {
+        throw noModal.WalletInitializationError.invalidParams(`Invalid auth connection: ${key}`);
+      }
+      // only throw error if one of them is defined in the config.
+      if (groupedAuthConnectionId || authConnectionId) {
+        if (!embedWalletConfigMap.has(groupedAuthConnectionId || authConnectionId)) throw noModal.WalletInitializationError.invalidParams(`Invalid auth connection config, authConnection: ${key}. Missing AuthConnectionConfig from the dashboard.`);
+        const configFromDashboard = embedWalletConfigMap.get(groupedAuthConnectionId || authConnectionId);
+        this.modalConfig.connectors[noModal.WALLET_CONNECTORS.AUTH].loginMethods[key] = {
+          authConnection: configFromDashboard.authConnection,
+          authConnectionId: configFromDashboard.authConnectionId,
+          groupedAuthConnectionId: configFromDashboard.groupedAuthConnectionId,
+          isDefault: configFromDashboard.isDefault || false,
+          extraLoginOptions: _objectSpread(_objectSpread({}, configFromDashboard.jwtParameters), userConfig.extraLoginOptions)
+        };
+      }
+    });
     this.modalConfig.connectors = deepmerge(dashboardConnectorConfig, noModal.cloneDeep(this.modalConfig.connectors || {}));
-    // TODO: validate modal connector config here.!!
-    if ((_this$modalConfig3 = this.modalConfig) !== null && _this$modalConfig3 !== void 0 && (_this$modalConfig3 = _this$modalConfig3.connectors) !== null && _this$modalConfig3 !== void 0 && (_this$modalConfig3 = _this$modalConfig3[noModal.WALLET_CONNECTORS.AUTH]) !== null && _this$modalConfig3 !== void 0 && _this$modalConfig3.loginMethods) {
-      const authProviders = new Set(config$1.AUTH_PROVIDERS);
-      Object.keys(this.modalConfig.connectors[noModal.WALLET_CONNECTORS.AUTH].loginMethods).forEach(key => {
-        if (!authProviders.has(key)) {
-          throw noModal.WalletInitializationError.invalidParams(`Invalid auth connection: ${key}`);
-        }
-      });
-    }
-    // external wallets config
-    const isExternalWalletEnabled = Boolean(projectConfig.externalWalletAuth);
-    const isInstalledWalletWalletDisplayed = Boolean((_projectConfig$loginM = (_projectConfig$loginM2 = projectConfig.loginModal) === null || _projectConfig$loginM2 === void 0 ? void 0 : _projectConfig$loginM2.displayInstalledExternalWallets) !== null && _projectConfig$loginM !== void 0 ? _projectConfig$loginM : true);
     // merge default connectors with the custom configured connectors.
     const allConnectorNames = [...new Set([...Object.keys(this.modalConfig.connectors || {}), ...this.connectors.map(connector => connector.name)])];
     const connectorNames = allConnectorNames.map(connectorName => {
-      var _this$modalConfig4, _this$modalConfig$con, _this$modalConfig$con2;
+      var _this$modalConfig3, _this$modalConfig$con, _this$modalConfig$con2;
       // start with the default config of connector.
       const defaultConnectorConfig = {
         label: noModal.CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(config$1.capitalizeFirstLetter).join(" "),
@@ -226,7 +332,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         showOnMobile: true,
         showOnDesktop: true
       };
-      this.modalConfig.connectors[connectorName] = _objectSpread(_objectSpread({}, defaultConnectorConfig), ((_this$modalConfig4 = this.modalConfig) === null || _this$modalConfig4 === void 0 || (_this$modalConfig4 = _this$modalConfig4.connectors) === null || _this$modalConfig4 === void 0 ? void 0 : _this$modalConfig4[connectorName]) || {});
+      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]) || {});
       // check if connector is configured/added by user and exist in connectors map.
       const connector = this.getConnector(connectorName);
       noModal.log.debug("connector config", connectorName, (_this$modalConfig$con = this.modalConfig.connectors) === null || _this$modalConfig$con === void 0 || (_this$modalConfig$con = _this$modalConfig$con[connectorName]) === null || _this$modalConfig$con === void 0 ? void 0 : _this$modalConfig$con.showOnModal, connector);
@@ -238,17 +344,17 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       }
       // skip connector if it is hidden by user
       if (!connectorConfig.showOnModal) return;
-      // skip external connector if external wallets are disabled or it is disabled or displayInstalledExternalWallets is false
-      if (connector.type === noModal.CONNECTOR_CATEGORY.EXTERNAL) {
+      // skip external connector if external wallets are disabled except for MetaMask
+      const isExternalWalletEnabled = Boolean(projectConfig.externalWalletAuth);
+      if (connector.type === noModal.CONNECTOR_CATEGORY.EXTERNAL && connector.name !== noModal.WALLET_CONNECTORS.METAMASK) {
         if (!isExternalWalletEnabled) return;
         if (disabledExternalWallets.has(connectorName)) return;
-        if (!isInstalledWalletWalletDisplayed) return;
       }
       // skip WC connector if external wallets are disabled or hideWalletDiscovery is true
       if (connectorName === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2) {
-        var _this$modalConfig5;
+        var _this$modalConfig4;
         if (!isExternalWalletEnabled) return;
-        if ((_this$modalConfig5 = this.modalConfig) !== null && _this$modalConfig5 !== void 0 && _this$modalConfig5.hideWalletDiscovery) return;
+        if ((_this$modalConfig4 = this.modalConfig) !== null && _this$modalConfig4 !== void 0 && _this$modalConfig4.hideWalletDiscovery) return;
       }
       this.modalConfig.connectors[connectorName] = connectorConfig;
       return connectorName;
@@ -279,10 +385,9 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       hasExternalConnectors
     };
   }
-  async initInAppAndCachedConnectors(connectors, connectorNames) {
-    await Promise.all(connectorNames.map(async connectorName => {
-      const connector = connectors.find(x => x.name === connectorName);
-      if (!connector) return;
+  async initInAppAndCachedConnectors(connectors) {
+    await Promise.all(connectors.map(async connector => {
+      const connectorName = connector.name;
       try {
         // skip if connector is already initialized
         if (connector.status !== noModal.CONNECTOR_STATUS.NOT_READY) return;
@@ -313,97 +418,47 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       }
     }));
   }
-  async initExternalConnectors(connectors, externalWalletsInitialized, options) {
-    if (externalWalletsInitialized) return;
+  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.
-    connectors.forEach(async connector => {
+    externalConnectors.forEach(async connector => {
       const connectorName = connector.name;
-      if ((connector === null || connector === void 0 ? void 0 : connector.type) === noModal.CONNECTOR_CATEGORY.EXTERNAL) {
-        noModal.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 === noModal.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) {
-            noModal.log.error(error, "error while initializing connector", connectorName);
-          }
-        } else if (connector.status === noModal.CONNECTOR_STATUS.READY || connector.status === noModal.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)
+      noModal.log.debug("init external wallet", this.cachedConnector, connectorName, connector.status);
+      // 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 === noModal.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 === noModal.CONNECTOR_STATUS.NOT_READY && this.cachedConnector !== connectorName) {
+        try {
+          this.subscribeToConnectorEvents(connector);
+          const initialChain = this.getInitialChainIdForConnector(connector);
+          await connector.init({
+            autoConnect: this.cachedConnector === connectorName,
+            chainId: initialChain.chainId
           });
+        } catch (error) {
+          noModal.log.error(error, "error while initializing connector", connectorName);
         }
       }
-    });
-  }
-  subscribeToLoginModalEvents() {
-    this.loginModal.on(interfaces.LOGIN_MODAL_EVENTS.EXTERNAL_WALLET_LOGIN, async params => {
-      try {
-        await this.connectTo(params.connector);
-      } catch (error) {
-        noModal.log.error(`Error while connecting to connector: ${params.connector}`, error);
-      }
-    });
-    this.loginModal.on(interfaces.LOGIN_MODAL_EVENTS.SOCIAL_LOGIN, async params => {
-      try {
-        await this.connectTo(params.connector, params.loginParams);
-      } catch (error) {
-        noModal.log.error(`Error while connecting to connector: ${params.connector}`, error);
-      }
-    });
-    this.loginModal.on(interfaces.LOGIN_MODAL_EVENTS.INIT_EXTERNAL_WALLETS, async params => {
-      await this.initExternalConnectors(this.connectors, params.externalWalletsInitialized);
-    });
-    this.loginModal.on(interfaces.LOGIN_MODAL_EVENTS.DISCONNECT, async () => {
-      try {
-        await this.logout();
-      } catch (error) {
-        noModal.log.error(`Error while disconnecting`, error);
-      }
-    });
-    this.loginModal.on(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, async visibility => {
-      noModal.log.debug("is login modal visible", visibility);
-      this.emit(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
-      const wcConnector = this.getConnector(noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2);
-      if (wcConnector) {
-        const walletConnectStatus = wcConnector === null || wcConnector === void 0 ? void 0 : wcConnector.status;
-        noModal.log.debug("trying refreshing wc session", visibility, walletConnectStatus);
-        if (visibility && (walletConnectStatus === noModal.CONNECTOR_STATUS.READY || walletConnectStatus === noModal.CONNECTOR_STATUS.CONNECTING)) {
-          noModal.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) {
-            noModal.log.error(`Error while disconnecting to wallet connect in core`, error);
-          }
-        }
-        if (!visibility && this.status === noModal.CONNECTOR_STATUS.CONNECTED && (walletConnectStatus === noModal.CONNECTOR_STATUS.READY || walletConnectStatus === noModal.CONNECTOR_STATUS.CONNECTING)) {
-          noModal.log.debug("this stops wc connector from trying to reconnect once proposal expires");
-          wcConnector.status = noModal.CONNECTOR_STATUS.READY;
-        }
+      // update connector config
+      if ([noModal.CONNECTOR_STATUS.NOT_READY, noModal.CONNECTOR_STATUS.READY, noModal.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.cjs/packages/modal/src/react/Web3AuthProvider.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var Web3AuthInnerContext = require('./context/Web3AuthInnerContext.js');
 
 function Web3AuthProvider({
   config,
   children
 }) {
-  return /*#__PURE__*/React.createElement(Web3AuthInnerContext.Web3AuthInnerProvider, {
+  return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Web3AuthInnerProvider, {
     config
   }, children);
 }

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

@@ -1,31 +1,31 @@
 'use strict';
 
 var noModal = require('@web3auth/no-modal');
-var React = require('react');
+var react = require('react');
 var modalManager = require('../../modalManager.js');
 
-const Web3AuthInnerContext = /*#__PURE__*/React.createContext(null);
+const Web3AuthInnerContext = /*#__PURE__*/react.createContext(null);
 function Web3AuthInnerProvider(params) {
   const {
     children,
     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 getPlugin = React.useCallback(name => {
+  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 getPlugin = react.useCallback(name => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     return web3Auth.getPlugin(name);
   }, [web3Auth]);
-  const enableMFA = React.useCallback(async loginParams => {
+  const enableMFA = react.useCallback(async loginParams => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     if (!isConnected) throw noModal.WalletLoginError.notConnectedError();
     await web3Auth.enableMFA(loginParams);
@@ -33,19 +33,19 @@ function Web3AuthInnerProvider(params) {
     setUserInfo(localUserInfo);
     setIsMFAEnabled(localUserInfo.isMfaEnabled || false);
   }, [web3Auth, isConnected]);
-  const manageMFA = React.useCallback(async loginParams => {
+  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 = {
+  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 () => {
+  const connect = react.useCallback(async () => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     try {
       setConnectError(null);
@@ -59,15 +59,15 @@ function Web3AuthInnerProvider(params) {
       setIsConnecting(false);
     }
   }, [web3Auth]);
-  const authenticateUser = React.useCallback(async () => {
+  const authenticateUser = react.useCallback(async () => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     return web3Auth.authenticateUser();
   }, [web3Auth]);
-  const switchChain = React.useCallback(chainParams => {
+  const switchChain = react.useCallback(chainParams => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     return web3Auth.switchChain(chainParams);
   }, [web3Auth]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const resetHookState = () => {
       setProvider(null);
       setUserInfo(null);
@@ -82,7 +82,7 @@ function Web3AuthInnerProvider(params) {
     const web3AuthInstance = new modalManager.Web3Auth(web3AuthOptions);
     setWeb3Auth(web3AuthInstance);
   }, [config]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     async function init() {
       try {
         setInitError(null);
@@ -96,7 +96,7 @@ function Web3AuthInnerProvider(params) {
     }
     if (web3Auth) init();
   }, [web3Auth, config]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const addState = async () => {
       setProvider(web3Auth.provider);
       const userState = await web3Auth.getUserInfo();
@@ -112,7 +112,7 @@ function Web3AuthInnerProvider(params) {
       if (isConnected) addState();else resetState();
     }
   }, [web3Auth, isConnected]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const notReadyListener = () => setStatus(web3Auth.status);
     const readyListener = () => {
       setStatus(web3Auth.status);
@@ -157,7 +157,7 @@ function Web3AuthInnerProvider(params) {
       }
     };
   }, [web3Auth]);
-  const value = React.useMemo(() => {
+  const value = react.useMemo(() => {
     return {
       web3Auth,
       isConnected,
@@ -179,7 +179,7 @@ function Web3AuthInnerProvider(params) {
       connectError
     };
   }, [web3Auth, isConnected, isInitialized, provider, userInfo, isMFAEnabled, status, getPlugin, connect, enableMFA, manageMFA, logout, authenticateUser, switchChain, isInitializing, isConnecting, initError, connectError]);
-  return /*#__PURE__*/React.createElement(Web3AuthInnerContext.Provider, {
+  return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Provider, {
     value
   }, children);
 }

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

@@ -1,11 +1,11 @@
 'use strict';
 
 var noModal = require('@web3auth/no-modal');
-var React = require('react');
+var react = require('react');
 var Web3AuthInnerContext = require('../context/Web3AuthInnerContext.js');
 
 const useWeb3Auth = () => {
-  const context = React.useContext(Web3AuthInnerContext.Web3AuthInnerContext);
+  const context = react.useContext(Web3AuthInnerContext.Web3AuthInnerContext);
   if (!context) {
     throw noModal.WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in `Web3AuthContextProvider`.");
   }