tokens

frontend/src/lib/pages/Portfolio.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import Card from "$lib/components/portfolio/Card.svelte";
   import LoginCard from "$lib/components/portfolio/LoginCard.svelte";
   import NoNeuronsCard from "$lib/components/portfolio/NoNeuronsCard.svelte";
   import NoTokensCard from "$lib/components/portfolio/NoTokensCard.svelte";
+  import UsdValueBanner from "$lib/components/ui/UsdValueBanner.svelte";
   import { authSignedInStore } from "$lib/derived/auth.derived";
   import type { UserToken } from "$lib/types/tokens-page";
   import { getTotalBalanceInUsd } from "$lib/utils/token.utils";
   import { TokenAmountV2, isNullish } from "@dfinity/utils";
 
-  export let userTokensData: UserToken[];
+  export let userTokensData: UserToken[] = [];
 
   let totalTokensBalanceInUsd: number;
   $: totalTokensBalanceInUsd = getTotalBalanceInUsd(userTokensData);
@@ -21,26 +21,24 @@
       (!("balanceInUsd" in token) || isNullish(token.balanceInUsd))
   );
 
-  let totalUsdAmount: number;
+  let totalUsdAmount: number | undefined;
   $: totalUsdAmount = $authSignedInStore ? totalTokensBalanceInUsd : undefined;
 
-  let isNotSignedIn: boolean;
-  $: isNotSignedIn = !$authSignedInStore;
   let showNoTokensCard: boolean;
