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

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

@@ -0,0 +1,74 @@
+import cn from 'classnames';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ThemedContext } from '../../../context/ThemeContext.js';
+import i18nInstance from '../../../localeImport.js';
+import { formatIOSMobile, getIcons } 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 isDark = useContext(ThemedContext);
+  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--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: [/*#__PURE__*/jsxs("div", {
+      className: "w3a--flex w3a--items-center w3a--gap-x-2",
+      children: [/*#__PURE__*/jsx("figure", {
+        className: "w3a--size-5",
+        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--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 && /*#__PURE__*/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  dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
+      children: t("modal.external.installed")
+    }), /*#__PURE__*/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 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+      src: getIcons(isDark ? "chevron-right-light" : "chevron-right-dark"),
+      alt: "arrow"
+    })]
+  });
+}
+
+export { ButtonWallet as default };

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

@@ -0,0 +1,206 @@
+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,
+    metamaskConnectUri,
+    walletRegistry,
+    allExternalButtons,
+    customConnectorButtons,
+    connectorVisibilityMap,
+    deviceDetails,
+    buttonRadius = "pill",
+    chainNamespace,
+    onBackClick,
+    handleExternalWalletClick,
+    handleWalletDetailsHeight
+  } = props;
+  const {
+    bodyState,
+    setBodyState
+  } = 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 customConnectorButtons.concat(allExternalButtons).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))].sort((a, _) => a.name === 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 = useMemo(() => {
+    const visibilityMap = connectorVisibilityMap;
+    return Object.keys(config).reduce((acc, localConnector) => {
+      if (localConnector !== 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 = useMemo(() => {
+    if (walletDiscoverySupported) {
+      return [...allUniqueButtons.filter(button => button.hasInjectedWallet), ...allUniqueButtons.filter(button => !button.hasInjectedWallet)].sort((a, _) => a.name === 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 = 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), {}, {
+        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(CONNECT_WALLET_PAGES.SELECTED_WALLET);
+      handleWalletDetailsHeight();
+    } else {
+      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        installLinks: {
+          show: true,
+          wallet: button
+        }
+      }));
+    }
+  };
+  const handleMoreWallets = () => {
+    setIsShowAllWallets(true);
+  };
+  const qrCodeValue = useMemo(() => {
+    if (!selectedWallet) return null;
+    if (selectedButton.name === WALLET_CONNECTORS.METAMASK && !selectedButton.hasInjectedWallet) {
+      return metamaskConnectUri;
+    }
+    return walletConnectUri;
+  }, [metamaskConnectUri, selectedButton, selectedWallet, walletConnectUri]);
+  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, {
+      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}`
+    }) : /*#__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-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
+      }),
+      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--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: [/*#__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: "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",
+            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-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover: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 };

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

@@ -0,0 +1,146 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+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() {
+  const [t] = useTranslation(undefined, {
+    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",
+    children: t("modal.external.no-wallets-found")
+  });
+}
+function WalletsFound(props) {
+  const {
+    externalButtons,
+    isLoading,
+    handleWalletClick,
+    deviceDetails,
+    walletConnectUri,
+    buttonRadius
+  } = props;
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "w3a--flex w3a--flex-col w3a--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"
+        })
+      }, `loader-${index}`))
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: "w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5",
+    children: externalButtons.map(button => /*#__PURE__*/jsx(Button, {
+      type: BUTTON_TYPE.WALLET,
+      props: {
+        label: button.displayName,
+        onClick: () => handleWalletClick(button),
+        button,
+        deviceDetails,
+        walletConnectUri,
+        buttonRadius
+      }
+    }, button.name))
+  });
+}
+function MoreWalletsButton(props) {
+  const {
+    totalExternalWalletsCount,
+    initialWalletCount,
+    handleMoreWallets,
+    isLoading,
+    isDark,
+    buttonRadius
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const onMoreWalletsClick = () => {
+    if (handleMoreWallets) {
+      handleMoreWallets();
+    }
+  };
+  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"
+      })
+    });
+  }
+  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"
+    }),
+    onClick: onMoreWalletsClick,
+    children: [/*#__PURE__*/jsx("img", {
+      src: getIcons(isDark ? "view-dark" : "view-light"),
+      alt: "view",
+      height: "24",
+      width: "24"
+    }), /*#__PURE__*/jsx("p", {
+      className: "w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--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",
+      children: totalExternalWalletsCount - initialWalletCount
+    })]
+  });
+}
+function ConnectWalletList(props) {
+  const {
+    externalButtons,
+    isLoading,
+    totalExternalWalletsCount,
+    initialWalletCount,
+    handleWalletClick,
+    handleMoreWallets,
+    isDark,
+    deviceDetails,
+    walletConnectUri,
+    buttonRadius
+  } = props;
+  const [showMoreWallets, setShowMoreWallets] = useState(true);
+  const onShowMoreWalletsClick = () => {
+    setShowMoreWallets(false);
+    handleMoreWallets();
+  };
+  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]": !showMoreWallets
+      }),
+      children: externalButtons.length === 0 ? /*#__PURE__*/jsx(NoWalletsFound, {}) : /*#__PURE__*/jsx(WalletsFound, {
+        externalButtons: externalButtons,
+        isLoading: isLoading,
+        handleWalletClick: handleWalletClick,
+        deviceDetails: deviceDetails,
+        walletConnectUri: walletConnectUri,
+        buttonRadius: buttonRadius
+      })
+    }), showMoreWallets && totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && /*#__PURE__*/jsx(MoreWalletsButton, {
+      totalExternalWalletsCount: totalExternalWalletsCount,
+      initialWalletCount: initialWalletCount,
+      handleMoreWallets: onShowMoreWalletsClick,
+      isLoading: isLoading,
+      isDark: isDark,
+      buttonRadius: buttonRadius
+    })]
+  });
+}
+
+export { ConnectWalletList as default };