fix all wallets button to show based on remaining undisplayed wallets

Author: BboyStatix

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 > 1 && (
+        {remainingUndisplayedWallets > 0 && (
           <button
             type="button"
             className={cn("w3a--btn !w3a--justify-between w3a--group w3a--relative w3a--overflow-hidden", {
@@ -525,7 +526,7 @@ function Login(props: LoginProps) {
                 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

@@ -345,6 +345,18 @@ function Root(props: RootProps) {
     }).length;
   }, [allRegistryButtons, installedConnectorButtons]);
 
+  const remainingUndisplayedWallets = useMemo(() => {
+    const uniqueButtonSet = new Set();
+    const uniqueButtons = installedConnectorButtons.concat(allRegistryButtons).filter((button) => {
+      if (uniqueButtonSet.has(button.name)) return false;
+      uniqueButtonSet.add(button.name);
+      return true;
+    });
+    return uniqueButtons.filter((button) => {
+      return !topInstalledConnectorButtons.includes(button);
+    }).length;
+  }, [installedConnectorButtons, allRegistryButtons, topInstalledConnectorButtons]);
+
   const handleSocialLoginHeight = () => {
     setIsSocialLoginsExpanded((prev) => !prev);
   };
@@ -482,6 +494,7 @@ function Root(props: RootProps) {
                         isEmailPasswordLessLoginVisible={isEmailPasswordLessLoginVisible}
                         isSmsPasswordLessLoginVisible={isSmsPasswordLessLoginVisible}
                         totalExternalWallets={totalExternalWallets}
+                        remainingUndisplayedWallets={remainingUndisplayedWallets}
                         logoAlignment={logoAlignment}
                         buttonRadius={buttonRadiusType}
                         deviceDetails={deviceDetails}