Display failed imported token

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

@@ -21,15 +21,14 @@
   } 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";
   import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
   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";
@@ -173,26 +172,9 @@
     // 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");
+    const { success } = await removeImportedTokens(ledgerCanisterId);
+    if (success) {
+      goto(AppPath.Tokens);
     }
   };
 </script>
@@ -273,6 +255,7 @@
 
   {#if removeImportedTokenConfirmationVisible && nonNullish(universe)}
     <ImportTokenRemoveConfirmation
+      ledgerCanisterId={Principal.fromText(universe.canisterId)}
       {universe}
       on:nnsClose={() => (removeImportedTokenConfirmationVisible = false)}
       on:nnsConfirm={removeImportedToken}

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

@@ -5,8 +5,10 @@
   import { nonNullish } from "@dfinity/utils";
   import ConfirmationModal from "$lib/modals/common/ConfirmationModal.svelte";
   import { Tag } from "@dfinity/gix-components";
+  import type { Principal } from "@dfinity/principal";
 
-  export let universe: Universe | undefined;
+  export let universe: Universe | undefined = undefined;
+  export let ledgerCanisterId: Principal;
 </script>
 
 <ConfirmationModal
@@ -18,7 +20,13 @@
   <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">

frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte

@@ -1,29 +1,42 @@
 <script lang="ts">
   import {
     UserTokenAction,
+    type UserTokenFailed,
     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";
 
-  export let rowData: UserTokenData | UserTokenLoading;
+  export let rowData: UserTokenData | UserTokenLoading | UserTokenFailed;
 
   const actionMapper: Record<
     UserTokenAction,
-    ComponentType<SvelteComponent<{ userToken: UserTokenData }>>
+    ComponentType<
+      SvelteComponent<{ userToken: UserTokenData | UserTokenFailed }>
+    >
   > = {
     [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)}

frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte

@@ -1,17 +1,27 @@
 <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} />
+{:else}
+  <span data-tid="unavailable-balance" class="value">-/-</span>
 {/if}
 
 <style lang="scss">

frontend/src/lib/components/tokens/TokensTable/TokenTitleCell.svelte

@@ -1,13 +1,19 @@
 <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";
+  import Logo from "$lib/components/ui/Logo.svelte";
   import { nonNullish } from "@dfinity/utils";
-  import { 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";
 
-  export let rowData: UserTokenData | UserTokenLoading;
+  export let rowData: UserTokenData | UserTokenLoading | UserTokenFailed;
 
   let importedToken = false;
   $: importedToken = isImportedToken({
@@ -18,17 +24,35 @@
 
 <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)}
+    <Hash
+      testId="failed-ledger-canister-id"
+      text={`${rowData.universeId.toText()}`}
+      tagName="span"
+      splitLength={6}
+      tooltipTop
+    />
+  {:else}
+    <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)}
+    <Tooltip
+      id="failed-imported-token"
+      text={$i18n.import_token.failed_tooltip}
+    >
+      <div class="failed-token-icon"><IconError size="20px" /></div>
+    </Tooltip>
+  {/if}
 </div>
 
 <style lang="scss">
@@ -40,11 +64,18 @@
     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;
       flex-direction: column;
       gap: var(--padding-0_5x);
     }
   }
+
+  .failed-token-icon {
+    color: var(--orange);
+    line-height: 0;
+  }
 </style>

frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  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: UserTokenData | UserTokenFailed;
+
+  let canisterId: Principal;
+  $: canisterId = userToken.universeId;
+</script>
+
+<LinkToDashboardCanister {canisterId} />

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">

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}

frontend/src/lib/components/tokens/TokensTable/actions/RemoveButton.svelte

@@ -0,0 +1,27 @@
+<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|preventDefault|stopPropagation={() => {
+    dispatcher("nnsAction", { type: ActionType.Remove, data: userToken });
+  }}
+>
+  <IconBin />
+</button>
+
+<style lang="scss">
+  .remove-button {
+    color: var(--negative-emphasis);
+  }
+</style>

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}