@web3auth/modal 10.15.0 → 11.0.0-beta.0

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/ConnectWallet/ConnectWalletList/ConnectWalletList.js

@@ -1,8 +1,9 @@
 import { useTranslation } from 'react-i18next';
+import Button from '../../../components/Button/Button.js';
+import { BUTTON_TYPE } from '../../../components/Button/Button.type.js';
+import { useWidget } from '../../../context/WidgetContext.js';
 import i18nInstance from '../../../localeImport.js';
 import { cn, getIcons } from '../../../utils.js';
-import Button from '../../Button/Button.js';
-import { BUTTON_TYPE } from '../../Button/Button.type.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function NoWalletsFound() {
@@ -19,10 +20,16 @@ function WalletsFound(props) {
     externalButtons,
     isLoading,
     handleWalletClick,
-    deviceDetails,
-    walletConnectUri,
-    buttonRadius
+    walletConnectUri
   } = props;
+  const {
+    deviceDetails,
+    uiConfig,
+    isDark
+  } = useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = uiConfig;
   if (isLoading) {
     return /*#__PURE__*/jsx("div", {
       className: "w3a--flex w3a--flex-col w3a--gap-y-2",
@@ -38,10 +45,11 @@ function WalletsFound(props) {
     });
   }
   return /*#__PURE__*/jsx("div", {
-    className: "w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5",
+    className: "w3a--flex w3a--flex-col w3a--gap-y-2",
     children: externalButtons.map(button => /*#__PURE__*/jsx(Button, {
       type: BUTTON_TYPE.WALLET,
       props: {
+        isDark,
         label: button.displayName,
         onClick: () => handleWalletClick(button),
         button,
@@ -58,9 +66,14 @@ function MoreWalletsButton(props) {
     initialWalletCount,
     handleMoreWallets,
     isLoading,
-    isDark,
-    buttonRadius
+    isDark
   } = props;
+  const {
+    uiConfig
+  } = useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = uiConfig;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
   });
@@ -80,7 +93,7 @@ function MoreWalletsButton(props) {
   }
   return /*#__PURE__*/jsxs("button", {
     type: "button",
-    className: cn("w3a--flex w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600 active:w3a--scale-95 w3a--transition-all w3a--duration-150 w3a--mr-2.5", {
+    className: cn("w3a--flex w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600 active:w3a--scale-95 w3a--transition-all w3a--duration-150", {
       "w3a--rounded-full": buttonRadius === "pill",
       "w3a--rounded-lg": buttonRadius === "rounded",
       "w3a--rounded-none": buttonRadius === "square"
@@ -109,9 +122,7 @@ function ConnectWalletList(props) {
     handleWalletClick,
     handleMoreWallets,
     isDark,
-    deviceDetails,
     walletConnectUri,
-    buttonRadius,
     isShowAllWallets
   } = props;
   const onShowMoreWalletsClick = () => {
@@ -120,24 +131,21 @@ function ConnectWalletList(props) {
   const showMoreWalletsButton = !isShowAllWallets;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("ul", {
-      className: cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px] w3a--social-container w3a--pr-2.5", {
+      className: cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px] w3a--social-container -w3a--mx-5 w3a--pl-5 w3a--pr-1", {
         "w3a--h-[328px]": !showMoreWalletsButton
       }),
       children: externalButtons.length === 0 ? /*#__PURE__*/jsx(NoWalletsFound, {}) : /*#__PURE__*/jsx(WalletsFound, {
         externalButtons: externalButtons,
         isLoading: isLoading,
         handleWalletClick: handleWalletClick,
-        deviceDetails: deviceDetails,
-        walletConnectUri: walletConnectUri,
-        buttonRadius: buttonRadius
+        walletConnectUri: walletConnectUri
       })
     }), showMoreWalletsButton && !isLoading && initialWalletCount < totalExternalWalletsCount && /*#__PURE__*/jsx(MoreWalletsButton, {
       totalExternalWalletsCount: totalExternalWalletsCount,
       initialWalletCount: initialWalletCount,
       handleMoreWallets: onShowMoreWalletsClick,
       isLoading: isLoading,
-      isDark: isDark,
-      buttonRadius: buttonRadius
+      isDark: isDark
     })]
   });
 }

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.js

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import Bowser from 'bowser';
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { QRCode } from 'react-qrcode-logo';
+import Image from '../../../components/Image/Image.js';
 import { WALLET_CONNECT_LOGO } from '../../../constants.js';
-import { RootContext } from '../../../context/RootContext.js';
+import { useBodyState, useToast } from '../../../context/RootContext.js';
 import { TOAST_TYPE } from '../../../interfaces.js';
 import i18nInstance from '../../../localeImport.js';
-import Image from '../../Image/Image.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ConnectWalletQrCode(props) {
@@ -17,9 +17,11 @@ function ConnectWalletQrCode(props) {
   });
   const {
     bodyState,
-    setBodyState,
+    setBodyState
+  } = useBodyState();
+  const {
     setToast
-  } = useContext(RootContext);
+  } = useToast();
   const {
     qrCodeValue,
     isDark,

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/ConnectWallet/ConnectWalletSearch/ConnectWalletSearch.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useWidget } from '../../../context/WidgetContext.js';
 import i18nInstance from '../../../localeImport.js';
 import { cn } from '../../../utils.js';
 import { jsx } from 'react/jsx-runtime';
@@ -9,9 +10,14 @@ function ConnectWalletSearch(props) {
     totalExternalWalletCount,
     isLoading,
     walletSearch,
-    handleWalletSearch,
-    buttonRadius
+    handleWalletSearch
   } = props;
+  const {
+    uiConfig
+  } = useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = uiConfig;
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/Embed/Embed.js

@@ -26,6 +26,7 @@ function Embed(props) {
         setIsOpen(true);
       }, 50);
     } else {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
       setIsOpen(false);
     }
   }, [open]);

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

