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

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

@@ -2,13 +2,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 const PulseLoader = () => {
   return /*#__PURE__*/jsxs("div", {
-    className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-2",
+    className: "wta:flex wta:items-center wta:justify-center wta:gap-x-2",
     children: [/*#__PURE__*/jsx("div", {
-      className: "w3a--size-3 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-500 dark:w3a--bg-app-gray-200"
+      className: "wta:size-3 wta:animate-pulse wta:rounded-full wta:bg-app-gray-500 wta:dark:bg-app-gray-200"
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--size-3 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-400 dark:w3a--bg-app-gray-400"
+      className: "wta:size-3 wta:animate-pulse wta:rounded-full wta:bg-app-gray-400 wta:dark:bg-app-gray-400"
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--size-3 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-600"
+      className: "wta:size-3 wta:animate-pulse wta:rounded-full wta:bg-app-gray-200 wta:dark:bg-app-gray-600"
     })]
   });
 };

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

@@ -13,12 +13,12 @@ function getProviderIcon(method, isDark, extension) {
       id: "active-login-img",
       src: `https://images.web3auth.io/${hoverId}${extension}`,
       alt: "active-login-img",
-      className: "w3a--hidden w3a--size-5 w3a--object-contain group-hover:w3a--block"
+      className: "wta:hidden wta:size-5 wta:object-contain wta:group-hover:block"
     }), /*#__PURE__*/jsx("img", {
       id: "login-img",
       src: `https://images.web3auth.io/${imageId}${extension}`,
       alt: "login-img",
-      className: "w3a--block w3a--size-5 w3a--object-contain group-hover:w3a--hidden"
+      className: "wta:block wta:size-5 wta:object-contain wta:group-hover:hidden"
     })]
   });
 }
