@web3auth/modal 10.0.0-alpha.2 → 10.0.0-beta.1

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

@@ -1,46 +1,107 @@
 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, AUTH_CONNECTION, CONNECTOR_NAMES, CONNECTOR_CATEGORY } from '@web3auth/no-modal';
+import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, log, CONNECTOR_STATUS, CONNECTOR_EVENTS, WalletInitializationError, fetchProjectConfig, fetchWalletRegistry, CONNECTOR_CATEGORY, CONNECTOR_NAMES } from '@web3auth/no-modal';
 import deepmerge from 'deepmerge';
-import { defaultOtherModalConfig, walletRegistryUrl } from './config.js';
-import { capitalizeFirstLetter, AUTH_PROVIDERS } from './ui/config.js';
+import { defaultConnectorsModalConfig, walletRegistryUrl } from './config.js';
+import { AUTH_PROVIDERS_NAMES, AUTH_PROVIDERS, capitalizeFirstLetter } 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';
+import { getUserLanguage } 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));
+    _defineProperty(this, "modalConfig", cloneDeep(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 === WALLET_CONNECTORS.WALLET_CONNECT_V2), {
+        externalWalletsInitialized: true,
+        externalWalletsVisibility: true
+      });
+    });
+    _defineProperty(this, "onSocialLogin", async params => {
+      try {
+        await this.connectTo(params.connector, params.loginParams);
+      } 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);
+      } catch (error) {
+        log.error(`Error while connecting to connector: ${params.connector}`, error);
+      }
+    });
+    _defineProperty(this, "onModalVisibility", 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;
+        }
+      }
+    });
     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);
   }
-  setModalConfig(modalConfig) {
-    super.checkInitRequirements();
-    this.modalConfig = modalConfig;
-  }
-  async initModal(params) {
+  async initModal() {
     var _this$coreOptions$cha;
     super.checkInitRequirements();
-    super.initCachedConnectorAndChainId();
     // get project config and wallet registry
     const {
       projectConfig,
       walletRegistry
-    } = await this.getProjectAndWalletConfig(params);
+    } = 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
+    super.initAccountAbstractionConfig(projectConfig);
+    super.initChainsConfig(projectConfig);
+    super.initCachedConnectorAndChainId();
 
     // init login modal
+    const {
+      filteredWalletRegistry,
+      disabledExternalWallets
+    } = this.filterWalletRegistry(walletRegistry, projectConfig);
     this.loginModal = new LoginModal(_objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
       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)) || [])],
-      walletRegistry
-    }));
-    this.subscribeToLoginModalEvents();
+      walletRegistry: filteredWalletRegistry
+    }), {
+      onInitExternalWallets: this.onInitExternalWallets,
+      onSocialLogin: this.onSocialLogin,
+      onExternalWalletLogin: this.onExternalWalletLogin,
+      onModalVisibility: this.onModalVisibility
+    });
     await this.loginModal.initModal();
 
     // setup common JRPC provider
