@web3auth/modal 10.0.0-beta.1 → 10.0.0-beta.11

package/dist/lib.esm/packages/modal/src/ui/components/Root/Root.js

@@ -3,7 +3,7 @@ import { WALLET_CONNECTORS } from '@web3auth/no-modal';
 import Bowser from 'bowser';
 import { useContext, useState, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PAGES } from '../../constants.js';
+import { DEFAULT_METAMASK_WALLET_REGISTRY_ITEM, PAGES, CONNECT_WALLET_PAGES } from '../../constants.js';
 import { RootContext } from '../../context/RootContext.js';
 import { ThemedContext } from '../../context/ThemeContext.js';
 import { TOAST_TYPE, MODAL_STATUS } from '../../interfaces.js';
@@ -12,6 +12,8 @@ import { getMobileInstallLink, cn, getOsName, getIcons, getBrowserExtensionUrl,
 import BottomSheet from '../BottomSheet/BottomSheet.js';
 import ConnectWallet from '../ConnectWallet/ConnectWallet.js';
 import ConnectWalletChainNamespaceSelect from '../ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.js';
+import ConnectWalletHeader from '../ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.js';
+import ConnectWalletQrCode from '../ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.js';
 import Footer from '../Footer/Footer.js';
 import Image from '../Image/Image.js';
 import Loader from '../Loader/Loader.js';
@@ -20,7 +22,7 @@ import Toast from '../Toast/Toast.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function Root(props) {
-  var _bodyState$walletDeta2, _bodyState$walletDeta4;
+  var _bodyState$installLin2, _bodyState$installLin4, _bodyState$metamaskQr2, _bodyState$metamaskQr3, _bodyState$metamaskQr4, _bodyState$multiChain, _bodyState$installLin5;
   const {
     setModalState,
     modalState,
@@ -45,7 +47,6 @@ function Root(props) {
   const {
     logoAlignment = "center",
     buttonRadiusType = "pill",
-    enableMainSocialLoginButton = false,
     privacyPolicy = "",
     tncLink = "",
     displayInstalledExternalWallets = true,
@@ -58,9 +59,18 @@ function Root(props) {
     isDark
   } = useContext(ThemedContext);
   const [bodyState, setBodyState] = useState({
-    showWalletDetails: false,
-    walletDetails: null,
-    showMultiChainSelector: false
+    metamaskQrCode: {
+      show: false,
+      wallet: null
+    },
+    installLinks: {
+      show: false,
+      wallet: null
+    },
+    multiChainSelector: {
+      show: false,
+      wallet: null
+    }
   });
   const [toast, setToast] = useState({
     message: "",
@@ -83,6 +93,11 @@ function Root(props) {
 
   // Wallet Details
   const deviceDetails = useMemo(() => {
+    if (typeof window === "undefined") return {
+      platform: "mobile",
+      browser: "chrome",
+      os: "ios"
+    };
     const browserData = Bowser.getParser(window.navigator.userAgent);
     return {
       platform: browserData.getPlatformType(),
@@ -91,9 +106,9 @@ function Root(props) {
     };
   }, []);
   const mobileInstallLinks = useMemo(() => {
-    var _bodyState$walletDeta;
+    var _bodyState$installLin;
     if (deviceDetails.platform === "desktop") return [];
-    const installConfig = ((_bodyState$walletDeta = bodyState.walletDetails) === null || _bodyState$walletDeta === void 0 || (_bodyState$walletDeta = _bodyState$walletDeta.walletRegistryItem) === null || _bodyState$walletDeta === void 0 ? void 0 : _bodyState$walletDeta.app) || {};
+    const installConfig = ((_bodyState$installLin = bodyState.installLinks) === null || _bodyState$installLin === void 0 || (_bodyState$installLin = _bodyState$installLin.wallet) === null || _bodyState$installLin === void 0 || (_bodyState$installLin = _bodyState$installLin.walletRegistryItem) === null || _bodyState$installLin === void 0 ? void 0 : _bodyState$installLin.app) || {};
     const installLinks = Object.keys(installConfig).reduce((acc, osKey) => {
       if (!["android", "ios"].includes(osKey)) return acc;
       const appId = installConfig[osKey];
@@ -110,7 +125,7 @@ function Root(props) {
           target: "_blank",
           children: /*#__PURE__*/jsxs("button", {
             type: "button",
-            className: cn("w3a--link-arrow w3a--flex w3a--w-full w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--border w3a--border-app-gray-200 w3a--bg-app-gray-50 w3a--px-5 w3a--py-2.5 hover:w3a--translate-y-[0.5px] hover:w3a--border-app-gray-50 dark:w3a--border-app-gray-500 dark:w3a--bg-app-gray-800 dark:hover:w3a--border-app-gray-800", {
+            className: cn("w3a--group w3a--relative w3a--overflow-hidden w3a--h-11 w3a--flex w3a--w-full w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--border w3a--border-app-gray-200 w3a--bg-app-gray-50 w3a--px-5 w3a--py-2.5 hover:w3a--translate-y-[0.5px] hover:w3a--border-app-gray-50 dark:w3a--border-app-gray-500 dark:w3a--bg-app-gray-800 dark:hover:w3a--border-app-gray-800", {
               "w3a--rounded-full": buttonRadiusType === "pill",
               "w3a--rounded-lg": buttonRadiusType === "rounded",
               "w3a--rounded-none": buttonRadiusType === "square"
@@ -129,24 +144,24 @@ function Root(props) {
                 os: getOsName(osKey)
               })
             }), /*#__PURE__*/jsx("img", {
-              id: "device-link-arrow",
-              className: "w3a--icon-animation w3a--ml-auto",
+              id: "install-links-arrow",
+              className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-6 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
               src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
               alt: "arrow"
             })]
           })
         })
-      }));
+      }, appUrl));
       return acc;
     }, []);
     return installLinks;
-  }, [(_bodyState$walletDeta2 = bodyState.walletDetails) === null || _bodyState$walletDeta2 === void 0 || (_bodyState$walletDeta2 = _bodyState$walletDeta2.walletRegistryItem) === null || _bodyState$walletDeta2 === void 0 ? void 0 : _bodyState$walletDeta2.app, deviceDetails.platform, isDark, t, buttonRadiusType]);
+  }, [(_bodyState$installLin2 = bodyState.installLinks) === null || _bodyState$installLin2 === void 0 || (_bodyState$installLin2 = _bodyState$installLin2.wallet) === null || _bodyState$installLin2 === void 0 || (_bodyState$installLin2 = _bodyState$installLin2.walletRegistryItem) === null || _bodyState$installLin2 === void 0 ? void 0 : _bodyState$installLin2.app, deviceDetails.platform, isDark, t, buttonRadiusType]);
   const desktopInstallLinks = useMemo(() => {
-    var _bodyState$walletDeta3;
+    var _bodyState$installLin3;
     if (deviceDetails.platform !== "desktop") return [];
     // if browser is brave, use chrome extension
     const browserType = deviceDetails.browser === "brave" ? "chrome" : deviceDetails.browser;
-    const browserExtensionConfig = ((_bodyState$walletDeta3 = bodyState.walletDetails) === null || _bodyState$walletDeta3 === void 0 || (_bodyState$walletDeta3 = _bodyState$walletDeta3.walletRegistryItem) === null || _bodyState$walletDeta3 === void 0 ? void 0 : _bodyState$walletDeta3.app) || {};
+    const browserExtensionConfig = ((_bodyState$installLin3 = bodyState.installLinks) === null || _bodyState$installLin3 === void 0 || (_bodyState$installLin3 = _bodyState$installLin3.wallet) === null || _bodyState$installLin3 === void 0 || (_bodyState$installLin3 = _bodyState$installLin3.walletRegistryItem) === null || _bodyState$installLin3 === void 0 ? void 0 : _bodyState$installLin3.app) || {};
     const extensionForCurrentBrowser = browserExtensionConfig.browser && browserExtensionConfig.browser.includes(browserType) ? browserExtensionConfig.browser : undefined;
     const browserExtensionId = browserExtensionConfig[browserType] || extensionForCurrentBrowser;
     const browserExtensionUrl = browserExtensionId ? getBrowserExtensionUrl(browserType, browserExtensionId) : null;
@@ -157,7 +172,7 @@ function Root(props) {
         target: "_blank",
         children: /*#__PURE__*/jsxs("button", {
           type: "button",
-          className: cn("w3a--link-arrow w3a--flex w3a--w-full w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--border w3a--border-app-gray-200 w3a--bg-app-gray-50 w3a--px-5 w3a--py-2.5 hover:w3a--translate-y-[0.5px] hover:w3a--border-app-gray-50 dark:w3a--border-app-gray-500 dark:w3a--bg-app-gray-800 dark:hover:w3a--border-app-gray-800", {
+          className: cn("w3a--group w3a--relative w3a--overflow-hidden w3a--h-11 w3a--flex w3a--w-full w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--border w3a--border-app-gray-200 w3a--bg-app-gray-50 w3a--px-5 w3a--py-2.5 hover:w3a--translate-y-[0.5px] hover:w3a--border-app-gray-50 dark:w3a--border-app-gray-500 dark:w3a--bg-app-gray-800 dark:hover:w3a--border-app-gray-800", {
             "w3a--rounded-full": buttonRadiusType === "pill",
             "w3a--rounded-lg": buttonRadiusType === "rounded",
             "w3a--rounded-none": buttonRadiusType === "square"
@@ -176,40 +191,27 @@ function Root(props) {
               browser: getBrowserName(deviceDetails.browser)
             })
           }), /*#__PURE__*/jsx("img", {
-            id: "device-link-arrow",
-            className: "w3a--icon-animation w3a--ml-auto",
+            id: "install-links-arrow",
+            className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-6 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
             src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
             alt: "arrow"
           })]
         })
       })
-    }) : null;
+    }, browserExtensionUrl) : null;
     return [installLink, ...mobileInstallLinks];
