automatically show all wallets in main list if total wallets <= 15 and

Author: BboyStatix

packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx

@@ -126,7 +126,6 @@ function ConnectWallet(props: ConnectWalletProps) {
 
   const handleChainFilterChange = (chain: string) => {
     setSelectedChain(chain);
-    setIsShowAllWallets(false);
   };
 
   const filteredButtons = useMemo(() => {
@@ -153,12 +152,14 @@ function ConnectWallet(props: ConnectWalletProps) {
     return walletDiscoverySupported ? defaultButtons.length : installedWalletButtons.length;
   }, [walletDiscoverySupported, defaultButtons, installedWalletButtons, isShowAllWallets, totalExternalWalletsCount]);
 
-  // Automatically show all wallets if there are less than 15 wallets
+  // Automatically show all wallets if there are less than or equal to 15 wallets
   useEffect(() => {
-    if (walletDiscoverySupported && !walletSearch && totalExternalWalletsCount > 0 && totalExternalWalletsCount < 15) {
+    if (walletDiscoverySupported && totalExternalWalletsCount <= 15) {
       setIsShowAllWallets(true);
+    } else {
+      setIsShowAllWallets(false);
     }
-  }, [walletDiscoverySupported, walletSearch, totalExternalWalletsCount]);
+  }, [walletDiscoverySupported, totalExternalWalletsCount]);
 
   /**
    * Wallet click logic
@@ -296,6 +297,7 @@ function ConnectWallet(props: ConnectWalletProps) {
             deviceDetails={deviceDetails}
             walletConnectUri={walletConnectUri}
             buttonRadius={buttonRadius}
+            isShowAllWallets={isShowAllWallets}
           />
         </div>
       )}

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,15 +113,15 @@ function ConnectWalletList(props: ConnectWalletListProps) {
     deviceDetails,
     walletConnectUri,
     buttonRadius,
+    isShowAllWallets,
   } = props;
 
-  const [showMoreWalletsButton, setShowMoreWalletsButton] = useState(true);
-
   const onShowMoreWalletsClick = () => {
-    setShowMoreWalletsButton(false);
     handleMoreWallets();
   };
 
+  const showMoreWalletsButton = !isShowAllWallets;
+
   return (
     <>
       <ul
@@ -143,7 +142,7 @@ function ConnectWalletList(props: ConnectWalletListProps) {
           />
         )}
       </ul>
-      {showMoreWalletsButton && totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && (
+      {showMoreWalletsButton && !isLoading && initialWalletCount < totalExternalWalletsCount && (
         <MoreWalletsButton
           totalExternalWalletsCount={totalExternalWalletsCount}
           initialWalletCount={initialWalletCount}

packages/modal/src/ui/components/ConnectWallet/ConnectWalletList/ConnectWalletList.type.ts

@@ -11,6 +11,7 @@ export interface ConnectWalletListProps {
   buttonRadius: ButtonRadiusType;
   handleWalletClick: (button: ExternalButton) => void;
   handleMoreWallets: () => void;
+  isShowAllWallets: boolean;
 }
 
 export type WalletsFoundProps = Pick<