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

package/dist/lib.esm/packages/modal/src/react/wagmi/provider.js

@@ -1,12 +1,12 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { CHAIN_NAMESPACES, WalletInitializationError, log } from '@web3auth/no-modal';
-import { useMemo, createElement, useEffect, Fragment } from 'react';
+import { useMemo, createElement, useRef, useEffect, Fragment } from 'react';
 import { defineChain, webSocket, http } from 'viem';
 import { createConfig, WagmiProvider as WagmiProvider$1, fallback, useConfig, useReconnect, useConnectionEffect } from 'wagmi';
 import { injected } from 'wagmi/connectors';
-import { useWeb3Auth } from '../hooks/useWeb3Auth.js';
 import { useWeb3AuthDisconnect } from '@web3auth/no-modal/react';
+import { useWeb3Auth } from '../hooks/useWeb3Auth.js';
 import '@babel/runtime/helpers/defineProperty';
 import '@web3auth/auth';
 import 'deepmerge';
@@ -22,6 +22,7 @@ import 'react/jsx-runtime';
 import 'react-i18next';
 import '../../ui/localeImport.js';
 import '../../ui/components/SpinnerLoader/SpinnerLoader.css.js';
+import '../../ui/containers/AccountLinking/AccountLinking.js';
 import 'classnames';
 import 'react-qrcode-logo';
 import '../../ui/containers/Login/Login.js';