@@ -52,7 +113,7 @@ class Web3Auth extends Web3AuthNoModal {
     }) => this.initConnectors({
       connectors: newConnectors,
       projectConfig,
-      modalConfig: params
+      disabledExternalWallets
     }));
     await this.loadConnectors({
       projectConfig
@@ -67,37 +128,83 @@ class Web3Auth extends Web3AuthNoModal {
     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, () => {
+      // 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(CONNECTOR_EVENTS.ERRORED, handleError);
+        this.removeListener(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
         return resolve(this.provider);
-      });
-      this.once(CONNECTOR_EVENTS.ERRORED, err => {
+      };
+      const handleError = err => {
+        this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+        this.removeListener(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
         return reject(err);
-      });
-      this.once(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility => {
+      };
+      const handleVisibility = visibility => {
         // modal is closed but user is not connected to any wallet.
         if (!visibility && this.status !== CONNECTOR_STATUS.CONNECTED) {
+          this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+          this.removeListener(CONNECTOR_EVENTS.ERRORED, handleError);
           return reject(new Error("User closed the modal"));
         }
-      });
+      };
+      this.once(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+      this.once(CONNECTOR_EVENTS.ERRORED, handleError);
+      this.once(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
     });
   }
-  async getProjectAndWalletConfig(params) {
+  filterWalletRegistry(walletRegistry, projectConfig) {
+    const {
+      disableAllRecommendedWallets,
+      disableAllOtherWallets,
+      disabledWallets
+    } = projectConfig.externalWalletAuth || {};
+
+    // add disabled wallets to set
+    const disabledExternalWallets = new Set(disabledWallets || []);
+    if (disableAllRecommendedWallets) {
+      Object.keys(walletRegistry.default).forEach(wallet => disabledExternalWallets.add(wallet));
+    }
+    if (disableAllOtherWallets) {
+      Object.keys(walletRegistry.others).forEach(wallet => disabledExternalWallets.add(wallet));
+    }
+    // always show MetaMask, force enable it
+    disabledExternalWallets.delete(WALLET_CONNECTORS.METAMASK);
+
+    // remove wallets that are disabled in project config from wallet registry
+    const filteredWalletRegistry = cloneDeep(walletRegistry);
+    disabledExternalWallets.forEach(wallet => {
+      delete filteredWalletRegistry.default[wallet];
+      delete filteredWalletRegistry.others[wallet];
+    });
+    return {
+      disabledExternalWallets,
+      filteredWalletRegistry
+    };
+  }
+  async getProjectAndWalletConfig() {
+    var _this$modalConfig;
     // 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);
+      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);
     }
-
     // get wallet registry
     let walletRegistry = {
       others: {},
       default: {}
     };
-    if (!(params !== null && params !== void 0 && params.hideWalletDiscovery)) {
+    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) {
@@ -112,25 +219,41 @@ class Web3Auth extends Web3AuthNoModal {
   async initConnectors({
     connectors,
     projectConfig,
-    modalConfig
+    disabledExternalWallets
   }) {
     // filter connectors based on config
-    const filteredConnectorNames = await this.filterConnectors(modalConfig, projectConfig);
+    const filteredConnectorNames = await this.filterConnectors({
+      projectConfig,
+      disabledExternalWallets
+    });
 
     // initialize connectors based on availability
     const {
       hasInAppConnectors,
       hasExternalConnectors
-    } = await this.checkConnectorAvailability(filteredConnectorNames, modalConfig);
+    } = 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 === CONNECTOR_CATEGORY.EXTERNAL && x.name !== 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 === CONNECTOR_CATEGORY.EXTERNAL), {
+          externalWalletsInitialized: true,
+          showExternalWalletsOnly: true,
+          externalWalletsVisibility: true
+        });
+      }
     }
 
     // emit ready event if connector is ready
