Update remove imported dialog props to support principal only (#5504)

# Motivation

In the case of a failed imported token, we don’t have the token
metadata, such as the logo and token name, but users should still be
able to remove the imported token. To achieve this, we first need to
make the confirmation dialog work with the ledger canister ID only.

# Changes

- Change the confirmation component props to work seamlessly with either
the universe or the ledger canister ID.

# Tests

Updated.

# Todos

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

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

@@ -255,7 +255,7 @@
 
   {#if removeImportedTokenConfirmationVisible && nonNullish(universe)}
     <ImportTokenRemoveConfirmation
-      {universe}
+      tokenToRemove={{ universe }}
       on:nnsClose={() => (removeImportedTokenConfirmationVisible = false)}
       on:nnsConfirm={removeImportedToken}
     />

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

@@ -2,11 +2,13 @@
   import { i18n } from "$lib/stores/i18n";
   import UniverseSummary from "$lib/components/universe/UniverseSummary.svelte";
   import type { Universe } from "$lib/types/universe";
-  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 tokenToRemove:
+    | { universe: Universe }
+    | { 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 "universe" in tokenToRemove}
+        <UniverseSummary universe={tokenToRemove.universe} />
+      {:else}
+        <span class="value" data-tid="ledger-canister-id"
+          >{tokenToRemove.ledgerCanisterId.toText()}</span
+        >
+      {/if}
       <Tag>{$i18n.import_token.imported_token}</Tag>
     </div>
     <p class="description text_small">

frontend/src/tests/lib/components/accounts/ImportTokenRemoveConfirmation.spec.ts

@@ -4,6 +4,7 @@ import { principal } from "$tests/mocks/sns-projects.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 type { Principal } from "@dfinity/principal";
 
 describe("ImportTokenRemoveConfirmation", () => {
   const ledgerCanisterId = principal(1);
@@ -14,50 +15,72 @@ describe("ImportTokenRemoveConfirmation", () => {
     title: tokenName,
     logo: tokenLogo,
   };
-  const renderComponent = () => {
+  const renderComponent = ({
+    tokenToRemove,
+    onClose,
+    onConfirm,
+  }: {
+    tokenToRemove: { ledgerCanisterId: Principal } | { universe: Universe };
+    onClose?: () => void;
+    onConfirm?: () => void;
+  }) => {
     const { container, component } = render(ImportTokenRemoveConfirmation, {
-      props: {
-        universe: mockUniverse,
-      },
+      props: { tokenToRemove },
     });
-
-    const nnsConfirm = vi.fn();
-    component.$on("nnsConfirm", nnsConfirm);
-    const nnsClose = vi.fn();
-    component.$on("nnsClose", nnsClose);
-
-    return {
-      po: ImportTokenRemoveConfirmationPo.under(
-        new JestPageObjectElement(container)
-      ),
-      nnsConfirm,
-      nnsClose,
-    };
+    if (onClose) {
+      component.$on("nnsClose", onClose);
+    }
+    if (onConfirm) {
+      component.$on("nnsConfirm", onConfirm);
+    }
+    return ImportTokenRemoveConfirmationPo.under(
+      new JestPageObjectElement(container)
+    );
   };
 
   beforeEach(() => {
     vi.restoreAllMocks();
   });
 
   it("should render token logo", async () => {
-    const { po } = renderComponent();
+    const po = renderComponent({
+      tokenToRemove: { universe: mockUniverse },
+    });
     expect(await po.getUniverseSummaryPo().getLogoUrl()).toEqual(tokenLogo);
   });
 
   it("should render token name", async () => {
-    const { po } = renderComponent();
+    const po = renderComponent({
+      tokenToRemove: { universe: mockUniverse },
+    });
     expect(await po.getUniverseSummaryPo().getTitle()).toEqual(tokenName);
   });
 
   it("should dispatch events", async () => {
-    const { po, nnsClose, nnsConfirm } = renderComponent();
+    const onClose = vi.fn();
+    const onConfirm = vi.fn();
+    const po = renderComponent({
+      tokenToRemove: { universe: mockUniverse },
+      onClose,
+      onConfirm,
+    });
 
-    expect(nnsClose).not.toBeCalled();
+    expect(onClose).not.toBeCalled();
     await po.clickNo();
-    expect(nnsClose).toBeCalledTimes(1);
+    expect(onClose).toBeCalledTimes(1);
 
-    expect(nnsConfirm).not.toBeCalled();
+    expect(onConfirm).not.toBeCalled();
     await po.clickYes();
-    expect(nnsConfirm).toBeCalledTimes(1);
+    expect(onConfirm).toBeCalledTimes(1);
+  });
+
+  it("should display ledger ID when universe is not provided", async () => {
+    const po = renderComponent({
+      tokenToRemove: {
+        ledgerCanisterId,
+      },
+    });
+    expect(await po.getUniverseSummaryPo().isPresent()).toEqual(false);
+    expect(await po.getLedgerCanisterId()).toEqual(ledgerCanisterId.toText());
   });
 });

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);
   }
+
+  getLedgerCanisterId(): Promise<string> {
+    return this.getText("ledger-canister-id");
+  }
 }