-  }, [(_bodyState$walletDeta4 = bodyState.walletDetails) === null || _bodyState$walletDeta4 === void 0 || (_bodyState$walletDeta4 = _bodyState$walletDeta4.walletRegistryItem) === null || _bodyState$walletDeta4 === void 0 ? void 0 : _bodyState$walletDeta4.app, deviceDetails.browser, deviceDetails.platform, isDark, mobileInstallLinks, buttonRadiusType, t]);
+  }, [(_bodyState$installLin4 = bodyState.installLinks) === null || _bodyState$installLin4 === void 0 || (_bodyState$installLin4 = _bodyState$installLin4.wallet) === null || _bodyState$installLin4 === void 0 || (_bodyState$installLin4 = _bodyState$installLin4.walletRegistryItem) === null || _bodyState$installLin4 === void 0 ? void 0 : _bodyState$installLin4.app, deviceDetails.browser, deviceDetails.platform, isDark, mobileInstallLinks, buttonRadiusType, t]);
 
   // External Wallets
-
   const config = useMemo(() => modalState.externalWalletsConfig, [modalState.externalWalletsConfig]);
   const connectorVisibilityMap = useMemo(() => {
     const canShowMap = {};
     Object.keys(config).forEach(connector => {
-      const connectorConfig = config[connector];
-      if (!connectorConfig.showOnModal) {
-        canShowMap[connector] = false;
-        return;
-      }
-      if (deviceDetails.platform === "desktop" && connectorConfig.showOnDesktop) {
-        canShowMap[connector] = true;
-        return;
-      }
-      if ((deviceDetails.platform === "mobile" || deviceDetails.platform === "tablet") && connectorConfig.showOnMobile) {
-        canShowMap[connector] = true;
-        return;
-      }
-      canShowMap[connector] = false;
+      var _config$connector;
+      canShowMap[connector] = Boolean((_config$connector = config[connector]) === null || _config$connector === void 0 ? void 0 : _config$connector.showOnModal);
     });
     return canShowMap;
-  }, [deviceDetails, config]);
+  }, [config]);
   const isWalletConnectConnectorIncluded = useMemo(
   // WC is always included when enabling wallet discovery
   () => Object.keys((walletRegistry === null || walletRegistry === void 0 ? void 0 : walletRegistry.default) || {}).length > 0 || Object.keys((walletRegistry === null || walletRegistry === void 0 ? void 0 : walletRegistry.others) || {}).length > 0, [walletRegistry]);
