feat(frontend): Hide Send button for zero balance

src/frontend/src/lib/components/exchange/ExchangeBalance.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { anyBalanceNonZero } from '$lib/derived/balances.derived';
 	import { exchangeInitialized } from '$lib/derived/exchange.derived';
 	import { combinedDerivedSortedNetworkTokensUi } from '$lib/derived/network-tokens.derived';
 	import { i18n } from '$lib/stores/i18n.store';
@@ -19,7 +20,7 @@
 			<span class="animate-pulse">{formatUSD({ value: 0 })}</span>
 		{/if}
 	</output>
-	<span class="text-xl font-medium text-onahau">
-		{$i18n.hero.text.available_balance}
+	<span class="max-w-48 text-xl font-medium text-onahau sm:max-w-none">
+		{$anyBalanceNonZero ? $i18n.hero.text.available_balance : $i18n.hero.text.top_up}
 	</span>
 </span>

src/frontend/src/lib/components/hero/Actions.svelte

@@ -16,6 +16,7 @@
 	import Receive from '$lib/components/receive/Receive.svelte';
 	import Send from '$lib/components/send/Send.svelte';
 	import HeroButtonGroup from '$lib/components/ui/HeroButtonGroup.svelte';
+	import { anyBalanceNonZero } from '$lib/derived/balances.derived';
 	import {
 		networkEthereum,
 		networkICP,
@@ -41,6 +42,9 @@
 
 	let isTransactionsPage = false;
 	$: isTransactionsPage = isRouteTransactions($page);
+
+	let sendAction = false;
+	$: sendAction = $anyBalanceNonZero || isTransactionsPage;
 </script>
 
 <div role="toolbar" class="flex w-full justify-center pt-10">
@@ -55,7 +59,9 @@
 			<Receive />
 		{/if}
 
-		<Send {isTransactionsPage} />
+		{#if sendAction}
+			<Send {isTransactionsPage} />
+		{/if}
 
 		{#if isTransactionsPage}
 			{#if convertEth}

src/frontend/src/lib/derived/balances.derived.ts

@@ -1,6 +1,7 @@
 import { balancesStore } from '$lib/stores/balances.store';
 import { token } from '$lib/stores/token.store';
 import type { OptionBalance } from '$lib/types/balance';
+import { checkAnyNonZeroBalance } from '$lib/utils/balances.utils';
 import { nonNullish } from '@dfinity/utils';
 import { derived, type Readable } from 'svelte/store';
 
@@ -17,3 +18,7 @@ export const balanceZero: Readable<boolean> = derived(
 		nonNullish($balanceStore?.[$token.id]) &&
 		$balanceStore[$token.id]?.data.isZero() === true
 );
+
+export const anyBalanceNonZero: Readable<boolean> = derived([balancesStore], ([$balanceStore]) =>
+	checkAnyNonZeroBalance($balanceStore)
+);

src/frontend/src/lib/i18n/en.json

@@ -182,6 +182,7 @@
 	"hero": {
 		"text": {
 			"available_balance": "Available balance",
+			"top_up": "Top up your wallet to start using it!",
 			"learn_more_about_erc20_icp": "Learn more about ERC20 ICP on Ethereum."
 		}
 	},

src/frontend/src/lib/types/i18n.d.ts

@@ -160,7 +160,7 @@ interface I18nInit {
 }
 
 interface I18nHero {
-	text: { available_balance: string; learn_more_about_erc20_icp: string };
+	text: { available_balance: string; top_up: string; learn_more_about_erc20_icp: string };
 }
 
 interface I18nSettings {

src/frontend/src/lib/utils/balances.utils.ts

@@ -0,0 +1,10 @@
+import { type BalancesData } from '$lib/stores/balances.store';
+import type { CertifiedStoreData } from '$lib/stores/certified.store';
+import type { TokenId } from '$lib/types/token';
+import { nonNullish } from '@dfinity/utils';
+
+export const checkAnyNonZeroBalance = ($balancesStore: CertifiedStoreData<BalancesData>): boolean =>
+	nonNullish($balancesStore) &&
+	Object.getOwnPropertySymbols($balancesStore).some(
+		(tokenId) => !($balancesStore[tokenId as TokenId]?.data?.isZero() ?? true)
+	);

src/frontend/src/tests/lib/utils/balances.utils.spec.ts

@@ -0,0 +1,60 @@
+import { ZERO } from '$lib/constants/app.constants';
+import type { BalancesData } from '$lib/stores/balances.store';
+import type { CertifiedStoreData } from '$lib/stores/certified.store';
+import { checkAnyNonZeroBalance } from '$lib/utils/balances.utils';
+import { bn1 } from '$tests/mocks/balances.mock';
+
+describe('checkAnyNonZeroBalance', () => {
+	it('should return true if there is at least one non-zero balance', () => {
+		const mockBalancesStore: CertifiedStoreData<BalancesData> = {
+			[Symbol('token1')]: { data: bn1 },
+			[Symbol('token2')]: { data: ZERO }
+		} as unknown as CertifiedStoreData<BalancesData>;
+
+		expect(checkAnyNonZeroBalance(mockBalancesStore)).toBe(true);
+	});
+
+	it('should return true if there is at least one non-zero balance and one nullish balance', () => {
+		const mockBalancesStore = {
+			[Symbol('token1')]: { data: bn1 },
+			[Symbol('token2')]: undefined
+		} as unknown as CertifiedStoreData<BalancesData>;
+
+		expect(checkAnyNonZeroBalance(mockBalancesStore)).toBe(true);
+	});
+
+	it('should return false if all balances are zero', () => {
+		const mockBalancesStore = {
+			[Symbol('token1')]: { data: ZERO },
+			[Symbol('token2')]: { data: ZERO }
+		} as unknown as CertifiedStoreData<BalancesData>;
+
+		expect(checkAnyNonZeroBalance(mockBalancesStore)).toBe(false);
+	});
+
+	it('should return false if balances data are nullish', () => {
+		const mockBalancesStore = {
+			[Symbol('token1')]: { data: null },
+			[Symbol('token2')]: { data: undefined }
+		} as unknown as CertifiedStoreData<BalancesData>;
+
+		expect(checkAnyNonZeroBalance(mockBalancesStore)).toBe(false);
+	});
+
+	it('should return false if balances are nullish', () => {
+		const mockBalancesStore = {
+			[Symbol('token1')]: null,
+			[Symbol('token2')]: undefined
+		} as unknown as CertifiedStoreData<BalancesData>;
+
+		expect(checkAnyNonZeroBalance(mockBalancesStore)).toBe(false);
+	});
+
+	it('should return false if store is empty', () => {
+		expect(checkAnyNonZeroBalance({} as unknown as CertifiedStoreData<BalancesData>)).toBe(false);
+	});
+
+	it('should return false if store is not initialized', () => {
+		expect(checkAnyNonZeroBalance(undefined)).toBe(false);
+	});
+});