refactor(frontend): move the Zero Balance trigger in the token list

dfinity · Oct 8, 2024 · b3efe14 · b3efe14
1 parent ab23de3
commit b3efe14
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 2 deletions.
diff --git a/src/frontend/src/lib/components/tokens/Tokens.svelte b/src/frontend/src/lib/components/tokens/Tokens.svelte
@@ -2,9 +2,9 @@
 	import { fade } from 'svelte/transition';
 	import NetworksSwitcher from '$lib/components/networks/NetworksSwitcher.svelte';
 	import ManageTokensButton from '$lib/components/tokens/ManageTokensButton.svelte';
-	import TokensMenu from '$lib/components/tokens/TokensMenu.svelte';
 	import TokensSignedIn from '$lib/components/tokens/TokensSignedIn.svelte';
 	import TokensSignedOut from '$lib/components/tokens/TokensSignedOut.svelte';
+	import TokensZeroBalanceCheckbox from '$lib/components/tokens/TokensZeroBalanceCheckbox.svelte';
 	import Header from '$lib/components/ui/Header.svelte';
 	import { authNotSignedIn, authSignedIn } from '$lib/derived/auth.derived';
 </script>
@@ -13,7 +13,7 @@
 	<Header>
 		<NetworksSwitcher disabled={$authNotSignedIn} />
 
-		<TokensMenu slot="end" />
+		<TokensZeroBalanceCheckbox slot="end" />
 	</Header>
 
 	{#if $authSignedIn}

diff --git a/src/frontend/src/lib/components/tokens/TokensZeroBalanceCheckbox.svelte b/src/frontend/src/lib/components/tokens/TokensZeroBalanceCheckbox.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Checkbox } from '@dfinity/gix-components';
+	import { hideZeroBalances } from '$lib/derived/settings.derived';
+	import { i18n } from '$lib/stores/i18n.store';
+	import { hideZeroBalancesStore } from '$lib/stores/settings.store';
+
+	let checked: boolean;
+	$: checked = $hideZeroBalances;
+
+	const toggleHide = () =>
+		hideZeroBalancesStore.set({ key: 'hide-zero-balances', value: { enabled: !checked } });
+</script>
+
+<div style="--checkbox-label-order: 1">
+	<Checkbox inputId="checkbox-zero-balance" {checked} on:nnsChange={toggleHide}>
+		{$i18n.tokens.text.hide_zeros}
+	</Checkbox>
+</div>
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
@@ -354,6 +354,7 @@
 			"contract_address": "Contract address",
 			"balance": "Balance",
 			"hide_zero_balances": "Hide zero balances",
+			"hide_zeros": "Hide zeros",
 			"all_tokens_with_zero_hidden": "All tokens with zero balance are currently hidden.",
 			"initializing": "Initializing...",
 			"updating_ui": "Updating the UI...",

diff --git a/src/frontend/src/lib/styles/global/gix.scss b/src/frontend/src/lib/styles/global/gix.scss
@@ -52,6 +52,9 @@
 	// Segment
 	--segment-selected-background: var(--color-secondary);
 
+	// Checkbox
+	--checkbox-padding: 0;
+
 	// Modal
 
 	--alert-width: calc(100% - var(--padding-8x));
@@ -218,3 +221,32 @@ div.step.completed {
 		--line-color: var(--color-primary);
 	}
 }
+
+div.checkbox {
+	input[type='checkbox'] {
+		--secondary: var(--color-primary);
+		--focus-background: var(--color-white);
+
+		&:focus {
+			--secondary: var(--color-primary);
+			--focus-background: var(--color-white);
+		}
+
+		&:checked {
+			--secondary: var(--color-primary);
+			--focus-background: var(--color-cobalt);
+			--input-custom-border-color: var(--color-primary);
+			--input-background: var(--color-primary);
+
+			&:focus {
+				--secondary: var(--color-cobalt);
+				--focus-background: var(--color-cobalt);
+				--input-custom-border-color: var(--color-cobalt);
+			}
+		}
+
+		&:checked:after {
+			--background-contrast: var(--color-white);
+		}
+	}
+}
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
@@ -308,6 +308,7 @@ interface I18nTokens {
 		contract_address: string;
 		balance: string;
 		hide_zero_balances: string;
+		hide_zeros: string;
 		all_tokens_with_zero_hidden: string;
 		initializing: string;
 		updating_ui: string;