@web3auth/modal 10.0.0-beta.0 → 10.0.0-beta.11

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

@@ -1,33 +1,58 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('./styles.css.js');
-var React = require('react');
+var Button_type = require('./Button.type.js');
+var ButtonSocial = require('./ButtonSocial/ButtonSocial.js');
+var ButtonWallet = require('./ButtonWallet/ButtonWallet.js');
 
 function Button(props) {
   const {
-    variant = "primary",
+    type,
+    props: buttonProps
+  } = props;
+  const SocialButtonProps = buttonProps;
+  const WalletButtonProps = buttonProps;
+  const {
+    text,
+    showIcon,
+    showText,
+    method,
+    isDark,
+    isPrimaryBtn,
     onClick,
     children,
-    title,
-    className,
-    style,
-    size = "md",
-    disabled,
-    type = "button"
-  } = props;
-  const sizeClass = `size-${size}`;
-  return jsxRuntime.jsx("button", {
-    disabled: disabled,
-    // eslint-disable-next-line react/button-has-type
-    type: type,
-    className: `t-btn t-btn-${variant} w3a--rounded-full ${sizeClass} ${className}`,
-    onClick: onClick,
-    title: title,
-    style: style,
-    children: children
+    btnStyle,
+    buttonRadius
+  } = SocialButtonProps;
+  const {
+    label,
+    onClick: walletOnClick,
+    button,
+    deviceDetails,
+    walletConnectUri,
+    buttonRadius: walletButtonRadius
+  } = WalletButtonProps;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [type === Button_type.BUTTON_TYPE.SOCIAL && jsxRuntime.jsx(ButtonSocial, {
+      text: text,
+      showIcon: showIcon,
+      showText: showText,
+      method: method,
+      isDark: isDark,
+      isPrimaryBtn: isPrimaryBtn,
+      onClick: onClick,
+      btnStyle: btnStyle,
+      buttonRadius: buttonRadius,
+      children: children
+    }), type === Button_type.BUTTON_TYPE.WALLET && jsxRuntime.jsx(ButtonWallet, {
+      label: label,
+      walletConnectUri: walletConnectUri,
+      onClick: walletOnClick,
+      button: button,
+      deviceDetails: deviceDetails,
+      buttonRadius: walletButtonRadius
+    })]
   });
 }
-var Button$1 = /*#__PURE__*/React.memo(Button);
 
-module.exports = Button$1;
+module.exports = Button;

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

