fix(frontend): fix hide zeros filter

src/frontend/src/lib/components/tokens/TokensDisplayHandler.svelte

@@ -2,26 +2,26 @@
 	import { debounce } from '@dfinity/utils';
 	import { combinedDerivedSortedNetworkTokensUi } from '$lib/derived/network-tokens.derived';
 	import { showZeroBalances } from '$lib/derived/settings.derived';
-	import type { TokenUi } from '$lib/types/token';
 	import type { TokenUiOrGroupUi } from '$lib/types/token-group';
-	import { groupTokensByTwin } from '$lib/utils/token-group.utils';
+	import { filterTokenGroups, groupTokensByTwin } from '$lib/utils/token-group.utils';
 
 	// We start it as undefined to avoid showing an empty list before the first update.
 	export let tokens: TokenUiOrGroupUi[] | undefined = undefined;
 
-	let sortedTokens: TokenUi[];
-	$: sortedTokens = $combinedDerivedSortedNetworkTokensUi.filter(
-		({ balance, usdBalance }) => Number(balance ?? 0n) || (usdBalance ?? 0) || $showZeroBalances
-	);
-
 	let groupedTokens: TokenUiOrGroupUi[];
-	$: groupedTokens = groupTokensByTwin(sortedTokens);
+	$: groupedTokens = groupTokensByTwin($combinedDerivedSortedNetworkTokensUi);
+
+	let sortedTokensOrGroups: TokenUiOrGroupUi[];
+	$: sortedTokensOrGroups = filterTokenGroups({
+		groupedTokens,
+		showZeroBalances: $showZeroBalances
+	});
 
-	const updateTokensToDisplay = () => (tokens = [...groupedTokens]);
+	const updateTokensToDisplay = () => (tokens = [...sortedTokensOrGroups]);
 
 	const debounceUpdateTokensToDisplay = debounce(updateTokensToDisplay, 500);
 
-	$: sortedTokens, debounceUpdateTokensToDisplay();
+	$: sortedTokensOrGroups, debounceUpdateTokensToDisplay();
 </script>
 
 <slot />

src/frontend/src/lib/utils/token-group.utils.ts

@@ -42,6 +42,36 @@ export const groupTokensByTwin = (tokens: TokenUi[]): TokenUiOrGroupUi[] => {
 		);
 };
 
+const hasBalance = ({
+	token,
+	showZeroBalances
+}: {
+	token: TokenUiOrGroupUi;
+	showZeroBalances: boolean;
+}) => Number(token.balance ?? 0n) || Number(token.usdBalance ?? 0n) || showZeroBalances;
+
+/**
+ * Function to create a list of TokenUiOrGroupUi, filtering out all groups that do not have at least
+ * one token with a balance if showZeroBalance is false.
+ *
+ * @param groupedTokens - The list of TokenUiOrGroupUi to filter. Groups without balance are filtered out.
+ * @param showZeroBalances - A boolean that indicates if zero balances should be shown.
+ *
+ * @returns A new list where all groups that do not have at least one token with a balance are removed if showZeroBalances is false.
+ */
+export const filterTokenGroups = ({
+	groupedTokens,
+	showZeroBalances
+}: {
+	groupedTokens: TokenUiOrGroupUi[];
+	showZeroBalances: boolean;
+}) =>
+	groupedTokens.filter((t: TokenUiOrGroupUi) =>
+		isTokenUiGroup(t)
+			? t.tokens.some((tok: TokenUi) => hasBalance({ token: tok, showZeroBalances }))
+			: hasBalance({ token: t, showZeroBalances })
+	);
+
 const mapNewTokenGroup = (token: TokenUi): TokenUiGroup => ({
 	id: token.id,
 	nativeToken: token,

src/frontend/src/tests/lib/utils/token-group.utils.spec.ts

@@ -10,6 +10,7 @@ import { ZERO } from '$lib/constants/app.constants';
 import type { TokenUi } from '$lib/types/token';
 import type { TokenUiGroup } from '$lib/types/token-group';
 import {
+	filterTokenGroups,
 	groupMainToken,
 	groupSecondaryToken,
 	groupTokens,
@@ -243,6 +244,58 @@ describe('token-group.utils', () => {
 		});
 	});
 
+	describe('filterTokenGroups', () => {
+		const reorderedTokens = [
+			{ ...tokens[0], balance: ZERO, usdBalance: 0 }, // BTC
+			{ ...tokens[4], balance: ZERO, usdBalance: 0 }, // ICP
+			{ ...tokens[1], balance: ZERO, usdBalance: 0 } // ckBTC
+		];
+
+		it('should give me all token groups', () => {
+			const groupedTokens = groupTokensByTwin(reorderedTokens as TokenUi[]);
+
+			const filteredTokenGroups = filterTokenGroups({ groupedTokens, showZeroBalances: true });
+
+			expect(filteredTokenGroups).toEqual(groupedTokens);
+		});
+
+		it('should give me only token groups where at least one token has a balance', () => {
+			const customReorderedTokens = [
+				...reorderedTokens,
+				{ ...tokens[2], balance: bn2, usdBalance: 0 }, // ETH
+				{ ...tokens[3], balance: ZERO, usdBalance: 0 } // ckETH
+			];
+			const groupedTokens = groupTokensByTwin(customReorderedTokens as TokenUi[]);
+
+			const filteredTokenGroups = filterTokenGroups({ groupedTokens, showZeroBalances: false });
+
+			expect(filteredTokenGroups).toHaveLength(1);
+
+			expect(filteredTokenGroups[0]).toHaveProperty('tokens', [
+				customReorderedTokens[3],
+				customReorderedTokens[4]
+			]);
+		});
+
+		it('should give me only token groups where at least one token has a usd balance', () => {
+			const customReorderedTokens = [
+				...reorderedTokens,
+				{ ...tokens[2], balance: ZERO, usdBalance: 0 }, // ETH
+				{ ...tokens[3], balance: ZERO, usdBalance: 1 } // ckETH
+			];
+			const groupedTokens = groupTokensByTwin(customReorderedTokens as TokenUi[]);
+
+			const filteredTokenGroups = filterTokenGroups({ groupedTokens, showZeroBalances: false });
+
+			expect(filteredTokenGroups).toHaveLength(1);
+
+			expect(filteredTokenGroups[0]).toHaveProperty('tokens', [
+				customReorderedTokens[3],
+				customReorderedTokens[4]
+			]);
+		});
+	});
+
 	describe('updateTokenGroup', () => {
 		const token = { ...ICP_TOKEN, balance: bn1, usdBalance: 100 };
 		const anotherToken = { ...SEPOLIA_TOKEN, balance: bn2, usdBalance: 200 };