@web3auth/modal 10.0.0-beta.0 → 10.0.0-beta.2

package/dist/lib.cjs/packages/modal/src/ui/components/Loader/Loader.js

@@ -0,0 +1,151 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var interfaces = require('../../interfaces.js');
+var localeImport = require('../../localeImport.js');
+var Image = require('../Image/Image.js');
+var PulseLoader = require('../PulseLoader/PulseLoader.js');
+
+/**
+ * ConnectingStatus component
+ * @param props - ConnectingStatusType
+ * @returns ConnectingStatus component
+ */
+function ConnectingStatus(props) {
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const {
+    connector,
+    appLogo,
+    connectorName
+  } = props;
+  const providerIcon = react.useMemo(() => connector === "twitter" ? jsxRuntime.jsx(Image, {
+    imageId: "login-x-dark"
+  }) : jsxRuntime.jsx(Image, {
+    imageId: `login-${connector}`,
+    height: "40",
+    width: "40"
+  }), [connector]);
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+    children: [jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-6",
+      children: [jsxRuntime.jsx("figure", {
+        className: "w3a--loader-logo-size w3a--flex w3a--items-center w3a--justify-center w3a--overflow-hidden",
+        children: jsxRuntime.jsx("img", {
+          src: appLogo,
+          alt: "",
+          className: "w3a--size-full w3a--object-contain"
+        })
+      }), jsxRuntime.jsx(PulseLoader, {}), providerIcon]
+    }), jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--flex-col w3a--gap-y-1",
+      children: [jsxRuntime.jsx("div", {
+        className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+        children: t("modal.adapter-loader.message1", {
+          adapter: connectorName
+        })
+      }), jsxRuntime.jsx("div", {
+        className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+        children: t("modal.adapter-loader.message2", {
+          adapter: connectorName
+        })
+      })]
+    })]
+  });
+}
+/**
+ * ConnectedStatus component
+ * @param props - ConnectedStatusType
+ * @returns ConnectedStatus component
+ */
+function ConnectedStatus(props) {
+  const {
+    message
+  } = props;
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
+    children: [jsxRuntime.jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 20 20",
+      className: "w3a--connected-logo",
+      children: jsxRuntime.jsx("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M6.267 3.455a3.07 3.07 0 0 0 1.745-.723 3.066 3.066 0 0 1 3.976 0 3.07 3.07 0 0 0 1.745.723 3.066 3.066 0 0 1 2.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 0 1 0 3.976 3.07 3.07 0 0 0-.723 1.745 3.066 3.066 0 0 1-2.812 2.812 3.07 3.07 0 0 0-1.745.723 3.066 3.066 0 0 1-3.976 0 3.07 3.07 0 0 0-1.745-.723 3.066 3.066 0 0 1-2.812-2.812 3.07 3.07 0 0 0-.723-1.745 3.066 3.066 0 0 1 0-3.976 3.07 3.07 0 0 0 .723-1.745 3.066 3.066 0 0 1 2.812-2.812m7.44 5.252a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0z",
+        clipRule: "evenodd"
+      })
+    }), jsxRuntime.jsx("p", {
+      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+      children: message
+    })]
+  });
+}
+/**
+ * ErroredStatus component
+ * @param props - ErroredStatusType
+ * @returns ErroredStatus component
+ */
+function ErroredStatus(props) {
+  const {
+    message
+  } = props;
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
+    children: [jsxRuntime.jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 20 20",
+      className: "w3a--error-logo",
+      children: jsxRuntime.jsx("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M18 10a8 8 0 1 1-16.001 0A8 8 0 0 1 18 10m-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1",
+        clipRule: "evenodd"
+      })
+    }), jsxRuntime.jsx("p", {
+      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+      children: message
+    })]
+  });
+}
+/**
+ * Loader component
+ * @param props - LoaderProps
+ * @returns Loader component
+ */
+function Loader(props) {
+  const {
+    connector,
+    connectorName,
+    modalStatus,
+    onClose,
+    appLogo,
+    message
+  } = props;
+  react.useEffect(() => {
+    if (modalStatus === interfaces.MODAL_STATUS.CONNECTED) {
+      setTimeout(() => {
+        onClose();
+      }, 1000);
+    }
+  }, [modalStatus, onClose]);
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+    children: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && jsxRuntime.jsx(ConnectingStatus, {
+      connector: connector,
+      connectorName: connectorName,
+      appLogo: appLogo
+    }), modalStatus === interfaces.MODAL_STATUS.CONNECTED && jsxRuntime.jsx(ConnectedStatus, {
+      message: message
+    }), modalStatus === interfaces.MODAL_STATUS.ERRORED && jsxRuntime.jsx(ErroredStatus, {
+      message: message
+    })]
+  });
+}
+
+module.exports = Loader;

