feat(tokens): display mainnet tokens total USD (#2271)

# Motivation

The goal is to display mainnet tokens total USD balances in
`NetworkSwitscher`.


<img width="324" alt="Screenshot 2024-09-06 at 17 00 56"
src="https://github.com/user-attachments/assets/d4546250-064a-4a7b-9cf6-4cf93d538e81">

src/frontend/src/lib/components/networks/MainnetNetwork.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import NetworkComponent from '$lib/components/networks/Network.svelte';
+	import { enabledMainnetTokensUsdBalancesPerNetwork } from '$lib/derived/tokens.derived';
+	import type { Network } from '$lib/types/network';
+
+	export let network: Network;
+
+	let usdBalance: number;
+	$: usdBalance = $enabledMainnetTokensUsdBalancesPerNetwork[network.id] ?? 0;
+</script>
+
+<NetworkComponent {network} {usdBalance} on:icSelected />

src/frontend/src/lib/components/networks/Network.svelte

@@ -3,11 +3,12 @@
 	import type { Network, NetworkId } from '$lib/types/network';
 
 	export let network: Network;
+	export let usdBalance: number | undefined = undefined;
 
 	let id: NetworkId;
 	let name: string;
 	let icon: string | undefined;
 	$: ({ id, name, icon } = network);
 </script>
 
-<NetworkButton {id} {name} {icon} on:icSelected />
+<NetworkButton {id} {name} {usdBalance} {icon} on:icSelected />

src/frontend/src/lib/components/networks/NetworkButton.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
 	import { IconCheck } from '@dfinity/gix-components';
+	import { nonNullish } from '@dfinity/utils';
 	import { createEventDispatcher } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import { page } from '$app/stores';
 	import TextWithLogo from '$lib/components/ui/TextWithLogo.svelte';
 	import { networkId } from '$lib/derived/network.derived';
 	import type { NetworkId } from '$lib/types/network';
+	import { formatUSD } from '$lib/utils/format.utils';
 	import { gotoReplaceRoot, isRouteTransactions, switchNetwork } from '$lib/utils/nav.utils';
 
 	export let id: NetworkId | undefined;
 	export let name: string;
 	export let icon: string | undefined;
-	export let description: string | undefined = undefined;
+	export let usdBalance: number | undefined = undefined;
 
 	const dispatch = createEventDispatcher();
 
@@ -27,8 +29,13 @@
 	};
 </script>
 
-<button class="w-full flex justify-between" on:click={onClick}>
-	<TextWithLogo {name} {description} {icon} logo="start" />
+<button class="w-full flex justify-between items-start" on:click={onClick}>
+	<TextWithLogo
+		{name}
+		{icon}
+		logo="start"
+		description={nonNullish(usdBalance) ? formatUSD(usdBalance) : undefined}
+	/>
 
 	{#if id === $networkId}
 		<span in:fade><IconCheck size="20px" /></span>

src/frontend/src/lib/components/networks/NetworksSwitcher.svelte

@@ -5,12 +5,14 @@
 	import chainFusion from '$lib/assets/chain_fusion.svg';
 	import IconChevronDown from '$lib/components/icons/IconChevronDown.svelte';
 	import IconMorePlain from '$lib/components/icons/IconMorePlain.svelte';
+	import MainnetNetwork from '$lib/components/networks/MainnetNetwork.svelte';
 	import Network from '$lib/components/networks/Network.svelte';
 	import NetworkButton from '$lib/components/networks/NetworkButton.svelte';
 	import NetworksTestnetsToggle from '$lib/components/networks/NetworksTestnetsToggle.svelte';
 	import ButtonSwitcher from '$lib/components/ui/ButtonSwitcher.svelte';
 	import { selectedNetwork } from '$lib/derived/network.derived';
 	import { networksMainnets, networksTestnets } from '$lib/derived/networks.derived';
+	import { enabledMainnetTokensUsdBalancesPerNetwork } from '$lib/derived/tokens.derived';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { testnetsStore } from '$lib/stores/settings.store';
 
@@ -23,6 +25,12 @@
 
 	let testnets: boolean;
 	$: testnets = $testnetsStore?.enabled ?? false;
+
+	let mainnetTokensUsdBalance: number;
+	$: mainnetTokensUsdBalance = $networksMainnets.reduce(
+		(acc, { id }) => acc + ($enabledMainnetTokensUsdBalancesPerNetwork[id] ?? 0),
+		0
+	);
 </script>
 
 <ButtonSwitcher
@@ -40,13 +48,14 @@
 				id={undefined}
 				name={$i18n.networks.chain_fusion}
 				icon={chainFusion}
+				usdBalance={mainnetTokensUsdBalance}
 				on:icSelected={close}
 			/>
 		</li>
 
 		{#each $networksMainnets as network}
 			<li>
-				<Network {network} on:icSelected={close} />
+				<MainnetNetwork {network} on:icSelected={close} />
 			</li>
 		{/each}
 	</ul>