@web3auth/modal 10.16.0 → 11.0.0-beta.1

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

@@ -0,0 +1,253 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { WALLET_CONNECTORS } from '@web3auth/no-modal';
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import Footer from '../../components/Footer/Footer.js';
+import Loader from '../../components/Loader/Loader.js';
+import Toast from '../../components/Toast/Toast.js';
+import { DEFAULT_METAMASK_WALLET_REGISTRY_ITEM, PAGES } from '../../constants.js';
+import { useModalState } from '../../context/ModalStateContext.js';
+import { RootProvider } from '../../context/RootContext.js';
+import { useWidget } from '../../context/WidgetContext.js';
+import { MODAL_STATUS } from '../../interfaces.js';
+import i18nInstance from '../../localeImport.js';
+import AccountLinking from '../AccountLinking/AccountLinking.js';
+import ConnectWallet from '../ConnectWallet/ConnectWallet.js';
+import Login from '../Login/Login.js';
+import RootBodySheets from './RootBodySheets/RootBodySheets.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function RootContent(props) {
+  const {
+    onCloseLoader
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const {
+    modalState,
+    shouldShowLoginPage,
+    showPasswordLessInput,
+    areSocialLoginsVisible
+  } = useModalState();
+  const {
+    deviceDetails,
+    uiConfig,
+    isConnectAndSignAuthenticationMode,
+    handleMobileVerifyConnect,
+    handleAcceptConsent,
+    handleDeclineConsent
+  } = useWidget();
+  const {
+    chainNamespaces,
+    walletRegistry,
+    privacyPolicy,
+    tncLink,
+    displayInstalledExternalWallets,
+    hideSuccessScreen,
+    consentRequired
+  } = uiConfig;
+  const contentRef = useRef(null);
+  const [containerHeight, setContainerHeight] = useState(530);
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const updateHeight = () => {
+      const elToMeasure = contentRef.current;
+      if (!elToMeasure) return;
+      const fullHeight = elToMeasure.scrollHeight;
+      if (fullHeight > 0) setContainerHeight(Math.ceil(fullHeight));
+    };
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(updateHeight);
+    });
+    observer.observe(el);
+    // Run initial measurement after layout so scrollHeight includes full content (e.g. footer)
+    requestAnimationFrame(updateHeight);
+    return () => observer.disconnect();
+  }, []);
+
+  // 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 isExternalWalletModeOnly = useMemo(() => {
+    return !showPasswordLessInput && !areSocialLoginsVisible;
+  }, [areSocialLoginsVisible, showPasswordLessInput]);
+  const isWalletConnectAccountLinkingVisible = useMemo(() => {
+    return modalState.accountLinking.active && modalState.accountLinking.transportConnectorName === WALLET_CONNECTORS.WALLET_CONNECT_V2;
+  }, [modalState.accountLinking.active, modalState.accountLinking.transportConnectorName]);
+  const isShowLoader = useMemo(() => {
+    return !isWalletConnectAccountLinkingVisible && modalState.status !== MODAL_STATUS.INITIALIZED;
+  }, [isWalletConnectAccountLinkingVisible, modalState.status]);
+  const loaderMessage = useMemo(() => {
+    const message = modalState.postLoadingMessage;
+    if (!message) return undefined;
+    return i18nInstance.exists(message) ? t(message) : message;
+  }, [modalState.postLoadingMessage, t]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "wta:relative wta:flex wta:flex-col",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "w3a-modal-container wta:relative wta:flex wta:flex-col wta:overflow-hidden",
+      style: {
+        height: containerHeight
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: "w3a--modal-curtain"
+      }), /*#__PURE__*/jsxs("div", {
+        ref: contentRef,
+        className: "wta:relative wta:flex wta:flex-none wta:flex-col wta:p-6",
+        children: [isShowLoader ? /*#__PURE__*/jsx(Loader, {
+          connector: modalState.detailedLoaderConnector,
+          connectorName: modalState.detailedLoaderConnectorName,
+          modalStatus: modalState.status,
+          message: loaderMessage,
+          onClose: onCloseLoader,
+          isConnectAndSignAuthenticationMode: isConnectAndSignAuthenticationMode,
+          externalWalletsConfig: modalState.externalWalletsConfig,
+          handleMobileVerifyConnect: handleMobileVerifyConnect,
+          hideSuccessScreen: hideSuccessScreen,
+          onAcceptConsent: handleAcceptConsent,
+          onDeclineConsent: handleDeclineConsent,
+          privacyPolicy: privacyPolicy,
+          tncLink: tncLink
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [isWalletConnectAccountLinkingVisible && /*#__PURE__*/jsx(AccountLinking, {
+            allExternalWallets: allExternalWallets
+          }), !isWalletConnectAccountLinkingVisible && !modalState.accountLinking.pickerActive && modalState.currentPage === PAGES.LOGIN_OPTIONS && shouldShowLoginPage && modalState.status === MODAL_STATUS.INITIALIZED && /*#__PURE__*/jsx(Login, {
+            installedExternalWalletConfig: topInstalledConnectorButtons,
+            totalExternalWallets: allExternalWallets.length,
+            remainingUndisplayedWallets: remainingUndisplayedWallets
+          }), !isWalletConnectAccountLinkingVisible && modalState.currentPage === PAGES.WALLET_LIST && (!shouldShowLoginPage || isExternalWalletModeOnly || modalState.accountLinking.pickerActive) && modalState.status === MODAL_STATUS.INITIALIZED && /*#__PURE__*/jsx(ConnectWallet, {
+            allRegistryButtons: allRegistryButtons,
+            connectorVisibilityMap: connectorVisibilityMap,
+            customConnectorButtons: customConnectorButtons,
+            isExternalWalletModeOnly: isExternalWalletModeOnly
+          })]
+        }), /*#__PURE__*/jsx(Footer, {
+          privacyPolicy: !consentRequired && modalState.status !== MODAL_STATUS.CONSENT_REQUIRING ? privacyPolicy : undefined,
+          termsOfService: !consentRequired && modalState.status !== MODAL_STATUS.CONSENT_REQUIRING ? tncLink : undefined
+        }), /*#__PURE__*/jsx(RootBodySheets, {})]
+      })]
+    }), /*#__PURE__*/jsx(Toast, {})]
+  });
+}
+function Root(props) {
+  return /*#__PURE__*/jsx(RootProvider, {
+    children: /*#__PURE__*/jsx(RootContent, _objectSpread({}, props))
+  });
+}
+
+export { Root as default };

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

