@web3auth/modal 10.16.0 → 11.0.0-beta.1

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

@@ -11,38 +11,35 @@ function BottomSheet({
   isShown,
   onClose,
   children,
-  uiConfig,
   sheetClassName,
-  showCloseButton = true
+  showCloseButton = true,
+  borderRadiusType = "large"
 }) {
-  const {
-    borderRadiusType = "large"
-  } = uiConfig;
   const handleClose = e => {
     e.stopPropagation();
     if (onClose) onClose();
   };
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", {
-      className: utils.cn("w3a--bottom-sheet-bg w3a--fixed w3a--left-0 w3a--top-0 w3a--size-full w3a--transition-opacity w3a--duration-300", {
-        "w3a--rounded-[30px]": borderRadiusType === "large",
-        "w3a--rounded-2xl": borderRadiusType === "medium",
-        "w3a--rounded-none": borderRadiusType === "small"
+      className: utils.cn("w3a--bottom-sheet-bg wta:fixed wta:left-0 wta:top-0 wta:size-full wta:transition-opacity wta:duration-300", {
+        "wta:rounded-[30px]": borderRadiusType === "large",
+        "wta:rounded-2xl": borderRadiusType === "medium",
+        "wta:rounded-none": borderRadiusType === "small"
       }),
       onClick: handleClose,
       "aria-hidden": "true",
       role: "button"
     }), jsxRuntime.jsxs("div", {
-      className: utils.cn(`w3a--fixed w3a--bottom-2 w3a--left-2 w3a--mx-auto w3a--flex w3a--w-[96%] w3a--flex-col
-      w3a--gap-y-2 w3a--border w3a--border-app-gray-100 w3a--bg-app-white w3a--p-4 w3a--shadow-lg w3a--transition-transform w3a--duration-500 
-      w3a--ease-out dark:w3a--border-app-gray-600 dark:w3a--bg-app-dark-surface-main
-      ${isShown ? "w3a--translate-y-0 w3a--delay-700" : "w3a--translate-y-full"}`, {
-        "w3a--rounded-[30px]": borderRadiusType === "large",
-        "w3a--rounded-2xl": borderRadiusType === "medium",
-        "w3a--rounded-none": borderRadiusType === "small"
+      className: utils.cn(`wta:fixed wta:bottom-2 wta:left-2 wta:mx-auto wta:flex wta:w-[96%] wta:flex-col
+      wta:gap-y-2 wta:border wta:border-app-gray-100 wta:bg-app-white wta:p-4 wta:shadow-lg wta:transition-transform wta:duration-500 
+      wta:ease-out wta:dark:border-app-gray-600 wta:dark:bg-app-dark-surface-main
+      ${isShown ? "wta:translate-y-0 wta:delay-700" : "wta:translate-y-full"}`, {
+        "wta:rounded-[30px]": borderRadiusType === "large",
+        "wta:rounded-2xl": borderRadiusType === "medium",
+        "wta:rounded-none": borderRadiusType === "small"
       }, sheetClassName),
       children: [showCloseButton && jsxRuntime.jsx("div", {
-        className: "w3a--absolute w3a--right-4 w3a--top-[16px] w3a--z-10 w3a--cursor-pointer",
+        className: "wta:absolute wta:right-4 wta:top-[16px] wta:z-10 wta:cursor-pointer",
         children: jsxRuntime.jsx("svg", {
           width: "13",
           height: "13",
@@ -50,7 +47,7 @@ function BottomSheet({
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           onClick: onClose,
-          className: "w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white",
+          className: "wta:text-app-gray-500 wta:hover:text-app-gray-900 wta:dark:text-app-gray-200 wta:dark:hover:text-app-white",
           children: jsxRuntime.jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",

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

@@ -13,11 +13,11 @@ function Button(props) {
   const SocialButtonProps = buttonProps;
   const WalletButtonProps = buttonProps;
   const {
+    isDark: socialButtonIsDark,
     text,
     showIcon,
     showText,
     method,
-    isDark,
     isPrimaryBtn,
     onClick,
     children,
@@ -25,6 +25,7 @@ function Button(props) {
     buttonRadius
   } = SocialButtonProps;
   const {
+    isDark: walletButtonIsDark,
     label,
     onClick: walletOnClick,
     button,
@@ -38,13 +39,14 @@ function Button(props) {
       showIcon: showIcon,
       showText: showText,
       method: method,
-      isDark: isDark,
+      isDark: socialButtonIsDark,
       isPrimaryBtn: isPrimaryBtn,
       onClick: onClick,
       btnStyle: btnStyle,
       buttonRadius: buttonRadius,
       children: children
     }), type === Button_type.BUTTON_TYPE.WALLET && jsxRuntime.jsx(ButtonWallet, {
+      isDark: walletButtonIsDark,
       label: label,
       walletConnectUri: walletConnectUri,
       onClick: walletOnClick,

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

@@ -39,12 +39,12 @@ function SocialLoginButton(props) {
     type: "button",
     onClick: e => onClick && onClick(e),
     className: utils.cn("w3a--btn", btnStyle, {
-      "w3a--rounded-full": buttonRadius === "pill",
-      "w3a--rounded-lg": buttonRadius === "rounded",
-      "w3a--rounded-none": buttonRadius === "square"
+      "wta:rounded-full": buttonRadius === "pill",
+      "wta:rounded-lg": buttonRadius === "rounded",
+      "wta:rounded-none": buttonRadius === "square"
     }),
     children: [showIcon && getProviderIcon(method, isDark, isPrimaryBtn), children, showText && 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: text
     })]
   });

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

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var cn = require('classnames');
 var react = require('react');
 var reactI18next = require('react-i18next');
-var ThemeContext = require('../../../context/ThemeContext.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
 var Image = require('../../Image/Image.js');
@@ -14,6 +13,7 @@ function ButtonWallet(props) {
     i18n: localeImport
   });
   const {
+    isDark,
     deviceDetails,
     button,
     walletConnectUri,
@@ -21,7 +21,6 @@ function ButtonWallet(props) {
     label,
     buttonRadius
   } = props;
-  const isDark = react.useContext(ThemeContext.ThemedContext);
   const isLink = react.useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.isInstalled, [deviceDetails, button]);
   const href = react.useMemo(() => button.href ? utils.formatIOSMobile({
     uri: walletConnectUri,
@@ -36,17 +35,17 @@ function ButtonWallet(props) {
   };
   return jsxRuntime.jsxs("button", {
     type: "button",
-    className: cn(`w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 
-        hover:w3a--text-app-gray-900 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"
+    className: cn(`wta:group wta:relative wta:overflow-hidden wta:flex wta:w-full wta:items-center wta:justify-between wta:bg-app-gray-50 wta:p-3 wta:hover:bg-app-gray-200 
+        wta:hover:text-app-gray-900 wta:dark:bg-app-gray-800 wta:dark:hover:bg-app-gray-600 wta:active:scale-95 wta:transition-all wta:duration-150`, {
+      "wta:rounded-full": buttonRadius === "pill",
+      "wta:rounded-lg": buttonRadius === "rounded",
+      "wta:rounded-none": buttonRadius === "square"
     }),
     onClick: handleBtnClick,
     children: [jsxRuntime.jsxs("div", {
-      className: "w3a--flex w3a--items-center w3a--gap-x-2",
+      className: "wta:flex wta:items-center wta:gap-x-2",
       children: [jsxRuntime.jsx("figure", {
-        className: "w3a--size-5",
+        className: "wta:size-5",
         children: jsxRuntime.jsx(Image, {
           imageData: button.icon,
           imageId: `login-${button.name}`,
@@ -58,15 +57,15 @@ function ButtonWallet(props) {
           extension: button.imgExtension || "webp"
         })
       }), 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: label
       })]
     }), button.hasInjectedWallet && jsxRuntime.jsx("span", {
-      className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--flex w3a--w-auto -w3a--translate-y-1/2 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 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 \n        dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
+      className: "wta:absolute wta:right-4 wta:top-1/2 wta:flex wta:w-auto wta:-translate-y-1/2 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 wta:transition-all wta:duration-300 wta:group-hover:translate-x-6 wta:group-hover:opacity-0 \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("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-light" : "chevron-right-dark"),
       alt: "arrow"
     })]

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

@@ -16,32 +16,32 @@ function Footer({
     i18n: localeImport
   });
   return jsxRuntime.jsxs("div", {
-    className: "w3a--mx-auto w3a--mt-auto w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--pt-5",
+    className: "wta:mx-auto wta:mt-auto wta:flex wta:flex-col wta:items-center wta:justify-center wta:gap-y-4 wta:pt-5",
     children: [(privacyPolicy || termsOfService) && jsxRuntime.jsxs("p", {
-      className: "w3a--mx-auto w3a--w-4/5 w3a--text-center w3a--text-xs w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+      className: "wta:mx-auto wta:w-4/5 wta:text-center wta:text-xs wta:text-app-gray-500 wta:dark:text-app-gray-400",
       children: [t("modal.footer.by-signing-in"), " ", termsOfService && jsxRuntime.jsxs("a", {
         href: termsOfService,
-        className: "w3a--text-app-primary-600 dark:w3a--text-app-primary-500",
+        className: "wta:text-app-primary-600 wta:dark:text-app-primary-500",
         children: [t("modal.footer.terms-of-service"), " "]
       }), privacyPolicy && jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [t("modal.footer.and"), " ", jsxRuntime.jsx("a", {
           href: privacyPolicy,
-          className: "w3a--text-app-primary-600 dark:w3a--text-app-primary-500",
+          className: "wta:text-app-primary-600 wta:dark:text-app-primary-500",
           children: t("modal.footer.privacy-policy")
         })]
       })]
     }), jsxRuntime.jsxs("div", {
-      className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-2",
+      className: "wta:flex wta:items-center wta:justify-center wta:gap-2",
       children: [jsxRuntime.jsx("img", {
         height: "36",
         src: "https://images.web3auth.io/metamask-footer-logo-light.svg",
         alt: "Web3Auth Logo Light",
-        className: "w3a--block w3a--h-9 dark:w3a--hidden"
+        className: "wta:block wta:h-9 wta:dark:hidden"
       }), jsxRuntime.jsx("img", {
         height: "36",
         src: "https://images.web3auth.io/metamask-footer-logo-dark.svg",
         alt: "Web3Auth Logo Dark",
-        className: "w3a--hidden w3a--h-9 dark:w3a--block"
+        className: "wta:hidden wta:h-9 wta:dark:block"
       })]
     })]
   });

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

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ThemeContext = require('../../context/ThemeContext.js');
+var WidgetContext = require('../../context/WidgetContext.js');
 var utils = require('../../utils.js');
 
 /**
@@ -26,7 +26,7 @@ function Image(props) {
   } = props;
   const {
     isDark
-  } = react.useContext(ThemeContext.ThemedContext);
+  } = WidgetContext.useWidget();
   const imgName = react.useMemo(() => isDark && darkImageId ? darkImageId : imageId, [isDark, darkImageId, imageId]);
   const hoverImgName = react.useMemo(() => isDark && darkHoverImageId ? darkHoverImageId : hoverImageId, [isDark, darkHoverImageId, hoverImageId]);
   if (isButton) {
@@ -37,7 +37,7 @@ function Image(props) {
         height: height,
         width: width,
         alt: hoverImageId,
-        className: utils.cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)
+        className: utils.cn("wta:object-contain", `wta:h-${height} wta:w-${width}`)
       });
     }
     return jsxRuntime.jsx("img", {
@@ -46,7 +46,7 @@ function Image(props) {
       height: height,
       width: width,
       alt: hoverImageId,
-      className: utils.cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)
+      className: utils.cn("wta:rounded wta:object-contain", `wta:h-${height} wta:w-${width}`)
     });
   }
   if (imageData) {
@@ -56,7 +56,7 @@ function Image(props) {
       height: height,
       width: width,
       alt: imageId,
-      className: utils.cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`),
+      className: utils.cn("wta:object-contain", `wta:h-${height} wta:w-${width}`),
       onError: ({
         currentTarget
       }) => {
@@ -74,7 +74,7 @@ function Image(props) {
     height: height,
     width: width,
     alt: imageId,
-    className: utils.cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`),
+    className: utils.cn("wta:rounded wta:object-contain", `wta:h-${height} wta:w-${width}`),
     onError: ({
       currentTarget
     }) => {

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

@@ -5,9 +5,8 @@ var react = require('react');
 var reactI18next = require('react-i18next');
 var interfaces = require('../../interfaces.js');
 var localeImport = require('../../localeImport.js');
-var CircularLoader = require('../CircularLoader/CircularLoader.js');
 var Image = require('../Image/Image.js');
-var PulseLoader = require('../PulseLoader/PulseLoader.js');
+var SpinnerLoader = require('../SpinnerLoader/SpinnerLoader.js');
 
 /**
  * ConnectingStatus component
@@ -20,7 +19,6 @@ function ConnectingStatus(props) {
   });
   const {
     connector,
-    appLogo,
     connectorName
   } = props;
   const providerIcon = react.useMemo(() => connector === "twitter" ? jsxRuntime.jsx(Image, {
@@ -31,26 +29,20 @@ function ConnectingStatus(props) {
     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--flex w3a--size-10 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]
+    className: "wta:flex wta:h-full wta:flex-1 wta:flex-col wta:items-center wta:justify-center wta:gap-y-4 wta:pt-6",
+    children: [jsxRuntime.jsx(SpinnerLoader, {
+      width: 95,
+      height: 95,
+      children: providerIcon
     }), jsxRuntime.jsxs("div", {
-      className: "w3a--flex w3a--flex-col w3a--gap-y-1",
+      className: "wta:flex wta:flex-col wta: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",
+        className: "wta:text-center wta:text-sm wta:text-app-gray-500 wta:dark: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",
+        className: "wta:text-center wta:text-sm wta:text-app-gray-500 wta:dark:text-app-gray-400",
         children: t("modal.adapter-loader.message2", {
           adapter: connectorName
         })
@@ -68,7 +60,7 @@ function ConnectedStatus(props) {
     message
   } = props;
   return jsxRuntime.jsxs("div", {
-    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
+    className: "wta:flex wta:flex-col wta:items-center wta:gap-y-2 wta:pt-6",
     children: [jsxRuntime.jsx("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
@@ -80,8 +72,8 @@ function ConnectedStatus(props) {
         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",
+    }), message && jsxRuntime.jsx("p", {
+      className: "wta:text-center wta:text-sm wta:text-app-gray-500 wta:dark:text-app-gray-400",
       children: message
     })]
   });
@@ -96,7 +88,7 @@ function ErroredStatus(props) {
     message
   } = props;
   return jsxRuntime.jsxs("div", {
-    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
+    className: "wta:flex wta:flex-col wta:items-center wta:gap-y-2 wta:pt-6",
     children: [jsxRuntime.jsx("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
@@ -108,45 +100,39 @@ function ErroredStatus(props) {
         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",
+    }), message && jsxRuntime.jsx("p", {
+      className: "wta:text-center wta:text-sm wta:text-app-gray-500 wta:dark:text-app-gray-400",
       children: message
     })]
   });
 }
 function AuthorizingStatus(props) {
-  var _walletRegistry$defau, _walletRegistry$other;
+  var _externalWalletsConfi;
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
   const {
     connector,
     externalWalletsConfig,
-    walletRegistry,
     handleMobileVerifyConnect
   } = props;
-  const registryItem = (walletRegistry === null || walletRegistry === void 0 || (_walletRegistry$defau = walletRegistry.default) === null || _walletRegistry$defau === void 0 ? void 0 : _walletRegistry$defau[connector]) || (walletRegistry === null || walletRegistry === void 0 || (_walletRegistry$other = walletRegistry.others) === null || _walletRegistry$other === void 0 ? void 0 : _walletRegistry$other[connector]);
-  const primaryColor = (registryItem === null || registryItem === void 0 ? void 0 : registryItem.primaryColor) || "";
   const handleMobileVerifyConnectClick = () => {
     handleMobileVerifyConnect({
       connector: connector
     });
   };
   return jsxRuntime.jsxs("div", {
-    className: "w3a--flex w3a--size-full w3a--flex-col w3a--items-center w3a--justify-between w3a--gap-y-6",
+    className: "wta:flex wta:size-full wta:flex-col wta:items-center wta:justify-between wta:gap-y-6",
     children: [jsxRuntime.jsx("p", {
-      className: "w3a--p-2 w3a--text-center w3a--text-base w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white",
+      className: "wta:p-2 wta:text-center wta:text-base wta:font-semibold wta:text-app-gray-900 wta:dark:text-app-white",
       children: t("modal.loader.authorizing-header", {
-        connector: externalWalletsConfig[connector].label
+        connector: (_externalWalletsConfi = externalWalletsConfig[connector]) === null || _externalWalletsConfi === void 0 ? void 0 : _externalWalletsConfi.label
       })
     }), jsxRuntime.jsx("div", {
-      className: "w3a--flex w3a--justify-center",
-      children: jsxRuntime.jsx(CircularLoader, {
+      className: "wta:flex wta:justify-center",
+      children: jsxRuntime.jsx(SpinnerLoader, {
         width: 95,
         height: 95,
-        thickness: 6,
-        arcSizeDeg: 100,
-        arcColors: primaryColor ? [primaryColor, primaryColor] : undefined,
         children: jsxRuntime.jsx(Image, {
           imageId: `login-${connector}`,
           hoverImageId: `login-${connector}`,
@@ -155,15 +141,111 @@ function AuthorizingStatus(props) {
         })
       })
     }), jsxRuntime.jsx("p", {
-      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+      className: "wta:text-center wta:text-sm wta:text-app-gray-500 wta:dark:text-app-gray-400",
       children: t("modal.loader.authorizing-message")
     }), jsxRuntime.jsx("button", {
       onClick: handleMobileVerifyConnectClick,
-      className: "w3a--w-full w3a--rounded-xl w3a--bg-app-gray-100 w3a--p-2 w3a--py-3 w3a--text-center w3a--text-sm w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white md:w3a--hidden",
+      className: "wta:w-full wta:rounded-xl wta:bg-app-gray-100 wta:p-2 wta:py-3 wta:text-center wta:text-sm wta:text-app-gray-900 wta:dark:bg-app-gray-800 wta:dark:text-app-white wta:md:hidden",
       children: t("modal.loader.authorizing-verify-btn")
     })]
   });
 }
+function ConsentRequiredStatus(props) {
+  const {
+    onAccept,
+    onDecline,
+    privacyPolicy,
+    tncLink
+  } = props;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const [isSubmitting, setIsSubmitting] = react.useState(false);
+  const handleAccept = async () => {
+    setIsSubmitting(true);
+    try {
+      await (onAccept === null || onAccept === void 0 ? void 0 : onAccept());
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleDecline = async () => {
+    setIsSubmitting(true);
+    try {
+      await (onDecline === null || onDecline === void 0 ? void 0 : onDecline());
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return jsxRuntime.jsxs("div", {
+    className: "wta:flex wta:w-full wta:flex-col wta:items-center wta:gap-y-6 wta:mt-8",
+    children: [jsxRuntime.jsx("div", {
+      className: "wta:flex wta:items-center wta:justify-center wta:p-3 wta:bg-app-gray-100 wta:dark:bg-app-gray-800 wta:rounded-full wta:text-app-gray-600 wta:dark:text-app-white",
+      children: jsxRuntime.jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        className: "wta:size-10",
+        children: jsxRuntime.jsx("path", {
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "2",
+          d: "M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2"
+        })
+      })
+    }), jsxRuntime.jsx("div", {
+      className: "wta:w-full wta:px-8 wta:text-center wta:text-app-gray-900 wta:dark:text-app-white",
+      children: t("modal.consent.description", {
+        defaultValue: "To proceed, please accept the terms and privacy policy"
+      })
+    }), (tncLink || privacyPolicy) && jsxRuntime.jsxs("div", {
+      className: "wta:flex wta:w-full wta:flex-col wta:gap-y-2",
+      children: [tncLink && jsxRuntime.jsx("a", {
+        href: tncLink,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "w3a--btn wta:text-sm! wta:font-light wta:justify-start! wta:rounded-full wta:border-app-gray-50 wta:bg-app-gray-50 wta:p-3 wta:text-left wta:text-app-gray-700 wta:hover:border-app-gray-200 wta:hover:bg-app-gray-200 wta:hover:text-app-gray-900 wta:dark:border-app-gray-800 wta:dark:bg-app-gray-800 wta:dark:text-app-white wta:dark:hover:border-app-gray-600 wta:dark:hover:bg-app-gray-600",
+        children: t("modal.consent.tnc", {
+          defaultValue: "Terms of service"
+        })
+      }), privacyPolicy && jsxRuntime.jsx("a", {
+        href: privacyPolicy,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "w3a--btn wta:text-sm! wta:font-light wta:justify-start! wta:rounded-full wta:border-app-gray-50 wta:bg-app-gray-50 wta:p-3 wta:text-left wta:text-app-gray-700 wta:hover:border-app-gray-200 wta:hover:bg-app-gray-200 wta:hover:text-app-gray-900 wta:dark:border-app-gray-800 wta:dark:bg-app-gray-800 wta:dark:text-app-white wta:dark:hover:border-app-gray-600 wta:dark:hover:bg-app-gray-600",
+        children: t("modal.consent.privacy", {
+          defaultValue: "Privacy Policy"
+        })
+      })]
+    }), jsxRuntime.jsxs("div", {
+      className: "wta:flex wta:w-full wta:gap-x-2",
+      children: [jsxRuntime.jsx("button", {
+        type: "button",
+        disabled: isSubmitting,
+        onClick: handleDecline,
+        className: "w3a--btn wta:rounded-full wta:disabled:opacity-60",
+        children: jsxRuntime.jsx("p", {
+          className: "wta:text-app-gray-900 wta:dark:text-app-white",
+          children: t("modal.consent.decline", {
+            defaultValue: "Decline"
+          })
+        })
+      }), jsxRuntime.jsx("button", {
+        type: "button",
+        disabled: isSubmitting,
+        onClick: handleAccept,
+        className: "w3a--btn wta:rounded-full wta:border-app-primary-600! wta:bg-app-primary-600 wta:hover:border-app-primary-700! wta:hover:bg-app-primary-700! wta:disabled:opacity-60 wta:dark:border-app-primary-600! wta:dark:bg-app-primary-600 wta:dark:hover:border-app-primary-700! wta:dark:hover:bg-app-primary-700!",
+        children: jsxRuntime.jsx("p", {
+          className: "wta:text-app-onPrimary",
+          children: t("modal.consent.accept", {
+            defaultValue: "Accept"
+          })
+        })
+      })]
+    })]
+  });
+}
 /**
  * Loader component
  * @param props - LoaderProps
@@ -175,13 +257,15 @@ function Loader(props) {
     connectorName,
     modalStatus,
     onClose,
-    appLogo,
     message,
     isConnectAndSignAuthenticationMode,
     externalWalletsConfig,
-    walletRegistry,
     handleMobileVerifyConnect,
-    hideSuccessScreen = false
+    hideSuccessScreen = false,
+    onAcceptConsent,
+    onDeclineConsent,
+    privacyPolicy,
+    tncLink
   } = props;
   const isConnectedAccordingToAuthenticationMode = react.useMemo(() => !isConnectAndSignAuthenticationMode && modalStatus === interfaces.MODAL_STATUS.CONNECTED || isConnectAndSignAuthenticationMode && modalStatus === interfaces.MODAL_STATUS.AUTHORIZED, [modalStatus, isConnectAndSignAuthenticationMode]);
   react.useEffect(() => {
@@ -195,12 +279,12 @@ function Loader(props) {
       return () => clearTimeout(timeout);
     }
   }, [isConnectedAccordingToAuthenticationMode, hideSuccessScreen, onClose]);
+  const isConsentRequiringStatus = modalStatus === interfaces.MODAL_STATUS.CONSENT_REQUIRING;
   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",
+    className: isConsentRequiringStatus ? "wta:flex wta:flex-col wta:items-center wta:justify-center wta:gap-y-4" : "wta:flex wta:h-full wta:flex-1 wta:flex-col wta:items-center wta:justify-center wta:gap-y-4",
     children: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && jsxRuntime.jsx(ConnectingStatus, {
       connector: connector,
-      connectorName: connectorName,
-      appLogo: appLogo
+      connectorName: connectorName
     }), isConnectedAccordingToAuthenticationMode && !hideSuccessScreen && jsxRuntime.jsx(ConnectedStatus, {
       message: message
     }), modalStatus === interfaces.MODAL_STATUS.ERRORED && jsxRuntime.jsx(ErroredStatus, {
@@ -208,8 +292,12 @@ function Loader(props) {
     }), modalStatus === interfaces.MODAL_STATUS.AUTHORIZING && jsxRuntime.jsx(AuthorizingStatus, {
       connector: connector,
       externalWalletsConfig: externalWalletsConfig,
-      walletRegistry: walletRegistry,
       handleMobileVerifyConnect: handleMobileVerifyConnect
+    }), isConsentRequiringStatus && jsxRuntime.jsx(ConsentRequiredStatus, {
+      onAccept: onAcceptConsent,
+      onDecline: onDeclineConsent,
+      privacyPolicy: privacyPolicy,
+      tncLink: tncLink
     })]
   });
 }

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

@@ -30,7 +30,7 @@ const LoginHint = ({
     };
   }, [isDark]);
   return jsxRuntime.jsxs("div", {
-    className: "w3a--relative",
+    className: "wta:relative",
     "aria-hidden": true,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
@@ -40,9 +40,9 @@ const LoginHint = ({
     children: [children, showPopover && !hideHint && jsxRuntime.jsxs("div", {
       "data-popover": true,
       role: "tooltip",
-      className: utils.cn("w3a--absolute w3a--z-[45] w3a--shadow-2xl w3a--rounded-lg w3a--bottom-[100%] w3a--left-[50%] w3a--w-max w3a--text-xs w3a--px-[6px] w3a--py-[3px]", isDark ? "w3a--bg-app-white w3a--text-app-gray-900" : "w3a--bg-app-gray-800 w3a--text-app-gray-100"),
+      className: utils.cn("wta:absolute wta:z-[45] wta:shadow-2xl wta:rounded-lg wta:bottom-[100%] wta:left-[50%] wta:w-max wta:text-xs wta:px-[6px] wta:py-[3px]", isDark ? "wta:bg-app-white wta:text-app-gray-900" : "wta:bg-app-gray-800 wta:text-app-gray-100"),
       children: [content, jsxRuntime.jsx("div", {
-        className: "w3a--absolute",
+        className: "wta:absolute",
         style: triangleStyle
       })]
     })]