For beta version 2024-08-16 - import token beta

.github/workflows/deploy-to-app.yaml

@@ -30,7 +30,10 @@ jobs:
     timeout-minutes: 60
     env:
       NNS_DAPP_APP_SUBNET_CANISTER_ID: "xnjld-hqaaa-aaaal-qb56q-cai"
-      SNS_AGGREGATOR_APP_SUBNET_CANISTER_ID: "otgyv-wyaaa-aaaak-qcgba-cai"
+      # beta sns aggregator
+      # SNS_AGGREGATOR_APP_SUBNET_CANISTER_ID: "otgyv-wyaaa-aaaak-qcgba-cai"
+      # mainnet sns aggregator
+      SNS_AGGREGATOR_APP_SUBNET_CANISTER_ID: "3r4gx-wqaaa-aaaaq-aaaia-cai"
       DFX_NETWORK: app
     steps:
       - name: Checkout nns-dapp

dfx.json

@@ -372,7 +372,7 @@
           "ENABLE_CKBTC": true,
           "ENABLE_CKTESTBTC": false,
           "ENABLE_PROJECTS_TABLE": true,
-          "ENABLE_IMPORT_TOKEN": false
+          "ENABLE_IMPORT_TOKEN": true
         }
       }
     },

frontend/src/lib/api/icrc-index.api.ts

@@ -45,6 +45,22 @@ export const getTransactions = async ({
   };
 };
 
+export const getLedgerId = async ({
+  identity,
+  indexCanisterId,
+  certified,
+}: {
+  identity: Identity;
+  indexCanisterId: Principal;
+  certified?: boolean;
+}): Promise<Principal> => {
+  const {
+    canister: { ledgerId },
+  } = await indexCanister({ identity, canisterId: indexCanisterId });
+
+  return ledgerId({ certified });
+};
+
 const indexCanister = async ({
   identity,
   canisterId,

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

@@ -20,10 +20,25 @@
     hasAccounts,
   } from "$lib/utils/accounts.utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
-  import { Island, Spinner } from "@dfinity/gix-components";
+  import {
+    IconBin,
+    IconDots,
+    Island,
+    Popover,
+    Spinner,
+    Tag,
+  } from "@dfinity/gix-components";
   import type { Principal } from "@dfinity/principal";
   import { TokenAmountV2, isNullish, nonNullish } from "@dfinity/utils";
   import type { Writable } from "svelte/store";
+  import { accountsPathStore } from "$lib/derived/paths.derived";
+  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 TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
+  import LinkToDashboardCanister from "$lib/components/common/LinkToDashboardCanister.svelte";
+  import { isImportedToken as checkImportedToken } from "$lib/utils/imported-tokens.utils";
+  import ImportTokenRemoveConfirmation from "$lib/components/accounts/ImportTokenRemoveConfirmation.svelte";
 
   export let testId: string;
   export let accountIdentifier: string | undefined | null = undefined;
@@ -142,58 +157,145 @@
         ledgerCanisterId,
         isSignedIn: $authSignedInStore,
       }))();
+
+  const remove = async () => {
+    if (isNullish(ledgerCanisterId)) return;
+
+    startBusy({
+      initiator: "import-token-removing",
+      labelKey: "import_token.removing",
+    });
+
+    const importedTokens = $importedTokensStore.importedTokens ?? [];
+    const { success } = await removeImportedTokens({
+      tokensToRemove: importedTokens.filter(
+        ({ ledgerCanisterId: id }) => id.toText() === ledgerCanisterId?.toText()
+      ),
+      importedTokens,
+    });
+
+    stopBusy("import-token-removing");
+
+    if (success) {
+      goto($accountsPathStore);
+    }
+  };
+
+  let moreButton: HTMLButtonElement | undefined;
+  let morePopupVisible = false;
+
+  let isImportedToken = false;
+  $: isImportedToken = checkImportedToken({
+    ledgerCanisterId,
+    importedTokens: $importedTokensStore.importedTokens,
+  });
+
+  let removeImportedTokenConfirmtionVisible = false;
 </script>
 