@@ -0,0 +1,183 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import BottomSheet from '../../../components/BottomSheet/BottomSheet.js';
+import Image from '../../../components/Image/Image.js';
+import { useModalState } from '../../../context/ModalStateContext.js';
+import { useBodyState } from '../../../context/RootContext.js';
+import { useWidget } from '../../../context/WidgetContext.js';
+import i18nInstance from '../../../localeImport.js';
+import { getMobileInstallLink, getOsName, getIcons, cn, getBrowserExtensionUrl, getBrowserName } from '../../../utils.js';
+import ConnectWalletChainNamespaceSelect from '../../ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function RootBodySheets() {
+  var _bodyState$installLin2, _bodyState$installLin4, _bodyState$multiChain, _bodyState$installLin5;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const {
+    preHandleExternalWalletClick
+  } = useModalState();
+  const {
+    bodyState,
+    setBodyState
+  } = useBodyState();
+  const {
+    isDark,
+    deviceDetails,
+    uiConfig
+  } = useWidget();
+  const {
+    buttonRadiusType
+  } = uiConfig;
+  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: "wta:w-full",
+        children: /*#__PURE__*/jsx("a", {
+          href: appUrl,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: /*#__PURE__*/jsxs("button", {
+            type: "button",
+            className: cn("wta:group wta:relative wta:overflow-hidden wta:h-11 wta:flex wta:w-full wta:items-center wta:justify-start wta:gap-x-2 wta:border wta:border-app-gray-200 wta:bg-app-gray-50 wta:px-5 wta:py-2.5 wta:hover:translate-y-[0.5px] wta:hover:border-app-gray-50 wta:dark:border-app-gray-500 wta:dark:bg-app-gray-800 wta:dark:hover:border-app-gray-800", {
+              "wta:rounded-full": buttonRadiusType === "pill",
+              "wta:rounded-lg": buttonRadiusType === "rounded",
+              "wta: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: "wta:text-sm wta:font-medium wta:text-app-gray-900 wta:dark:text-app-white",
+              children: t("modal.external.install-mobile-app", {
+                os: getOsName(osKey)
+              })
+            }), /*#__PURE__*/jsx("img", {
+              id: "install-links-arrow",
+              className: "wta:absolute wta:right-4 wta:top-1/2 wta:-translate-x-6 wta:-translate-y-1/2 wta:opacity-0 wta:transition-all wta:duration-300 wta:group-hover:translate-x-0 wta:group-hover: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 [];
+    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("wta:group wta:relative wta:overflow-hidden wta:h-11 wta:flex wta:w-full wta:items-center wta:justify-start wta:gap-x-2 wta:border wta:border-app-gray-200 wta:bg-app-gray-50 wta:px-5 wta:py-2.5 wta:hover:translate-y-[0.5px] wta:hover:border-app-gray-50 wta:dark:border-app-gray-500 wta:dark:bg-app-gray-800 wta:dark:hover:border-app-gray-800", {
+            "wta:rounded-full": buttonRadiusType === "pill",
+            "wta:rounded-lg": buttonRadiusType === "rounded",
+            "wta: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: "wta:text-sm wta:font-medium wta:text-app-gray-900 wta:dark:text-app-white",
+            children: t("modal.external.install-browser-extension", {
+              browser: getBrowserName(deviceDetails.browser)
+            })
+          }), /*#__PURE__*/jsx("img", {
+            id: "install-links-arrow",
+            className: "wta:absolute wta:right-4 wta:top-1/2 wta:-translate-x-6 wta:-translate-y-1/2 wta:opacity-0 wta:transition-all wta:duration-300 wta:group-hover:translate-x-0 wta:group-hover: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]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [((_bodyState$multiChain = bodyState.multiChainSelector) === null || _bodyState$multiChain === void 0 ? void 0 : _bodyState$multiChain.show) && /*#__PURE__*/jsx(BottomSheet, {
+      borderRadiusType: uiConfig.borderRadiusType,
+      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, {
+      borderRadiusType: uiConfig.borderRadiusType,
+      isShown: bodyState.installLinks.show,
+      onClose: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        installLinks: {
+          show: false,
+          wallet: null
+        }
+      })),
+      children: [/*#__PURE__*/jsx("p", {
+        className: "wta:mb-2 wta:text-center wta:text-base wta:font-semibold wta:text-app-gray-900 wta:dark:text-app-white",
+        children: t("modal.getWallet")
+      }), /*#__PURE__*/jsx("div", {
+        className: "wta:my-4 wta:flex wta: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: "wta:flex wta:flex-col wta:gap-y-2",
+        children: deviceDetails.platform === "desktop" ? desktopInstallLinks : mobileInstallLinks
+      })]
+    })]
+  });
+}
+
+export { RootBodySheets as default };

