@web3auth/modal 10.16.0 → 11.0.0-beta.1

package/dist/lib.cjs/packages/modal/src/ui/{components → containers}/Login/LoginPasswordLess/LoginPasswordLess.js

@@ -3,9 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactI18next = require('react-i18next');
+var PulseLoader = require('../../../components/PulseLoader/PulseLoader.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
-var PulseLoader = require('../../PulseLoader/PulseLoader.js');
 
 function LoginPasswordLess(props) {
   const {
@@ -59,22 +59,22 @@ function LoginPasswordLess(props) {
   if (!isPasswordLessCtaClicked) {
     return jsxRuntime.jsxs("button", {
       type: "button",
-      className: utils.cn("w3a--btn !w3a--justify-between w3a--relative w3a--group w3a--overflow-hidden", {
-        "w3a--rounded-full": buttonRadius === "pill",
-        "w3a--rounded-lg": buttonRadius === "rounded",
-        "w3a--rounded-none": buttonRadius === "square"
+      className: utils.cn("w3a--btn wta:justify-between! wta:relative wta:group wta:overflow-hidden", {
+        "wta:rounded-full": buttonRadius === "pill",
+        "wta:rounded-lg": buttonRadius === "rounded",
+        "wta:rounded-none": buttonRadius === "square"
       }),
       onClick: () => {
         setIsPasswordLessCtaClicked(true);
       },
       children: [jsxRuntime.jsx("p", {
-        className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+        className: "wta:text-app-gray-900 wta:dark:text-app-white",
         children: t("modal.passwordless.title", {
           title
         })
       }), jsxRuntime.jsx("img", {
         id: "passwordless-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",
+        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\n          wta:group-hover:translate-x-0 wta:group-hover:opacity-100",
         src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
         alt: "arrow"
       })]
@@ -82,10 +82,10 @@ function LoginPasswordLess(props) {
   }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", {
-      className: utils.cn("w3a--input", isInputFocused && "!w3a--border-app-primary-600", {
-        "w3a--rounded-full": buttonRadius === "pill",
-        "w3a--rounded-lg": buttonRadius === "rounded",
-        "w3a--rounded-none": buttonRadius === "square"
+      className: utils.cn("w3a--input", isInputFocused && "wta:border-app-primary-600!", {
+        "wta:rounded-full": buttonRadius === "pill",
+        "wta:rounded-lg": buttonRadius === "rounded",
+        "wta:rounded-none": buttonRadius === "square"
       }),
       children: [jsxRuntime.jsx("input", {
         ref: inputRef,
@@ -100,12 +100,12 @@ function LoginPasswordLess(props) {
           setIsInputFocused(false);
         },
         type: "text",
-        className: utils.cn("w3a--w-full w3a--appearance-none w3a--bg-transparent w3a--text-app-gray-900 w3a--outline-none placeholder:w3a--text-xs placeholder:w3a--text-app-gray-400 focus:w3a--outline-none active:w3a--outline-none dark:w3a--text-app-white dark:placeholder:w3a--text-app-gray-500"),
+        className: utils.cn("wta:w-full wta:appearance-none wta:bg-transparent wta:text-app-gray-900 wta:outline-none wta:placeholder:text-xs wta:placeholder:text-app-gray-400 wta:focus:outline-none wta:active:outline-none wta:dark:text-app-white wta:dark:placeholder:text-app-gray-500"),
         onKeyDown: e => handleEnter(e),
         disabled: isPasswordLessLoading
       }), isPasswordLessLoading && jsxRuntime.jsx(PulseLoader, {}), inputValue && !isPasswordLessLoading && jsxRuntime.jsx("button", {
         type: "button",
-        className: "w3a--appearance-none",
+        className: "wta:appearance-none",
         onClick: onFormSubmit,
         children: jsxRuntime.jsx("img", {
           src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
@@ -113,7 +113,7 @@ function LoginPasswordLess(props) {
         })
       })]
     }), errorMessage && !isInputFocused && isPasswordLessCtaClicked && jsxRuntime.jsx("p", {
-      className: "w3a--w-full w3a--pl-6 w3a--text-start w3a--text-xs w3a--font-normal w3a--text-app-red-500 dark:w3a--text-app-red-400",
+      className: "wta:w-full wta:pl-6 wta:text-start wta:text-xs wta:font-normal wta:text-app-red-500 wta:dark:text-app-red-400",
       children: errorMessage
     })]
   });

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

@@ -0,0 +1,250 @@
+'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 Footer = require('../../components/Footer/Footer.js');
+var Loader = require('../../components/Loader/Loader.js');
+var Toast = require('../../components/Toast/Toast.js');
+var constants = require('../../constants.js');
+var ModalStateContext = require('../../context/ModalStateContext.js');
+var RootContext = require('../../context/RootContext.js');
+var WidgetContext = require('../../context/WidgetContext.js');
+var interfaces = require('../../interfaces.js');
+var localeImport = require('../../localeImport.js');
+var AccountLinking = require('../AccountLinking/AccountLinking.js');
+var ConnectWallet = require('../ConnectWallet/ConnectWallet.js');
+var Login = require('../Login/Login.js');
+var RootBodySheets = require('./RootBodySheets/RootBodySheets.js');
+
+function RootContent(props) {
+  const {
+    onCloseLoader
+  } = props;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const {
+    modalState,
+    shouldShowLoginPage,
+    showPasswordLessInput,
+    areSocialLoginsVisible
+  } = ModalStateContext.useModalState();
+  const {
+    deviceDetails,
+    uiConfig,
+    isConnectAndSignAuthenticationMode,
+    handleMobileVerifyConnect,
+    handleAcceptConsent,
+    handleDeclineConsent
+  } = WidgetContext.useWidget();
+  const {
+    chainNamespaces,
+    walletRegistry,
+    privacyPolicy,
+    tncLink,
+    displayInstalledExternalWallets,
+    hideSuccessScreen,
+    consentRequired
+  } = uiConfig;
+  const contentRef = react.useRef(null);
+  const [containerHeight, setContainerHeight] = react.useState(530);
+  react.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 = 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 allRegistryButtons = 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 = allRegistryButtons.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;
+  }, [allRegistryButtons, 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 allExternalWallets = react.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 = react.useMemo(() => {
+    return allExternalWallets.filter(button => {
+      return !topInstalledConnectorButtons.includes(button);
+    }).length;
+  }, [allExternalWallets, topInstalledConnectorButtons]);
+  const isExternalWalletModeOnly = react.useMemo(() => {
+    return !showPasswordLessInput && !areSocialLoginsVisible;
+  }, [areSocialLoginsVisible, showPasswordLessInput]);
+  const isWalletConnectAccountLinkingVisible = react.useMemo(() => {
+    return modalState.accountLinking.active && modalState.accountLinking.transportConnectorName === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2;
+  }, [modalState.accountLinking.active, modalState.accountLinking.transportConnectorName]);
+  const isShowLoader = react.useMemo(() => {
+    return !isWalletConnectAccountLinkingVisible && modalState.status !== interfaces.MODAL_STATUS.INITIALIZED;
+  }, [isWalletConnectAccountLinkingVisible, modalState.status]);
+  const loaderMessage = react.useMemo(() => {
+    const message = modalState.postLoadingMessage;
+    if (!message) return undefined;
+    return localeImport.exists(message) ? t(message) : message;
+  }, [modalState.postLoadingMessage, t]);
+  return jsxRuntime.jsxs("div", {
+    className: "wta:relative wta:flex wta:flex-col",
+    children: [jsxRuntime.jsxs("div", {
+      className: "w3a-modal-container wta:relative wta:flex wta:flex-col wta:overflow-hidden",
+      style: {
+        height: containerHeight
+      },
+      children: [jsxRuntime.jsx("div", {
+        className: "w3a--modal-curtain"
+      }), jsxRuntime.jsxs("div", {
+        ref: contentRef,
+        className: "wta:relative wta:flex wta:flex-none wta:flex-col wta:p-6",
+        children: [isShowLoader ? jsxRuntime.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
+        }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [isWalletConnectAccountLinkingVisible && jsxRuntime.jsx(AccountLinking, {
+            allExternalWallets: allExternalWallets
+          }), !isWalletConnectAccountLinkingVisible && !modalState.accountLinking.pickerActive && modalState.currentPage === constants.PAGES.LOGIN_OPTIONS && shouldShowLoginPage && modalState.status === interfaces.MODAL_STATUS.INITIALIZED && jsxRuntime.jsx(Login, {
+            installedExternalWalletConfig: topInstalledConnectorButtons,
+            totalExternalWallets: allExternalWallets.length,
+            remainingUndisplayedWallets: remainingUndisplayedWallets
+          }), !isWalletConnectAccountLinkingVisible && modalState.currentPage === constants.PAGES.WALLET_LIST && (!shouldShowLoginPage || isExternalWalletModeOnly || modalState.accountLinking.pickerActive) && modalState.status === interfaces.MODAL_STATUS.INITIALIZED && jsxRuntime.jsx(ConnectWallet, {
+            allRegistryButtons: allRegistryButtons,
+            connectorVisibilityMap: connectorVisibilityMap,
+            customConnectorButtons: customConnectorButtons,
+            isExternalWalletModeOnly: isExternalWalletModeOnly
+          })]
+        }), jsxRuntime.jsx(Footer, {
+          privacyPolicy: !consentRequired && modalState.status !== interfaces.MODAL_STATUS.CONSENT_REQUIRING ? privacyPolicy : undefined,
+          termsOfService: !consentRequired && modalState.status !== interfaces.MODAL_STATUS.CONSENT_REQUIRING ? tncLink : undefined
+        }), jsxRuntime.jsx(RootBodySheets, {})]
+      })]
+    }), jsxRuntime.jsx(Toast, {})]
+  });
+}
+function Root(props) {
+  return jsxRuntime.jsx(RootContext.RootProvider, {
+    children: jsxRuntime.jsx(RootContent, _objectSpread({}, props))
+  });
+}
+
+module.exports = Root;

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

@@ -0,0 +1,185 @@
+'use strict';
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var BottomSheet = require('../../../components/BottomSheet/BottomSheet.js');
+var Image = require('../../../components/Image/Image.js');
+var ModalStateContext = require('../../../context/ModalStateContext.js');
+var RootContext = require('../../../context/RootContext.js');
+var WidgetContext = require('../../../context/WidgetContext.js');
+var localeImport = require('../../../localeImport.js');
+var utils = require('../../../utils.js');
+var ConnectWalletChainNamespaceSelect = require('../../ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.js');
+
+function RootBodySheets() {
+  var _bodyState$installLin2, _bodyState$installLin4, _bodyState$multiChain, _bodyState$installLin5;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const {
+    preHandleExternalWalletClick
+  } = ModalStateContext.useModalState();
+  const {
+    bodyState,
+    setBodyState
+  } = RootContext.useBodyState();
+  const {
+    isDark,
+    deviceDetails,
+    uiConfig
+  } = WidgetContext.useWidget();
+  const {
+    buttonRadiusType
+  } = uiConfig;
+  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: "wta:w-full",
+        children: jsxRuntime.jsx("a", {
+          href: appUrl,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: jsxRuntime.jsxs("button", {
+            type: "button",
+            className: utils.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: [jsxRuntime.jsx(Image, {
+              imageId: logoLight,
+              darkImageId: logoDark,
+              hoverImageId: logoLight,
+              darkHoverImageId: logoDark,
+              height: "28",
+              width: "28",
+              isButton: true
+            }), jsxRuntime.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: utils.getOsName(osKey)
+              })
+            }), jsxRuntime.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\n          wta:group-hover:translate-x-0 wta:group-hover: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 [];
+    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("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: [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: "wta:text-sm wta:font-medium wta:text-app-gray-900 wta:dark:text-app-white",
+            children: t("modal.external.install-browser-extension", {
+              browser: utils.getBrowserName(deviceDetails.browser)
+            })
+          }), jsxRuntime.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\n          wta:group-hover:translate-x-0 wta:group-hover: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]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [((_bodyState$multiChain = bodyState.multiChainSelector) === null || _bodyState$multiChain === void 0 ? void 0 : _bodyState$multiChain.show) && jsxRuntime.jsx(BottomSheet, {
+      borderRadiusType: uiConfig.borderRadiusType,
+      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, {
+      borderRadiusType: uiConfig.borderRadiusType,
+      isShown: bodyState.installLinks.show,
+      onClose: () => setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        installLinks: {
+          show: false,
+          wallet: null
+        }
+      })),
+      children: [jsxRuntime.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")
+      }), jsxRuntime.jsx("div", {
+        className: "wta:my-4 wta:flex wta: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: "wta:flex wta:flex-col wta:gap-y-2",
+        children: deviceDetails.platform === "desktop" ? desktopInstallLinks : mobileInstallLinks
+      })]
+    })]
+  });
+}
+
+module.exports = RootBodySheets;

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

