WiP: Imported tokens form

CHANGELOG-Sns_Aggregator.md

@@ -9,10 +9,6 @@ The SNS Aggregator is released through proposals in the Network Nervous System.
 ## Unreleased
 
 ### Added
-
-- Include SNS nervous system parameters.
-- Add common code snippets for developers to the "Documentation" chapter on the landing page.
-
 ### Changed
 ### Deprecated
 ### Removed
@@ -21,6 +17,10 @@ The SNS Aggregator is released through proposals in the Network Nervous System.
 
 - Decoding quota of 10,000 in the `http_request` method.
 
+## [Proposal 129614](https://dashboard.internetcomputer.org/proposal/129614)
+### Added
+- Include SNS nervous system parameters.
+- Add common code snippets for developers to the "Documentation" chapter on the landing page.
 
 ## [Proposal 126006](https://nns.ic0.app/proposal/?u=qoctq-giaaa-aaaaa-aaaea-cai&proposal=126006)
 ### Changed

dfx.json

@@ -386,7 +386,7 @@
         "DIDC_VERSION": "2024-05-14",
         "POCKETIC_VERSION": "3.0.1",
         "CARGO_SORT_VERSION": "1.0.9",
-        "SNSDEMO_RELEASE": "release-2024-08-14",
+        "SNSDEMO_RELEASE": "release-2024-08-21",
         "IC_COMMIT_FOR_PROPOSALS": "release-2024-08-02_01-30-base",
         "IC_COMMIT_FOR_SNS_AGGREGATOR": "release-2024-08-02_01-30-base"
       },

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

@@ -20,10 +20,27 @@
     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";
+  import type { Universe } from "$lib/types/universe";
+  import { selectableUniversesStore } from "$lib/derived/selectable-universes.derived";
 
   export let testId: string;
   export let accountIdentifier: string | undefined | null = undefined;
@@ -142,58 +159,150 @@
         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;
+
+  let universe: Universe | undefined;
+  $: universe = $selectableUniversesStore.find(
+    ({ canisterId }) => canisterId === ledgerCanisterId?.toText()
+  );
 </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 && nonNullish(universe)}
+          <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(universe)}
+    <ImportTokenRemoveConfirmation
+      {universe}
+      on:nnsClose={() => (removeImportedTokenConfirmtionVisible = false)}
+      on:nnsConfirm={remove}
+    />
+  {/if}
+</TestIdWrapper>
 
 <style lang="scss">
   section {
@@ -205,4 +314,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,41 @@
+<script lang="ts">
+  import { i18n } from "$lib/stores/i18n";
+  import UniversePageSummary from "$lib/components/universe/UniversePageSummary.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";
+
+  export let universe: Universe | undefined;
+</script>
+
+<ConfirmationModal
+  testId="import-token-remove-confirmation-component"
+  on:nnsClose
+  on:nnsConfirm
+  yesLabel={$i18n.core.remove}
+>
+  <div class="content">
+    <h4>{$i18n.import_token.remove_confirmation_description_1}</h4>
+    <div class="headline">
+      {#if nonNullish(universe)}<UniversePageSummary {universe} />{/if}
+      <Tag>{$i18n.import_token.imported_token}</Tag>
+    </div>
+    <p class="description text_small">
+      {$i18n.import_token.remove_confirmation_description_2}
+    </p>
+  </div>
+</ConfirmationModal>
+
+<style lang="scss">
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-2x);
+  }
+
+  .headline {
+    display: flex;
+    gap: var(--padding-0_5x);
+  }
+</style>