-<Island {testId}>
-  <main class="legacy">
-    <section>
-      {#if loaded && nonNullish(ledgerCanisterId)}
-        {#if nonNullish($selectedAccountStore.account) && nonNullish(token)}
-          <IcrcBalancesObserver
-            {ledgerCanisterId}
-            accounts={[$selectedAccountStore.account]}
-            reload={reloadOnlyAccountFromStore}
-          />
-        {/if}
-        <WalletPageHeader
-          universe={$selectedUniverseStore}
-          walletAddress={$selectedAccountStore.account?.identifier}
-        />
-        <WalletPageHeading
-          accountName={$selectedAccountStore.account?.name ??
-            $i18n.accounts.main}
-          balance={nonNullish($selectedAccountStore.account) &&
-          nonNullish(token)
-            ? TokenAmountV2.fromUlps({
-                amount: $selectedAccountStore.account.balanceUlps,
-                token,
-              })
-            : undefined}
-        >
-          <slot name="header-actions" />
-          <SignInGuard />
-        </WalletPageHeading>
-
-        {#if $$slots["info-card"]}
-          <div class="content-cell-island info-card">
-            <slot name="info-card" />
+<TestIdWrapper {testId}>
+  <Island>
+    <main class="legacy">
+      <section>
+        {#if loaded && nonNullish(ledgerCanisterId)}
+          {#if nonNullish($selectedAccountStore.account) && nonNullish(token)}
+            <IcrcBalancesObserver
+              {ledgerCanisterId}
+              accounts={[$selectedAccountStore.account]}
+              reload={reloadOnlyAccountFromStore}
+            />
+          {/if}
+          <WalletPageHeader
+            universe={$selectedUniverseStore}
+            walletAddress={$selectedAccountStore.account?.identifier}
+          >
+            <svelte:fragment slot="tags">
+              {#if isImportedToken}
+                <Tag testId="imported-token-tag"
+                  >{$i18n.import_token.imported_token}</Tag
+                >
+              {/if}
+            </svelte:fragment>
+            <svelte:fragment slot="actions">
+              {#if nonNullish(ledgerCanisterId)}
+                <button
+                  bind:this={moreButton}
+                  class="icon-only"
+                  data-tid="more-button"
+                  on:click={() => (morePopupVisible = true)}
+                >
+                  <IconDots />
+                </button>
+              {/if}
+            </svelte:fragment>
+          </WalletPageHeader>
+          <WalletPageHeading
+            accountName={$selectedAccountStore.account?.name ??
+              $i18n.accounts.main}
+            balance={nonNullish($selectedAccountStore.account) &&
+            nonNullish(token)
+              ? TokenAmountV2.fromUlps({
+                  amount: $selectedAccountStore.account.balanceUlps,
+                  token,
+                })
+              : undefined}
+          >
+            <slot name="header-actions" />
+            <SignInGuard />
+          </WalletPageHeading>
+
+          {#if $$slots["info-card"]}
+            <div class="content-cell-island info-card">
+              <slot name="info-card" />
+            </div>
+          {/if}
+
+          <Separator spacing="none" />
+
+          <!-- Transactions and the explanation go together. -->
+          <div>
+            <slot name="page-content" />
           </div>
+        {:else}
+          <Spinner />
         {/if}
+      </section>
+    </main>
 
-        <Separator spacing="none" />
+    <slot name="footer-actions" />
+  </Island>
 
-        <!-- Transactions and the explanation go together. -->
-        <div>
-          <slot name="page-content" />
-        </div>
-      {:else}
-        <Spinner />
-      {/if}
-    </section>
-  </main>
+  {#if nonNullish(ledgerCanisterId)}
+    <Popover
+      bind:visible={morePopupVisible}
+      anchor={moreButton}
+      direction="rtl"
+      invisibleBackdrop
+    >
+      <div class="popover-content">
+        <LinkToDashboardCanister canisterId={ledgerCanisterId} />
+        {#if isImportedToken}
+          <button
+            class="remove-button button ghost with-icon"
+            data-tid="remove-imported-token-button"
+            on:click={() => (removeImportedTokenConfirmtionVisible = true)}
+          >
+            <IconBin />
+            {$i18n.core.remove}
+          </button>
+        {/if}
+      </div>
+    </Popover>
+  {/if}
 
-  <slot name="footer-actions" />
-</Island>
+  {#if removeImportedTokenConfirmtionVisible && nonNullish(ledgerCanisterId)}
+    <ImportTokenRemoveConfirmation
+      {ledgerCanisterId}
+      on:nnsClose={() => (removeImportedTokenConfirmtionVisible = false)}
+      on:nnsConfirm={remove}
+    />
+  {/if}
+</TestIdWrapper>
 
 <style lang="scss">
   section {
@@ -205,4 +307,19 @@
   .info-card {
     background-color: var(--island-card-background);
   }
+
+  .popover-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-2x);
+  }
+
+  .remove-button {
+    padding: 0;
+    color: var(--negative-emphasis);
+
+    &:hover {
+      color: var(--negative-emphasis);
+    }
+  }
 </style>

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

@@ -1,23 +1,22 @@
 <script lang="ts">
   import { Copy } from "@dfinity/gix-components";
   import { nonNullish } from "@dfinity/utils";
-  import LinkIcon from "$lib/components/common/LinkIcon.svelte";
+  import LinkToDashboardCanister from "$lib/components/common/LinkToDashboardCanister.svelte";
+  import type { Principal } from "@dfinity/principal";
 
   export let label: string;
-  export let canisterId: string | undefined = undefined;
-  export let canisterLinkHref: string | undefined = undefined;
+  export let testId: string = "import-token-canister-id-component";
+  export let canisterId: Principal | undefined = undefined;
   export let canisterIdFallback: string | undefined = undefined;
 </script>
 
-<div class="container" data-tid="import-token-canister-id-component">
+<div class="container" data-tid={testId}>
   <span data-tid="label">{label}</span>
   <div class="canister-id">
     {#if nonNullish(canisterId)}
       <span class="value description" data-tid="canister-id">{canisterId}</span>
-      <Copy value={canisterId} />
-      {#if nonNullish(canisterLinkHref)}
-        <LinkIcon href={canisterLinkHref} />
-      {/if}
+      <Copy value={canisterId.toText()} />
+      <LinkToDashboardCanister noLabel {canisterId} />
     {:else if nonNullish(canisterIdFallback)}
       <span class="fallback description" data-tid="canister-id-fallback"
         >{canisterIdFallback}</span

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { i18n } from "$lib/stores/i18n";
+  import { Html, Modal, Tag } from "@dfinity/gix-components";
+  import { createEventDispatcher } from "svelte";
+  import UniversePageSummary from "$lib/components/universe/UniversePageSummary.svelte";
+  import type { Principal } from "@dfinity/principal";
+  import type { Universe } from "$lib/types/universe";
+  import { nonNullish } from "@dfinity/utils";
+  import { selectableUniversesStore } from "$lib/derived/selectable-universes.derived";
+
+  export let ledgerCanisterId: Principal;
+
+  let universe: Universe | undefined;
+  $: universe = $selectableUniversesStore.find(
+    ({ canisterId }) => canisterId === ledgerCanisterId.toText()
+  );
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<Modal
+  role="alert"
+  on:nnsClose
+  testId="imported-token-remove-confirmation"
+  disablePointerEvents={true}
+>
+  <svelte:fragment slot="title">
+    {$i18n.import_token.remove_confirmation_title}
+  </svelte:fragment>
+
+  <div class="content">
+    {#if nonNullish(universe)}
+      <UniversePageSummary {universe}>
+        <Tag slot="tags" testId="imported-token-tag"
+          >{$i18n.import_token.imported_token}</Tag
+        >
+      </UniversePageSummary>
+    {/if}
+    <p><Html text={$i18n.import_token.remove_confirmation_description} /></p>
+  </div>
+  <div class="toolbar">
+    <button
+      class="secondary"
+      data-tid="close-button"
+      on:click={() => dispatch("nnsClose")}
+    >
+      {$i18n.core.back}
+    </button>
+
+    <button
+      data-tid="confirm-button"
+      class="primary"
+      on:click={() => dispatch("nnsConfirm")}
+    >
+      {$i18n.core.remove}
+    </button>
+  </div>
+</Modal>
+
+<style lang="scss">
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-2x);
+
+    margin-bottom: var(--padding-4x);
+  }
+</style>