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

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

@@ -51,12 +51,12 @@ function ConnectWalletQrCode(props) {
   const modalColor = ((_getComputedStyle = getComputedStyle(root)) === null || _getComputedStyle === void 0 || (_getComputedStyle = _getComputedStyle.getPropertyValue("--app-gray-800")) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.trim()) || "#1f2a37";
   const qrColor = primaryColor && primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
   return jsxRuntime.jsxs("div", {
-    className: "w3a--contents",
+    className: "wta:contents",
     children: [qrCodeValue ? jsxRuntime.jsxs("div", {
-      className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--rounded-2xl w3a--border w3a--border-app-gray-200 w3a--p-4 dark:w3a--border-app-gray-700",
+      className: "wta:flex wta:flex-col wta:items-center wta:justify-center wta:gap-y-4 wta:rounded-2xl wta:border wta:border-app-gray-200 wta:p-4 wta:dark:border-app-gray-700",
       children: [jsxRuntime.jsx("button", {
         type: "button",
-        className: "w3a--relative w3a--flex w3a--size-[300px] w3a--appearance-none w3a--items-center w3a--justify-center w3a--rounded-2xl",
+        className: "wta:relative wta:flex wta:size-[300px] wta:appearance-none wta:items-center wta:justify-center wta:rounded-2xl",
         onClick: () => {
           navigator.clipboard.writeText(qrCodeValue);
           setToast({
@@ -79,11 +79,11 @@ function ConnectWalletQrCode(props) {
           fgColor: isDark ? whiteColor : blackColor
         })
       }), jsxRuntime.jsx("p", {
-        className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+        className: "wta:text-center wta:text-sm wta:font-normal wta:text-app-gray-500 wta:dark:text-app-gray-300",
         children: t("modal.external.walletconnect-copy")
       })]
     }) : jsxRuntime.jsx("div", {
-      className: "w3a--mx-auto w3a--flex w3a--size-[300px] w3a--animate-pulse w3a--items-center w3a--justify-center w3a--rounded-lg w3a--bg-app-gray-200 w3a--p-2 dark:w3a--bg-app-gray-700",
+      className: "wta:mx-auto wta:flex wta:size-[300px] wta:animate-pulse wta:items-center wta:justify-center wta:rounded-lg wta:bg-app-gray-200 wta:p-2 wta:dark:bg-app-gray-700",
       children: jsxRuntime.jsx(Image, {
         imageId: `login-${selectedButton.name}`,
         hoverImageId: `login-${selectedButton.name}`,
@@ -94,15 +94,15 @@ function ConnectWalletQrCode(props) {
         extension: selectedButton.imgExtension
       })
     }), showGetWalletComponent && jsxRuntime.jsxs("div", {
-      className: "w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--rounded-2xl w3a--bg-app-gray-50 \n      w3a--px-4 w3a--py-2 w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white",
+      className: "wta:flex wta:w-full wta:items-center wta:justify-between wta:rounded-2xl wta:bg-app-gray-50 \n      wta:px-4 wta:py-2 wta:text-app-gray-900 wta:dark:bg-app-gray-800 wta:dark:text-app-white",
       children: [jsxRuntime.jsxs("p", {
-        className: "w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white",
+        className: "wta:text-sm wta:text-app-gray-900 wta:dark:text-app-white",
         children: [t("modal.external.dont-have"), " ", jsxRuntime.jsx("span", {
           children: selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName
         }), "?"]
       }), jsxRuntime.jsx("button", {
         type: "button",
-        className: "w3a--appearance-none w3a--rounded-full w3a--border w3a--border-app-gray-200 w3a--bg-transparent w3a--px-5 w3a--py-2 w3a--text-base w3a--font-normal w3a--text-app-gray-700 w3a--transition-all w3a--duration-150 hover:w3a--border-transparent hover:w3a--shadow-light active:w3a--scale-95 dark:w3a--border-app-gray-700 dark:w3a--text-app-gray-300 dark:hover:w3a--border-transparent dark:hover:w3a--shadow-dark",
+        className: "wta:appearance-none wta:rounded-full wta:border wta:border-app-gray-200 wta:bg-transparent wta:px-5 wta:py-2 wta:text-base wta:font-normal wta:text-app-gray-700 wta:transition-all wta:duration-150 wta:hover:border-transparent wta:hover:shadow-light wta:active:scale-95 wta:dark:border-app-gray-700 wta:dark:text-app-gray-300 wta:dark:hover:border-transparent wta:dark:hover:shadow-dark",
         onClick: () => {
           setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
             installLinks: {

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

@@ -30,7 +30,7 @@ function ConnectWalletSearch(props) {
   };
   // const isShowSearch = totalExternalWalletCount > 15 && !isLoading;
   // if (!isShowSearch) {
-  //   return <div className="w3a--h-[50px] w3a--w-full w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />;
+  //   return <div className="wta:h-[50px] wta:w-full wta:animate-pulse wta:rounded-full wta:bg-app-gray-200 wta:dark:bg-app-gray-700" />;
   // }
   return jsxRuntime.jsx("input", {
     type: "text",
@@ -50,10 +50,10 @@ function ConnectWalletSearch(props) {
       count: totalExternalWalletCount
     }),
     disabled: isLoading,
-    className: utils.cn("w3a--input w3a--appearance-none w3a--outline-none active:w3a--outline-none focus:w3a--outline-none w3a--bg-transparent placeholder:w3a--text-app-gray-400 dark:placeholder:w3a--text-app-gray-500 w3a--text-app-gray-900 dark:w3a--text-app-white", 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 wta:appearance-none wta:outline-none wta:active:outline-none wta:focus:outline-none wta:bg-transparent wta:placeholder:text-app-gray-400 wta:dark:placeholder:text-app-gray-500 wta:text-app-gray-900 wta:dark:text-app-white", isInputFocused && "wta:border-app-primary-600!", {
+      "wta:rounded-full": buttonRadius === "pill",
+      "wta:rounded-lg": buttonRadius === "rounded",
+      "wta:rounded-none": buttonRadius === "square"
     })
   });
 }

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

@@ -37,18 +37,18 @@ function Embed(props) {
   };
   if (!isOpen) return null;
   return jsxRuntime.jsxs("div", {
-    className: utils.cn("w3a--bg-app-light-surface1 dark:w3a--bg-app-dark-surface-main w3a--rounded-3xl w3a--w-[356px] [@media(min-width:375px)]:w3a--w-[393px] w3a--h-auto w3a--flex w3a--flex-col w3a--duration-500", {
-      "w3a--translate-y-0 w3a--delay-100": isOpen,
-      "w3a--translate-y-[100vh]": !isOpen,
-      "w3a--p-4": padding,
-      "w3a--shadow-xl sm:w3a--shadow-lg": shadow,
-      "w3a--border w3a--border-app-gray-100 dark:w3a--border-app-gray-800": border,
-      "w3a--rounded-[30px]": borderRadius === "large",
-      "w3a--rounded-2xl": borderRadius === "medium",
-      "w3a--rounded-none": borderRadius === "small"
+    className: utils.cn("wta:bg-app-light-surface1 wta:dark:bg-app-dark-surface-main wta:rounded-3xl wta:w-[356px] wta:[@media(min-width:375px)]:w-[393px] wta:h-auto wta:flex wta:flex-col wta:duration-500", {
+      "wta:translate-y-0 wta:delay-100": isOpen,
+      "wta:translate-y-[100vh]": !isOpen,
+      "wta:p-4": padding,
+      "wta:shadow-xl wta:sm:shadow-lg": shadow,
+      "wta:border wta:border-app-gray-100 wta:dark:border-app-gray-800": border,
+      "wta:rounded-[30px]": borderRadius === "large",
+      "wta:rounded-2xl": borderRadius === "medium",
+      "wta:rounded-none": borderRadius === "small"
     }),
     children: [showCloseIcon && jsxRuntime.jsx("div", {
-      className: "w3a--absolute w3a--right-6 w3a--top-[30px] w3a--z-10 w3a--cursor-pointer",
+      className: "wta:absolute wta:right-6 wta:top-[30px] wta:z-10 wta:cursor-pointer",
       children: jsxRuntime.jsx("svg", {
         width: "13",
         height: "13",
@@ -56,7 +56,7 @@ function Embed(props) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         onClick: onCloseHandler,
-        className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+        className: "wta:text-app-gray-900 wta:dark:text-app-white",
         children: jsxRuntime.jsx("path", {
           fillRule: "evenodd",
           clipRule: "evenodd",

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

@@ -22,7 +22,9 @@ var utils = require('../../utils.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];
+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,
+// Farcaster login is deprecated and no longer supported by the Web3Auth SDKs.
+auth.AUTH_CONNECTION.FARCASTER];
 function Login(props) {
   const {
     installedExternalWalletConfig,
@@ -76,10 +78,6 @@ function Login(props) {
   const [passwordlessErrorMessage, setPasswordlessErrorMessage] = react.useState("");
   const [otpErrorMessage, setOtpErrorMessage] = react.useState("");
   const [expandSocialLogins, setExpandSocialLogins] = react.useState(false);
-  const [canShowMore, setCanShowMore] = react.useState(false);
-  const [visibleRow, setVisibleRow] = react.useState([]);
-  const [otherRow, setOtherRow] = react.useState([]);
-  const [mainOptionsRow, setMainOptionsRow] = react.useState([]);
   const [isPasswordLessCtaClicked, setIsPasswordLessCtaClicked] = react.useState(false);
   const [showOtpFlow, setShowOtpFlow] = react.useState(false);
   const [authConnection, setAuthConnection] = react.useState(undefined);
@@ -93,7 +91,12 @@ function Login(props) {
     setExpandSocialLogins(prev => !prev);
     setIsPasswordLessCtaClicked(false);
   };
-  react.useEffect(() => {
+  const {
+    visibleRow,
+    otherRow,
+    mainOptionsRow,
+    canShowMore
+  } = react.useMemo(() => {
     const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter(loginMethodKey => {
       return socialLoginsConfig.loginMethods[loginMethodKey].showOnModal && !restrictedLoginMethods.includes(loginMethodKey);
     });
@@ -160,11 +163,13 @@ function Login(props) {
       }
       otherRows.push(rows);
     });
-    setVisibleRow(visibleRows);
-    setOtherRow(otherRows);
-    setMainOptionsRow(mainOptionsRows);
-    setCanShowMore(maxOptions.length > 4); // Update the state based on the condition
-  }, [socialLoginsConfig, isDark, buttonRadius]);
+    return {
+      visibleRow: visibleRows,
+      otherRow: otherRows,
+      mainOptionsRow: mainOptionsRows,
+      canShowMore: maxOptions.length > 4
+    };
+  }, [socialLoginsConfig, isDark]);
   const handleCustomLogin = async (authConnection, loginHint) => {
     try {
       const handler = factory.createPasswordlessHandler(authConnection, {
@@ -247,7 +252,7 @@ function Login(props) {
         }
       }
     }
-    setPasswordlessErrorMessage(invalidInputErrorMessage);
+    setPasswordlessErrorMessage(getInvalidInputErrorMessage());
     setIsPasswordLessLoading(false);
     return undefined;
   };
@@ -261,11 +266,11 @@ function Login(props) {
     if (isEmailPasswordLessLoginVisible) return "name@example.com";
     return "+(00)123456";
   }, [isEmailPasswordLessLoginVisible, isSmsPasswordLessLoginVisible]);
-  const invalidInputErrorMessage = react.useMemo(() => {
+  const getInvalidInputErrorMessage = () => {
     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();
@@ -375,6 +380,7 @@ function Login(props) {
   }, [analytics, handleExternalWalletBtnClick, installedExternalWallets.length, totalExternalWallets]);
   react.useEffect(() => {
     if (showExternalWalletButton && !areSocialLoginsVisible && !showPasswordLessInput) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
       handleConnectWallet();
     }
   }, [showExternalWalletButton, areSocialLoginsVisible, showPasswordLessInput, handleConnectWallet]);
@@ -418,25 +424,25 @@ function Login(props) {
   };
   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"),
+      className: utils.cn("wta:flex wta:w-full wta:flex-col wta:items-start wta:justify-start wta:gap-y-2"),
       children: [installedExternalWallets.length > 0 && installedExternalWallets.map(wallet => jsxRuntime.jsxs("button", {
         type: "button",
-        className: utils.cn("w3a--btn !w3a--justify-between w3a--group w3a--relative 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:group wta:relative wta:overflow-hidden", {
+          "wta:rounded-full": buttonRadius === "pill",
+          "wta:rounded-lg": buttonRadius === "rounded",
+          "wta:rounded-none": buttonRadius === "square"
         }),
         onClick: () => handleInstalledWalletClick(wallet),
         children: [jsxRuntime.jsx("p", {
-          className: "w3a--max-w-[180px] w3a--truncate w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+          className: "wta:max-w-[180px] wta:truncate wta:text-base wta:font-normal wta:text-app-gray-700 wta:dark:text-app-white",
           children: wallet.displayName
         }), jsxRuntime.jsxs("div", {
-          className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--flex w3a--w-auto -w3a--translate-y-1/2 w3a--items-center w3a--gap-x-2 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0",
+          className: "wta:absolute wta:right-4 wta:top-1/2 wta:flex wta:w-auto wta:-translate-y-1/2 wta:items-center wta:gap-x-2 wta:transition-all wta:duration-300 wta:group-hover:translate-x-6 wta:group-hover:opacity-0",
           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",
+            className: "wta:inline-flex wta:items-center wta:rounded-md wta:bg-app-primary-100 wta:px-2 wta:py-1 wta:text-xs wta:font-medium wta:text-app-primary-800 \n                  wta:dark:border wta:dark:border-app-primary-400 wta:dark:bg-transparent wta:dark:text-app-primary-400",
             children: t("modal.external.installed")
           }), jsxRuntime.jsx("figure", {
-            className: "w3a--size-5",
+            className: "wta:size-5",
             children: jsxRuntime.jsx(Image, {
               imageData: wallet.icon,
               imageId: `login-${wallet.name}`,
@@ -450,28 +456,28 @@ function Login(props) {
           })]
         }), jsxRuntime.jsx("img", {
           id: "injected-wallet-arrow",
-          className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -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-10 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"
         })]
       }, wallet.name)), remainingUndisplayedWallets > 0 && jsxRuntime.jsxs("button", {
         type: "button",
-        className: utils.cn("w3a--btn !w3a--justify-between w3a--group w3a--relative 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:group wta:relative wta:overflow-hidden", {
+          "wta:rounded-full": buttonRadius === "pill",
+          "wta:rounded-lg": buttonRadius === "rounded",
+          "wta:rounded-none": buttonRadius === "square"
         }),
         onClick: handleConnectWallet,
         children: [jsxRuntime.jsx("p", {
-          className: "w3a--text-base w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
+          className: "wta:text-base wta:font-normal wta:text-app-gray-900 wta:dark:text-app-white",
           children: t("modal.external.all-wallets")
         }), showExternalWalletCount && jsxRuntime.jsx("div", {
           id: "external-wallet-count",
-          className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--w-auto -w3a--translate-y-1/2 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 w3a--transition-all w3a--delay-300 w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 group-hover:w3a--delay-0 dark:w3a--border dark:w3a--border-app-primary-500 dark:w3a--bg-transparent dark:w3a--text-app-primary-500",
+          className: "wta:absolute wta:right-4 wta:top-1/2 wta:w-auto wta:-translate-y-1/2 wta:rounded-full wta:bg-app-primary-100 wta:px-2.5 wta:py-0.5 wta:text-xs wta:font-medium wta:text-app-primary-800 wta:transition-all wta:delay-300 wta:duration-300 wta:group-hover:translate-x-6 wta:group-hover:opacity-0 wta:group-hover:delay-0 wta:dark:border wta:dark:border-app-primary-500 wta:dark:bg-transparent wta:dark:text-app-primary-500",
           children: remainingUndisplayedWallets
         }), jsxRuntime.jsx("img", {
           id: "external-wallet-arrow",
-          className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -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-10 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"
         })]
@@ -481,14 +487,14 @@ function Login(props) {
   const headerLogo = [constants.DEFAULT_LOGO_DARK, constants.DEFAULT_LOGO_LIGHT].includes(appLogo) ? "" : appLogo;
   const delimiter = index => {
     return jsxRuntime.jsxs("div", {
-      className: utils.cn("w3a--flex w3a--w-full w3a--items-center w3a--gap-x-2", headerLogo ? "w3a--my-2" : "w3a--my-4"),
+      className: utils.cn("wta:flex wta:w-full wta:items-center wta:gap-x-2", headerLogo ? "wta:my-2" : "wta:my-4"),
       children: [jsxRuntime.jsx("div", {
-        className: "w3a--h-px w3a--w-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-500"
+        className: "wta:h-px wta:w-full wta:bg-app-gray-200 wta:dark: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",
+        className: "wta:text-xs wta:font-normal wta:uppercase wta:text-app-gray-400 wta:dark: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"
+        className: "wta:h-px wta:w-full wta:bg-app-gray-200 wta:dark:bg-app-gray-500"
       })]
     }, `section-delimiter-${index}`);
   };
@@ -536,18 +542,18 @@ function Login(props) {
   };
   const socialLoginExpandedView = () => socialLoginSection(otherRow);
   return jsxRuntime.jsxs("div", {
-    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-4 w3a--p-2",
+    className: "wta:flex wta:flex-col wta:items-center wta:gap-y-4 wta: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"),
+      className: utils.cn("wta:flex wta:flex-col wta:items-center wta:justify-center wta:gap-y-2 wta:pt-6", logoAlignment === "center" ? "" : "wta:w-full"),
       children: [headerLogo && 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 w3a--w-auto"),
+        className: utils.cn("wta:mx-auto wta:h-12 wta:w-[200px]", logoAlignment === "center" ? "wta:flex wta:justify-center wta:items-center" : "wta:ml-0 wta:w-auto"),
         children: jsxRuntime.jsx("img", {
           src: headerLogo,
           alt: "Logo",
-          className: "w3a--size-full w3a--object-contain"
+          className: "wta:size-full wta:object-contain"
         })
       }), jsxRuntime.jsx("p", {
-        className: utils.cn("w3a--text-app-gray-900 dark:w3a--text-app-white", logoAlignment === "center" ? "w3a--text-center" : "w3a--text-left w3a--w-full w3a--ml-4", headerLogo ? "w3a--text-lg w3a--font-semibold" : "w3a--text-3xl w3a--font-medium"),
+        className: utils.cn("wta:text-app-gray-900 wta:dark:text-app-white", logoAlignment === "center" ? "wta:text-center" : "wta:text-left wta:w-full wta:ml-4", headerLogo ? "wta:text-lg wta:font-semibold" : "wta:text-3xl wta:font-medium"),
         children: t("modal.social.sign-in")
       })]
     }), jsxRuntime.jsx(HCaptcha, {
@@ -561,10 +567,10 @@ function Login(props) {
       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",
+      className: "wta:-mt-2 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: 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",
+      className: "wta:flex wta:w-full wta:flex-col wta:items-center wta:justify-center wta:gap-y-2",
       children: [!expandSocialLogins && defaultView(), expandSocialLogins && socialLoginExpandedView()]
     })]
   });

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

@@ -35,16 +35,16 @@ function OtpInput(props) {
   }, [loginHint, authConnection, countryFlag]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", {
-      className: "w3a--mr-auto w3a--flex w3a--w-full w3a--items-start w3a--justify-start",
+      className: "wta:mr-auto wta:flex wta:w-full wta:items-start wta:justify-start",
       children: jsxRuntime.jsx("button", {
         type: "button",
-        className: "w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full",
+        className: "wta:z-20 wta:flex wta:size-5 wta:cursor-pointer wta:items-center wta:justify-center wta:rounded-full",
         onClick: () => setShowOtpFlow(false),
         children: jsxRuntime.jsx("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           fill: "none",
           viewBox: "0 0 20 20",
-          className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+          className: "wta:text-app-gray-900 wta:dark:text-app-white",
           children: jsxRuntime.jsx("path", {
             fill: "currentColor",
             fillRule: "evenodd",
@@ -54,23 +54,23 @@ function OtpInput(props) {
         })
       })
     }), jsxRuntime.jsxs("div", {
-      className: "-w3a--mt-10 w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+      className: "wta:-mt-10 wta:flex wta:size-full wta:flex-1 wta:flex-col wta:items-center wta:justify-center wta:gap-y-4",
       children: [jsxRuntime.jsx("img", {
         src: utils.getIcons(isMobileOtp ? "sms-otp-light" : "email-otp-light"),
         alt: "otp",
-        className: "w3a--size-auto"
+        className: "wta:size-auto"
       }), jsxRuntime.jsxs("div", {
-        className: "w3a--mx-auto -w3a--mt-6 w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
+        className: "wta:mx-auto wta:-mt-6 wta:flex wta:w-full wta:flex-col wta:items-center wta:justify-center wta:gap-y-2",
         children: [jsxRuntime.jsx("p", {
-          className: "w3a--text-lg w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white",
+          className: "wta:text-lg wta:font-bold wta:text-app-gray-900 wta:dark:text-app-white",
           children: isMobileOtp ? t("modal.otp.mobile-title") : t("modal.otp.email-title")
         }), jsxRuntime.jsxs("div", {
-          className: "w3a--mx-auto w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1",
+          className: "wta:mx-auto wta:flex wta:w-full wta:flex-col wta:items-center wta:justify-center wta:gap-y-1",
           children: [jsxRuntime.jsx("p", {
-            className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+            className: "wta:text-center wta:text-sm wta:font-normal wta:text-app-gray-500 wta:dark:text-app-gray-300",
             children: isMobileOtp ? t("modal.otp.mobile-subtext") : t("modal.otp.email-subtext")
           }), jsxRuntime.jsx("p", {
-            className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+            className: "wta:text-center wta:text-sm wta:font-normal wta:text-app-gray-500 wta:dark:text-app-gray-300",
             children: isMobileOtp ? parsedLoginHint : t("modal.otp.email-subtext-example", {
               email: parsedLoginHint
             })
@@ -103,7 +103,7 @@ function LoginOtp(props) {
     countryFlag
   } = props;
   return jsxRuntime.jsx("div", {
-    className: "w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+    className: "wta:flex wta:size-full wta:flex-1 wta:flex-col wta:items-center wta:justify-center wta:gap-y-4",
     children: jsxRuntime.jsx(OtpInput, {
       errorMessage: errorMessage,
       setShowOtpFlow: setShowOtpFlow,

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

@@ -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

@@ -4,7 +4,7 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var jsxRuntime = require('react/jsx-runtime');
 var noModal = require('@web3auth/no-modal');
 var react = require('react');
-var tailwindMerge = require('tailwind-merge');
+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');
@@ -13,6 +13,8 @@ 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');
@@ -21,6 +23,9 @@ function RootContent(props) {
   const {
     onCloseLoader
   } = props;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
   const {
     modalState,
     shouldShowLoginPage,
@@ -178,14 +183,21 @@ function RootContent(props) {
   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 modalState.status !== interfaces.MODAL_STATUS.INITIALIZED;
-  }, [modalState.status]);
-  const isConsentRequiringStatus = modalState.status === interfaces.MODAL_STATUS.CONSENT_REQUIRING;
+    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: "w3a--relative w3a--flex w3a--flex-col",
+    className: "wta:relative wta:flex wta:flex-col",
     children: [jsxRuntime.jsxs("div", {
-      className: "w3a-modal-container w3a--relative w3a--flex w3a--flex-col w3a--overflow-hidden",
+      className: "w3a-modal-container wta:relative wta:flex wta:flex-col wta:overflow-hidden",
       style: {
         height: containerHeight
       },
@@ -193,11 +205,12 @@ function RootContent(props) {
         className: "w3a--modal-curtain"
       }), jsxRuntime.jsxs("div", {
         ref: contentRef,
-        className: tailwindMerge.twMerge("w3a--relative w3a--flex w3a--flex-col w3a--p-6", isShowLoader && !isConsentRequiringStatus ? "w3a--flex-1" : "w3a--flex-none"),
+        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,
@@ -208,11 +221,13 @@ function RootContent(props) {
           privacyPolicy: privacyPolicy,
           tncLink: tncLink
         }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [modalState.currentPage === constants.PAGES.LOGIN_OPTIONS && shouldShowLoginPage && modalState.status === interfaces.MODAL_STATUS.INITIALIZED && jsxRuntime.jsx(Login, {
+          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
-          }), modalState.currentPage === constants.PAGES.WALLET_LIST && (!shouldShowLoginPage || isExternalWalletModeOnly) && modalState.status === interfaces.MODAL_STATUS.INITIALIZED && jsxRuntime.jsx(ConnectWallet, {
+          }), !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,