Default icrc canisters store (#5383)

# Motivation

We need to make the NNS-dapp treat imported tokens as ICRC tokens, just
as it does with the current tokens, since imported tokens follow the
ICRC standard. The only differences are that the index canister is
optional (and the nns-dapp already handles this), and they are added by
the user.

Note: This PR includes a solution suggested in [another approach
PR](#5378 (comment)).

# Changes

1. Rename icrcCanistersStore to defaultIcrcCanistersStore.
2. Introduce a new derived store that contains both the current ICRC
canister IDs and imported token IDs, and give this store the old name
icrcCanistersStore.
3. Adjust the NNS-dapp code so that it reads the canister IDs from the
derived store and writes to the renamed defaultIcrcCanistersStore.

# Tests

- Adjust tests to reflect the changes.
- Test for icrcCanistersStore.
- Tested manually that there are not current functionality changes.

# Todos

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

frontend/src/lib/components/ic/GetTokensModal.svelte

@@ -13,7 +13,7 @@
   import { tokensByUniverseIdStore } from "$lib/derived/tokens.derived";
   import { universesStore } from "$lib/derived/universes.derived";
   import { getICPs, getBTC, getIcrcTokens } from "$lib/services/dev.services";
-  import { icrcCanistersStore } from "$lib/stores/icrc-canisters.store";
+  import { icrcCanistersStore } from "$lib/derived/icrc-canisters.derived";
   import { toastsError } from "$lib/stores/toasts.store";
   import type { Universe } from "$lib/types/universe";
   import { isUniverseCkBTC, isUniverseNns } from "$lib/utils/universe.utils";

frontend/src/lib/derived/debug.derived.ts

@@ -1,8 +1,8 @@
 import { icpAccountsStore } from "$lib/derived/icp-accounts.derived";
 import { snsProjectsStore } from "$lib/derived/sns/sns-projects.derived";
 import { canistersStore } from "$lib/stores/canisters.store";
+import { defaultIcrcCanistersStore } from "$lib/stores/default-icrc-canisters.store";
 import { icrcAccountsStore } from "$lib/stores/icrc-accounts.store";
-import { icrcCanistersStore } from "$lib/stores/icrc-canisters.store";
 import { icrcTransactionsStore } from "$lib/stores/icrc-transactions.store";
 import { knownNeuronsStore } from "$lib/stores/known-neurons.store";
 import { neuronsStore } from "$lib/stores/neurons.store";
@@ -117,7 +117,7 @@ export const initDebugStore = () =>
       snsAggregatorStore,
       tokensStore,
       icrcAccountsStore,
-      icrcCanistersStore,
+      defaultIcrcCanistersStore,
     ],
     ([
       $busyStore,
@@ -145,7 +145,7 @@ export const initDebugStore = () =>
       $aggregatorStore,
       $tokensStore,
       $icrcAccountsStore,
-      $icrcCanistersStore,
+      $defaultIcrcCanistersStore,
     ]) => ({
       busy: $busyStore,
       accounts: $accountsStore,
@@ -172,6 +172,6 @@ export const initDebugStore = () =>
       aggregatorStore: $aggregatorStore,
       tokensStore: $tokensStore,
       icrcAccountsStore: $icrcAccountsStore,
-      icrcCanistersStore: $icrcCanistersStore,
+      defaultIcrcCanistersStore: $defaultIcrcCanistersStore,
     })
   );

frontend/src/lib/derived/icrc-canisters.derived.ts

@@ -0,0 +1,34 @@
+import { defaultIcrcCanistersStore } from "$lib/stores/default-icrc-canisters.store";
+import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+import type { UniverseCanisterIdText } from "$lib/types/universe";
+import type { Principal } from "@dfinity/principal";
+import { derived, type Readable } from "svelte/store";
+
+export interface IcrcCanisters {
+  ledgerCanisterId: Principal;
+  indexCanisterId: Principal | undefined;
+}
+
+export type IcrcCanistersStoreData = Record<
+  UniverseCanisterIdText,
+  IcrcCanisters
+>;
+
+export type IcrcCanistersStore = Readable<IcrcCanistersStoreData>;
+
+export const icrcCanistersStore: IcrcCanistersStore = derived(
+  [defaultIcrcCanistersStore, importedTokensStore],
+  ([defaultIcrcCanisters, importedTokensStore]) => {
+    return {
+      ...defaultIcrcCanisters,
+      ...Object.fromEntries(
+        importedTokensStore?.importedTokens?.map(
+          ({ ledgerCanisterId, indexCanisterId }) => [
+            ledgerCanisterId.toText(),
+            { ledgerCanisterId, indexCanisterId },
+          ]
+        ) ?? []
+      ),
+    };
+  }
+);