package/dist/lib.esm/packages/modal/src/ui/containers/Widget/Widget.js

@@ -0,0 +1,108 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { WALLET_CONNECTORS, WIDGET_TYPE } from '@web3auth/no-modal';
+import { useMemo, useEffect } from 'react';
+import Modal from '../../components/Modal/Modal.js';
+import { PAGES } from '../../constants.js';
+import { ModalStateProvider, useModalState } from '../../context/ModalStateContext.js';
+import { useWidget } from '../../context/WidgetContext.js';
+import { MODAL_STATUS } from '../../interfaces.js';
+import Embed from '../Embed/Embed.js';
+import Root from '../Root/Root.js';
+import { jsx } from 'react/jsx-runtime';
+
+function WidgetContent() {
+  const {
+    uiConfig,
+    handleExternalWalletClick,
+    closeModal,
+    isConnectAndSignAuthenticationMode
+  } = useWidget();
+  const {
+    modalState,
+    setModalState
+  } = useModalState();
+  const {
+    widgetType
+  } = uiConfig;
+  const onCloseModal = () => {
+    setModalState(prevState => _objectSpread(_objectSpread({}, prevState), {}, {
+      externalWalletsVisibility: false,
+      modalVisibility: false,
+      currentPage: PAGES.LOGIN_OPTIONS
+    }));
+    closeModal();
+  };
+  const onCloseLoader = () => {
+    if (!isConnectAndSignAuthenticationMode && modalState.status === MODAL_STATUS.CONNECTED) {
+      setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+        modalVisibility: false,
+        externalWalletsVisibility: false
+      }));
+    }
+    if (isConnectAndSignAuthenticationMode && modalState.status === MODAL_STATUS.AUTHORIZED) {
+      setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+        modalVisibility: false,
+        externalWalletsVisibility: false
+      }));
+    }
+    if (modalState.status === MODAL_STATUS.ERRORED) {
+      setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+        modalVisibility: true,
+        status: MODAL_STATUS.INITIALIZED,
+        postLoadingMessage: ""
+      }));
+    }
+  };
+  const showCloseIcon = useMemo(() => {
+    return modalState.status === MODAL_STATUS.INITIALIZED || modalState.status === MODAL_STATUS.CONNECTED || modalState.status === MODAL_STATUS.ERRORED || modalState.status === MODAL_STATUS.AUTHORIZED;
+  }, [modalState.status]);
+  useEffect(() => {
+    // Prewarm WalletConnect for the regular connect flow so mobile users get a QR URI
+    // as soon as the modal opens. Skip this during account linking because that flow
+    // owns its own WalletConnect session and stores its URI in `accountLinking.walletConnectUri`.
+    if (!modalState.modalVisibility) return;
+    if (modalState.accountLinking.active) return;
+    if (typeof modalState.externalWalletsConfig === "object") {
+      var _modalState$externalW;
+      // auto connect to WC if not injected to generate QR code URI for mobile connection
+      const wcAvailable = (((_modalState$externalW = modalState.externalWalletsConfig[WALLET_CONNECTORS.WALLET_CONNECT_V2]) === null || _modalState$externalW === void 0 ? void 0 : _modalState$externalW.showOnModal) || false) !== false;
+      if (wcAvailable && !modalState.walletConnectUri && typeof handleExternalWalletClick === "function") {
+        handleExternalWalletClick({
+          connector: WALLET_CONNECTORS.WALLET_CONNECT_V2
+        });
+      }
+    }
+  }, [modalState, handleExternalWalletClick]);
+  const rootElement = /*#__PURE__*/jsx(Root, {
+    onCloseLoader: onCloseLoader
+  });
+  if (widgetType === WIDGET_TYPE.MODAL) {
+    return /*#__PURE__*/jsx(Modal, {
+      open: modalState.modalVisibility,
+      placement: "center",
+      padding: false,
+      showCloseIcon: showCloseIcon,
+      onClose: onCloseModal,
+      borderRadius: uiConfig.borderRadiusType,
+      children: modalState.modalVisibility && rootElement
+    });
+  }
+  return /*#__PURE__*/jsx(Embed, {
+    open: modalState.modalVisibility,
+    padding: false,
+    onClose: onCloseModal,
+    borderRadius: uiConfig.borderRadiusType,
+    children: modalState.modalVisibility && rootElement
+  });
+}
+function Widget(props) {
+  const {
+    stateListener
+  } = props;
+  return /*#__PURE__*/jsx(ModalStateProvider, {
+    stateListener: stateListener,
+    children: /*#__PURE__*/jsx(WidgetContent, {})
+  });
+}
+
+export { Widget as default };