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

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

@@ -0,0 +1,520 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { WALLET_CONNECTORS } from '@web3auth/no-modal';
+import Bowser from 'bowser';
+import { useContext, useState, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+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';
+import i18nInstance from '../../localeImport.js';
+import { getMobileInstallLink, cn, getOsName, getIcons, getBrowserExtensionUrl, getBrowserName } from '../../utils.js';
+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';
+import Login from '../Login/Login.js';
+import Toast from '../Toast/Toast.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Root(props) {
+  var _bodyState$installLin2, _bodyState$installLin4, _bodyState$metamaskQr2, _bodyState$metamaskQr3, _bodyState$metamaskQr4, _bodyState$multiChain, _bodyState$installLin5;
+  const {
+    setModalState,
+    modalState,
+    handleExternalWalletBtnClick,
+    chainNamespaces,
+    walletRegistry,
+    appLogo,
+    onCloseLoader,
+    handleSocialLoginClick,
+    showPasswordLessInput,
+    showExternalWalletButton,
+    socialLoginsConfig,
+    areSocialLoginsVisible,
+    isEmailPrimary,
+    isExternalPrimary,
+    showExternalWalletPage,
+    isEmailPasswordLessLoginVisible,
+    isSmsPasswordLessLoginVisible,
+    preHandleExternalWalletClick,
+    uiConfig
+  } = props;
+  const {
+    logoAlignment = "center",
+    buttonRadiusType = "pill",
+    privacyPolicy = "",
+    tncLink = "",
+    displayInstalledExternalWallets = true,
+    displayExternalWalletsCount = true
+  } = uiConfig;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const {
+    isDark
+  } = useContext(ThemedContext);
+  const [bodyState, setBodyState] = useState({
+    metamaskQrCode: {
+      show: false,
+      wallet: null
+    },
+    installLinks: {
+      show: false,
+      wallet: null
+    },
+    multiChainSelector: {
+      show: false,
+      wallet: null
+    }
+  });
+  const [toast, setToast] = useState({
+    message: "",
+    type: TOAST_TYPE.SUCCESS
+  });
+  const [isSocialLoginsExpanded, setIsSocialLoginsExpanded] = useState(false);
+  const [isWalletDetailsExpanded, setIsWalletDetailsExpanded] = useState(false);
+  const onExternalWalletBtnClick = flag => {
+    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+      currentPage: PAGES.CONNECT_WALLET
+    }));
+    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(flag);
+  };
+  const onBackClick = flag => {
+    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+      currentPage: PAGES.LOGIN
+    }));
+    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(flag);
+  };
+
+  // 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(),
+      browser: browserData.getBrowserName().toLowerCase(),
+      os: browserData.getOSName()
+    };
+  }, []);
+  const mobileInstallLinks = useMemo(() => {
+    var _bodyState$installLin;
+    if (deviceDetails.platform === "desktop") return [];
+    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];
+      if (!appId) return acc;
+      const appUrl = getMobileInstallLink(osKey, appId);
+      if (!appUrl) return acc;
+      const logoLight = `${osKey}-light`;
+      const logoDark = `${osKey}-dark`;
+      acc.push(/*#__PURE__*/jsx("li", {
+        className: "w3a--w-full",
+        children: /*#__PURE__*/jsx("a", {
+          href: appUrl,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: /*#__PURE__*/jsxs("button", {
+            type: "button",
+            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"
+            }),
+            children: [/*#__PURE__*/jsx(Image, {
+              imageId: logoLight,
+              darkImageId: logoDark,
+              hoverImageId: logoLight,
+              darkHoverImageId: logoDark,
+              height: "28",
+              width: "28",
+              isButton: true
+            }), /*#__PURE__*/jsx("span", {
+              className: "w3a--text-sm w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+              children: t("modal.external.install-mobile-app", {
+                os: getOsName(osKey)
+              })
+            }), /*#__PURE__*/jsx("img", {
+              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$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$installLin3;
+    if (deviceDetails.platform !== "desktop") return [];
+    // if browser is brave, use chrome extension
+    const browserType = deviceDetails.browser === "brave" ? "chrome" : deviceDetails.browser;
+    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;
+    const installLink = browserExtensionUrl ? /*#__PURE__*/jsx("li", {
+      children: /*#__PURE__*/jsx("a", {
+        href: browserExtensionUrl,
+        rel: "noopener noreferrer",
+        target: "_blank",
+        children: /*#__PURE__*/jsxs("button", {
+          type: "button",
+          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"
+          }),
+          children: [/*#__PURE__*/jsx(Image, {
+            imageId: deviceDetails.browser,
+            darkImageId: deviceDetails.browser,
+            hoverImageId: deviceDetails.browser,
+            darkHoverImageId: deviceDetails.browser,
+            height: "30",
+            width: "30",
+            isButton: true
+          }), /*#__PURE__*/jsx("span", {
+            className: "w3a--text-sm w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+            children: t("modal.external.install-browser-extension", {
+              browser: getBrowserName(deviceDetails.browser)
+            })
+          }), /*#__PURE__*/jsx("img", {
+            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"
+          })]
+        })
+      })
+    }, browserExtensionUrl) : null;
+    return [installLink, ...mobileInstallLinks];
+  }, [(_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 => {
+      var _config$connector;
+      canShowMap[connector] = Boolean((_config$connector = config[connector]) === null || _config$connector === void 0 ? void 0 : _config$connector.showOnModal);
+    });
+    return canShowMap;
+  }, [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]);
+  const generateWalletButtons = useCallback(wallets => {
+    return Object.keys(wallets).reduce((acc, wallet) => {
+      var _walletRegistryItem$c, _walletRegistryItem$i, _walletRegistryItem$w;
+      if (connectorVisibilityMap[wallet] === false) return acc;
+      const walletRegistryItem = wallets[wallet];
+      let href = "";
+      if (deviceDetails.platform !== "desktop") {
+        var _walletRegistryItem$m, _walletRegistryItem$m2;
+        const universalLink = walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$m = walletRegistryItem.mobile) === null || _walletRegistryItem$m === void 0 ? void 0 : _walletRegistryItem$m.universal;
+        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) || connectorChainNamespaces.includes(x));
+      const button = {
+        name: wallet,
+        displayName: walletRegistryItem.name,
+        href,
+        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: connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.icon,
+        chainNamespaces: availableChainNamespaces
+      };
+      if (!button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks) return acc;
+      if (availableChainNamespaces.length === 0) return acc;
+      acc.push(button);
+      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) => {
+      if (connector === WALLET_CONNECTORS.WALLET_CONNECT_V2 || !connectorVisibilityMap[connector]) return acc;
+      const connectorConfig = config[connector];
+      acc.push({
+        name: connector,
+        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,
+        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;
+  }, [allButtons, config, connectorVisibilityMap, generateWalletButtons]);
+  const customConnectorButtons = useMemo(() => {
+    return installedConnectorButtons.filter(button => !button.hasInjectedWallet);
+  }, [installedConnectorButtons]);
+  const topInstalledConnectorButtons = useMemo(() => {
+    const MAX_TOP_INSTALLED_CONNECTORS = 3;
+
+    // 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 totalExternalWallets = useMemo(() => {
+    const uniqueWalletSet = new Set();
+    return allButtons.concat(installedConnectorButtons).filter(button => {
+      if (uniqueWalletSet.has(button.name)) return false;
+      uniqueWalletSet.add(button.name);
+      return true;
+    }).length;
+  }, [allButtons, installedConnectorButtons]);
+  const handleSocialLoginHeight = () => {
+    setIsSocialLoginsExpanded(prev => !prev);
+  };
+  const handleWalletDetailsHeight = () => {
+    setIsWalletDetailsExpanded(prev => !prev);
+  };
+  const containerMaxHeight = useMemo(() => {
+    var _bodyState$metamaskQr;
+    const isPrivacyPolicyOrTncLink = privacyPolicy || tncLink;
+
+    // Loader Screen
+    if (modalState.status !== MODAL_STATUS.INITIALIZED) {
+      return "530px";
+    }
+
+    // Wallet Details Screen
+    if (isWalletDetailsExpanded) {
+      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 === PAGES.CONNECT_WALLET) {
+      return isPrivacyPolicyOrTncLink ? "640px" : "580px";
+    }
+
+    // Expanded Social Login Screen
+    if (isSocialLoginsExpanded) {
+      return isPrivacyPolicyOrTncLink ? "644px" : "588px";
+    }
+
+    // Only MetaMask
+    if (topInstalledConnectorButtons.length === 1) {
+      return isPrivacyPolicyOrTncLink ? "560px" : "530px";
+    }
+
+    // More than 1 connector
+    if (topInstalledConnectorButtons.length > 1) {
+      const maxHeight = 500 + (topInstalledConnectorButtons.length - 1) * 58;
+      if (isPrivacyPolicyOrTncLink) {
+        return `${maxHeight + 60}px`;
+      }
+      return `${maxHeight + 16}px`;
+    }
+    // Default
+    return "539px";
+  }, [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", {
+      className: "w3a--relative w3a--flex w3a--flex-col",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "w3a--relative w3a--h-screen w3a--overflow-hidden w3a--transition-all w3a--duration-[400ms] w3a--ease-in-out",
+        style: {
+          maxHeight: containerMaxHeight
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          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: [isShowLoader ? /*#__PURE__*/jsx(Loader, {
+            connector: modalState.detailedLoaderConnector,
+            connectorName: modalState.detailedLoaderConnectorName,
+            modalStatus: modalState.status,
+            onClose: onCloseLoader,
+            appLogo: appLogo
+          }) : /*#__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$multiChain = bodyState.multiChainSelector) === null || _bodyState$multiChain === void 0 ? void 0 : _bodyState$multiChain.show) && /*#__PURE__*/jsx(BottomSheet, {
+            uiConfig: uiConfig,
+            isShown: bodyState.multiChainSelector.show,
+            onClose: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+              multiChainSelector: {
+                show: false,
+                wallet: null
+              }
+            })),
+            children: /*#__PURE__*/jsx(ConnectWalletChainNamespaceSelect, {
+              isDark: isDark,
+              wallet: bodyState.multiChainSelector.wallet,
+              handleExternalWalletClick: params => {
+                preHandleExternalWalletClick(params);
+                setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+                  multiChainSelector: {
+                    show: false,
+                    wallet: null
+                  }
+                }));
+              }
+            })
+          }), ((_bodyState$installLin5 = bodyState.installLinks) === null || _bodyState$installLin5 === void 0 ? void 0 : _bodyState$installLin5.show) && /*#__PURE__*/jsxs(BottomSheet, {
+            uiConfig: uiConfig,
+            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.installLinks.wallet.name}`,
+                hoverImageId: `login-${bodyState.installLinks.wallet.name}`,
+                fallbackImageId: "wallet",
+                height: "80",
+                width: "80",
+                isButton: true,
+                extension: bodyState.installLinks.wallet.imgExtension
+              })
+            }), /*#__PURE__*/jsx("ul", {
+              className: "w3a--flex w3a--flex-col w3a--gap-y-2",
+              children: deviceDetails.platform === "desktop" ? desktopInstallLinks : mobileInstallLinks
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsx(Toast, {})]
+    })
+  });
+}
+
+export { Root as default };

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

@@ -0,0 +1,135 @@
+import { AUTH_CONNECTION } from '@web3auth/auth';
+import { cn, getIcons } from '../../utils.js';
+import Button from '../Button/Button.js';
+import { BUTTON_TYPE } from '../Button/Button.type.js';
+import LoginHint from '../LoginHint/LoginHint.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function getProviderIcon(method, isDark, extension) {
+  const imageId = method === AUTH_CONNECTION.TWITTER ? `login-X${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+  const hoverId = method === AUTH_CONNECTION.APPLE || method === AUTH_CONNECTION.GITHUB || method === AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("img", {
+      id: "active-login-img",
+      src: `https://images.web3auth.io/${hoverId}${extension}`,
+      alt: "active-login-img",
+      className: "w3a--hidden w3a--size-5 w3a--object-contain group-hover:w3a--block"
+    }), /*#__PURE__*/jsx("img", {
+      id: "login-img",
+      src: `https://images.web3auth.io/${imageId}${extension}`,
+      alt: "login-img",
+      className: "w3a--block w3a--size-5 w3a--object-contain group-hover:w3a--hidden"
+    })]
+  });
+}
+function SocialLoginList(props) {
+  const {
+    visibleRow,
+    otherRow,
+    isDark,
+    canShowMore,
+    handleSocialLoginClick,
+    handleExpandSocialLogins,
+    buttonRadius
+  } = props;
+  const getGridRowFromVisibleLogin = () => {
+    if (visibleRow.length === 1) {
+      return "w3a--grid-cols-1";
+    } else if (visibleRow.length === 2) {
+      return "w3a--grid-cols-2";
+    } else if (visibleRow.length === 3) {
+      return "w3a--grid-cols-3";
+    } else {
+      return "w3a--grid-cols-4";
+    }
+  };
+  if (visibleRow.length !== 0 && (otherRow === null || otherRow === void 0 ? void 0 : otherRow.length) === 0) {
+    return /*#__PURE__*/jsx("div", {
+      className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
+      children: /*#__PURE__*/jsxs("div", {
+        className: cn("w3a--grid w3a--w-full w3a--gap-x-2", getGridRowFromVisibleLogin()),
+        children: [visibleRow.filter((_, index) => visibleRow.length === 4 ? index <= 3 : index < 3).map(row => /*#__PURE__*/jsx(LoginHint, {
+          content: "Last Login",
+          isDark: isDark,
+          hideHint: true,
+          children: /*#__PURE__*/jsx(Button, {
+            type: BUTTON_TYPE.SOCIAL,
+            props: {
+              showText: false,
+              method: row.method,
+              isDark,
+              isPrimaryBtn: false,
+              btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
+              children: /*#__PURE__*/jsx(Fragment, {
+                children: getProviderIcon(row.method, isDark, ".svg")
+              }),
+              onClick: () => handleSocialLoginClick({
+                connector: row.connector,
+                loginParams: row.loginParams
+              }),
+              buttonRadius
+            }
+          }, row.method)
+        }, row.method)), canShowMore && visibleRow.length > 4 && /*#__PURE__*/jsx(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: /*#__PURE__*/jsx("img", {
+              src: getIcons(isDark ? "dots-dark-horizontal" : "dots-light-horizontal"),
+              alt: "Logo",
+              className: "w3a--object-contain"
+            }),
+            buttonRadius
+          }
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-start w3a--justify-start w3a--gap-y-4",
+    children: [/*#__PURE__*/jsx("button", {
+      type: "button",
+      className: "w3a--appearance-none",
+      onClick: () => handleExpandSocialLogins(),
+      children: /*#__PURE__*/jsx("img", {
+        src: getIcons(isDark ? "arrow-left-dark" : "arrow-left-light"),
+        alt: "Logo",
+        className: "w3a--object-contain"
+      })
+    }), /*#__PURE__*/jsx("div", {
+      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 => /*#__PURE__*/jsx("div", {
+        className: "w3a--h-11 w3a--w-full",
+        children: /*#__PURE__*/jsx(Button, {
+          type: BUTTON_TYPE.SOCIAL,
+          props: {
+            method: row.method,
+            isDark,
+            isPrimaryBtn: false,
+            onClick: () => handleSocialLoginClick({
+              connector: row.connector,
+              loginParams: row.loginParams
+            }),
+            btnStyle: "w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--items-center !w3a--justify-start w3a--w-full w3a--h-11",
+            buttonRadius,
+            children: /*#__PURE__*/jsxs(Fragment, {
+              children: [getProviderIcon(row.method, isDark, ".svg"), /*#__PURE__*/jsx("p", {
+                className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
+                children: row.name
+              }), /*#__PURE__*/jsx("img", {
+                id: "login-arrow",
+                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 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+                src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+                alt: "arrow"
+              })]
+            })
+          }
+        })
+      }, row.method))
+    })]
+  });
+}
+
+export { SocialLoginList as default };