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

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

@@ -15,6 +15,8 @@ var utils = require('../../utils.js');
 var BottomSheet = require('../BottomSheet/BottomSheet.js');
 var ConnectWallet = require('../ConnectWallet/ConnectWallet.js');
 var ConnectWalletChainNamespaceSelect = require('../ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.js');
+var ConnectWalletHeader = require('../ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.js');
+var ConnectWalletQrCode = require('../ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.js');
 var Footer = require('../Footer/Footer.js');
 var Image = require('../Image/Image.js');
 var Loader = require('../Loader/Loader.js');
@@ -22,7 +24,7 @@ var Login = require('../Login/Login.js');
 var Toast = require('../Toast/Toast.js');
 
 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,
@@ -47,7 +49,6 @@ function Root(props) {
   const {
     logoAlignment = "center",
     buttonRadiusType = "pill",
-    enableMainSocialLoginButton = false,
     privacyPolicy = "",
     tncLink = "",
     displayInstalledExternalWallets = true,
@@ -60,9 +61,18 @@ function Root(props) {
     isDark
   } = react.useContext(ThemeContext.ThemedContext);
   const [bodyState, setBodyState] = react.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] = react.useState({
     message: "",
@@ -84,6 +94,11 @@ function Root(props) {
   };
   // Wallet Details
   const deviceDetails = react.useMemo(() => {
+    if (typeof window === "undefined") return {
+      platform: "mobile",
+      browser: "chrome",
+      os: "ios"
+    };
     const browserData = Bowser.getParser(window.navigator.userAgent);
     return {
       platform: browserData.getPlatformType(),
@@ -92,9 +107,9 @@ function Root(props) {
     };
   }, []);
   const mobileInstallLinks = react.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];
@@ -111,7 +126,7 @@ function Root(props) {
           target: "_blank",
           children: jsxRuntime.jsxs("button", {
             type: "button",
-            className: utils.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: utils.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"
@@ -130,24 +145,24 @@ function Root(props) {
                 os: utils.getOsName(osKey)
               })
             }), jsxRuntime.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\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
               src: utils.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 = react.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 ? utils.getBrowserExtensionUrl(browserType, browserExtensionId) : null;
@@ -158,7 +173,7 @@ function Root(props) {
         target: "_blank",
         children: jsxRuntime.jsxs("button", {
           type: "button",
-          className: utils.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: utils.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"
@@ -177,38 +192,26 @@ function Root(props) {
               browser: utils.getBrowserName(deviceDetails.browser)
             })
           }), jsxRuntime.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\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
             src: utils.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 = react.useMemo(() => modalState.externalWalletsConfig, [modalState.externalWalletsConfig]);
   const connectorVisibilityMap = react.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 = react.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]);
@@ -224,20 +227,22 @@ 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;
@@ -246,30 +251,44 @@ function Root(props) {
       return acc;
     }, []);
   }, [connectorVisibilityMap, chainNamespaces, config, deviceDetails.platform, isWalletConnectConnectorIncluded]);
