Display "imported token" tag (#5529)

# Motivation

Custom tokens can use metadata like name and symbol from trusted tokens.
In the token list they can be distinguished by the "Imported Token" tag.
However, on the wallet page this tag is missing and the tokens become
indistinguishable.

# Changes

- Display "imported token" tag on wallet page.

# Tests

- Added.
<img width="638" alt="image"
src="https://github.com/user-attachments/assets/6cc2af93-9022-41d3-9be3-e7dadb8b69bb">


# Todos

- [ ] Add entry to changelog (if necessary).
Not necessary.

frontend/src/lib/components/accounts/IcrcWalletPage.svelte

@@ -20,7 +20,7 @@
     hasAccounts,
   } from "$lib/utils/accounts.utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
-  import { IconDots, Island, Spinner } from "@dfinity/gix-components";
+  import { IconDots, Island, Spinner, Tag } from "@dfinity/gix-components";
   import type { Principal } from "@dfinity/principal";
   import { TokenAmountV2, isNullish, nonNullish } from "@dfinity/utils";
   import type { Writable } from "svelte/store";
@@ -221,6 +221,12 @@
           >
             <slot name="header-actions" />
             <SignInGuard />
+
+            {#if isImportedToken}
+              <Tag testId="imported-token-tag"
+                >{$i18n.import_token.imported_token}</Tag
+              >
+            {/if}
           </WalletPageHeading>
 
           {#if $$slots["info-card"]}

frontend/src/tests/lib/pages/IcrcWallet.spec.ts

@@ -6,6 +6,7 @@ import {
   CKETHSEPOLIA_INDEX_CANISTER_ID,
   CKETHSEPOLIA_LEDGER_CANISTER_ID,
   CKETHSEPOLIA_UNIVERSE_CANISTER_ID,
+  CKETH_LEDGER_CANISTER_ID,
 } from "$lib/constants/cketh-canister-ids.constants";
 import { AppPath } from "$lib/constants/routes.constants";
 import { pageStore } from "$lib/derived/page.derived";
@@ -528,6 +529,24 @@ describe("IcrcWallet", () => {
       });
     });
 
+    it('displays "Imported token" tag', async () => {
+      const po = await renderWallet({});
+      expect(await po.getWalletPageHeadingPo().hasImportedTokenTag()).toEqual(
+        true
+      );
+    });
+
+    it('should not display "Imported token" tag for not imported tokens', async () => {
+      page.mock({
+        data: { universe: CKETH_LEDGER_CANISTER_ID.toText() },
+        routeId: AppPath.Wallet,
+      });
+      const po = await renderWallet({});
+      expect(await po.getWalletPageHeadingPo().hasImportedTokenTag()).toEqual(
+        false
+      );
+    });
+
     it("should remove imported tokens", async () => {
       let resolveSetImportedTokens;
       const spyOnSetImportedTokens = vi

frontend/src/tests/page-objects/WalletPageHeading.page-object.ts

@@ -35,4 +35,8 @@ export class WalletPageHeadingPo extends BasePageObject {
       this.root.byTestId("wallet-page-heading-principal")
     ).getFullText();
   }
+
+  async hasImportedTokenTag(): Promise<boolean> {
+    return this.isPresent("imported-token-tag");
+  }
 }