feat(launchpad2): DRAFT

frontend/src/lib/api/fav-projects.api.ts

@@ -0,0 +1,39 @@
+import { nnsDappCanister } from "$lib/api/nns-dapp.api";
+import type {
+  FavProject,
+  FavProjects,
+} from "$lib/canisters/nns-dapp/nns-dapp.types";
+import { logWithTimestamp } from "$lib/utils/dev.utils";
+import type { Identity } from "@dfinity/agent";
+
+export const getFavProjects = async ({
+  identity,
+  certified,
+}: {
+  identity: Identity;
+  certified: boolean;
+}): Promise<FavProjects> => {
+  logWithTimestamp(`Getting favorite projects:${certified} call...`);
+
+  const { canister: nnsDapp } = await nnsDappCanister({ identity });
+  const response = await nnsDapp.getFavProjects({ certified });
+
+  logWithTimestamp(`Getting favorite projects:${certified} complete`);
+
+  return response;
+};
+
+export const setFavProjects = async ({
+  identity,
+  favProjects,
+}: {
+  identity: Identity;
+  favProjects: Array<FavProject>;
+}): Promise<void> => {
+  logWithTimestamp("Setting favorite projects call...");
+
+  const { canister: nnsDapp } = await nnsDappCanister({ identity });
+  await nnsDapp.setFavProjects(favProjects);
+
+  logWithTimestamp("Setting favorite projects call complete.");
+};

frontend/src/lib/canisters/nns-dapp/nns-dapp.canister.ts

@@ -12,6 +12,7 @@ import {
   ProposalPayloadNotFoundError,
   ProposalPayloadTooLargeError,
   SubAccountLimitExceededError,
+  TooManyFavProjectsError,
   TooManyImportedTokensError,
   UnknownProposalPayloadError,
 } from "$lib/canisters/nns-dapp/nns-dapp.errors";
@@ -21,6 +22,8 @@ import type {
   AccountDetails,
   CanisterDetails,
   CreateSubAccountResponse,
+  FavProject,
+  FavProjects,
   GetAccountResponse,
   ImportedToken,
   ImportedTokens,
@@ -373,4 +376,41 @@ export class NNSDappCanister {
       `Error setting imported tokens ${JSON.stringify(response)}`
     );
   };
+
+  public getFavProjects = async ({
+    certified,
+  }: {
+    certified: boolean;
+  }): Promise<FavProjects> => {
+    const response = await this.getNNSDappService(certified).get_fav_projects();
+    if ("Ok" in response) {
+      return response.Ok;
+    }
+    if ("AccountNotFound" in response) {
+      throw new AccountNotFoundError("error__account.not_found");
+    }
+    // Edge case
+    throw new Error(`Error getting fav projects ${JSON.stringify(response)}`);
+  };
+
+  public setFavProjects = async (
+    favProjects: Array<FavProject>
+  ): Promise<void> => {
+    const response = await this.certifiedService.set_fav_projects({
+      fav_projects: favProjects,
+    });
+    if ("Ok" in response) {
+      return;
+    }
+    if ("AccountNotFound" in response) {
+      throw new AccountNotFoundError("error__account.not_found");
+    }
+    if ("TooManyFavProjects" in response) {
+      throw new TooManyFavProjectsError("error__fav_projects.too_many", {
+        $limit: response.TooManyFavProjects?.limit.toString(),
+      });
+    }
+    // Edge case
+    throw new Error(`Error setting fav projects ${JSON.stringify(response)}`);
+  };
 }

frontend/src/lib/canisters/nns-dapp/nns-dapp.certified.idl.js

@@ -50,6 +50,12 @@ export const idlFactory = ({ IDL }) => {
     canister_id: IDL.Principal,
     block_index: IDL.Opt(IDL.Nat64),
   });
