feat(projects): separate projects tables by type (#7122)

yhabib · web-flow · commit d847d8b92777 · 2025-07-18T06:28:52.000Z
# Motivation The Tokens and Neurons tables will be divided into multiple tables to distinguish ICP from other assets. This PR separates the Neurons table into distinct tables for each type: NNS and SNS neurons. The SNS neuron table will be hidden if the user has no neurons and has selected the hide 0 balance toggle. Additionally, we want to display a different table for those SNS projects that have been sunset. | Mobile | Desktop | |--------|--------| |<img width="537" height="991" alt="Screenshot 2025-07-17 at 15 58 15" src="https://github.com/user-attachments/assets/c5f62d67-3db3-45ed-a30c-8e196b65381d" /> | <img width="1272" height="760" alt="Screenshot 2025-07-17 at 15 58 02" src="https://github.com/user-attachments/assets/434e073d-ff94-4735-90b4-667acac4a9bb" /> | | <img width="467" height="386" alt="Screenshot 2025-07-17 at 17 23 44" src="https://github.com/user-attachments/assets/d14f0029-82ab-40a0-8b08-45fcdea759bd" /> | <img width="979" height="703" alt="Screenshot 2025-07-17 at 17 23 21" src="https://github.com/user-attachments/assets/8380a78f-a439-4996-94ca-40311d31ebcb" /> | [NNS1-3966](https://dfinity.atlassian.net/browse/NNS1-3966) # Changes - Split the current Projects table into three instances: nns, sns and sunset sns. # Tests - [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
diff --git a/frontend/src/lib/components/staking/ProjectsTable.svelte b/frontend/src/lib/components/staking/ProjectsTable.svelte
@@ -8,12 +8,16 @@
   import ResponsiveTable from "$lib/components/ui/ResponsiveTable.svelte";
   import Separator from "$lib/components/ui/Separator.svelte";
   import UsdValueBanner from "$lib/components/ui/UsdValueBanner.svelte";
-  import { OWN_CANISTER_ID_TEXT } from "$lib/constants/canister-ids.constants";
+  import {
+    abandonedProjectsCanisterId,
+    OWN_CANISTER_ID_TEXT,
+  } from "$lib/constants/canister-ids.constants";
   import { authSignedInStore } from "$lib/derived/auth.derived";
   import { icpSwapUsdPricesStore } from "$lib/derived/icp-swap.derived";
   import { selectableUniversesStore } from "$lib/derived/selectable-universes.derived";
   import { loadIcpSwapTickers } from "$lib/services/icp-swap.services";
   import { failedActionableSnsesStore } from "$lib/stores/actionable-sns-proposals.store";
+  import { ENABLE_NEW_TABLES } from "$lib/stores/feature-flags.store";
   import { hideZeroNeuronsStore } from "$lib/stores/hide-zero-neurons.store";
   import { i18n } from "$lib/stores/i18n";
   import { neuronsStore } from "$lib/stores/neurons.store";
@@ -29,65 +33,96 @@
     sortTableProjects,
   } from "$lib/utils/staking.utils";
   import { IconNeuronsPage } from "@dfinity/gix-components";
-  import { TokenAmountV2, isNullish } from "@dfinity/utils";
+  import { isNullish, TokenAmountV2 } from "@dfinity/utils";
   import { createEventDispatcher } from "svelte";
 
   $: if ($authSignedInStore) {
     loadIcpSwapTickers();
   }
