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

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

@@ -2,58 +2,8 @@
 
 var noModal = require('@web3auth/no-modal');
 
-const defaultSolanaDappModalConfig = {
-  chainNamespace: noModal.CHAIN_NAMESPACES.SOLANA,
-  connectors: {
-    [noModal.SOLANA_CONNECTORS.AUTH]: {
-      label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true
-    }
-  }
-};
-const defaultEvmDappModalConfig = {
-  chainNamespace: noModal.CHAIN_NAMESPACES.EIP155,
-  connectors: {
-    [noModal.EVM_CONNECTORS.AUTH]: {
-      label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true
-    },
-    [noModal.EVM_CONNECTORS.WALLET_CONNECT_V2]: {
-      label: "Wallet Connect",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true
-    }
-  }
-};
-const defaultSolanaWalletModalConfig = {
-  chainNamespace: noModal.CHAIN_NAMESPACES.SOLANA,
-  connectors: {
-    [noModal.SOLANA_CONNECTORS.AUTH]: {
-      label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true
-    }
-  }
-};
-const defaultEvmWalletModalConfig = {
-  chainNamespace: noModal.CHAIN_NAMESPACES.EIP155,
-  connectors: {
-    [noModal.EVM_CONNECTORS.AUTH]: {
-      label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true
-    }
-  }
-};
-const defaultOtherModalConfig = {
-  chainNamespace: noModal.CHAIN_NAMESPACES.OTHER,
+const defaultConnectorsModalConfig = {
+  hideWalletDiscovery: false,
   connectors: {
     [noModal.EVM_CONNECTORS.AUTH]: {
       label: "Auth",
@@ -65,9 +15,5 @@ const defaultOtherModalConfig = {
 };
 const walletRegistryUrl = "https://assets.web3auth.io/v1/wallet-registry.json";
 
-exports.defaultEvmDappModalConfig = defaultEvmDappModalConfig;
-exports.defaultEvmWalletModalConfig = defaultEvmWalletModalConfig;
-exports.defaultOtherModalConfig = defaultOtherModalConfig;
-exports.defaultSolanaDappModalConfig = defaultSolanaDappModalConfig;
-exports.defaultSolanaWalletModalConfig = defaultSolanaWalletModalConfig;
+exports.defaultConnectorsModalConfig = defaultConnectorsModalConfig;
 exports.walletRegistryUrl = walletRegistryUrl;

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

@@ -6,11 +6,7 @@ var noModal = require('@web3auth/no-modal');
 
 
 
-exports.defaultEvmDappModalConfig = config.defaultEvmDappModalConfig;
-exports.defaultEvmWalletModalConfig = config.defaultEvmWalletModalConfig;
-exports.defaultOtherModalConfig = config.defaultOtherModalConfig;
-exports.defaultSolanaDappModalConfig = config.defaultSolanaDappModalConfig;
-exports.defaultSolanaWalletModalConfig = config.defaultSolanaWalletModalConfig;
+exports.defaultConnectorsModalConfig = config.defaultConnectorsModalConfig;
 exports.walletRegistryUrl = config.walletRegistryUrl;
 exports.Web3Auth = modalManager.Web3Auth;
 Object.keys(noModal).forEach(function (k) {

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

@@ -15,31 +15,36 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     super(options);
     _defineProperty(this, "loginModal", void 0);
     _defineProperty(this, "options", void 0);
-    _defineProperty(this, "modalConfig", noModal.cloneDeep(config.defaultOtherModalConfig));
+    _defineProperty(this, "modalConfig", noModal.cloneDeep(config.defaultConnectorsModalConfig));
     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);
   }
-  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(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";
+    // init config
+    super.initAccountAbstractionConfig(projectConfig);
+    super.initChainsConfig(projectConfig);
+    super.initCachedConnectorAndChainId();
     // init login modal
+    const {
+      filteredWalletRegistry,
+      disabledExternalWallets
+    } = 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)) || [])],
-      walletRegistry
+      walletRegistry: filteredWalletRegistry
     }));
     this.subscribeToLoginModalEvents();
     await this.loginModal.initModal();