@@ -4,48 +4,28 @@ import { AUTH_CONNECTION } from '@web3auth/auth';
 import { WALLET_CONNECTORS, ANALYTICS_EVENTS, log, WalletLoginError } from '@web3auth/no-modal';
 import { useContext, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import Image from '../../components/Image/Image.js';
+import SocialLoginList from '../../components/SocialLoginList/SocialLoginList.js';
 import { capitalizeFirstLetter, CAPTCHA_SITE_KEY } from '../../config.js';
-import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from '../../constants.js';
+import { PAGES, DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from '../../constants.js';
 import { AnalyticsContext } from '../../context/AnalyticsContext.js';
-import { RootContext } from '../../context/RootContext.js';
+import { useModalState } from '../../context/ModalStateContext.js';
+import { useBodyState } from '../../context/RootContext.js';
+import { useWidget } from '../../context/WidgetContext.js';
 import { createPasswordlessHandler } from '../../handlers/factory.js';
 import { isTestAccountPattern } from '../../helper/testAccounts.js';
 import i18nInstance from '../../localeImport.js';
 import { cn, getUserCountry, getIcons, validatePhoneNumber } from '../../utils.js';
-import Image from '../Image/Image.js';
-import SocialLoginList from '../SocialLoginList/SocialLoginList.js';
 import LoginOtp from './LoginOtp/LoginOtp.js';
 import LoginPasswordLess from './LoginPasswordLess/LoginPasswordLess.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const restrictedLoginMethods = [AUTH_CONNECTION.SMS_PASSWORDLESS, AUTH_CONNECTION.EMAIL_PASSWORDLESS, AUTH_CONNECTION.AUTHENTICATOR, AUTH_CONNECTION.PASSKEYS, AUTH_CONNECTION.TELEGRAM, AUTH_CONNECTION.CUSTOM];
 function Login(props) {
-  // TODO: add appName, isEmailPrimary, isExternalPrimary
   const {
-    web3authClientId,
-    web3authNetwork,
-    authBuildEnv,
-    appLogo,
-    isModalVisible,
-    handleSocialLoginHeight,
-    socialLoginsConfig,
     installedExternalWalletConfig,
-    isDark,
-    handleSocialLoginClick,
     totalExternalWallets,
-    remainingUndisplayedWallets,
-    isEmailPasswordLessLoginVisible,
-    isSmsPasswordLessLoginVisible,
-    handleExternalWalletBtnClick,
-    handleExternalWalletClick,
-    areSocialLoginsVisible,
-    showPasswordLessInput,
-    showExternalWalletButton,
-    showExternalWalletCount,
-    showInstalledExternalWallets,
-    logoAlignment = "center",
-    buttonRadius = "pill",
-    deviceDetails
+    remainingUndisplayedWallets
   } = props;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
@@ -53,10 +33,42 @@ function Login(props) {
   const {
     bodyState,
     setBodyState
-  } = useContext(RootContext);
+  } = useBodyState();
   const {
     analytics
   } = useContext(AnalyticsContext);
+  const {
+    appLogo,
+    deviceDetails,
+    uiConfig,
+    isDark
+  } = useWidget();
+  // TODO: add appName, isEmailPrimary, isExternalPrimary
+  const {
+    modalState,
+    setModalState,
+    areSocialLoginsVisible,
+    isEmailPasswordLessLoginVisible,
+    isSmsPasswordLessLoginVisible,
+    showPasswordLessInput,
+    showExternalWalletButton,
+    handleShowExternalWallets,
+    preHandleSocialLoginClick: handleSocialLoginClick,
+    preHandleExternalWalletClick: handleExternalWalletClick
+  } = useModalState();
+  const {
+    modalVisibility: isModalVisible,
+    socialLoginsConfig
+  } = modalState;
+  const {
+    buttonRadiusType: buttonRadius,
+    logoAlignment,
+    displayInstalledExternalWallets: showInstalledExternalWallets,
+    displayExternalWalletsCount: showExternalWalletCount,
+    web3authClientId,
+    web3authNetwork,
+    authBuildEnv
+  } = uiConfig;
   const [countryCode, setCountryCode] = useState("");
   const [countryFlag, setCountryFlag] = useState("");
   const [passwordlessErrorMessage, setPasswordlessErrorMessage] = useState("");
@@ -78,7 +90,6 @@ function Login(props) {
   const handleSocialLoginExpand = () => {
     setExpandSocialLogins(prev => !prev);
     setIsPasswordLessCtaClicked(false);
-    handleSocialLoginHeight();
   };
   useEffect(() => {
     const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter(loginMethodKey => {
@@ -133,7 +144,6 @@ function Login(props) {
         isDark,
         isPrimaryBtn,
         name: name === "Twitter" ? "X" : name,
-        connector: socialLoginsConfig.connector,
         loginParams: {
           authConnection: connectorConfig.authConnection || method,
           authConnectionId: connectorConfig.authConnectionId,
@@ -201,7 +211,6 @@ function Login(props) {
         const connectorConfig = socialLoginsConfig.loginMethods[AUTH_CONNECTION.EMAIL_PASSWORDLESS];
         if (connectorConfig.isDefault) {
           return handleSocialLoginClick({
-            connector: socialLoginsConfig.connector,
             loginParams: {
               authConnection: AUTH_CONNECTION.EMAIL_PASSWORDLESS,
               authConnectionId: connectorConfig.authConnectionId,
@@ -224,7 +233,6 @@ function Login(props) {
         const connectorConfig = socialLoginsConfig.loginMethods[AUTH_CONNECTION.SMS_PASSWORDLESS];
         if (connectorConfig.isDefault) {
           return handleSocialLoginClick({
-            connector: socialLoginsConfig.connector,
             loginParams: {
               authConnection: AUTH_CONNECTION.SMS_PASSWORDLESS,
               authConnectionId: connectorConfig.authConnectionId,
@@ -282,7 +290,6 @@ function Login(props) {
       if (result !== null && result !== void 0 && (_result$data = result.data) !== null && _result$data !== void 0 && _result$data.id_token) {
         var _result$data2;
         return handleSocialLoginClick({
-          connector: socialLoginsConfig.connector,
           loginParams: {
             authConnection: authConnection,
             authConnectionId: connectorConfig.authConnectionId,
@@ -301,6 +308,12 @@ function Login(props) {
       setOtpLoading(false);
     }
   };
+  const handleExternalWalletBtnClick = useCallback(flag => {
+    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+      currentPage: PAGES.WALLET_LIST
+    }));
+    handleShowExternalWallets(flag);
+  }, [modalState, setModalState, handleShowExternalWallets]);
 
   /**
    * Installed wallet click logic:
@@ -322,23 +335,22 @@ function Login(props) {
       total_external_wallets: totalExternalWallets
     });
     log.info("handleInstalledWalletClick", wallet);
-    // for non-injected Metamask on desktop, show QR code to connect
+
+    // for non-injected MetaMask on desktop, navigate to ConnectWallet page with pre-selected wallet
     if (wallet.name === WALLET_CONNECTORS.METAMASK && !wallet.hasInjectedWallet && deviceDetails.platform === "desktop") {
       handleExternalWalletClick({
         connector: wallet.name
       });
-      // We should show QR code only if the wallet is not installed.
+      // Set pre-selected wallet and navigate to ConnectWallet page
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        metamaskQrCode: {
-          show: true,
-          wallet: wallet
-        }
+        preSelectedWallet: wallet
       }));
+      handleExternalWalletBtnClick(true);
       return;
     }
 
     // when having multiple namespaces, ask user to select one
-    if (((_wallet$chainNamespac = wallet.chainNamespaces) === null || _wallet$chainNamespac === void 0 ? void 0 : _wallet$chainNamespac.length) > 1) {
+    if (((_wallet$chainNamespac = wallet.chainNamespaces) === null || _wallet$chainNamespac === void 0 ? void 0 : _wallet$chainNamespac.length) > 1 && wallet.name !== WALLET_CONNECTORS.METAMASK) {
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
         multiChainSelector: {
           show: true,
@@ -363,7 +375,7 @@ function Login(props) {
     });
     setIsPasswordLessCtaClicked(false);
     e === null || e === void 0 || e.preventDefault();
-    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
+    handleExternalWalletBtnClick(true);
   }, [analytics, handleExternalWalletBtnClick, installedExternalWallets.length, totalExternalWallets]);
   useEffect(() => {
     if (showExternalWalletButton && !areSocialLoginsVisible && !showPasswordLessInput) {

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

@@ -1,9 +1,9 @@
 import { AUTH_CONNECTION } from '@web3auth/auth';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import OtpInput$1 from '../../../components/Otp/Otp.js';
 import i18nInstance from '../../../localeImport.js';
 import { getIcons } from '../../../utils.js';
-import OtpInput$1 from '../../Otp/Otp.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 /**

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

@@ -1,8 +1,8 @@
 import { useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import PulseLoader from '../../../components/PulseLoader/PulseLoader.js';
 import i18nInstance from '../../../localeImport.js';
 import { getIcons, cn } from '../../../utils.js';
-import PulseLoader from '../../PulseLoader/PulseLoader.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function LoginPasswordLess(props) {

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

@@ -0,0 +1,238 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { WALLET_CONNECTORS } from '@web3auth/no-modal';
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { twMerge } from 'tailwind-merge';
+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 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 {
+    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 isShowLoader = useMemo(() => {
+    return modalState.status !== MODAL_STATUS.INITIALIZED;
+  }, [modalState.status]);
+  const isConsentRequiringStatus = modalState.status === MODAL_STATUS.CONSENT_REQUIRING;
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--relative w3a--flex w3a--flex-col",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "w3a-modal-container w3a--relative w3a--flex w3a--flex-col w3a--overflow-hidden",
+      style: {
+        height: containerHeight
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: "w3a--modal-curtain"
+      }), /*#__PURE__*/jsxs("div", {
+        ref: contentRef,
+        className: twMerge("w3a--relative w3a--flex w3a--flex-col w3a--p-6", isShowLoader && !isConsentRequiringStatus ? "w3a--flex-1" : "w3a--flex-none"),
+        children: [isShowLoader ? /*#__PURE__*/jsx(Loader, {
+          connector: modalState.detailedLoaderConnector,
+          connectorName: modalState.detailedLoaderConnectorName,
+          modalStatus: modalState.status,
+          onClose: onCloseLoader,
+          isConnectAndSignAuthenticationMode: isConnectAndSignAuthenticationMode,
+          externalWalletsConfig: modalState.externalWalletsConfig,
+          handleMobileVerifyConnect: handleMobileVerifyConnect,
+          hideSuccessScreen: hideSuccessScreen,
+          onAcceptConsent: handleAcceptConsent,
+          onDeclineConsent: handleDeclineConsent,
+          privacyPolicy: privacyPolicy,
+          tncLink: tncLink
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [modalState.currentPage === PAGES.LOGIN_OPTIONS && shouldShowLoginPage && modalState.status === MODAL_STATUS.INITIALIZED && /*#__PURE__*/jsx(Login, {
+            installedExternalWalletConfig: topInstalledConnectorButtons,
+            totalExternalWallets: allExternalWallets.length,
+            remainingUndisplayedWallets: remainingUndisplayedWallets
+          }), modalState.currentPage === PAGES.WALLET_LIST && (!shouldShowLoginPage || isExternalWalletModeOnly) && 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 };