diff --git a/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx b/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx index b0181e7f9..ee21a8c51 100644 --- a/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx +++ b/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx @@ -1,5 +1,5 @@ import { ANALYTICS_EVENTS, type ChainNamespaceType, log, type WALLET_CONNECTOR_TYPE, WALLET_CONNECTORS } from "@web3auth/no-modal"; -import { FormEvent, useContext, useMemo, useState } from "react"; +import { FormEvent, useContext, useEffect, useMemo, useState } from "react"; import { CONNECT_WALLET_PAGES } from "../../constants"; import { AnalyticsContext } from "../../context/AnalyticsContext"; @@ -126,7 +126,6 @@ function ConnectWallet(props: ConnectWalletProps) { const handleChainFilterChange = (chain: string) => { setSelectedChain(chain); - setIsShowAllWallets(false); }; const filteredButtons = useMemo(() => { @@ -153,6 +152,16 @@ function ConnectWallet(props: ConnectWalletProps) { return walletDiscoverySupported ? defaultButtons.length : installedWalletButtons.length; }, [walletDiscoverySupported, defaultButtons, installedWalletButtons, isShowAllWallets, totalExternalWalletsCount]); + // Automatically show all wallets if there are less than or equal to 15 wallets + // also resets everytime we search causing no. of wallets to change or select different chain + useEffect(() => { + if (walletDiscoverySupported && totalExternalWalletsCount <= 15) { + setIsShowAllWallets(true); + } else { + setIsShowAllWallets(false); + } + }, [walletDiscoverySupported, selectedChain, totalExternalWalletsCount]); + /** * Wallet click logic * - For installed wallets @@ -289,6 +298,7 @@ function ConnectWallet(props: ConnectWalletProps) { deviceDetails={deviceDetails} walletConnectUri={walletConnectUri} buttonRadius={buttonRadius} + isShowAllWallets={isShowAllWallets} /> )} diff --git a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletList/ConnectWalletList.tsx b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletList/ConnectWalletList.tsx index 5ca52ca34..0252d5d6d 100644 --- a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletList/ConnectWalletList.tsx +++ b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletList/ConnectWalletList.tsx @@ -1,4 +1,3 @@ -import { useState } from "react"; import { useTranslation } from "react-i18next"; import i18n from "../../../localeImport"; @@ -114,20 +113,20 @@ function ConnectWalletList(props: ConnectWalletListProps) { deviceDetails, walletConnectUri, buttonRadius, + isShowAllWallets, } = props; - const [showMoreWallets, setShowMoreWallets] = useState(true); - const onShowMoreWalletsClick = () => { - setShowMoreWallets(false); handleMoreWallets(); }; + const showMoreWalletsButton = !isShowAllWallets; + return ( <>