@@ -225,20 +227,23 @@ function Root(props) {
         const deepLink = walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$m2 = walletRegistryItem.mobile) === null || _walletRegistryItem$m2 === void 0 ? void 0 : _walletRegistryItem$m2.native;
         href = universalLink || deepLink;
       }
+
+      // determine the chain namespaces supported by the wallet
+      const connectorConfig = config[wallet];
+      const connectorChainNamespaces = (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.chainNamespaces) || [];
       const registryNamespaces = new Set((_walletRegistryItem$c = walletRegistryItem.chains) === null || _walletRegistryItem$c === void 0 ? void 0 : _walletRegistryItem$c.map(chain => chain.split(":")[0]));
       const injectedChainNamespaces = new Set((_walletRegistryItem$i = walletRegistryItem.injected) === null || _walletRegistryItem$i === void 0 ? void 0 : _walletRegistryItem$i.map(injected => injected.namespace));
-      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
-      const connector = config[wallet];
+      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x) || connectorChainNamespaces.includes(x));
       const button = {
         name: wallet,
         displayName: walletRegistryItem.name,
         href,
-        hasInjectedWallet: (connector === null || connector === void 0 ? void 0 : connector.isInjected) || false,
+        hasInjectedWallet: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.isInjected) || false,
         hasWalletConnect: isWalletConnectConnectorIncluded && ((_walletRegistryItem$w = walletRegistryItem.walletConnect) === null || _walletRegistryItem$w === void 0 || (_walletRegistryItem$w = _walletRegistryItem$w.sdks) === null || _walletRegistryItem$w === void 0 ? void 0 : _walletRegistryItem$w.includes("sign_v2")),
         hasInstallLinks: Object.keys(walletRegistryItem.app || {}).length > 0,
         walletRegistryItem,
         imgExtension: walletRegistryItem.imgExtension || "svg",
