dfinity · mstrasinskis · Jan 20, 2025 · Jan 21, 2025 · Jan 21, 2025 · Jan 21, 2025
@@ -4,10 +4,14 @@
   import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
   import PrincipalInput from "$lib/components/ui/PrincipalInput.svelte";
   import { i18n } from "$lib/stores/i18n";
-  import { Html, IconOpenInNew } from "@dfinity/gix-components";
+  import { Html, IconInfo, IconOpenInNew } from "@dfinity/gix-components";
   import type { Principal } from "@dfinity/principal";
   import { isNullish } from "@dfinity/utils";
   import { createEventDispatcher } from "svelte";
+  import SignIn from "$lib/components/common/SignIn.svelte";
+  import { authSignedInStore } from "$lib/derived/auth.derived";
+  import Banner from "$lib/components/ui/Banner.svelte";
+  import BannerIcon from "$lib/components/ui/BannerIcon.svelte";
 
   export let ledgerCanisterId: Principal | undefined = undefined;
   export let indexCanisterId: Principal | undefined = undefined;
@@ -34,7 +38,9 @@
     {$i18n.import_token.doc_link_label}
   </a>
 
-  <form on:submit|preventDefault={() => dispatch("nnsSubmit")}>
+  <form
+    on:submit|preventDefault={() => $authSignedInStore && dispatch("nnsSubmit")}
+  >
     {#if addIndexCanisterMode}
       <ImportTokenCanisterId
         testId="ledger-canister-id-view"
@@ -74,10 +80,18 @@
       <Html text={$i18n.import_token.index_canister_description} />
     </p>
 
-    {#if !addIndexCanisterMode}
+    {#if !addIndexCanisterMode && $authSignedInStore}
       <CalloutWarning htmlText={$i18n.import_token.warning} />
     {/if}
 
+    {#if !$authSignedInStore}
+      <Banner text="Please sign in to proceed with the token import.">
+        <BannerIcon slot="icon">
+          <IconInfo />
+        </BannerIcon>
+      </Banner>
+    {/if}
+
     <div class="toolbar">
       <button
         class="secondary"
@@ -88,14 +102,18 @@
         {$i18n.core.cancel}
       </button>
 
-      <button
-        data-tid="submit-button"
-        class="primary"
-        type="submit"
-        disabled={isSubmitDisabled}
-      >
-        {addIndexCanisterMode ? $i18n.core.add : $i18n.core.next}
-      </button>
+      {#if $authSignedInStore}
+        <button
+          data-tid="submit-button"
+          class="primary"
+          type="submit"
+          disabled={isSubmitDisabled}
+        >
+          {addIndexCanisterMode ? $i18n.core.add : $i18n.core.next}
+        </button>
+      {:else}
+        <SignIn />
+      {/if}
     </div>
   </form>
 </TestIdWrapper>

@@ -965,7 +965,8 @@
     "is_duplication": "You have already imported this token, you can find it in the token list.",
     "is_sns": "You cannot import SNS tokens, they are added by the NNS.",
     "is_important": "This token is already in the token list.",
-    "is_icp": "You cannot import ICP."
+    "is_icp": "You cannot import ICP.",
+    "invalid_canister_id": "Importing the token was unsuccessful because \"$canisterId\" is not a valid canister ID. Please verify the ID and retry."
   },
   "error__sns": {
     "undefined_project": "The requested project is invalid or throws an error.",

@@ -8,10 +8,13 @@
   import { matchLedgerIndexPair } from "$lib/services/icrc-index.services";
   import { addImportedToken } from "$lib/services/imported-tokens.services";
   import { startBusy, stopBusy } from "$lib/stores/busy.store";
-  import { DISABLE_IMPORT_TOKEN_VALIDATION_FOR_TESTING } from "$lib/stores/feature-flags.store";
+  import {
+    DISABLE_IMPORT_TOKEN_VALIDATION_FOR_TESTING,
+    ENABLE_IMPORT_TOKEN_BY_URL,
+  } from "$lib/stores/feature-flags.store";
   import { i18n } from "$lib/stores/i18n";
   import { importedTokensStore } from "$lib/stores/imported-tokens.store";
-  import { toastsError } from "$lib/stores/toasts.store";
+  import { toastsError, toastsShow } from "$lib/stores/toasts.store";
   import type { IcrcTokenMetadata } from "$lib/types/icrc";
   import { isImportantCkToken } from "$lib/utils/icrc-tokens.utils";
   import { isImportedToken } from "$lib/utils/imported-tokens.utils";
@@ -22,10 +25,13 @@
     type WizardStep,
     type WizardSteps,
   } from "@dfinity/gix-components";
-  import type { Principal } from "@dfinity/principal";
+  import { Principal } from "@dfinity/principal";
   import { isNullish, nonNullish } from "@dfinity/utils";
   import { createEventDispatcher } from "svelte";
   import { get } from "svelte/store";
+  import { authSignedInStore } from "$lib/derived/auth.derived";
+  import { AppPath } from "$lib/constants/routes.constants";
+  import { pageStore } from "$lib/derived/page.derived";
 
   let currentStep: WizardStep | undefined = undefined;
 
@@ -51,6 +57,53 @@
   let indexCanisterId: Principal | undefined;
   let tokenMetaData: IcrcTokenMetadata | undefined;
 
+  const validateCanisterIdText = (canisterIdText: string): boolean => {
+    try {
+      return Boolean(Principal.fromText(canisterIdText));
+    } catch (err) {
+      console.error(err);
+      toastsError({
+        labelKey: "error__imported_tokens.invalid_canister_id",
+        substitutions: { $canisterId: canisterIdText },
+      });
+      close();
+      goto(AppPath.Tokens);
+      return false;
+    }
+  };
+  $: {
+    const ledgerId = $pageStore.importTokenLedgerId;
+    if (
+      nonNullish(ledgerId) &&
+      isNullish(ledgerCanisterId) &&
+      validateCanisterIdText(ledgerId)
+    ) {
+      ledgerCanisterId = Principal.fromText(ledgerId);
+    }
+  }
+  $: {
+    const indexId = $pageStore.importTokenIndexId;
+    if (
+      nonNullish(indexId) &&
+      isNullish(indexCanisterId) &&
+      validateCanisterIdText(indexId)
+    ) {
+      indexCanisterId = Principal.fromText(indexId);
+    }
+  }
+
+  let isAutoSubmitDone = false;
+  $: if (
+    $authSignedInStore &&
+    $ENABLE_IMPORT_TOKEN_BY_URL &&
+    !isAutoSubmitDone &&
+    // Wait for the imported tokens to be loaded (for successful validation).
+    nonNullish($importedTokensStore?.importedTokens)
+  ) {
+    isAutoSubmitDone = true;
+    onSubmit();
+  }
+
   const getTokenMetaData = async (
     ledgerCanisterId: Principal
   ): Promise<IcrcTokenMetadata | undefined> => {
@@ -63,6 +116,29 @@
       });
     }
   };
+  const checkAlreadyImported = (ledgerCanisterId: Principal): boolean => {
+    if (
+      isImportedToken({
+        ledgerCanisterId,
+        importedTokens: $importedTokensStore?.importedTokens,
+      })
+    ) {
+      toastsShow({
+        level: "warn",
+        labelKey: "error__imported_tokens.is_duplication",
+      });
+
+      goto(
+        buildWalletUrl({
+          universe: ledgerCanisterId.toText(),
+        })
+      );
+
+      return false;
+    }
+
+    return true;
+  };
   const validateLedgerCanister = (
     ledgerCanisterId: Principal
   ): { errorLabelKey: string | undefined } => {
@@ -111,6 +187,9 @@
       return;
     }
 
+    if (!checkAlreadyImported(ledgerCanisterId)) {
+      return;
+    }
     const { errorLabelKey } = validateLedgerCanister(ledgerCanisterId);
     if (nonNullish(errorLabelKey)) {
       toastsError({
@@ -163,7 +242,7 @@
         importedTokens: $importedTokensStore.importedTokens,
       });
       if (success) {
-        dispatch("nnsClose");
+        close();
         goto(
           buildWalletUrl({
             universe: ledgerCanisterId.toText(),
@@ -174,14 +253,20 @@
       stopBusy("import-token-importing");
     }
   };
+
+  const close = () => dispatch("nnsClose");
 </script>
 
 <WizardModal
   testId="import-token-modal-component"
   {steps}
   bind:currentStep
   bind:this={modal}
-  on:nnsClose
+  on:nnsClose={() => {
+    close();
+    // Navigate on close to clear all query parameters.
+    goto(AppPath.Tokens);
+  }}
 >
   <svelte:fragment slot="title">{currentStep?.title}</svelte:fragment>
 

@@ -4,8 +4,20 @@
   import { i18n } from "$lib/stores/i18n";
   import type { UserToken } from "$lib/types/tokens-page";
   import { IconAccountsPage, PageBanner } from "@dfinity/gix-components";
+  import { nonNullish } from "@dfinity/utils";
+  import ImportTokenModal from "$lib/modals/accounts/ImportTokenModal.svelte";
+  import { authSignedInStore } from "$lib/derived/auth.derived";
+  import { ENABLE_IMPORT_TOKEN_BY_URL } from "$lib/stores/feature-flags.store";
+  import { pageStore } from "$lib/derived/page.derived";
 
   export let userTokensData: UserToken[];
+
+  // Since there are two ImportTokenModals on both Tokens and SignInTokens pages,
+  // we need to hide this modal after a successful sign-in to
+  // prevent it from blocking this component’s destruction.
+  let showImportTokenModal = false;
+  $: showImportTokenModal =
+    !$authSignedInStore && nonNullish($pageStore.importTokenLedgerId);
 </script>
 
 <div class="content" data-tid="sign-in-tokens-page-component">
@@ -21,6 +33,10 @@
     {userTokensData}
     firstColumnHeader={$i18n.tokens.projects_header}
   />
+
+  {#if showImportTokenModal && $ENABLE_IMPORT_TOKEN_BY_URL}
+    <ImportTokenModal on:nnsClose={() => (showImportTokenModal = false)} />
+  {/if}
 </div>
 
 <style lang="scss">

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { page } from "$app/stores";
   import HideZeroBalancesToggle from "$lib/components/tokens/TokensTable/HideZeroBalancesToggle.svelte";
   import TokensTable from "$lib/components/tokens/TokensTable/TokensTable.svelte";
   import UsdValueBanner from "$lib/components/ui/UsdValueBanner.svelte";

@@ -1008,6 +1008,7 @@ interface I18nError__imported_tokens {
   is_sns: string;
   is_important: string;
   is_icp: string;
+  invalid_canister_id: string;
 }
 
 interface I18nError__sns {