diff --git a/src/frontend/src/icp-eth/components/tokens/ManageTokens.svelte b/src/frontend/src/icp-eth/components/tokens/ManageTokens.svelte index 267ec58f14..b6eeb2083f 100644 --- 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 @@ +{#if nonNullish($selectedNetwork)} +
+

+ {replacePlaceholders($i18n.tokens.manage.text.manage_for_network, { + $network: $selectedNetwork.name + })} +

+
+{/if} + {#if noTokensMatch}