From 24ed8971abb616225c6ee341de2cb0aa14664c24 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Wed, 11 Sep 2024 23:28:15 +0200
Subject: [PATCH 01/24] New type UserTokenFailed

---
 .../TokensTable/TokenActionsCell.svelte       |  3 ++-
 .../TokensTable/TokenBalanceCell.svelte       | 16 ++++++++++----
 .../tokens/TokensTable/TokenTitleCell.svelte  |  8 +++++--
 frontend/src/lib/types/tokens-page.ts         |  8 ++++++-
 frontend/src/lib/utils/user-token.utils.ts    | 22 ++++++++++++++++---
 5 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
index 4f19fc9e284..4d3b48d53cc 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     UserTokenAction,
+    type UserTokenFailed,
     type UserTokenData,
     type UserTokenLoading,
   } from "$lib/types/tokens-page";
@@ -11,7 +12,7 @@
   import { nonNullish } from "@dfinity/utils";
   import type { SvelteComponent, ComponentType } from "svelte";
 
-  export let rowData: UserTokenData | UserTokenLoading;
+  export let rowData: UserTokenData | UserTokenLoading | UserTokenFailed;
 
   const actionMapper: Record<
     UserTokenAction,
diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte
index 47e828b8cf9..69d0230d9cf 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte
@@ -1,16 +1,24 @@
 <script lang="ts">
   import AmountDisplay from "$lib/components/ic/AmountDisplay.svelte";
-  import type { UserTokenData, UserTokenLoading } from "$lib/types/tokens-page";
+  import type {
+    UserTokenData,
+    UserTokenFailed,
+    UserTokenLoading,
+  } from "$lib/types/tokens-page";
   import { Spinner } from "@dfinity/gix-components";
+  import {
+    isUserTokenData,
+    isUserTokenLoading,
+  } from "$lib/utils/user-token.utils";
 
-  export let rowData: UserTokenData | UserTokenLoading;
+  export let rowData: UserTokenData | UserTokenLoading | UserTokenFailed;
 </script>
 
