@web3auth/modal
Version:
Multi chain wallet aggregator for web3Auth
494 lines (490 loc) • 27.5 kB
JavaScript
'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);
};
// 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,
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;