@@ -94,7 +95,10 @@ function Web3AuthWagmiProvider({
 }) {
   const {
     isConnected,
-    connection
+    connection,
+    web3Auth: {
+      primaryConnectorName
+    }
   } = useWeb3Auth();
   const {
     disconnect
@@ -103,6 +107,7 @@ function Web3AuthWagmiProvider({
   const {
     mutate: reconnect
   } = useReconnect();
+  const lastSyncedWeb3AuthConnection = useRef(null);
   useConnectionEffect({
     onDisconnect: async () => {
       log.info("Disconnected from wagmi");
@@ -116,22 +121,33 @@ function Web3AuthWagmiProvider({
     }
   });
   useEffect(() => {
-    (async () => {
-      if (isConnected && connection !== null && connection !== void 0 && connection.ethereumProvider) {
-        const connector = await setupConnector(connection.ethereumProvider, wagmiConfig);
-        if (!connector) {
-          log.error("Failed to setup react wagmi connector");
-          throw new Error("Failed to setup connector");
+    (async _connection$ethereumP => {
+      const newConnection = connection !== null && connection !== void 0 ? connection : null;
+      const newEth = (_connection$ethereumP = connection === null || connection === void 0 ? void 0 : connection.ethereumProvider) !== null && _connection$ethereumP !== void 0 ? _connection$ethereumP : null;
+      if (isConnected && newConnection && newEth && newConnection.connectorName === primaryConnectorName) {
+        // `ethereumProvider` is a stable proxy (`commonJRPCProvider`) across account switches,
+        // so key wagmi resyncs off the Web3Auth connection object instead of provider identity.
+        if (lastSyncedWeb3AuthConnection.current !== newConnection) {
+          if (getWeb3authConnector(wagmiConfig)) {
+            resetConnectorState(wagmiConfig);
+          }
+          lastSyncedWeb3AuthConnection.current = newConnection;
+          const connector = await setupConnector(newEth, wagmiConfig);
+          if (!connector) {
+            log.error("Failed to setup react wagmi connector");
+            throw new Error("Failed to setup connector");
+          }
+          await connectWeb3AuthWithWagmi(connector, wagmiConfig);
+          reconnect();
         }
-        await connectWeb3AuthWithWagmi(connector, wagmiConfig);
-        reconnect();
       } else if (!isConnected) {
+        lastSyncedWeb3AuthConnection.current = null;
         if (wagmiConfig.state.status === "connected") {
           await disconnectWeb3AuthFromWagmi(wagmiConfig);
         }
       }
     })();
-  }, [isConnected, wagmiConfig, connection, reconnect]);
+  }, [isConnected, wagmiConfig, connection, reconnect, primaryConnectorName]);
   return /*#__PURE__*/createElement(Fragment, null, children);
 }
 function WagmiProvider(_ref) {
@@ -215,7 +231,6 @@ function WagmiProvider(_ref) {
       finalConfig.chains = [wagmiChains[0], ...wagmiChains.slice(1)];
     }
     return createConfig(finalConfig);
-    // eslint-disable-next-line react-hooks/preserve-manual-memoization
   }, [config, web3Auth, isInitialized]);
   return /*#__PURE__*/createElement(WagmiProvider$1, // typecast to WagmiProviderPropsBase to avoid type error
   // as we are omitting the config prop from WagmiProviderProps

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

@@ -19,25 +19,25 @@ function BottomSheet({
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("div", {
-      className: 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: 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"
     }), /*#__PURE__*/jsxs("div", {
-      className: 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: 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 && /*#__PURE__*/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: /*#__PURE__*/jsx("svg", {
           width: "13",
           height: "13",
@@ -45,7 +45,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: /*#__PURE__*/jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",

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

@@ -37,12 +37,12 @@ function SocialLoginButton(props) {
     type: "button",
     onClick: e => onClick && onClick(e),
     className: 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 && /*#__PURE__*/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.esm/packages/modal/src/ui/components/Button/ButtonWallet/ButtonWallet.js

@@ -33,17 +33,17 @@ function ButtonWallet(props) {
   };
   return /*#__PURE__*/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: [/*#__PURE__*/jsxs("div", {
-      className: "w3a--flex w3a--items-center w3a--gap-x-2",
+      className: "wta:flex wta:items-center wta:gap-x-2",
       children: [/*#__PURE__*/jsx("figure", {
-        className: "w3a--size-5",
+        className: "wta:size-5",
         children: /*#__PURE__*/jsx(Image, {
           imageData: button.icon,
           imageId: `login-${button.name}`,
@@ -55,15 +55,15 @@ function ButtonWallet(props) {
           extension: button.imgExtension || "webp"
         })
       }), /*#__PURE__*/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 && /*#__PURE__*/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  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  wta:dark:border wta:dark:border-app-primary-400 wta:dark:bg-transparent wta:dark:text-app-primary-400",
       children: t("modal.external.installed")
     }), /*#__PURE__*/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 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 wta:group-hover:translate-x-0 wta:group-hover:opacity-100",
       src: getIcons(isDark ? "chevron-right-light" : "chevron-right-dark"),
       alt: "arrow"
     })]

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

@@ -14,32 +14,32 @@ function Footer({
     i18n: i18nInstance
   });
   return /*#__PURE__*/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) && /*#__PURE__*/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 && /*#__PURE__*/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 && /*#__PURE__*/jsxs(Fragment, {
         children: [t("modal.footer.and"), " ", /*#__PURE__*/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")
         })]
       })]
     }), /*#__PURE__*/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: [/*#__PURE__*/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"
       }), /*#__PURE__*/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.esm/packages/modal/src/ui/components/Image/Image.js

@@ -35,7 +35,7 @@ function Image(props) {
         height: height,
         width: width,
         alt: hoverImageId,
-        className: cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)
+        className: cn("wta:object-contain", `wta:h-${height} wta:w-${width}`)
       });
     }
     return /*#__PURE__*/jsx("img", {
@@ -44,7 +44,7 @@ function Image(props) {
       height: height,
       width: width,
       alt: hoverImageId,
-      className: cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)
+      className: cn("wta:rounded wta:object-contain", `wta:h-${height} wta:w-${width}`)
     });
   }
   if (imageData) {
@@ -54,7 +54,7 @@ function Image(props) {
       height: height,
       width: width,
       alt: imageId,
-      className: cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`),
+      className: cn("wta:object-contain", `wta:h-${height} wta:w-${width}`),
       onError: ({
         currentTarget
       }) => {
@@ -72,7 +72,7 @@ function Image(props) {
     height: height,
     width: width,
     alt: imageId,
-    className: cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`),
+    className: cn("wta:rounded wta:object-contain", `wta:h-${height} wta:w-${width}`),
     onError: ({
       currentTarget
     }) => {

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

@@ -27,20 +27,20 @@ function ConnectingStatus(props) {
     width: "40"
   }), [connector]);
   return /*#__PURE__*/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: "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: [/*#__PURE__*/jsx(SpinnerLoader, {
       width: 95,
       height: 95,
       children: providerIcon
     }), /*#__PURE__*/jsxs("div", {
-      className: "w3a--flex w3a--flex-col w3a--gap-y-1",
+      className: "wta:flex wta:flex-col wta:gap-y-1",
       children: [/*#__PURE__*/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
         })
       }), /*#__PURE__*/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
         })
