Imported ledger input update (#5607)

# Motivation

Despite being disabled, the ledger canister field is too prominent in
the "Add Index Canister" modal.

# Changes

- Use the CanisterId component in the "Add Index Canister" modal.
- Additionally, update the placeholder to avoid confusing users with the
incorrect canister format.

# Tests

- Updated

## Screenshots


![image](https://github.com/user-attachments/assets/5272136b-0fad-4f9c-9050-e690845627f3)


![image](https://github.com/user-attachments/assets/dd0d400e-85d6-4b95-8c96-7c1567e3d4cb)


# Todos

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

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

@@ -7,6 +7,7 @@
   import { createEventDispatcher } from "svelte";
   import { isNullish } from "@dfinity/utils";
   import CalloutWarning from "$lib/components/common/CalloutWarning.svelte";
+  import ImportTokenCanisterId from "$lib/components/accounts/ImportTokenCanisterId.svelte";
 
   export let ledgerCanisterId: Principal | undefined = undefined;
   export let indexCanisterId: Principal | undefined = undefined;
@@ -24,17 +25,25 @@
   <p class="description">{$i18n.import_token.description}</p>
 
   <form on:submit|preventDefault={() => dispatch("nnsSubmit")}>
-    <PrincipalInput
-      bind:principal={ledgerCanisterId}
-      placeholderLabelKey="import_token.placeholder"
-      name="ledger-canister-id"
-      testId="ledger-canister-id"
-      disabled={addIndexCanisterMode}
-    >
-      <svelte:fragment slot="label"
-        >{$i18n.import_token.ledger_label}</svelte:fragment
+    {#if addIndexCanisterMode}
+      <ImportTokenCanisterId
+        testId="ledger-canister-id-view"
+        label={$i18n.import_token.ledger_label}
+        canisterId={ledgerCanisterId}
+      />
+    {:else}
+      <PrincipalInput
+        bind:principal={ledgerCanisterId}
+        placeholderLabelKey="import_token.placeholder"
+        name="ledger-canister-id"
+        testId="ledger-canister-id"
+        disabled={addIndexCanisterMode}
       >
-    </PrincipalInput>
+        <svelte:fragment slot="label"
+          >{$i18n.import_token.ledger_label}</svelte:fragment
+        >
+      </PrincipalInput>
+    {/if}
 
     <PrincipalInput
       bind:principal={indexCanisterId}

frontend/src/lib/i18n/en.json

@@ -1058,7 +1058,7 @@
     "description": "You can import a new token to your NNS dapp wallet by providing its ledger canister ID.",
     "ledger_label": "Ledger Canister ID",
     "index_label_optional": "Index Canister ID <span class='description'>(Optional)</span>",
-    "placeholder": "00000-00000-00000-00000-000",
+    "placeholder": "_____-_____-_____-_____-cai",
     "index_canister_description": "To see this token's transaction history in the NNS dapp, you need to provide its index canister. <strong>Note:</strong> not all tokens have index canisters.",
     "review_token_info": "Review token info",
     "warning": "<strong>Warning:</strong> Be careful what token you import! Anyone can create a token including one with the same name as existing tokens, such as ckBTC.",

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

@@ -163,13 +163,18 @@ describe("ImportTokenForm", () => {
   });
 
   it("should display addIndexCanister mode ", async () => {
+    const ledgerCanisterId = principal(0);
     const { po } = renderComponent({
-      ledgerCanisterId: principal(0),
+      ledgerCanisterId,
       indexCanisterId: undefined,
       addIndexCanisterMode: true,
     });
 
-    expect(await po.getLedgerCanisterInputPo().isDisabled()).toEqual(true);
+    expect(await po.getLedgerCanisterInputPo().isPresent()).toEqual(false);
+    expect(await po.getLedgerCanisterIdPo().isPresent()).toEqual(true);
+    expect(await po.getLedgerCanisterIdPo().getCanisterIdText()).toEqual(
+      ledgerCanisterId.toText()
+    );
     expect(await po.getIndexCanisterInputPo().isRequired()).toEqual(true);
     expect((await po.getIndexCanisterInputPo().getText()).trim()).toEqual(
       "Index Canister ID"

frontend/src/tests/lib/pages/IcrcWallet.spec.ts

@@ -729,6 +729,12 @@ describe("IcrcWallet", () => {
         expect(spyOnSetImportedTokens).toBeCalledTimes(0);
         expect(await addIndexCanisterModalPo.isPresent()).toBe(true);
         expect(get(busyStore)).toEqual([]);
+        expect(
+          await addIndexCanisterModalPo
+            .getImportTokenFormPo()
+            .getLedgerCanisterIdPo()
+            .getCanisterIdText()
+        ).toEqual(ledgerCanisterId.toText());
 
         await addIndexCanisterModalPo.typeIndexCanisterId(
           indexCanisterId.toText()

frontend/src/tests/page-objects/ImportTokenForm.page-object.ts

@@ -1,5 +1,6 @@
 import { ButtonPo } from "$tests/page-objects/Button.page-object";
 import { CalloutWarningPo } from "$tests/page-objects/CalloutWarning.page-object";
+import { ImportTokenCanisterIdPo } from "$tests/page-objects/ImportTokenCanisterId.page-object";
 import { InputWithErrorPo } from "$tests/page-objects/InputWithError.page-object";
 import { BasePageObject } from "$tests/page-objects/base.page-object";
 import type { PageObjectElement } from "$tests/types/page-object.types";
@@ -18,6 +19,13 @@ export class ImportTokenFormPo extends BasePageObject {
     });
   }
 
+  getLedgerCanisterIdPo(): ImportTokenCanisterIdPo {
+    return ImportTokenCanisterIdPo.under({
+      element: this.root,
+      testId: "ledger-canister-id-view",
+    });
+  }
+
   getIndexCanisterInputPo(): InputWithErrorPo {
     return InputWithErrorPo.under({
       element: this.root,