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

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

@@ -1,32 +1,56 @@
-import './styles.css.js';
-import { memo } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { BUTTON_TYPE } from './Button.type.js';
+import SocialLoginButton from './ButtonSocial/ButtonSocial.js';
+import ButtonWallet from './ButtonWallet/ButtonWallet.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 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 /*#__PURE__*/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 /*#__PURE__*/jsxs(Fragment, {
+    children: [type === BUTTON_TYPE.SOCIAL && /*#__PURE__*/jsx(SocialLoginButton, {
+      text: text,
+      showIcon: showIcon,
+      showText: showText,
+      method: method,
+      isDark: isDark,
+      isPrimaryBtn: isPrimaryBtn,
+      onClick: onClick,
+      btnStyle: btnStyle,
+      buttonRadius: buttonRadius,
+      children: children
+    }), type === BUTTON_TYPE.WALLET && /*#__PURE__*/jsx(ButtonWallet, {
+      label: label,
+      walletConnectUri: walletConnectUri,
+      onClick: walletOnClick,
+      button: button,
+      deviceDetails: deviceDetails,
+      buttonRadius: walletButtonRadius
+    })]
   });
 }
-var Button$1 = /*#__PURE__*/memo(Button);
 
-export { Button$1 as default };
+export { Button as default };

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

@@ -0,0 +1,6 @@
+const BUTTON_TYPE = {
+  SOCIAL: "social",
+  WALLET: "wallet"
+};
+
+export { BUTTON_TYPE };

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

@@ -0,0 +1,51 @@
+import { AUTH_CONNECTION } from '@web3auth/auth';
+import { cn } from '../../../utils.js';
+import Image from '../../Image/Image.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function getProviderIcon(method, isDark, isPrimaryBtn) {
+  const imageId = method === AUTH_CONNECTION.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+  const hoverId = method === AUTH_CONNECTION.APPLE || method === AUTH_CONNECTION.GITHUB || method === AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
+  if (isPrimaryBtn) {
+    return /*#__PURE__*/jsx(Image, {
+      width: "20",
+      imageId: hoverId,
+      hoverImageId: hoverId,
+      isButton: true
+    });
+  }
+  return /*#__PURE__*/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 /*#__PURE__*/jsxs("button", {
+    type: "button",
+    onClick: e => onClick && onClick(e),
+    className: cn("w3a--btn", btnStyle, {
+      "w3a--rounded-full": buttonRadius === "pill",
+      "w3a--rounded-lg": buttonRadius === "rounded",
+      "w3a--rounded-none": buttonRadius === "square"
+    }),
+    children: [showIcon && getProviderIcon(method, isDark, isPrimaryBtn), showText && /*#__PURE__*/jsx("p", {
+      className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
+      children: text
+    }), children]
+  });
+}
+
+export { SocialLoginButton as default };

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

@@ -0,0 +1,66 @@
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../../localeImport.js';
+import { formatIOSMobile } from '../../../utils.js';
+import Image from '../../Image/Image.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ButtonWallet(props) {
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const {
+    deviceDetails,
+    button,
+    walletConnectUri,
+    onClick,
+    label,
+    buttonRadius
+  } = props;
+  const isLink = useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.hasInjectedWallet, [deviceDetails, button]);
+  const href = useMemo(() => button.href ? formatIOSMobile({
+    uri: walletConnectUri,
+    link: button.href
+  }) : walletConnectUri, [button, walletConnectUri]);
+  const handleBtnClick = () => {
+    if (href && isLink) {
+      window.open(href, "_blank");
+    } else if (onClick) {
+      onClick();
+    }
+  };
+  return /*#__PURE__*/jsxs("button", {
+    type: "button",
+    className: cn(`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`, {
+      "w3a--rounded-full": buttonRadius === "pill",
+      "w3a--rounded-lg": buttonRadius === "rounded",
+      "w3a--rounded-none": buttonRadius === "square"
+    }),
+    onClick: handleBtnClick,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "w3a--flex w3a--items-center w3a--gap-x-2",
+      children: [/*#__PURE__*/jsx("figure", {
+        className: button.icon ? "w3a--size-5" : "w3a--size-5 w3a--rounded-full w3a--bg-app-gray-300",
+        children: /*#__PURE__*/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"
+        })
+      }), /*#__PURE__*/jsx("p", {
+        className: "w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+        children: label
+      })]
+    }), button.hasInjectedWallet && /*#__PURE__*/jsx("span", {
+      className: "w3a--inline-flex 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  dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
+      children: t("modal.external.installed")
+    })]
+  });
+}
+
+export { ButtonWallet as default };

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

