PoC Displaying unknown token wallet

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/lib/derived/icrc-canisters.derived.ts

@@ -1,8 +1,9 @@
 import { loadedImportedTokensStore } from "$lib/derived/imported-tokens.derived";
 import { defaultIcrcCanistersStore } from "$lib/stores/default-icrc-canisters.store";
 import type { UniverseCanisterIdText } from "$lib/types/universe";
-import type { Principal } from "@dfinity/principal";
+import { Principal } from "@dfinity/principal";
 import { derived, type Readable } from "svelte/store";
+import { pageStore } from "./page.derived";
 
 export interface IcrcCanisters {
   ledgerCanisterId: Principal;
@@ -17,9 +18,13 @@ export type IcrcCanistersStoreData = Record<
 export type IcrcCanistersStore = Readable<IcrcCanistersStoreData>;
 
 export const icrcCanistersStore: IcrcCanistersStore = derived(
-  [defaultIcrcCanistersStore, loadedImportedTokensStore],
-  ([defaultIcrcCanisters, loadedImportedTokens]) => {
-    return {
+  [defaultIcrcCanistersStore, loadedImportedTokensStore, pageStore],
+  ([
+    defaultIcrcCanisters,
+    loadedImportedTokens,
+    { universe: universeCanisterIdText },
+  ]) => {
+    const canisters = {
       ...defaultIcrcCanisters,
       ...Object.fromEntries(
         loadedImportedTokens.map(({ ledgerCanisterId, indexCanisterId }) => [
@@ -28,5 +33,19 @@ export const icrcCanistersStore: IcrcCanistersStore = derived(
         ])
       ),
     };
+
+    try {
+      const universeCanisterId = Principal.fromText(universeCanisterIdText);
+      if (!canisters[universeCanisterIdText]) {
+        canisters[universeCanisterIdText] = {
+          ledgerCanisterId: universeCanisterId,
+          indexCanisterId: undefined,
+        };
+      }
+    } catch (error: unknown) {
+      console.error("Error parsing universe canister id", error);
+    }
+
+    return canisters;
   }
 );

frontend/src/lib/routes/Wallet.svelte

@@ -16,9 +16,13 @@
   import { i18n } from "$lib/stores/i18n";
   import { layoutTitleStore } from "$lib/stores/layout.store";
   import { nonNullish } from "@dfinity/utils";
+  import { snsProjectsStore } from "$lib/derived/sns/sns-projects.derived";
 
   export let accountIdentifier: string | undefined | null = undefined;
 
+  let snsReady = false;
+  $: snsReady = $snsProjectsStore.length > 0;
+
   layoutTitleStore.set({
     title: $i18n.wallet.title,
   });
@@ -29,10 +33,10 @@
     <NnsWallet {accountIdentifier} />
   {:else if $isCkBTCUniverseStore}
     <CkBTCWallet {accountIdentifier} />
-  {:else if $isIcrcTokenUniverseStore}
-    <IcrcWallet {accountIdentifier} />
   {:else if nonNullish($snsProjectSelectedStore)}
     <SnsWallet {accountIdentifier} />
+  {:else if $isIcrcTokenUniverseStore || snsReady}
+    <IcrcWallet {accountIdentifier} />
   {/if}
 
   {#if $isCkBTCUniverseStore}

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.root.byTestId("imported-token-tag").isPresent();
+  }
 }