@web3auth/modal 10.16.0 → 11.0.0-beta.1

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

@@ -1,524 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import { WALLET_CONNECTORS } from '@web3auth/no-modal';
-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, getOsName, getIcons, cn, 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$installLin5, _bodyState$multiChain, _bodyState$multiChain2, _bodyState$installLin6;
-  const {
-    setModalState,
-    modalState,
-    handleExternalWalletBtnClick,
-    handleMobileVerifyConnect,
-    chainNamespaces,
-    walletRegistry,
-    appLogo,
-    onCloseLoader,
-    handleSocialLoginClick,
-    showPasswordLessInput,
-    showExternalWalletButton,
-    socialLoginsConfig,
-    areSocialLoginsVisible,
-    isEmailPrimary,
-    isExternalPrimary,
-    showExternalWalletPage,
-    isEmailPasswordLessLoginVisible,
-    isSmsPasswordLessLoginVisible,
-    preHandleExternalWalletClick,
-    uiConfig,
-    deviceDetails,
-    isConnectAndSignAuthenticationMode
-  } = props;
-  const {
-    logoAlignment = "center",
-    buttonRadiusType = "pill",
-    privacyPolicy = "",
-    tncLink = "",
-    displayInstalledExternalWallets = true,
-    displayExternalWalletsCount = true,
-    hideSuccessScreen = false
-  } = 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);
-  };
-  const isExternalWalletModeOnly = useMemo(() => {
-    return !showPasswordLessInput && !areSocialLoginsVisible;
-  }, [areSocialLoginsVisible, showPasswordLessInput]);
-
-  // Wallet Details
-  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,
-        isInstalled: !!connectorConfig,
-        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 allRegistryButtons = 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,
-        isInstalled: true,
-        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 = allRegistryButtons.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
-          isInstalled: true
-        }));
-      }
-    }
-
-    // make metamask the first button and limit the number of buttons
-    return installedConnectors;
-  }, [allRegistryButtons, 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 allExternalWallets = useMemo(() => {
-    const uniqueButtonSet = new Set();
-    return installedConnectorButtons.concat(allRegistryButtons).filter(button => {
-      if (uniqueButtonSet.has(button.name)) return false;
-      uniqueButtonSet.add(button.name);
-      return true;
-    });
-  }, [allRegistryButtons, installedConnectorButtons]);
-  const remainingUndisplayedWallets = useMemo(() => {
-    return allExternalWallets.filter(button => {
-      return !topInstalledConnectorButtons.includes(button);
-    }).length;
-  }, [allExternalWallets, topInstalledConnectorButtons]);
-  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 ? "680px" : "628px";
-    }
-
-    // MetaMask QR Code Screen
-    if ((_bodyState$metamaskQr = bodyState.metamaskQrCode) !== null && _bodyState$metamaskQr !== void 0 && _bodyState$metamaskQr.show) {
-      return isPrivacyPolicyOrTncLink ? "680px" : "628px";
-    }
-
-    // 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(() => {
-    return modalState.status !== MODAL_STATUS.INITIALIZED;
-  }, [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,
-            isConnectAndSignAuthenticationMode: isConnectAndSignAuthenticationMode,
-            externalWalletsConfig: modalState.externalWalletsConfig,
-            walletRegistry: walletRegistry,
-            handleMobileVerifyConnect: handleMobileVerifyConnect,
-            hideSuccessScreen: hideSuccessScreen
-          }) : /*#__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}`,
-                platform: deviceDetails.platform
-              })]
-            }) : /*#__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: allExternalWallets.length,
-                remainingUndisplayedWallets: remainingUndisplayedWallets,
-                logoAlignment: logoAlignment,
-                buttonRadius: buttonRadiusType,
-                deviceDetails: deviceDetails,
-                handleSocialLoginClick: handleSocialLoginClick,
-                handleExternalWalletBtnClick: onExternalWalletBtnClick,
-                handleSocialLoginHeight: handleSocialLoginHeight,
-                handleExternalWalletClick: preHandleExternalWalletClick
-              }), modalState.currentPage === PAGES.CONNECT_WALLET && (!showExternalWalletPage || isExternalWalletModeOnly) && modalState.status === MODAL_STATUS.INITIALIZED && /*#__PURE__*/jsx(ConnectWallet, {
-                isDark: isDark,
-                walletConnectUri: modalState.walletConnectUri,
-                metamaskConnectUri: modalState.metamaskConnectUri,
-                config: modalState.externalWalletsConfig,
-                walletRegistry: walletRegistry,
-                allRegistryButtons: allRegistryButtons,
-                connectorVisibilityMap: connectorVisibilityMap,
-                customConnectorButtons: customConnectorButtons,
-                deviceDetails: deviceDetails,
-                chainNamespace: chainNamespaces,
-                buttonRadius: buttonRadiusType,
-                handleWalletDetailsHeight: handleWalletDetailsHeight,
-                isExternalWalletModeOnly: isExternalWalletModeOnly,
-                onBackClick: onBackClick,
-                handleExternalWalletClick: preHandleExternalWalletClick,
-                disableBackButton: ((_bodyState$installLin5 = bodyState.installLinks) === null || _bodyState$installLin5 === void 0 ? void 0 : _bodyState$installLin5.show) || ((_bodyState$multiChain = bodyState.multiChainSelector) === null || _bodyState$multiChain === void 0 ? void 0 : _bodyState$multiChain.show)
-              })]
-            })
-          }), /*#__PURE__*/jsx(Footer, {
-            privacyPolicy: privacyPolicy,
-            termsOfService: tncLink
-          }), ((_bodyState$multiChain2 = bodyState.multiChainSelector) === null || _bodyState$multiChain2 === void 0 ? void 0 : _bodyState$multiChain2.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$installLin6 = bodyState.installLinks) === null || _bodyState$installLin6 === void 0 ? void 0 : _bodyState$installLin6.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 };