Merge pull request #2316 from Web3Auth/fix/all-wallets-button-not-showing

Fix threshold for showing all wallets buttons

Author: BboyStatix

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

@@ -19,7 +19,7 @@ function ConnectWallet(props: ConnectWalletProps) {
     walletConnectUri,
     metamaskConnectUri,
     walletRegistry,
-    allExternalButtons,
+    allRegistryButtons,
     customConnectorButtons,
     connectorVisibilityMap,
     deviceDetails,
@@ -62,21 +62,21 @@ function ConnectWallet(props: ConnectWalletProps) {
 
   const allUniqueButtons = useMemo(() => {
     const uniqueButtonSet = new Set();
-    return customConnectorButtons.concat(allExternalButtons).filter((button) => {
+    return customConnectorButtons.concat(allRegistryButtons).filter((button) => {
       if (uniqueButtonSet.has(button.name)) return false;
       uniqueButtonSet.add(button.name);
       return true;
     });
-  }, [allExternalButtons, customConnectorButtons]);
+  }, [allRegistryButtons, 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)),
+      ...allRegistryButtons.filter((button) => button.hasInjectedWallet && defaultButtonKeys.has(button.name)),
       ...customConnectorButtons,
-      ...allExternalButtons.filter((button) => !button.hasInjectedWallet && defaultButtonKeys.has(button.name)),
+      ...allRegistryButtons.filter((button) => !button.hasInjectedWallet && defaultButtonKeys.has(button.name)),
     ].sort((a, b) => {
       // favor MetaMask over other wallets
       if (a.name === WALLET_CONNECTORS.METAMASK && b.name === WALLET_CONNECTORS.METAMASK) {
@@ -101,7 +101,7 @@ function ConnectWallet(props: ConnectWalletProps) {
         return true;
       })
       .filter((button) => selectedChain === "all" || button.chainNamespaces?.includes(selectedChain as ChainNamespaceType));
-  }, [allExternalButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);
+  }, [allRegistryButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);
 
   const installedWalletButtons = useMemo(() => {
     const visibilityMap = connectorVisibilityMap;

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

@@ -8,7 +8,7 @@ export interface ConnectWalletProps {
   walletConnectUri: string | undefined;
   metamaskConnectUri: string | undefined;
   walletRegistry?: WalletRegistry;
-  allExternalButtons: ExternalButton[];
+  allRegistryButtons: ExternalButton[];
   customConnectorButtons: ExternalButton[];
   connectorVisibilityMap: Record<string, boolean>;
   deviceDetails: { platform: platform; browser: browser; os: os };

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

@@ -50,6 +50,7 @@ function Login(props: LoginProps) {
     isDark,
     handleSocialLoginClick,
     totalExternalWallets,
+    remainingUndisplayedWallets,
     isEmailPasswordLessLoginVisible,
     isSmsPasswordLessLoginVisible,
     handleExternalWalletBtnClick,
@@ -509,7 +510,7 @@ function Login(props: LoginProps) {
           ))}
 
         {/* EXTERNAL WALLETS DISCOVERY */}
-        {totalExternalWallets > 3 && (
+        {remainingUndisplayedWallets > 0 && (
           <button
             type="button"
             className={cn("w3a--btn !w3a--justify-between w3a--group w3a--relative w3a--overflow-hidden", {
@@ -520,12 +521,12 @@ function Login(props: LoginProps) {
             onClick={handleConnectWallet}
           >
             <p className="w3a--text-base w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white">{t("modal.external.all-wallets")}</p>
-            {showExternalWalletCount && totalExternalWallets > 0 && (
+            {showExternalWalletCount && (
               <div
                 id="external-wallet-count"
                 className="w3a--absolute w3a--right-4 w3a--top-1/2 w3a--w-auto -w3a--translate-y-1/2 w3a--rounded-full w3a--bg-app-primary-100 w3a--px-2.5 w3a--py-0.5 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 w3a--transition-all w3a--delay-300 w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 group-hover:w3a--delay-0 dark:w3a--border dark:w3a--border-app-primary-500 dark:w3a--bg-transparent dark:w3a--text-app-primary-500"
               >
-                {totalExternalWallets - 1}
+                {remainingUndisplayedWallets}
               </div>
             )}
             <img

packages/modal/src/ui/components/Login/Login.type.ts

@@ -32,6 +32,7 @@ export interface LoginProps {
   isEmailPasswordLessLoginVisible: boolean;
   isSmsPasswordLessLoginVisible: boolean;
   totalExternalWallets: number;
+  remainingUndisplayedWallets: number;
   logoAlignment?: LogoAlignmentType;
   buttonRadius?: ButtonRadiusType;
   deviceDetails: { platform: platform; browser: browser; os: os };

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

@@ -278,7 +278,7 @@ function Root(props: RootProps) {
     [connectorVisibilityMap, chainNamespaces, config, deviceDetails.platform, isWalletConnectConnectorIncluded]
   );
 
-  const allButtons = useMemo(() => {
+  const allRegistryButtons = useMemo(() => {
     return [...generateWalletButtons(walletRegistry.default), ...generateWalletButtons(walletRegistry.others)];
   }, [generateWalletButtons, walletRegistry.default, walletRegistry.others]);
 
@@ -303,7 +303,7 @@ function Root(props: RootProps) {
     const metamaskConnectorIdx = installedConnectors.findIndex((x) => x.name === WALLET_CONNECTORS.METAMASK && !x.hasInjectedWallet);
     if (metamaskConnectorIdx !== -1) {
       const metamaskConnector = installedConnectors[metamaskConnectorIdx];
-      let metamaskRegistryButton = allButtons.find((button) => button.name === WALLET_CONNECTORS.METAMASK);
+      let metamaskRegistryButton = allRegistryButtons.find((button) => button.name === WALLET_CONNECTORS.METAMASK);
       if (!metamaskRegistryButton) {
         // use the default metamask registry item if it's not in the registry
         metamaskRegistryButton = generateWalletButtons({
@@ -321,7 +321,7 @@ function Root(props: RootProps) {
 
     // make metamask the first button and limit the number of buttons
     return installedConnectors;
-  }, [allButtons, config, connectorVisibilityMap, generateWalletButtons]);
+  }, [allRegistryButtons, config, connectorVisibilityMap, generateWalletButtons]);
 
   const customConnectorButtons = useMemo(() => {
     return installedConnectorButtons.filter((button) => !button.hasInjectedWallet);
@@ -336,14 +336,20 @@ function Root(props: RootProps) {
       .slice(0, displayInstalledExternalWallets ? MAX_TOP_INSTALLED_CONNECTORS : 1);
   }, [installedConnectorButtons, displayInstalledExternalWallets]);
 
-  const totalExternalWallets = useMemo(() => {
-    const uniqueWalletSet = new Set();
-    return allButtons.concat(installedConnectorButtons).filter((button) => {
-      if (uniqueWalletSet.has(button.name)) return false;
-      uniqueWalletSet.add(button.name);
+  const allExternalWallets = useMemo(() => {
+    const uniqueButtonSet = new Set();
+    return installedConnectorButtons.concat(allRegistryButtons).filter((button) => {
+      if (uniqueButtonSet.has(button.name)) return false;
+      uniqueButtonSet.add(button.name);
       return true;
+    });
+  }, [allRegistryButtons, installedConnectorButtons]);
+
+  const remainingUndisplayedWallets = useMemo(() => {
+    return allExternalWallets.filter((button) => {
+      return !topInstalledConnectorButtons.includes(button);
     }).length;
-  }, [allButtons, installedConnectorButtons]);
+  }, [allExternalWallets, topInstalledConnectorButtons]);
 
   const handleSocialLoginHeight = () => {
     setIsSocialLoginsExpanded((prev) => !prev);
@@ -481,7 +487,8 @@ function Root(props: RootProps) {
                         installedExternalWalletConfig={topInstalledConnectorButtons}
                         isEmailPasswordLessLoginVisible={isEmailPasswordLessLoginVisible}
                         isSmsPasswordLessLoginVisible={isSmsPasswordLessLoginVisible}
-                        totalExternalWallets={totalExternalWallets}
+                        totalExternalWallets={allExternalWallets.length}
+                        remainingUndisplayedWallets={remainingUndisplayedWallets}
                         logoAlignment={logoAlignment}
                         buttonRadius={buttonRadiusType}
                         deviceDetails={deviceDetails}
@@ -499,7 +506,7 @@ function Root(props: RootProps) {
                         metamaskConnectUri={modalState.metamaskConnectUri}
                         config={modalState.externalWalletsConfig}
                         walletRegistry={walletRegistry}
-                        allExternalButtons={allButtons}
+                        allRegistryButtons={allRegistryButtons}
                         connectorVisibilityMap={connectorVisibilityMap}
                         customConnectorButtons={customConnectorButtons}
                         deviceDetails={deviceDetails}