'use strict';

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var jsxRuntime = require('react/jsx-runtime');
var noModal = require('@web3auth/no-modal');
var react = require('react');
var reactI18next = require('react-i18next');
var constants = require('../../constants.js');
var RootContext = require('../../context/RootContext.js');
var ThemeContext = require('../../context/ThemeContext.js');
var interfaces = require('../../interfaces.js');
var localeImport = require('../../localeImport.js');
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');
var Login = require('../Login/Login.js');
var Toast = require('../Toast/Toast.js');

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,
    deviceDetails
  } = props;
  const {
    logoAlignment = "center",
    buttonRadiusType = "pill",
    privacyPolicy = "",
    tncLink = "",
    displayInstalledExternalWallets = true,
    displayExternalWalletsCount = true
  } = uiConfig;
  const [t] = reactI18next.useTranslation(undefined, {
    i18n: localeImport
  });
  const {
    isDark
  } = react.useContext(ThemeContext.ThemedContext);
  const [bodyState, setBodyState] = react.useState({
    metamaskQrCode: {
      show: false,
      wallet: null
    },
    installLinks: {
      show: false,
      wallet: null
    },
    multiChainSelector: {
      show: false,
      wallet: null
    }
  });
  const [toast, setToast] = react.useState({
    message: "",
    type: interfaces.TOAST_TYPE.SUCCESS
  });
  const [isSocialLoginsExpanded, setIsSocialLoginsExpanded] = react.useState(false);
  const [isWalletDetailsExpanded, setIsWalletDetailsExpanded] = react.useState(false);
  const onExternalWalletBtnClick = flag => {
    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
      currentPage: constants.PAGES.CONNECT_WALLET
    }));
    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(flag);
  };
  const onBackClick = flag => {
    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
      currentPage: constants.PAGES.LOGIN
    }));
    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(flag);
  };
  const isExternalWalletModeOnly = react.useMemo(() => {
    return !showPasswordLessInput && !areSocialLoginsVisible;
  }, [areSocialLoginsVisible, showPasswordLessInput]);
  // Wallet Details
  const mobileInstallLinks = react.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 = utils.getMobileInstallLink(osKey, appId);
      if (!appUrl) return acc;
      const logoLight = `${osKey}-light`;
      const logoDark = `${osKey}-dark`;
      acc.push(jsxRuntime.jsx("li", {
        className: "w3a--w-full",
        children: jsxRuntime.jsx("a", {
          href: appUrl,
          rel: "noopener noreferrer",
          target: "_blank",
          children: jsxRuntime.jsxs("button", {
            type: "button",
            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"
            }),
            children: [jsxRuntime.jsx(Image, {
              imageId: logoLight,
              darkImageId: logoDark,
              hoverImageId: logoLight,
              darkHoverImageId: logoDark,
              height: "28",
              width: "28",
              isButton: true
            }), jsxRuntime.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: utils.getOsName(osKey)
              })
            }), jsxRuntime.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\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$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$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 ? utils.getBrowserExtensionUrl(browserType, browserExtensionId) : null;
    const installLink = browserExtensionUrl ? jsxRuntime.jsx("li", {
      children: jsxRuntime.jsx("a", {
        href: browserExtensionUrl,
        rel: "noopener noreferrer",
        target: "_blank",
        children: jsxRuntime.jsxs("button", {
          type: "button",
          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"
          }),
          children: [jsxRuntime.jsx(Image, {
            imageId: deviceDetails.browser,
            darkImageId: deviceDetails.browser,
            hoverImageId: deviceDetails.browser,
            darkHoverImageId: deviceDetails.browser,
            height: "30",
            width: "30",
            isButton: true
          }), jsxRuntime.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: utils.getBrowserName(deviceDetails.browser)
            })
          }), jsxRuntime.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\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
            src: utils.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 = react.useMemo(() => modalState.externalWalletsConfig, [modalState.externalWalletsConfig]);
  const connectorVisibilityMap = react.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 = 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]);
  const generateWalletButtons = react.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 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) => {
      if (connector === noModal.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 === 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
          isInstalled: true
        }));
      }
    }
    // make metamask the first button and limit the number of buttons
    return installedConnectors;
  }, [allButtons, config, connectorVisibilityMap, generateWalletButtons]);
  const customConnectorButtons = react.useMemo(() => {
    return installedConnectorButtons.filter(button => !button.hasInjectedWallet);
  }, [installedConnectorButtons]);
  const topInstalledConnectorButtons = react.useMemo(() => {
    const MAX_TOP_INSTALLED_CONNECTORS = 3;
    // 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 totalExternalWallets = react.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 = react.useMemo(() => {
    var _bodyState$metamaskQr;
    const isPrivacyPolicyOrTncLink = privacyPolicy || tncLink;
    // Loader Screen
    if (modalState.status !== interfaces.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 === constants.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 = react.useMemo(() => ({
    bodyState,
    setBodyState,
    toast,
    setToast
  }), [bodyState, setBodyState, toast, setToast]);
  const isShowLoader = react.useMemo(() => {
    return modalState.status !== interfaces.MODAL_STATUS.INITIALIZED;
  }, [modalState.status]);
  return jsxRuntime.jsx(RootContext.RootContext.Provider, {
    value: contextValue,
    children: jsxRuntime.jsxs("div", {
      className: "w3a--relative w3a--flex w3a--flex-col",
      children: [jsxRuntime.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: [jsxRuntime.jsx("div", {
          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: [isShowLoader ? jsxRuntime.jsx(Loader, {
            connector: modalState.detailedLoaderConnector,
            connectorName: modalState.detailedLoaderConnectorName,
            modalStatus: modalState.status,
            onClose: onCloseLoader,
            appLogo: appLogo
          }) : 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,
                deviceDetails: deviceDetails,
                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: deviceDetails,
                chainNamespace: chainNamespaces,
                buttonRadius: buttonRadiusType,
                handleWalletDetailsHeight: handleWalletDetailsHeight,
                isExternalWalletModeOnly: isExternalWalletModeOnly,
                onBackClick: onBackClick,
                handleExternalWalletClick: preHandleExternalWalletClick
              })]
            })
          }), jsxRuntime.jsx(Footer, {
            privacyPolicy: privacyPolicy,
            termsOfService: tncLink
          }), ((_bodyState$multiChain = bodyState.multiChainSelector) === null || _bodyState$multiChain === void 0 ? void 0 : _bodyState$multiChain.show) && jsxRuntime.jsx(BottomSheet, {
            uiConfig: uiConfig,
            isShown: bodyState.multiChainSelector.show,
            onClose: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
              multiChainSelector: {
                show: false,
                wallet: null
              }
            })),
            children: jsxRuntime.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) && jsxRuntime.jsxs(BottomSheet, {
            uiConfig: uiConfig,
            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.installLinks.wallet.name}`,
                hoverImageId: `login-${bodyState.installLinks.wallet.name}`,
                fallbackImageId: "wallet",
                height: "80",
                width: "80",
                isButton: true,
                extension: bodyState.installLinks.wallet.imgExtension
              })
            }), jsxRuntime.jsx("ul", {
              className: "w3a--flex w3a--flex-col w3a--gap-y-2",
              children: deviceDetails.platform === "desktop" ? desktopInstallLinks : mobileInstallLinks
            })]
          })]
        })]
      }), jsxRuntime.jsx(Toast, {})]
    })
  });
}

module.exports = Root;
