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

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

@@ -24,6 +24,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     this.modalConfig = modalConfig;
   }
   async initModal(params) {
+    var _this$coreOptions$cha;
     super.checkInitRequirements();
     super.initCachedConnectorAndChainId();
     // get project config and wallet registry
@@ -34,19 +35,16 @@ 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";
-
     // init login modal
     this.loginModal = new loginModal.LoginModal(_objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
       connectorListener: this,
-      chainNamespace: this.currentChain.chainNamespace,
+      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();
     await this.loginModal.initModal();
-
     // setup common JRPC provider
     await this.setupCommonJRPCProvider();
-
     // initialize connectors
     this.on(noModal.CONNECTOR_EVENTS.CONNECTORS_UPDATED, ({
       connectors: newConnectors
@@ -58,7 +56,6 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     await this.loadConnectors({
       projectConfig
     });
-
     // initialize plugins
     await this.initPlugins();
   }
@@ -92,7 +89,6 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       noModal.log.error("Failed to fetch project configurations", e);
       throw noModal.WalletInitializationError.notReady("failed to fetch project configurations", e);
     }
-
     // get wallet registry
     let walletRegistry = {
       others: {},
@@ -117,7 +113,6 @@ class Web3Auth extends noModal.Web3AuthNoModal {
   }) {
     // filter connectors based on config
     const filteredConnectorNames = await this.filterConnectors(modalConfig, projectConfig);
-
     // initialize connectors based on availability
     const {
       hasInAppConnectors,
@@ -133,7 +128,6 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         showExternalWalletsOnly: true
       });
     }
-
     // emit ready event if connector is ready
     if (this.status === noModal.CONNECTOR_STATUS.NOT_READY) {
       this.status = noModal.CONNECTOR_STATUS.READY;
@@ -152,8 +146,8 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         [noModal.WALLET_CONNECTORS.AUTH]: {
           label: noModal.WALLET_CONNECTORS.AUTH,
           loginMethods: {
-            [noModal.LOGIN_PROVIDER.SMS_PASSWORDLESS]: {
-              name: noModal.LOGIN_PROVIDER.SMS_PASSWORDLESS,
+            [noModal.AUTH_CONNECTION.SMS_PASSWORDLESS]: {
+              name: noModal.AUTH_CONNECTION.SMS_PASSWORDLESS,
               showOnModal: smsOtpEnabled,
               showOnDesktop: smsOtpEnabled,
               showOnMobile: smsOtpEnabled
@@ -164,13 +158,12 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       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.LOGIN_PROVIDER.SMS_PASSWORDLESS]) === null || _params$modalConfig$W === void 0 ? void 0 : _params$modalConfig$W.showOnModal;
+      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");
       }
       params.modalConfig = deepmerge(connectorConfig, noModal.cloneDeep(params.modalConfig));
     }
-
     // merge default connectors with the custom configured connectors.
     const allConnectorNames = [...new Set([...Object.keys(this.modalConfig.connectors || {}), ...this.connectors.map(connector => connector.name)])];
     const connectorConfigurationPromises = allConnectorNames.map(async connectorName => {
@@ -187,11 +180,9 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         connectorConfig = _objectSpread(_objectSpread({}, connectorConfig), params.modalConfig[connectorName]);
       }
       this.modalConfig.connectors[connectorName] = connectorConfig;
-
       // check if connector is configured/added by user and exist in connectors map.
       const connector = this.getConnector(connectorName);
       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) {
@@ -224,22 +215,21 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     // 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$con8, _this$modalConfig$con9, _this$modalConfig$con10;
       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, (_connector$name = this.modalConfig.connectors[connector.name]) === null || _connector$name === void 0 ? void 0 : _connector$name.loginMethods);
+      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;
       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$con10;
+      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$con10 = this.modalConfig.connectors) === null || _this$modalConfig$con10 === void 0 ? void 0 : _this$modalConfig$con10[connectorName].showOnModal);
+      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);
     });
     return {
       hasInAppConnectors,
@@ -253,10 +243,8 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       try {
         // 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;
-
         // 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.
@@ -266,13 +254,12 @@ class Web3Auth extends noModal.Web3AuthNoModal {
           autoConnect: this.cachedConnector === connectorName,
           chainId: initialChain.chainId
         });
-
         // note: not adding cachedWallet to modal if it is external wallet.
         // adding it later if no in-app wallets are available.
         if (connector.type === noModal.CONNECTOR_CATEGORY.IN_APP) {
-          var _connectorName, _this$options$uiConfi, _this$options$uiConfi2, _this$options$uiConfi3;
+          var _this$modalConfig$con12, _this$options$uiConfi, _this$options$uiConfi2, _this$options$uiConfi3;
           noModal.log.info("connectorInitResults", connectorName);
-          const loginMethods = utils.getConnectorSocialLogins(connectorName, (_connectorName = this.modalConfig.connectors[connectorName]) === null || _connectorName === void 0 ? void 0 : _connectorName.loginMethods);
+          const loginMethods = utils.getConnectorSocialLogins(connectorName, (_this$modalConfig$con12 = this.modalConfig.connectors[connectorName]) === null || _this$modalConfig$con12 === void 0 ? void 0 : _this$modalConfig$con12.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"
@@ -327,7 +314,14 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     });
   }
   subscribeToLoginModalEvents() {
-    this.loginModal.on(interfaces.LOGIN_MODAL_EVENTS.LOGIN, async params => {
+    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) {
@@ -353,7 +347,6 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         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);

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var noModal = require('@web3auth/no-modal');
 var React = require('react');
 var reactI18next = require('react-i18next');
@@ -7,9 +8,8 @@ var interfaces = require('../interfaces.js');
 var localeImport = require('../localeImport.js');
 var Icon = require('./Icon.js');
 var Image = require('./Image.js');
-var jsxRuntime = require('react/jsx-runtime');
 
-const closeIcon = /*#__PURE__*/jsxRuntime.jsx(Icon, {
+const closeIcon = jsxRuntime.jsx(Icon, {
   iconName: "x-light",
   darkIconName: "close"
 });
@@ -22,9 +22,9 @@ function DetailedLoader(props) {
     connectorName,
     onClose
   } = props;
-  const providerIcon = connector === "twitter" ? /*#__PURE__*/jsxRuntime.jsx(Image, {
+  const providerIcon = connector === "twitter" ? jsxRuntime.jsx(Image, {
     imageId: "login-x-dark"
-  }) : /*#__PURE__*/jsxRuntime.jsx(Image, {
+  }) : jsxRuntime.jsx(Image, {
     imageId: `login-${connector}`,
     height: "30",
     width: "30"
@@ -40,63 +40,63 @@ function DetailedLoader(props) {
       }, 3000);
     }
   }, [modalStatus, onClose]);
-  return modalStatus !== interfaces.MODAL_STATUS.INITIALIZED ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return modalStatus !== interfaces.MODAL_STATUS.INITIALIZED ? jsxRuntime.jsxs("div", {
     className: "w3ajs-modal-loader w3a-modal__loader w3a--h-full",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: "w3a-modal__loader-content",
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: jsxRuntime.jsxs("div", {
         className: "w3a-modal__loader-info",
-        children: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsxs("div", {
             className: "w3a-modal__loader-bridge",
-            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            children: [jsxRuntime.jsxs("div", {
               className: "w3a-modal__loader-app-logo",
-              children: [/*#__PURE__*/jsxRuntime.jsx("img", {
+              children: [jsxRuntime.jsx("img", {
                 src: appLogo,
                 className: "w3a--block dark:w3a--hidden w3a--h-10 w3a--w-10",
                 alt: ""
-              }), /*#__PURE__*/jsxRuntime.jsx("img", {
+              }), jsxRuntime.jsx("img", {
                 src: appLogo,
                 className: "w3a--hidden dark:w3a--block w3a--h-10 w3a--w-10",
                 alt: ""
               })]
-            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            }), jsxRuntime.jsx("div", {
               className: "w3a-modal__connector",
-              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              children: jsxRuntime.jsxs("div", {
                 className: "w3a-modal__connector-beat",
-                children: [/*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {})]
+                children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})]
               })
-            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            }), jsxRuntime.jsx("div", {
               className: "w3a-modal__loader-social-logo",
               children: providerIcon
             })]
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          }), jsxRuntime.jsxs("div", {
+            children: [jsxRuntime.jsx("div", {
               className: "w3a-modal__loader-bridge-message",
               children: t("modal.adapter-loader.message1", {
                 adapter: connectorName
               })
-            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            }), jsxRuntime.jsx("div", {
               className: "w3a-modal__loader-bridge-message",
               children: t("modal.adapter-loader.message2", {
                 adapter: connectorName
               })
             })]
           })]
-        }), modalStatus === noModal.CONNECTOR_STATUS.CONNECTED && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        }), modalStatus === noModal.CONNECTOR_STATUS.CONNECTED && jsxRuntime.jsxs("div", {
           className: "w3a--flex w3a--flex-col w3a--items-center",
-          children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+          children: [jsxRuntime.jsx(Icon, {
             iconName: "connected"
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          }), jsxRuntime.jsx("div", {
             className: "w3ajs-modal-loader__message w3a-spinner-message w3a--mt-4",
             children: message
           })]
-        }), modalStatus === noModal.CONNECTOR_STATUS.ERRORED && /*#__PURE__*/jsxRuntime.jsx("div", {
+        }), modalStatus === noModal.CONNECTOR_STATUS.ERRORED && jsxRuntime.jsx("div", {
           className: "w3ajs-modal-loader__message w3a-spinner-message w3a-spinner-message--error",
           children: message
         })]
       })
-    }), (modalStatus === noModal.CONNECTOR_STATUS.CONNECTED || modalStatus === noModal.CONNECTOR_STATUS.ERRORED) && /*#__PURE__*/jsxRuntime.jsx("button", {
+    }), (modalStatus === noModal.CONNECTOR_STATUS.CONNECTED || modalStatus === noModal.CONNECTOR_STATUS.ERRORED) && jsxRuntime.jsx("button", {
       type: "button",
       className: "w3a-header__button w3ajs-loader-close-btn",
       onClick: onClose,

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

@@ -1,8 +1,8 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 require('./styles.css.js');
 var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 
 function Button(props) {
   const {
@@ -17,10 +17,9 @@ function Button(props) {
     type = "button"
   } = props;
   const sizeClass = `size-${size}`;
-  return /*#__PURE__*/jsxRuntime.jsx("button", {
-    disabled: disabled
+  return jsxRuntime.jsx("button", {
+    disabled: disabled,
     // eslint-disable-next-line react/button-has-type
-    ,
     type: type,
     className: `t-btn t-btn-${variant} w3a--rounded-full ${sizeClass} ${className}`,
     onClick: onClick,

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

@@ -1,10 +1,10 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
 var localeImport = require('../../localeImport.js');
 var Button = require('../Button/Button.js');
 var Image = require('../Image.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 function ExternalWalletButton(props) {
   const {
@@ -14,15 +14,15 @@ function ExternalWalletButton(props) {
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(Button, {
+  return jsxRuntime.jsxs(Button, {
     variant: "tertiary",
     type: "button",
     onClick: () => handleWalletClick(button),
     className: "w3a--w-full w3a--rounded-xl w3a--size-xl !w3a--justify-between w3a--items-center wallet-btn",
     title: button.name,
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--items-center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Image, {
+      children: [jsxRuntime.jsx(Image, {
         imageId: `login-${button.name}`,
         hoverImageId: `login-${button.name}`,
         fallbackImageId: "wallet",
@@ -30,11 +30,11 @@ function ExternalWalletButton(props) {
         width: "24",
         isButton: true,
         extension: button.imgExtension
-      }), /*#__PURE__*/jsxRuntime.jsx("p", {
+      }), jsxRuntime.jsx("p", {
         className: "w3a--ml-2 w3a--text-left w3a--text-sm",
         children: button.displayName
       })]
-    }), button.hasInjectedWallet && /*#__PURE__*/jsxRuntime.jsx("span", {
+    }), button.hasInjectedWallet && jsxRuntime.jsx("span", {
       className: "w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800",
       children: t("modal.external.installed")
     })]

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

@@ -0,0 +1,91 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var localeImport = require('../../localeImport.js');
+var Button = require('../Button/Button.js');
+var Image = require('../Image.js');
+var ExternalWalletHeader = require('./ExternalWalletHeader.js');
+
+function ExternalWalletChainNamespace(props) {
+  const {
+    button,
+    goBack,
+    closeModal,
+    handleExternalWalletClick
+  } = props;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  // chainNames should be available when selecting a chain namespace
+  const chainNamespaces = button.chainNamespaces.map(chainNamespace => {
+    const imageId = chainNamespace === "eip155" ? "evm" : chainNamespace;
+    const displayName = chainNamespace === "eip155" ? "EVM" : chainNamespace;
+    return {
+      chainNamespace,
+      displayName,
+      imageId: `chain-${imageId}`
+    };
+  });
+  return jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsx(ExternalWalletHeader, {
+      title: `${t("modal.external.select-chain")}`,
+      goBack: goBack,
+      closeModal: closeModal
+    }), jsxRuntime.jsx("div", {
+      className: "w3a--flex w3a--justify-center w3a--my-6",
+      children: jsxRuntime.jsx(Image, {
+        imageId: `login-${button.name}`,
+        hoverImageId: `login-${button.name}`,
+        fallbackImageId: "wallet",
+        height: "100",
+        width: "100",
+        isButton: true,
+        extension: button.imgExtension
+      })
+    }), jsxRuntime.jsx("p", {
+      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 w3a--my-6",
+      children: t("modal.external.select-chain-description", {
+        wallet: button.displayName
+      })
+    }), jsxRuntime.jsx("ul", {
+      className: "w3a--flex w3a--flex-col w3a--gap-3",
+      children: chainNamespaces.map(({
+        chainNamespace,
+        displayName,
+        imageId
+      }) => jsxRuntime.jsx("li", {
+        children: jsxRuntime.jsxs(Button, {
+          variant: "tertiary",
+          type: "button",
+          onClick: () => handleExternalWalletClick({
+            connector: button.name,
+            chainNamespace
+          }),
+          className: "w3a--w-full w3a--size-xl !w3a--justify-between w3a--items-center wallet-btn",
+          title: displayName,
+          children: [jsxRuntime.jsxs("div", {
+            className: "w3a--flex w3a--items-center",
+            children: [jsxRuntime.jsx(Image, {
+              imageId: imageId,
+              hoverImageId: imageId,
+              fallbackImageId: "wallet",
+              height: "24",
+              width: "24",
+              isButton: true,
+              extension: "svg"
+            }), jsxRuntime.jsx("p", {
+              className: "w3a--ml-2 w3a--text-left w3a--text-sm first-letter:w3a--capitalize",
+              children: displayName
+            })]
+          }), jsxRuntime.jsx("span", {
+            className: "w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800",
+            children: t("modal.external.installed")
+          })]
+        })
+      }, chainNamespace))
+    })]
+  });
+}
+
+module.exports = ExternalWalletChainNamespace;

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var interfaces = require('../../interfaces.js');
@@ -9,7 +10,6 @@ var Loader = require('../Loader.js');
 var WalletConnect = require('../WalletConnect.js');
 var ExternalWalletHeader = require('./ExternalWalletHeader.js');
 var ExternalWalletInstall = require('./ExternalWalletInstall.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 function ExternalWalletConnect(props) {
   const {
@@ -25,33 +25,33 @@ function ExternalWalletConnect(props) {
   const showWalletDownload = () => {
     setIsWalletDownloadShown(true);
   };
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    children: isWalletDownloadShown ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: /*#__PURE__*/jsxRuntime.jsx(ExternalWalletInstall, {
+  return jsxRuntime.jsx("div", {
+    children: isWalletDownloadShown ? jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsx(ExternalWalletInstall, {
         connectButton: connectButton,
         goBack: () => setIsWalletDownloadShown(false),
         closeModal: closeModal
       })
-    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(ExternalWalletHeader, {
+    }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(ExternalWalletHeader, {
         title: connectButton.displayName,
         goBack: goBack,
         closeModal: closeModal
-      }), !walletConnectUri ? /*#__PURE__*/jsxRuntime.jsx(Loader, {
+      }), !walletConnectUri ? jsxRuntime.jsx(Loader, {
         modalStatus: interfaces.MODAL_STATUS.CONNECTING,
         canEmit: false
-      }) : /*#__PURE__*/jsxRuntime.jsx(WalletConnect, {
+      }) : jsxRuntime.jsx(WalletConnect, {
         walletConnectUri: walletConnectUri,
         logoImage: `https://images.web3auth.io/login-${connectButton.name}.${connectButton.imgExtension}`,
         primaryColor: connectButton.walletRegistryItem.primaryColor
-      }), connectButton.hasInstallLinks && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), connectButton.hasInstallLinks && jsxRuntime.jsxs("div", {
         className: "w3a--flex w3a--flex-row w3a--items-center w3a--justify-between w3a--gap-2 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white w3a--px-3 w3a--py-2 w3a--rounded-xl",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+        children: [jsxRuntime.jsxs("span", {
           className: "w3a--text-sm w3a--truncate w3a--flex-grow-0",
-          children: [t("modal.external.dont-have"), " ", /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: [t("modal.external.dont-have"), " ", jsxRuntime.jsx("span", {
             children: connectButton.displayName
           }), "?"]
-        }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+        }), jsxRuntime.jsx(Button, {
           type: "button",
           variant: "secondary",
           size: "xs",

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

@@ -1,19 +1,29 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
+var ExternalWalletChainNamespace = require('./ExternalWalletChainNamespace.js');
 var ExternalWalletConnect = require('./ExternalWalletConnect.js');
 var ExternalWalletInstall = require('./ExternalWalletInstall.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 function ExternalWalletDetail(props) {
   const {
     connectButton,
     walletConnectUri,
     goBack,
-    closeModal
+    closeModal,
+    handleExternalWalletClick
   } = props;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  // Select chain namespace for injected wallets
+  if (connectButton.hasInjectedWallet) {
+    return jsxRuntime.jsx(ExternalWalletChainNamespace, {
+      handleExternalWalletClick: handleExternalWalletClick,
+      button: connectButton,
+      goBack: goBack,
+      closeModal: closeModal
+    });
+  }
+  return jsxRuntime.jsx("div", {
     children: connectButton.hasWalletConnect ?
-    /*#__PURE__*/
     // Wallet Connect
     jsxRuntime.jsx(ExternalWalletConnect, {
       connectButton: connectButton,
@@ -21,7 +31,6 @@ function ExternalWalletDetail(props) {
       goBack: goBack,
       closeModal: closeModal
     }) :
-    /*#__PURE__*/
     // Download wallets
     jsxRuntime.jsx(ExternalWalletInstall, {
       connectButton: connectButton,

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var Icon = require('../Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
+var Icon = require('../Icon.js');
 
 function ExternalWalletHeader(props) {
   const {
@@ -10,31 +10,31 @@ function ExternalWalletHeader(props) {
     closeModal,
     disableBackButton
   } = props;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: "w3a--flex w3a--flex-row w3a--justify-center w3a--items-center w3a--gap-1",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: "w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-start w3a--mr-auto",
-      children: !disableBackButton && /*#__PURE__*/jsxRuntime.jsx("button", {
+      children: !disableBackButton && jsxRuntime.jsx("button", {
         type: "button",
         className: "w3a-external-back w3ajs-external-back",
         onClick: goBack,
-        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        children: jsxRuntime.jsx(Icon, {
           iconName: "arrow-left-light",
           darkIconName: "arrow-left-dark",
           width: "16",
           height: "16"
         })
       })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), jsxRuntime.jsx("div", {
       className: "w3a-header__title w3a--flex-grow-0 w3a--flex-shrink w3a--truncate w3a--mr-6",
       children: title
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), jsxRuntime.jsx("div", {
       className: "w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-end w3a--ml-auto",
-      children: /*#__PURE__*/jsxRuntime.jsx("button", {
+      children: jsxRuntime.jsx("button", {
         type: "button",
         onClick: closeModal,
         className: "w3a-header__button_wallet w3ajs-close-btn",
-        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        children: jsxRuntime.jsx(Icon, {
           iconName: "x-light",
           darkIconName: "x-dark"
         })