@@ -0,0 +1,200 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { WALLET_CONNECTORS } from '@web3auth/no-modal';
+import { useContext, useState, useMemo } from 'react';
+import { CONNECT_WALLET_PAGES } from '../../constants.js';
+import { RootContext } from '../../context/RootContext.js';
+import ConnectWalletChainFilter from './ConnectWalletChainFilter/ConnectWalletChainFilter.js';
+import ConnectWalletHeader from './ConnectWalletHeader/ConnectWalletHeader.js';
+import ConnectWalletList from './ConnectWalletList/ConnectWalletList.js';
+import ConnectWalletQrCode from './ConnectWalletQrCode/ConnectWalletQrCode.js';
+import ConnectWalletSearch from './ConnectWalletSearch/ConnectWalletSearch.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ConnectWallet(props) {
+  var _selectedButton$walle;
+  const {
+    isDark,
+    config,
+    walletConnectUri,
+    walletRegistry,
+    allExternalButtons,
+    customConnectorButtons,
+    connectorVisibilityMap,
+    deviceDetails,
+    buttonRadius = "pill",
+    chainNamespace,
+    onBackClick,
+    handleExternalWalletClick,
+    handleWalletDetailsHeight
+  } = props;
+  const {
+    bodyState,
+    setBodyState,
+    toast,
+    setToast
+  } = useContext(RootContext);
+  const [currentPage, setCurrentPage] = useState(CONNECT_WALLET_PAGES.CONNECT_WALLET);
+  const [selectedWallet, setSelectedWallet] = useState(false);
+  const [isLoading] = useState(false);
+  const [selectedButton, setSelectedButton] = useState(null);
+  const [walletSearch, setWalletSearch] = useState("");
+  const [selectedChain, setSelectedChain] = useState("all");
+  const [isShowAllWallets, setIsShowAllWallets] = useState(false);
+  const handleBack = () => {
+    if (!selectedWallet && currentPage === CONNECT_WALLET_PAGES.CONNECT_WALLET && onBackClick) {
+      onBackClick(false);
+      return;
+    }
+    if (selectedWallet) {
+      setCurrentPage(CONNECT_WALLET_PAGES.CONNECT_WALLET);
+      setSelectedWallet(false);
+      handleWalletDetailsHeight();
+    }
+  };
+  const walletDiscoverySupported = useMemo(() => {
+    const supported = walletRegistry && Object.keys(walletRegistry.default || {}).length > 0 && Object.keys(walletRegistry.others || {}).length > 0;
+    return supported;
+  }, [walletRegistry]);
+  const allUniqueButtons = useMemo(() => {
+    const uniqueButtonSet = new Set();
+    return allExternalButtons.concat(customConnectorButtons).filter(button => {
+      if (uniqueButtonSet.has(button.name)) return false;
+      uniqueButtonSet.add(button.name);
+      return true;
+    });
+  }, [allExternalButtons, customConnectorButtons]);
+  const defaultButtonKeys = useMemo(() => new Set(Object.keys(walletRegistry.default)), [walletRegistry]);
+  const defaultButtons = 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))];
+    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 = useMemo(() => {
+    const visibilityMap = connectorVisibilityMap;
+    return Object.keys(config).reduce((acc, adapter) => {
+      if (![WALLET_CONNECTORS.WALLET_CONNECT_V2].includes(adapter) && visibilityMap[adapter]) {
+        acc.push({
+          name: adapter,
+          displayName: config[adapter].label || adapter,
+          hasInjectedWallet: config[adapter].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 = useMemo(() => {
+    if (walletDiscoverySupported) {
+      return allUniqueButtons.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 = useMemo(() => {
+    if (walletDiscoverySupported && !walletSearch && !isShowAllWallets) {
+      return defaultButtons;
+    }
+    return filteredButtons;
+  }, [walletDiscoverySupported, walletSearch, filteredButtons, defaultButtons, isShowAllWallets]);
+  const totalExternalWalletsCount = useMemo(() => filteredButtons.length, [filteredButtons]);
+  const initialWalletCount = 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), {}, {
+        showMultiChainSelector: true,
+        walletDetails: 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(CONNECT_WALLET_PAGES.SELECTED_WALLET);
+      handleWalletDetailsHeight();
+    } else {
+      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        showWalletDetails: true,
+        walletDetails: button
+      }));
+    }
+  };
+  const handleMoreWallets = () => {
+    setIsShowAllWallets(true);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
+    children: [/*#__PURE__*/jsx(ConnectWalletHeader, {
+      onBackClick: handleBack,
+      currentPage: currentPage,
+      selectedButton: selectedButton
+    }), selectedWallet ? /*#__PURE__*/jsx(ConnectWalletQrCode, {
+      toast: toast,
+      setToast: setToast,
+      walletConnectUri: walletConnectUri,
+      isDark: isDark,
+      selectedButton: selectedButton,
+      bodyState: bodyState,
+      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}`,
+      setBodyState: setBodyState
+    }) : /*#__PURE__*/jsxs("div", {
+      className: "w3a--flex w3a--flex-col w3a--gap-y-2",
+      children: [/*#__PURE__*/jsx(ConnectWalletChainFilter, {
+        isDark: isDark,
+        isLoading: isLoading,
+        selectedChain: selectedChain,
+        setSelectedChain: handleChainFilterChange,
+        chainNamespace: chainNamespace
+      }), /*#__PURE__*/jsx(ConnectWalletSearch, {
+        totalExternalWalletCount: totalExternalWalletsCount,
+        isLoading: isLoading,
+        walletSearch: walletSearch,
+        handleWalletSearch: handleWalletSearch,
+        buttonRadius: buttonRadius
+      }), /*#__PURE__*/jsx(ConnectWalletList, {
+        externalButtons: externalButtons,
+        isLoading: isLoading,
+        totalExternalWalletsCount: totalExternalWalletsCount,
+        initialWalletCount: initialWalletCount,
+        handleWalletClick: handleWalletClick,
+        handleMoreWallets: handleMoreWallets,
+        isDark: isDark,
+        deviceDetails: deviceDetails,
+        walletConnectUri: walletConnectUri,
+        buttonRadius: buttonRadius
+      })]
+    })]
+  });
+}
+
+export { ConnectWallet as default };

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

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../../localeImport.js';
+import { cn, getIcons } from '../../../utils.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ConnectWalletChainFilter(props) {
+  const {
+    isDark,
+    isLoading,
+    selectedChain,
+    setSelectedChain,
+    chainNamespace
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const chains = 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 /*#__PURE__*/jsx("div", {
+      className: "w3a--flex w3a--items-center w3a--justify-between w3a--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"
+      }, `chain-loader-${index}`))
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: "w3a--flex w3a--items-center w3a--justify-items-start w3a--gap-x-2",
+    children: chains.map(chain => /*#__PURE__*/jsxs("button", {
+      type: "button",
+      className: cn("w3a--flex 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--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white": 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"
+      }), /*#__PURE__*/jsx("span", {
+        className: "first-letter:w3a--capitalize",
+        children: t(chain.name)
+      })]
+    }, chain.id))
+  });
+}
+
+export { ConnectWalletChainFilter as default };

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

@@ -1,23 +1,19 @@
 import { useTranslation } from 'react-i18next';
-import i18nInstance from '../../localeImport.js';
-import Button from '../Button/Button.js';
-import Image from '../Image.js';
-import ExternalWalletHeader from './ExternalWalletHeader.js';
+import i18nInstance from '../../../localeImport.js';
+import { getIcons } from '../../../utils.js';
+import Image from '../../Image/Image.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function ExternalWalletChainNamespace(props) {
+const ConnectWalletChainNamespaceSelect = props => {
   const {
-    button,
-    goBack,
-    closeModal,
+    isDark,
+    wallet,
     handleExternalWalletClick
   } = props;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
   });
-
-  // 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 {
@@ -27,25 +23,27 @@ function ExternalWalletChainNamespace(props) {
     };
   });
   return /*#__PURE__*/jsxs("div", {
-    children: [/*#__PURE__*/jsx(ExternalWalletHeader, {
-      title: `${t("modal.external.select-chain")}`,
-      goBack: goBack,
-      closeModal: closeModal
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w3a--flex w3a--items-center w3a--justify-center",
+      children: /*#__PURE__*/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")
+      })
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--flex w3a--justify-center w3a--my-6",
+      className: "w3a--my-6 w3a--flex w3a--justify-center",
       children: /*#__PURE__*/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
       })
     }), /*#__PURE__*/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
       })
     }), /*#__PURE__*/jsx("ul", {
       className: "w3a--flex w3a--flex-col w3a--gap-3",
@@ -54,15 +52,13 @@ function ExternalWalletChainNamespace(props) {
         displayName,
         imageId
       }) => /*#__PURE__*/jsx("li", {
-        children: /*#__PURE__*/jsxs(Button, {
-          variant: "tertiary",
+        children: /*#__PURE__*/jsxs("button", {
           type: "button",
+          className: "w3a--btn w3a-external-wallet-btn w3a--h-12 w3a--w-full w3a--items-center !w3a--justify-between 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: [/*#__PURE__*/jsxs("div", {
             className: "w3a--flex w3a--items-center",
             children: [/*#__PURE__*/jsx(Image, {
@@ -77,14 +73,16 @@ function ExternalWalletChainNamespace(props) {
               className: "w3a--ml-2 w3a--text-left w3a--text-sm first-letter:w3a--capitalize",
               children: displayName
             })]
-          }), /*#__PURE__*/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")
+          }), /*#__PURE__*/jsx("img", {
+            id: "external-wallet-arrow",
+            className: "w3a--icon-animation",
+            src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+            alt: "arrow"
           })]
         })
       }, chainNamespace))
     })]
   });
-}
+};
 
-export { ExternalWalletChainNamespace as default };
+export { ConnectWalletChainNamespaceSelect as default };

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

@@ -0,0 +1,47 @@
+import { useTranslation } from 'react-i18next';
+import { CONNECT_WALLET_PAGES } from '../../../constants.js';
+import i18nInstance from '../../../localeImport.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ConnectWalletHeader(props) {
+  const {
+    onBackClick,
+    currentPage,
+    selectedButton
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const handleBack = () => {
+    if (onBackClick) {
+      onBackClick();
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--flex w3a--items-center w3a--justify-between",
+    children: [/*#__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",
+      onClick: handleBack,
+      children: /*#__PURE__*/jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 20 20",
+        className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+        children: /*#__PURE__*/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"
+        })
+      })
+    }), /*#__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
+    }), /*#__PURE__*/jsx("div", {
+      className: "w3a--z-[-1] w3a--size-5"
+    })]
+  });
+}
+
+export { ConnectWalletHeader as default };