+  const FavProject = IDL.Record({ root_canister_id: IDL.Principal });
+  const FavProjects = IDL.Record({ fav_projects: IDL.Vec(FavProject) });
+  const GetFavProjectsResponse = IDL.Variant({
+    Ok: FavProjects,
+    AccountNotFound: IDL.Null,
+  });
   const ImportedToken = IDL.Record({
     index_canister_id: IDL.Opt(IDL.Principal),
     ledger_canister_id: IDL.Principal,
@@ -120,6 +126,11 @@ export const idlFactory = ({ IDL }) => {
     SubAccountNotFound: IDL.Null,
     NameTooLong: IDL.Null,
   });
+  const SetFavProjectsResponse = IDL.Variant({
+    Ok: IDL.Null,
+    AccountNotFound: IDL.Null,
+    TooManyFavProjects: IDL.Record({ limit: IDL.Int32 }),
+  });
   const SetImportedTokensResponse = IDL.Variant({
     Ok: IDL.Null,
     AccountNotFound: IDL.Null,
@@ -146,6 +157,7 @@ export const idlFactory = ({ IDL }) => {
     ),
     get_account: IDL.Func([], [GetAccountResponse], []),
     get_canisters: IDL.Func([], [IDL.Vec(CanisterDetails)], []),
+    get_fav_projects: IDL.Func([], [GetFavProjectsResponse], []),
     get_imported_tokens: IDL.Func([], [GetImportedTokensResponse], []),
     get_proposal_payload: IDL.Func(
       [IDL.Nat64],
@@ -164,6 +176,7 @@ export const idlFactory = ({ IDL }) => {
       [RenameSubAccountResponse],
       []
     ),
+    set_fav_projects: IDL.Func([FavProjects], [SetFavProjectsResponse], []),
     set_imported_tokens: IDL.Func(
       [ImportedTokens],
       [SetImportedTokensResponse],

frontend/src/lib/canisters/nns-dapp/nns-dapp.errors.ts

@@ -21,6 +21,14 @@ export class TooManyImportedTokensError extends AccountTranslateError {
   }
 }
 
+export class TooManyFavProjectsError extends AccountTranslateError {
+  constructor(message: string, substitutions?: I18nSubstitutions) {
+    super(message);
+
+    this.substitutions = substitutions;
+  }
+}
+
 export class SubAccountLimitExceededError extends Error {}
 
 export class NameTooLongError extends AccountTranslateError {

frontend/src/lib/canisters/nns-dapp/nns-dapp.idl.js

@@ -50,6 +50,12 @@ export const idlFactory = ({ IDL }) => {
     canister_id: IDL.Principal,
     block_index: IDL.Opt(IDL.Nat64),
   });
+  const FavProject = IDL.Record({ root_canister_id: IDL.Principal });
+  const FavProjects = IDL.Record({ fav_projects: IDL.Vec(FavProject) });
+  const GetFavProjectsResponse = IDL.Variant({
+    Ok: FavProjects,
+    AccountNotFound: IDL.Null,
+  });
   const ImportedToken = IDL.Record({
     index_canister_id: IDL.Opt(IDL.Principal),
     ledger_canister_id: IDL.Principal,
@@ -120,6 +126,11 @@ export const idlFactory = ({ IDL }) => {
     SubAccountNotFound: IDL.Null,
     NameTooLong: IDL.Null,
   });
+  const SetFavProjectsResponse = IDL.Variant({
+    Ok: IDL.Null,
+    AccountNotFound: IDL.Null,
+    TooManyFavProjects: IDL.Record({ limit: IDL.Int32 }),
+  });
   const SetImportedTokensResponse = IDL.Variant({
     Ok: IDL.Null,
     AccountNotFound: IDL.Null,
@@ -146,6 +157,7 @@ export const idlFactory = ({ IDL }) => {
     ),
     get_account: IDL.Func([], [GetAccountResponse], ["query"]),
     get_canisters: IDL.Func([], [IDL.Vec(CanisterDetails)], ["query"]),
+    get_fav_projects: IDL.Func([], [GetFavProjectsResponse], ["query"]),
     get_imported_tokens: IDL.Func([], [GetImportedTokensResponse], ["query"]),
     get_proposal_payload: IDL.Func(
       [IDL.Nat64],
@@ -164,6 +176,7 @@ export const idlFactory = ({ IDL }) => {
       [RenameSubAccountResponse],
       []
     ),
+    set_fav_projects: IDL.Func([FavProjects], [SetFavProjectsResponse], []),
     set_imported_tokens: IDL.Func(
       [ImportedTokens],
       [SetImportedTokensResponse],

frontend/src/lib/canisters/nns-dapp/nns-dapp.types.ts

@@ -38,6 +38,9 @@ export type DetachCanisterResponse = { Ok: null } | { CanisterNotFound: null };
 export type GetAccountResponse =
   | { Ok: AccountDetails }
   | { AccountNotFound: null };
+export type GetFavProjectsResponse =
+  | { Ok: FavProjects }
+  | { AccountNotFound: null };
 export type GetImportedTokensResponse =
   | { Ok: ImportedTokens }
   | { AccountNotFound: null };
@@ -66,6 +69,13 @@ export interface ImportedToken {
 export interface ImportedTokens {
   imported_tokens: Array<ImportedToken>;
 }
+export interface FavProject {
+  root_canister_id: Principal;
+}
+export interface FavProjects {
+  fav_projects: Array<FavProject>;
+}
+
 export interface RegisterHardwareWalletRequest {
   principal: Principal;
   name: string;
@@ -99,6 +109,10 @@ export type SetImportedTokensResponse =
   | { Ok: null }
   | { AccountNotFound: null }
   | { TooManyImportedTokens: { limit: number } };
+export type SetFavProjectsResponse =
+  | { Ok: null }
+  | { AccountNotFound: null }
+  | { TooManyFavProjects: { limit: number } };
 export interface Stats {
   seconds_since_last_ledger_sync: bigint;
   sub_accounts_count: bigint;
@@ -132,6 +146,7 @@ export default interface _SERVICE {
   get_account: () => Promise<GetAccountResponse>;
   get_canisters: () => Promise<Array<CanisterDetails>>;
   get_imported_tokens: () => Promise<GetImportedTokensResponse>;
+  get_fav_projects: () => Promise<GetFavProjectsResponse>;
   get_proposal_payload: (arg_0: bigint) => Promise<GetProposalPayloadResponse>;
   get_stats: () => Promise<Stats>;
   http_request: (arg_0: HttpRequest) => Promise<HttpResponse>;
@@ -142,4 +157,5 @@ export default interface _SERVICE {
     arg_0: RenameSubAccountRequest
   ) => Promise<RenameSubAccountResponse>;
   set_imported_tokens: ActorMethod<[ImportedTokens], SetImportedTokensResponse>;
+  set_fav_projects: ActorMethod<[FavProjects], SetFavProjectsResponse>;
 }

frontend/src/lib/components/launchpad/FavProjectButton.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
+  import { MAX_SNS_FAV_PROJECTS } from "$lib/constants/sns.constants";
+  import type { SnsFullProject } from "$lib/derived/sns/sns-projects.derived";
+  import {
+    addSnsFavProject,
+    removeSnsFavProject,
+  } from "$lib/services/sns.fav-projects.services";
+  import { i18n } from "$lib/stores/i18n";
+  import { snsFavProjectsStore } from "$lib/stores/sns-fav-projects.store";
+  import { replacePlaceholders } from "$lib/utils/i18n.utils";
+  import { isSnsProjectFavorite } from "$lib/utils/sns-fav-projects.utils";
+  import { getCommitmentE8s } from "$lib/utils/sns.utils";
+  import { Tooltip } from "@dfinity/gix-components";
+  import { nonNullish } from "@dfinity/utils";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    project: SnsFullProject;
+    children: Snippet;
+  };
+
+  const { project, children }: Props = $props();
+
+  const loaded = $derived(nonNullish($snsFavProjectsStore.rootCanisterIds));
+  const maxReached = $derived(
+    ($snsFavProjectsStore.rootCanisterIds?.length ?? 0) >= MAX_SNS_FAV_PROJECTS
+  );
+  const userHasParticipated = $derived(
+    (getCommitmentE8s(project.swapCommitment) ?? 0n) > 0n
+  );
+  const isFavorite = $derived(
+    isSnsProjectFavorite({
+      project,
+      favProjects: $snsFavProjectsStore.rootCanisterIds,
+    })
+  );
+  // Even when the maximum is reached, the button should be enabled for favorite projects
+  // so that the user can remove them from favorites.
+  const disabled = $derived(userHasParticipated || (maxReached && !isFavorite));
+  const toggleFavorite = async (event: MouseEvent) => {
+    // Avoid unwanted navigation on mobile
+    event.preventDefault();
+
+    if (isFavorite) {
+      await removeSnsFavProject(project.rootCanisterId);
+    } else {
+      await addSnsFavProject(project.rootCanisterId);
+    }
+
+    // TODO(launchpad2): Add analytics event for this toggle
+    // analytics.event("fav-projects-update-state", {
+    //   value: isFavorite ? "remove" : "add",
+    // });
+  };
+</script>
+
+<TestIdWrapper testId="fav-project-button-component">
+  {#if loaded}
+    <button
+      onclick={toggleFavorite}
+      aria-label={$i18n.launchpad_cards.project_card_watch}
+      {disabled}
+    >
+      {#if maxReached}
+        <Tooltip
+          id="max-fav-projects-reached-tooltip"
+          text={replacePlaceholders(
+            $i18n.fav_projects.maximum_reached_tooltip,
+            {
+              $max: `${MAX_SNS_FAV_PROJECTS}`,
+            }
+          )}
+        >
+          {@render children()}
+        </Tooltip>
+      {:else}
+        {@render children()}
+      {/if}
+    </button>
+  {/if}
+</TestIdWrapper>
+
+<style lang="scss">
+  button {
+    color: var(--primary);
+    &:disabled {
+      color: var(--tooltip-background);
+    }
+  }
+</style>

frontend/src/lib/components/launchpad/FavProjectOnlyToggle.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import IconStarFill from "$lib/components/ui/icons/IconStarFill.svelte";
+  import { snsFavProjectsToggleVisibleStore } from "$lib/derived/sns-fav-projects.derived";
+  import { i18n } from "$lib/stores/i18n";
+  import { snsFavProjectsVisibilityStore } from "$lib/stores/sns-fav-projects-visibility.store";
+  import { IconStar } from "@dfinity/gix-components";
+
+  let checked = $derived($snsFavProjectsVisibilityStore === "fav");
+  const Icon = $derived(checked ? IconStarFill : IconStar);
+
+  const toggle = () => {
+    const newState = checked ? "all" : "fav";
+    snsFavProjectsVisibilityStore.set(newState);
+    // TODO(launchpad2): Add analytics event for this toggle
+    // analytics.event("fav-projects-only-toggle", {
+    //   value: newState,
+    // });
+  };
+</script>
+
+{#if $snsFavProjectsToggleVisibleStore}
+  <button
+    class="wrapper"
+    onclick={toggle}
+    aria-label={$i18n.launchpad.toggle_fav_only}
+    title={$i18n.launchpad.toggle_fav_only}
+    data-tid="toggle-fav-projects-only-component"
+  >
+    <Icon />
+  </button>
+{/if}
+
+<style lang="scss">
+  button {
+    min-width: 40px;
+    min-height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    border: 1.5px solid var(--primary);
+    color: var(--primary);
+  }
+</style>