-  $: showNoTokensCard = isNotSignedIn || totalTokenBalanceInUsd === 0;
-  let showNoNeuronsCard: boolean;
-  $: showNoNeuronsCard = isNotSignedIn || totalStakedInUsd === 0;
+  $: showNoTokensCard = !$authSignedInStore || totalTokensBalanceInUsd === 0;
 </script>
 
 <main data-tid="portfolio-page-component">
   <div class="top" class:single-card={$authSignedInStore}>
     {#if !$authSignedInStore}
       <LoginCard />
     {/if}
-    <Card>Card1</Card>
+    <UsdValueBanner usdAmount={totalUsdAmount} {hasUnpricedTokens} />
   </div>
   <div class="content">
-    <NoTokensCard />
+    {#if showNoTokensCard}
+      <NoTokensCard />
+    {/if}
     <NoNeuronsCard />
   </div>
 </main>

frontend/src/tests/lib/pages/Portfolio.spec.ts

@@ -1,12 +1,24 @@
+import { CKUSDC_UNIVERSE_CANISTER_ID } from "$lib/constants/ckusdc-canister-ids.constants";
 import Portfolio from "$lib/pages/Portfolio.svelte";
+import { icpSwapTickersStore } from "$lib/stores/icp-swap.store";
+import type { UserToken } from "$lib/types/tokens-page";
 import { resetIdentity, setNoIdentity } from "$tests/mocks/auth.store.mock";
+import { mockIcpSwapTicker } from "$tests/mocks/icp-swap.mock";
+import { principal } from "$tests/mocks/sns-projects.mock";
+import { createUserToken } from "$tests/mocks/tokens-page.mock";
 import { PortfolioPagePo } from "$tests/page-objects/PortfolioPage.page-object";
 import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
 import { render } from "@testing-library/svelte";
 
 describe("Portfolio page", () => {
-  const renderPage = () => {
-    const { container } = render(Portfolio);
+  const renderPage = (
+    { userTokensData }: { userTokensData: UserToken[] } = { userTokensData: [] }
+  ) => {
+    const { container } = render(Portfolio, {
+      props: {
+        userTokensData: userTokensData,
+      },
+    });
 
     return PortfolioPagePo.under(new JestPageObjectElement(container));
   };
@@ -16,18 +28,21 @@ describe("Portfolio page", () => {
       setNoIdentity();
     });
 
-    it("should display the login card when the user is not logged in", async () => {
+    it("should display the LoginCard when the user is not logged in", async () => {
       const po = renderPage();
+
       expect(await po.getLoginCard().isPresent()).toBe(true);
     });
 
     it("should show the NoTokensCard", async () => {
       const po = renderPage();
+
       expect(await po.getNoTokensCard().isPresent()).toBe(true);
     });
 
     it("should show the NoNeuronsCard with secondary action", async () => {
       const po = renderPage();
+
       expect(await po.getNoNeuronsCarPo().isPresent()).toBe(true);
       expect(await po.getNoNeuronsCarPo().hasSecondaryAction()).toBe(true);
     });
@@ -36,11 +51,87 @@ describe("Portfolio page", () => {
   describe("when logged in", () => {
     beforeEach(() => {
       resetIdentity();
+
+      icpSwapTickersStore.set([
+        {
+          ...mockIcpSwapTicker,
+          base_id: CKUSDC_UNIVERSE_CANISTER_ID.toText(),
+          last_price: "10.00",
+        },
+      ]);
+    });
+
+    it("should not display the LoginCard when the user is logged in", async () => {
+      const po = renderPage();
+
+      expect(await po.getLoginCard().isPresent()).toBe(false);
     });
 
-    it("should not display the login card when the user is logged in", async () => {
-      const page = renderPage();
-      expect(await page.getLoginCard().isPresent()).toBe(false);
+    describe("NoTokensCard", () => {
+      it("should display the card when the tokens accounts balance is zero", async () => {
+        const po = renderPage();
+
+        expect(await po.getNoTokensCard().isPresent()).toBe(true);
+        expect(await po.getUsdValueBannerPo().getPrimaryAmount()).toBe("$0.00");
+      });
+
+      it("should not display the card when the tokens accounts balance is not zero", async () => {
+        const token = createUserToken({
+          universeId: principal(1),
+          balanceInUsd: 2,
+        });
+        const po = renderPage({ userTokensData: [token] });
+
+        expect(await po.getNoTokensCard().isPresent()).toBe(false);
+        expect(await po.getUsdValueBannerPo().getPrimaryAmount()).toBe("$2.00");
+      });
+    });
+
+    describe("UsdValueBanner", () => {
+      it("should display total assets", async () => {
+        const token1 = createUserToken({
+          universeId: principal(1),
+          balanceInUsd: 5,
+        });
+        const token2 = createUserToken({
+          universeId: principal(1),
+          balanceInUsd: 7,
+        });
+        const po = renderPage({ userTokensData: [token1, token2] });
+
+        expect(await po.getUsdValueBannerPo().getPrimaryAmount()).toBe(
+          "$12.00"
+        );
+        expect(await po.getUsdValueBannerPo().getSecondaryAmount()).toBe(
+          "1.20 ICP"
+        );
+      });
+
+      it("should ignore tokens with unknown balance in USD and display tooltip", async () => {
+        const token1 = createUserToken({
+          universeId: principal(1),
+          balanceInUsd: 5,
+        });
+        const token2 = createUserToken({
+          universeId: principal(1),
+          balanceInUsd: 7,
+        });
+        const token3 = createUserToken({
+          universeId: principal(1),
+          balanceInUsd: undefined,
+        });
+        const po = renderPage({ userTokensData: [token1, token2, token3] });
+
+        expect(await po.getUsdValueBannerPo().getPrimaryAmount()).toBe(
+          "$12.00"
+        );
+        expect(await po.getUsdValueBannerPo().getSecondaryAmount()).toBe(
+          "1.20 ICP"
+        );
+        expect(
+          await po.getUsdValueBannerPo().getTotalsTooltipIconPo().isPresent()
+        ).toBe(true);
+      });
     });
   });
 });

frontend/src/tests/page-objects/PortfolioPage.page-object.ts

@@ -1,5 +1,6 @@
 import type { PageObjectElement } from "$tests/types/page-object.types";
 import { NoNeuronsCardPo } from "./NoNeuronsCard.page-object";
+import { UsdValueBannerPo } from "./UsdValueBanner.page-object";
 import { BasePageObject } from "./base.page-object";
 
 export class PortfolioPagePo extends BasePageObject {
@@ -20,4 +21,8 @@ export class PortfolioPagePo extends BasePageObject {
   getNoNeuronsCarPo(): NoNeuronsCardPo {
     return NoNeuronsCardPo.under(this.root);
   }
+
+  getUsdValueBannerPo(): UsdValueBannerPo {
+    return UsdValueBannerPo.under(this.root);
+  }
 }