frontend/src/lib/derived/icrc-universes.derived.ts

@@ -8,7 +8,7 @@ import {
 import {
   icrcCanistersStore,
   type IcrcCanisters,
-} from "$lib/stores/icrc-canisters.store";
+} from "$lib/derived/icrc-canisters.derived";
 import { tokensStore, type TokensStoreData } from "$lib/stores/tokens.store";
 import type { Universe } from "$lib/types/universe";
 import { isNullish, nonNullish } from "@dfinity/utils";

frontend/src/lib/derived/selectable-universes.derived.ts

@@ -1,9 +1,9 @@
-import { pageStore, type Page } from "$lib/derived/page.derived";
 import {
   icrcCanistersStore,
   type IcrcCanistersStore,
   type IcrcCanistersStoreData,
-} from "$lib/stores/icrc-canisters.store";
+} from "$lib/derived/icrc-canisters.derived";
+import { pageStore, type Page } from "$lib/derived/page.derived";
 import type { Universe } from "$lib/types/universe";
 import { isAllTokensPath, isUniverseCkBTC } from "$lib/utils/universe.utils";
 import { isNullish } from "@dfinity/utils";

frontend/src/lib/derived/selected-universe.derived.ts

@@ -3,17 +3,17 @@ import {
   OWN_CANISTER_ID_TEXT,
 } from "$lib/constants/canister-ids.constants";
 import { CKBTC_UNIVERSE_CANISTER_ID } from "$lib/constants/ckbtc-canister-ids.constants";
+import {
+  icrcCanistersStore,
+  type IcrcCanistersStore,
+  type IcrcCanistersStoreData,
+} from "$lib/derived/icrc-canisters.derived";
 import { pageStore, type Page } from "$lib/derived/page.derived";
 import { selectableUniversesStore } from "$lib/derived/selectable-universes.derived";
 import {
   ENABLE_CKBTC,
   ENABLE_CKTESTBTC,
 } from "$lib/stores/feature-flags.store";