-{#if rowData.balance === "loading"}
+{#if isUserTokenLoading(rowData)}
   <span data-tid="token-value-label" class="balance-spinner"
     ><Spinner inline size="tiny" /></span
   >
-{:else}
+{:else if isUserTokenData(rowData)}
   <AmountDisplay singleLine amount={rowData.balance} />
 {/if}
 
diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
index acbe27f2577..fd2c0b179c3 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  import type { UserTokenData, UserTokenLoading } from "$lib/types/tokens-page";
+  import type {
+    UserTokenData,
+    UserTokenFailed,
+    UserTokenLoading,
+  } from "$lib/types/tokens-page";
   import { importedTokensStore } from "$lib/stores/imported-tokens.store";
   import { isImportedToken } from "$lib/utils/imported-tokens.utils";
   import Logo from "../../ui/Logo.svelte";
@@ -7,7 +11,7 @@
   import { Tag } from "@dfinity/gix-components";
   import { i18n } from "$lib/stores/i18n";
 
-  export let rowData: UserTokenData | UserTokenLoading;
+  export let rowData: UserTokenData | UserTokenLoading | UserTokenFailed;
 
   let importedToken = false;
   $: importedToken = isImportedToken({
diff --git a/frontend/src/lib/types/tokens-page.ts b/frontend/src/lib/types/tokens-page.ts
index fac663eee0b..ba4ffd67e03 100644
--- a/frontend/src/lib/types/tokens-page.ts
+++ b/frontend/src/lib/types/tokens-page.ts
@@ -40,6 +40,12 @@ export type UserTokenLoading = UserTokenBase & {
   domKey: string;
 };
 
+export type UserTokenFailed = UserTokenBase & {
+  balance: "failed";
+  actions: [];
+  domKey: string;
+};
+
 export type UserTokenData = UserTokenBase & {
   balance: TokenAmountV2 | UnavailableTokenAmount;
   // Identifier of the account related to the row (only if the row represents one account, not multiple)
@@ -51,5 +57,5 @@ export type UserTokenData = UserTokenBase & {
   domKey: string;
 };
 
-export type UserToken = UserTokenLoading | UserTokenData;
+export type UserToken = UserTokenLoading | UserTokenFailed | UserTokenData;
 export type TokensTableColumn = ResponsiveTableColumn<UserToken>;
diff --git a/frontend/src/lib/utils/user-token.utils.ts b/frontend/src/lib/utils/user-token.utils.ts
index 08379d7f9d7..aa8dd662466 100644
--- a/frontend/src/lib/utils/user-token.utils.ts
+++ b/frontend/src/lib/utils/user-token.utils.ts
@@ -1,7 +1,23 @@
-import type { UserTokenData, UserTokenLoading } from "$lib/types/tokens-page";
+import type {
+  UserTokenData,
+  UserTokenFailed,
+  UserTokenLoading,
+} from "$lib/types/tokens-page";
+
+export const isUserTokenLoading = (
+  userToken: UserTokenData | UserTokenLoading | UserTokenFailed
+): userToken is UserTokenLoading => {
+  return userToken.balance === "loading";
+};
+
+export const isUserTokenFailed = (
+  userToken: UserTokenData | UserTokenLoading | UserTokenFailed
+): userToken is UserTokenFailed => {
+  return userToken.balance === "failed";
+};
 
 export const isUserTokenData = (
-  userToken: UserTokenData | UserTokenLoading
+  userToken: UserTokenData | UserTokenLoading | UserTokenFailed
 ): userToken is UserTokenData => {
-  return userToken.balance !== "loading";
+  return !isUserTokenLoading(userToken) && !isUserTokenFailed(userToken);
 };

From d7f8ff8b02e037296e2bc46948a5c9432f61551c Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Wed, 11 Sep 2024 23:51:02 +0200
Subject: [PATCH 02/24] Add UserTokenFailed records to the table

---
 .../lib/derived/tokens-list-user.derived.ts    | 18 ++++++++++++++----
 frontend/src/lib/utils/user-token.utils.ts     | 13 +++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/derived/tokens-list-user.derived.ts b/frontend/src/lib/derived/tokens-list-user.derived.ts
index 661ac4c2900..9b6c7360767 100644
--- a/frontend/src/lib/derived/tokens-list-user.derived.ts
+++ b/frontend/src/lib/derived/tokens-list-user.derived.ts
@@ -1,4 +1,5 @@
 import { OWN_CANISTER_ID_TEXT } from "$lib/constants/canister-ids.constants";
+import { failedImportedTokenLedgerIdsStore } from "$lib/stores/imported-tokens.store";
 import type { IcrcTokenMetadata } from "$lib/types/icrc";
 import {
   UserTokenAction,
@@ -8,6 +9,7 @@ import {
 import { sumAccounts } from "$lib/utils/accounts.utils";
 import { buildAccountsUrl, buildWalletUrl } from "$lib/utils/navigation.utils";
 import { isUniverseNns } from "$lib/utils/universe.utils";
+import { toUserTokenFailed } from "$lib/utils/user-token.utils";
 import { TokenAmountV2, isNullish } from "@dfinity/utils";
 import { derived, type Readable } from "svelte/store";
 import type { UniversesAccounts } from "./accounts-list.derived";
@@ -75,16 +77,24 @@ export const tokensListUserStore = derived<
     Readable<UserTokenBase[]>,
     Readable<UniversesAccounts>,
     Readable<Record<string, IcrcTokenMetadata>>,
+    Readable<Array<string>>,
   ],
   UserToken[]
 >(
-  [tokensListBaseStore, universesAccountsStore, tokensByUniverseIdStore],
-  ([tokensList, accounts, tokensByUniverse]) =>
-    tokensList.map((baseTokenData) =>
+  [
+    tokensListBaseStore,
+    universesAccountsStore,
+    tokensByUniverseIdStore,
+    failedImportedTokenLedgerIdsStore,
+  ],
+  ([tokensList, accounts, tokensByUniverse, failedImportedTokenLedgerIds]) => [
+    ...tokensList.map((baseTokenData) =>
       convertToUserTokenData({
         baseTokenData,
         accounts,
         tokensByUniverse,
       })
-    )
+    ),
+    ...failedImportedTokenLedgerIds.map(toUserTokenFailed),
+  ]
 );
diff --git a/frontend/src/lib/utils/user-token.utils.ts b/frontend/src/lib/utils/user-token.utils.ts
index aa8dd662466..df0df9cf985 100644
--- a/frontend/src/lib/utils/user-token.utils.ts
+++ b/frontend/src/lib/utils/user-token.utils.ts
@@ -3,6 +3,7 @@ import type {
   UserTokenFailed,
   UserTokenLoading,
 } from "$lib/types/tokens-page";
+import { Principal } from "@dfinity/principal";
 
 export const isUserTokenLoading = (
   userToken: UserTokenData | UserTokenLoading | UserTokenFailed
@@ -21,3 +22,15 @@ export const isUserTokenData = (
 ): userToken is UserTokenData => {
   return !isUserTokenLoading(userToken) && !isUserTokenFailed(userToken);
 };
+
+export const toUserTokenFailed = (
+  ledgerCanisterIdText: string
+): UserTokenFailed => ({
+  universeId: Principal.fromText(ledgerCanisterIdText),
+  // Title will be used for sorting.
+  title: ledgerCanisterIdText,
+  logo: "",
+  balance: "failed",
+  domKey: ledgerCanisterIdText,
+  actions: [],
+});

From eb8367fd8ee6749208ed1c577a6f3213702e5e4e Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Wed, 11 Sep 2024 23:54:17 +0200
Subject: [PATCH 03/24] Display failed token info

---
 .../tokens/TokensTable/TokenTitleCell.svelte  | 49 ++++++++++++++-----
 1 file changed, 38 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
index fd2c0b179c3..fb97d443239 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
@@ -6,10 +6,13 @@
   } from "$lib/types/tokens-page";
   import { importedTokensStore } from "$lib/stores/imported-tokens.store";
   import { isImportedToken } from "$lib/utils/imported-tokens.utils";
-  import Logo from "../../ui/Logo.svelte";
+  import Logo from "$lib/components/ui/Logo.svelte";
   import { nonNullish } from "@dfinity/utils";
-  import { Tag } from "@dfinity/gix-components";
+  import { IconError, IconWarning, Tag } from "@dfinity/gix-components";
   import { i18n } from "$lib/stores/i18n";
+  import LogoWrapper from "$lib/components/ui/LogoWrapper.svelte";
+  import Hash from "$lib/components/ui/Hash.svelte";
+  import { isUserTokenFailed } from "$lib/utils/user-token.utils";
 
   export let rowData: UserTokenData | UserTokenLoading | UserTokenFailed;
 
@@ -21,18 +24,37 @@
 </script>
 
 <div class="title-logo-wrapper">
-  <Logo src={rowData.logo} alt={rowData.title} size="medium" framed />
-  <div class="title-wrapper">
-    <h5 data-tid="project-name">{rowData.title}</h5>
-    {#if nonNullish(rowData.subtitle)}
-      <span data-tid="project-subtitle" class="description"
-        >{rowData.subtitle}</span
-      >
-    {/if}
-  </div>
+  {#if isUserTokenFailed(rowData)}
+    <LogoWrapper size="medium" framed testId="failed-logo">
+      <div data-tid="vote-icon">
+        <IconWarning size="24px" />
+      </div>
+    </LogoWrapper>
+    <Hash
+      testId="failed-ledger-canister-id"
+      text={`${rowData.universeId.toText()}`}
+      tagName="span"
+      splitLength={6}
+      tooltipTop
+      showCopy
+    />
+  {:else}
+    <Logo src={rowData.logo} alt={rowData.title} size="medium" framed />
+    <div class="title-wrapper">
+      <h5 data-tid="project-name">{rowData.title}</h5>
+      {#if nonNullish(rowData.subtitle)}
+        <span data-tid="project-subtitle" class="description"
+          >{rowData.subtitle}</span
+        >
+      {/if}
+    </div>
+  {/if}
   {#if importedToken}
     <Tag testId="imported-token-tag">{$i18n.import_token.imported_token}</Tag>
   {/if}
+  {#if isUserTokenFailed(rowData)}
+    <div class="failed-token-icon"><IconError size="20px" /></div>
+  {/if}
 </div>
 
 <style lang="scss">
@@ -51,4 +73,9 @@
       gap: var(--padding-0_5x);
     }
   }
+
+  .failed-token-icon {
+    color: var(--alert);
+    line-height: 0;
+  }
 </style>

From 5de0283f518db87c3159b34f6f43362bcef1d0d3 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Wed, 11 Sep 2024 23:54:35 +0200
Subject: [PATCH 04/24] Add compareFailedTokensLast for table sorting

---
 frontend/src/lib/utils/tokens-table.utils.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/lib/utils/tokens-table.utils.ts b/frontend/src/lib/utils/tokens-table.utils.ts
index 45e4e2c8f75..7c6c8ea4bed 100644
--- a/frontend/src/lib/utils/tokens-table.utils.ts
+++ b/frontend/src/lib/utils/tokens-table.utils.ts
@@ -7,6 +7,7 @@ import {
   mergeComparators,
 } from "$lib/utils/responsive-table.utils";
 import { TokenAmountV2 } from "@dfinity/utils";
+import { isUserTokenFailed } from "./user-token.utils";
 
 const getTokenBalanceOrZero = (token: UserToken) =>
   token.balance instanceof TokenAmountV2 ? token.balance.toUlps() : 0n;
@@ -15,6 +16,10 @@ export const compareTokensIcpFirst = createDescendingComparator(
   (token: UserToken) => token.universeId.toText() === OWN_CANISTER_ID_TEXT
 );
 
+export const compareFailedTokensLast = createAscendingComparator(
+  (token: UserToken) => isUserTokenFailed(token)
+);
+
 export const compareTokensWithBalanceOrImportedFirst = ({
   importedTokenIds,
 }: {
@@ -49,6 +54,7 @@ export const compareTokensForTokensTable = ({
 }) =>
   mergeComparators([
     compareTokensIcpFirst,
+    compareFailedTokensLast,
     compareTokensWithBalanceOrImportedFirst({ importedTokenIds }),
     compareTokensByImportance,
     compareTokensAlphabetically,

From 811fab5ee33578a6427c5016f9a60b79d3bdf641 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Thu, 12 Sep 2024 17:25:50 +0200
Subject: [PATCH 05/24] Use question-mark.svg for failed to load token

---
 frontend/src/lib/assets/question-mark.svg              |  5 ++---
 .../tokens/TokensTable/TokenTitleCell.svelte           | 10 ++--------
 frontend/src/lib/utils/tokens-table.utils.ts           |  2 +-
 frontend/src/lib/utils/user-token.utils.ts             |  3 ++-
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/assets/question-mark.svg b/frontend/src/lib/assets/question-mark.svg
index ce048bc98c7..3b6c2a8acb2 100644
--- a/frontend/src/lib/assets/question-mark.svg
+++ b/frontend/src/lib/assets/question-mark.svg
@@ -1,4 +1,3 @@
-<svg width="146" height="146" viewBox="0 0 146 146" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="73" cy="73" r="73" fill="black" />
-  <text x="50%" y="55%" text-anchor="middle" dy=".3em" fill="white" font-size="100" font-family="Arial" >?</text>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.84753 15.0655C8.78132 15.1387 8.71962 15.2158 8.66277 15.2965C8.6045 15.3823 8.55791 15.4755 8.5242 15.5736C8.47981 15.6609 8.44868 15.7543 8.43183 15.8507C8.42427 15.9532 8.42427 16.0562 8.43183 16.1587C8.42662 16.3606 8.46881 16.561 8.555 16.7437C8.62415 16.9348 8.73447 17.1083 8.87815 17.252C9.02183 17.3957 9.19535 17.506 9.38641 17.5751C9.57071 17.6566 9.76999 17.6987 9.97148 17.6987C10.173 17.6987 10.3723 17.6566 10.5566 17.5751C10.7476 17.506 10.9211 17.3957 11.0648 17.252C11.2085 17.1083 11.3188 16.9348 11.388 16.7437C11.4563 16.5565 11.4877 16.3578 11.4803 16.1587C11.4815 15.956 11.4427 15.7552 11.3661 15.5676C11.2894 15.38 11.1765 15.2094 11.0338 15.0655C10.8907 14.9212 10.7204 14.8067 10.5328 14.7285C10.3452 14.6503 10.1439 14.6101 9.94069 14.6101C9.73744 14.6101 9.53619 14.6503 9.34857 14.7285C9.16095 14.8067 8.99066 14.9212 8.84753 15.0655ZM9.94069 2.30176C9.12939 2.30124 8.33226 2.51442 7.62952 2.91984C6.92679 3.32527 6.34323 3.90864 5.93758 4.61124C5.82618 4.78648 5.75138 4.98245 5.71768 5.18735C5.68398 5.39224 5.69207 5.60184 5.74147 5.80353C5.79088 6.00522 5.88057 6.19483 6.00515 6.36096C6.12973 6.52709 6.28663 6.6663 6.46641 6.77022C6.64619 6.87414 6.84513 6.94061 7.05127 6.96565C7.2574 6.99069 7.46647 6.97377 7.6659 6.91592C7.86533 6.85806 8.051 6.76046 8.21173 6.62899C8.37246 6.49752 8.50494 6.3349 8.60119 6.1509C8.73684 5.91594 8.93217 5.721 9.16739 5.58581C9.40262 5.45063 9.66939 5.37999 9.94069 5.38107C10.349 5.38107 10.7406 5.54329 11.0294 5.83203C11.3181 6.12077 11.4803 6.51239 11.4803 6.92073C11.4803 7.32907 11.3181 7.72069 11.0294 8.00943C10.7406 8.29817 10.349 8.46038 9.94069 8.46038C9.53235 8.46038 9.14073 8.6226 8.85199 8.91134C8.56325 9.20008 8.40103 9.5917 8.40103 10V11.5397C8.40103 11.948 8.56325 12.3397 8.85199 12.6284C9.14073 12.9171 9.53235 13.0794 9.94069 13.0794C10.349 13.0794 10.7406 12.9171 11.0294 12.6284C11.3181 12.3397 11.4803 11.948 11.4803 11.5397V11.2626C12.4986 10.8931 13.3547 10.1774 13.8988 9.24079C14.4429 8.30412 14.6405 7.20601 14.4571 6.13841C14.2737 5.07081 13.7209 4.10164 12.8953 3.40033C12.0697 2.69901 11.0239 2.31016 9.94069 2.30176Z" fill="#3D4D99"/>
 </svg>
diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
index fb97d443239..26f0290f285 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
@@ -8,7 +8,7 @@
   import { isImportedToken } from "$lib/utils/imported-tokens.utils";
   import Logo from "$lib/components/ui/Logo.svelte";
   import { nonNullish } from "@dfinity/utils";
-  import { IconError, IconWarning, Tag } from "@dfinity/gix-components";
+  import { IconError, Tag } from "@dfinity/gix-components";
   import { i18n } from "$lib/stores/i18n";
   import LogoWrapper from "$lib/components/ui/LogoWrapper.svelte";
   import Hash from "$lib/components/ui/Hash.svelte";
@@ -24,22 +24,16 @@
 </script>
 
 <div class="title-logo-wrapper">
+  <Logo src={rowData.logo} alt={rowData.title} size="medium" framed />
   {#if isUserTokenFailed(rowData)}
-    <LogoWrapper size="medium" framed testId="failed-logo">
-      <div data-tid="vote-icon">
-        <IconWarning size="24px" />
-      </div>
-    </LogoWrapper>
     <Hash
       testId="failed-ledger-canister-id"
       text={`${rowData.universeId.toText()}`}
       tagName="span"
       splitLength={6}
       tooltipTop
-      showCopy
     />
   {:else}
-    <Logo src={rowData.logo} alt={rowData.title} size="medium" framed />
     <div class="title-wrapper">
       <h5 data-tid="project-name">{rowData.title}</h5>
       {#if nonNullish(rowData.subtitle)}
diff --git a/frontend/src/lib/utils/tokens-table.utils.ts b/frontend/src/lib/utils/tokens-table.utils.ts
index 7c6c8ea4bed..88ecfa0b343 100644
--- a/frontend/src/lib/utils/tokens-table.utils.ts
+++ b/frontend/src/lib/utils/tokens-table.utils.ts
@@ -54,8 +54,8 @@ export const compareTokensForTokensTable = ({
 }) =>
   mergeComparators([
     compareTokensIcpFirst,
-    compareFailedTokensLast,
     compareTokensWithBalanceOrImportedFirst({ importedTokenIds }),
+    compareFailedTokensLast,
     compareTokensByImportance,
     compareTokensAlphabetically,
   ]);
diff --git a/frontend/src/lib/utils/user-token.utils.ts b/frontend/src/lib/utils/user-token.utils.ts
index df0df9cf985..0932667e348 100644
--- a/frontend/src/lib/utils/user-token.utils.ts
+++ b/frontend/src/lib/utils/user-token.utils.ts
@@ -2,6 +2,7 @@ import type {
   UserTokenData,
   UserTokenFailed,
   UserTokenLoading,
+import UNKNOWN_LOGO from "$lib/assets/question-mark.svg";
 } from "$lib/types/tokens-page";
 import { Principal } from "@dfinity/principal";
 
@@ -29,7 +30,7 @@ export const toUserTokenFailed = (
   universeId: Principal.fromText(ledgerCanisterIdText),
   // Title will be used for sorting.
   title: ledgerCanisterIdText,
-  logo: "",
+  logo: UNKNOWN_LOGO,
   balance: "failed",
   domKey: ledgerCanisterIdText,
   actions: [],

From 99e258ff513ccd967abebc18b6af983d27f48a09 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Thu, 12 Sep 2024 17:26:30 +0200
Subject: [PATCH 06/24] style: change (i) icon colour

---
 .../src/lib/components/tokens/TokensTable/TokenTitleCell.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
index 26f0290f285..f11d5ead91b 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
@@ -69,7 +69,7 @@
   }
 
   .failed-token-icon {
-    color: var(--alert);
+    color: var(--orange);
     line-height: 0;
   }
 </style>

From e8362fa3b0c72ed095fd6cc9a4737d75e8fec890 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Thu, 12 Sep 2024 17:27:23 +0200
Subject: [PATCH 07/24] Add actions for failed imported token

---
 .../TokensTable/TokenActionsCell.svelte       | 16 +++++++++---
 .../actions/GoToDashboardButton.svelte        | 12 +++++++++
 .../TokensTable/actions/RemoveButton.svelte   | 26 +++++++++++++++++++
 frontend/src/lib/types/tokens-page.ts         |  4 ++-
 frontend/src/lib/utils/user-token.utils.ts    | 11 ++++----
 5 files changed, 60 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte
 create mode 100644 frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte

diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
index 4d3b48d53cc..2c1c61029f4 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
@@ -5,9 +5,14 @@
     type UserTokenData,
     type UserTokenLoading,
   } from "$lib/types/tokens-page";
-  import { isUserTokenData } from "$lib/utils/user-token.utils";
+  import {
+    isUserTokenData,
+    isUserTokenFailed,
+  } from "$lib/utils/user-token.utils";
+  import GoToDashboardButton from "./actions/GoToDashboardButton.svelte";
   import GoToDetailIcon from "./actions/GoToDetailIcon.svelte";
   import ReceiveButton from "./actions/ReceiveButton.svelte";
+  import RemoveButton from "./actions/RemoveButton.svelte";
   import SendButton from "./actions/SendButton.svelte";
   import { nonNullish } from "@dfinity/utils";
   import type { SvelteComponent, ComponentType } from "svelte";
@@ -21,10 +26,15 @@
     [UserTokenAction.GoToDetail]: GoToDetailIcon,
     [UserTokenAction.Receive]: ReceiveButton,
     [UserTokenAction.Send]: SendButton,
+    [UserTokenAction.GoToDashboard]: GoToDashboardButton,
+    [UserTokenAction.Remove]: RemoveButton,
   };
 
-  let userToken: UserTokenData | undefined;
-  $: userToken = isUserTokenData(rowData) ? rowData : undefined;
+  let userToken: UserTokenData | UserTokenFailed | undefined;
+  $: userToken =
+    isUserTokenData(rowData) || isUserTokenFailed(rowData)
+      ? rowData
+      : undefined;
 </script>
 
 {#if nonNullish(userToken)}
diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte
new file mode 100644
index 00000000000..63b60df9f60
--- /dev/null
+++ b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { UserTokenData } from "$lib/types/tokens-page";
+  import type { Principal } from "@dfinity/principal";
+  import LinkToDashboardCanister from "$lib/components/tokens/LinkToDashboardCanister.svelte";
+
+  export let userToken: UserTokenData;
+
+  let canisterId: Principal;
+  $: canisterId = userToken.universeId;
+</script>
+
+<LinkToDashboardCanister {canisterId} />
diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
new file mode 100644
index 00000000000..f619dd31ddc
--- /dev/null
+++ b/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { ActionType } from "$lib/types/actions";
+  import type { UserTokenData } from "$lib/types/tokens-page";
+  import { IconBin } from "@dfinity/gix-components";
+  import { createEventDispatcher } from "svelte";
+
+  export let userToken: UserTokenData;
+
+  const dispatcher = createEventDispatcher();
+</script>
+
+<button
+  class="icon-only remove-button"
+  data-tid="send-button-component"
+  on:click|stopPropagation|preventDefault={() => {
+    dispatcher("nnsAction", { type: ActionType, data: userToken });
+  }}
+>
+  <IconBin />
+</button>
+
+<style lang="scss">
+  .remove-button {
+    color: var(--negative-emphasis);
+  }
+</style>
diff --git a/frontend/src/lib/types/tokens-page.ts b/frontend/src/lib/types/tokens-page.ts
index ba4ffd67e03..5c7e3f99db5 100644
--- a/frontend/src/lib/types/tokens-page.ts
+++ b/frontend/src/lib/types/tokens-page.ts
@@ -16,6 +16,8 @@ export enum UserTokenAction {
   Send = "send",
   GoToDetail = "goToDetail",
   Receive = "receive",
+  GoToDashboard = "goToDashboard",
+  Remove = "remove",
 }
 
 export type UserTokenBase = {
@@ -42,7 +44,7 @@ export type UserTokenLoading = UserTokenBase & {
 
 export type UserTokenFailed = UserTokenBase & {
   balance: "failed";
-  actions: [];
+  actions: UserTokenAction[];
   domKey: string;
 };
 
diff --git a/frontend/src/lib/utils/user-token.utils.ts b/frontend/src/lib/utils/user-token.utils.ts
index 0932667e348..f351b0bab0e 100644
--- a/frontend/src/lib/utils/user-token.utils.ts
+++ b/frontend/src/lib/utils/user-token.utils.ts
@@ -1,8 +1,9 @@
-import type {
-  UserTokenData,
-  UserTokenFailed,
-  UserTokenLoading,
 import UNKNOWN_LOGO from "$lib/assets/question-mark.svg";
+import {
+  UserTokenAction,
+  type UserTokenData,
+  type UserTokenFailed,
+  type UserTokenLoading,
 } from "$lib/types/tokens-page";
 import { Principal } from "@dfinity/principal";
 
@@ -33,5 +34,5 @@ export const toUserTokenFailed = (
   logo: UNKNOWN_LOGO,
   balance: "failed",
   domKey: ledgerCanisterIdText,
-  actions: [],
+  actions: [UserTokenAction.GoToDashboard, UserTokenAction.Remove],
 });

From 665eb37a5dcbd1972ae2f6039281947b50e1e6bf Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Thu, 12 Sep 2024 17:27:36 +0200
Subject: [PATCH 08/24] Display unknown balance

---
 .../lib/components/tokens/TokensTable/TokenBalanceCell.svelte   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte
index 69d0230d9cf..b2df99ba43a 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte
@@ -20,6 +20,8 @@
   >
 {:else if isUserTokenData(rowData)}
   <AmountDisplay singleLine amount={rowData.balance} />
+{:else}
+  <span class="value">-/-</span>
 {/if}
 
 <style lang="scss">

From ce544fb51b84d64e831fa516aecbf68052b5c386 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Thu, 12 Sep 2024 17:41:55 +0200
Subject: [PATCH 09/24] style: Fix squashed logos on mobile

---
 .../src/lib/components/tokens/TokensTable/TokenTitleCell.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
index f11d5ead91b..cd1eede04a0 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
@@ -60,6 +60,8 @@
     display: flex;
     align-items: center;
     gap: var(--padding);
+    // Fix squashed logo for failed imported tokens caused by too many elements being displayed.
+    flex-wrap: wrap;
 
     .title-wrapper {
       display: flex;

From 6cc7aab140ed240fe5223ecda6c3c838adafc726 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Fri, 13 Sep 2024 10:15:49 +0200
Subject: [PATCH 10/24] Separate UserTokenFailedAction and UserTokenAction

UserTokenAction users should not be aware of UserTokenFailedAction.
---
 .../TokensTable/TokenActionsCell.svelte       | 30 +++++++++++++++----
 .../actions/GoToDashboardButton.svelte        |  4 +--
 .../TokensTable/actions/RemoveButton.svelte   | 11 +++----
 frontend/src/lib/types/tokens-page.ts         |  8 +++--
 frontend/src/lib/utils/user-token.utils.ts    |  4 +--
 5 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
index 2c1c61029f4..f1ec9ff772e 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
@@ -4,6 +4,7 @@
     type UserTokenFailed,
     type UserTokenData,
     type UserTokenLoading,
+    UserTokenFailedAction,
   } from "$lib/types/tokens-page";
   import {
     isUserTokenData,
@@ -26,8 +27,13 @@
     [UserTokenAction.GoToDetail]: GoToDetailIcon,
     [UserTokenAction.Receive]: ReceiveButton,
     [UserTokenAction.Send]: SendButton,
-    [UserTokenAction.GoToDashboard]: GoToDashboardButton,
-    [UserTokenAction.Remove]: RemoveButton,
+  };
+  const failedTokenActionMapper: Record<
+    UserTokenFailedAction,
+    ComponentType<SvelteComponent<{ userToken: UserTokenFailed }>>
+  > = {
+    [UserTokenFailedAction.GoToDashboard]: GoToDashboardButton,
+    [UserTokenFailedAction.Remove]: RemoveButton,
   };
 
   let userToken: UserTokenData | UserTokenFailed | undefined;
@@ -39,9 +45,23 @@
 
 {#if nonNullish(userToken)}
   <div class="container">
-    {#each userToken.actions as action}
-      <svelte:component this={actionMapper[action]} {userToken} on:nnsAction />
-    {/each}
+    {#if isUserTokenData(userToken)}
+      {#each userToken.actions as action}
+        <svelte:component
+          this={actionMapper[action]}
+          {userToken}
+          on:nnsAction
+        />
+      {/each}
+    {:else if isUserTokenFailed(userToken)}
+      {#each userToken.actions as action}
+        <svelte:component
+          this={failedTokenActionMapper[action]}
+          {userToken}
+          on:nnsAction
+        />
+      {/each}
+    {/if}
   </div>
 {/if}
 
diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte
index 63b60df9f60..3e7d9cbe9f7 100644
--- a/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { UserTokenData } from "$lib/types/tokens-page";
+  import type { UserTokenFailed } from "$lib/types/tokens-page";
   import type { Principal } from "@dfinity/principal";
   import LinkToDashboardCanister from "$lib/components/tokens/LinkToDashboardCanister.svelte";
 
-  export let userToken: UserTokenData;
+  export let userToken: UserTokenFailed;
 
   let canisterId: Principal;
   $: canisterId = userToken.universeId;
diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
index f619dd31ddc..10954ffadb3 100644
--- a/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
-  import { ActionType } from "$lib/types/actions";
-  import type { UserTokenData } from "$lib/types/tokens-page";
+  import type { UserTokenFailed } from "$lib/types/tokens-page";
   import { IconBin } from "@dfinity/gix-components";
-  import { createEventDispatcher } from "svelte";
 
-  export let userToken: UserTokenData;
-
-  const dispatcher = createEventDispatcher();
+  // svelte-ignore unused-export-let
+  export let userToken: UserTokenFailed;
 </script>
 
 <button
   class="icon-only remove-button"
   data-tid="send-button-component"
   on:click|stopPropagation|preventDefault={() => {
-    dispatcher("nnsAction", { type: ActionType, data: userToken });
+    // TODO: Implement remove imported token action
   }}
 >
   <IconBin />
diff --git a/frontend/src/lib/types/tokens-page.ts b/frontend/src/lib/types/tokens-page.ts
index 5c7e3f99db5..752b9818871 100644
--- a/frontend/src/lib/types/tokens-page.ts
+++ b/frontend/src/lib/types/tokens-page.ts
@@ -16,6 +16,9 @@ export enum UserTokenAction {
   Send = "send",
   GoToDetail = "goToDetail",
   Receive = "receive",
+}
+
+export enum UserTokenFailedAction {
   GoToDashboard = "goToDashboard",
   Remove = "remove",
 }
@@ -25,7 +28,7 @@ export type UserTokenBase = {
   title: string;
   subtitle?: string;
   logo: string;
-  actions: UserTokenAction[];
+  actions: Array<UserTokenAction | UserTokenFailedAction>;
 };
 
 /**
@@ -44,7 +47,7 @@ export type UserTokenLoading = UserTokenBase & {
 
 export type UserTokenFailed = UserTokenBase & {
   balance: "failed";
-  actions: UserTokenAction[];
+  actions: UserTokenFailedAction[];
   domKey: string;
 };
 
@@ -57,6 +60,7 @@ export type UserTokenData = UserTokenBase & {
   fee: TokenAmountV2;
   rowHref: string;
   domKey: string;
+  actions: UserTokenAction[];
 };
 
 export type UserToken = UserTokenLoading | UserTokenFailed | UserTokenData;
diff --git a/frontend/src/lib/utils/user-token.utils.ts b/frontend/src/lib/utils/user-token.utils.ts
index f351b0bab0e..332ef3b212a 100644
--- a/frontend/src/lib/utils/user-token.utils.ts
+++ b/frontend/src/lib/utils/user-token.utils.ts
@@ -1,6 +1,6 @@
 import UNKNOWN_LOGO from "$lib/assets/question-mark.svg";
 import {
-  UserTokenAction,
+  UserTokenFailedAction,
   type UserTokenData,
   type UserTokenFailed,
   type UserTokenLoading,
@@ -34,5 +34,5 @@ export const toUserTokenFailed = (
   logo: UNKNOWN_LOGO,
   balance: "failed",
   domKey: ledgerCanisterIdText,
-  actions: [UserTokenAction.GoToDashboard, UserTokenAction.Remove],
+  actions: [UserTokenFailedAction.GoToDashboard, UserTokenFailedAction.Remove],
 });

From 29610805f6629ef8dd95125bee46b14c5129fd3e Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Fri, 13 Sep 2024 10:39:17 +0200
Subject: [PATCH 11/24] Remove unused import

---
 .../src/lib/components/tokens/TokensTable/TokenTitleCell.svelte  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
index cd1eede04a0..9b6df4c9c16 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
@@ -10,7 +10,6 @@
   import { nonNullish } from "@dfinity/utils";
   import { IconError, Tag } from "@dfinity/gix-components";
   import { i18n } from "$lib/stores/i18n";
-  import LogoWrapper from "$lib/components/ui/LogoWrapper.svelte";
   import Hash from "$lib/components/ui/Hash.svelte";
   import { isUserTokenFailed } from "$lib/utils/user-token.utils";
 

From ce814afb16d6d8bb8c4c2d8285bf187fdab788b0 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Fri, 13 Sep 2024 12:12:46 +0200
Subject: [PATCH 12/24] Fix actions types

---
 frontend/src/lib/types/tokens-page.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/types/tokens-page.ts b/frontend/src/lib/types/tokens-page.ts
index 752b9818871..af82a3d2038 100644
--- a/frontend/src/lib/types/tokens-page.ts
+++ b/frontend/src/lib/types/tokens-page.ts
@@ -28,7 +28,7 @@ export type UserTokenBase = {
   title: string;
   subtitle?: string;
   logo: string;
-  actions: Array<UserTokenAction | UserTokenFailedAction>;
+  actions: Array<UserTokenAction>;
 };
 
 /**
@@ -45,9 +45,9 @@ export type UserTokenLoading = UserTokenBase & {
   domKey: string;
 };
 
-export type UserTokenFailed = UserTokenBase & {
+export type UserTokenFailed = Omit<UserTokenBase, "actions"> & {
   balance: "failed";
-  actions: UserTokenFailedAction[];
+  actions: Array<UserTokenFailedAction>;
   domKey: string;
 };
 

From 2a292539a5f1d9e96a057b091e1726027d73ad53 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Sun, 15 Sep 2024 10:34:01 +0200
Subject: [PATCH 13/24] Unify UserTokenActions

---
 .../TokensTable/TokenActionsCell.svelte       | 34 +++++--------------
 .../TokensTable/TokenBalanceCell.svelte       |  2 +-
 .../actions/GoToDashboardButton.svelte        |  4 +--
 .../TokensTable/actions/GoToDetailIcon.svelte |  4 +--
 .../TokensTable/actions/ReceiveButton.svelte  | 27 +++++++++------
 .../TokensTable/actions/RemoveButton.svelte   |  4 +--
 .../TokensTable/actions/SendButton.svelte     | 27 +++++++++------
 frontend/src/lib/types/tokens-page.ts         |  8 ++---
 frontend/src/lib/utils/user-token.utils.ts    |  4 +--
 9 files changed, 52 insertions(+), 62 deletions(-)

diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
index f1ec9ff772e..fb386169995 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte
@@ -4,7 +4,6 @@
     type UserTokenFailed,
     type UserTokenData,
     type UserTokenLoading,
-    UserTokenFailedAction,
   } from "$lib/types/tokens-page";
   import {
     isUserTokenData,
@@ -22,18 +21,15 @@
 
   const actionMapper: Record<
     UserTokenAction,
-    ComponentType<SvelteComponent<{ userToken: UserTokenData }>>
+    ComponentType<
+      SvelteComponent<{ userToken: UserTokenData | UserTokenFailed }>
+    >
   > = {
     [UserTokenAction.GoToDetail]: GoToDetailIcon,
     [UserTokenAction.Receive]: ReceiveButton,
     [UserTokenAction.Send]: SendButton,
-  };
-  const failedTokenActionMapper: Record<
-    UserTokenFailedAction,
-    ComponentType<SvelteComponent<{ userToken: UserTokenFailed }>>
-  > = {
-    [UserTokenFailedAction.GoToDashboard]: GoToDashboardButton,
-    [UserTokenFailedAction.Remove]: RemoveButton,
+    [UserTokenAction.GoToDashboard]: GoToDashboardButton,
+    [UserTokenAction.Remove]: RemoveButton,
   };
 
   let userToken: UserTokenData | UserTokenFailed | undefined;
@@ -45,23 +41,9 @@
 
 {#if nonNullish(userToken)}
   <div class="container">
-    {#if isUserTokenData(userToken)}
-      {#each userToken.actions as action}
-        <svelte:component
-          this={actionMapper[action]}
-          {userToken}
-          on:nnsAction
-        />
-      {/each}
-    {:else if isUserTokenFailed(userToken)}
-      {#each userToken.actions as action}
-        <svelte:component
-          this={failedTokenActionMapper[action]}
-          {userToken}
-          on:nnsAction
-        />
-      {/each}
-    {/if}
+    {#each userToken.actions as action}
+      <svelte:component this={actionMapper[action]} {userToken} on:nnsAction />
+    {/each}
   </div>
 {/if}
 
diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte
index b2df99ba43a..d58293bb304 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte
@@ -21,7 +21,7 @@
 {:else if isUserTokenData(rowData)}
   <AmountDisplay singleLine amount={rowData.balance} />
 {:else}
-  <span class="value">-/-</span>
+  <span data-tid="unavailable-balance" class="value">-/-</span>
 {/if}
 
 <style lang="scss">
diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte
index 3e7d9cbe9f7..003a5a0a1cb 100644
--- a/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { UserTokenFailed } from "$lib/types/tokens-page";
+  import type { UserTokenData, UserTokenFailed } from "$lib/types/tokens-page";
   import type { Principal } from "@dfinity/principal";
   import LinkToDashboardCanister from "$lib/components/tokens/LinkToDashboardCanister.svelte";
 
-  export let userToken: UserTokenFailed;
+  export let userToken: UserTokenData | UserTokenFailed;
 
   let canisterId: Principal;
   $: canisterId = userToken.universeId;
diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/GoToDetailIcon.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDetailIcon.svelte
index 68ab88a9780..56e5e9d4da0 100644
--- a/frontend/src/lib/components/tokens/TokensTable/actions/GoToDetailIcon.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDetailIcon.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { UserTokenData } from "$lib/types/tokens-page";
+  import type { UserTokenData, UserTokenFailed } from "$lib/types/tokens-page";
   import { IconRight } from "@dfinity/gix-components";
 
   // svelte-ignore unused-export-let
-  export let userToken: UserTokenData;
+  export let userToken: UserTokenData | UserTokenFailed;
 </script>
 
 <span data-tid="go-to-detail-icon-component">
diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/ReceiveButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/ReceiveButton.svelte
index d2c8846b8aa..370a708b057 100644
--- a/frontend/src/lib/components/tokens/TokensTable/actions/ReceiveButton.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/actions/ReceiveButton.svelte
@@ -1,20 +1,25 @@
 <script lang="ts">
   import { ActionType } from "$lib/types/actions";
-  import type { UserTokenData } from "$lib/types/tokens-page";
+  import type { UserTokenData, UserTokenFailed } from "$lib/types/tokens-page";
   import { IconQRCodeScanner } from "@dfinity/gix-components";
   import { createEventDispatcher } from "svelte";
+  import { isUserTokenData } from "$lib/utils/user-token.utils";
 
-  export let userToken: UserTokenData;
+  // The UserTokenFailed type was added to unify the action types.
+  // However, the Receive action is only applicable to UserTokenData due to the requirement for the account to be loaded.
+  export let userToken: UserTokenData | UserTokenFailed;
 
   const dispatcher = createEventDispatcher();
 </script>
 
-<button
-  class="icon-only"
-  data-tid="receive-button-component"
-  on:click|preventDefault|stopPropagation={() => {
-    dispatcher("nnsAction", { type: ActionType.Receive, data: userToken });
-  }}
->
-  <IconQRCodeScanner />
-</button>
+{#if isUserTokenData(userToken)}
+  <button
+    class="icon-only"
+    data-tid="receive-button-component"
+    on:click|preventDefault|stopPropagation={() => {
+      dispatcher("nnsAction", { type: ActionType.Receive, data: userToken });
+    }}
+  >
+    <IconQRCodeScanner />
+  </button>
+{/if}
diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
index 10954ffadb3..6179fddf478 100644
--- a/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { UserTokenFailed } from "$lib/types/tokens-page";
+  import type { UserTokenData, UserTokenFailed } from "$lib/types/tokens-page";
   import { IconBin } from "@dfinity/gix-components";
 
   // svelte-ignore unused-export-let
-  export let userToken: UserTokenFailed;
+  export let userToken: UserTokenData | UserTokenFailed;
 </script>
 
 <button
diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/SendButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/SendButton.svelte
index ccb85be8782..641b22e28c0 100644
--- a/frontend/src/lib/components/tokens/TokensTable/actions/SendButton.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/actions/SendButton.svelte
@@ -1,20 +1,25 @@
 <script lang="ts">
   import { ActionType } from "$lib/types/actions";
-  import type { UserTokenData } from "$lib/types/tokens-page";
+  import type { UserTokenData, UserTokenFailed } from "$lib/types/tokens-page";
   import { IconUp } from "@dfinity/gix-components";
   import { createEventDispatcher } from "svelte";
+  import { isUserTokenData } from "$lib/utils/user-token.utils";
 
-  export let userToken: UserTokenData;
+  // The UserTokenFailed type was added to unify the action types.
+  // However, the Receive action is only applicable to UserTokenData due to the requirement for the account to be loaded.
+  export let userToken: UserTokenData | UserTokenFailed;
 
   const dispatcher = createEventDispatcher();
 </script>
 
-<button
-  class="icon-only"
-  data-tid="send-button-component"
-  on:click|stopPropagation|preventDefault={() => {
-    dispatcher("nnsAction", { type: ActionType.Send, data: userToken });
-  }}
->
-  <IconUp />
-</button>
+{#if isUserTokenData(userToken)}
+  <button
+    class="icon-only"
+    data-tid="send-button-component"
+    on:click|stopPropagation|preventDefault={() => {
+      dispatcher("nnsAction", { type: ActionType.Send, data: userToken });
+    }}
+  >
+    <IconUp />
+  </button>
+{/if}
diff --git a/frontend/src/lib/types/tokens-page.ts b/frontend/src/lib/types/tokens-page.ts
index af82a3d2038..4a41ff36fe6 100644
--- a/frontend/src/lib/types/tokens-page.ts
+++ b/frontend/src/lib/types/tokens-page.ts
@@ -3,6 +3,7 @@
  *
  * - `UserTokenBase` is not used directly, but it is used to create the `UserTokenLoading` and `UserTokenData` types.
  * - `UserTokenLoading` is to render a loading row in the tokens table. Used when either balance or token are not present.
+ * - `UserTokenFailed` is to render a failed token row in the tokens table. Used when an error occurred while fetching the imported token data.
  * - `UserTokenData` is used to render a row in the tokens table. Used when both balance and token are present.
  * - `UserTokenAction` is a list of actions supported by the tokens page and hardcoded in the TokensTable.
  * - `UserToken` is the union of `UserTokenLoading` and `UserTokenData`.
@@ -16,9 +17,6 @@ export enum UserTokenAction {
   Send = "send",
   GoToDetail = "goToDetail",
   Receive = "receive",
-}
-
-export enum UserTokenFailedAction {
   GoToDashboard = "goToDashboard",
   Remove = "remove",
 }
@@ -28,7 +26,7 @@ export type UserTokenBase = {
   title: string;
   subtitle?: string;
   logo: string;
-  actions: Array<UserTokenAction>;
+  actions: UserTokenAction[];
 };
 
 /**
@@ -47,8 +45,8 @@ export type UserTokenLoading = UserTokenBase & {
 
 export type UserTokenFailed = Omit<UserTokenBase, "actions"> & {
   balance: "failed";
-  actions: Array<UserTokenFailedAction>;
   domKey: string;
+  actions: UserTokenAction[];
 };
 
 export type UserTokenData = UserTokenBase & {
diff --git a/frontend/src/lib/utils/user-token.utils.ts b/frontend/src/lib/utils/user-token.utils.ts
index 332ef3b212a..f351b0bab0e 100644
--- a/frontend/src/lib/utils/user-token.utils.ts
+++ b/frontend/src/lib/utils/user-token.utils.ts
@@ -1,6 +1,6 @@
 import UNKNOWN_LOGO from "$lib/assets/question-mark.svg";
 import {
-  UserTokenFailedAction,
+  UserTokenAction,
   type UserTokenData,
   type UserTokenFailed,
   type UserTokenLoading,
@@ -34,5 +34,5 @@ export const toUserTokenFailed = (
   logo: UNKNOWN_LOGO,
   balance: "failed",
   domKey: ledgerCanisterIdText,
-  actions: [UserTokenFailedAction.GoToDashboard, UserTokenFailedAction.Remove],
+  actions: [UserTokenAction.GoToDashboard, UserTokenAction.Remove],
 });

From 6ec688bb1a997b36d694feedcce03a7e500d2e43 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Sun, 15 Sep 2024 10:47:20 +0200
Subject: [PATCH 14/24] Add failed token tooltip

---
 .../components/tokens/TokensTable/TokenTitleCell.svelte  | 9 +++++++--
 frontend/src/lib/i18n/en.json                            | 3 ++-
 frontend/src/lib/types/i18n.d.ts                         | 1 +
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
index 9b6df4c9c16..48c3ac10314 100644
--- a/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte
@@ -8,7 +8,7 @@
   import { isImportedToken } from "$lib/utils/imported-tokens.utils";
   import Logo from "$lib/components/ui/Logo.svelte";
   import { nonNullish } from "@dfinity/utils";
-  import { IconError, Tag } from "@dfinity/gix-components";
+  import { IconError, Tag, Tooltip } from "@dfinity/gix-components";
   import { i18n } from "$lib/stores/i18n";
   import Hash from "$lib/components/ui/Hash.svelte";
   import { isUserTokenFailed } from "$lib/utils/user-token.utils";
@@ -46,7 +46,12 @@
     <Tag testId="imported-token-tag">{$i18n.import_token.imported_token}</Tag>
   {/if}
   {#if isUserTokenFailed(rowData)}
-    <div class="failed-token-icon"><IconError size="20px" /></div>
+    <Tooltip
+      id="failed-imported-token"
+      text={$i18n.import_token.failed_tooltip}
+    >
+      <div class="failed-token-icon"><IconError size="20px" /></div>
+    </Tooltip>
   {/if}
 </div>
 
diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json
index adbd29d3350..355217b288e 100644
--- a/frontend/src/lib/i18n/en.json
+++ b/frontend/src/lib/i18n/en.json
@@ -1060,6 +1060,7 @@
     "import_button": "Import",
     "link_to_dashboard": "https://dashboard.internetcomputer.org/canister/$canisterId",
     "add_index_canister": "Add Index Canister",
-    "add_index_description": "Transaction history is not available. To see this token’s transaction history in the NNS dapp, you need to provide an index canister. <strong>Note:</strong> not all tokens have index canisters."
+    "add_index_description": "Transaction history is not available. To see this token’s transaction history in the NNS dapp, you need to provide an index canister. <strong>Note:</strong> not all tokens have index canisters.",
+    "failed_tooltip": "The NNS dapp couldn’t load your token. Please try again later, or contact the developers."
   }
 }
diff --git a/frontend/src/lib/types/i18n.d.ts b/frontend/src/lib/types/i18n.d.ts
index b4b44a28101..d67d69155be 100644
--- a/frontend/src/lib/types/i18n.d.ts
+++ b/frontend/src/lib/types/i18n.d.ts
@@ -1120,6 +1120,7 @@ interface I18nImport_token {
   link_to_dashboard: string;
   add_index_canister: string;
   add_index_description: string;
+  failed_tooltip: string;
 }
 
 interface I18nNeuron_state {

From cc4656b77c7268bd8d0ddae0022d73eb95e7009a Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Sun, 15 Sep 2024 18:09:44 +0200
Subject: [PATCH 15/24] Move imported token remove logic to the confirmation
 modal

To reuse the logic in different places.
---
 .../components/accounts/IcrcWalletPage.svelte | 30 ----------------
 .../ImportTokenRemoveConfirmation.svelte      | 34 +++++++++++++++++--
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
index cf330465983..d1531849a65 100644
--- a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
+++ b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
@@ -29,8 +29,6 @@
   import WalletMorePopover from "./WalletMorePopover.svelte";
   import { isImportedToken as checkImportedToken } from "$lib/utils/imported-tokens.utils";
   import { importedTokensStore } from "$lib/stores/imported-tokens.store";
-  import { startBusy, stopBusy } from "$lib/stores/busy.store";
-  import { removeImportedTokens } from "$lib/services/imported-tokens.services";
   import ImportTokenRemoveConfirmation from "./ImportTokenRemoveConfirmation.svelte";
   import type { Universe } from "$lib/types/universe";
   import { selectableUniversesStore } from "$lib/derived/selectable-universes.derived";
@@ -168,33 +166,6 @@
   $: universe = $selectableUniversesStore.find(
     ({ canisterId }) => canisterId === ledgerCanisterId?.toText()
   );
-
-  const removeImportedToken = async () => {
-    // Just for type safety. This should never happen.
-    if (isNullish(ledgerCanisterId)) return;
-
-    startBusy({
-      initiator: "import-token-removing",
-      labelKey: "import_token.removing",
-    });
-
-    try {
-      const importedTokens = $importedTokensStore.importedTokens ?? [];
-      const { success } = await removeImportedTokens({
-        tokensToRemove: importedTokens.filter(
-          ({ ledgerCanisterId: id }) =>
-            id.toText() === ledgerCanisterId?.toText()
-        ),
-        importedTokens,
-      });
-
-      if (success) {
-        goto(AppPath.Tokens);
-      }
-    } finally {
-      stopBusy("import-token-removing");
-    }
-  };
 </script>
 
 <TestIdWrapper {testId}>
@@ -275,7 +246,6 @@
     <ImportTokenRemoveConfirmation
       {universe}
       on:nnsClose={() => (removeImportedTokenConfirmationVisible = false)}
-      on:nnsConfirm={removeImportedToken}
     />
   {/if}
 </TestIdWrapper>
diff --git a/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte b/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
index 1882d322e8f..1da4ba48554 100644
--- a/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
+++ b/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
@@ -5,14 +5,44 @@
   import { nonNullish } from "@dfinity/utils";
   import ConfirmationModal from "$lib/modals/common/ConfirmationModal.svelte";
   import { Tag } from "@dfinity/gix-components";
+  import { startBusy, stopBusy } from "$lib/stores/busy.store";
+  import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+  import { removeImportedTokens } from "$lib/services/imported-tokens.services";
+  import { AppPath } from "$lib/constants/routes.constants";
+  import { goto } from "$app/navigation";
 
-  export let universe: Universe | undefined;
+  export let universe: Universe;
+
+  const removeImportedToken = async () => {
+    const ledgerCanisterIdText = universe.canisterId;
+
+    startBusy({
+      initiator: "import-token-removing",
+      labelKey: "import_token.removing",
+    });
+
+    try {
+      const importedTokens = $importedTokensStore.importedTokens ?? [];
+      const { success } = await removeImportedTokens({
+        tokensToRemove: importedTokens.filter(
+          ({ ledgerCanisterId: id }) => id.toText() === ledgerCanisterIdText
+        ),
+        importedTokens,
+      });
+
+      if (success) {
+        goto(AppPath.Tokens);
+      }
+    } finally {
+      stopBusy("import-token-removing");
+    }
+  };
 </script>
 
 <ConfirmationModal
   testId="import-token-remove-confirmation-component"
   on:nnsClose
-  on:nnsConfirm
+  on:nnsConfirm={removeImportedToken}
   yesLabel={$i18n.core.remove}
 >
   <div class="content">

From 2474637647b868e6686ed70680c6c122222fe258 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Sun, 15 Sep 2024 18:34:51 +0200
Subject: [PATCH 16/24] Revert "Move imported token remove logic to the
 confirmation modal"

This reverts commit cc4656b77c7268bd8d0ddae0022d73eb95e7009a.
---
 .../components/accounts/IcrcWalletPage.svelte | 30 ++++++++++++++++
 .../ImportTokenRemoveConfirmation.svelte      | 34 ++-----------------
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
index d1531849a65..cf330465983 100644
--- a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
+++ b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
@@ -29,6 +29,8 @@
   import WalletMorePopover from "./WalletMorePopover.svelte";
   import { isImportedToken as checkImportedToken } from "$lib/utils/imported-tokens.utils";
   import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+  import { startBusy, stopBusy } from "$lib/stores/busy.store";
+  import { removeImportedTokens } from "$lib/services/imported-tokens.services";
   import ImportTokenRemoveConfirmation from "./ImportTokenRemoveConfirmation.svelte";
   import type { Universe } from "$lib/types/universe";
   import { selectableUniversesStore } from "$lib/derived/selectable-universes.derived";
@@ -166,6 +168,33 @@
   $: universe = $selectableUniversesStore.find(
     ({ canisterId }) => canisterId === ledgerCanisterId?.toText()
   );
+
+  const removeImportedToken = async () => {
+    // Just for type safety. This should never happen.
+    if (isNullish(ledgerCanisterId)) return;
+
+    startBusy({
+      initiator: "import-token-removing",
+      labelKey: "import_token.removing",
+    });
+
+    try {
+      const importedTokens = $importedTokensStore.importedTokens ?? [];
+      const { success } = await removeImportedTokens({
+        tokensToRemove: importedTokens.filter(
+          ({ ledgerCanisterId: id }) =>
+            id.toText() === ledgerCanisterId?.toText()
+        ),
+        importedTokens,
+      });
+
+      if (success) {
+        goto(AppPath.Tokens);
+      }
+    } finally {
+      stopBusy("import-token-removing");
+    }
+  };
 </script>
 
 <TestIdWrapper {testId}>
@@ -246,6 +275,7 @@
     <ImportTokenRemoveConfirmation
       {universe}
       on:nnsClose={() => (removeImportedTokenConfirmationVisible = false)}
+      on:nnsConfirm={removeImportedToken}
     />
   {/if}
 </TestIdWrapper>
diff --git a/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte b/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
index 1da4ba48554..1882d322e8f 100644
--- a/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
+++ b/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
@@ -5,44 +5,14 @@
   import { nonNullish } from "@dfinity/utils";
   import ConfirmationModal from "$lib/modals/common/ConfirmationModal.svelte";
   import { Tag } from "@dfinity/gix-components";
-  import { startBusy, stopBusy } from "$lib/stores/busy.store";
-  import { importedTokensStore } from "$lib/stores/imported-tokens.store";
-  import { removeImportedTokens } from "$lib/services/imported-tokens.services";
-  import { AppPath } from "$lib/constants/routes.constants";
-  import { goto } from "$app/navigation";
 
-  export let universe: Universe;
-
-  const removeImportedToken = async () => {
-    const ledgerCanisterIdText = universe.canisterId;
-
-    startBusy({
-      initiator: "import-token-removing",
-      labelKey: "import_token.removing",
-    });
-
-    try {
-      const importedTokens = $importedTokensStore.importedTokens ?? [];
-      const { success } = await removeImportedTokens({
-        tokensToRemove: importedTokens.filter(
-          ({ ledgerCanisterId: id }) => id.toText() === ledgerCanisterIdText
-        ),
-        importedTokens,
-      });
-
-      if (success) {
-        goto(AppPath.Tokens);
-      }
-    } finally {
-      stopBusy("import-token-removing");
-    }
-  };
+  export let universe: Universe | undefined;
 </script>
 
 <ConfirmationModal
   testId="import-token-remove-confirmation-component"
   on:nnsClose
-  on:nnsConfirm={removeImportedToken}
+  on:nnsConfirm
   yesLabel={$i18n.core.remove}
 >
   <div class="content">

From e481ec4259bc9f161c3169273719b9f57e668551 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Sun, 15 Sep 2024 18:39:58 +0200
Subject: [PATCH 17/24] Reapply "Move imported token remove logic to the
 confirmation modal"

This reverts commit 2474637647b868e6686ed70680c6c122222fe258.
---
 .../components/accounts/IcrcWalletPage.svelte | 30 ----------------
 .../ImportTokenRemoveConfirmation.svelte      | 34 +++++++++++++++++--
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
index cf330465983..d1531849a65 100644
--- a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
+++ b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
@@ -29,8 +29,6 @@
   import WalletMorePopover from "./WalletMorePopover.svelte";
   import { isImportedToken as checkImportedToken } from "$lib/utils/imported-tokens.utils";
   import { importedTokensStore } from "$lib/stores/imported-tokens.store";
-  import { startBusy, stopBusy } from "$lib/stores/busy.store";
-  import { removeImportedTokens } from "$lib/services/imported-tokens.services";
   import ImportTokenRemoveConfirmation from "./ImportTokenRemoveConfirmation.svelte";
   import type { Universe } from "$lib/types/universe";
   import { selectableUniversesStore } from "$lib/derived/selectable-universes.derived";
@@ -168,33 +166,6 @@
   $: universe = $selectableUniversesStore.find(
     ({ canisterId }) => canisterId === ledgerCanisterId?.toText()
   );
-
-  const removeImportedToken = async () => {
-    // Just for type safety. This should never happen.
-    if (isNullish(ledgerCanisterId)) return;
-
-    startBusy({
-      initiator: "import-token-removing",
-      labelKey: "import_token.removing",
-    });
-
-    try {
-      const importedTokens = $importedTokensStore.importedTokens ?? [];
-      const { success } = await removeImportedTokens({
-        tokensToRemove: importedTokens.filter(
-          ({ ledgerCanisterId: id }) =>
-            id.toText() === ledgerCanisterId?.toText()
-        ),
-        importedTokens,
-      });
-
-      if (success) {
-        goto(AppPath.Tokens);
-      }
-    } finally {
-      stopBusy("import-token-removing");
-    }
-  };
 </script>
 
 <TestIdWrapper {testId}>
@@ -275,7 +246,6 @@
     <ImportTokenRemoveConfirmation
       {universe}
       on:nnsClose={() => (removeImportedTokenConfirmationVisible = false)}
-      on:nnsConfirm={removeImportedToken}
     />
   {/if}
 </TestIdWrapper>
diff --git a/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte b/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
index 1882d322e8f..1da4ba48554 100644
--- a/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
+++ b/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
@@ -5,14 +5,44 @@
   import { nonNullish } from "@dfinity/utils";
   import ConfirmationModal from "$lib/modals/common/ConfirmationModal.svelte";
   import { Tag } from "@dfinity/gix-components";
+  import { startBusy, stopBusy } from "$lib/stores/busy.store";
+  import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+  import { removeImportedTokens } from "$lib/services/imported-tokens.services";
+  import { AppPath } from "$lib/constants/routes.constants";
+  import { goto } from "$app/navigation";
 
-  export let universe: Universe | undefined;
+  export let universe: Universe;
+
+  const removeImportedToken = async () => {
+    const ledgerCanisterIdText = universe.canisterId;
+
+    startBusy({
+      initiator: "import-token-removing",
+      labelKey: "import_token.removing",
+    });
+
+    try {
+      const importedTokens = $importedTokensStore.importedTokens ?? [];
+      const { success } = await removeImportedTokens({
+        tokensToRemove: importedTokens.filter(
+          ({ ledgerCanisterId: id }) => id.toText() === ledgerCanisterIdText
+        ),
+        importedTokens,
+      });
+
+      if (success) {
+        goto(AppPath.Tokens);
+      }
+    } finally {
+      stopBusy("import-token-removing");
+    }
+  };
 </script>
 
 <ConfirmationModal
   testId="import-token-remove-confirmation-component"
   on:nnsClose
-  on:nnsConfirm
+  on:nnsConfirm={removeImportedToken}
   yesLabel={$i18n.core.remove}
 >
   <div class="content">

From a24c9e1954b0702090f3bcc617e2918cb957986e Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Sun, 15 Sep 2024 22:12:39 +0200
Subject: [PATCH 18/24] refactor: move token remove logic to confirmation spec

---
 .../components/accounts/IcrcWalletPage.svelte |   3 +-
 .../ImportTokenRemoveConfirmation.svelte      |  12 +-
 .../ImportTokenRemoveConfirmation.spec.ts     | 194 +++++++++++++++++-
 .../src/tests/lib/pages/IcrcWallet.spec.ts    | 103 +---------
 4 files changed, 203 insertions(+), 109 deletions(-)

diff --git a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
index d1531849a65..81606bdca38 100644
--- a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
+++ b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
@@ -21,7 +21,7 @@
   } from "$lib/utils/accounts.utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { IconDots, Island, Spinner } from "@dfinity/gix-components";
-  import type { Principal } from "@dfinity/principal";
+  import { Principal } from "@dfinity/principal";
   import { TokenAmountV2, isNullish, nonNullish } from "@dfinity/utils";
   import type { Writable } from "svelte/store";
   import { ENABLE_IMPORT_TOKEN } from "$lib/stores/feature-flags.store";
@@ -245,6 +245,7 @@
   {#if removeImportedTokenConfirmationVisible && nonNullish(universe)}
     <ImportTokenRemoveConfirmation
       {universe}
+      ledgerCanisterId={Principal.fromText(universe.canisterId)}
       on:nnsClose={() => (removeImportedTokenConfirmationVisible = false)}
     />
   {/if}
diff --git a/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte b/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
index 1da4ba48554..4294e2cce03 100644
--- a/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
+++ b/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
@@ -10,12 +10,14 @@
   import { removeImportedTokens } from "$lib/services/imported-tokens.services";
   import { AppPath } from "$lib/constants/routes.constants";
   import { goto } from "$app/navigation";
+  import { Principal } from "@dfinity/principal";
+  import { createEventDispatcher } from "svelte";
 
-  export let universe: Universe;
+  export let universe: Universe | undefined = undefined;
+  export let ledgerCanisterId: Principal;
 
+  const dispatch = createEventDispatcher();
   const removeImportedToken = async () => {
-    const ledgerCanisterIdText = universe.canisterId;
-
     startBusy({
       initiator: "import-token-removing",
       labelKey: "import_token.removing",
@@ -25,12 +27,14 @@
       const importedTokens = $importedTokensStore.importedTokens ?? [];
       const { success } = await removeImportedTokens({
         tokensToRemove: importedTokens.filter(
-          ({ ledgerCanisterId: id }) => id.toText() === ledgerCanisterIdText
+          ({ ledgerCanisterId: id }) =>
+            id.toText() === ledgerCanisterId.toText()
         ),
         importedTokens,
       });
 
       if (success) {
+        dispatch("nnsClose");
         goto(AppPath.Tokens);
       }
     } finally {
diff --git a/frontend/src/tests/lib/components/accounts/ImportTokenRemoveConfirmation.spec.ts b/frontend/src/tests/lib/components/accounts/ImportTokenRemoveConfirmation.spec.ts
index 69082edae60..9efcc9d5af1 100644
--- a/frontend/src/tests/lib/components/accounts/ImportTokenRemoveConfirmation.spec.ts
+++ b/frontend/src/tests/lib/components/accounts/ImportTokenRemoveConfirmation.spec.ts
@@ -1,12 +1,27 @@
+import * as importedTokensApi from "$lib/api/imported-tokens.api";
 import ImportTokenRemoveConfirmation from "$lib/components/accounts/ImportTokenRemoveConfirmation.svelte";
+import { AppPath } from "$lib/constants/routes.constants";
+import { pageStore } from "$lib/derived/page.derived";
+import { icrcAccountsStore } from "$lib/stores/icrc-accounts.store";
+import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+import { tokensStore } from "$lib/stores/tokens.store";
 import type { Universe } from "$lib/types/universe";
+import { page } from "$mocks/$app/stores";
+import { mockIdentity, resetIdentity } from "$tests/mocks/auth.store.mock";
+import { mockIcrcMainAccount } from "$tests/mocks/icrc-accounts.mock";
 import { principal } from "$tests/mocks/sns-projects.mock";
+import { mockUniversesTokens } from "$tests/mocks/tokens.mock";
 import { ImportTokenRemoveConfirmationPo } from "$tests/page-objects/ImportTokenRemoveConfirmation.page-object";
 import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
 import { render } from "$tests/utils/svelte.test-utils";
+import { runResolvedPromises } from "$tests/utils/timers.test-utils";
+import { busyStore } from "@dfinity/gix-components";
+import { Principal } from "@dfinity/principal";
+import { get } from "svelte/store";
 
 describe("ImportTokenRemoveConfirmation", () => {
-  const ledgerCanisterId = principal(1);
+  const ledgerCanisterId = principal(0);
+  const ledgerCanisterId2 = principal(1);
   const tokenLogo = "data:image/svg+xml;base64,PHN2ZyB3...";
   const tokenName = "ckTest";
   const mockUniverse: Universe = {
@@ -14,15 +29,19 @@ describe("ImportTokenRemoveConfirmation", () => {
     title: tokenName,
     logo: tokenLogo,
   };
-  const renderComponent = () => {
+  const renderComponent = (
+    props: {
+      ledgerCanisterId: Principal;
+      universe: Universe;
+    } = {
+      ledgerCanisterId: ledgerCanisterId,
+      universe: mockUniverse,
+    }
+  ) => {
     const { container, component } = render(ImportTokenRemoveConfirmation, {
-      props: {
-        universe: mockUniverse,
-      },
+      props,
     });
 
-    const nnsConfirm = vi.fn();
-    component.$on("nnsConfirm", nnsConfirm);
     const nnsClose = vi.fn();
     component.$on("nnsClose", nnsClose);
 
@@ -30,13 +49,49 @@ describe("ImportTokenRemoveConfirmation", () => {
       po: ImportTokenRemoveConfirmationPo.under(
         new JestPageObjectElement(container)
       ),
-      nnsConfirm,
       nnsClose,
     };
   };
 
   beforeEach(() => {
+    vi.clearAllMocks();
+    vi.clearAllTimers();
     vi.restoreAllMocks();
+    resetIdentity();
+    busyStore.resetForTesting();
+    page.mock({
+      data: { universe: ledgerCanisterId.toText() },
+      routeId: AppPath.Wallet,
+    });
+    tokensStore.setTokens(mockUniversesTokens);
+    icrcAccountsStore.set({
+      accounts: {
+        accounts: [mockIcrcMainAccount],
+        certified: true,
+      },
+      ledgerCanisterId,
+    });
+
+    importedTokensStore.set({
+      importedTokens: [
+        {
+          ledgerCanisterId,
+          indexCanisterId: undefined,
+        },
+        {
+          ledgerCanisterId: ledgerCanisterId2,
+          indexCanisterId: undefined,
+        },
+      ],
+      certified: true,
+    });
+    icrcAccountsStore.set({
+      accounts: {
+        accounts: [mockIcrcMainAccount],
+        certified: true,
+      },
+      ledgerCanisterId,
+    });
   });
 
   it("should render token logo", async () => {
@@ -50,14 +105,131 @@ describe("ImportTokenRemoveConfirmation", () => {
   });
 
   it("should dispatch events", async () => {
-    const { po, nnsClose, nnsConfirm } = renderComponent();
+    const { po, nnsClose } = renderComponent();
 
     expect(nnsClose).not.toBeCalled();
     await po.clickNo();
     expect(nnsClose).toBeCalledTimes(1);
 
-    expect(nnsConfirm).not.toBeCalled();
+    nnsClose.mockClear();
+  });
+
+  it("should work w/o universe", async () => {
+    const { po, nnsClose } = renderComponent({
+      ledgerCanisterId,
+      universe: undefined,
+    });
+    expect(await po.getUniverseSummaryPo().isPresent()).toEqual(false);
+    expect(nnsClose).not.toBeCalled();
+    await po.clickNo();
+    expect(nnsClose).toBeCalledTimes(1);
+  });
+
+  it("should remove imported tokens", async () => {
+    let resolveSetImportedTokens;
+    const spyOnSetImportedTokens = vi
+      .spyOn(importedTokensApi, "setImportedTokens")
+      .mockImplementation(
+        () =>
+          new Promise<void>((resolve) => (resolveSetImportedTokens = resolve))
+      );
+    const spyOnGetImportedTokens = vi
+      .spyOn(importedTokensApi, "getImportedTokens")
+      .mockResolvedValue({
+        imported_tokens: [
+          {
+            ledger_canister_id: ledgerCanisterId2,
+            index_canister_id: [],
+          },
+        ],
+      });
+
+    const { po, nnsClose } = await renderComponent();
+
+    expect(get(pageStore).path).toEqual(AppPath.Wallet);
+    expect(nnsClose).toBeCalledTimes(0);
+    expect(get(busyStore)).toEqual([]);
+    await po.clickYes();
+    expect(get(importedTokensStore).importedTokens).toEqual([
+      {
+        ledgerCanisterId,
+        indexCanisterId: undefined,
+      },
+      {
+        ledgerCanisterId: ledgerCanisterId2,
+        indexCanisterId: undefined,
+      },
+    ]);
+    expect(get(busyStore)).toEqual([
+      {
+        initiator: "import-token-removing",
+        text: "Removing imported token...",
+      },
+    ]);
+
+    resolveSetImportedTokens();
+    await runResolvedPromises();
+
+    // The token should be removed.
+    expect(spyOnSetImportedTokens).toBeCalledTimes(1);
+    expect(spyOnSetImportedTokens).toHaveBeenCalledWith({
+      identity: mockIdentity,
+      importedTokens: [
+        {
+          ledger_canister_id: ledgerCanisterId2,
+          index_canister_id: [],
+        },
+      ],
+    });
+    expect(spyOnGetImportedTokens).toBeCalledTimes(2);
+
+    expect(get(busyStore)).toEqual([]);
+    expect(get(pageStore).path).toEqual(AppPath.Tokens);
+    expect(get(importedTokensStore).importedTokens).toEqual([
+      {
+        ledgerCanisterId: ledgerCanisterId2,
+        indexCanisterId: undefined,
+      },
+    ]);
+    expect(nnsClose).toBeCalledTimes(1);
+  });
+
+  it("should stay on the same page when removal is unsuccessful", async () => {
+    vi.spyOn(console, "error").mockReturnValue();
+    const spyOnSetImportedTokens = vi
+      .spyOn(importedTokensApi, "setImportedTokens")
+      .mockRejectedValue(new Error());
+    const spyOnGetImportedTokens = vi.spyOn(
+      importedTokensApi,
+      "getImportedTokens"
+    );
+    const { po } = await renderComponent();
+    expect(get(importedTokensStore).importedTokens).toEqual([
+      {
+        ledgerCanisterId,
+        indexCanisterId: undefined,
+      },
+      {
+        ledgerCanisterId: ledgerCanisterId2,
+        indexCanisterId: undefined,
+      },
+    ]);
     await po.clickYes();
-    expect(nnsConfirm).toBeCalledTimes(1);
+    await runResolvedPromises();
+    expect(spyOnSetImportedTokens).toBeCalledTimes(1);
+    // should stay on wallet page
+    expect(get(pageStore).path).toEqual(AppPath.Wallet);
+    // without data change
+    expect(spyOnGetImportedTokens).toBeCalledTimes(0);
+    expect(get(importedTokensStore).importedTokens).toEqual([
+      {
+        ledgerCanisterId,
+        indexCanisterId: undefined,
+      },
+      {
+        ledgerCanisterId: ledgerCanisterId2,
+        indexCanisterId: undefined,
+      },
+    ]);
   });
 });
diff --git a/frontend/src/tests/lib/pages/IcrcWallet.spec.ts b/frontend/src/tests/lib/pages/IcrcWallet.spec.ts
index 9cbd8a4e10f..e3f5c8c947c 100644
--- a/frontend/src/tests/lib/pages/IcrcWallet.spec.ts
+++ b/frontend/src/tests/lib/pages/IcrcWallet.spec.ts
@@ -529,23 +529,15 @@ describe("IcrcWallet", () => {
     });
 
     it("should remove imported tokens", async () => {
-      let resolveSetImportedTokens;
-      const spyOnSetImportedTokens = vi
-        .spyOn(importedTokensApi, "setImportedTokens")
-        .mockImplementation(
-          () =>
-            new Promise<void>((resolve) => (resolveSetImportedTokens = resolve))
-        );
-      const spyOnGetImportedTokens = vi
-        .spyOn(importedTokensApi, "getImportedTokens")
-        .mockResolvedValue({
-          imported_tokens: [
-            {
-              ledger_canister_id: ledgerCanisterId2,
-              index_canister_id: [],
-            },
-          ],
-        });
+      vi.spyOn(importedTokensApi, "setImportedTokens").mockResolvedValue();
+      vi.spyOn(importedTokensApi, "getImportedTokens").mockResolvedValue({
+        imported_tokens: [
+          {
+            ledger_canister_id: ledgerCanisterId2,
+            index_canister_id: [],
+          },
+        ],
+      });
 
       const po = await renderWallet({});
       const morePopoverPo = po.getWalletMorePopoverPo();
@@ -559,13 +551,8 @@ describe("IcrcWallet", () => {
       await morePopoverPo.getRemoveButtonPo().click();
       await runResolvedPromises();
 
-      expect(get(pageStore).path).toEqual(AppPath.Wallet);
-      expect(get(busyStore)).toEqual([]);
-
       // Confirm the removal.
       expect(await confirmationPo.isPresent()).toBe(true);
-      await confirmationPo.clickYes();
-
       expect(get(importedTokensStore).importedTokens).toEqual([
         {
           ledgerCanisterId,
@@ -576,80 +563,10 @@ describe("IcrcWallet", () => {
           indexCanisterId: undefined,
         },
       ]);
-      expect(get(busyStore)).toEqual([
-        {
-          initiator: "import-token-removing",
-          text: "Removing imported token...",
-        },
-      ]);
-
-      resolveSetImportedTokens();
-      await runResolvedPromises();
-
-      // The token should be removed.
-      expect(spyOnSetImportedTokens).toBeCalledTimes(1);
-      expect(spyOnSetImportedTokens).toHaveBeenCalledWith({
-        identity: mockIdentity,
-        importedTokens: [
-          {
-            ledger_canister_id: ledgerCanisterId2,
-            index_canister_id: [],
-          },
-        ],
-      });
-      expect(spyOnGetImportedTokens).toBeCalledTimes(2);
-
-      expect(get(busyStore)).toEqual([]);
-      expect(get(pageStore).path).toEqual(AppPath.Tokens);
-      expect(get(importedTokensStore).importedTokens).toEqual([
-        {
-          ledgerCanisterId: ledgerCanisterId2,
-          indexCanisterId: undefined,
-        },
-      ]);
-    });
-
-    it("should stay on the same page when removal is unsuccessful", async () => {
-      vi.spyOn(console, "error").mockReturnValue();
-      const spyOnSetImportedTokens = vi
-        .spyOn(importedTokensApi, "setImportedTokens")
-        .mockRejectedValue(new Error());
-      const spyOnGetImportedTokens = vi.spyOn(
-        importedTokensApi,
-        "getImportedTokens"
-      );
-
-      expect(get(importedTokensStore).importedTokens).toEqual([
-        {
-          ledgerCanisterId,
-          indexCanisterId: undefined,
-        },
-        {
-          ledgerCanisterId: ledgerCanisterId2,
-          indexCanisterId: undefined,
-        },
-      ]);
-
-      const po = await renderWallet({});
-      const morePopoverPo = po.getWalletMorePopoverPo();
-      const confirmationPo = po.getImportTokenRemoveConfirmationPo();
-
-      await po.getMoreButton().click();
-      await runResolvedPromises();
-      await morePopoverPo.getRemoveButtonPo().click();
-      await runResolvedPromises();
       await confirmationPo.clickYes();
       await runResolvedPromises();
-      expect(spyOnSetImportedTokens).toBeCalledTimes(1);
-      // should stay on wallet page
-      expect(get(pageStore).path).toEqual(AppPath.Wallet);
-      // without data change
-      expect(spyOnGetImportedTokens).toBeCalledTimes(0);
+
       expect(get(importedTokensStore).importedTokens).toEqual([
-        {
-          ledgerCanisterId,
-          indexCanisterId: undefined,
-        },
         {
           ledgerCanisterId: ledgerCanisterId2,
           indexCanisterId: undefined,

From 2cd7c7c60a6158fc88908afb653afd6bc05c3bf6 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Mon, 16 Sep 2024 07:58:05 +0200
Subject: [PATCH 19/24] Reset failed imported tokens store after loading

---
 .../lib/services/imported-tokens.services.ts  | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/services/imported-tokens.services.ts b/frontend/src/lib/services/imported-tokens.services.ts
index 704f8d0cefa..049a2c263f8 100644
--- a/frontend/src/lib/services/imported-tokens.services.ts
+++ b/frontend/src/lib/services/imported-tokens.services.ts
@@ -10,7 +10,10 @@ import type { ImportedTokens } from "$lib/canisters/nns-dapp/nns-dapp.types";
 import { MAX_IMPORTED_TOKENS } from "$lib/constants/imported-tokens.constants";
 import { FORCE_CALL_STRATEGY } from "$lib/constants/mockable.constants";
 import { getAuthenticatedIdentity } from "$lib/services/auth.services";
-import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+import {
+  failedImportedTokenLedgerIdsStore,
+  importedTokensStore,
+} from "$lib/stores/imported-tokens.store";
 import { toastsError, toastsSuccess } from "$lib/stores/toasts.store";
 import type { ImportedTokenData } from "$lib/types/imported-tokens";
 import { notForceCallStrategy } from "$lib/utils/env.utils";
@@ -33,11 +36,22 @@ export const loadImportedTokens = async ({
   return queryAndUpdate<ImportedTokens, unknown>({
     request: (options) => getImportedTokens(options),
     strategy: FORCE_CALL_STRATEGY,
-    onLoad: ({ response: { imported_tokens: importedTokens }, certified }) =>
+    onLoad: ({ response: { imported_tokens: importedTokens }, certified }) => {
       importedTokensStore.set({
         importedTokens: importedTokens.map(toImportedTokenData),
         certified,
-      }),
+      });
+      /* 
+      The failed imported token store needs to be reset to remove the failed table rows,
+      but this should only happen after the imported tokens are fully loaded.
+      
+      If we remove record A from the failed imported token store before that, it will still exist
+      in the imported tokens store, triggering the loading of account data for record A;
+      However, if we update the imported tokens store in the next step (removing record A),
+      the error handling will treat this token as a `not imported token` and display all errors.
+       */
+      failedImportedTokenLedgerIdsStore.reset();
+    },
     onError: ({ error: err, certified }) => {
       console.error(err);
 
@@ -49,6 +63,8 @@ export const loadImportedTokens = async ({
           importedTokens: [],
           certified,
         });
+        // Also reset the failed imported token store to remove the failed table rows.
+        failedImportedTokenLedgerIdsStore.reset();
         return;
       }
 

From 2b2762d151ac65d12c4a5a041e66959814ae7875 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Mon, 16 Sep 2024 07:58:25 +0200
Subject: [PATCH 20/24] Fix imports

---
 .../components/accounts/ImportTokenRemoveConfirmation.spec.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/tests/lib/components/accounts/ImportTokenRemoveConfirmation.spec.ts b/frontend/src/tests/lib/components/accounts/ImportTokenRemoveConfirmation.spec.ts
index 9efcc9d5af1..83c32441d04 100644
--- a/frontend/src/tests/lib/components/accounts/ImportTokenRemoveConfirmation.spec.ts
+++ b/frontend/src/tests/lib/components/accounts/ImportTokenRemoveConfirmation.spec.ts
@@ -16,7 +16,7 @@ import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
 import { render } from "$tests/utils/svelte.test-utils";
 import { runResolvedPromises } from "$tests/utils/timers.test-utils";
 import { busyStore } from "@dfinity/gix-components";
-import { Principal } from "@dfinity/principal";
+import type { Principal } from "@dfinity/principal";
 import { get } from "svelte/store";
 
 describe("ImportTokenRemoveConfirmation", () => {

From 77de5617a1c3c5f89f3f2a80fe4c66bc8adae3de Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Mon, 16 Sep 2024 07:59:20 +0200
Subject: [PATCH 21/24] Remove failed imported token button

---
 .../TokensTable/actions/RemoveButton.svelte   |   8 +-
 frontend/src/lib/types/actions.ts             |   1 +
 .../routes/(app)/(nns)/tokens/+page.svelte    | 136 ++++++++++--------
 3 files changed, 85 insertions(+), 60 deletions(-)

diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
index 6179fddf478..42a1f1a23c8 100644
--- a/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
+++ b/frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
   import type { UserTokenData, UserTokenFailed } from "$lib/types/tokens-page";
   import { IconBin } from "@dfinity/gix-components";
+  import { createEventDispatcher } from "svelte";
+  import { ActionType } from "$lib/types/actions";
 
   // svelte-ignore unused-export-let
   export let userToken: UserTokenData | UserTokenFailed;
+
+  const dispatcher = createEventDispatcher();
 </script>
 
 <button
   class="icon-only remove-button"
   data-tid="send-button-component"
-  on:click|stopPropagation|preventDefault={() => {
-    // TODO: Implement remove imported token action
+  on:click|preventDefault|stopPropagation={() => {
+    dispatcher("nnsAction", { type: ActionType.Remove, data: userToken });
   }}
 >
   <IconBin />
diff --git a/frontend/src/lib/types/actions.ts b/frontend/src/lib/types/actions.ts
index 8affbd2e649..9019185dc8f 100644
--- a/frontend/src/lib/types/actions.ts
+++ b/frontend/src/lib/types/actions.ts
@@ -3,6 +3,7 @@ import type { UserTokenData } from "./tokens-page";
 export enum ActionType {
   Send = "send",
   Receive = "receive",
+  Remove = "remove",
 }
 
 export type Action = {
diff --git a/frontend/src/routes/(app)/(nns)/tokens/+page.svelte b/frontend/src/routes/(app)/(nns)/tokens/+page.svelte
index 2de932f2a0b..75a8d5705e1 100644
--- a/frontend/src/routes/(app)/(nns)/tokens/+page.svelte
+++ b/frontend/src/routes/(app)/(nns)/tokens/+page.svelte
@@ -28,7 +28,11 @@
   import type { Account } from "$lib/types/account";
   import { ActionType, type Action } from "$lib/types/actions";
   import type { CkBTCAdditionalCanisters } from "$lib/types/ckbtc-canisters";
-  import type { UserToken, UserTokenData } from "$lib/types/tokens-page";
+  import type {
+    UserToken,
+    UserTokenData,
+    UserTokenFailed,
+  } from "$lib/types/tokens-page";
   import type { Universe, UniverseCanisterIdText } from "$lib/types/universe";
   import {
     isIcrcTokenUniverse,
@@ -41,6 +45,8 @@
   import { onMount } from "svelte";
   import { compareTokensForTokensTable } from "$lib/utils/tokens-table.utils";
   import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+  import ImportTokenRemoveConfirmation from "$lib/components/accounts/ImportTokenRemoveConfirmation.svelte";
+  import { isUserTokenData } from "../../../../lib/utils/user-token.utils";
 
   onMount(() => {
     loadCkBTCTokens();
@@ -147,11 +153,12 @@
     | "ckbtc-send"
     | "icrc-send"
     | "icrc-receive"
-    | "ckbtc-receive";
+    | "ckbtc-receive"
+    | "imported-remove";
   let modal:
     | {
         type: ModalType;
-        data: UserTokenData;
+        data: UserTokenData | UserTokenFailed;
       }
     | undefined;
   const closeModal = () => {
@@ -166,10 +173,11 @@
 
   let account: Account | undefined;
   $: account =
-    modal &&
-    $universesAccountsStore[modal.data.universeId.toText()].find(
-      ({ type }) => type === "main"
-    );
+    modal && isUserTokenData(modal.data)
+      ? $universesAccountsStore[modal.data.universeId.toText()].find(
+          ({ type }) => type === "main"
+        )
+      : undefined;
 
   const handleAction = ({ detail }: { detail: Action }) => {
     if (detail.type === ActionType.Send) {
@@ -196,6 +204,9 @@
         modal = { type: "icrc-receive", data: detail.data };
       }
     }
+    if (detail.type === ActionType.Remove) {
+      modal = { type: "imported-remove", data: detail.data };
+    }
   };
 
   let importedTokenIds: Set<string> = new Set();
@@ -222,62 +233,71 @@
     />
   {/if}
 
-  {#if modal?.type === "sns-send"}
-    <IcrcTokenTransactionModal
-      on:nnsClose={closeModal}
-      ledgerCanisterId={$snsLedgerCanisterIdsStore[
-        modal.data.universeId.toText()
-      ]}
-      universeId={modal.data.universeId}
-      token={modal.data.token}
-      transactionFee={modal.data.fee}
-    />
-  {/if}
+  {#if nonNullish(modal) && isUserTokenData(modal.data)}
+    {#if modal.type === "sns-send"}
+      <IcrcTokenTransactionModal
+        on:nnsClose={closeModal}
+        ledgerCanisterId={$snsLedgerCanisterIdsStore[
+          modal.data.universeId.toText()
+        ]}
+        universeId={modal.data.universeId}
+        token={modal.data.token}
+        transactionFee={modal.data.fee}
+      />
+    {/if}
 
-  {#if modal?.type === "ckbtc-send"}
-    <CkBtcTransactionModal
-      on:nnsClose={closeModal}
-      on:nnsTransfer={closeModal}
-      token={modal.data.token}
-      transactionFee={modal.data.fee}
-      universeId={modal.data.universeId}
-      canisters={CKBTC_ADDITIONAL_CANISTERS[modal.data.universeId.toText()]}
-    />
-  {/if}
+    {#if modal.type === "ckbtc-send"}
+      <CkBtcTransactionModal
+        on:nnsClose={closeModal}
+        on:nnsTransfer={closeModal}
+        token={modal.data.token}
+        transactionFee={modal.data.fee}
+        universeId={modal.data.universeId}
+        canisters={CKBTC_ADDITIONAL_CANISTERS[modal.data.universeId.toText()]}
+      />
+    {/if}
 
-  {#if modal?.type === "icrc-send"}
-    <IcrcTokenTransactionModal
-      on:nnsClose={closeModal}
-      ledgerCanisterId={modal.data.universeId}
-      universeId={modal.data.universeId}
-      token={modal.data.token}
-      transactionFee={modal.data.fee}
-    />
-  {/if}
+    {#if modal.type === "icrc-send"}
+      <IcrcTokenTransactionModal
+        on:nnsClose={closeModal}
+        ledgerCanisterId={modal.data.universeId}
+        universeId={modal.data.universeId}
+        token={modal.data.token}
+        transactionFee={modal.data.fee}
+      />
+    {/if}
 
-  {#if modal?.type === "ckbtc-receive" && nonNullish(ckBTCCanisters) && nonNullish(account)}
-    <CkBtcReceiveModal
-      data={{
-        canisters: ckBTCCanisters,
-        account,
-        universeId: modal.data.universeId,
-        canSelectAccount: false,
-        reload: createReloadAccountBalance(modal.data.universeId),
-      }}
-      on:nnsClose={closeModal}
-    />
+    {#if modal.type === "ckbtc-receive" && nonNullish(ckBTCCanisters) && nonNullish(account)}
+      <CkBtcReceiveModal
+        data={{
+          canisters: ckBTCCanisters,
+          account,
+          universeId: modal.data.universeId,
+          canSelectAccount: false,
+          reload: createReloadAccountBalance(modal.data.universeId),
+        }}
+        on:nnsClose={closeModal}
+      />
+    {/if}
+
+    {#if modal.type === "icrc-receive" && nonNullish(account)}
+      <IcrcReceiveModal
+        data={{
+          account,
+          universeId: modal.data.universeId,
+          canSelectAccount: false,
+          reload: createReloadAccountBalance(modal.data.universeId),
+          tokenSymbol: modal.data.token.symbol,
+          logo: modal.data.logo,
+        }}
+        on:nnsClose={closeModal}
+      />
+    {/if}
   {/if}
 
-  {#if modal?.type === "icrc-receive" && nonNullish(account)}
-    <IcrcReceiveModal
-      data={{
-        account,
-        universeId: modal.data.universeId,
-        canSelectAccount: false,
-        reload: createReloadAccountBalance(modal.data.universeId),
-        tokenSymbol: modal.data.token.symbol,
-        logo: modal.data.logo,
-      }}
+  {#if modal?.type === "imported-remove"}
+    <ImportTokenRemoveConfirmation
+      ledgerCanisterId={modal.data.universeId}
       on:nnsClose={closeModal}
     />
   {/if}

From db81328b8a242b79d04e6dc6913572d58df38305 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Mon, 16 Sep 2024 08:42:26 +0200
Subject: [PATCH 22/24] Test that failed store is reset on imported loading

---
 .../lib/services/imported-tokens.services.ts  |  4 +--
 .../services/imported-tokens.services.spec.ts | 29 ++++++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/services/imported-tokens.services.ts b/frontend/src/lib/services/imported-tokens.services.ts
index 049a2c263f8..d8e06a791a3 100644
--- a/frontend/src/lib/services/imported-tokens.services.ts
+++ b/frontend/src/lib/services/imported-tokens.services.ts
@@ -63,8 +63,6 @@ export const loadImportedTokens = async ({
           importedTokens: [],
           certified,
         });
-        // Also reset the failed imported token store to remove the failed table rows.
-        failedImportedTokenLedgerIdsStore.reset();
         return;
       }
 
@@ -74,6 +72,8 @@ export const loadImportedTokens = async ({
 
       // Explicitly handle only UPDATE errors
       importedTokensStore.reset();
+      // Also reset the failed imported token store to remove the failed table rows.
+      failedImportedTokenLedgerIdsStore.reset();
 
       toastsError({
         labelKey: "error__imported_tokens.load_imported_tokens",
diff --git a/frontend/src/tests/lib/services/imported-tokens.services.spec.ts b/frontend/src/tests/lib/services/imported-tokens.services.spec.ts
index 6618e416af1..b080b27b5bd 100644
--- a/frontend/src/tests/lib/services/imported-tokens.services.spec.ts
+++ b/frontend/src/tests/lib/services/imported-tokens.services.spec.ts
@@ -10,7 +10,10 @@ import {
   loadImportedTokens,
   removeImportedTokens,
 } from "$lib/services/imported-tokens.services";
-import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+import {
+  failedImportedTokenLedgerIdsStore,
+  importedTokensStore,
+} from "$lib/stores/imported-tokens.store";
 import * as toastsStore from "$lib/stores/toasts.store";
 import type { ImportedTokenData } from "$lib/types/imported-tokens";
 import { mockIdentity, resetIdentity } from "$tests/mocks/auth.store.mock";
@@ -42,6 +45,7 @@ describe("imported-tokens-services", () => {
     vi.clearAllMocks();
     resetIdentity();
     importedTokensStore.reset();
+    failedImportedTokenLedgerIdsStore.reset();
     toastsStoreEntry.reset();
     vi.spyOn(console, "error").mockReturnValue();
     vi.spyOn(dfinityUtils, "createAgent").mockReturnValue(undefined);
@@ -106,11 +110,17 @@ describe("imported-tokens-services", () => {
         importedTokens: [importedTokenDataA],
         certified: true,
       });
+      failedImportedTokenLedgerIdsStore.add(
+        importedTokenDataA.ledgerCanisterId.toString()
+      );
 
       expect(get(importedTokensStore)).toEqual({
         importedTokens: [importedTokenDataA],
         certified: true,
       });
+      expect(get(failedImportedTokenLedgerIdsStore)).toEqual([
+        importedTokenDataA.ledgerCanisterId.toText(),
+      ]);
 
       await loadImportedTokens();
 
@@ -118,6 +128,7 @@ describe("imported-tokens-services", () => {
         importedTokens: undefined,
         certified: undefined,
       });
+      expect(get(failedImportedTokenLedgerIdsStore)).toEqual([]);
     });
 
     it("should handle ignoreAccountNotFoundError parameter (no error toast, no imported tokens)", async () => {
@@ -126,12 +137,21 @@ describe("imported-tokens-services", () => {
       vi.spyOn(importedTokensApi, "getImportedTokens").mockRejectedValue(
         accountNotFoundError
       );
-
+      importedTokensStore.set({
+        importedTokens: [importedTokenDataA],
+        certified: true,
+      });
+      failedImportedTokenLedgerIdsStore.add(
+        importedTokenDataA.ledgerCanisterId.toString()
+      );
       expect(spyToastError).toBeCalledTimes(0);
       expect(get(importedTokensStore)).toEqual({
-        importedTokens: undefined,
-        certified: undefined,
+        importedTokens: [importedTokenDataA],
+        certified: true,
       });
+      expect(get(failedImportedTokenLedgerIdsStore)).toEqual([
+        importedTokenDataA.ledgerCanisterId.toText(),
+      ]);
 
       // default = ignoreAccountNotFoundError: false
       await loadImportedTokens();
@@ -150,6 +170,7 @@ describe("imported-tokens-services", () => {
         importedTokens: [],
         certified: true,
       });
+      expect(get(failedImportedTokenLedgerIdsStore)).toEqual([]);
     });
   });
 

From 356e6c370d6816426cba48c51fbf6b5eb30e9768 Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Mon, 16 Sep 2024 13:58:38 +0200
Subject: [PATCH 23/24] refactor: removeImportedToken to show busy screen

---
 .../components/accounts/IcrcWalletPage.svelte |  15 ++-
 .../ImportTokenRemoveConfirmation.svelte      |  44 ++-----
 .../lib/services/imported-tokens.services.ts  |  59 +++++-----
 .../routes/(app)/(nns)/tokens/+page.svelte    |  10 +-
 .../services/imported-tokens.services.spec.ts | 109 +++++++++---------
 ...portTokenRemoveConfirmation.page-object.ts |   4 +
 6 files changed, 121 insertions(+), 120 deletions(-)

diff --git a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
index 81606bdca38..3bab1f64a60 100644
--- a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
+++ b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
@@ -21,7 +21,7 @@
   } from "$lib/utils/accounts.utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { IconDots, Island, Spinner } from "@dfinity/gix-components";
-  import { Principal } from "@dfinity/principal";
+  import type { Principal } from "@dfinity/principal";
   import { TokenAmountV2, isNullish, nonNullish } from "@dfinity/utils";
   import type { Writable } from "svelte/store";
   import { ENABLE_IMPORT_TOKEN } from "$lib/stores/feature-flags.store";
@@ -29,6 +29,7 @@
   import WalletMorePopover from "./WalletMorePopover.svelte";
   import { isImportedToken as checkImportedToken } from "$lib/utils/imported-tokens.utils";
   import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+  import { removeImportedTokens } from "$lib/services/imported-tokens.services";
   import ImportTokenRemoveConfirmation from "./ImportTokenRemoveConfirmation.svelte";
   import type { Universe } from "$lib/types/universe";
   import { selectableUniversesStore } from "$lib/derived/selectable-universes.derived";
@@ -166,6 +167,16 @@
   $: universe = $selectableUniversesStore.find(
     ({ canisterId }) => canisterId === ledgerCanisterId?.toText()
   );
+
+  const removeImportedToken = async () => {
+    // Just for type safety. This should never happen.
+    if (isNullish(ledgerCanisterId)) return;
+
+    const { success } = await removeImportedTokens(ledgerCanisterId);
+    if (success) {
+      goto(AppPath.Tokens);
+    }
+  };
 </script>
 
 <TestIdWrapper {testId}>
@@ -245,8 +256,8 @@
   {#if removeImportedTokenConfirmationVisible && nonNullish(universe)}
     <ImportTokenRemoveConfirmation
       {universe}
-      ledgerCanisterId={Principal.fromText(universe.canisterId)}
       on:nnsClose={() => (removeImportedTokenConfirmationVisible = false)}
+      on:nnsConfirm={removeImportedToken}
     />
   {/if}
 </TestIdWrapper>
diff --git a/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte b/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
index 4294e2cce03..373669a49f2 100644
--- a/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
+++ b/frontend/src/lib/components/accounts/ImportTokenRemoveConfirmation.svelte
@@ -5,54 +5,28 @@
   import { nonNullish } from "@dfinity/utils";
   import ConfirmationModal from "$lib/modals/common/ConfirmationModal.svelte";
   import { Tag } from "@dfinity/gix-components";
-  import { startBusy, stopBusy } from "$lib/stores/busy.store";
-  import { importedTokensStore } from "$lib/stores/imported-tokens.store";
-  import { removeImportedTokens } from "$lib/services/imported-tokens.services";
-  import { AppPath } from "$lib/constants/routes.constants";
-  import { goto } from "$app/navigation";
-  import { Principal } from "@dfinity/principal";
-  import { createEventDispatcher } from "svelte";
+  import type { Principal } from "@dfinity/principal";
 
   export let universe: Universe | undefined = undefined;
   export let ledgerCanisterId: Principal;
-
-  const dispatch = createEventDispatcher();
-  const removeImportedToken = async () => {
-    startBusy({
-      initiator: "import-token-removing",
-      labelKey: "import_token.removing",
-    });
-
-    try {
-      const importedTokens = $importedTokensStore.importedTokens ?? [];
-      const { success } = await removeImportedTokens({
-        tokensToRemove: importedTokens.filter(
-          ({ ledgerCanisterId: id }) =>
-            id.toText() === ledgerCanisterId.toText()
-        ),
-        importedTokens,
-      });
-
-      if (success) {
-        dispatch("nnsClose");
-        goto(AppPath.Tokens);
-      }
-    } finally {
-      stopBusy("import-token-removing");
-    }
-  };
 </script>
 
 <ConfirmationModal
   testId="import-token-remove-confirmation-component"
   on:nnsClose
-  on:nnsConfirm={removeImportedToken}
+  on:nnsConfirm
   yesLabel={$i18n.core.remove}
 >
   <div class="content">
     <h4>{$i18n.import_token.remove_confirmation_header}</h4>
     <div class="token">
-      {#if nonNullish(universe)}<UniverseSummary {universe} />{/if}
+      {#if nonNullish(universe)}
+        <UniverseSummary {universe} />
+      {:else}
+        <span class="value" data-tid="ledger-canister-id"
+          >{ledgerCanisterId.toText()}</span
+        >
+      {/if}
       <Tag>{$i18n.import_token.imported_token}</Tag>
     </div>
     <p class="description text_small">
diff --git a/frontend/src/lib/services/imported-tokens.services.ts b/frontend/src/lib/services/imported-tokens.services.ts
index d8e06a791a3..5c6a596d87f 100644
--- a/frontend/src/lib/services/imported-tokens.services.ts
+++ b/frontend/src/lib/services/imported-tokens.services.ts
@@ -10,6 +10,7 @@ import type { ImportedTokens } from "$lib/canisters/nns-dapp/nns-dapp.types";
 import { MAX_IMPORTED_TOKENS } from "$lib/constants/imported-tokens.constants";
 import { FORCE_CALL_STRATEGY } from "$lib/constants/mockable.constants";
 import { getAuthenticatedIdentity } from "$lib/services/auth.services";
+import { startBusy, stopBusy } from "$lib/stores/busy.store";
 import {
   failedImportedTokenLedgerIdsStore,
   importedTokensStore,
@@ -23,6 +24,7 @@ import {
 } from "$lib/utils/imported-tokens.utils";
 import type { Principal } from "@dfinity/principal";
 import { isNullish } from "@dfinity/utils";
+import { get } from "svelte/store";
 import { queryAndUpdate } from "./utils.services";
 
 /** Load imported tokens from the `nns-dapp` backend and update the `importedTokensStore` store.
@@ -188,35 +190,38 @@ export const addIndexCanister = async ({
  *  - Displays a success toast if the operation is successful.
  *  - Displays an error toast if the operation fails.
  */
-export const removeImportedTokens = async ({
-  tokensToRemove,
-  importedTokens,
-}: {
-  tokensToRemove: ImportedTokenData[];
-  importedTokens: ImportedTokenData[];
-}): Promise<{ success: boolean }> => {
-  // Compare imported tokens by their ledgerCanisterId because they should be unique.
-  const ledgerIdsToRemove = new Set(
-    tokensToRemove.map(({ ledgerCanisterId }) => ledgerCanisterId.toText())
-  );
-  const tokens = importedTokens.filter(
-    ({ ledgerCanisterId }) => !ledgerIdsToRemove.has(ledgerCanisterId.toText())
-  );
-  const { err } = await saveImportedToken({ tokens });
-
-  if (isNullish(err)) {
-    await loadImportedTokens();
-    toastsSuccess({
-      labelKey: "tokens.remove_imported_token_success",
+export const removeImportedTokens = async (
+  ledgerCanisterId: Principal
+): Promise<{ success: boolean }> => {
+  try {
+    startBusy({
+      initiator: "import-token-removing",
+      labelKey: "import_token.removing",
     });
 
-    return { success: true };
-  }
+    const remainingTokens = (
+      get(importedTokensStore).importedTokens ?? []
+    ).filter(
+      ({ ledgerCanisterId: id }) => id.toText() !== ledgerCanisterId.toText()
+    );
+    const { err } = await saveImportedToken({ tokens: remainingTokens });
+
+    if (isNullish(err)) {
+      await loadImportedTokens();
+      toastsSuccess({
+        labelKey: "tokens.remove_imported_token_success",
+      });
 
-  toastsError({
-    labelKey: "error__imported_tokens.remove_imported_token",
-    err,
-  });
+      return { success: true };
+    }
 
-  return { success: false };
+    toastsError({
+      labelKey: "error__imported_tokens.remove_imported_token",
+      err,
+    });
+
+    return { success: false };
+  } finally {
+    stopBusy("import-token-removing");
+  }
 };
diff --git a/frontend/src/routes/(app)/(nns)/tokens/+page.svelte b/frontend/src/routes/(app)/(nns)/tokens/+page.svelte
index 75a8d5705e1..24777cf624c 100644
--- a/frontend/src/routes/(app)/(nns)/tokens/+page.svelte
+++ b/frontend/src/routes/(app)/(nns)/tokens/+page.svelte
@@ -46,7 +46,8 @@
   import { compareTokensForTokensTable } from "$lib/utils/tokens-table.utils";
   import { importedTokensStore } from "$lib/stores/imported-tokens.store";
   import ImportTokenRemoveConfirmation from "$lib/components/accounts/ImportTokenRemoveConfirmation.svelte";
-  import { isUserTokenData } from "../../../../lib/utils/user-token.utils";
+  import { isUserTokenData } from "$lib/utils/user-token.utils";
+  import { removeImportedTokens } from "$lib/services/imported-tokens.services";
 
   onMount(() => {
     loadCkBTCTokens();
@@ -209,6 +210,13 @@
     }
   };
 
+  const removeImportedToken = async () => {
+    // Just for type safety. This should never happen.
+    if (nonNullish(modal?.data.universeId)) {
+      await removeImportedTokens(modal.data.universeId);
+    }
+  };
+
   let importedTokenIds: Set<string> = new Set();
   $: importedTokenIds = new Set(
     ($importedTokensStore.importedTokens ?? []).map(({ ledgerCanisterId }) =>
diff --git a/frontend/src/tests/lib/services/imported-tokens.services.spec.ts b/frontend/src/tests/lib/services/imported-tokens.services.spec.ts
index b080b27b5bd..4ec221cc780 100644
--- a/frontend/src/tests/lib/services/imported-tokens.services.spec.ts
+++ b/frontend/src/tests/lib/services/imported-tokens.services.spec.ts
@@ -10,15 +10,16 @@ import {
   loadImportedTokens,
   removeImportedTokens,
 } from "$lib/services/imported-tokens.services";
-import {
-  failedImportedTokenLedgerIdsStore,
-  importedTokensStore,
-} from "$lib/stores/imported-tokens.store";
+import { importedTokensStore } from "$lib/stores/imported-tokens.store";
 import * as toastsStore from "$lib/stores/toasts.store";
 import type { ImportedTokenData } from "$lib/types/imported-tokens";
 import { mockIdentity, resetIdentity } from "$tests/mocks/auth.store.mock";
 import { principal } from "$tests/mocks/sns-projects.mock";
-import { toastsStore as toastsStoreEntry } from "@dfinity/gix-components";
+import { runResolvedPromises } from "$tests/utils/timers.test-utils";
+import {
+  busyStore,
+  toastsStore as toastsStoreEntry,
+} from "@dfinity/gix-components";
 import * as dfinityUtils from "@dfinity/utils";
 import { get } from "svelte/store";
 
@@ -45,8 +46,8 @@ describe("imported-tokens-services", () => {
     vi.clearAllMocks();
     resetIdentity();
     importedTokensStore.reset();
-    failedImportedTokenLedgerIdsStore.reset();
     toastsStoreEntry.reset();
+    busyStore.resetForTesting();
     vi.spyOn(console, "error").mockReturnValue();
     vi.spyOn(dfinityUtils, "createAgent").mockReturnValue(undefined);
   });
@@ -110,17 +111,11 @@ describe("imported-tokens-services", () => {
         importedTokens: [importedTokenDataA],
         certified: true,
       });
-      failedImportedTokenLedgerIdsStore.add(
-        importedTokenDataA.ledgerCanisterId.toString()
-      );
 
       expect(get(importedTokensStore)).toEqual({
         importedTokens: [importedTokenDataA],
         certified: true,
       });
-      expect(get(failedImportedTokenLedgerIdsStore)).toEqual([
-        importedTokenDataA.ledgerCanisterId.toText(),
-      ]);
 
       await loadImportedTokens();
 
@@ -128,7 +123,6 @@ describe("imported-tokens-services", () => {
         importedTokens: undefined,
         certified: undefined,
       });
-      expect(get(failedImportedTokenLedgerIdsStore)).toEqual([]);
     });
 
     it("should handle ignoreAccountNotFoundError parameter (no error toast, no imported tokens)", async () => {
@@ -137,21 +131,12 @@ describe("imported-tokens-services", () => {
       vi.spyOn(importedTokensApi, "getImportedTokens").mockRejectedValue(
         accountNotFoundError
       );
-      importedTokensStore.set({
-        importedTokens: [importedTokenDataA],
-        certified: true,
-      });
-      failedImportedTokenLedgerIdsStore.add(
-        importedTokenDataA.ledgerCanisterId.toString()
-      );
+
       expect(spyToastError).toBeCalledTimes(0);
       expect(get(importedTokensStore)).toEqual({
-        importedTokens: [importedTokenDataA],
-        certified: true,
+        importedTokens: undefined,
+        certified: undefined,
       });
-      expect(get(failedImportedTokenLedgerIdsStore)).toEqual([
-        importedTokenDataA.ledgerCanisterId.toText(),
-      ]);
 
       // default = ignoreAccountNotFoundError: false
       await loadImportedTokens();
@@ -170,7 +155,6 @@ describe("imported-tokens-services", () => {
         importedTokens: [],
         certified: true,
       });
-      expect(get(failedImportedTokenLedgerIdsStore)).toEqual([]);
     });
   });
 
@@ -292,12 +276,15 @@ describe("imported-tokens-services", () => {
       const spySetImportedTokens = vi
         .spyOn(importedTokensApi, "setImportedTokens")
         .mockResolvedValue(undefined);
-      expect(spySetImportedTokens).toBeCalledTimes(0);
-
-      const { success } = await removeImportedTokens({
-        tokensToRemove: [importedTokenDataA],
+      importedTokensStore.set({
         importedTokens: [importedTokenDataA, importedTokenDataB],
+        certified: true,
       });
+      expect(spySetImportedTokens).toBeCalledTimes(0);
+
+      const { success } = await removeImportedTokens(
+        importedTokenDataA.ledgerCanisterId
+      );
 
       expect(success).toEqual(true);
       expect(spySetImportedTokens).toBeCalledTimes(1);
@@ -307,23 +294,36 @@ describe("imported-tokens-services", () => {
       });
     });
 
-    it("should remove multiple tokens", async () => {
-      const spySetImportedTokens = vi
+    it("should display busy store", async () => {
+      let resolveSetImportedTokens;
+      const spyOnSetImportedTokens = vi
         .spyOn(importedTokensApi, "setImportedTokens")
-        .mockResolvedValue(undefined);
-      expect(spySetImportedTokens).toBeCalledTimes(0);
-
-      const { success } = await removeImportedTokens({
-        tokensToRemove: [importedTokenDataA, importedTokenDataB],
+        .mockImplementation(
+          () =>
+            new Promise<void>((resolve) => (resolveSetImportedTokens = resolve))
+        );
+      importedTokensStore.set({
         importedTokens: [importedTokenDataA, importedTokenDataB],
+        certified: true,
       });
+      expect(spyOnSetImportedTokens).toBeCalledTimes(0);
+      expect(get(busyStore)).toEqual([]);
 
-      expect(success).toEqual(true);
-      expect(spySetImportedTokens).toBeCalledTimes(1);
-      expect(spySetImportedTokens).toBeCalledWith({
-        identity: mockIdentity,
-        importedTokens: [],
-      });
+      removeImportedTokens(importedTokenDataA.ledgerCanisterId);
+      await runResolvedPromises();
+
+      expect(spyOnSetImportedTokens).toBeCalledTimes(1);
+      expect(get(busyStore)).toEqual([
+        {
+          initiator: "import-token-removing",
+          text: "Removing imported token...",
+        },
+      ]);
+
+      resolveSetImportedTokens();
+      await runResolvedPromises();
+
+      expect(get(busyStore)).toEqual([]);
     });
 
     it("should update the store", async () => {
@@ -345,10 +345,7 @@ describe("imported-tokens-services", () => {
         certified: true,
       });
 
-      await removeImportedTokens({
-        tokensToRemove: [importedTokenDataA],
-        importedTokens: [importedTokenDataA, importedTokenDataB],
-      });
+      await removeImportedTokens(importedTokenDataA.ledgerCanisterId);
 
       expect(spyGetImportedTokens).toBeCalledTimes(2);
       expect(get(importedTokensStore)).toEqual({
@@ -365,12 +362,12 @@ describe("imported-tokens-services", () => {
       vi.spyOn(importedTokensApi, "getImportedTokens").mockResolvedValue({
         imported_tokens: [importedTokenB],
       });
-      expect(spyToastSuccess).not.toBeCalled();
-
-      await removeImportedTokens({
-        tokensToRemove: [importedTokenDataA],
+      importedTokensStore.set({
         importedTokens: [importedTokenDataA, importedTokenDataB],
+        certified: true,
       });
+      expect(spyToastSuccess).not.toBeCalled();
+      await removeImportedTokens(importedTokenDataA.ledgerCanisterId);
 
       expect(spyToastSuccess).toBeCalledTimes(1);
       expect(spyToastSuccess).toBeCalledWith({
@@ -383,12 +380,14 @@ describe("imported-tokens-services", () => {
       vi.spyOn(importedTokensApi, "setImportedTokens").mockRejectedValue(
         testError
       );
-      expect(spyToastError).not.toBeCalled();
-
-      const { success } = await removeImportedTokens({
-        tokensToRemove: [importedTokenDataA],
+      importedTokensStore.set({
         importedTokens: [importedTokenDataA, importedTokenDataB],
+        certified: true,
       });
+      expect(spyToastError).not.toBeCalled();
+      const { success } = await removeImportedTokens(
+        importedTokenDataA.ledgerCanisterId
+      );
 
       expect(success).toEqual(false);
       expect(spyToastError).toBeCalledTimes(1);
diff --git a/frontend/src/tests/page-objects/ImportTokenRemoveConfirmation.page-object.ts b/frontend/src/tests/page-objects/ImportTokenRemoveConfirmation.page-object.ts
index a24f225acd7..3566ebf3a2b 100644
--- a/frontend/src/tests/page-objects/ImportTokenRemoveConfirmation.page-object.ts
+++ b/frontend/src/tests/page-objects/ImportTokenRemoveConfirmation.page-object.ts
@@ -14,4 +14,8 @@ export class ImportTokenRemoveConfirmationPo extends ConfirmationModalPo {
   getUniverseSummaryPo(): UniverseSummaryPo {
     return UniverseSummaryPo.under(this.root);
   }
+
+  getLedgerCanisterIdText(): Promise<string> {
+    return this.getText("ledger-canister-id");
+  }
 }

From 69a5dab1ec57a2603bda4ac022881d87b189dabd Mon Sep 17 00:00:00 2001
From: Max Strasinsky <maksims.strasinskis@dfinity.org>
Date: Mon, 16 Sep 2024 14:01:36 +0200
Subject: [PATCH 24/24] Fix ImportTokenRemoveConfirmation props

---
 frontend/src/lib/components/accounts/IcrcWalletPage.svelte | 3 ++-
 frontend/src/routes/(app)/(nns)/tokens/+page.svelte        | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
index 3bab1f64a60..e32fe5258cd 100644
--- a/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
+++ b/frontend/src/lib/components/accounts/IcrcWalletPage.svelte
@@ -21,7 +21,7 @@
   } from "$lib/utils/accounts.utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { IconDots, Island, Spinner } from "@dfinity/gix-components";
-  import type { Principal } from "@dfinity/principal";
+  import { Principal } from "@dfinity/principal";
   import { TokenAmountV2, isNullish, nonNullish } from "@dfinity/utils";
   import type { Writable } from "svelte/store";
   import { ENABLE_IMPORT_TOKEN } from "$lib/stores/feature-flags.store";
@@ -255,6 +255,7 @@
 
   {#if removeImportedTokenConfirmationVisible && nonNullish(universe)}
     <ImportTokenRemoveConfirmation
+      ledgerCanisterId={Principal.fromText(universe.canisterId)}
       {universe}
       on:nnsClose={() => (removeImportedTokenConfirmationVisible = false)}
       on:nnsConfirm={removeImportedToken}
diff --git a/frontend/src/routes/(app)/(nns)/tokens/+page.svelte b/frontend/src/routes/(app)/(nns)/tokens/+page.svelte
index 24777cf624c..23c21f9eaa9 100644
--- a/frontend/src/routes/(app)/(nns)/tokens/+page.svelte
+++ b/frontend/src/routes/(app)/(nns)/tokens/+page.svelte
@@ -307,6 +307,7 @@
     <ImportTokenRemoveConfirmation
       ledgerCanisterId={modal.data.universeId}
       on:nnsClose={closeModal}
+      on:nnsConfirm={removeImportedToken}
     />
   {/if}
 </TestIdWrapper>