-        icon: connector === null || connector === void 0 ? void 0 : connector.icon,
+        icon: connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.icon,
         chainNamespaces: availableChainNamespaces
       };
       if (!button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks) return acc;
@@ -247,32 +252,46 @@ function Root(props) {
       return acc;
     }, []);
   }, [connectorVisibilityMap, chainNamespaces, config, deviceDetails.platform, isWalletConnectConnectorIncluded]);
+  const allButtons = useMemo(() => {
+    return [...generateWalletButtons(walletRegistry.default), ...generateWalletButtons(walletRegistry.others)];
+  }, [generateWalletButtons, walletRegistry.default, walletRegistry.others]);
   const installedConnectorButtons = useMemo(() => {
     const installedConnectors = Object.keys(config).reduce((acc, connector) => {
-      var _walletRegistryItem$c2, _walletRegistryItem$i2, _config$connector, _config$connector2;
-      if ([WALLET_CONNECTORS.WALLET_CONNECT_V2].includes(connector) || !connectorVisibilityMap[connector]) return acc;
-
-      // determine chain namespaces based on wallet registry
-      const walletRegistryItem = walletRegistry.default[connector];
-      const registryNamespaces = new Set(walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$c2 = walletRegistryItem.chains) === null || _walletRegistryItem$c2 === void 0 ? void 0 : _walletRegistryItem$c2.map(chain => chain.split(":")[0]));
-      const injectedChainNamespaces = new Set(walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$i2 = walletRegistryItem.injected) === null || _walletRegistryItem$i2 === void 0 ? void 0 : _walletRegistryItem$i2.map(injected => injected.namespace));
-      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
+      if (connector === WALLET_CONNECTORS.WALLET_CONNECT_V2 || !connectorVisibilityMap[connector]) return acc;
+      const connectorConfig = config[connector];
       acc.push({
         name: connector,
-        displayName: config[connector].label || connector,
-        hasInjectedWallet: ((_config$connector = config[connector]) === null || _config$connector === void 0 ? void 0 : _config$connector.isInjected) || false,
+        displayName: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.label) || connector,
+        hasInjectedWallet: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.isInjected) || false,
         hasWalletConnect: false,
         hasInstallLinks: false,
-        walletRegistryItem,
-        icon: (_config$connector2 = config[connector]) === null || _config$connector2 === void 0 ? void 0 : _config$connector2.icon,
-        chainNamespaces: availableChainNamespaces
+        icon: connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.icon,
+        chainNamespaces: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.chainNamespaces) || []
       });
       return acc;
     }, []);
 