-
-  let columns: ProjectsTableColumn[] = [];
-  $: columns = [
-    {
-      id: "title",
-      title: $i18n.staking.nervous_systems,
-      cellComponent: ProjectTitleCell,
-      alignment: "left",
-      templateColumns: ["minmax(min-content, max-content)"],
-      comparator: $authSignedInStore ? compareByProject : undefined,
-    },
-    {
-      title: "",
-      alignment: "left",
-      templateColumns: ["1fr"],
-    },
+  let commonColumns: ProjectsTableColumn[] = [];
+  $: commonColumns = [
     {
       id: "stake",
       title: $i18n.neuron_detail.stake,
       cellComponent: ProjectStakeCell,
       alignment: "right",
-      templateColumns: ["max-content"],
-      comparator: $authSignedInStore ? compareByStake : undefined,
-    },
-    {
-      title: "",
-      alignment: "left",
       templateColumns: ["1fr"],
+      comparator: $authSignedInStore ? compareByStake : undefined,
     },
     {
       title: $i18n.neuron_detail.maturity_title,
       cellComponent: ProjectMaturityCell,
       alignment: "right",
-      templateColumns: ["max-content"],
-    },
-    {
-      title: "",
-      alignment: "left",
       templateColumns: ["1fr"],
     },
     {
       id: "neurons",
       title: $i18n.neurons.title,
       cellComponent: ProjectNeuronsCell,
       alignment: "right",
-      templateColumns: ["max-content"],
+      templateColumns: ["1fr"],
       comparator: $authSignedInStore ? compareByNeuron : undefined,
     },
     {
       title: "",
       cellComponent: ProjectActionsCell,
       alignment: "right",
-      templateColumns: ["max-content"],
+      templateColumns: ["1fr"],
+    },
+  ];
+
+  let columns: ProjectsTableColumn[] = [];
+  $: columns = [
+    {
+      id: "title",
+      title: $i18n.staking.nervous_systems,
+      cellComponent: ProjectTitleCell,
+      alignment: "left",
+      templateColumns: ["2fr"],
+      comparator: $authSignedInStore ? compareByProject : undefined,
+    },
+    ...commonColumns,
+  ];
+
+  let nnsColumns: ProjectsTableColumn[] = [];
+  $: nnsColumns = [
+    {
+      id: "title",
+      title: $i18n.staking.nervous_systems_nns,
+      cellComponent: ProjectTitleCell,
+      alignment: "left",
+      templateColumns: ["2fr"],
+      comparator: $authSignedInStore ? compareByProject : undefined,
+    },
+    ...commonColumns,
+  ];
+
+  let snsColumns: ProjectsTableColumn[] = [];
+  $: snsColumns = [
+    {
+      id: "title",
+      title: $i18n.staking.nervous_systems_sns,
+      cellComponent: ProjectTitleCell,
+      alignment: "left",
+      templateColumns: ["2fr"],
+      comparator: $authSignedInStore ? compareByProject : undefined,
+    },
+    ...commonColumns,
+  ];
+
+  let sunsettedSnsColumns: ProjectsTableColumn[] = [];
+  $: sunsettedSnsColumns = [
+    {
+      id: "title",
+      title: $i18n.staking.nervous_systems_sns_sunset,
+      cellComponent: ProjectTitleCell,
+      alignment: "left",
+      templateColumns: ["2fr"],
+    },
+    {
+      title: "",
+      alignment: "left",
+      templateColumns: ["1fr"],
     },
   ];
 
@@ -132,6 +167,21 @@
       (!("stakeInUsd" in project) || isNullish(project.stakeInUsd))
   );
 
