diff --git a/frontend/src/lib/components/staking/ProjectsTable.svelte b/frontend/src/lib/components/staking/ProjectsTable.svelte index 6ed73c1d67f..f9f3d89d380 100644 --- 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,50 +33,26 @@ 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"], }, { @@ -80,14 +60,69 @@ 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 @@ {/if} - {#if !$authSignedInStore} + {#if $ENABLE_NEW_TABLES} + {#if !$authSignedInStore} + + + + + {#if sunsetSns.length > 0} + + {/if} + {:else} + + + + + + +
+ {#if shouldHideProjectsWithoutNeurons} +
+ {$i18n.staking.hide_no_neurons_table_hint} + +
+ {/if} +
+
+ + {#if snsNeurons.length > 0} + + + + + + + {/if} + + {#if $hideZeroNeuronsStore !== "hide" && sunsetSns.length > 0} + + {/if} + {/if} + {:else if !$authSignedInStore} { 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"' ); });