NNS1-3094: Show banner when user never staked

frontend/src/lib/routes/Staking.svelte

@@ -1,18 +1,63 @@
 <script lang="ts">
-  import SignIn from "$lib/components/common/SignIn.svelte";
+  import SignInGuard from "$lib/components/common/SignInGuard.svelte";
   import ProjectsTable from "$lib/components/staking/ProjectsTable.svelte";
+  import { OWN_CANISTER_ID_TEXT } from "$lib/constants/canister-ids.constants";
   import { authSignedInStore } from "$lib/derived/auth.derived";
+  import { selectableUniversesStore } from "$lib/derived/selectable-universes.derived";
   import { i18n } from "$lib/stores/i18n";
+  import { neuronsStore } from "$lib/stores/neurons.store";
+  import { snsNeuronsStore } from "$lib/stores/sns-neurons.store";
+  import type { Universe } from "$lib/types/universe";
   import { IconNeuronsPage, PageBanner } from "@dfinity/gix-components";
+  import type { NeuronInfo } from "@dfinity/nns";
+  import type { SnsNeuron } from "@dfinity/sns";
+
+  const getShowStakingBanner = ({
+    isSignedIn,
+    universes,
+    nnsNeurons,
+    snsNeurons,
+  }: {
+    isSignedIn: boolean;
+    universes: Universe[];
+    nnsNeurons: NeuronInfo[] | undefined;
+    snsNeurons: { [rootCanisterId: string]: { neurons: SnsNeuron[] } };
+  }) => {
+    if (!isSignedIn) {
+      return true;
+    }
+    // If the user is signed in, we show the staking banner if we know the user
+    // has 0 neurons.
+    if (nnsNeurons?.length !== 0) {
+      return false;
+    }
+    for (const universe of universes) {
+      if (universe.canisterId === OWN_CANISTER_ID_TEXT) {
+        continue;
+      }
+      if (snsNeurons[universe.canisterId]?.neurons?.length !== 0) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  let showStakingBanner: boolean;
+  $: showStakingBanner = getShowStakingBanner({
+    isSignedIn: $authSignedInStore,
+    universes: $selectableUniversesStore,
+    nnsNeurons: $neuronsStore?.neurons,
+    snsNeurons: $snsNeuronsStore,
+  });
 </script>
 
 <main data-tid="staking-component">
-  {#if !$authSignedInStore}
+  {#if showStakingBanner}
     <PageBanner testId="staking-page-banner">
       <IconNeuronsPage slot="image" />
       <svelte:fragment slot="title">{$i18n.staking.title}</svelte:fragment>
       <p class="description" slot="description">{$i18n.staking.text}</p>
-      <SignIn slot="actions" />
+      <SignInGuard slot="actions" />
     </PageBanner>
   {/if}
 

frontend/src/tests/lib/routes/Staking.spec.ts

@@ -1,11 +1,23 @@
 import Staking from "$lib/routes/Staking.svelte";
+import { neuronsStore } from "$lib/stores/neurons.store";
+import { snsNeuronsStore } from "$lib/stores/sns-neurons.store";
 import { resetIdentity, setNoIdentity } from "$tests/mocks/auth.store.mock";
+import { mockNeuron } from "$tests/mocks/neurons.mock";
+import { mockSnsNeuron } from "$tests/mocks/sns-neurons.mock";
+import { principal } from "$tests/mocks/sns-projects.mock";
 import { StakingPo } from "$tests/page-objects/Staking.page-object";
 import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
+import { resetSnsProjects, setSnsProjects } from "$tests/utils/sns.test-utils";
 import { render } from "@testing-library/svelte";
 
 describe("Staking", () => {
+  const snsTitle = "SNS-1";
+  const snsCanisterId = principal(1112);
+
   beforeEach(() => {
+    neuronsStore.reset();
+    snsNeuronsStore.reset();
+    resetSnsProjects();
     resetIdentity();
   });
 
@@ -21,8 +33,91 @@ describe("Staking", () => {
     expect(await po.getSignInPo().isPresent()).toBe(true);
   });
 
-  it("should not render the page banner and login button when signed in", async () => {
+  it("should not render banner and login button when signed in but NNS neurons still loading", async () => {
+    resetIdentity();
+    neuronsStore.reset();
+    const po = renderComponent();
+    expect(await po.getPageBannerPo().isPresent()).toBe(false);
+    expect(await po.getSignInPo().isPresent()).toBe(false);
+  });
+
+  it("should not render banner and login button when signed in but SNS neurons still loading", async () => {
+    resetIdentity();
+
+    neuronsStore.setNeurons({
+      neurons: [],
+      certified: true,
+    });
+
+    setSnsProjects([
+      {
+        projectName: snsTitle,
+        rootCanisterId: snsCanisterId,
+      },
+    ]);
+    snsNeuronsStore.reset();
+
+    const po = renderComponent();
+    expect(await po.getPageBannerPo().isPresent()).toBe(false);
+    expect(await po.getSignInPo().isPresent()).toBe(false);
+  });
+
+  it("should render banner but no login button when signed in without neurons", async () => {
+    resetIdentity();
+
+    neuronsStore.setNeurons({
+      neurons: [],
+      certified: true,
+    });
+
+    setSnsProjects([
+      {
+        projectName: snsTitle,
+        rootCanisterId: snsCanisterId,
+      },
+    ]);
+    snsNeuronsStore.setNeurons({
+      rootCanisterId: snsCanisterId,
+      neurons: [],
+      certified: true,
+    });
+
+    const po = renderComponent();
+    expect(await po.getPageBannerPo().isPresent()).toBe(true);
+    expect(await po.getSignInPo().isPresent()).toBe(false);
+  });
+
+  it("should not render banner or login button when signed in with NNS neurons", async () => {
     resetIdentity();
+    neuronsStore.setNeurons({
+      neurons: [mockNeuron],
+      certified: true,
+    });
+    const po = renderComponent();
+    expect(await po.getPageBannerPo().isPresent()).toBe(false);
+    expect(await po.getSignInPo().isPresent()).toBe(false);
+  });
+
+  it("should not render banner or login button when signed in with SNS neurons", async () => {
+    resetIdentity();
+
+    neuronsStore.setNeurons({
+      neurons: [],
+      certified: true,
+    });
+
+    setSnsProjects([
+      {
+        projectName: snsTitle,
+        rootCanisterId: snsCanisterId,
+      },
+    ]);
+    snsNeuronsStore.setNeurons({
+      rootCanisterId: snsCanisterId,
+      neurons: [mockSnsNeuron],
+      certified: true,
+    });
+
     const po = renderComponent();
     expect(await po.getPageBannerPo().isPresent()).toBe(false);
     expect(await po.getSignInPo().isPresent()).toBe(false);