@web3auth/modal 10.16.0 → 11.0.0-beta.1

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

@@ -6,7 +6,9 @@ var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var constants = require('../../constants.js');
 var AnalyticsContext = require('../../context/AnalyticsContext.js');
+var ModalStateContext = require('../../context/ModalStateContext.js');
 var RootContext = require('../../context/RootContext.js');
+var WidgetContext = require('../../context/WidgetContext.js');
 var ConnectWalletChainFilter = require('./ConnectWalletChainFilter/ConnectWalletChainFilter.js');
 var ConnectWalletHeader = require('./ConnectWalletHeader/ConnectWalletHeader.js');
 var ConnectWalletList = require('./ConnectWalletList/ConnectWalletList.js');
@@ -14,32 +16,39 @@ var ConnectWalletQrCode = require('./ConnectWalletQrCode/ConnectWalletQrCode.js'
 var ConnectWalletSearch = require('./ConnectWalletSearch/ConnectWalletSearch.js');
 
 function ConnectWallet(props) {
-  var _selectedButton$walle;
+  var _bodyState$installLin2, _bodyState$multiChain2, _selectedButton$walle;
   const {
-    isDark,
-    config,
-    walletConnectUri,
-    metamaskConnectUri,
-    walletRegistry,
     allRegistryButtons,
     customConnectorButtons,
     connectorVisibilityMap,
-    deviceDetails,
-    buttonRadius = "pill",
-    chainNamespace,
-    isExternalWalletModeOnly,
-    onBackClick,
-    handleExternalWalletClick,
-    handleWalletDetailsHeight,
-    disableBackButton
+    isExternalWalletModeOnly
   } = props;
   const {
     bodyState,
     setBodyState
-  } = react.useContext(RootContext.RootContext);
+  } = RootContext.useBodyState();
   const {
     analytics
   } = react.useContext(AnalyticsContext.AnalyticsContext);
+  const {
+    deviceDetails,
+    isDark,
+    uiConfig
+  } = WidgetContext.useWidget();
+  const {
+    walletRegistry
+  } = uiConfig;
+  const {
+    modalState,
+    setModalState,
+    handleShowExternalWallets,
+    preHandleExternalWalletClick: handleExternalWalletClick
+  } = ModalStateContext.useModalState();
+  const {
+    externalWalletsConfig: config,
+    walletConnectUri,
+    metamaskConnectUri
+  } = modalState;
   const [currentPage, setCurrentPage] = react.useState(constants.CONNECT_WALLET_PAGES.CONNECT_WALLET);
   const [selectedWallet, setSelectedWallet] = react.useState(false);
   const [isLoading] = react.useState(false);
@@ -47,17 +56,36 @@ function ConnectWallet(props) {
   const [walletSearch, setWalletSearch] = react.useState("");
   const [selectedChain, setSelectedChain] = react.useState("all");
   const [isShowAllWallets, setIsShowAllWallets] = react.useState(false);
+  // Track if user came directly from Login page with a pre-selected wallet
+  const [isPreSelectedFromLogin, setIsPreSelectedFromLogin] = react.useState(false);
+  const onBackClick = react.useCallback(flag => {
+    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+      currentPage: constants.PAGES.LOGIN_OPTIONS
+    }));
+    handleShowExternalWallets(flag);
+  }, [modalState, setModalState, handleShowExternalWallets]);
   const handleBack = () => {
     if (!selectedWallet && currentPage === constants.CONNECT_WALLET_PAGES.CONNECT_WALLET && onBackClick) {
       onBackClick(false);
       return;
     }
     if (selectedWallet) {
+      // If user came from Login page with pre-selected wallet, go back to Login
+      if (isPreSelectedFromLogin && onBackClick) {
+        setSelectedWallet(false);
+        setIsPreSelectedFromLogin(false);
+        onBackClick(false);
+        return;
+      }
+      // Otherwise, go back to wallet list
       setCurrentPage(constants.CONNECT_WALLET_PAGES.CONNECT_WALLET);
       setSelectedWallet(false);
-      handleWalletDetailsHeight();
     }
   };