+  const allButtons = react.useMemo(() => {
+    return [...generateWalletButtons(walletRegistry.default), ...generateWalletButtons(walletRegistry.others)];
+  }, [generateWalletButtons, walletRegistry.default, walletRegistry.others]);
   const installedConnectorButtons = react.useMemo(() => {
     const installedConnectors = Object.keys(config).reduce((acc, connector) => {
-      var _walletRegistryItem$c2, _walletRegistryItem$i2, _config$connector, _config$connector2;
-      if ([noModal.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 === noModal.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 === noModal.WALLET_CONNECTORS.METAMASK && !x.hasInjectedWallet);
+    if (metamaskConnectorIdx !== -1) {
+      const metamaskConnector = installedConnectors[metamaskConnectorIdx];
+      let metamaskRegistryButton = allButtons.find(button => button.name === noModal.WALLET_CONNECTORS.METAMASK);
+      if (!metamaskRegistryButton) {
+        // use the default metamask registry item if it's not in the registry
+        metamaskRegistryButton = generateWalletButtons({
+          [noModal.WALLET_CONNECTORS.METAMASK]: constants.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 = react.useMemo(() => {
     return installedConnectorButtons.filter(button => !button.hasInjectedWallet);
   }, [installedConnectorButtons]);
@@ -278,9 +297,6 @@ function Root(props) {
     // make metamask the first button and limit the number of buttons
     return installedConnectorButtons.sort((a, _) => a.name === noModal.WALLET_CONNECTORS.METAMASK ? -1 : 1).slice(0, displayInstalledExternalWallets ? MAX_TOP_INSTALLED_CONNECTORS : 1);
   }, [installedConnectorButtons, displayInstalledExternalWallets]);
-  const allButtons = react.useMemo(() => {
-    return [...generateWalletButtons(walletRegistry.default), ...generateWalletButtons(walletRegistry.others)];
-  }, [generateWalletButtons, walletRegistry.default, walletRegistry.others]);
   const totalExternalWallets = react.useMemo(() => {
     const uniqueWalletSet = new Set();
     return allButtons.concat(installedConnectorButtons).filter(button => {
@@ -296,15 +312,19 @@ function Root(props) {
     setIsWalletDetailsExpanded(prev => !prev);
   };
   const containerMaxHeight = react.useMemo(() => {
+    var _bodyState$metamaskQr;
     const isPrivacyPolicyOrTncLink = privacyPolicy || tncLink;
-    const isEnableMainSocialLoginButton = enableMainSocialLoginButton;
     // Loader Screen
     if (modalState.status !== interfaces.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
     if (modalState.currentPage === constants.PAGES.CONNECT_WALLET) {
@@ -316,28 +336,32 @@ 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 = react.useMemo(() => ({
     bodyState,
     setBodyState,
     toast,
     setToast
   }), [bodyState, setBodyState, toast, setToast]);
+  const isShowLoader = react.useMemo(() => {
+    // don't show loader if metamask is connecting and there is a connect uri
+    if (modalState.detailedLoaderConnector === noModal.WALLET_CONNECTORS.METAMASK && modalState.metamaskConnectUri) {
+      return false;
+    }
+    return modalState.status !== interfaces.MODAL_STATUS.INITIALIZED;
+  }, [modalState.detailedLoaderConnector, modalState.metamaskConnectUri, modalState.status]);
   return jsxRuntime.jsx(RootContext.RootContext.Provider, {
     value: contextValue,
     children: jsxRuntime.jsxs("div", {
@@ -351,92 +375,125 @@ function Root(props) {
           className: "w3a--modal-curtain"
         }), jsxRuntime.jsxs("div", {
           className: "w3a--relative w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--p-6",
-          children: [modalState.status !== interfaces.MODAL_STATUS.INITIALIZED ? jsxRuntime.jsx(Loader, {
+          children: [isShowLoader ? jsxRuntime.jsx(Loader, {
             connector: modalState.detailedLoaderConnector,
             connectorName: modalState.detailedLoaderConnectorName,
             modalStatus: modalState.status,
             onClose: onCloseLoader,
             appLogo: appLogo
-          }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [modalState.currentPage === constants.PAGES.LOGIN && showExternalWalletPage && modalState.status === interfaces.MODAL_STATUS.INITIALIZED && jsxRuntime.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 === constants.PAGES.CONNECT_WALLET && !showExternalWalletPage && modalState.status === interfaces.MODAL_STATUS.INITIALIZED && jsxRuntime.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
-            })]
+          }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
+            children: (_bodyState$metamaskQr3 = bodyState.metamaskQrCode) !== null && _bodyState$metamaskQr3 !== void 0 && _bodyState$metamaskQr3.show ? jsxRuntime.jsxs("div", {
+              className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
+              children: [jsxRuntime.jsx(ConnectWalletHeader, {
+                onBackClick: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+                  metamaskQrCode: {
+                    show: false,
+                    wallet: null
+                  }
+                })),
+                currentPage: constants.CONNECT_WALLET_PAGES.SELECTED_WALLET,
+                selectedButton: bodyState.metamaskQrCode.wallet
+              }), jsxRuntime.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}`
+              })]
+            }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [modalState.currentPage === constants.PAGES.LOGIN && showExternalWalletPage && modalState.status === interfaces.MODAL_STATUS.INITIALIZED && jsxRuntime.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 === constants.PAGES.CONNECT_WALLET && !showExternalWalletPage && modalState.status === interfaces.MODAL_STATUS.INITIALIZED && jsxRuntime.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
+              })]
+            })
           }), jsxRuntime.jsx(Footer, {
             privacyPolicy: privacyPolicy,
             termsOfService: tncLink
-          }), bodyState.showMultiChainSelector && jsxRuntime.jsx(BottomSheet, {
+          }), ((_bodyState$multiChain = bodyState.multiChainSelector) === null || _bodyState$multiChain === void 0 ? void 0 : _bodyState$multiChain.show) && jsxRuntime.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: jsxRuntime.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 && jsxRuntime.jsxs(BottomSheet, {
+          }), ((_bodyState$installLin5 = bodyState.installLinks) === null || _bodyState$installLin5 === void 0 ? void 0 : _bodyState$installLin5.show) && jsxRuntime.jsxs(BottomSheet, {
             uiConfig: uiConfig,
-            isShown: bodyState.showWalletDetails,
-            onClose: () => setBodyState({
-              showWalletDetails: false
-            }),
-            children: [jsxRuntime.jsx("div", {
+            isShown: bodyState.installLinks.show,
+            onClose: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+              installLinks: {
+                show: false,
+                wallet: null
+              }
+            })),
+            children: [jsxRuntime.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")
+            }), jsxRuntime.jsx("div", {
               className: "w3a--my-4 w3a--flex w3a--justify-center",
               children: jsxRuntime.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
               })
             }), jsxRuntime.jsx("ul", {
               className: "w3a--flex w3a--flex-col w3a--gap-y-2",

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

@@ -8,19 +8,19 @@ var Button_type = require('../Button/Button.type.js');
 var LoginHint = require('../LoginHint/LoginHint.js');
 
 function getProviderIcon(method, isDark, extension) {
-  const imageId = method === auth.AUTH_CONNECTION.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+  const imageId = method === auth.AUTH_CONNECTION.TWITTER ? `login-X${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
   const hoverId = method === auth.AUTH_CONNECTION.APPLE || method === auth.AUTH_CONNECTION.GITHUB || method === auth.AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("img", {
       id: "active-login-img",
       src: `https://images.web3auth.io/${hoverId}${extension}`,
       alt: "active-login-img",
-      className: "w3a--size-5 w3a--object-contain"
+      className: "w3a--hidden w3a--size-5 w3a--object-contain group-hover:w3a--block"
     }), jsxRuntime.jsx("img", {
       id: "login-img",
       src: `https://images.web3auth.io/${imageId}${extension}`,
       alt: "login-img",
-      className: "w3a--size-5 w3a--object-contain"
+      className: "w3a--block w3a--size-5 w3a--object-contain group-hover:w3a--hidden"
     })]
   });
 }
@@ -46,31 +46,11 @@ function SocialLoginList(props) {
     }
   };
   if (visibleRow.length !== 0 && (otherRow === null || otherRow === void 0 ? void 0 : otherRow.length) === 0) {
-    var _visibleRow$;
-    const isMainOption = (_visibleRow$ = visibleRow[0]) === null || _visibleRow$ === void 0 ? void 0 : _visibleRow$.isMainOption;
-    const rowsToShow = isMainOption ? visibleRow.filter(row => !row.isMainOption) : visibleRow;
-    return jsxRuntime.jsxs("div", {
+    return jsxRuntime.jsx("div", {
       className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
-      children: [isMainOption && jsxRuntime.jsx(Button, {
-        type: Button_type.BUTTON_TYPE.SOCIAL,
-        props: {
-          showText: false,
-          method: visibleRow[0].method,
-          isDark,
-          isPrimaryBtn: false,
-          btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-full w3a-arrow w3a-img-login-group",
-          children: jsxRuntime.jsx(jsxRuntime.Fragment, {
-            children: getProviderIcon(visibleRow[0].method, isDark, ".svg")
-          }),
-          onClick: () => handleSocialLoginClick({
-            connector: visibleRow[0].connector,
-            loginParams: visibleRow[0].loginParams
-          }),
-          buttonRadius
-        }
-      }, visibleRow[0].method), jsxRuntime.jsxs("div", {
+      children: jsxRuntime.jsxs("div", {
         className: utils.cn("w3a--grid w3a--w-full w3a--gap-x-2", getGridRowFromVisibleLogin()),
-        children: [rowsToShow.filter((_, index) => rowsToShow.length === 4 ? index <= 3 : index < 3).map(row => jsxRuntime.jsx(LoginHint, {
+        children: [visibleRow.filter((_, index) => visibleRow.length === 4 ? index <= 3 : index < 3).map(row => jsxRuntime.jsx(LoginHint, {
           content: "Last Login",
           isDark: isDark,
           hideHint: true,
@@ -81,7 +61,7 @@ function SocialLoginList(props) {
               method: row.method,
               isDark,
               isPrimaryBtn: false,
-              btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-full w3a-arrow w3a-img-login-group",
+              btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
               children: jsxRuntime.jsx(jsxRuntime.Fragment, {
                 children: getProviderIcon(row.method, isDark, ".svg")
               }),
@@ -92,11 +72,12 @@ function SocialLoginList(props) {
               buttonRadius
             }
           }, row.method)
-        }, row.method)), canShowMore && rowsToShow.length > 4 && jsxRuntime.jsx(Button, {
+        }, row.method)), canShowMore && visibleRow.length > 4 && jsxRuntime.jsx(Button, {
           type: Button_type.BUTTON_TYPE.SOCIAL,
           props: {
             showIcon: false,
             onClick: handleExpandSocialLogins,
+            btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11",
             children: jsxRuntime.jsx("img", {
               src: utils.getIcons(isDark ? "dots-dark-horizontal" : "dots-light-horizontal"),
               alt: "Logo",
@@ -105,7 +86,7 @@ function SocialLoginList(props) {
             buttonRadius
           }
         })]
-      })]
+      })
     });
   }
   return jsxRuntime.jsxs("div", {
@@ -120,9 +101,9 @@ function SocialLoginList(props) {
         className: "w3a--object-contain"
       })
     }), jsxRuntime.jsx("div", {
-      className: "w3a--grid w3a--h-[300px] w3a--w-full w3a--auto-rows-min w3a--grid-cols-1 w3a--gap-y-2 w3a--overflow-y-auto w3a--px-1",
+      className: "w3a--social-container w3a--grid w3a--h-[300px] w3a--w-full w3a--auto-rows-min w3a--grid-cols-1 w3a--gap-y-2 w3a--overflow-y-auto w3a--pl-2 w3a--pr-3",
       children: otherRow.map(row => jsxRuntime.jsx("div", {
-        className: "w3a--h-[50px] w3a--w-full",
+        className: "w3a--h-11 w3a--w-full",
         children: jsxRuntime.jsx(Button, {
           type: Button_type.BUTTON_TYPE.SOCIAL,
           props: {
@@ -133,7 +114,7 @@ function SocialLoginList(props) {
               connector: row.connector,
               loginParams: row.loginParams
             }),
-            btnStyle: "w3a--flex w3a--items-center !w3a--justify-start w3a--w-full w3a--h-full w3a-arrow w3a-img-login-group",
+            btnStyle: "w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--items-center !w3a--justify-start w3a--w-full w3a--h-11",
             buttonRadius,
             children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
               children: [getProviderIcon(row.method, isDark, ".svg"), jsxRuntime.jsx("p", {
@@ -141,8 +122,8 @@ function SocialLoginList(props) {
                 children: row.name
               }), jsxRuntime.jsx("img", {
                 id: "login-arrow",
-                className: "w3a--icon-animation w3a--ml-auto",
-                src: utils.getIcons(props.isDark ? "chevron-right-dark" : "chevron-right-light"),
+                className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+                src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
                 alt: "arrow"
               })]
             })