Merge branch 'main' into feature/chain-fusion/new-component-add-token…

…-by-network
dfinity · Jun 20, 2024 · 689ebc6 · 689ebc6
2 parents e672869 + 5569fe6
commit 689ebc6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 7 deletions.
diff --git a/src/frontend/src/icp-eth/components/tokens/ManageTokens.svelte b/src/frontend/src/icp-eth/components/tokens/ManageTokens.svelte
@@ -19,6 +19,9 @@
 	import { icTokenContainsEnabled, sortIcTokens } from '$icp/utils/icrc.utils';
 	import { replacePlaceholders } from '$lib/utils/i18n.utils';
 	import type { Token } from '$lib/types/token';
+	import { networkTokens } from '$lib/derived/network-tokens.derived';
+	import ManageTokenToggle from '$lib/components/tokens/ManageTokenToggle.svelte';
+	import { selectedNetwork } from '$lib/derived/network.derived';
 
 	const dispatch = createEventDispatcher();
 
@@ -51,6 +54,22 @@
 		)
 	].sort(sortIcTokens);
 
+	let allTokens: Token[] = [];
+	$: allTokens = [
+		...$networkTokens.map(
+			(token) =>
+				allIcrcTokens.find(
+					(icrcToken) => token.id === icrcToken.id && token.network.id === icrcToken.network.id
+				) ?? { ...token, show: true }
+		),
+		...allIcrcTokens.filter(
+			(icrcToken) =>
+				!$networkTokens.some(
+					(token) => icrcToken.id === token.id && icrcToken.network.id === token.network.id
+				)
+		)
+	];
+
 	let filterTokens = '';
 	const updateFilter = () => (filterTokens = filter);
 	const debounceUpdateFilter = debounce(updateFilter);
@@ -60,12 +79,13 @@
 
 	let filteredTokens: Token[] = [];
 	$: filteredTokens = isNullishOrEmpty(filterTokens)
-		? allIcrcTokens
-		: allIcrcTokens.filter(
-				({ name, symbol, alternativeName }) =>
-					name.toLowerCase().includes(filterTokens.toLowerCase()) ||
-					symbol.toLowerCase().includes(filterTokens.toLowerCase()) ||
-					(alternativeName ?? '').toLowerCase().includes(filterTokens.toLowerCase())
+		? allTokens
+		: allTokens.filter(
+				(token) =>
+					token.name.toLowerCase().includes(filterTokens.toLowerCase()) ||
+					token.symbol.toLowerCase().includes(filterTokens.toLowerCase()) ||
+					(icTokenContainsEnabled(token) &&
+						(token.alternativeName ?? '').toLowerCase().includes(filterTokens.toLowerCase()))
 			);
 
 	let tokens: Token[] = [];
@@ -127,6 +147,16 @@
 	</Input>
 </div>
 
+{#if nonNullish($selectedNetwork)}
+	<div class="mb-4">
+		<p class="text-misty-rose">
+			{replacePlaceholders($i18n.tokens.manage.text.manage_for_network, {
+				$network: $selectedNetwork.name
+			})}
+		</p>
+	</div>
+{/if}
+
 {#if noTokensMatch}
 	<button
 		class="flex flex-col items-center justify-center py-16 w-full"
@@ -160,6 +190,8 @@
 				<svelte:fragment slot="action">
 					{#if icTokenContainsEnabled(token)}
 						<IcManageTokenToggle {token} on:icToken={onToggle} />
+					{:else}
+						<ManageTokenToggle {token} />
 					{/if}
 				</svelte:fragment>
 			</Card>

diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
@@ -317,6 +317,7 @@
 				"title": "Add and hide tokens",
 				"do_not_see_import": "Don’t see your token? Import",
 				"clear_filter": "Clear filter",
+				"manage_for_network": "Managing tokens for $network",
 				"network": "Network"
 			},
 			"placeholder": {

diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
@@ -287,7 +287,13 @@ interface I18nTokens {
 		};
 	};
 	manage: {
-		text: { title: string; do_not_see_import: string; clear_filter: string; network: string };
+		text: {
+			title: string;
+			do_not_see_import: string;
+			clear_filter: string;
+			manage_for_network: string;
+			network: string;
+		};
 		placeholder: { select_network: string };
 		info: { outdated_index_canister: string };
 		error: { unexpected_build: string; empty: string };