@@ -51,7 +56,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     }) => this.initConnectors({
       connectors: newConnectors,
       projectConfig,
-      modalConfig: params
+      disabledExternalWallets
     }));
     await this.loadConnectors({
       projectConfig
@@ -79,7 +84,33 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       });
     });
   }
-  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));
+    }
+    // remove wallets that are disabled in project config from wallet registry
+    const filteredWalletRegistry = noModal.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 {
@@ -94,7 +125,8 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       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 noModal.fetchWalletRegistry(config.walletRegistryUrl);
       } catch (e) {
@@ -109,15 +141,18 @@ class Web3Auth extends noModal.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);
     if (hasInAppConnectors) {
       await this.initInAppAndCachedConnectors(connectors, filteredConnectorNames);
       // show connect button if external wallets are available
@@ -134,102 +169,110 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       this.emit(noModal.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 = {
-        [noModal.WALLET_CONNECTORS.AUTH]: {
-          label: noModal.WALLET_CONNECTORS.AUTH,
-          loginMethods: {
-            [noModal.AUTH_CONNECTION.SMS_PASSWORDLESS]: {
-              name: noModal.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[noModal.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[noModal.AUTH_CONNECTION.SMS_PASSWORDLESS]) === null || _params$modalConfig$W === void 0 ? void 0 : _params$modalConfig$W.showOnModal;
-      if (localSmsOtpEnabled === true && smsOtpEnabled === false) {
-        throw noModal.WalletInitializationError.invalidParams("must enable sms otp on dashboard in order to utilise it");
+  async filterConnectors({
+    projectConfig,
+    disabledExternalWallets
+  }) {
+    var _this$modalConfig2, _this$modalConfig3, _projectConfig$loginM, _projectConfig$loginM2;
+    // Auth connector config: merge code config with config from dashboard
+    const loginMethods = {};
+    for (const authConnectionConfig of projectConfig.embeddedWalletAuth || []) {
+      const {
+        isDefault,
+        authConnectionId,
+        groupedAuthConnectionId,
+        authConnection
+      } = 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
+      });
+    }
+    const dashboardConnectorConfig = {
+      [noModal.WALLET_CONNECTORS.AUTH]: {
+        label: noModal.WALLET_CONNECTORS.AUTH,
+        loginMethods
       }
-      params.modalConfig = deepmerge(connectorConfig, noModal.cloneDeep(params.modalConfig));
+    };
+    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 = {};
+    }
+    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 connectorConfigurationPromises = allConnectorNames.map(async connectorName => {
-      var _this$modalConfig$con, _params2, _this$modalConfig$con2, _this$modalConfig$con3;
+    const connectorNames = allConnectorNames.map(connectorName => {
+      var _this$modalConfig4, _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: noModal.CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(config$1.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$modalConfig4 = this.modalConfig) === null || _this$modalConfig4 === void 0 || (_this$modalConfig4 = _this$modalConfig4.connectors) === null || _this$modalConfig4 === void 0 ? void 0 : _this$modalConfig4[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$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 noModal.WalletInitializationError.invalidParams(`Connector ${connectorName} is not configured`);
-      } else if ((connector === null || connector === void 0 ? void 0 : connector.type) === noModal.CONNECTOR_CATEGORY.IN_APP || (connector === null || connector === void 0 ? void 0 : connector.type) === noModal.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 === noModal.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 : {}), {}, {
-              [noModal.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[noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2]) !== null && _this$modalConfig$con6 !== void 0 ? _this$modalConfig$con6 : {}), {}, {
-                showOnModal: false
-              })
-            });
-            this.modalConfig.connectors[noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2].showOnModal = false;
-          }
-        }
-        return 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);
+      // 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 noModal.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 or it is disabled or displayInstalledExternalWallets is false
+      if (connector.type === noModal.CONNECTOR_CATEGORY.EXTERNAL) {
+        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;
+        if (!isExternalWalletEnabled) return;
+        if ((_this$modalConfig5 = this.modalConfig) !== null && _this$modalConfig5 !== void 0 && _this$modalConfig5.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, _this$modalConfig$con10;
+      var _this$modalConfig$con3, _this$modalConfig$con4;
       if (connector.type !== noModal.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 = utils.getConnectorSocialLogins(connector.name, (_this$modalConfig$con10 = this.modalConfig.connectors[connector.name]) === null || _this$modalConfig$con10 === void 0 ? void 0 : _this$modalConfig$con10.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;
     });
     noModal.log.debug(hasInAppConnectors, this.connectors, connectorNames, "hasInAppWallets");
     // check if external connectors are available
     const hasExternalConnectors = connectorNames.some(connectorName => {
-      var _this$getConnector, _this$modalConfig$con11;
-      // if wallet connect connector is available but hideWalletDiscovery is true then don't consider it as external wallet
-      if (connectorName === noModal.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) === noModal.CONNECTOR_CATEGORY.EXTERNAL && ((_this$modalConfig$con11 = this.modalConfig.connectors) === null || _this$modalConfig$con11 === void 0 ? void 0 : _this$modalConfig$con11[connectorName].showOnModal);
+      var _this$getConnector, _this$modalConfig$con5;
+      if (connectorName === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2) return true;
+      return ((_this$getConnector = this.getConnector(connectorName)) === null || _this$getConnector === void 0 ? void 0 : _this$getConnector.type) === noModal.CONNECTOR_CATEGORY.EXTERNAL && ((_this$modalConfig$con5 = this.modalConfig.connectors) === null || _this$modalConfig$con5 === void 0 ? void 0 : _this$modalConfig$con5[connectorName].showOnModal);
     });
     return {
       hasInAppConnectors,
@@ -244,7 +287,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         // skip if connector is already initialized
         if (connector.status !== noModal.CONNECTOR_STATUS.NOT_READY) return;
         // only initialize a external connectors here if it is a cached connector.
-        if (this.cachedConnector !== connectorName && connector.type === noModal.CONNECTOR_CATEGORY.EXTERNAL) return;
+        if (this.cachedConnector !== connectorName && connectorName !== noModal.WALLET_CONNECTORS.METAMASK && connector.type === noModal.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.
@@ -257,9 +300,9 @@ class Web3Auth extends noModal.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 === noModal.CONNECTOR_CATEGORY.IN_APP) {
-          var _this$modalConfig$con12, _this$options$uiConfi, _this$options$uiConfi2, _this$options$uiConfi3;
+          var _this$modalConfig$con6, _this$options$uiConfi, _this$options$uiConfi2, _this$options$uiConfi3;
           noModal.log.info("connectorInitResults", connectorName);
-          const loginMethods = utils.getConnectorSocialLogins(connectorName, (_this$modalConfig$con12 = this.modalConfig.connectors[connectorName]) === null || _this$modalConfig$con12 === void 0 ? void 0 : _this$modalConfig$con12.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) || config$1.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"

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

@@ -87,18 +87,7 @@ function Web3AuthInnerProvider(params) {
       try {
         setInitError(null);
         setIsInitializing(true);
-        const {
-          modalConfig,
-          hideWalletDiscovery
-        } = config;
-        if (modalConfig) {
-          await web3Auth.initModal({
-            modalConfig,
-            hideWalletDiscovery
-          });
-        } else {
-          await web3Auth.initModal();
-        }
+        await web3Auth.initModal();
       } catch (error) {
         setInitError(error);
       } finally {

package/dist/lib.cjs/packages/modal/src/ui/components/ExternalWallets.js

@@ -38,7 +38,7 @@ function ExternalWallets(props) {
     i18n: localeImport
   });
   const walletDiscoverySupported = React.useMemo(() => {
-    const supported = walletRegistry && Object.keys(walletRegistry.default).length > 0 && Object.keys(walletRegistry.others).length > 0;
+    const supported = walletRegistry && (Object.keys(walletRegistry.default).length > 0 || Object.keys(walletRegistry.others).length > 0);
     return supported;
   }, [walletRegistry]);
   const deviceDetails = React.useMemo(() => {
@@ -86,11 +86,12 @@ function ExternalWallets(props) {
   React.useEffect(() => {
     if (walletDiscoverySupported) {
       const isWalletConnectAdapterIncluded = Object.keys(config).some(adapter => adapter === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2);
-      const defaultButtonKeys = new Set(Object.keys(walletRegistry.default));
       const generateWalletButtons = wallets => {
         return Object.keys(wallets).reduce((acc, wallet) => {
           var _walletRegistryItem$c, _walletRegistryItem$i, _config$wallet, _walletRegistryItem$w;
           if (adapterVisibilityMap[wallet] === false) return acc;
+          // Metamask is always visible in the main screen, no need to show it in the external wallets list
+          if (wallet === noModal.WALLET_CONNECTORS.METAMASK) return acc;
           const walletRegistryItem = wallets[wallet];
           let href = "";
           if (deviceDetails.platform === Bowser.PLATFORMS_MAP.mobile) {
@@ -125,6 +126,8 @@ function ExternalWallets(props) {
       const otherButtons = generateWalletButtons(walletRegistry.others);
       // Generate custom adapter buttons
       const customAdapterButtons = Object.keys(config).reduce((acc, adapter) => {
+        // Metamask is always visible in the main screen, no need to show it in the external wallets list
+        if (adapter === noModal.WALLET_CONNECTORS.METAMASK) return acc;
         if (![noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2].includes(adapter) && !config[adapter].isInjected && adapterVisibilityMap[adapter]) {
           noModal.log.debug("custom adapter", adapter, config[adapter]);
           acc.push({
@@ -144,6 +147,8 @@ function ExternalWallets(props) {
         noModal.log.debug("filteredLists", filteredList);
         setExternalButtons(filteredList);
       } else {
+        const finalDefaultButtons = defaultButtons.length > 0 ? defaultButtons : allButtons.slice(0, 10);
+        const defaultButtonKeys = new Set(finalDefaultButtons.map(button => button.name));
         const sortedButtons = [...allButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customAdapterButtons, ...allButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))];
         setExternalButtons(sortedButtons);
       }
@@ -199,7 +204,7 @@ function ExternalWallets(props) {
         }), totalExternalWallets > 15 && jsxRuntime.jsx("div", {
           className: "w3a--py-4",
           children: jsxRuntime.jsx("input", {
-            className: "w3a--w-full w3a-text-field",
+            className: "w3a-text-field w3a--w-full",
             name: "passwordless-input",
             required: true,
             value: walletSearch,
@@ -217,7 +222,7 @@ function ExternalWallets(props) {
             onChange: e => handleWalletSearch(e)
           })
         }), externalButtons.length === 0 ? jsxRuntime.jsx("div", {
-          className: "w3a--w-full w3a--text-center w3a--text-app-gray-400 dark:w3a--text-app-gray-500 w3a--py-6 w3a--flex w3a--justify-center w3a--items-center",
+          className: "w3a--flex w3a--w-full w3a--items-center w3a--justify-center w3a--py-6 w3a--text-center w3a--text-app-gray-400 dark:w3a--text-app-gray-500",
           children: t("modal.external.no-wallets-found")
         }) : jsxRuntime.jsx("div", {
           className: `w3a-adapter-list-container ${totalExternalWallets < 15 ? "w3a--py-4" : ""}`,
@@ -247,7 +252,7 @@ function ExternalWallets(props) {
                 }))]
               }, button.name + button.displayName);
             }), totalExternalWallets > 10 && !walletSearch && jsxRuntime.jsxs("li", {
-              className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-0.5 w3a--my-4 w3a--w-full w3a--mx-auto w3a-adapter-item--full",
+              className: "w3a-adapter-item--full w3a--mx-auto w3a--my-4 w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-0.5",
               children: [jsxRuntime.jsx("p", {
                 className: "w3a--text-xs w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
                 children: t("modal.external.search-text")

package/dist/lib.cjs/packages/modal/src/ui/components/Modal.js

@@ -14,6 +14,7 @@ var Button = require('./Button/Button.js');
 var ExternalWallets = require('./ExternalWallets.js');
 var Footer = require('./Footer.js');
 var Header = require('./Header.js');
+var Image = require('./Image.js');
 var SocialLoginPasswordless = require('./SocialLoginPasswordless.js');
 var SocialLogins = require('./SocialLogins.js');
 
@@ -139,7 +140,7 @@ function Modal(props) {
       children: jsxRuntime.jsx(Button, {
         variant: isExternalPrimary ? "primary" : "tertiary",
         type: "button",
-        className: "w3a--w-full w3ajs-external-toggle__button",
+        className: "w3ajs-external-toggle__button w3a--w-full",
         style: {
           width: "100%"
         },
@@ -159,6 +160,39 @@ function Modal(props) {
       })
     })
   });
+  const metamaskWalletButton = jsxRuntime.jsx("div", {
+    className: "w3ajs-external-wallet w3a-group w3a--w-full",
+    children: jsxRuntime.jsx("div", {
+      className: "w3a-external-toggle w3ajs-external-toggle",
+      children: jsxRuntime.jsxs(Button, {
+        variant: isExternalPrimary ? "primary" : "tertiary",
+        type: "button",
+        className: "w3a--w-full w3ajs-external-toggle__button",
+        style: {
+          width: "100%"
+        },
+        onClick: () => {
+          preHandleExternalWalletClick({
+            connector: noModal.WALLET_CONNECTORS.METAMASK
+          });
+        },
+        children: [jsxRuntime.jsx(Image, {
+          imageId: "login-metamask",
+          hoverImageId: "login-metamask",
+          fallbackImageId: "wallet",
+          height: "24",
+          width: "24",
+          isButton: true,
+          extension: "svg"
+        }), jsxRuntime.jsx("span", {
+          className: "ml-2",
+          children: t("modal.external.continue-custom", {
+            wallet: "MetaMask"
+          })
+        })]
+      })
+    })
+  });
   const areSocialLoginsVisible = React.useMemo(() => {
     var _modalState$socialLog3, _modalState$socialLog4;
     if (modalState.showExternalWalletsOnly) return false;
@@ -216,7 +250,7 @@ function Modal(props) {
               handleSocialLoginClick: params => preHandleSocialWalletClick(params),
               socialLoginsConfig: modalState.socialLoginsConfig,
               isPrimaryBtn: isEmailPrimary
-            }), modalState.hasExternalWallets && externalWalletButton]
+            }), metamaskWalletButton, modalState.hasExternalWallets && externalWalletButton]
           })]
         }) : jsxRuntime.jsx("div", {
           className: "w3a-modal__content_external_wallet w3ajs-content",

package/dist/lib.cjs/packages/modal/src/ui/components/SocialLoginPasswordless.js

@@ -36,7 +36,8 @@ function SocialLoginPasswordless(props) {
           loginParams: {
             authConnection: auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS,
             authConnectionId: emailConfig.authConnectionId,
-            groupedAuthConnectionId: "",
+            groupedAuthConnectionId: emailConfig.groupedAuthConnectionId,
+            extraLoginOptions: emailConfig.extraLoginOptions,
             login_hint: value,
             name: "Email"
           }
@@ -54,6 +55,7 @@ function SocialLoginPasswordless(props) {
             authConnection: auth.AUTH_CONNECTION.SMS_PASSWORDLESS,
             authConnectionId: smsConfig.authConnectionId,
             groupedAuthConnectionId: smsConfig.groupedAuthConnectionId,
+            extraLoginOptions: smsConfig.extraLoginOptions,
             login_hint: typeof result === "string" ? result : number,
             name: "Mobile"
           }
@@ -96,16 +98,16 @@ function SocialLoginPasswordless(props) {
     children: [jsxRuntime.jsxs("div", {
       className: "w3a-group__title",
       children: [t(title), isSmsVisible && jsxRuntime.jsxs("div", {
-        className: "w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--cursor-pointer w3a--group",
+        className: "w3a--group w3a--relative w3a--flex w3a--cursor-pointer w3a--flex-col w3a--items-center",
         children: [jsxRuntime.jsx(Icon, {
           iconName: "information-circle-light",
           darkIconName: "information-circle"
         }), jsxRuntime.jsxs("div", {
-          className: "w3a--absolute w3a--z-20 w3a--flex-col w3a--items-center w3a--hidden w3a--mb-5 w3a--top-4 group-hover:w3a--flex",
+          className: "w3a--absolute w3a--top-4 w3a--z-20 w3a--mb-5 w3a--hidden w3a--flex-col w3a--items-center group-hover:w3a--flex",
           children: [jsxRuntime.jsx("div", {
-            className: "w3a--w-3 w3a--h-3 w3a--ml-[3px] -w3a--mb-2 w3a--rotate-45 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600"
+            className: "-w3a--mb-2 w3a--ml-[3px] w3a--size-3 w3a--rotate-45 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600"
           }), jsxRuntime.jsxs("div", {
-            className: `w3a--relative w3a--p-4 w3a--w-[300px] w3a--text-xs w3a--leading-none w3a--text-app-white w3a--rounded-md w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600 w3a--shadow-lg ${isSmsVisible && !isEmailVisible ? "w3a--left-20" : "w3a--left-8"}`,
+            className: `w3a--relative w3a--w-[300px] w3a--rounded-md w3a--bg-app-gray-50 w3a--p-4 w3a--text-xs w3a--leading-none w3a--text-app-white w3a--shadow-lg dark:w3a--bg-app-gray-600 ${isSmsVisible && !isEmailVisible ? "w3a--left-20" : "w3a--left-8"}`,
             children: [jsxRuntime.jsx("div", {
               className: "w3a--mb-1 w3a--text-xs w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
               children: t("modal.popup.phone-header")
@@ -120,7 +122,7 @@ function SocialLoginPasswordless(props) {
       className: "w3ajs-passwordless-form",
       onSubmit: e => handleFormSubmit(e),
       children: [jsxRuntime.jsx("input", {
-        className: "w3a--w-full w3a--mb-4 w3a-text-field",
+        className: "w3a-text-field w3a--mb-4 w3a--w-full",
         name: "passwordless-input",
         required: true,
         placeholder: `${t("modal.social.sms-placeholder-text")} ${placeholder}`,

package/dist/lib.cjs/packages/modal/src/ui/components/SocialLogins.js

@@ -81,7 +81,7 @@ function SocialLogins(props) {
         const loginMethodSpan = classNames("w3a-adapter-item", (socialLoginsConfig === null || socialLoginsConfig === void 0 || (_socialLoginsConfig$u2 = socialLoginsConfig.uiConfig) === null || _socialLoginsConfig$u2 === void 0 ? void 0 : _socialLoginsConfig$u2.loginGridCol) === 2 ? "w3a--col-span-3" : "w3a--col-span-2");
         if (isMainOption || order === 1) {
           return jsxRuntime.jsx("li", {
-            className: "w3a--col-span-6 w3a-adapter-item",
+            className: "w3a-adapter-item w3a--col-span-6",
             style: {
               order
             },
@@ -94,6 +94,7 @@ function SocialLogins(props) {
                   name: socialLoginConfig.name,
                   authConnectionId: socialLoginConfig.authConnectionId,
                   groupedAuthConnectionId: socialLoginConfig.groupedAuthConnectionId,
+                  extraLoginOptions: socialLoginConfig.extraLoginOptions,
                   login_hint: ""
                 }
               }),