@@ -59,7 +59,7 @@ function ConnectedStatus(props) {
     message
   } = props;
   return /*#__PURE__*/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: [/*#__PURE__*/jsx("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
@@ -71,8 +71,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"
       })
-    }), /*#__PURE__*/jsx("p", {
-      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+    }), message && /*#__PURE__*/jsx("p", {
+      className: "wta:text-center wta:text-sm wta:text-app-gray-500 wta:dark:text-app-gray-400",
       children: message
     })]
   });
@@ -88,7 +88,7 @@ function ErroredStatus(props) {
     message
   } = props;
   return /*#__PURE__*/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: [/*#__PURE__*/jsx("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
@@ -100,8 +100,8 @@ 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"
       })
-    }), /*#__PURE__*/jsx("p", {
-      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+    }), message && /*#__PURE__*/jsx("p", {
+      className: "wta:text-center wta:text-sm wta:text-app-gray-500 wta:dark:text-app-gray-400",
       children: message
     })]
   });
@@ -122,14 +122,14 @@ function AuthorizingStatus(props) {
     });
   };
   return /*#__PURE__*/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: [/*#__PURE__*/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: (_externalWalletsConfi = externalWalletsConfig[connector]) === null || _externalWalletsConfi === void 0 ? void 0 : _externalWalletsConfi.label
       })
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--flex w3a--justify-center",
+      className: "wta:flex wta:justify-center",
       children: /*#__PURE__*/jsx(SpinnerLoader, {
         width: 95,
         height: 95,
@@ -141,11 +141,11 @@ function AuthorizingStatus(props) {
         })
       })
     }), /*#__PURE__*/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")
     }), /*#__PURE__*/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")
     })]
   });