package/dist/lib.cjs/packages/modal/src/ui/components/Login/Login.js

@@ -0,0 +1,489 @@
+'use strict';
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var jsxRuntime = require('react/jsx-runtime');
+var HCaptcha = require('@hcaptcha/react-hcaptcha');
+var auth = require('@web3auth/auth');
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var config = require('../../config.js');
+var constants = require('../../constants.js');
+var RootContext = require('../../context/RootContext.js');
+var factory = require('../../handlers/factory.js');
+var localeImport = require('../../localeImport.js');
+var utils = require('../../utils.js');
+var Image = require('../Image/Image.js');
+var SocialLoginList = require('../SocialLoginList/SocialLoginList.js');
+var LoginOtp = require('./LoginOtp/LoginOtp.js');
+var LoginPasswordLess = require('./LoginPasswordLess/LoginPasswordLess.js');
+
+const restrictedLoginMethods = [auth.AUTH_CONNECTION.SMS_PASSWORDLESS, auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS, auth.AUTH_CONNECTION.AUTHENTICATOR, auth.AUTH_CONNECTION.PASSKEYS, auth.AUTH_CONNECTION.TELEGRAM, auth.AUTH_CONNECTION.CUSTOM];
+function Login(props) {
+  // TODO: add appName, isEmailPrimary, isExternalPrimary
+  const {
+    web3authClientId,
+    web3authNetwork,
+    appLogo,
+    isModalVisible,
+    handleSocialLoginHeight,
+    socialLoginsConfig,
+    installedExternalWalletConfig,
+    isDark,
+    handleSocialLoginClick,
+    totalExternalWallets,
+    isEmailPasswordLessLoginVisible,
+    isSmsPasswordLessLoginVisible,
+    handleExternalWalletBtnClick,
+    handleExternalWalletClick,
+    areSocialLoginsVisible,
+    showPasswordLessInput,
+    showExternalWalletButton,
+    showExternalWalletCount,
+    showInstalledExternalWallets,
+    logoAlignment = "center",
+    buttonRadius = "pill",
+    enableMainSocialLoginButton = false
+  } = props;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const {
+    bodyState,
+    setBodyState
+  } = react.useContext(RootContext.RootContext);
+  const [countryCode, setCountryCode] = react.useState("");
+  const [passwordlessErrorMessage, setPasswordlessErrorMessage] = react.useState("");
+  const [otpErrorMessage, setOtpErrorMessage] = react.useState("");
+  const [expand, setExpand] = react.useState(false);
+  const [canShowMore, setCanShowMore] = react.useState(false);
+  const [visibleRow, setVisibleRow] = react.useState([]);
+  const [otherRow, setOtherRow] = react.useState([]);
+  const [isPasswordLessCtaClicked, setIsPasswordLessCtaClicked] = react.useState(false);
+  const [showOtpFlow, setShowOtpFlow] = react.useState(false);
+  const [authConnection, setAuthConnection] = react.useState(undefined);
+  const [passwordlessHandler, setPasswordlessHandler] = react.useState(undefined);
+  const [isPasswordLessLoading, setIsPasswordLessLoading] = react.useState(false);
+  const [otpLoading, setOtpLoading] = react.useState(false);
+  const [showCaptcha, setShowCaptcha] = react.useState(false);
+  const [captchaError, setCaptchaError] = react.useState("");
+  const captchaRef = react.useRef(null);
+  const handleExpand = () => {
+    setExpand(prev => !prev);
+    setIsPasswordLessCtaClicked(false);
+    handleSocialLoginHeight();
+  };
+  react.useEffect(() => {
+    const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter(loginMethodKey => {
+      return socialLoginsConfig.loginMethods[loginMethodKey].showOnModal;
+    });
+    const visibleRows = [];
+    const otherRows = [];
+    const loginOptions = Object.keys(socialLoginsConfig.loginMethods).filter(method => {
+      return !socialLoginsConfig.loginMethods[method].showOnModal === false && !restrictedLoginMethods.includes(method);
+    });
+    loginOptions.forEach((method, index) => {
+      var _socialLoginsConfig$u;
+      const connectorConfig = socialLoginsConfig.loginMethods[method];
+      const name = config.capitalizeFirstLetter(connectorConfig.name || method);
+      // const orderIndex = socialLoginsConfig.loginMethodsOrder.indexOf(method) + 1;
+      const order = index + 1;
+      const isMainOption = order === 1 && enableMainSocialLoginButton;
+      const isPrimaryBtn = (socialLoginsConfig === null || socialLoginsConfig === void 0 || (_socialLoginsConfig$u = socialLoginsConfig.uiConfig) === null || _socialLoginsConfig$u === void 0 ? void 0 : _socialLoginsConfig$u.primaryButton) === "socialLogin" && order === 1;
+      const loginOptionLength = loginOptions.length;
+      const moreThanFour = loginOptionLength >= 4;
+      const lengthCheck = moreThanFour ? order > 0 && order <= loginOptionLength : order > 0 && order < 4;
+      if (lengthCheck) {
+        visibleRows.push({
+          method,
+          isDark,
+          isPrimaryBtn,
+          name,
+          connector: socialLoginsConfig.connector,
+          loginParams: {
+            authConnection: connectorConfig.authConnection || method,
+            authConnectionId: connectorConfig.authConnectionId,
+            groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
+            extraLoginOptions: connectorConfig.extraLoginOptions,
+            name,
+            login_hint: ""
+          },
+          order,
+          isMainOption
+        });
+      }
+      otherRows.push({
+        method,
+        isDark,
+        isPrimaryBtn,
+        name: name === "Twitter" ? "X" : name,
+        connector: socialLoginsConfig.connector,
+        loginParams: {
+          authConnection: method,
+          authConnectionId: connectorConfig.authConnectionId,
+          groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
+          extraLoginOptions: connectorConfig.extraLoginOptions,
+          name,
+          login_hint: ""
+        },
+        order,
+        isMainOption
+      });
+    });
+    setVisibleRow(visibleRows);
+    setOtherRow(otherRows);
+    setCanShowMore(maxOptions.length > 4); // Update the state based on the condition
+  }, [socialLoginsConfig, isDark, enableMainSocialLoginButton, buttonRadius]);
+  const handleCustomLogin = async (authConnection, loginHint) => {
+    try {
+      const handler = factory.createPasswordlessHandler(authConnection, {
+        loginHint,
+        web3authClientId,
+        network: web3authNetwork,
+        uiConfig: socialLoginsConfig.uiConfig,
+        authConnection
+      });
+      let token = "";
+      if (authConnection === auth.AUTH_CONNECTION.SMS_PASSWORDLESS) {
+        var _captchaRef$current;
+        const res = await ((_captchaRef$current = captchaRef.current) === null || _captchaRef$current === void 0 ? void 0 : _captchaRef$current.execute({
+          async: true
+        }));
+        if (!res) {
+          throw noModal.WalletLoginError.connectionError("Captcha token is required");
+        }
+        token = res.response;
+      }
+      const result = await handler.sendVerificationCode({
+        captchaToken: token
+      });
+      if (result !== null && result !== void 0 && result.error) {
+        setPasswordlessErrorMessage(t(result.error));
+        return;
+      }
+      setAuthConnection(authConnection);
+      setShowOtpFlow(true);
+      setPasswordlessHandler(handler);
+    } catch (error) {
+      noModal.log.error(error);
+    } finally {
+      setIsPasswordLessLoading(false);
+    }
+  };
+  const handleFormSubmit = async loginHint => {
+    setIsPasswordLessLoading(true);
+    if (isEmailPasswordLessLoginVisible) {
+      const isEmailValid = loginHint.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
+      if (isEmailValid) {
+        const connectorConfig = socialLoginsConfig.loginMethods[auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS];
+        if (connectorConfig.isDefault) {
+          return handleSocialLoginClick({
+            connector: socialLoginsConfig.connector || "",
+            loginParams: {
+              authConnection: auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS,
+              authConnectionId: connectorConfig.authConnectionId,
+              groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
+              extraLoginOptions: connectorConfig.extraLoginOptions,
+              login_hint: loginHint,
+              name: "Email"
+            }
+          });
+        } else {
+          return handleCustomLogin(auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS, loginHint);
+        }
+      }
+    }
+    if (isSmsPasswordLessLoginVisible) {
+      const number = loginHint.startsWith("+") ? loginHint : `${countryCode}${loginHint}`;
+      const result = await utils.validatePhoneNumber(number);
+      if (result) {
+        const finalLoginHint = typeof result === "string" ? result : number;
+        const connectorConfig = socialLoginsConfig.loginMethods[auth.AUTH_CONNECTION.SMS_PASSWORDLESS];
+        if (connectorConfig.isDefault) {
+          return handleSocialLoginClick({
+            connector: socialLoginsConfig.connector || "",
+            loginParams: {
+              authConnection: auth.AUTH_CONNECTION.SMS_PASSWORDLESS,
+              authConnectionId: connectorConfig.authConnectionId,
+              groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
+              extraLoginOptions: connectorConfig.extraLoginOptions,
+              login_hint: finalLoginHint,
+              name: "Mobile"
+            }
+          });
+        } else {
+          return handleCustomLogin(auth.AUTH_CONNECTION.SMS_PASSWORDLESS, finalLoginHint);
+        }
+      }
+    }
+    setPasswordlessErrorMessage(invalidInputErrorMessage);
+    setIsPasswordLessLoading(false);
+    return undefined;
+  };
+  const title = react.useMemo(() => {
+    if (isEmailPasswordLessLoginVisible && isSmsPasswordLessLoginVisible) return t("modal.social.passwordless-title");
+    if (isEmailPasswordLessLoginVisible) return t("modal.social.email");
+    return t("modal.social.phone");
+  }, [isEmailPasswordLessLoginVisible, isSmsPasswordLessLoginVisible, t]);
+  const placeholder = react.useMemo(() => {
+    if (isEmailPasswordLessLoginVisible && isSmsPasswordLessLoginVisible) return "+(00)123456/name@example.com";
+    if (isEmailPasswordLessLoginVisible) return "name@example.com";
+    return "+(00)123456";
+  }, [isEmailPasswordLessLoginVisible, isSmsPasswordLessLoginVisible]);
+  const invalidInputErrorMessage = react.useMemo(() => {
+    if (isEmailPasswordLessLoginVisible && isSmsPasswordLessLoginVisible) return t("modal.errors-invalid-number-email");
+    if (isEmailPasswordLessLoginVisible) return t("modal.errors-invalid-email");
+    return t("modal.errors-invalid-number");
+  }, [isEmailPasswordLessLoginVisible, isSmsPasswordLessLoginVisible, t]);
+  react.useEffect(() => {
+    const getLocation = async () => {
+      const result = await utils.getUserCountry();
+      if (result && result.dialCode) {
+        setCountryCode(result.dialCode);
+      }
+    };
+    if (isSmsPasswordLessLoginVisible) getLocation();
+  }, [isSmsPasswordLessLoginVisible]);
+  const handleConnectWallet = e => {
+    setIsPasswordLessCtaClicked(false);
+    e.preventDefault();
+    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
+  };
+  const handleOtpComplete = async otp => {
+    setOtpLoading(true);
+    if (otpErrorMessage) setOtpErrorMessage("");
+    try {
+      var _result$data;
+      const connectorConfig = socialLoginsConfig.loginMethods[authConnection];
+      const result = await (passwordlessHandler === null || passwordlessHandler === void 0 ? void 0 : passwordlessHandler.verifyCode(otp));
+      if (result !== null && result !== void 0 && result.error) {
+        setOtpErrorMessage(t(result.error));
+        return;
+      }
+      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,
+            groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
+            extraLoginOptions: _objectSpread(_objectSpread({}, connectorConfig.extraLoginOptions), {}, {
+              id_token: (_result$data2 = result.data) === null || _result$data2 === void 0 ? void 0 : _result$data2.id_token
+            }),
+            login_hint: passwordlessHandler.passwordlessParams.loginHint,
+            name: passwordlessHandler.name
+          }
+        });
+      }
+    } catch (error) {
+      noModal.log.error(error);
+    } finally {
+      setOtpLoading(false);
+    }
+  };
+  const handleInstalledWalletClick = wallet => {
+    var _wallet$chainNamespac;
+    // 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) {
+      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        showMultiChainSelector: true,
+        walletDetails: wallet
+      }));
+    } else {
+      handleExternalWalletClick({
+        connector: wallet.name
+      });
+    }
+  };
+  const installedExternalWallets = react.useMemo(() => {
+    if (showInstalledExternalWallets) return installedExternalWalletConfig;
+    // always show MetaMask
+    return installedExternalWalletConfig.filter(wallet => wallet.name === noModal.WALLET_CONNECTORS.METAMASK);
+  }, [installedExternalWalletConfig, showInstalledExternalWallets]);
+  if (showOtpFlow) {
+    return jsxRuntime.jsx(LoginOtp, {
+      otpLoading: otpLoading,
+      loginHint: passwordlessHandler === null || passwordlessHandler === void 0 ? void 0 : passwordlessHandler.passwordlessParams.loginHint,
+      setShowOtpFlow: setShowOtpFlow,
+      authConnection: authConnection,
+      handleOtpComplete: handleOtpComplete,
+      errorMessage: otpErrorMessage
+    });
+  }
+  const socialLoginSection = (otherRow = []) => {
+    return jsxRuntime.jsx(SocialLoginList, {
+      otherRow: otherRow,
+      isDark: isDark,
+      visibleRow: visibleRow,
+      canShowMore: canShowMore,
+      handleSocialLoginClick: handleSocialLoginClick,
+      socialLoginsConfig: socialLoginsConfig,
+      handleExpandSocialLogins: handleExpand,
+      buttonRadius: buttonRadius
+    }, "social-login-section");
+  };
+  const passwordlessLoginSection = () => {
+    return jsxRuntime.jsx(LoginPasswordLess, {
+      isModalVisible: isModalVisible,
+      isPasswordLessCtaClicked: isPasswordLessCtaClicked,
+      setIsPasswordLessCtaClicked: setIsPasswordLessCtaClicked,
+      title: title,
+      placeholder: placeholder,
+      handleFormSubmit: handleFormSubmit,
+      errorMessage: passwordlessErrorMessage,
+      isDark: isDark,
+      buttonRadius: buttonRadius,
+      isPasswordLessLoading: isPasswordLessLoading
+    }, "passwordless-section");
+  };
+  const externalWalletSection = () => {
+    return jsxRuntime.jsxs("div", {
+      className: utils.cn("w3a--flex w3a--w-full w3a--flex-col w3a--items-start w3a--justify-start w3a--gap-y-2"),
+      children: [installedExternalWallets.length > 0 && installedExternalWallets.map(wallet => jsxRuntime.jsxs("button", {
+        type: "button",
+        className: utils.cn("w3a--btn !w3a--justify-between w3a-external-wallet-btn", {
+          "w3a--rounded-full": buttonRadius === "pill",
+          "w3a--rounded-lg": buttonRadius === "rounded",
+          "w3a--rounded-none": buttonRadius === "square"
+        }),
+        onClick: () => handleInstalledWalletClick(wallet),
+        children: [jsxRuntime.jsx("p", {
+          className: "w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+          children: wallet.displayName
+        }), jsxRuntime.jsxs("div", {
+          className: "w3a--flex w3a--items-center w3a--gap-x-2",
+          children: [wallet.hasInjectedWallet && jsxRuntime.jsx("span", {
+            className: "w3a--inline-flex w3a--items-center w3a--rounded-md w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 \n                  dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
+            children: t("modal.external.installed")
+          }), jsxRuntime.jsx("figure", {
+            className: wallet.icon ? "w3a--size-5" : "w3a--size-5 w3a--rounded-full w3a--bg-app-gray-300",
+            children: jsxRuntime.jsx(Image, {
+              imageData: wallet.icon,
+              imageId: `login-${wallet.name}`,
+              hoverImageId: `login-${wallet.name}`,
+              fallbackImageId: "wallet",
+              height: "24",
+              width: "24",
+              isButton: true,
+              extension: wallet.imgExtension || "webp"
+            })
+          })]
+        })]
+      }, wallet.name)), totalExternalWallets > 3 && jsxRuntime.jsxs("button", {
+        type: "button",
+        className: utils.cn("w3a--btn !w3a--justify-between w3a-external-wallet-btn", {
+          "w3a--rounded-full": buttonRadius === "pill",
+          "w3a--rounded-lg": buttonRadius === "rounded",
+          "w3a--rounded-none": buttonRadius === "square"
+        }),
+        onClick: handleConnectWallet,
+        children: [jsxRuntime.jsx("p", {
+          className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+          children: t("modal.external.all-wallets")
+        }), showExternalWalletCount && totalExternalWallets > 0 && jsxRuntime.jsx("div", {
+          id: "external-wallet-count",
+          className: "w3a--w-auto w3a--rounded-full w3a--bg-app-primary-100 w3a--px-2.5 w3a--py-0.5 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 dark:w3a--border dark:w3a--border-app-primary-500 dark:w3a--bg-transparent dark:w3a--text-app-primary-500",
+          children: totalExternalWallets - 1
+        }), jsxRuntime.jsx("img", {
+          id: "external-wallet-arrow",
+          className: "w3a--icon-animation",
+          src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+          alt: "arrow"
+        })]
+      })]
+    }, "external-wallets-section");
+  };
+  const delimiter = index => {
+    return jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--w-full w3a--items-center w3a--gap-x-2",
+      children: [jsxRuntime.jsx("div", {
+        className: "w3a--h-px w3a--w-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-500"
+      }), jsxRuntime.jsx("p", {
+        className: "w3a--text-xs w3a--font-normal w3a--uppercase w3a--text-app-gray-400 dark:w3a--text-app-gray-400",
+        children: "or"
+      }), jsxRuntime.jsx("div", {
+        className: "w3a--h-px w3a--w-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-500"
+      })]
+    }, `section-delimiter-${index}`);
+  };
+  const defaultView = () => {
+    var _socialLoginsConfig$u2;
+    const sectionMap = {
+      social: socialLoginSection,
+      passwordless: passwordlessLoginSection,
+      externalWallets: externalWalletSection
+    };
+    const sectionVisibility = {
+      social: areSocialLoginsVisible,
+      passwordless: showPasswordLessInput,
+      externalWallets: showExternalWalletButton
+    };
+    const signInMethods = ((_socialLoginsConfig$u2 = socialLoginsConfig.uiConfig) === null || _socialLoginsConfig$u2 === void 0 ? void 0 : _socialLoginsConfig$u2.signInMethods) || ["social", "passwordless", "externalWallets"];
+    // add missing signInMethods in case uiConfig.signInMethods is not set correctly
+    Object.entries(sectionVisibility).forEach(([method, visibility]) => {
+      if (visibility && !signInMethods.includes(method)) {
+        signInMethods.push(method);
+      }
+    });
+    const sections = signInMethods.map(method => sectionVisibility[method] && sectionMap[method]()).filter(Boolean);
+    // add delimiter between external wallets and other sections
+    if (sections.length === 3) {
+      const externalWalletIndex = signInMethods.findIndex(section => section === "externalWallets");
+      if (externalWalletIndex === 0) {
+        // add after it
+        sections.splice(1, 0, delimiter(1));
+      } else if (externalWalletIndex === 1) {
+        // add before it
+        sections.splice(1, 0, delimiter(1));
+        // add after it
+        sections.splice(3, 0, delimiter(2));
+      } else if (externalWalletIndex === 2) {
+        // add before it
+        sections.splice(2, 0, delimiter(1));
+      }
+    } else if (sections.length === 2) {
+      if (sectionVisibility["externalWallets"]) {
+        sections.splice(1, 0, delimiter(1));
+      }
+    }
+    return sections;
+  };
+  const expandedView = () => socialLoginSection(otherRow);
+  const headerLogo = [constants.DEFAULT_LOGO_DARK, constants.DEFAULT_LOGO_LIGHT].includes(appLogo) ? "" : appLogo;
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-4 w3a--p-2",
+    children: [jsxRuntime.jsxs("div", {
+      className: utils.cn("w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2 w3a--pt-6", logoAlignment === "center" ? "" : "w3a--w-full"),
+      children: [jsxRuntime.jsx("figure", {
+        className: utils.cn("w3a--mx-auto w3a--h-12 w3a--w-[200px]", logoAlignment === "center" ? "w3a--flex w3a--justify-center w3a--items-center" : "w3a--ml-0"),
+        children: jsxRuntime.jsx("img", {
+          src: headerLogo || utils.getIcons(isDark ? "logo-dark" : "logo-light"),
+          alt: "Logo",
+          className: "w3a--object-contain"
+        })
+      }), jsxRuntime.jsx("p", {
+        className: utils.cn("w3a--text-lg w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white", logoAlignment === "center" ? "w3a--text-center" : "w3a--text-left w3a--w-full w3a--ml-4"),
+        children: t("modal.social.sign-in")
+      })]
+    }), jsxRuntime.jsx(HCaptcha, {
+      ref: captchaRef,
+      sitekey: config.CAPTCHA_SITE_KEY,
+      size: "invisible",
+      languageOverride: socialLoginsConfig.uiConfig.defaultLanguage,
+      theme: socialLoginsConfig.uiConfig.theme,
+      onOpen: () => setShowCaptcha(true),
+      onClose: () => setShowCaptcha(false),
+      onError: () => setCaptchaError("passwordless.captcha-default-error"),
+      onChalExpired: () => setCaptchaError("passwordless.captcha-default-error")
+    }), captchaError && showCaptcha && jsxRuntime.jsx("p", {
+      className: "-w3a--mt-2 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",
+      children: t(captchaError)
+    }), !showCaptcha && jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
+      children: [!expand && defaultView(), expand && expandedView()]
+    })]
+  });
+}
+
+module.exports = Login;