@web3auth/modal 10.16.0 → 11.0.0-beta.1

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/ConnectWallet/ConnectWalletChainFilter/ConnectWalletChainFilter.js

@@ -1,6 +1,7 @@
 import { CHAIN_NAMESPACES } from '@web3auth/no-modal';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useWidget } from '../../../context/WidgetContext.js';
 import i18nInstance from '../../../localeImport.js';
 import { getIcons, cn } from '../../../utils.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -10,9 +11,14 @@ function ConnectWalletChainFilter(props) {
     isDark,
     isLoading,
     selectedChain,
-    setSelectedChain,
-    chainNamespace
+    setSelectedChain
   } = props;
+  const {
+    uiConfig
+  } = useWidget();
+  const {
+    chainNamespaces
+  } = uiConfig;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
   });
@@ -22,7 +28,7 @@ function ConnectWalletChainFilter(props) {
       name: "modal.allChains",
       icon: ""
     }];
-    for (const chain of chainNamespace) {
+    for (const chain of chainNamespaces) {
       if (chain === CHAIN_NAMESPACES.EIP155 || chain === CHAIN_NAMESPACES.SOLANA) {
         chains.push({
           id: chain,
@@ -32,31 +38,34 @@ function ConnectWalletChainFilter(props) {
       }
     }
     return chains;
-  }, [chainNamespace]);
+  }, [chainNamespaces]);
+  if (chainNamespaces.length > 1) {
+    return null;
+  }
   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/{components → containers}/ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.js

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
+import Image from '../../../components/Image/Image.js';
 import i18nInstance from '../../../localeImport.js';
 import { getIcons } from '../../../utils.js';
-import Image from '../../Image/Image.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const ConnectWalletChainNamespaceSelect = props => {
@@ -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/{components → 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/{components → containers}/ConnectWallet/ConnectWalletList/ConnectWalletList.js

@@ -1,8 +1,9 @@
 import { useTranslation } from 'react-i18next';
+import Button from '../../../components/Button/Button.js';
+import { BUTTON_TYPE } from '../../../components/Button/Button.type.js';
+import { useWidget } from '../../../context/WidgetContext.js';
 import i18nInstance from '../../../localeImport.js';
 import { cn, getIcons } from '../../../utils.js';
-import Button from '../../Button/Button.js';
-import { BUTTON_TYPE } from '../../Button/Button.type.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function NoWalletsFound() {
@@ -10,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")
   });
 }
@@ -19,29 +20,36 @@ function WalletsFound(props) {
     externalButtons,
     isLoading,
     handleWalletClick,
-    deviceDetails,
-    walletConnectUri,
-    buttonRadius
+    walletConnectUri
   } = props;
+  const {
+    deviceDetails,
+    uiConfig,
+    isDark
+  } = useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = 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 w3a--pr-1.5",
+    className: "wta:flex wta:flex-col wta:gap-y-2",
     children: externalButtons.map(button => /*#__PURE__*/jsx(Button, {
       type: BUTTON_TYPE.WALLET,
       props: {
+        isDark,
         label: button.displayName,
         onClick: () => handleWalletClick(button),
         button,
@@ -58,9 +66,14 @@ function MoreWalletsButton(props) {
     initialWalletCount,
     handleMoreWallets,
     isLoading,
-    isDark,
-    buttonRadius
+    isDark
   } = props;
+  const {
+    uiConfig
+  } = useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = uiConfig;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
   });
@@ -71,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--mr-2.5", {
-      "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", {
@@ -92,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
     })]
   });
@@ -109,9 +122,7 @@ function ConnectWalletList(props) {
     handleWalletClick,
     handleMoreWallets,
     isDark,
-    deviceDetails,
     walletConnectUri,
-    buttonRadius,
     isShowAllWallets
   } = props;
   const onShowMoreWalletsClick = () => {
@@ -120,24 +131,21 @@ 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--pr-2.5", {
-        "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,
         isLoading: isLoading,
         handleWalletClick: handleWalletClick,
-        deviceDetails: deviceDetails,
-        walletConnectUri: walletConnectUri,
-        buttonRadius: buttonRadius
+        walletConnectUri: walletConnectUri
       })
     }), showMoreWalletsButton && !isLoading && initialWalletCount < totalExternalWalletsCount && /*#__PURE__*/jsx(MoreWalletsButton, {
       totalExternalWalletsCount: totalExternalWalletsCount,
       initialWalletCount: initialWalletCount,
       handleMoreWallets: onShowMoreWalletsClick,
       isLoading: isLoading,
-      isDark: isDark,
-      buttonRadius: buttonRadius
+      isDark: isDark
     })]
   });
 }

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.js

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import Bowser from 'bowser';
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { QRCode } from 'react-qrcode-logo';
+import Image from '../../../components/Image/Image.js';
 import { WALLET_CONNECT_LOGO } from '../../../constants.js';
