feat(tokens): separate token tables by category (#7121)

# Motivation

The Tokens and Neurons tables will be split into multiple tables to
differentiate ICP from other assets. This PR separates the Tokens table
into distinct tables for each type: ICP, CK, SNS, and imported. Tables
without holdings will be hidden if the user prefers not to display zero
balances.

| Mobile | Desktop |
|--------|--------|
| <img width="419" height="882" alt="Screenshot 2025-07-17 at 11 38 36"
src="https://github.com/user-attachments/assets/d8630e23-d877-4c1f-837c-d88b9cb4f23c"
/> | <img width="1505" height="1316" alt="Screenshot 2025-07-17 at 11 38
56"
src="https://github.com/user-attachments/assets/cf0cfe37-2aaf-4805-82bd-0a9c1b6907cf"
/> |
| <img width="491" height="896" alt="Screenshot 2025-07-17 at 11 39 23"
src="https://github.com/user-attachments/assets/73177ffe-0bb0-45e4-8fb0-15288439d11e"
/> | <img width="1482" height="1388" alt="Screenshot 2025-07-17 at 11 39
41"
src="https://github.com/user-attachments/assets/b0b68341-a978-4800-86dc-e07449f79ff8"
/> |
| <img width="419" height="882" alt="Screenshot 2025-07-17 at 11 40 47"
src="https://github.com/user-attachments/assets/f211a7c3-676c-4d6f-9264-1bf0a0e7492b"
/> | <img width="1508" height="1028" alt="Screenshot 2025-07-17 at 11 41
06"
src="https://github.com/user-attachments/assets/1fb82622-db51-422b-8dea-9c3550d52c13"
/> |
| <img width="499" height="900" alt="Screenshot 2025-07-17 at 11 40 20"
src="https://github.com/user-attachments/assets/b20e2fca-9176-433a-a52d-f53e59a01fcc"
/> | <img width="954" height="741" alt="Screenshot 2025-07-17 at 11 40
06"
src="https://github.com/user-attachments/assets/221b0607-e1c2-486a-983c-c97ee133d377"
/> |

[NNS1-3966](https://dfinity.atlassian.net/browse/NNS1-3966)

# Changes

- Split the current Tokens table into four instances, one for each type.
- Move the Import Token button to the Popover.  
- Update the table settings button to an IconMenu.

# Tests

- New unit tests for multiple tables.
-
[DevEnv](https://qsgjb-riaaa-aaaaa-aaaga-cai.yhabib-ingress.devenv.dfinity.network/tokens/)

# Todos

- [x] Accessibility (a11y) – any impact?
- [x] Changelog – is it needed?


[NNS1-3966]:
https://dfinity.atlassian.net/browse/NNS1-3966?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: yhabib

frontend/src/lib/components/tokens/TokensTable/ImportTokenButton.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { MAX_IMPORTED_TOKENS } from "$lib/constants/imported-tokens.constants";
+  import { i18n } from "$lib/stores/i18n";
+  import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+  import { replacePlaceholders } from "$lib/utils/i18n.utils";
+  import { IconAdd, Tooltip } from "@dfinity/gix-components";
+  import { nonNullish } from "@dfinity/utils";
+
+  type Props = {
+    isModalVisible: boolean;
+  };
+  let { isModalVisible = $bindable() }: Props = $props();
+
+  const importedTokens = $derived($importedTokensStore.importedTokens);
+  const maximumImportedTokensReached = $derived(
+    (importedTokens?.length ?? 0) >= MAX_IMPORTED_TOKENS
+  );
+
+  const showModal = () => (isModalVisible = true);
+</script>
+
+{#if nonNullish(importedTokens)}
+  <Tooltip
+    top
+    testId="maximum-imported-tokens-tooltip"
+    text={maximumImportedTokensReached
+      ? replacePlaceholders($i18n.import_token.maximum_reached_tooltip, {
+          $max: `${MAX_IMPORTED_TOKENS}`,
+        })
+      : undefined}
+  >
+    <button
+      data-tid="import-token-button"
+      class="button"
+      onclick={showModal}
+      disabled={maximumImportedTokensReached}
+    >
+      {$i18n.import_token.import_token}<span class="icon">
+        <IconAdd />
+      </span>
+    </button>
+  </Tooltip>
+{/if}
+
+<style lang="scss">
+  .button {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0;
+    color: var(--gix-color-text);
+
+    .icon {
+      display: flex;
+      color: var(--primary);
+    }
+  }
+</style>

frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte

@@ -4,6 +4,7 @@
   import ReceiveButton from "$lib/components/tokens/TokensTable/actions/ReceiveButton.svelte";
   import RemoveButton from "$lib/components/tokens/TokensTable/actions/RemoveButton.svelte";
   import SendButton from "$lib/components/tokens/TokensTable/actions/SendButton.svelte";
+  import VoidAction from "$lib/components/tokens/TokensTable/actions/VoidAction.svelte";
   import {
     UserTokenAction,
     type UserTokenData,
@@ -27,6 +28,7 @@
     [UserTokenAction.Send]: SendButton,
     [UserTokenAction.GoToDashboard]: GoToDashboardButton,
     [UserTokenAction.Remove]: RemoveButton,
+    [UserTokenAction.Blank]: VoidAction,
   };
 
   let userToken: UserTokenData | UserTokenFailed | undefined;

frontend/src/lib/components/tokens/TokensTable/TokensTable.svelte

@@ -19,6 +19,7 @@
   export let firstColumnHeader: string;
   export let order: TokensTableOrder = [];
   export let displayTableSettings = false;
+  export let testId: string = "tokens-table-component";
 
   let enableSorting: boolean;
   $: enableSorting = order.length > 0;
@@ -61,7 +62,7 @@
 </script>
 
 <ResponsiveTable
-  testId="tokens-table-component"
+  {testId}
   tableData={userTokensData}
   {columns}
   bind:order

frontend/src/lib/components/tokens/TokensTable/actions/VoidAction.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { UserTokenData, UserTokenFailed } from "$lib/types/tokens-page";
+
+  // svelte-ignore unused-export-let
+  export let userToken: UserTokenData | UserTokenFailed;
+</script>
+
+<span class="blank"></span>
+
+<style lang="scss">
+  .blank {
+    width: 36px;
+  }
+</style>

frontend/src/lib/components/ui/ResponsiveTable.svelte

@@ -18,7 +18,7 @@
     sortTableData,
   } from "$lib/utils/responsive-table.utils";
   import { heightTransition } from "$lib/utils/transition.utils";
-  import { IconSettings, IconSouth, Popover } from "@dfinity/gix-components";
+  import { IconMenu, IconSouth, Popover } from "@dfinity/gix-components";
   import { assertNonNullish, isNullish, nonNullish } from "@dfinity/utils";
 
   export let testId = "responsive-table-component";
@@ -132,7 +132,7 @@
                 class="settings-button icon-only"
                 aria-label={$i18n.tokens.settings_button}
                 bind:this={settingsButton}
-                on:click={openSettings}><IconSettings /></button
+                on:click={openSettings}><IconMenu /></button
               >{/if}
           </span>
         {/if}

frontend/src/lib/derived/tokens-list-user.derived.ts

@@ -117,7 +117,7 @@ const convertToUserTokenData = ({
     }),
     actions: [
       ...(baseTokenData.universeId.toText() === OWN_CANISTER_ID_TEXT
-        ? [UserTokenAction.GoToDetail]
+        ? [UserTokenAction.Blank, UserTokenAction.GoToDetail]
         : [UserTokenAction.Receive, UserTokenAction.Send]),
     ],
     accountIdentifier,

frontend/src/lib/i18n/en.json

@@ -1242,6 +1242,10 @@
   },
   "tokens": {
     "projects_header": "Projects",
+    "projects_header_icp": "ICP Token",
+    "projects_header_ck": "ckTokens",
+    "projects_header_sns": "SNS Tokens",
+    "projects_header_imported": "Imported Tokens",
     "balance_header": "Balance",
     "accounts_header": "Accounts",
     "settings_button": "Open tokens settings",

frontend/src/lib/pages/SignInTokens.svelte

@@ -5,18 +5,24 @@
   import { authSignedInStore } from "$lib/derived/auth.derived";
   import { pageStore } from "$lib/derived/page.derived";
   import ImportTokenModal from "$lib/modals/accounts/ImportTokenModal.svelte";
+  import { ENABLE_NEW_TABLES } from "$lib/stores/feature-flags.store";
   import { i18n } from "$lib/stores/i18n";
   import type { UserToken } from "$lib/types/tokens-page";
+  import { filterTokensByType } from "$lib/utils/tokens-table.utils";
   import { IconAccountsPage, PageBanner } from "@dfinity/gix-components";
   import { nonNullish } from "@dfinity/utils";
 
-  export let userTokensData: UserToken[];
-  let showImportTokenModal = false;
-  $: showImportTokenModal =
-    // 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.
-    !$authSignedInStore && nonNullish($pageStore.importTokenLedgerId);
+  type Props = {
+    userTokensData: UserToken[];
+  };
+  const { userTokensData = [] }: Props = $props();
+
+  // 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 = $state(
+    !$authSignedInStore && nonNullish($pageStore.importTokenLedgerId)
+  );
 </script>
 
 <TestIdWrapper testId="sign-in-tokens-page-component">
@@ -28,14 +34,39 @@
       <p class="description" slot="description">{$i18n.auth_accounts.text}</p>
       <SignIn slot="actions" />
     </PageBanner>
-
-    <TokensTable
-      on:nnsAction
-      {userTokensData}
-      firstColumnHeader={$i18n.tokens.projects_header}
-    />
+    {#if $ENABLE_NEW_TABLES}
+      <TokensTable
+        on:nnsAction
+        userTokensData={filterTokensByType({
+          tokens: userTokensData,
+          type: "icp",
+        })}
+        firstColumnHeader={$i18n.tokens.projects_header_icp}
+      />
+      <TokensTable
+        on:nnsAction
+        userTokensData={filterTokensByType({
+          tokens: userTokensData,
+          type: "ck",
+        })}
+        firstColumnHeader={$i18n.tokens.projects_header_ck}
+      />
+      <TokensTable
+        on:nnsAction
+        userTokensData={filterTokensByType({
+          tokens: userTokensData,
+          type: "sns",
+        })}
+        firstColumnHeader={$i18n.tokens.projects_header_sns}
+      />
+    {:else}
+      <TokensTable
+        on:nnsAction
+        {userTokensData}
+        firstColumnHeader={$i18n.tokens.projects_header}
+      />
+    {/if}
   </div>
-
   {#if showImportTokenModal}
     <ImportTokenModal on:nnsClose={() => (showImportTokenModal = false)} />
   {/if}