Merge pull request #2312 from Web3Auth/feat/defi-positions

Fix external wallets list to automatically show other wallets when total count of wallets is 15 or below

Author: BboyStatix

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}
           />
         </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,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 (
     <>
       <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,
+          "w3a--h-[328px]": !showMoreWalletsButton,
         })}
       >
         {externalButtons.length === 0 ? (
@@ -143,7 +142,7 @@ function ConnectWalletList(props: ConnectWalletListProps) {
           />
         )}
       </ul>
-      {showMoreWallets && 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<