+    // if metamask connector is not injected, use the registry button instead to display QR code
+    const metamaskConnectorIdx = installedConnectors.findIndex(x => x.name === WALLET_CONNECTORS.METAMASK && !x.hasInjectedWallet);
+    if (metamaskConnectorIdx !== -1) {
+      const metamaskConnector = installedConnectors[metamaskConnectorIdx];
+      let metamaskRegistryButton = allButtons.find(button => button.name === WALLET_CONNECTORS.METAMASK);
+      if (!metamaskRegistryButton) {
+        // use the default metamask registry item if it's not in the registry
+        metamaskRegistryButton = generateWalletButtons({
+          [WALLET_CONNECTORS.METAMASK]: DEFAULT_METAMASK_WALLET_REGISTRY_ITEM
+        })[0];
+      }
+      if (metamaskRegistryButton) {
+        installedConnectors.splice(metamaskConnectorIdx, 1, _objectSpread(_objectSpread({}, metamaskRegistryButton), {}, {
+          chainNamespaces: metamaskConnector.chainNamespaces // preserve the chain namespaces
+        }));
+      }
+    }
+
     // make metamask the first button and limit the number of buttons
     return installedConnectors;
-  }, [config, connectorVisibilityMap, walletRegistry.default, chainNamespaces]);
+  }, [allButtons, config, connectorVisibilityMap, generateWalletButtons]);
   const customConnectorButtons = useMemo(() => {
     return installedConnectorButtons.filter(button => !button.hasInjectedWallet);
   }, [installedConnectorButtons]);
@@ -282,9 +301,6 @@ function Root(props) {
     // make metamask the first button and limit the number of buttons
     return installedConnectorButtons.sort((a, _) => a.name === WALLET_CONNECTORS.METAMASK ? -1 : 1).slice(0, displayInstalledExternalWallets ? MAX_TOP_INSTALLED_CONNECTORS : 1);
   }, [installedConnectorButtons, displayInstalledExternalWallets]);