@@ -0,0 +1,8 @@
+'use strict';
+
+const BUTTON_TYPE = {
+  SOCIAL: "social",
+  WALLET: "wallet"
+};
+
+exports.BUTTON_TYPE = BUTTON_TYPE;

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

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var auth = require('@web3auth/auth');
+var utils = require('../../../utils.js');
+var Image = require('../../Image/Image.js');
+
+function getProviderIcon(method, isDark, isPrimaryBtn) {
+  const imageId = method === auth.AUTH_CONNECTION.TWITTER ? `login-X${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+  const hoverId = method === auth.AUTH_CONNECTION.APPLE || method === auth.AUTH_CONNECTION.GITHUB || method === auth.AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
+  if (isPrimaryBtn) {
+    return jsxRuntime.jsx(Image, {
+      width: "20",
+      imageId: hoverId,
+      hoverImageId: hoverId,
+      isButton: true
+    });
+  }
+  return jsxRuntime.jsx(Image, {
+    width: "20",
+    imageId: imageId,
+    hoverImageId: hoverId
+  });
+}
+function SocialLoginButton(props) {
+  const {
+    text,
+    showIcon,
+    showText,
+    method,
+    isDark,
+    isPrimaryBtn,
+    onClick,
+    children,
+    btnStyle,
+    buttonRadius = "pill"
+  } = props;
+  return jsxRuntime.jsxs("button", {
+    type: "button",
+    onClick: e => onClick && onClick(e),
+    className: utils.cn("w3a--btn", btnStyle, {
+      "w3a--rounded-full": buttonRadius === "pill",
+      "w3a--rounded-lg": buttonRadius === "rounded",
+      "w3a--rounded-none": buttonRadius === "square"
+    }),
+    children: [showIcon && getProviderIcon(method, isDark, isPrimaryBtn), showText && jsxRuntime.jsx("p", {
+      className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
+      children: text
+    }), children]
+  });
+}
+
+module.exports = SocialLoginButton;

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

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cn = require('classnames');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var ThemeContext = require('../../../context/ThemeContext.js');
+var localeImport = require('../../../localeImport.js');
+var utils = require('../../../utils.js');
+var Image = require('../../Image/Image.js');
+
+function ButtonWallet(props) {
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const {
+    deviceDetails,
+    button,
+    walletConnectUri,
+    onClick,
+    label,
+    buttonRadius
+  } = props;
+  const isDark = react.useContext(ThemeContext.ThemedContext);
+  const isLink = react.useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.hasInjectedWallet, [deviceDetails, button]);
+  const href = react.useMemo(() => button.href ? utils.formatIOSMobile({
+    uri: walletConnectUri,
+    link: button.href
+  }) : walletConnectUri, [button, walletConnectUri]);
+  const handleBtnClick = () => {
+    if (href && isLink) {
+      window.open(href, "_blank");
+    } else if (onClick) {
+      onClick();
+    }
+  };
+  return jsxRuntime.jsxs("button", {
+    type: "button",
+    className: cn(`w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 
+        hover:w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600 active:w3a--scale-95 w3a--transition-all w3a--duration-150`, {
+      "w3a--rounded-full": buttonRadius === "pill",
+      "w3a--rounded-lg": buttonRadius === "rounded",
+      "w3a--rounded-none": buttonRadius === "square"
+    }),
+    onClick: handleBtnClick,
+    children: [jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--items-center w3a--gap-x-2",
+      children: [jsxRuntime.jsx("figure", {
+        className: "w3a--size-5",
+        children: jsxRuntime.jsx(Image, {
+          imageData: button.icon,
+          imageId: `login-${button.name}`,
+          hoverImageId: `login-${button.name}`,
+          fallbackImageId: "wallet",
+          height: "24",
+          width: "24",
+          isButton: true,
+          extension: button.imgExtension || "webp"
+        })
+      }), jsxRuntime.jsx("p", {
+        className: "w3a--max-w-[180px] w3a--truncate w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+        children: label
+      })]
+    }), button.hasInjectedWallet && jsxRuntime.jsx("span", {
+      className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--flex w3a--w-auto -w3a--translate-y-1/2 w3a--items-center w3a--rounded-md w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 \n        dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
+      children: t("modal.external.installed")
+    }), jsxRuntime.jsx("img", {
+      id: "injected-wallet-arrow",
+      className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+      src: utils.getIcons(isDark ? "chevron-right-light" : "chevron-right-dark"),
+      alt: "arrow"
+    })]
+  });
+}
+
+module.exports = ButtonWallet;

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

@@ -0,0 +1,208 @@
+'use strict';
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var jsxRuntime = require('react/jsx-runtime');
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var constants = require('../../constants.js');
+var RootContext = require('../../context/RootContext.js');
+var ConnectWalletChainFilter = require('./ConnectWalletChainFilter/ConnectWalletChainFilter.js');
+var ConnectWalletHeader = require('./ConnectWalletHeader/ConnectWalletHeader.js');
+var ConnectWalletList = require('./ConnectWalletList/ConnectWalletList.js');
+var ConnectWalletQrCode = require('./ConnectWalletQrCode/ConnectWalletQrCode.js');
+var ConnectWalletSearch = require('./ConnectWalletSearch/ConnectWalletSearch.js');
+
+function ConnectWallet(props) {
+  var _selectedButton$walle;
+  const {
+    isDark,
+    config,
+    walletConnectUri,
+    metamaskConnectUri,
+    walletRegistry,
+    allExternalButtons,
+    customConnectorButtons,
+    connectorVisibilityMap,
+    deviceDetails,
+    buttonRadius = "pill",
+    chainNamespace,
+    onBackClick,
+    handleExternalWalletClick,
+    handleWalletDetailsHeight
+  } = props;
+  const {
+    bodyState,
+    setBodyState
+  } = react.useContext(RootContext.RootContext);
+  const [currentPage, setCurrentPage] = react.useState(constants.CONNECT_WALLET_PAGES.CONNECT_WALLET);
+  const [selectedWallet, setSelectedWallet] = react.useState(false);
+  const [isLoading] = react.useState(false);
+  const [selectedButton, setSelectedButton] = react.useState(null);
+  const [walletSearch, setWalletSearch] = react.useState("");
+  const [selectedChain, setSelectedChain] = react.useState("all");
+  const [isShowAllWallets, setIsShowAllWallets] = react.useState(false);
+  const handleBack = () => {
+    if (!selectedWallet && currentPage === constants.CONNECT_WALLET_PAGES.CONNECT_WALLET && onBackClick) {
+      onBackClick(false);
+      return;
+    }
+    if (selectedWallet) {
+      setCurrentPage(constants.CONNECT_WALLET_PAGES.CONNECT_WALLET);
+      setSelectedWallet(false);
+      handleWalletDetailsHeight();
+    }
+  };
+  const walletDiscoverySupported = react.useMemo(() => {
+    const supported = walletRegistry && Object.keys(walletRegistry.default || {}).length > 0 && Object.keys(walletRegistry.others || {}).length > 0;
+    return supported;
+  }, [walletRegistry]);
+  const allUniqueButtons = react.useMemo(() => {
+    const uniqueButtonSet = new Set();
+    return customConnectorButtons.concat(allExternalButtons).filter(button => {
+      if (uniqueButtonSet.has(button.name)) return false;
+      uniqueButtonSet.add(button.name);
+      return true;
+    });
+  }, [allExternalButtons, customConnectorButtons]);
+  const defaultButtonKeys = react.useMemo(() => new Set(Object.keys(walletRegistry.default)), [walletRegistry]);
+  const defaultButtons = react.useMemo(() => {
+    // display order: default injected buttons > custom adapter buttons > default non-injected buttons
+    const buttons = [...allExternalButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customConnectorButtons, ...allExternalButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))].sort((a, _) => a.name === noModal.WALLET_CONNECTORS.METAMASK ? -1 : 1);
+    const buttonSet = new Set();
+    return buttons.filter(button => {
+      if (buttonSet.has(button.name)) return false;
+      buttonSet.add(button.name);
+      return true;
+    }).filter(button => {
+      var _button$chainNamespac;
+      return selectedChain === "all" || ((_button$chainNamespac = button.chainNamespaces) === null || _button$chainNamespac === void 0 ? void 0 : _button$chainNamespac.includes(selectedChain));
+    });
+  }, [allExternalButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);
+  const installedWalletButtons = react.useMemo(() => {
+    const visibilityMap = connectorVisibilityMap;
+    return Object.keys(config).reduce((acc, localConnector) => {
+      if (localConnector !== noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2 && visibilityMap[localConnector]) {
+        acc.push({
+          name: localConnector,
+          displayName: config[localConnector].label || localConnector,
+          hasInjectedWallet: config[localConnector].isInjected,
+          hasWalletConnect: false,
+          hasInstallLinks: false
+        });
+      }
+      return acc;
+    }, []);
+  }, [connectorVisibilityMap, config]);
+  const handleWalletSearch = e => {
+    const searchValue = e.target.value;
+    setWalletSearch(searchValue);
+  };
+  const handleChainFilterChange = chain => {
+    setSelectedChain(chain);
+    setIsShowAllWallets(false);
+  };
+  const filteredButtons = react.useMemo(() => {
+    if (walletDiscoverySupported) {
+      return [...allUniqueButtons.filter(button => button.hasInjectedWallet), ...allUniqueButtons.filter(button => !button.hasInjectedWallet)].sort((a, _) => a.name === noModal.WALLET_CONNECTORS.METAMASK ? -1 : 1).filter(button => selectedChain === "all" || button.chainNamespaces.includes(selectedChain)).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
+    }
+    return installedWalletButtons;
+  }, [walletDiscoverySupported, installedWalletButtons, walletSearch, allUniqueButtons, selectedChain]);
+  const externalButtons = react.useMemo(() => {
+    if (walletDiscoverySupported && !walletSearch && !isShowAllWallets) {
+      return defaultButtons;
+    }
+    return filteredButtons;
+  }, [walletDiscoverySupported, walletSearch, filteredButtons, defaultButtons, isShowAllWallets]);
+  const totalExternalWalletsCount = react.useMemo(() => filteredButtons.length, [filteredButtons]);
+  const initialWalletCount = react.useMemo(() => {
+    if (isShowAllWallets) return totalExternalWalletsCount;
+    return walletDiscoverySupported ? defaultButtons.length : installedWalletButtons.length;
+  }, [walletDiscoverySupported, defaultButtons, installedWalletButtons, isShowAllWallets, totalExternalWalletsCount]);
+  const handleWalletClick = button => {
+    var _button$chainNamespac2, _button$chainNamespac3;
+    // show chain namespace selector if the button is an injected connector with multiple chain namespaces
+    const isChainNamespaceSelectorRequired = button.hasInjectedWallet && ((_button$chainNamespac2 = button.chainNamespaces) === null || _button$chainNamespac2 === void 0 ? void 0 : _button$chainNamespac2.length) > 1;
+    if (isChainNamespaceSelectorRequired) {
+      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        multiChainSelector: {
+          show: true,
+          wallet: button
+        }
+      }));
+      return;
+    }
+    const isInjectedConnectorAndSingleChainNamespace = button.hasInjectedWallet && ((_button$chainNamespac3 = button.chainNamespaces) === null || _button$chainNamespac3 === void 0 ? void 0 : _button$chainNamespac3.length) === 1;
+    // if doesn't have wallet connect & doesn't have install links, must be a custom connector
+    const isCustomConnector = !button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks;
+    if (isInjectedConnectorAndSingleChainNamespace || isCustomConnector) {
+      return handleExternalWalletClick({
+        connector: button.name
+      });
+    }
+    if (button.hasWalletConnect || !isInjectedConnectorAndSingleChainNamespace) {
+      setSelectedButton(button);
+      setSelectedWallet(true);
+      setCurrentPage(constants.CONNECT_WALLET_PAGES.SELECTED_WALLET);
+      handleWalletDetailsHeight();
+    } else {
+      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        installLinks: {
+          show: true,
+          wallet: button
+        }
+      }));
+    }
+  };
+  const handleMoreWallets = () => {
+    setIsShowAllWallets(true);
+  };
+  const qrCodeValue = react.useMemo(() => {
+    if (!selectedWallet) return null;
+    if (selectedButton.name === noModal.WALLET_CONNECTORS.METAMASK && !selectedButton.hasInjectedWallet) {
+      return metamaskConnectUri;
+    }
+    return walletConnectUri;
+  }, [metamaskConnectUri, selectedButton, selectedWallet, walletConnectUri]);
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
+    children: [jsxRuntime.jsx(ConnectWalletHeader, {
+      onBackClick: handleBack,
+      currentPage: currentPage,
+      selectedButton: selectedButton
+    }), selectedWallet ? jsxRuntime.jsx(ConnectWalletQrCode, {
+      qrCodeValue: qrCodeValue,
+      isDark: isDark,
+      selectedButton: selectedButton,
+      primaryColor: (_selectedButton$walle = selectedButton.walletRegistryItem) === null || _selectedButton$walle === void 0 ? void 0 : _selectedButton$walle.primaryColor,
+      logoImage: `https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`
+    }) : jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--flex-col w3a--gap-y-2",
+      children: [jsxRuntime.jsx(ConnectWalletChainFilter, {
+        isDark: isDark,
+        isLoading: isLoading,
+        selectedChain: selectedChain,
+        setSelectedChain: handleChainFilterChange,
+        chainNamespace: chainNamespace
+      }), jsxRuntime.jsx(ConnectWalletSearch, {
+        totalExternalWalletCount: totalExternalWalletsCount,
+        isLoading: isLoading,
+        walletSearch: walletSearch,
+        handleWalletSearch: handleWalletSearch,
+        buttonRadius: buttonRadius
+      }), jsxRuntime.jsx(ConnectWalletList, {
+        externalButtons: externalButtons,
+        isLoading: isLoading,
+        totalExternalWalletsCount: totalExternalWalletsCount,
+        initialWalletCount: initialWalletCount,
+        handleWalletClick: handleWalletClick,
+        handleMoreWallets: handleMoreWallets,
+        isDark: isDark,
+        deviceDetails: deviceDetails,
+        walletConnectUri: walletConnectUri,
+        buttonRadius: buttonRadius
+      })]
+    })]
+  });
+}
+
+module.exports = ConnectWallet;

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

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var localeImport = require('../../../localeImport.js');
+var utils = require('../../../utils.js');
+
+function ConnectWalletChainFilter(props) {
+  const {
+    isDark,
+    isLoading,
+    selectedChain,
+    setSelectedChain,
+    chainNamespace
+  } = props;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const chains = react.useMemo(() => {
+    const chains = [{
+      id: "all",
+      name: "modal.allChains",
+      icon: ""
+    }];
+    for (const chain of chainNamespace) {
+      chains.push({
+        id: chain,
+        name: chain === "eip155" ? "EVM" : chain,
+        icon: chain === "eip155" ? "ethereum" : chain
+      });
+    }
+    return chains;
+  }, [chainNamespace]);
+  if (isLoading) {
+    return jsxRuntime.jsx("div", {
+      className: "w3a--flex w3a--items-center w3a--justify-between w3a--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"
+      }, `chain-loader-${index}`))
+    });
+  }
+  return jsxRuntime.jsx("div", {
+    className: "w3a--flex w3a--items-center w3a--justify-items-start w3a--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
+      }),
+      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"
+      }), jsxRuntime.jsx("span", {
+        className: "first-letter:w3a--capitalize",
+        children: t(chain.name)
+      })]
+    }, chain.id))
+  });
+}
+
+module.exports = ConnectWalletChainFilter;

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

@@ -2,23 +2,20 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
-var localeImport = require('../../localeImport.js');
-var Button = require('../Button/Button.js');
-var Image = require('../Image.js');
-var ExternalWalletHeader = require('./ExternalWalletHeader.js');
+var localeImport = require('../../../localeImport.js');
+var utils = require('../../../utils.js');
+var Image = require('../../Image/Image.js');
 
-function ExternalWalletChainNamespace(props) {
+const ConnectWalletChainNamespaceSelect = props => {
   const {
-    button,
-    goBack,
-    closeModal,
+    isDark,
+    wallet,
     handleExternalWalletClick
   } = props;
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
   });
-  // chainNames should be available when selecting a chain namespace
-  const chainNamespaces = button.chainNamespaces.map(chainNamespace => {
+  const chainNamespaces = wallet.chainNamespaces.map(chainNamespace => {
     const imageId = chainNamespace === "eip155" ? "evm" : chainNamespace;
     const displayName = chainNamespace === "eip155" ? "EVM" : chainNamespace;
     return {
@@ -28,25 +25,27 @@ function ExternalWalletChainNamespace(props) {
     };
   });
   return jsxRuntime.jsxs("div", {
-    children: [jsxRuntime.jsx(ExternalWalletHeader, {
-      title: `${t("modal.external.select-chain")}`,
-      goBack: goBack,
-      closeModal: closeModal
+    children: [jsxRuntime.jsx("div", {
+      className: "w3a--flex w3a--items-center w3a--justify-center",
+      children: jsxRuntime.jsx("p", {
+        className: "w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+        children: t("modal.external.select-chain")
+      })
     }), jsxRuntime.jsx("div", {
-      className: "w3a--flex w3a--justify-center w3a--my-6",
+      className: "w3a--my-6 w3a--flex w3a--justify-center",
       children: jsxRuntime.jsx(Image, {
-        imageId: `login-${button.name}`,
-        hoverImageId: `login-${button.name}`,
+        imageId: `login-${wallet.name}`,
+        hoverImageId: `login-${wallet.name}`,
         fallbackImageId: "wallet",
         height: "100",
         width: "100",
         isButton: true,
-        extension: button.imgExtension
+        extension: wallet.imgExtension
       })
     }), jsxRuntime.jsx("p", {
-      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 w3a--my-6",
+      className: "w3a--my-6 w3a--text-center w3a--text-sm w3a--text-app-gray-500",
       children: t("modal.external.select-chain-description", {
-        wallet: button.displayName
+        wallet: wallet.displayName
       })
     }), jsxRuntime.jsx("ul", {
       className: "w3a--flex w3a--flex-col w3a--gap-3",
@@ -55,15 +54,13 @@ function ExternalWalletChainNamespace(props) {
         displayName,
         imageId
       }) => jsxRuntime.jsx("li", {
-        children: jsxRuntime.jsxs(Button, {
-          variant: "tertiary",
+        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",
           onClick: () => handleExternalWalletClick({
-            connector: button.name,
+            connector: wallet.name,
             chainNamespace
           }),
-          className: "w3a--w-full w3a--size-xl !w3a--justify-between w3a--items-center wallet-btn",
-          title: displayName,
           children: [jsxRuntime.jsxs("div", {
             className: "w3a--flex w3a--items-center",
             children: [jsxRuntime.jsx(Image, {
@@ -78,14 +75,16 @@ function ExternalWalletChainNamespace(props) {
               className: "w3a--ml-2 w3a--text-left w3a--text-sm first-letter:w3a--capitalize",
               children: displayName
             })]
-          }), jsxRuntime.jsx("span", {
-            className: "w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800",
-            children: t("modal.external.installed")
+          }), 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",
+            src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+            alt: "arrow"
           })]
         })
       }, chainNamespace))
     })]
   });
-}
+};
 
-module.exports = ExternalWalletChainNamespace;
+module.exports = ConnectWalletChainNamespaceSelect;

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var constants = require('../../../constants.js');
+var localeImport = require('../../../localeImport.js');
+
+function ConnectWalletHeader(props) {
+  const {
+    onBackClick,
+    currentPage,
+    selectedButton
+  } = props;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const handleBack = () => {
+    if (onBackClick) {
+      onBackClick();
+    }
+  };
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--items-center w3a--justify-between",
+    children: [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",
+      onClick: handleBack,
+      children: jsxRuntime.jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 20 20",
+        className: "w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white",
+        children: jsxRuntime.jsx("path", {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M9.707 16.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l4.293 4.293a1 1 0 0 1 0 1.414",
+          clipRule: "evenodd"
+        })
+      })
+    }), 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
+    }), jsxRuntime.jsx("div", {
+      className: "w3a--z-[-1] w3a--size-5"
+    })]
+  });
+}
+
+module.exports = ConnectWalletHeader;