@@ -178,14 +178,14 @@ function ConsentRequiredStatus(props) {
     }
   };
   return /*#__PURE__*/jsxs("div", {
-    className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--gap-y-6 w3a--mt-8",
+    className: "wta:flex wta:w-full wta:flex-col wta:items-center wta:gap-y-6 wta:mt-8",
     children: [/*#__PURE__*/jsx("div", {
-      className: "w3a--flex w3a--items-center w3a--justify-center w3a--p-3 w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--rounded-full w3a--text-app-gray-600 dark:w3a--text-app-white",
+      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: /*#__PURE__*/jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         fill: "none",
         viewBox: "0 0 24 24",
-        className: "w3a--size-10",
+        className: "wta:size-10",
         children: /*#__PURE__*/jsx("path", {
           stroke: "currentColor",
           strokeLinecap: "round",
@@ -195,17 +195,17 @@ function ConsentRequiredStatus(props) {
         })
       })
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--w-full w3a--px-8 w3a--text-center w3a--text-app-gray-900 dark:w3a--text-app-white",
+      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) && /*#__PURE__*/jsxs("div", {
-      className: "w3a--flex w3a--w-full w3a--flex-col w3a--gap-y-2",
+      className: "wta:flex wta:w-full wta:flex-col wta:gap-y-2",
       children: [tncLink && /*#__PURE__*/jsx("a", {
         href: tncLink,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "w3a--btn !w3a--text-sm w3a--font-light !w3a--justify-start w3a--rounded-full w3a--border-app-gray-50 w3a--bg-app-gray-50 w3a--p-3 w3a--text-left w3a--text-app-gray-700 hover:w3a--border-app-gray-200 hover:w3a--bg-app-gray-200 hover:w3a--text-app-gray-900 dark:w3a--border-app-gray-800 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white dark:hover:w3a--border-app-gray-600 dark:hover:w3a--bg-app-gray-600",
+        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"
         })
@@ -213,20 +213,20 @@ function ConsentRequiredStatus(props) {
         href: privacyPolicy,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "w3a--btn !w3a--text-sm w3a--font-light !w3a--justify-start w3a--rounded-full w3a--border-app-gray-50 w3a--bg-app-gray-50 w3a--p-3 w3a--text-left w3a--text-app-gray-700 hover:w3a--border-app-gray-200 hover:w3a--bg-app-gray-200 hover:w3a--text-app-gray-900 dark:w3a--border-app-gray-800 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white dark:hover:w3a--border-app-gray-600 dark:hover:w3a--bg-app-gray-600",
+        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"
         })
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: "w3a--flex w3a--w-full w3a--gap-x-2",
+      className: "wta:flex wta:w-full wta:gap-x-2",
       children: [/*#__PURE__*/jsx("button", {
         type: "button",
         disabled: isSubmitting,
         onClick: handleDecline,
-        className: "w3a--btn w3a--rounded-full disabled:w3a--opacity-60",
+        className: "w3a--btn wta:rounded-full wta:disabled:opacity-60",
         children: /*#__PURE__*/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.consent.decline", {
             defaultValue: "Decline"
           })
@@ -235,9 +235,9 @@ function ConsentRequiredStatus(props) {
         type: "button",
         disabled: isSubmitting,
         onClick: handleAccept,
-        className: "w3a--btn w3a--rounded-full w3a--border-app-primary-600 w3a--bg-app-primary-600 hover:w3a--border-app-primary-700 hover:w3a--bg-app-primary-700 disabled:w3a--opacity-60 dark:w3a--border-app-primary-600 dark:w3a--bg-app-primary-600 dark:hover:w3a--border-app-primary-700 dark:hover:w3a--bg-app-primary-700",
+        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: /*#__PURE__*/jsx("p", {
-          className: "w3a--text-app-onPrimary",
+          className: "wta:text-app-onPrimary",
           children: t("modal.consent.accept", {
             defaultValue: "Accept"
           })
@@ -282,7 +282,7 @@ function Loader(props) {
   }, [isConnectedAccordingToAuthenticationMode, hideSuccessScreen, onClose]);
   const isConsentRequiringStatus = modalStatus === MODAL_STATUS.CONSENT_REQUIRING;
   return /*#__PURE__*/jsxs("div", {
-    className: isConsentRequiringStatus ? "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4" : "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 === MODAL_STATUS.CONNECTING && /*#__PURE__*/jsx(ConnectingStatus, {
       connector: connector,
       connectorName: connectorName

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

@@ -28,7 +28,7 @@ const LoginHint = ({
     };
   }, [isDark]);
   return /*#__PURE__*/jsxs("div", {
-    className: "w3a--relative",
+    className: "wta:relative",
     "aria-hidden": true,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
@@ -38,9 +38,9 @@ const LoginHint = ({
     children: [children, showPopover && !hideHint && /*#__PURE__*/jsxs("div", {
       "data-popover": true,
       role: "tooltip",
-      className: 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: 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, /*#__PURE__*/jsx("div", {
-        className: "w3a--absolute",
+        className: "wta:absolute",
         style: triangleStyle
       })]
     })]

package/dist/lib.esm/packages/modal/src/ui/components/Modal/Modal.js

@@ -35,34 +35,34 @@ function Modal(props) {
     }
   }, [open]);
   const positions = useMemo(() => ({
-    center: "w3a--top-0 w3a--left-0 w3a--items-center w3a--justify-center",
-    "top-center": "w3a--top-8 w3a--left-0 w3a--items-start w3a--justify-center",
-    "bottom-center": "w3a--bottom-8 w3a--left-0 w3a--items-end w3a--justify-center",
-    left: "sm:w3a--left-8 w3a--flex w3a--items-center w3a--justify-center sm:w3a--justify-start",
-    right: "sm:w3a--right-8 w3a--flex w3a--items-center w3a--justify-center sm:w3a--justify-end"
+    center: "wta:top-0 wta:left-0 wta:items-center wta:justify-center",
+    "top-center": "wta:top-8 wta:left-0 wta:items-start wta:justify-center",
+    "bottom-center": "wta:bottom-8 wta:left-0 wta:items-end wta:justify-center",
+    left: "wta:sm:left-8 wta:flex wta:items-center wta:justify-center wta:sm:justify-start",
+    right: "wta:sm:right-8 wta:flex wta:items-center wta:justify-center wta:sm:justify-end"
   }), []);
   const placementClass = useMemo(() => positions[placement], [placement, positions]);
   const onCloseHandler = () => {
     if (onClose) onClose();
   };
   return /*#__PURE__*/jsx("div", {
-    className: cn("w3a--fixed w3a--z-50 w3a--overflow-hidden w3a--flex w3a--transition-all", placementClass, {
-      "w3a--w-screen w3a--h-screen": isOpen,
-      "w3a--w-0 w3a--h-0 w3a--delay-500": !isOpen
+    className: cn("wta:fixed wta:z-50 wta:overflow-hidden wta:flex wta:transition-all", placementClass, {
+      "wta:w-screen wta:h-screen": isOpen,
+      "wta:w-0 wta:h-0 wta:delay-500": !isOpen
     }),
     children: /*#__PURE__*/jsxs("div", {
-      className: cn("w3a--bg-app-light-surface1 dark:w3a--bg-app-dark-surface-main 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: cn("wta:bg-app-light-surface1 wta:dark:bg-app-dark-surface-main 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 && /*#__PURE__*/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: /*#__PURE__*/jsx("svg", {
           width: "13",
           height: "13",
@@ -70,7 +70,7 @@ function Modal(props) {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           onClick: onCloseHandler,
-          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: /*#__PURE__*/jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",

package/dist/lib.esm/packages/modal/src/ui/components/Otp/Otp.js

@@ -131,16 +131,16 @@ const OtpInput = /*#__PURE__*/forwardRef(({
       (_inputRefs$current7 = inputRefs.current) === null || _inputRefs$current7 === void 0 || _inputRefs$current7[0].focus();
     }
   }, [autoFocus]);
-  const helperTextClass = cn("w3a--text-xs w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-white w3a--mt-2", {
-    "w3a--text-app-red-500 dark:w3a--text-app-red-400": error,
-    "w3a--text-app-green-500 dark:w3a--text-app-green-400": success
+  const helperTextClass = cn("wta:text-xs wta:font-normal wta:text-app-gray-500 wta:dark:text-app-white wta:mt-2", {
+    "wta:text-app-red-500 wta:dark:text-app-red-400": error,
+    "wta:text-app-green-500 wta:dark:text-app-green-400": success
   }, classes === null || classes === void 0 ? void 0 : classes.helperText);
   const inputKey = new Date().getFullYear();
   return /*#__PURE__*/jsxs("div", {
-    className: cn("w3a--flex w3a--flex-col w3a--items-center", classes === null || classes === void 0 ? void 0 : classes.root),
+    className: cn("wta:flex wta:flex-col wta:items-center", classes === null || classes === void 0 ? void 0 : classes.root),
     ref: ref,
     children: [/*#__PURE__*/jsx("form", {
-      className: cn("w3a--flex w3a--space-x-2", classes === null || classes === void 0 ? void 0 : classes.inputContainer),
+      className: cn("wta:flex wta:space-x-2", classes === null || classes === void 0 ? void 0 : classes.inputContainer),
       children: otpArray.map((digit, index) => {
         var _classes$success, _classes$error, _classes$disabled;
         return /*#__PURE__*/jsx("input", {
@@ -153,7 +153,7 @@ const OtpInput = /*#__PURE__*/forwardRef(({
           onInput: e => handleInputChange(e, index),
           onKeyUp: e => handleKeyDown(e, index),
           onPaste: handlePaste,
-          className: cn("w3a--w-12 w3a--h-[42px] w3a--rounded-full w3a--border w3a--text-center w3a--text-xl w3a--focus:outline-none w3a--active:outline-none w3a--focus:border-app-primary-600 dark:w3a--focus:border-app-primary-500 w3a--border-app-gray-300 dark:w3a--border-app-gray-500 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white", success && ((_classes$success = classes === null || classes === void 0 ? void 0 : classes.success) !== null && _classes$success !== void 0 ? _classes$success : "w3a--border-app-green-400 dark:w3a--border-app-green-500 w3a--focus:w3a--border-app-green-400 dark:w3a--focus:w3a--border-app-green-500"), error && ((_classes$error = classes === null || classes === void 0 ? void 0 : classes.error) !== null && _classes$error !== void 0 ? _classes$error : "w3a--border-app-red-600 dark:w3a--border-app-red-500 w3a--focus:w3a--border-app-red-600 dark:w3a--focus:w3a--border-app-red-500"), disabled && ((_classes$disabled = classes === null || classes === void 0 ? void 0 : classes.disabled) !== null && _classes$disabled !== void 0 ? _classes$disabled : "w3a--border-app-gray-200 w3a--bg-app-gray-200 dark:w3a--border-app-gray-700 w3a--focus:w3a--border-app-gray-200 dark:w3a--focus:w3a--border-app-gray-700 w3a--cursor-not-allowed"), classes === null || classes === void 0 ? void 0 : classes.input),
+          className: cn("wta:w-12 wta:h-[42px] wta:rounded-full wta:border wta:text-center wta:text-xl wta:focus:outline-none wta:active:outline-none wta:focus:border-app-primary-600 wta:dark:focus:border-app-primary-500 wta:border-app-gray-300 wta:dark:border-app-gray-500 wta:bg-app-gray-50 wta:dark:bg-app-gray-700 wta:text-app-gray-900 wta:dark:text-app-white", success && ((_classes$success = classes === null || classes === void 0 ? void 0 : classes.success) !== null && _classes$success !== void 0 ? _classes$success : "wta:border-app-green-400 wta:dark:border-app-green-500 wta:focus:border-app-green-400 wta:dark:focus:border-app-green-500"), error && ((_classes$error = classes === null || classes === void 0 ? void 0 : classes.error) !== null && _classes$error !== void 0 ? _classes$error : "wta:border-app-red-600 wta:dark:border-app-red-500 wta:focus:border-app-red-600 wta:dark:focus:border-app-red-500"), disabled && ((_classes$disabled = classes === null || classes === void 0 ? void 0 : classes.disabled) !== null && _classes$disabled !== void 0 ? _classes$disabled : "wta:border-app-gray-200 wta:bg-app-gray-200 wta:dark:border-app-gray-700 wta:focus:border-app-gray-200 wta:dark:focus:border-app-gray-700 wta:cursor-not-allowed"), classes === null || classes === void 0 ? void 0 : classes.input),
           ref: el => {
             inputRefs.current[index] = el;
           },
@@ -164,18 +164,18 @@ const OtpInput = /*#__PURE__*/forwardRef(({
       className: helperTextClass,
       children: helperText
     }), loading && /*#__PURE__*/jsx("div", {
-      className: "w3a--mt-3",
+      className: "wta:mt-3",
       children: /*#__PURE__*/jsx(PulseLoader, {})
     }), showCta && !loading && /*#__PURE__*/jsx("div", {
-      className: cn("w3a--flex w3a--items-center w3a--mt-3", classes === null || classes === void 0 ? void 0 : classes.ctaContainer),
+      className: cn("wta:flex wta:items-center wta:mt-3", classes === null || classes === void 0 ? void 0 : classes.ctaContainer),
       children: timer > 0 && showTimer ? /*#__PURE__*/jsx("span", {
-        className: cn("w3a--text-xs w3a--text-app-gray-500 dark:w3a--text-app-gray-400", classes === null || classes === void 0 ? void 0 : classes.timerText),
+        className: cn("wta:text-xs wta:text-app-gray-500 wta:dark:text-app-gray-400", classes === null || classes === void 0 ? void 0 : classes.timerText),
         children: t("modal.resendTimer", {
           timer: timer
         })
       }) : /*#__PURE__*/jsx("button", {
         type: "button",
-        className: cn("w3a--text-xs w3a--p-0 w3a--text-app-primary-600 dark:w3a--text-app-primary-500", classes === null || classes === void 0 ? void 0 : classes.resendBtnText),
+        className: cn("wta:text-xs wta:p-0 wta:text-app-primary-600 wta:dark:text-app-primary-500", classes === null || classes === void 0 ? void 0 : classes.resendBtnText),
         onClick: handleResendClick,
         disabled: timer > 0 && showTimer,
         children: resendBtnText || t("modal.resendCode")