+  const disableBackButton = react.useMemo(() => {
+    var _bodyState$installLin, _bodyState$multiChain;
+    return ((_bodyState$installLin = bodyState.installLinks) === null || _bodyState$installLin === void 0 ? void 0 : _bodyState$installLin.show) || ((_bodyState$multiChain = bodyState.multiChainSelector) === null || _bodyState$multiChain === void 0 ? void 0 : _bodyState$multiChain.show);
+  }, [(_bodyState$installLin2 = bodyState.installLinks) === null || _bodyState$installLin2 === void 0 ? void 0 : _bodyState$installLin2.show, (_bodyState$multiChain2 = bodyState.multiChainSelector) === null || _bodyState$multiChain2 === void 0 ? void 0 : _bodyState$multiChain2.show]);
   const walletDiscoverySupported = react.useMemo(() => {
     const supported = walletRegistry && (Object.keys(walletRegistry.default || {}).length > 0 || Object.keys(walletRegistry.others || {}).length > 0);
     return supported;
@@ -141,11 +169,26 @@ function ConnectWallet(props) {
   // also resets everytime we search causing no. of wallets to change or select different chain
   react.useEffect(() => {
     if (walletDiscoverySupported && totalExternalWalletsCount <= 15) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
       setIsShowAllWallets(true);
     } else {
       setIsShowAllWallets(false);
     }
   }, [walletDiscoverySupported, selectedChain, totalExternalWalletsCount]);
+  // Handle pre-selected wallet from Login page (e.g., MetaMask QR code flow)
+  react.useEffect(() => {
+    if (bodyState.preSelectedWallet) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
+      setSelectedButton(bodyState.preSelectedWallet);
+      setSelectedWallet(true);
+      setCurrentPage(constants.CONNECT_WALLET_PAGES.SELECTED_WALLET);
+      setIsPreSelectedFromLogin(true);
+      // Clear pre-selected wallet after handling
+      setBodyState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        preSelectedWallet: null
+      }));
+    }
+  }, [bodyState.preSelectedWallet, setBodyState]);
   /**
    * Wallet click logic
    * - For installed wallets
@@ -180,11 +223,10 @@ function ConnectWallet(props) {
         setSelectedButton(button);
         setSelectedWallet(true);
         setCurrentPage(constants.CONNECT_WALLET_PAGES.SELECTED_WALLET);
-        handleWalletDetailsHeight();
         return;
       }
       // show chain namespace selector if the button has multiple chain namespaces
-      if (((_button$chainNamespac2 = button.chainNamespaces) === null || _button$chainNamespac2 === void 0 ? void 0 : _button$chainNamespac2.length) > 1) {
+      if (((_button$chainNamespac2 = button.chainNamespaces) === null || _button$chainNamespac2 === void 0 ? void 0 : _button$chainNamespac2.length) > 1 && button.name !== noModal.WALLET_CONNECTORS.METAMASK) {
         setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
           multiChainSelector: {
             show: true,
@@ -201,10 +243,19 @@ 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(constants.CONNECT_WALLET_PAGES.SELECTED_WALLET);
-        handleWalletDetailsHeight();
       } else {
         // otherwise, show install links
         setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
@@ -234,13 +285,14 @@ function ConnectWallet(props) {
     return false;
   }, [selectedWallet, isExternalWalletModeOnly]);
   return jsxRuntime.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: [jsxRuntime.jsx(ConnectWalletHeader, {
       hideBackButton: hideBackButton,
       disableBackButton: disableBackButton,
       onBackClick: handleBack,
       currentPage: currentPage,
-      selectedButton: selectedButton
+      selectedButton: selectedButton,
+      isLinking: modalState.accountLinking.pickerActive
     }), selectedWallet ? jsxRuntime.jsx(ConnectWalletQrCode, {
       qrCodeValue: qrCodeValue,
       isDark: isDark,
@@ -249,19 +301,17 @@ function ConnectWallet(props) {
       logoImage: `https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`,
       platform: deviceDetails.platform
     }) : jsxRuntime.jsxs("div", {
-      className: "w3a--flex w3a--flex-col w3a--gap-y-2",
-      children: [chainNamespace.length > 1 && jsxRuntime.jsx(ConnectWalletChainFilter, {
+      className: "wta:flex wta:flex-col wta:gap-y-2",
+      children: [jsxRuntime.jsx(ConnectWalletChainFilter, {
         isDark: isDark,
         isLoading: isLoading,
         selectedChain: selectedChain,
-        setSelectedChain: handleChainFilterChange,
-        chainNamespace: chainNamespace
+        setSelectedChain: handleChainFilterChange
       }), jsxRuntime.jsx(ConnectWalletSearch, {
         totalExternalWalletCount: totalExternalWalletsCount,
         isLoading: isLoading,
         walletSearch: walletSearch,
-        handleWalletSearch: handleWalletSearch,
-        buttonRadius: buttonRadius
+        handleWalletSearch: handleWalletSearch
       }), jsxRuntime.jsx(ConnectWalletList, {
         externalButtons: externalButtons,
         isLoading: isLoading,
@@ -270,9 +320,7 @@ function ConnectWallet(props) {
         handleWalletClick: handleWalletClick,
         handleMoreWallets: handleMoreWallets,
         isDark: isDark,
-        deviceDetails: deviceDetails,
         walletConnectUri: walletConnectUri,
-        buttonRadius: buttonRadius,
         isShowAllWallets: isShowAllWallets
       })]
     })]

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

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var reactI18next = require('react-i18next');
+var WidgetContext = require('../../../context/WidgetContext.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
 
@@ -12,9 +13,14 @@ function ConnectWalletChainFilter(props) {
     isDark,
     isLoading,
     selectedChain,
-    setSelectedChain,
-    chainNamespace
+    setSelectedChain
   } = props;
+  const {
+    uiConfig
+  } = WidgetContext.useWidget();
+  const {
+    chainNamespaces
+  } = uiConfig;
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
@@ -24,7 +30,7 @@ function ConnectWalletChainFilter(props) {
       name: "modal.allChains",
       icon: ""
     }];
-    for (const chain of chainNamespace) {
+    for (const chain of chainNamespaces) {
       if (chain === noModal.CHAIN_NAMESPACES.EIP155 || chain === noModal.CHAIN_NAMESPACES.SOLANA) {
         chains.push({
           id: chain,
@@ -34,31 +40,34 @@ function ConnectWalletChainFilter(props) {
       }
     }
     return chains;
-  }, [chainNamespace]);
+  }, [chainNamespaces]);
+  if (chainNamespaces.length > 1) {
+    return null;
+  }
   if (isLoading) {
     return jsxRuntime.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) => jsxRuntime.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 jsxRuntime.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 => jsxRuntime.jsxs("button", {
       type: "button",
-      className: utils.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: utils.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 && jsxRuntime.jsx("img", {
         src: utils.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"
       }), jsxRuntime.jsx("span", {
-        className: "first-letter:w3a--capitalize",
+        className: "wta:first-letter:capitalize",
         children: t(chain.name)
       })]
     }, chain.id))

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

@@ -2,9 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
+var Image = require('../../../components/Image/Image.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
-var Image = require('../../Image/Image.js');
 
 const ConnectWalletChainNamespaceSelect = props => {
   const {
@@ -26,13 +26,13 @@ const ConnectWalletChainNamespaceSelect = props => {
   });
   return jsxRuntime.jsxs("div", {
     children: [jsxRuntime.jsx("div", {
-      className: "w3a--flex w3a--items-center w3a--justify-center",
+      className: "wta:flex wta:items-center wta:justify-center",
       children: jsxRuntime.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")
       })
     }), jsxRuntime.jsx("div", {
-      className: "w3a--my-6 w3a--flex w3a--justify-center",
+      className: "wta:my-6 wta:flex wta:justify-center",
       children: jsxRuntime.jsx(Image, {
         imageId: `login-${wallet.name}`,
         hoverImageId: `login-${wallet.name}`,
@@ -43,12 +43,12 @@ const ConnectWalletChainNamespaceSelect = props => {
         extension: wallet.imgExtension
       })
     }), jsxRuntime.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
       })
     }), jsxRuntime.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,
@@ -56,13 +56,13 @@ const ConnectWalletChainNamespaceSelect = props => {
       }) => jsxRuntime.jsx("li", {
         children: jsxRuntime.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: [jsxRuntime.jsxs("div", {
-            className: "w3a--flex w3a--items-center",
+            className: "wta:flex wta:items-center",
             children: [jsxRuntime.jsx(Image, {
               imageId: imageId,
               hoverImageId: imageId,
@@ -72,12 +72,12 @@ const ConnectWalletChainNamespaceSelect = props => {
               isButton: true,
               extension: "svg"
             }), jsxRuntime.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
             })]
           }), jsxRuntime.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\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+            className: "wta:absolute wta:right-4 wta:top-1/2 wta:-translate-x-6 wta:-translate-y-1/2 wta:opacity-0 wta:transition-all wta:duration-300\n          wta:group-hover:translate-x-0 wta:group-hover:opacity-100",
             src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
             alt: "arrow"
           })]

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

@@ -11,7 +11,8 @@ function ConnectWalletHeader(props) {
     disableBackButton,
     onBackClick,
     currentPage,
-    selectedButton
+    selectedButton,
+    isLinking
   } = props;
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
@@ -22,17 +23,17 @@ function ConnectWalletHeader(props) {
     }
   };
   return jsxRuntime.jsxs("div", {
-    className: "w3a--flex w3a--items-center w3a--justify-between",
-    children: [!hideBackButton ? jsxRuntime.jsx("button", {
+    className: "wta:flex wta:items-center wta:justify-between",
+    children: [!hideBackButton && !isLinking ? jsxRuntime.jsx("button", {
       type: "button",
-      className: "w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full",
+      className: "wta:z-20 wta:flex wta:size-5 wta:cursor-pointer wta:items-center wta:justify-center wta:rounded-full",
       onClick: handleBack,
       disabled: disableBackButton,
       children: jsxRuntime.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: jsxRuntime.jsx("path", {
           fill: "currentColor",
           fillRule: "evenodd",
@@ -41,10 +42,10 @@ function ConnectWalletHeader(props) {
         })
       })
     }) : jsxRuntime.jsx("div", {}), jsxRuntime.jsx("p", {
-      className: "w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
-      children: currentPage === constants.CONNECT_WALLET_PAGES.SELECTED_WALLET ? selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName : currentPage === constants.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 === constants.CONNECT_WALLET_PAGES.SELECTED_WALLET ? selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName : currentPage === constants.CONNECT_WALLET_PAGES.CONNECT_WALLET ? isLinking ? t("modal.linkYourWallet") : t("modal.connectYourWallet") : currentPage
     }), jsxRuntime.jsx("div", {
-      className: "w3a--z-[-1] w3a--size-5"
+      className: "wta:z-[-1] wta:size-5"
     })]
   });
 }

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

@@ -2,17 +2,18 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
+var Button = require('../../../components/Button/Button.js');
+var Button_type = require('../../../components/Button/Button.type.js');
+var WidgetContext = require('../../../context/WidgetContext.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
-var Button = require('../../Button/Button.js');
-var Button_type = require('../../Button/Button.type.js');
 
 function NoWalletsFound() {
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
   return jsxRuntime.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")
   });
 }
@@ -21,29 +22,36 @@ function WalletsFound(props) {
     externalButtons,
     isLoading,
     handleWalletClick,
-    deviceDetails,
-    walletConnectUri,
-    buttonRadius
+    walletConnectUri
   } = props;
+  const {
+    deviceDetails,
+    uiConfig,
+    isDark
+  } = WidgetContext.useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = uiConfig;
   if (isLoading) {
     return jsxRuntime.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) => jsxRuntime.jsx("div", {
-        className: utils.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: utils.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 jsxRuntime.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 => jsxRuntime.jsx(Button, {
       type: Button_type.BUTTON_TYPE.WALLET,
       props: {
+        isDark,
         label: button.displayName,
         onClick: () => handleWalletClick(button),
         button,
@@ -60,9 +68,14 @@ function MoreWalletsButton(props) {
     initialWalletCount,
     handleMoreWallets,
     isLoading,
-    isDark,
-    buttonRadius
+    isDark
   } = props;
+  const {
+    uiConfig
+  } = WidgetContext.useWidget();
+  const {
+    buttonRadiusType: buttonRadius
+  } = uiConfig;
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
@@ -73,19 +86,19 @@ function MoreWalletsButton(props) {
   };
   if (isLoading && initialWalletCount < totalExternalWalletsCount) {
     return jsxRuntime.jsx("div", {
-      className: utils.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: utils.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 jsxRuntime.jsxs("button", {
     type: "button",
-    className: utils.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: utils.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: [jsxRuntime.jsx("img", {
@@ -94,10 +107,10 @@ function MoreWalletsButton(props) {
       height: "24",
       width: "24"
     }), jsxRuntime.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")
     }), jsxRuntime.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 \n        dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
+      className: "wta:inline-flex wta:items-center wta:rounded-full wta:bg-app-primary-100 wta:px-2 wta:py-1 wta:text-xs wta:font-medium wta:text-app-primary-800 \n        wta:dark:border wta:dark:border-app-primary-400 wta:dark:bg-transparent wta:dark:text-app-primary-400",
       children: totalExternalWalletsCount - initialWalletCount
     })]
   });
@@ -111,9 +124,7 @@ function ConnectWalletList(props) {
     handleWalletClick,
     handleMoreWallets,
     isDark,
-    deviceDetails,
     walletConnectUri,
-    buttonRadius,
     isShowAllWallets
   } = props;
   const onShowMoreWalletsClick = () => {
@@ -122,24 +133,21 @@ function ConnectWalletList(props) {
   const showMoreWalletsButton = !isShowAllWallets;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("ul", {
-      className: utils.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: utils.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 ? jsxRuntime.jsx(NoWalletsFound, {}) : jsxRuntime.jsx(WalletsFound, {
         externalButtons: externalButtons,
         isLoading: isLoading,
         handleWalletClick: handleWalletClick,
-        deviceDetails: deviceDetails,
-        walletConnectUri: walletConnectUri,
-        buttonRadius: buttonRadius
+        walletConnectUri: walletConnectUri
       })
     }), showMoreWalletsButton && !isLoading && initialWalletCount < totalExternalWalletsCount && jsxRuntime.jsx(MoreWalletsButton, {
       totalExternalWalletsCount: totalExternalWalletsCount,
       initialWalletCount: initialWalletCount,
       handleMoreWallets: onShowMoreWalletsClick,
       isLoading: isLoading,
-      isDark: isDark,
-      buttonRadius: buttonRadius
+      isDark: isDark
     })]
   });
 }