-import { RootContext } from '../../../context/RootContext.js';
+import { useBodyState, useToast } from '../../../context/RootContext.js';
 import { TOAST_TYPE } from '../../../interfaces.js';
 import i18nInstance from '../../../localeImport.js';
-import Image from '../../Image/Image.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ConnectWalletQrCode(props) {
@@ -17,9 +17,11 @@ function ConnectWalletQrCode(props) {
   });
   const {
     bodyState,
-    setBodyState,
+    setBodyState
+  } = useBodyState();
+  const {
     setToast
-  } = useContext(RootContext);
+  } = useToast();
   const {
     qrCodeValue,
     isDark,
@@ -47,12 +49,12 @@ function ConnectWalletQrCode(props) {
   const modalColor = ((_getComputedStyle = getComputedStyle(root)) === null || _getComputedStyle === void 0 || (_getComputedStyle = _getComputedStyle.getPropertyValue("--app-gray-800")) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.trim()) || "#1f2a37";
   const qrColor = primaryColor && primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
   return /*#__PURE__*/jsxs("div", {
-    className: "w3a--contents",
+    className: "wta:contents",
     children: [qrCodeValue ? /*#__PURE__*/jsxs("div", {
-      className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--rounded-2xl w3a--border w3a--border-app-gray-200 w3a--p-4 dark:w3a--border-app-gray-700",
+      className: "wta:flex wta:flex-col wta:items-center wta:justify-center wta:gap-y-4 wta:rounded-2xl wta:border wta:border-app-gray-200 wta:p-4 wta:dark:border-app-gray-700",
       children: [/*#__PURE__*/jsx("button", {
         type: "button",
-        className: "w3a--relative w3a--flex w3a--size-[300px] w3a--appearance-none w3a--items-center w3a--justify-center w3a--rounded-2xl",
+        className: "wta:relative wta:flex wta:size-[300px] wta:appearance-none wta:items-center wta:justify-center wta:rounded-2xl",
         onClick: () => {
           navigator.clipboard.writeText(qrCodeValue);
           setToast({
@@ -75,11 +77,11 @@ function ConnectWalletQrCode(props) {
           fgColor: isDark ? whiteColor : blackColor
         })
       }), /*#__PURE__*/jsx("p", {
-        className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+        className: "wta:text-center wta:text-sm wta:font-normal wta:text-app-gray-500 wta:dark:text-app-gray-300",
         children: t("modal.external.walletconnect-copy")
       })]
     }) : /*#__PURE__*/jsx("div", {
-      className: "w3a--mx-auto w3a--flex w3a--size-[300px] w3a--animate-pulse w3a--items-center w3a--justify-center w3a--rounded-lg w3a--bg-app-gray-200 w3a--p-2 dark:w3a--bg-app-gray-700",
+      className: "wta:mx-auto wta:flex wta:size-[300px] wta:animate-pulse wta:items-center wta:justify-center wta:rounded-lg wta:bg-app-gray-200 wta:p-2 wta:dark:bg-app-gray-700",
       children: /*#__PURE__*/jsx(Image, {
         imageId: `login-${selectedButton.name}`,
         hoverImageId: `login-${selectedButton.name}`,
@@ -90,15 +92,15 @@ function ConnectWalletQrCode(props) {
         extension: selectedButton.imgExtension
       })
     }), showGetWalletComponent && /*#__PURE__*/jsxs("div", {
-      className: "w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--rounded-2xl w3a--bg-app-gray-50  w3a--px-4 w3a--py-2 w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white",
+      className: "wta:flex wta:w-full wta:items-center wta:justify-between wta:rounded-2xl wta:bg-app-gray-50  wta:px-4 wta:py-2 wta:text-app-gray-900 wta:dark:bg-app-gray-800 wta:dark:text-app-white",
       children: [/*#__PURE__*/jsxs("p", {
-        className: "w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white",
+        className: "wta:text-sm wta:text-app-gray-900 wta:dark:text-app-white",
         children: [t("modal.external.dont-have"), " ", /*#__PURE__*/jsx("span", {
           children: selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName
         }), "?"]
       }), /*#__PURE__*/jsx("button", {
         type: "button",
-        className: "w3a--appearance-none w3a--rounded-full w3a--border w3a--border-app-gray-200 w3a--bg-transparent w3a--px-5 w3a--py-2 w3a--text-base w3a--font-normal w3a--text-app-gray-700 w3a--transition-all w3a--duration-150 hover:w3a--border-transparent hover:w3a--shadow-light active:w3a--scale-95 dark:w3a--border-app-gray-700 dark:w3a--text-app-gray-300 dark:hover:w3a--border-transparent dark:hover:w3a--shadow-dark",
+        className: "wta:appearance-none wta:rounded-full wta:border wta:border-app-gray-200 wta:bg-transparent wta:px-5 wta:py-2 wta:text-base wta:font-normal wta:text-app-gray-700 wta:transition-all wta:duration-150 wta:hover:border-transparent wta:hover:shadow-light wta:active:scale-95 wta:dark:border-app-gray-700 wta:dark:text-app-gray-300 wta:dark:hover:border-transparent wta:dark:hover:shadow-dark",
         onClick: () => {
           setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
             installLinks: {

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/ConnectWallet/ConnectWalletSearch/ConnectWalletSearch.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useWidget } from '../../../context/WidgetContext.js';
 import i18nInstance from '../../../localeImport.js';
 import { cn } from '../../../utils.js';
 import { jsx } from 'react/jsx-runtime';
@@ -9,9 +10,14 @@ function ConnectWalletSearch(props) {
     totalExternalWalletCount,
     isLoading,
     walletSearch,
-    handleWalletSearch,
-    buttonRadius
+    handleWalletSearch
   } = props;
+  const {
+    uiConfig
+  } = useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = uiConfig;
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
@@ -24,7 +30,7 @@ function ConnectWalletSearch(props) {
   // const isShowSearch = totalExternalWalletCount > 15 && !isLoading;
 
   // if (!isShowSearch) {
-  //   return <div className="w3a--h-[50px] w3a--w-full w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />;
+  //   return <div className="wta:h-[50px] wta:w-full wta:animate-pulse wta:rounded-full wta:bg-app-gray-200 wta:dark:bg-app-gray-700" />;
   // }
 
   return /*#__PURE__*/jsx("input", {
@@ -45,10 +51,10 @@ function ConnectWalletSearch(props) {
       count: totalExternalWalletCount
     }),
     disabled: isLoading,
-    className: cn("w3a--input w3a--appearance-none w3a--outline-none active:w3a--outline-none focus:w3a--outline-none w3a--bg-transparent placeholder:w3a--text-app-gray-400 dark:placeholder:w3a--text-app-gray-500 w3a--text-app-gray-900 dark:w3a--text-app-white", isInputFocused && "!w3a--border-app-primary-600", {
-      "w3a--rounded-full": buttonRadius === "pill",
-      "w3a--rounded-lg": buttonRadius === "rounded",
-      "w3a--rounded-none": buttonRadius === "square"
+    className: cn("w3a--input wta:appearance-none wta:outline-none wta:active:outline-none wta:focus:outline-none wta:bg-transparent wta:placeholder:text-app-gray-400 wta:dark:placeholder:text-app-gray-500 wta:text-app-gray-900 wta:dark:text-app-white", isInputFocused && "wta:border-app-primary-600!", {
+      "wta:rounded-full": buttonRadius === "pill",
+      "wta:rounded-lg": buttonRadius === "rounded",
+      "wta:rounded-none": buttonRadius === "square"
     })
   });
 }

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/Embed/Embed.js

@@ -26,6 +26,7 @@ function Embed(props) {
         setIsOpen(true);
       }, 50);
     } else {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
       setIsOpen(false);
     }
   }, [open]);
@@ -34,18 +35,18 @@ function Embed(props) {
   };
   if (!isOpen) return null;
   return /*#__PURE__*/jsxs("div", {
-    className: cn("w3a--bg-app-light-surface1 dark:w3a--bg-app-dark-surface-main w3a--rounded-3xl w3a--w-[356px] [@media(min-width:375px)]:w3a--w-[393px] w3a--h-auto w3a--flex w3a--flex-col w3a--duration-500", {
-      "w3a--translate-y-0 w3a--delay-100": isOpen,
-      "w3a--translate-y-[100vh]": !isOpen,
-      "w3a--p-4": padding,
-      "w3a--shadow-xl sm:w3a--shadow-lg": shadow,
-      "w3a--border w3a--border-app-gray-100 dark:w3a--border-app-gray-800": border,
-      "w3a--rounded-[30px]": borderRadius === "large",
-      "w3a--rounded-2xl": borderRadius === "medium",
-      "w3a--rounded-none": borderRadius === "small"
+    className: cn("wta:bg-app-light-surface1 wta:dark:bg-app-dark-surface-main wta:rounded-3xl wta:w-[356px] wta:[@media(min-width:375px)]:w-[393px] wta:h-auto wta:flex wta:flex-col wta:duration-500", {
+      "wta:translate-y-0 wta:delay-100": isOpen,
+      "wta:translate-y-[100vh]": !isOpen,
+      "wta:p-4": padding,
+      "wta:shadow-xl wta:sm:shadow-lg": shadow,
+      "wta:border wta:border-app-gray-100 wta:dark:border-app-gray-800": border,
+      "wta:rounded-[30px]": borderRadius === "large",
+      "wta:rounded-2xl": borderRadius === "medium",
+      "wta:rounded-none": borderRadius === "small"
     }),
     children: [showCloseIcon && /*#__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",
@@ -53,7 +54,7 @@ function Embed(props) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         onClick: onCloseHandler,
-        className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+        className: "wta:text-app-gray-900 wta:dark:text-app-white",
         children: /*#__PURE__*/jsx("path", {
           fillRule: "evenodd",
           clipRule: "evenodd",