@@ -35,20 +35,20 @@ function SocialLoginList(props) {
   } = props;
   const getGridRowFromVisibleLogin = () => {
     if (visibleRow.length === 1) {
-      return "w3a--grid-cols-1";
+      return "wta:grid-cols-1";
     } else if (visibleRow.length === 2) {
-      return "w3a--grid-cols-2";
+      return "wta:grid-cols-2";
     } else if (visibleRow.length === 3) {
-      return "w3a--grid-cols-3";
+      return "wta:grid-cols-3";
     } else {
-      return "w3a--grid-cols-4";
+      return "wta:grid-cols-4";
     }
   };
   if ((visibleRow.length !== 0 || mainOptionsRow.length !== 0) && (otherRow === null || otherRow === void 0 ? void 0 : otherRow.length) === 0) {
     return /*#__PURE__*/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: [/*#__PURE__*/jsx("div", {
-        className: "w3a--grid w3a--w-full w3a--gap-y-2",
+        className: "wta:grid wta:w-full wta:gap-y-2",
         children: mainOptionsRow.map(row => /*#__PURE__*/jsx(Button, {
           type: BUTTON_TYPE.SOCIAL,
           props: {
@@ -57,7 +57,7 @@ function SocialLoginList(props) {
             method: row.method,
             isDark,
             isPrimaryBtn: false,
-            btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
+            btnStyle: "wta:flex wta:items-center wta:justify-center! wta:w-full wta:h-11 wta:group",
             children: /*#__PURE__*/jsx(Fragment, {
               children: getProviderIcon(row.method, isDark, ".svg")
             }),
@@ -68,7 +68,7 @@ function SocialLoginList(props) {
           }
         }, row.method))
       }), /*#__PURE__*/jsxs("div", {
-        className: cn("w3a--grid w3a--w-full w3a--gap-x-2", getGridRowFromVisibleLogin()),
+        className: cn("wta:grid wta:w-full wta:gap-x-2", getGridRowFromVisibleLogin()),
         children: [visibleRow.filter((_, index) => visibleRow.length === 4 ? index <= 3 : index < 3).map(row => /*#__PURE__*/jsx(LoginHint, {
           content: "Last Login",
           isDark: isDark,
@@ -80,7 +80,7 @@ function SocialLoginList(props) {
               method: row.method,
               isDark,
               isPrimaryBtn: false,
-              btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
+              btnStyle: "wta:flex wta:items-center wta:justify-center! wta:w-full wta:h-11 wta:group",
               children: /*#__PURE__*/jsx(Fragment, {
                 children: getProviderIcon(row.method, isDark, ".svg")
               }),
@@ -96,11 +96,11 @@ function SocialLoginList(props) {
             isDark,
             showIcon: false,
             onClick: handleExpandSocialLogins,
-            btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11",
+            btnStyle: "wta:flex wta:items-center wta:justify-center! wta:w-full wta:h-11",
             children: /*#__PURE__*/jsx("img", {
               src: getIcons(isDark ? "dots-dark-horizontal" : "dots-light-horizontal"),
               alt: "Logo",
-              className: "w3a--object-contain"
+              className: "wta:object-contain"
             }),
             buttonRadius
           }
@@ -109,20 +109,20 @@ function SocialLoginList(props) {
     });
   }
   return /*#__PURE__*/jsxs("div", {
-    className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-start w3a--justify-start w3a--gap-y-4",
+    className: "wta:flex wta:w-full wta:flex-col wta:items-start wta:justify-start wta:gap-y-4",
     children: [/*#__PURE__*/jsx("button", {
       type: "button",
-      className: "w3a--appearance-none",
+      className: "wta:appearance-none",
       onClick: () => handleExpandSocialLogins(),
       children: /*#__PURE__*/jsx("img", {
         src: getIcons(isDark ? "arrow-left-dark" : "arrow-left-light"),
         alt: "Logo",
-        className: "w3a--object-contain"
+        className: "wta:object-contain"
       })
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--social-container w3a--grid w3a--h-[300px] w3a--w-full w3a--auto-rows-min w3a--grid-cols-1 w3a--gap-y-2 w3a--overflow-y-auto w3a--pl-2 w3a--pr-3",
+      className: "w3a--social-container wta:grid wta:h-[300px] wta:w-full wta:auto-rows-min wta:grid-cols-1 wta:gap-y-2 wta:overflow-y-auto wta:pl-2 wta:pr-3",
       children: otherRow.map(row => /*#__PURE__*/jsx("div", {
-        className: "w3a--h-11 w3a--w-full",
+        className: "wta:h-11 wta:w-full",
         children: /*#__PURE__*/jsx(Button, {
           type: BUTTON_TYPE.SOCIAL,
           props: {
@@ -132,15 +132,15 @@ function SocialLoginList(props) {
             onClick: () => handleSocialLoginClick({
               loginParams: row.loginParams
             }),
-            btnStyle: "w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--items-center !w3a--justify-start w3a--w-full w3a--h-11",
+            btnStyle: "wta:group wta:relative wta:overflow-hidden wta:flex wta:items-center wta:justify-start! wta:w-full wta:h-11",
             buttonRadius,
             children: /*#__PURE__*/jsxs(Fragment, {
               children: [getProviderIcon(row.method, isDark, ".svg"), /*#__PURE__*/jsx("p", {
-                className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
+                className: "wta:text-sm wta:font-normal wta:text-app-gray-900 wta:dark:text-app-white",
                 children: row.name
               }), /*#__PURE__*/jsx("img", {
                 id: "login-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-dark" : "chevron-right-light"),
                 alt: "arrow"
               })]

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

@@ -17,7 +17,7 @@ const SpinnerLoader = props => {
       height
     },
     children: [/*#__PURE__*/jsx("div", {
-      className: cn("w3a--spinner-loader-ring w3a--animate-spin", classes === null || classes === void 0 ? void 0 : classes.spinner)
+      className: cn("w3a--spinner-loader-ring wta:animate-spin", classes === null || classes === void 0 ? void 0 : classes.spinner)
     }), children && /*#__PURE__*/jsx("div", {
       className: "w3a--spinner-loader-image",
       children: children

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

@@ -20,21 +20,21 @@ const Toast = () => {
   }, [toast.message, setToast]);
   if (!toast.message) return null;
   const toastClass = {
-    success: "w3a--border-app-green-200 w3a--bg-app-green-100 w3a--text-app-green-900",
-    error: "w3a--border-app-red-200 w3a--bg-app-red-100 w3a--text-app-red-900",
-    warning: "w3a--border-app-yellow-200 w3a--bg-app-yellow-100 w3a--text-app-yellow-900",
-    info: "w3a--border-app-blue-200 w3a--bg-app-blue-100 w3a--text-app-blue-900"
+    success: "wta:border-app-green-200 wta:bg-app-green-100 wta:text-app-green-900",
+    error: "wta:border-app-red-200 wta:bg-app-red-100 wta:text-app-red-900",
+    warning: "wta:border-app-yellow-200 wta:bg-app-yellow-100 wta:text-app-yellow-900",
+    info: "wta:border-app-blue-200 wta:bg-app-blue-100 wta:text-app-blue-900"
   };
   const toastIconClass = {
-    success: "w3a--text-app-green-900",
-    error: "w3a--text-app-red-900",
-    warning: "w3a--text-app-yellow-900",
-    info: "w3a--text-app-blue-900"
+    success: "wta:text-app-green-900",
+    error: "wta:text-app-red-900",
+    warning: "wta:text-app-yellow-900",
+    info: "wta:text-app-blue-900"
   };
   return /*#__PURE__*/jsxs("div", {
-    className: `w3a--absolute w3a--inset-x-4 w3a--bottom-4 w3a--z-[60] w3a--mx-auto w3a--w-[90%] w3a--rounded-md w3a--border w3a--p-4 w3a--text-sm ${toastClass[toast.type]}`,
+    className: `wta:absolute wta:inset-x-4 wta:bottom-4 wta:z-[60] wta:mx-auto wta:w-[90%] wta:rounded-md wta:border wta:p-4 wta:text-sm ${toastClass[toast.type]}`,
     children: [/*#__PURE__*/jsx("div", {
-      className: "w3a--absolute w3a--right-4 w3a--top-4 w3a--z-10 w3a--cursor-pointer",
+      className: "wta:absolute wta:right-4 wta:top-4 wta:z-10 wta:cursor-pointer",
       children: /*#__PURE__*/jsx("svg", {
         width: "13",
         height: "13",
@@ -54,7 +54,7 @@ const Toast = () => {
         })
       })
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--flex w3a--items-center w3a--gap-2",
+      className: "wta:flex wta:items-center wta:gap-2",
       children: /*#__PURE__*/jsx("p", {
         children: toast.message
       })

package/dist/lib.esm/packages/modal/src/ui/config.js

@@ -3,7 +3,9 @@ import { AUTH_CONNECTION, BUILD_ENV } from '@web3auth/auth';
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
-const restrictedLoginMethods = new Set([AUTH_CONNECTION.CUSTOM, AUTH_CONNECTION.PASSKEYS, AUTH_CONNECTION.TELEGRAM, AUTH_CONNECTION.AUTHENTICATOR]);
+const restrictedLoginMethods = new Set([AUTH_CONNECTION.CUSTOM, AUTH_CONNECTION.PASSKEYS, AUTH_CONNECTION.TELEGRAM, AUTH_CONNECTION.AUTHENTICATOR,
+// Farcaster login is deprecated and no longer supported by the Web3Auth SDKs.
+AUTH_CONNECTION.FARCASTER]);
 const AUTH_PROVIDERS = Object.values(AUTH_CONNECTION).filter(x => !restrictedLoginMethods.has(x));
 const AUTH_PROVIDERS_NAMES = AUTH_PROVIDERS.reduce((acc, x) => {
   if (x === "email_passwordless") acc[x] = "Email";else if (x === "sms_passwordless") acc[x] = "Mobile";else acc[x] = capitalizeFirstLetter(x);

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

@@ -0,0 +1,107 @@
+import { WALLET_CONNECTORS } from '@web3auth/no-modal';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { WALLET_CONNECT_LOGO } from '../../constants.js';
+import { useModalState } from '../../context/ModalStateContext.js';
+import { useWidget } from '../../context/WidgetContext.js';
+import { ACCOUNT_LINKING_INTENT, ACCOUNT_LINKING_STATUS } from '../../interfaces.js';
+import i18nInstance from '../../localeImport.js';
+import ConnectWalletQrCode from '../ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const DEFAULT_ACCOUNT_LINKING_BUTTON = {
+  name: WALLET_CONNECTORS.WALLET_CONNECT_V2,
+  displayName: "WalletConnect",
+  hasInjectedWallet: false,
+  hasWalletConnect: true,
+  hasInstallLinks: false,
+  imgExtension: "svg"
+};
+function AccountLinking(props) {
+  var _accountLinkingButton;
+  const {
+    allExternalWallets
+  } = props;
+  const {
+    modalState
+  } = useModalState();
+  const {
+    deviceDetails,
+    isDark
+  } = useWidget();
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const accountLinkingButton = useMemo(() => {
+    const requestedConnectorName = modalState.accountLinking.connectorName;
+    if (!requestedConnectorName) return DEFAULT_ACCOUNT_LINKING_BUTTON;
+    return allExternalWallets.find(button => button.name === requestedConnectorName) || DEFAULT_ACCOUNT_LINKING_BUTTON;
+  }, [allExternalWallets, modalState.accountLinking.connectorName]);
+  const accountLinkingDisplayName = useMemo(() => {
+    return accountLinkingButton.displayName || "WalletConnect";
+  }, [accountLinkingButton.displayName]);
+  const accountLinkingQrLogoImage = useMemo(() => {
+    if (accountLinkingButton.name === WALLET_CONNECTORS.WALLET_CONNECT_V2 || !accountLinkingButton.imgExtension) {
+      return WALLET_CONNECT_LOGO;
+    }
+    return `https://images.web3auth.io/login-${accountLinkingButton.name}.${accountLinkingButton.imgExtension}`;
+  }, [accountLinkingButton.imgExtension, accountLinkingButton.name]);
+  const isSwitchAccountIntent = modalState.accountLinking.intent === ACCOUNT_LINKING_INTENT.SWITCH;
+  const isWalletConnectConnector = accountLinkingButton.name === WALLET_CONNECTORS.WALLET_CONNECT_V2;
+  const accountLinkingMessage = useMemo(() => {
+    switch (modalState.accountLinking.status) {
+      case ACCOUNT_LINKING_STATUS.INITIALIZING:
+        return t("modal.account-linking.initializing-wallet", {
+          wallet: accountLinkingDisplayName
+        });
+      case ACCOUNT_LINKING_STATUS.AWAITING_CONNECTION:
+        return modalState.accountLinking.walletConnectUri ? isWalletConnectConnector ? t("modal.account-linking.scan-walletconnect") : t("modal.account-linking.scan-wallet", {
+          wallet: accountLinkingDisplayName
+        }) : t("modal.account-linking.preparing-wallet-qr", {
+          wallet: accountLinkingDisplayName
+        });
+      case ACCOUNT_LINKING_STATUS.WALLET_CONNECTED:
+        return isSwitchAccountIntent ? t("modal.account-linking.wallet-connected-preparing-switch") : t("modal.account-linking.wallet-connected-preparing-linking");
+      case ACCOUNT_LINKING_STATUS.LINKING:
+        return isSwitchAccountIntent ? t("modal.account-linking.switching-wallet") : t("modal.account-linking.linking-wallet");
+      case ACCOUNT_LINKING_STATUS.COMPLETED:
+        return isSwitchAccountIntent ? t("modal.account-linking.wallet-switched") : t("modal.account-linking.wallet-linked");
+      case ACCOUNT_LINKING_STATUS.ERRORED:
+        return modalState.accountLinking.errorMessage || (isSwitchAccountIntent ? t("modal.account-linking.failed-switch-wallet", {
+          wallet: accountLinkingDisplayName
+        }) : t("modal.account-linking.failed-connect-wallet", {
+          wallet: accountLinkingDisplayName
+        }));
+      default:
+        return "";
+    }
+  }, [accountLinkingDisplayName, isSwitchAccountIntent, isWalletConnectConnector, modalState.accountLinking.errorMessage, modalState.accountLinking.status, modalState.accountLinking.walletConnectUri, t]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "wta:flex wta:flex-1 wta:flex-col wta:gap-y-4",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "wta:flex wta:items-center wta:justify-center",
+      children: /*#__PURE__*/jsx("p", {
+        className: "wta:text-base wta:font-medium wta:text-app-gray-900 wta:dark:text-app-white",
+        children: accountLinkingDisplayName
+      })
+    }), modalState.accountLinking.status === ACCOUNT_LINKING_STATUS.ERRORED ? /*#__PURE__*/jsx("div", {
+      className: "wta:rounded-2xl wta:border wta:border-app-gray-200 wta:bg-app-gray-50 wta:p-4 wta:dark:border-app-gray-700 wta:dark:bg-app-gray-800",
+      children: /*#__PURE__*/jsx("p", {
+        className: "wta:text-center wta:text-sm wta:text-app-gray-700 wta:dark:text-app-gray-200",
+        children: accountLinkingMessage
+      })
+    }) : /*#__PURE__*/jsx(ConnectWalletQrCode, {
+      qrCodeValue: modalState.accountLinking.walletConnectUri,
+      isDark: isDark,
+      selectedButton: accountLinkingButton,
+      logoImage: accountLinkingQrLogoImage,
+      primaryColor: (_accountLinkingButton = accountLinkingButton.walletRegistryItem) === null || _accountLinkingButton === void 0 ? void 0 : _accountLinkingButton.primaryColor,
+      platform: deviceDetails.platform
+    }), accountLinkingMessage && modalState.accountLinking.status !== ACCOUNT_LINKING_STATUS.ERRORED && /*#__PURE__*/jsx("p", {
+      className: "wta:text-center wta:text-sm wta:text-app-gray-500 wta:dark:text-app-gray-300",
+      children: accountLinkingMessage
+    })]
+  });
+}
+
+export { AccountLinking as default };

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

@@ -247,6 +247,16 @@ function ConnectWallet(props) {
     } else {
       // show QR code if wallet connect v2 is supported
       if (button.hasWalletConnect) {
+        // In account-linking picker mode, hand off to the WC v2 account-linking flow in
+        // modalManager (via the picker resolver in onExternalWalletLogin) instead of showing
+        // the regular inline QR — the regular QR uses a connector owned by the login flow,
+        // which is not what we want for linking.
+        if (modalState.accountLinking.pickerActive) {
+          handleExternalWalletClick({
+            connector: button.name
+          });
+          return;
+        }
         setSelectedButton(button);
         setSelectedWallet(true);
         setCurrentPage(CONNECT_WALLET_PAGES.SELECTED_WALLET);
@@ -279,13 +289,14 @@ function ConnectWallet(props) {
     return false;
   }, [selectedWallet, isExternalWalletModeOnly]);
   return /*#__PURE__*/jsxs("div", {
-    className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
+    className: "wta:relative wta:flex wta:flex-1 wta:flex-col wta:gap-y-4",
     children: [/*#__PURE__*/jsx(ConnectWalletHeader, {
       hideBackButton: hideBackButton,
       disableBackButton: disableBackButton,
       onBackClick: handleBack,
       currentPage: currentPage,
-      selectedButton: selectedButton
+      selectedButton: selectedButton,
+      isLinking: modalState.accountLinking.pickerActive
     }), selectedWallet ? /*#__PURE__*/jsx(ConnectWalletQrCode, {
       qrCodeValue: qrCodeValue,
       isDark: isDark,
@@ -294,7 +305,7 @@ function ConnectWallet(props) {
       logoImage: `https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`,
       platform: deviceDetails.platform
     }) : /*#__PURE__*/jsxs("div", {
-      className: "w3a--flex w3a--flex-col w3a--gap-y-2",
+      className: "wta:flex wta:flex-col wta:gap-y-2",
       children: [/*#__PURE__*/jsx(ConnectWalletChainFilter, {
         isDark: isDark,
         isLoading: isLoading,

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

@@ -44,28 +44,28 @@ function ConnectWalletChainFilter(props) {
   }
   if (isLoading) {
     return /*#__PURE__*/jsx("div", {
-      className: "w3a--flex w3a--items-center w3a--justify-between w3a--gap-x-2",
+      className: "wta:flex wta:items-center wta:justify-between wta:gap-x-2",
       children: Array.from({
         length: chains.length
       }).map((_, index) => /*#__PURE__*/jsx("div", {
-        className: "w3a--h-12 w3a--w-[100px] w3a--animate-pulse w3a--rounded-2xl w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700"
+        className: "wta:h-12 wta:w-[100px] wta:animate-pulse wta:rounded-2xl wta:bg-app-gray-200 wta:dark:bg-app-gray-700"
       }, `chain-loader-${index}`))
     });
   }
   return /*#__PURE__*/jsx("div", {
-    className: "w3a--flex w3a--items-center w3a--justify-items-start w3a--gap-x-4",
+    className: "wta:flex wta:items-center wta:justify-items-start wta:gap-x-4",
     children: chains.map(chain => /*#__PURE__*/jsxs("button", {
       type: "button",
-      className: cn("w3a--flex w3a--w-[104px] w3a--items-center w3a--justify-center w3a--gap-x-1 w3a--text-xs w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-500 dark:w3a--text-app-gray-300 hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--h-12 w3a--rounded-2xl w3a--border w3a--border-transparent", {
-        "w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white hover:!w3a--bg-app-gray-100 dark:hover:!w3a--bg-app-gray-800": selectedChain === chain.id
+      className: cn("wta:flex wta:w-[104px] wta:items-center wta:justify-center wta:gap-x-1 wta:text-xs wta:font-medium wta:px-4 wta:py-3 wta:text-app-gray-500 wta:dark:text-app-gray-300 wta:hover:bg-app-gray-200 wta:dark:hover:bg-app-gray-700 wta:h-12 wta:rounded-2xl wta:border wta:border-transparent", {
+        "wta:bg-app-gray-100 wta:dark:bg-app-gray-800 wta:border-app-gray-200 wta:dark:border-app-gray-700 wta:text-app-gray-900 wta:dark:text-app-white wta:hover:bg-app-gray-100! wta:dark:hover:bg-app-gray-800!": selectedChain === chain.id
       }),
       onClick: () => setSelectedChain(chain.id),
       children: [chain.icon && /*#__PURE__*/jsx("img", {
         src: getIcons(isDark ? `${chain.icon}-dark` : `${chain.icon}-light`),
         alt: chain.name,
-        className: "w3a--size-5 w3a--object-contain"
+        className: "wta:size-5 wta:object-contain"
       }), /*#__PURE__*/jsx("span", {
-        className: "first-letter:w3a--capitalize",
+        className: "wta:first-letter:capitalize",
         children: t(chain.name)
       })]
     }, chain.id))

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

@@ -24,13 +24,13 @@ const ConnectWalletChainNamespaceSelect = props => {
   });
   return /*#__PURE__*/jsxs("div", {
     children: [/*#__PURE__*/jsx("div", {
-      className: "w3a--flex w3a--items-center w3a--justify-center",
+      className: "wta:flex wta:items-center wta:justify-center",
       children: /*#__PURE__*/jsx("p", {
-        className: "w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+        className: "wta:text-base wta:font-medium wta:text-app-gray-900 wta:dark:text-app-white",
         children: t("modal.external.select-chain")
       })
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--my-6 w3a--flex w3a--justify-center",
+      className: "wta:my-6 wta:flex wta:justify-center",
       children: /*#__PURE__*/jsx(Image, {
         imageId: `login-${wallet.name}`,
         hoverImageId: `login-${wallet.name}`,
@@ -41,12 +41,12 @@ const ConnectWalletChainNamespaceSelect = props => {
         extension: wallet.imgExtension
       })
     }), /*#__PURE__*/jsx("p", {
-      className: "w3a--my-6 w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+      className: "wta:my-6 wta:text-center wta:text-sm wta:text-app-gray-500 wta:dark:text-app-gray-400",
       children: t("modal.external.select-chain-description", {
         wallet: wallet.displayName
       })
     }), /*#__PURE__*/jsx("ul", {
-      className: "w3a--flex w3a--flex-col w3a--gap-3",
+      className: "wta:flex wta:flex-col wta:gap-3",
       children: chainNamespaces.map(({
         chainNamespace,
         displayName,
@@ -54,13 +54,13 @@ const ConnectWalletChainNamespaceSelect = props => {
       }) => /*#__PURE__*/jsx("li", {
         children: /*#__PURE__*/jsxs("button", {
           type: "button",
-          className: "w3a--btn w3a--group w3a--relative w3a--h-11 w3a--w-full w3a--items-center !w3a--justify-between w3a--overflow-hidden w3a--rounded-full",
+          className: "w3a--btn wta:group wta:relative wta:h-11 wta:w-full wta:items-center wta:justify-between! wta:overflow-hidden wta:rounded-full",
           onClick: () => handleExternalWalletClick({
             connector: wallet.name,
             chainNamespace
           }),
           children: [/*#__PURE__*/jsxs("div", {
-            className: "w3a--flex w3a--items-center",
+            className: "wta:flex wta:items-center",
             children: [/*#__PURE__*/jsx(Image, {
               imageId: imageId,
               hoverImageId: imageId,
@@ -70,12 +70,12 @@ const ConnectWalletChainNamespaceSelect = props => {
               isButton: true,
               extension: "svg"
             }), /*#__PURE__*/jsx("p", {
-              className: "w3a--ml-2 w3a--text-left w3a--text-sm w3a--text-app-gray-900 first-letter:w3a--capitalize dark:w3a--text-app-gray-200",
+              className: "wta:ml-2 wta:text-left wta:text-sm wta:text-app-gray-900 wta:first-letter:capitalize wta:dark:text-app-gray-200",
               children: displayName
             })]
           }), /*#__PURE__*/jsx("img", {
             id: "chain-namespace-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 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 wta:group-hover:translate-x-0 wta:group-hover:opacity-100",
             src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
             alt: "arrow"
           })]

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

@@ -9,7 +9,8 @@ function ConnectWalletHeader(props) {
     disableBackButton,
     onBackClick,
     currentPage,
-    selectedButton
+    selectedButton,
+    isLinking
   } = props;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
@@ -20,17 +21,17 @@ function ConnectWalletHeader(props) {
     }
   };
   return /*#__PURE__*/jsxs("div", {
-    className: "w3a--flex w3a--items-center w3a--justify-between",
-    children: [!hideBackButton ? /*#__PURE__*/jsx("button", {
+    className: "wta:flex wta:items-center wta:justify-between",
+    children: [!hideBackButton && !isLinking ? /*#__PURE__*/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: handleBack,
       disabled: disableBackButton,
       children: /*#__PURE__*/jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         fill: "none",
         viewBox: "0 0 20 20",
-        className: `w3a--text-app-gray-500 dark:w3a--text-app-gray-200 ${disableBackButton ? "w3a--cursor-not-allowed w3a--opacity-50" : "hover:w3a--text-app-gray-900 dark:hover:w3a--text-app-white"}`,
+        className: `wta:text-app-gray-500 wta:dark:text-app-gray-200 ${disableBackButton ? "wta:cursor-not-allowed wta:opacity-50" : "wta:hover:text-app-gray-900 wta:dark:hover:text-app-white"}`,
         children: /*#__PURE__*/jsx("path", {
           fill: "currentColor",
           fillRule: "evenodd",
@@ -39,10 +40,10 @@ function ConnectWalletHeader(props) {
         })
       })
     }) : /*#__PURE__*/jsx("div", {}), /*#__PURE__*/jsx("p", {
-      className: "w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
-      children: currentPage === CONNECT_WALLET_PAGES.SELECTED_WALLET ? selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName : currentPage === CONNECT_WALLET_PAGES.CONNECT_WALLET ? t("modal.connectYourWallet") : currentPage
+      className: "wta:text-base wta:font-medium wta:text-app-gray-900 wta:dark:text-app-white",
+      children: currentPage === CONNECT_WALLET_PAGES.SELECTED_WALLET ? selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName : currentPage === CONNECT_WALLET_PAGES.CONNECT_WALLET ? isLinking ? t("modal.linkYourWallet") : t("modal.connectYourWallet") : currentPage
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--z-[-1] w3a--size-5"
+      className: "wta:z-[-1] wta:size-5"
     })]
   });
 }

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

@@ -11,7 +11,7 @@ function NoWalletsFound() {
     i18n: i18nInstance
   });
   return /*#__PURE__*/jsx("div", {
-    className: "w3a--flex w3a--w-full w3a--items-center w3a--justify-center w3a--py-6 w3a--text-center w3a--text-app-gray-400 dark:w3a--text-app-gray-500",
+    className: "wta:flex wta:w-full wta:items-center wta:justify-center wta:py-6 wta:text-center wta:text-app-gray-400 wta:dark:text-app-gray-500",
     children: t("modal.external.no-wallets-found")
   });
 }
@@ -32,20 +32,20 @@ function WalletsFound(props) {
   } = uiConfig;
   if (isLoading) {
     return /*#__PURE__*/jsx("div", {
-      className: "w3a--flex w3a--flex-col w3a--gap-y-2",
+      className: "wta:flex wta:flex-col wta:gap-y-2",
       children: Array.from({
         length: 6
       }).map((_, index) => /*#__PURE__*/jsx("div", {
-        className: cn("w3a--h-12 w3a--w-full w3a--animate-pulse w3a--rounded-2xl w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700", {
-          "w3a--rounded-full": buttonRadius === "pill",
-          "w3a--rounded-lg": buttonRadius === "rounded",
-          "w3a--rounded-none": buttonRadius === "square"
+        className: cn("wta:h-12 wta:w-full wta:animate-pulse wta:rounded-2xl wta:bg-app-gray-200 wta:dark:bg-app-gray-700", {
+          "wta:rounded-full": buttonRadius === "pill",
+          "wta:rounded-lg": buttonRadius === "rounded",
+          "wta:rounded-none": buttonRadius === "square"
         })
       }, `loader-${index}`))
     });
   }
   return /*#__PURE__*/jsx("div", {
-    className: "w3a--flex w3a--flex-col w3a--gap-y-2",
+    className: "wta:flex wta:flex-col wta:gap-y-2",
     children: externalButtons.map(button => /*#__PURE__*/jsx(Button, {
       type: BUTTON_TYPE.WALLET,
       props: {
@@ -84,19 +84,19 @@ function MoreWalletsButton(props) {
   };
   if (isLoading && initialWalletCount < totalExternalWalletsCount) {
     return /*#__PURE__*/jsx("div", {
-      className: cn("w3a--h-12 w3a--w-full w3a--animate-pulse w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700", {
-        "w3a--rounded-full": buttonRadius === "pill",
-        "w3a--rounded-lg": buttonRadius === "rounded",
-        "w3a--rounded-none": buttonRadius === "square"
+      className: cn("wta:h-12 wta:w-full wta:animate-pulse wta:bg-app-gray-200 wta:dark:bg-app-gray-700", {
+        "wta:rounded-full": buttonRadius === "pill",
+        "wta:rounded-lg": buttonRadius === "rounded",
+        "wta:rounded-none": buttonRadius === "square"
       })
     });
   }
   return /*#__PURE__*/jsxs("button", {
     type: "button",
-    className: cn("w3a--flex w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600 active:w3a--scale-95 w3a--transition-all w3a--duration-150", {
-      "w3a--rounded-full": buttonRadius === "pill",
-      "w3a--rounded-lg": buttonRadius === "rounded",
-      "w3a--rounded-none": buttonRadius === "square"
+    className: cn("wta:flex wta:items-center wta:justify-start wta:gap-x-2 wta:bg-app-gray-50 wta:p-3 wta:hover:bg-app-gray-200 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: onMoreWalletsClick,
     children: [/*#__PURE__*/jsx("img", {
@@ -105,10 +105,10 @@ function MoreWalletsButton(props) {
       height: "24",
       width: "24"
     }), /*#__PURE__*/jsx("p", {
-      className: "w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+      className: "wta:text-base wta:font-normal wta:text-app-gray-700 wta:dark:text-app-white",
       children: t("modal.connect-wallet.more-wallets")
     }), /*#__PURE__*/jsx("span", {
-      className: "w3a--inline-flex w3a--items-center w3a--rounded-full w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800  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-full wta:bg-app-primary-100 wta:px-2 wta:py-1 wta:text-xs wta:font-medium wta:text-app-primary-800  wta:dark:border wta:dark:border-app-primary-400 wta:dark:bg-transparent wta:dark:text-app-primary-400",
       children: totalExternalWalletsCount - initialWalletCount
     })]
   });
@@ -131,8 +131,8 @@ function ConnectWalletList(props) {
   const showMoreWalletsButton = !isShowAllWallets;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("ul", {
-      className: cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px] w3a--social-container -w3a--mx-5 w3a--pl-5 w3a--pr-1", {
-        "w3a--h-[328px]": !showMoreWalletsButton
+      className: cn("wta:overflow-y-auto wta:flex wta:flex-col wta:gap-y-2 wta:h-[280px] w3a--social-container wta:-mx-5 wta:px-5", {
+        "wta:h-[328px]": !showMoreWalletsButton
       }),
       children: externalButtons.length === 0 ? /*#__PURE__*/jsx(NoWalletsFound, {}) : /*#__PURE__*/jsx(WalletsFound, {
         externalButtons: externalButtons,