+  let nnsNeurons: TableProject[] = [];
+  $: nnsNeurons = sortedTableProjects.filter(
+    (project) => project.universeId === OWN_CANISTER_ID_TEXT
+  );
+
+  let snsNeurons: TableProject[] = [];
+  $: snsNeurons = sortedTableProjects
+    .filter((p) => p.universeId !== OWN_CANISTER_ID_TEXT)
+    .filter((p) => !abandonedProjectsCanisterId.includes(p.universeId));
+
+  let sunsetSns: TableProject[] = [];
+  $: sunsetSns = sortedTableProjects.filter((p) =>
+    abandonedProjectsCanisterId.includes(p.universeId)
+  );
+
   const dispatcher = createEventDispatcher();
 
   const handleAction = ({
@@ -154,7 +204,76 @@
     </UsdValueBanner>
   {/if}
 
-  {#if !$authSignedInStore}
+  {#if $ENABLE_NEW_TABLES}
+    {#if !$authSignedInStore}
+      <ResponsiveTable
+        tableData={nnsNeurons}
+        columns={nnsColumns}
+        on:nnsAction={handleAction}
+      />
+
+      <ResponsiveTable
+        tableData={snsNeurons}
+        columns={snsColumns}
+        on:nnsAction={handleAction}
+      />
+
+      {#if sunsetSns.length > 0}
+        <ResponsiveTable tableData={sunsetSns} columns={sunsettedSnsColumns} />
+      {/if}
+    {:else}
+      <ResponsiveTable
+        tableData={nnsNeurons}
+        columns={nnsColumns}
+        on:nnsAction={handleAction}
+        bind:order={$projectsTableOrderStore}
+        displayTableSettings
+      >
+        <svelte:fragment slot="settings-popover">
+          <HideZeroNeuronsToggle />
+          <Separator spacing="none" />
+        </svelte:fragment>
+
+        <div
+          slot="last-row"
+          class="last-row"
+          class:hidden={!shouldHideProjectsWithoutNeurons}
+        >
+          {#if shouldHideProjectsWithoutNeurons}
+            <div class="show-all-button-container">
+              {$i18n.staking.hide_no_neurons_table_hint}
+              <button
+                data-tid="show-all-button"
+                class="ghost show-all"
+                on:click={showAll}
+              >
+                {$i18n.staking.show_all}</button
+              >
+            </div>
+          {/if}
+        </div>
+      </ResponsiveTable>
+
+      {#if snsNeurons.length > 0}
+        <ResponsiveTable
+          tableData={snsNeurons}
+          columns={snsColumns}
+          on:nnsAction={handleAction}
+          bind:order={$projectsTableOrderStore}
+          displayTableSettings
+        >
+          <svelte:fragment slot="settings-popover">
+            <HideZeroNeuronsToggle />
+            <Separator spacing="none" />
+          </svelte:fragment>
+        </ResponsiveTable>
+      {/if}
+
+      {#if $hideZeroNeuronsStore !== "hide" && sunsetSns.length > 0}
+        <ResponsiveTable tableData={sunsetSns} columns={sunsettedSnsColumns} />
+      {/if}
+    {/if}
+  {:else if !$authSignedInStore}
     <ResponsiveTable
       tableData={sortedTableProjects}
       {columns}
diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json
@@ -338,6 +338,9 @@
     "title": "Stake and earn voting rewards",
     "text": "Earn voting rewards by staking your tokens in neurons. Neurons allow you to participate in governance of the Internet Computer, and DAOs deployed on the Internet Computer.",
     "nervous_systems": "Nervous Systems",
+    "nervous_systems_nns": "NNS DAO",
+    "nervous_systems_sns": "SNS DAOs",
+    "nervous_systems_sns_sunset": "Sunset SNS DAOs",
     "hide_no_neurons_header": "Neurons",
     "hide_no_neurons_toggle_label": "Hide projects with 0 neurons",
     "hide_no_neurons_table_hint": "Projects with 0 neurons are hidden.",
diff --git a/frontend/src/lib/types/i18n.d.ts b/frontend/src/lib/types/i18n.d.ts
@@ -351,6 +351,9 @@ interface I18nStaking {
   title: string;
   text: string;
   nervous_systems: string;
+  nervous_systems_nns: string;
+  nervous_systems_sns: string;
+  nervous_systems_sns_sunset: string;
   hide_no_neurons_header: string;
   hide_no_neurons_toggle_label: string;
   hide_no_neurons_table_hint: string;
diff --git a/frontend/src/lib/types/responsive-table.ts b/frontend/src/lib/types/responsive-table.ts
@@ -11,6 +11,7 @@ export interface ResponsiveTableRowData {
 export type ColumnAlignment = "left" | "right";
 export type TemplateItem =
   | "1fr"
+  | "2fr"
   | "max-content"
   | "minmax(max-content, 1fr)"
   | "minmax(min-content, max-content)";
diff --git a/frontend/src/tests/lib/components/staking/ProjectsTable.spec.ts b/frontend/src/tests/lib/components/staking/ProjectsTable.spec.ts
@@ -68,11 +68,8 @@ describe("ProjectsTable", () => {
     const po = renderComponent();
     expect(await po.getDesktopColumnHeaders()).toEqual([
       "Nervous Systems",
-      "",
       "Stake",
-      "",
       "Maturity",
-      "",
       "Neurons",
       "", // No header for actions column.
     ]);
@@ -91,11 +88,8 @@ describe("ProjectsTable", () => {
     const rows = await po.getRows();
     expect(await rows[0].getCellAlignments()).toEqual([
       "desktop-align-left", // Nervous Systems
-      expect.any(String), // gap
       "desktop-align-right", // Stake
-      expect.any(String), // gap
       "desktop-align-right", // Maturity
-      expect.any(String), // gap
       "desktop-align-right", // Neurons
       "desktop-align-right", // Actions
     ]);
@@ -105,19 +99,10 @@ describe("ProjectsTable", () => {
     const po = renderComponent();
 
     expect(await po.getDesktopGridTemplateColumns()).toBe(
-      [
-        "minmax(min-content, max-content)", // Nervous Systems
-        "1fr", // gap
-        "max-content", // Stake
-        "1fr", // gap
-        "max-content", // Maturity
-        "1fr", // gap
-        "max-content", // Neurons
-        "max-content", // Actions
-      ].join(" ")
+      ["2fr", "1fr", "1fr", "1fr", "1fr"].join(" ")
     );
     expect(await po.getMobileGridTemplateAreas()).toBe(
-      '"first-cell last-cell" "cell-1 cell-1" "cell-3 cell-3" "cell-5 cell-5"'
+      '"first-cell last-cell" "cell-0 cell-0" "cell-1 cell-1" "cell-2 cell-2"'
     );
   });
 