-  const allButtons = useMemo(() => {
-    return [...generateWalletButtons(walletRegistry.default), ...generateWalletButtons(walletRegistry.others)];
-  }, [generateWalletButtons, walletRegistry.default, walletRegistry.others]);
   const totalExternalWallets = useMemo(() => {
     const uniqueWalletSet = new Set();
     return allButtons.concat(installedConnectorButtons).filter(button => {
@@ -300,17 +316,22 @@ function Root(props) {
     setIsWalletDetailsExpanded(prev => !prev);
   };
   const containerMaxHeight = useMemo(() => {
+    var _bodyState$metamaskQr;
     const isPrivacyPolicyOrTncLink = privacyPolicy || tncLink;
-    const isEnableMainSocialLoginButton = enableMainSocialLoginButton;
 
     // Loader Screen
     if (modalState.status !== MODAL_STATUS.INITIALIZED) {
-      return "642px";
+      return "530px";
     }
 
     // Wallet Details Screen
     if (isWalletDetailsExpanded) {
-      return "588px";
+      return isPrivacyPolicyOrTncLink ? "640px" : "588px";
+    }
+
+    // MetaMask QR Code Screen
+    if ((_bodyState$metamaskQr = bodyState.metamaskQrCode) !== null && _bodyState$metamaskQr !== void 0 && _bodyState$metamaskQr.show) {
+      return isPrivacyPolicyOrTncLink ? "640px" : "588px";
     }
 
     // Connect Wallet Screen
@@ -325,29 +346,33 @@ function Root(props) {
 
     // Only MetaMask
     if (topInstalledConnectorButtons.length === 1) {
-      if (isPrivacyPolicyOrTncLink) {
-        return isEnableMainSocialLoginButton ? "600px" : "560px";
-      }
-      return isEnableMainSocialLoginButton ? "570px" : "530px";
+      return isPrivacyPolicyOrTncLink ? "560px" : "530px";
     }
 
     // More than 1 connector
     if (topInstalledConnectorButtons.length > 1) {
       const maxHeight = 500 + (topInstalledConnectorButtons.length - 1) * 58;
       if (isPrivacyPolicyOrTncLink) {
-        return `${maxHeight + (isEnableMainSocialLoginButton ? 120 : 60)}px`;
+        return `${maxHeight + 60}px`;
       }
-      return `${maxHeight + (isEnableMainSocialLoginButton ? 66 : 16)}px`;
+      return `${maxHeight + 16}px`;
     }
     // Default
     return "539px";
-  }, [isWalletDetailsExpanded, modalState.currentPage, isSocialLoginsExpanded, installedConnectorButtons, privacyPolicy, tncLink, enableMainSocialLoginButton, modalState.status]);
+  }, [privacyPolicy, tncLink, modalState.status, modalState.currentPage, isWalletDetailsExpanded, (_bodyState$metamaskQr2 = bodyState.metamaskQrCode) === null || _bodyState$metamaskQr2 === void 0 ? void 0 : _bodyState$metamaskQr2.show, isSocialLoginsExpanded, topInstalledConnectorButtons.length]);
   const contextValue = useMemo(() => ({
     bodyState,
     setBodyState,
     toast,
     setToast
   }), [bodyState, setBodyState, toast, setToast]);
+  const isShowLoader = useMemo(() => {
+    // don't show loader if metamask is connecting and there is a connect uri
+    if (modalState.detailedLoaderConnector === WALLET_CONNECTORS.METAMASK && modalState.metamaskConnectUri) {
+      return false;
+    }
+    return modalState.status !== MODAL_STATUS.INITIALIZED;
+  }, [modalState.detailedLoaderConnector, modalState.metamaskConnectUri, modalState.status]);
   return /*#__PURE__*/jsx(RootContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/jsxs("div", {
@@ -361,92 +386,125 @@ function Root(props) {
           className: "w3a--modal-curtain"
         }), /*#__PURE__*/jsxs("div", {
           className: "w3a--relative w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--p-6",
-          children: [modalState.status !== MODAL_STATUS.INITIALIZED ? /*#__PURE__*/jsx(Loader, {
+          children: [isShowLoader ? /*#__PURE__*/jsx(Loader, {
             connector: modalState.detailedLoaderConnector,
             connectorName: modalState.detailedLoaderConnectorName,
             modalStatus: modalState.status,
             onClose: onCloseLoader,
             appLogo: appLogo
-          }) : /*#__PURE__*/jsxs(Fragment, {
-            children: [modalState.currentPage === PAGES.LOGIN && showExternalWalletPage && modalState.status === MODAL_STATUS.INITIALIZED && /*#__PURE__*/jsx(Login, {
-              web3authClientId: modalState.web3authClientId,
-              web3authNetwork: modalState.web3authNetwork,
-              isModalVisible: modalState.modalVisibility,
-              isDark: isDark,
-              appLogo: appLogo,
-              showPasswordLessInput: showPasswordLessInput,
-              showExternalWalletButton: showExternalWalletButton,
-              showExternalWalletCount: displayExternalWalletsCount,
-              showInstalledExternalWallets: displayInstalledExternalWallets,
-              socialLoginsConfig: socialLoginsConfig,
-              areSocialLoginsVisible: areSocialLoginsVisible,
-              isEmailPrimary: isEmailPrimary,
-              isExternalPrimary: isExternalPrimary,
-              installedExternalWalletConfig: topInstalledConnectorButtons,
-              isEmailPasswordLessLoginVisible: isEmailPasswordLessLoginVisible,
-              isSmsPasswordLessLoginVisible: isSmsPasswordLessLoginVisible,
-              totalExternalWallets: totalExternalWallets,
-              logoAlignment: logoAlignment,
-              buttonRadius: buttonRadiusType,
-              enableMainSocialLoginButton: enableMainSocialLoginButton,
-              handleSocialLoginClick: handleSocialLoginClick,
-              handleExternalWalletBtnClick: onExternalWalletBtnClick,
-              handleSocialLoginHeight: handleSocialLoginHeight,
-              handleExternalWalletClick: preHandleExternalWalletClick
-            }), modalState.currentPage === PAGES.CONNECT_WALLET && !showExternalWalletPage && modalState.status === MODAL_STATUS.INITIALIZED && /*#__PURE__*/jsx(ConnectWallet, {
-              isDark: isDark,
-              walletConnectUri: modalState.walletConnectUri,
-              config: modalState.externalWalletsConfig,
-              walletRegistry: walletRegistry,
-              allExternalButtons: allButtons,
-              connectorVisibilityMap: connectorVisibilityMap,
-              customConnectorButtons: customConnectorButtons,
-              deviceDetails: {
-                platform: deviceDetails.platform,
-                browser: deviceDetails.browser,
-                os: deviceDetails.os
-              },
-              chainNamespace: chainNamespaces,
-              buttonRadius: buttonRadiusType,
-              handleWalletDetailsHeight: handleWalletDetailsHeight,
-              onBackClick: onBackClick,
-              handleExternalWalletClick: preHandleExternalWalletClick
-            })]
+          }) : /*#__PURE__*/jsx(Fragment, {
+            children: (_bodyState$metamaskQr3 = bodyState.metamaskQrCode) !== null && _bodyState$metamaskQr3 !== void 0 && _bodyState$metamaskQr3.show ? /*#__PURE__*/jsxs("div", {
+              className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
+              children: [/*#__PURE__*/jsx(ConnectWalletHeader, {
+                onBackClick: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+                  metamaskQrCode: {
+                    show: false,
+                    wallet: null
+                  }
+                })),
+                currentPage: CONNECT_WALLET_PAGES.SELECTED_WALLET,
+                selectedButton: bodyState.metamaskQrCode.wallet
+              }), /*#__PURE__*/jsx(ConnectWalletQrCode, {
+                qrCodeValue: modalState.metamaskConnectUri,
+                isDark: isDark,
+                selectedButton: bodyState.metamaskQrCode.wallet,
+                primaryColor: (_bodyState$metamaskQr4 = bodyState.metamaskQrCode.wallet.walletRegistryItem) === null || _bodyState$metamaskQr4 === void 0 ? void 0 : _bodyState$metamaskQr4.primaryColor,
+                logoImage: `https://images.web3auth.io/login-${bodyState.metamaskQrCode.wallet.name}.${bodyState.metamaskQrCode.wallet.imgExtension}`
+              })]
+            }) : /*#__PURE__*/jsxs(Fragment, {
+              children: [modalState.currentPage === PAGES.LOGIN && showExternalWalletPage && modalState.status === MODAL_STATUS.INITIALIZED && /*#__PURE__*/jsx(Login, {
+                web3authClientId: modalState.web3authClientId,
+                web3authNetwork: modalState.web3authNetwork,
+                authBuildEnv: modalState.authBuildEnv,
+                isModalVisible: modalState.modalVisibility,
+                isDark: isDark,
+                appLogo: appLogo,
+                showPasswordLessInput: showPasswordLessInput,
+                showExternalWalletButton: showExternalWalletButton,
+                showExternalWalletCount: displayExternalWalletsCount,
+                showInstalledExternalWallets: displayInstalledExternalWallets,
+                socialLoginsConfig: socialLoginsConfig,
+                areSocialLoginsVisible: areSocialLoginsVisible,
+                isEmailPrimary: isEmailPrimary,
+                isExternalPrimary: isExternalPrimary,
+                installedExternalWalletConfig: topInstalledConnectorButtons,
+                isEmailPasswordLessLoginVisible: isEmailPasswordLessLoginVisible,
+                isSmsPasswordLessLoginVisible: isSmsPasswordLessLoginVisible,
+                totalExternalWallets: totalExternalWallets,
+                logoAlignment: logoAlignment,
+                buttonRadius: buttonRadiusType,
+                handleSocialLoginClick: handleSocialLoginClick,
+                handleExternalWalletBtnClick: onExternalWalletBtnClick,
+                handleSocialLoginHeight: handleSocialLoginHeight,
+                handleExternalWalletClick: preHandleExternalWalletClick
+              }), modalState.currentPage === PAGES.CONNECT_WALLET && !showExternalWalletPage && modalState.status === MODAL_STATUS.INITIALIZED && /*#__PURE__*/jsx(ConnectWallet, {
+                isDark: isDark,
+                walletConnectUri: modalState.walletConnectUri,
+                metamaskConnectUri: modalState.metamaskConnectUri,
+                config: modalState.externalWalletsConfig,
+                walletRegistry: walletRegistry,
+                allExternalButtons: allButtons,
+                connectorVisibilityMap: connectorVisibilityMap,
+                customConnectorButtons: customConnectorButtons,
+                deviceDetails: {
+                  platform: deviceDetails.platform,
+                  browser: deviceDetails.browser,
+                  os: deviceDetails.os
+                },
+                chainNamespace: chainNamespaces,
+                buttonRadius: buttonRadiusType,
+                handleWalletDetailsHeight: handleWalletDetailsHeight,
+                onBackClick: onBackClick,
+                handleExternalWalletClick: preHandleExternalWalletClick
+              })]
+            })
           }), /*#__PURE__*/jsx(Footer, {
             privacyPolicy: privacyPolicy,
             termsOfService: tncLink
-          }), bodyState.showMultiChainSelector && /*#__PURE__*/jsx(BottomSheet, {
+          }), ((_bodyState$multiChain = bodyState.multiChainSelector) === null || _bodyState$multiChain === void 0 ? void 0 : _bodyState$multiChain.show) && /*#__PURE__*/jsx(BottomSheet, {
             uiConfig: uiConfig,
-            isShown: bodyState.showMultiChainSelector,
-            onClose: () => setBodyState({
-              showMultiChainSelector: false
-            }),
+            isShown: bodyState.multiChainSelector.show,
+            onClose: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+              multiChainSelector: {
+                show: false,
+                wallet: null
+              }
+            })),
             children: /*#__PURE__*/jsx(ConnectWalletChainNamespaceSelect, {
               isDark: isDark,
-              wallet: bodyState.walletDetails,
+              wallet: bodyState.multiChainSelector.wallet,
               handleExternalWalletClick: params => {
                 preHandleExternalWalletClick(params);
-                setBodyState({
-                  showMultiChainSelector: false
-                });
+                setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+                  multiChainSelector: {
+                    show: false,
+                    wallet: null
+                  }
+                }));
               }
             })
-          }), bodyState.showWalletDetails && /*#__PURE__*/jsxs(BottomSheet, {
+          }), ((_bodyState$installLin5 = bodyState.installLinks) === null || _bodyState$installLin5 === void 0 ? void 0 : _bodyState$installLin5.show) && /*#__PURE__*/jsxs(BottomSheet, {
             uiConfig: uiConfig,
-            isShown: bodyState.showWalletDetails,
-            onClose: () => setBodyState({
-              showWalletDetails: false
-            }),
-            children: [/*#__PURE__*/jsx("div", {
+            isShown: bodyState.installLinks.show,
+            onClose: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+              installLinks: {
+                show: false,
+                wallet: null
+              }
+            })),
+            children: [/*#__PURE__*/jsx("p", {
+              className: "w3a--mb-2 w3a--text-center w3a--text-base w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white",
+              children: t("modal.getWallet")
+            }), /*#__PURE__*/jsx("div", {
               className: "w3a--my-4 w3a--flex w3a--justify-center",
               children: /*#__PURE__*/jsx(Image, {
-                imageId: `login-${bodyState.walletDetails.name}`,
-                hoverImageId: `login-${bodyState.walletDetails.name}`,
+                imageId: `login-${bodyState.installLinks.wallet.name}`,
+                hoverImageId: `login-${bodyState.installLinks.wallet.name}`,
                 fallbackImageId: "wallet",
                 height: "80",
                 width: "80",
                 isButton: true,
-                extension: bodyState.walletDetails.imgExtension
+                extension: bodyState.installLinks.wallet.imgExtension
               })
             }), /*#__PURE__*/jsx("ul", {
               className: "w3a--flex w3a--flex-col w3a--gap-y-2",