@@ -139,122 +262,152 @@ class Web3Auth extends Web3AuthNoModal {
       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: {
-            [AUTH_CONNECTION.SMS_PASSWORDLESS]: {
-              name: AUTH_CONNECTION.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[AUTH_CONNECTION.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");
+  async filterConnectors({
+    projectConfig,
+    disabledExternalWallets
+  }) {
+    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,
+        authConnection,
+        groupedAuthConnectionId,
+        authConnectionId
+      } = authConnectionConfig;
+      if (isDefault) {
+        loginMethods[authConnection] = {
+          name: 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 = {
+      [WALLET_CONNECTORS.AUTH]: {
+        label: WALLET_CONNECTORS.AUTH,
+        loginMethods
       }
-      params.modalConfig = deepmerge(connectorConfig, cloneDeep(params.modalConfig));
+    };
+
+    // 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[WALLET_CONNECTORS.AUTH]) {
+      if (!this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods) this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods = {};
     }
+    const authProviders = new Set(AUTH_PROVIDERS);
+    Object.keys(this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods).forEach(key => {
+      const userConfig = this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods[key];
+      const {
+        authConnectionId,
+        groupedAuthConnectionId
+      } = userConfig;
+      if (!authProviders.has(key)) {
+        throw 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 WalletInitializationError.invalidParams(`Invalid auth connection config, authConnection: ${key}. Missing AuthConnectionConfig from the dashboard.`);
+        const configFromDashboard = embedWalletConfigMap.get(groupedAuthConnectionId || authConnectionId);
+        this.modalConfig.connectors[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, cloneDeep(this.modalConfig.connectors || {}));
 
     // 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;
+    const connectorNames = allConnectorNames.map(connectorName => {
+      var _this$modalConfig3, _this$modalConfig$con, _this$modalConfig$con2;
       // 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]) || {
+      const defaultConnectorConfig = {
         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;
+      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);
-      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);
+      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);
 
-      // 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;
+      // check if connector is configured/added by user and exist in connectors map.
+      const connectorConfig = (_this$modalConfig$con2 = this.modalConfig.connectors) === null || _this$modalConfig$con2 === void 0 ? void 0 : _this$modalConfig$con2[connectorName];
+      if (!connector) {
+        if (connectorConfig.showOnModal) throw WalletInitializationError.invalidParams(`Connector ${connectorName} is not configured`);
+        return;
+      }
+
+      // skip connector if it is hidden by user
+      if (!connectorConfig.showOnModal) return;
+
+      // skip external connector if external wallets are disabled except for MetaMask
+      const isExternalWalletEnabled = Boolean(projectConfig.externalWalletAuth);
+      if (connector.type === CONNECTOR_CATEGORY.EXTERNAL && connector.name !== WALLET_CONNECTORS.METAMASK) {
+        if (!isExternalWalletEnabled) return;
+        if (disabledExternalWallets.has(connectorName)) return;
+      }
+
+      // skip WC connector if external wallets are disabled or hideWalletDiscovery is true
+      if (connectorName === WALLET_CONNECTORS.WALLET_CONNECT_V2) {
+        var _this$modalConfig4;
+        if (!isExternalWalletEnabled) return;
+        if ((_this$modalConfig4 = this.modalConfig) !== null && _this$modalConfig4 !== void 0 && _this$modalConfig4.hideWalletDiscovery) return;
       }
+      this.modalConfig.connectors[connectorName] = connectorConfig;
+      return connectorName;
     });
-    const connectorNames = await Promise.all(connectorConfigurationPromises);
+    // const connectorNames = await Promise.all(connectorConfigurationPromises);
     return connectorNames.filter(name => name !== undefined);
   }
-  async checkConnectorAvailability(connectorNames, modalConfig) {
+  async checkConnectorAvailability(connectorNames) {
     // 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;
+      var _this$modalConfig$con3, _this$modalConfig$con4;
       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;
+      if (((_this$modalConfig$con3 = this.modalConfig.connectors) === null || _this$modalConfig$con3 === void 0 || (_this$modalConfig$con3 = _this$modalConfig$con3[connector.name]) === null || _this$modalConfig$con3 === void 0 ? void 0 : _this$modalConfig$con3.showOnModal) !== true) return false;
+      if (!((_this$modalConfig$con4 = this.modalConfig.connectors) !== null && _this$modalConfig$con4 !== void 0 && (_this$modalConfig$con4 = _this$modalConfig$con4[connector.name]) !== null && _this$modalConfig$con4 !== void 0 && _this$modalConfig$con4.loginMethods)) return true;
+      if (Object.values(this.modalConfig.connectors[connector.name].loginMethods).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);
+      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 {
       hasInAppConnectors,
       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 !== 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;
+        if (this.cachedConnector !== connectorName && connectorName !== WALLET_CONNECTORS.METAMASK && 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.
@@ -269,9 +422,9 @@ class Web3Auth extends Web3AuthNoModal {
         // 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;
+          var _this$modalConfig$con6, _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);
+          const loginMethods = ((_this$modalConfig$con6 = this.modalConfig.connectors[connectorName]) === null || _this$modalConfig$con6 === void 0 ? void 0 : _this$modalConfig$con6.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"
@@ -282,101 +435,52 @@ class Web3Auth extends Web3AuthNoModal {
       }
     }));
   }
-  async initExternalConnectors(connectors, externalWalletsInitialized, options) {
-    if (externalWalletsInitialized) return;
+  async initExternalConnectors(externalConnectors, options) {
     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 => {
+    externalConnectors.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);
+      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;
+        if (this.cachedConnector === connectorName) return;
+        try {
+          this.subscribeToConnectorEvents(connector);
+          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,
+            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);
         }
-        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) {
+      } 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
+            isInjected: connector.isInjected,
+            icon: connector.icon
           });
           this.loginModal.addWalletLogins(connectorsConfig, {
-            showExternalWalletsOnly: !!(options !== null && options !== void 0 && options.showExternalWalletsOnly)
+            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
+            externalWalletsVisibility: !!options.externalWalletsVisibility,
+            externalWalletsInitialized: !!options.externalWalletsInitialized
           });
         }
       }
     });
   }
-  subscribeToLoginModalEvents() {
-    this.loginModal.on(LOGIN_MODAL_EVENTS.EXTERNAL_WALLET_LOGIN, async params => {
-      try {
-        await this.connectTo(params.connector);
-      } catch (error) {
-        log.error(`Error while connecting to connector: ${params.connector}`, error);
-      }
-    });
-    this.loginModal.on(LOGIN_MODAL_EVENTS.SOCIAL_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 };