-import {
-  icrcCanistersStore,
-  type IcrcCanistersStore,
-  type IcrcCanistersStoreData,
-} from "$lib/stores/icrc-canisters.store";
 import type { Universe, UniverseCanisterId } from "$lib/types/universe";
 import {
   isAllTokensPath,

frontend/src/lib/directives/debug.directives.ts

@@ -223,7 +223,6 @@ const anonymiseStoreState = async () => {
     aggregatorStore,
     tokensStore,
     icrcAccountsStore,
-    icrcCanistersStore,
   } = get(debugStore);
 
   return {
@@ -291,7 +290,6 @@ const anonymiseStoreState = async () => {
     ),
     aggregatorStore,
     tokensStore,
-    icrcCanistersStore,
     icrcAccountsStore: await anonymizeSnsTypeStore(
       icrcAccountsStore,
       async ({ certified, accounts }) => ({

frontend/src/lib/pages/IcrcWallet.svelte

@@ -5,7 +5,7 @@
   import NoTransactions from "$lib/components/accounts/NoTransactions.svelte";
   import { selectedIcrcTokenUniverseIdStore } from "$lib/derived/selected-universe.derived";
   import { tokensByUniverseIdStore } from "$lib/derived/tokens.derived";
-  import { icrcCanistersStore } from "$lib/stores/icrc-canisters.store";
+  import { icrcCanistersStore } from "$lib/derived/icrc-canisters.derived";
   import type { CanisterId } from "$lib/types/canister";
   import type { IcrcTokenMetadata } from "$lib/types/icrc";
   import type { WalletStore } from "$lib/types/wallet.context";

frontend/src/lib/services/icrc-canisters.services.ts

@@ -8,17 +8,17 @@ import {
   CKUSDC_INDEX_CANISTER_ID,
   CKUSDC_LEDGER_CANISTER_ID,
 } from "$lib/constants/ckusdc-canister-ids.constants";
+import { defaultIcrcCanistersStore } from "$lib/stores/default-icrc-canisters.store";
 import { ENABLE_CKTESTBTC } from "$lib/stores/feature-flags.store";
-import { icrcCanistersStore } from "$lib/stores/icrc-canisters.store";
 import { isNullish } from "@dfinity/utils";
 import { get } from "svelte/store";
 
 export const loadIcrcCanisters = async () => {
-  const storeData = get(icrcCanistersStore);
+  const storeData = get(defaultIcrcCanistersStore);
   // To avoid rerendering the UI and possibly triggering new requests
   // We don't change the store if it's already filled.
   if (isNullish(storeData[CKETH_LEDGER_CANISTER_ID.toText()])) {
-    icrcCanistersStore.setCanisters({
+    defaultIcrcCanistersStore.setCanisters({
       ledgerCanisterId: CKETH_LEDGER_CANISTER_ID,
       indexCanisterId: CKETH_INDEX_CANISTER_ID,
     });
@@ -27,13 +27,13 @@ export const loadIcrcCanisters = async () => {
     get(ENABLE_CKTESTBTC) &&
     isNullish(storeData[CKETHSEPOLIA_LEDGER_CANISTER_ID.toText()])
   ) {
-    icrcCanistersStore.setCanisters({
+    defaultIcrcCanistersStore.setCanisters({
       ledgerCanisterId: CKETHSEPOLIA_LEDGER_CANISTER_ID,
       indexCanisterId: CKETHSEPOLIA_INDEX_CANISTER_ID,
     });
   }
   if (isNullish(storeData[CKUSDC_LEDGER_CANISTER_ID.toText()])) {
-    icrcCanistersStore.setCanisters({
+    defaultIcrcCanistersStore.setCanisters({
       ledgerCanisterId: CKUSDC_LEDGER_CANISTER_ID,
       indexCanisterId: CKUSDC_INDEX_CANISTER_ID,
     });

frontend/src/lib/services/icrc-tokens.services.ts

@@ -1,4 +1,4 @@
-import { icrcCanistersStore } from "$lib/stores/icrc-canisters.store";
+import { icrcCanistersStore } from "$lib/derived/icrc-canisters.derived";
 import type { Unsubscriber } from "svelte/store";
 import { loadIcrcToken } from "./icrc-accounts.services";
 

frontend/src/lib/stores/icrc-canisters.store.ts → frontend/src/lib/stores/default-icrc-canisters.store.ts

@@ -5,18 +5,19 @@ import { nonNullish } from "@dfinity/utils";
 import type { Readable } from "svelte/store";
 import { writable } from "svelte/store";
 
-export interface IcrcCanisters {
+export interface DefaultIcrcCanisters {
   ledgerCanisterId: Principal;
   indexCanisterId: Principal;
 }
 
-export type IcrcCanistersStoreData = Record<
+export type DefaultIcrcCanistersStoreData = Record<
   UniverseCanisterIdText,
-  IcrcCanisters
+  DefaultIcrcCanisters
 >;
 
-export interface IcrcCanistersStore extends Readable<IcrcCanistersStoreData> {
-  setCanisters: (data: IcrcCanisters) => void;
+export interface IcrcCanistersStore
+  extends Readable<DefaultIcrcCanistersStoreData> {
+  setCanisters: (data: DefaultIcrcCanisters) => void;
   reset: () => void;
 }
 
@@ -28,18 +29,18 @@ export interface IcrcCanistersStore extends Readable<IcrcCanistersStoreData> {
  * - reset: reset all information.
  *
  */
-const initIcrcCanistersStore = (): IcrcCanistersStore => {
-  const initialIcrcCanistersStoreData: IcrcCanistersStoreData = {};
+const initDefaultIcrcCanistersStore = (): IcrcCanistersStore => {
+  const initialIcrcCanistersStoreData: DefaultIcrcCanistersStoreData = {};
 
-  const { subscribe, update, set } = writable<IcrcCanistersStoreData>(
+  const { subscribe, update, set } = writable<DefaultIcrcCanistersStoreData>(
     initialIcrcCanistersStoreData
   );
 
   return {
     subscribe,
 
-    setCanisters({ ledgerCanisterId, indexCanisterId }: IcrcCanisters) {
-      update((state: IcrcCanistersStoreData) => ({
+    setCanisters({ ledgerCanisterId, indexCanisterId }: DefaultIcrcCanisters) {
+      update((state: DefaultIcrcCanistersStoreData) => ({
         ...state,
         [ledgerCanisterId.toText()]: {
           ledgerCanisterId,
@@ -55,7 +56,7 @@ const initIcrcCanistersStore = (): IcrcCanistersStore => {
   };
 };
 
-export const icrcCanistersStore = initIcrcCanistersStore();
+export const defaultIcrcCanistersStore = initDefaultIcrcCanistersStore();
 
 // Useful to help people record coins they accidentally sent to NNS dapp, but
 // which are not officially supported by the NNS dapp.
@@ -75,7 +76,7 @@ if (browser) {
     ledgerCanisterId: string,
     indexCanisterId?: string
   ) => {
-    icrcCanistersStore.setCanisters({
+    defaultIcrcCanistersStore.setCanisters({
       ledgerCanisterId: Principal.fromText(ledgerCanisterId),
       indexCanisterId: nonNullish(indexCanisterId)
         ? Principal.fromText(indexCanisterId)

frontend/src/lib/utils/universe.utils.ts

@@ -4,9 +4,9 @@ import {
   CKTESTBTC_UNIVERSE_CANISTER_ID,
 } from "$lib/constants/ckbtc-canister-ids.constants";
 import { AppPath } from "$lib/constants/routes.constants";
+import type { IcrcCanistersStoreData } from "$lib/derived/icrc-canisters.derived";
 import type { Page } from "$lib/derived/page.derived";
 import { i18n } from "$lib/stores/i18n";
-import type { IcrcCanistersStoreData } from "$lib/stores/icrc-canisters.store";
 import type { SnsSummary } from "$lib/types/sns";
 import type { Universe } from "$lib/types/universe";
 import { replacePlaceholders } from "$lib/utils/i18n.utils";

frontend/src/routes/(app)/(nns)/tokens/+page.svelte

@@ -24,7 +24,7 @@
   import {
     icrcCanistersStore,
     type IcrcCanistersStoreData,
-  } from "$lib/stores/icrc-canisters.store";
+  } from "$lib/derived/icrc-canisters.derived";
   import type { Account } from "$lib/types/account";
   import { ActionType, type Action } from "$lib/types/actions";
   import type { CkBTCAdditionalCanisters } from "$lib/types/ckbtc-canisters";

frontend/src/tests/lib/derived/icrc-canisters.derived.spec.ts

@@ -0,0 +1,78 @@
+import { icrcCanistersStore } from "$lib/derived/icrc-canisters.derived";
+import { defaultIcrcCanistersStore } from "$lib/stores/default-icrc-canisters.store";
+import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+import { principal } from "$tests/mocks/sns-projects.mock";
+import { get } from "svelte/store";
+
+describe("icrcCanistersStore", () => {
+  const ledgerCanisterId = principal(0);
+  const indexCanisterId = principal(1);
+  const ledgerCanisterId2 = principal(2);
+
+  beforeEach(() => {
+    defaultIcrcCanistersStore.reset();
+    importedTokensStore.reset();
+  });
+
+  it("returns empty object when no icrc tokens are present", () => {
+    expect(get(icrcCanistersStore)).toEqual({});
+  });
+
+  it("return data from defaultIcrcCanistersStore", () => {
+    defaultIcrcCanistersStore.setCanisters({
+      ledgerCanisterId,
+      indexCanisterId,
+    });
+
+    expect(get(icrcCanistersStore)).toEqual({
+      [ledgerCanisterId.toText()]: {
+        ledgerCanisterId,
+        indexCanisterId,
+      },
+    });
+  });
+
+  it("return data from importedTokensStore", () => {
+    importedTokensStore.set({
+      importedTokens: [
+        {
+          ledgerCanisterId,
+          indexCanisterId: undefined,
+        },
+      ],
+      certified: true,
+    });
+
+    expect(get(icrcCanistersStore)).toEqual({
+      [ledgerCanisterId.toText()]: {
+        ledgerCanisterId,
+      },
+    });
+  });
+
+  it("return data from the defaultIcrcCanistersStore and the importedTokensStore", () => {
+    defaultIcrcCanistersStore.setCanisters({
+      ledgerCanisterId,
+      indexCanisterId,
+    });
+    importedTokensStore.set({
+      importedTokens: [
+        {
+          ledgerCanisterId: ledgerCanisterId2,
+          indexCanisterId: undefined,
+        },
+      ],
+      certified: true,
+    });
+
+    expect(get(icrcCanistersStore)).toEqual({
+      [ledgerCanisterId.toText()]: {
+        ledgerCanisterId,
+        indexCanisterId,
+      },
+      [ledgerCanisterId2.toText()]: {
+        ledgerCanisterId: ledgerCanisterId2,
+      },
+    });
+  });
+});