@@ -0,0 +1,110 @@
+'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 Modal = require('../../components/Modal/Modal.js');
+var constants = require('../../constants.js');
+var ModalStateContext = require('../../context/ModalStateContext.js');
+var WidgetContext = require('../../context/WidgetContext.js');
+var interfaces = require('../../interfaces.js');
+var Embed = require('../Embed/Embed.js');
+var Root = require('../Root/Root.js');
+
+function WidgetContent() {
+  const {
+    uiConfig,
+    handleExternalWalletClick,
+    closeModal,
+    isConnectAndSignAuthenticationMode
+  } = WidgetContext.useWidget();
+  const {
+    modalState,
+    setModalState
+  } = ModalStateContext.useModalState();
+  const {
+    widgetType
+  } = uiConfig;
+  const onCloseModal = () => {
+    setModalState(prevState => _objectSpread(_objectSpread({}, prevState), {}, {
+      externalWalletsVisibility: false,
+      modalVisibility: false,
+      currentPage: constants.PAGES.LOGIN_OPTIONS
+    }));
+    closeModal();
+  };
+  const onCloseLoader = () => {
+    if (!isConnectAndSignAuthenticationMode && modalState.status === interfaces.MODAL_STATUS.CONNECTED) {
+      setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+        modalVisibility: false,
+        externalWalletsVisibility: false
+      }));
+    }
+    if (isConnectAndSignAuthenticationMode && modalState.status === interfaces.MODAL_STATUS.AUTHORIZED) {
+      setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+        modalVisibility: false,
+        externalWalletsVisibility: false
+      }));
+    }
+    if (modalState.status === interfaces.MODAL_STATUS.ERRORED) {
+      setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+        modalVisibility: true,
+        status: interfaces.MODAL_STATUS.INITIALIZED,
+        postLoadingMessage: ""
+      }));
+    }
+  };
+  const showCloseIcon = react.useMemo(() => {
+    return modalState.status === interfaces.MODAL_STATUS.INITIALIZED || modalState.status === interfaces.MODAL_STATUS.CONNECTED || modalState.status === interfaces.MODAL_STATUS.ERRORED || modalState.status === interfaces.MODAL_STATUS.AUTHORIZED;
+  }, [modalState.status]);
+  react.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[noModal.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: noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2
+        });
+      }
+    }
+  }, [modalState, handleExternalWalletClick]);
+  const rootElement = jsxRuntime.jsx(Root, {
+    onCloseLoader: onCloseLoader
+  });
+  if (widgetType === noModal.WIDGET_TYPE.MODAL) {
+    return jsxRuntime.jsx(Modal, {
+      open: modalState.modalVisibility,
+      placement: "center",
+      padding: false,
+      showCloseIcon: showCloseIcon,
+      onClose: onCloseModal,
+      borderRadius: uiConfig.borderRadiusType,
+      children: modalState.modalVisibility && rootElement
+    });
+  }
+  return jsxRuntime.jsx(Embed, {
+    open: modalState.modalVisibility,
+    padding: false,
+    onClose: onCloseModal,
+    borderRadius: uiConfig.borderRadiusType,
+    children: modalState.modalVisibility && rootElement
+  });
+}
+function Widget(props) {
+  const {
+    stateListener
+  } = props;
+  return jsxRuntime.jsx(ModalStateContext.ModalStateProvider, {
+    stateListener: stateListener,
+    children: jsxRuntime.jsx(WidgetContent, {})
+  });
+}
+
+module.exports = Widget;