feat(launchpad2): sns project sorting (#7131)

mstrasinskis · web-flow · commit d8489e802604 · 2025-07-17T11:45:26.000Z
# Motivation Projects on the launchpad should be ordered based on the following criteria: 1. Highest proposal activity 2. Largest market cap 3. Most ICP treasury left 4. Any project with `N/A` in any of these fields should always be placed at the end **Out of scope:** updated sorting for committed projects. # Changes - Added new comparators: - `compareLaunchpadSnsProjects` - `compareSnsProjectsUndefinedProposalActivityLast` - `compareSnsProjectsUndefinedIcpTreasuryLast` - `compareSnsProjectsUndefinedMarketCapLast` - `compareSnsProjectsByProposalActivity` - `compareSnsProjectsByMarketCap` - `compareSnsProjectsByIcpTreasury` - Applied `compareLaunchpadSnsProjects` to sort project cards # Tests - Added unit tests - Verified against mainnet — ordering matches expectations <img width="1287" height="692" alt="image" src="https://github.com/user-attachments/assets/848dd1bd-152f-4c42-aa69-f9d0cec84c18" /> # Todos - [ ] Accessibility (a11y) – any impact? - [ ] Changelog – is it needed?
diff --git a/frontend/src/lib/pages/Launchpad2.svelte b/frontend/src/lib/pages/Launchpad2.svelte
@@ -2,11 +2,16 @@
   import CardList from "$lib/components/launchpad/CardList.svelte";
   import ProjectCard2 from "$lib/components/launchpad/ProjectCard2.svelte";
   import SkeletonProjectCard from "$lib/components/launchpad/SkeletonProjectCard.svelte";
+  import { icpSwapUsdPricesStore } from "$lib/derived/icp-swap.derived";
   import type { SnsFullProject } from "$lib/derived/sns/sns-projects.derived";
+  import { snsTotalSupplyTokenAmountStore } from "$lib/derived/sns/sns-total-supply-token-amount.derived";
   import { isMobileViewportStore } from "$lib/derived/viewport.derived";
   import { i18n } from "$lib/stores/i18n";
   import type { ComponentWithProps } from "$lib/types/svelte";
-  import { getUpcomingLaunchesCards } from "$lib/utils/launchpad.utils";
+  import {
+    compareLaunchpadSnsProjects,
+    getUpcomingLaunchesCards,
+  } from "$lib/utils/launchpad.utils";
   import {
     comparesByDecentralizationSaleOpenTimestampDesc,
     filterProjectsStatus,
@@ -42,6 +47,12 @@
       .filter(
         ({ swapCommitment }) => getCommitmentE8s(swapCommitment) ?? 0n > 0n
       )
+      .sort(
+        compareLaunchpadSnsProjects({
+          snsTotalSupplyTokenAmountStore: $snsTotalSupplyTokenAmountStore,
+          icpSwapUsdPricesStore: $icpSwapUsdPricesStore,
+        })
+      )
       .map((project) => ({
         Component: ProjectCard2 as unknown as Component,
         props: { project },
@@ -54,6 +65,12 @@
           isNullish(getCommitmentE8s(swapCommitment)) ||
           getCommitmentE8s(swapCommitment) === 0n
       )
+      .sort(
+        compareLaunchpadSnsProjects({
+          snsTotalSupplyTokenAmountStore: $snsTotalSupplyTokenAmountStore,
+          icpSwapUsdPricesStore: $icpSwapUsdPricesStore,
+        })
+      )
       .map((project) => ({
         Component: ProjectCard2 as unknown as Component,
         props: { project },
diff --git a/frontend/src/lib/utils/launchpad.utils.ts b/frontend/src/lib/utils/launchpad.utils.ts
@@ -1,15 +1,26 @@
 import CreateSnsProposalCard from "$lib/components/launchpad/CreateSnsProposalCard.svelte";
 import OngoingProjectCard from "$lib/components/launchpad/OngoingProjectCard.svelte";
 import UpcomingProjectCard from "$lib/components/launchpad/UpcomingProjectCard.svelte";
+import { abandonedProjectsCanisterId } from "$lib/constants/canister-ids.constants";
+import type { IcpSwapUsdPricesStoreData } from "$lib/derived/icp-swap.derived";
 import type { SnsFullProject } from "$lib/derived/sns/sns-projects.derived";
 import type { ComponentWithProps } from "$lib/types/svelte";
 import { compareProposalInfoByDeadlineTimestampSeconds } from "$lib/utils/portfolio.utils";
 import {
   comparesByDecentralizationSaleOpenTimestampDesc,
   filterProjectsStatus,
+  snsProjectIcpInTreasuryPercentage,
+  snsProjectMarketCap,
+  snsProjectWeeklyProposalActivity,
 } from "$lib/utils/projects.utils";
+import {
+  createAscendingComparator,
+  createDescendingComparator,
+  mergeComparators,
+} from "$lib/utils/sort.utils";
 import type { ProposalInfo } from "@dfinity/nns";
 import { SnsSwapLifecycle } from "@dfinity/sns";
+import { TokenAmountV2 } from "@dfinity/utils";
 import type { Component } from "svelte";
 
 export const getUpcomingLaunchesCards = ({
@@ -54,3 +65,82 @@ export const getUpcomingLaunchesCards = ({
     ...adoptedSnsProposalCards,
   ];
 };
+
+export const compareSnsProjectsAbandonedLast = createAscendingComparator(
+  (project: SnsFullProject) =>
+    abandonedProjectsCanisterId.includes(project.rootCanisterId.toText())
+);
+
+export const compareSnsProjectsUndefinedIcpTreasuryLast =
+  createAscendingComparator(
+    (project: SnsFullProject) =>
+      snsProjectIcpInTreasuryPercentage(project) === undefined
+  );
+
+export const compareSnsProjectsUndefinedProposalActivityLast =
+  createAscendingComparator(
+    (project: SnsFullProject) =>
+      snsProjectWeeklyProposalActivity(project) === undefined
+  );
+
+export const compareSnsProjectsUndefinedMarketCapLast = ({
+  snsTotalSupplyTokenAmountStore,
+  icpSwapUsdPricesStore,
+}: {
+  snsTotalSupplyTokenAmountStore: Record<string, TokenAmountV2>;
+  icpSwapUsdPricesStore: IcpSwapUsdPricesStoreData;
+}) =>
+  createAscendingComparator(
+    (project: SnsFullProject) =>
+      snsProjectMarketCap({
+        sns: project,
+        snsTotalSupplyTokenAmountStore,
+        icpSwapUsdPricesStore,
+      }) === undefined
+  );
+
+export const compareSnsProjectsByProposalActivity = createDescendingComparator(
+  (project: SnsFullProject) => snsProjectWeeklyProposalActivity(project)
+);
+
+export const compareSnsProjectsByMarketCap = ({
+  snsTotalSupplyTokenAmountStore,
+  icpSwapUsdPricesStore,
+}: {
+  snsTotalSupplyTokenAmountStore: Record<string, TokenAmountV2>;
+  icpSwapUsdPricesStore: IcpSwapUsdPricesStoreData;
+}) =>
+  createDescendingComparator(
+    (project: SnsFullProject) =>
+      snsProjectMarketCap({
+        sns: project,
+        snsTotalSupplyTokenAmountStore,
+        icpSwapUsdPricesStore,
+      }) ?? 0n
+  );
+export const compareSnsProjectsByIcpTreasury = createDescendingComparator(
+  (project: SnsFullProject) => snsProjectIcpInTreasuryPercentage(project)
+);
+
+export const compareLaunchpadSnsProjects = ({
+  snsTotalSupplyTokenAmountStore,
+  icpSwapUsdPricesStore,
+}: {
+  snsTotalSupplyTokenAmountStore: Record<string, TokenAmountV2>;
+  icpSwapUsdPricesStore: IcpSwapUsdPricesStoreData;
+}) =>
+  mergeComparators([
+    compareSnsProjectsAbandonedLast,
+    compareSnsProjectsUndefinedProposalActivityLast,
+    compareSnsProjectsUndefinedIcpTreasuryLast,
+    compareSnsProjectsUndefinedMarketCapLast({
+      snsTotalSupplyTokenAmountStore,
+      icpSwapUsdPricesStore,
+    }),
+    compareSnsProjectsByProposalActivity,
+    compareSnsProjectsByMarketCap({
+      snsTotalSupplyTokenAmountStore,
+      icpSwapUsdPricesStore,
+    }),
+    compareSnsProjectsByIcpTreasury,
+  ]);
diff --git a/frontend/src/lib/utils/projects.utils.ts b/frontend/src/lib/utils/projects.utils.ts
@@ -517,7 +517,10 @@ export const snsProjectMarketCap = ({
   snsTotalSupplyTokenAmountStore: Record<string, TokenAmountV2>;
   icpSwapUsdPricesStore: IcpSwapUsdPricesStoreData;
 }): number | undefined => {
-  const { rootCanisterId, ledgerCanisterId } = sns.summary;
+  const {
+    rootCanisterId,
+    summary: { ledgerCanisterId },
+  } = sns;
   const totalSupplyE8s =
     snsTotalSupplyTokenAmountStore[rootCanisterId.toText()]?.toE8s();
   const totalSupply = nonNullish(totalSupplyE8s)
diff --git a/frontend/src/tests/lib/pages/Launchpad2.spec.ts b/frontend/src/tests/lib/pages/Launchpad2.spec.ts
@@ -6,6 +6,7 @@ import {
 } from "$tests/mocks/proposal.mock";
 import {
   createMockSnsFullProject,
+  mockSnsMetrics,
   principal,
 } from "$tests/mocks/sns-projects.mock";
 import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
@@ -89,26 +90,68 @@ describe("Launchpad2", () => {
   });
 
   it("displays launched cards in correct order", async () => {
+    const project0 = createMockSnsFullProject({
+      rootCanisterId: principal(1),
+      summaryParams: {
+        lifecycle: SnsSwapLifecycle.Committed,
+        swapOpenTimestampSeconds: BigInt(168_000_000),
+        projectName: "Outdated Project",
+      },
+      metrics: undefined,
+    });
     const project1 = createMockSnsFullProject({
       rootCanisterId: principal(1),
       summaryParams: {
         lifecycle: SnsSwapLifecycle.Committed,
         swapOpenTimestampSeconds: BigInt(168_000_000),
-        projectName: "Not Committed Project",
+        projectName: "Not Committed, Not Active Project",
+      },
+      metrics: {
+        ...mockSnsMetrics,
+        num_recently_executed_proposals: 0,
+      },
+    });
+    const project12 = createMockSnsFullProject({
+      rootCanisterId: principal(1),
+      summaryParams: {
+        lifecycle: SnsSwapLifecycle.Committed,
+        swapOpenTimestampSeconds: BigInt(168_000_000),
+        projectName: "Not Committed, Very Active Project",
+      },
+      metrics: {
+        ...mockSnsMetrics,
+        num_recently_executed_proposals: 22,
       },
     });
-    const project2 = createMockSnsFullProject({
+    const project3 = createMockSnsFullProject({
       rootCanisterId: principal(1),
       summaryParams: {
         lifecycle: SnsSwapLifecycle.Committed,
         swapOpenTimestampSeconds: BigInt(168_000_000),
-        projectName: "Committed Project",
+        projectName: "Committed, Not Active Project",
       },
       icpCommitment: 10_000_000n,
+      metrics: {
+        ...mockSnsMetrics,
+        num_recently_executed_proposals: 0,
+      },
+    });
+    const project4 = createMockSnsFullProject({
+      rootCanisterId: principal(1),
+      summaryParams: {
+        lifecycle: SnsSwapLifecycle.Committed,
+        swapOpenTimestampSeconds: BigInt(168_000_000),
+        projectName: "Committed, Very Active Project",
+      },
+      icpCommitment: 10_000_000n,
+      metrics: {
+        ...mockSnsMetrics,
+        num_recently_executed_proposals: 22,
+      },
     });
 
     const po = renderComponent({
-      snsProjects: [project1, project2],
+      snsProjects: [project0, project1, project12, project3, project4],
       openSnsProposals: [],
     });
 
@@ -117,13 +160,17 @@ describe("Launchpad2", () => {
       await launchedProjectsCards.getCardEntries();
 
     expect(await launchedProjectsCards.isPresent()).toBe(true);
-    expect(launchedProjectsCardsEntryPos.length).toBe(2);
-
-    expect(await launchedProjectsCardsEntryPos[0].getCardTitle()).toEqual(
-      "Committed Project"
-    );
-    expect(await launchedProjectsCardsEntryPos[1].getCardTitle()).toEqual(
-      "Not Committed Project"
+    expect(launchedProjectsCardsEntryPos.length).toBe(5);
+    const launchedProjectsCardsTitles = await Promise.all(
+      launchedProjectsCardsEntryPos.map((card) => card.getCardTitle())
     );
+
+    expect(launchedProjectsCardsTitles).toEqual([
+      "Committed, Very Active Project",
+      "Committed, Not Active Project",
+      "Not Committed, Very Active Project",
+      "Not Committed, Not Active Project",
+      "Outdated Project",
+    ]);
   });
 });
diff --git a/frontend/src/tests/lib/utils/launchpad.utils.spec.ts b/frontend/src/tests/lib/utils/launchpad.utils.spec.ts
diff --git a/frontend/src/tests/mocks/sns-projects.mock.ts b/frontend/src/tests/mocks/sns-projects.mock.ts
