From 319944a660acc17a216caeae8b2f0909aa8aeed3 Mon Sep 17 00:00:00 2001
From: David de Kloet <122978264+dskloetd@users.noreply.github.com>
Date: Mon, 9 Dec 2024 08:28:08 +0100
Subject: [PATCH] Add USD value banner on tokens page (#5934)

# Motivation

Using the banner component from
https://github.com/dfinity/nns-dapp/pull/5932 on the tokens page.

# Changes

1. Calculate the sum of USD values in
`frontend/src/lib/pages/Tokens.svelte`.
2. Add `UsdValueBanner` if `ENABLE_USD_VALUES` is enabled.

# Tests

1. Unit tests added.
2. Tested manually at
https://qsgjb-riaaa-aaaaa-aaaga-cai.dskloet-ingress.devenv.dfinity.network/

# Todos

- [ ] Add entry to changelog (if necessary).
not yet
---
 frontend/src/lib/pages/Tokens.svelte          | 35 ++++++++++--
 frontend/src/tests/lib/pages/Tokens.spec.ts   | 55 +++++++++++++++++++
 .../page-objects/TokensPage.page-object.ts    |  5 ++
 3 files changed, 91 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/pages/Tokens.svelte b/frontend/src/lib/pages/Tokens.svelte
index 5d911b859a3..3b0329fb44f 100644
--- a/frontend/src/lib/pages/Tokens.svelte
+++ b/frontend/src/lib/pages/Tokens.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
   import HideZeroBalancesToggle from "$lib/components/tokens/TokensTable/HideZeroBalancesToggle.svelte";
   import TokensTable from "$lib/components/tokens/TokensTable/TokensTable.svelte";
+  import UsdValueBanner from "$lib/components/ui/UsdValueBanner.svelte";
   import { OWN_CANISTER_ID_TEXT } from "$lib/constants/canister-ids.constants";
   import { MAX_IMPORTED_TOKENS } from "$lib/constants/imported-tokens.constants";
   import ImportTokenModal from "$lib/modals/accounts/ImportTokenModal.svelte";
+  import { ENABLE_USD_VALUES } from "$lib/stores/feature-flags.store";
   import { hideZeroBalancesStore } from "$lib/stores/hide-zero-balances.store";
   import { i18n } from "$lib/stores/i18n";
   import { importedTokensStore } from "$lib/stores/imported-tokens.store";
@@ -12,12 +13,26 @@
   import type { UserToken } from "$lib/types/tokens-page";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { isImportedToken } from "$lib/utils/imported-tokens.utils";
+  import { IconAccountsPage } from "@dfinity/gix-components";
   import { IconPlus, IconSettings, Tooltip } from "@dfinity/gix-components";
   import { Popover } from "@dfinity/gix-components";
-  import { TokenAmountV2, nonNullish } from "@dfinity/utils";
+  import { TokenAmountV2, isNullish, nonNullish } from "@dfinity/utils";
 
   export let userTokensData: UserToken[];
 
+  const getUsdBalance = (token: UserToken) => {
+    if (!("balanceInUsd" in token) || isNullish(token.balanceInUsd)) {
+      return 0;
+    }
+    return token.balanceInUsd;
+  };
+
+  let totalBalanceInUsd: number;
+  $: totalBalanceInUsd = userTokensData.reduce(
+    (acc, token) => acc + getUsdBalance(token),
+    0
+  );
+
   let settingsButton: HTMLButtonElement | undefined;
   let settingsPopupVisible = false;
 
@@ -67,7 +82,13 @@
     ($importedTokensStore.importedTokens?.length ?? 0) >= MAX_IMPORTED_TOKENS;
 </script>
 
-<TestIdWrapper testId="tokens-page-component">
+<div class="wrapper" data-tid="tokens-page-component">
+  {#if $ENABLE_USD_VALUES}
+    <UsdValueBanner usdAmount={totalBalanceInUsd}>
+      <IconAccountsPage slot="icon" />
+    </UsdValueBanner>
+  {/if}
+
   <TokensTable
     userTokensData={shownTokensData}
     on:nnsAction
@@ -130,12 +151,18 @@
   {#if showImportTokenModal}
     <ImportTokenModal on:nnsClose={() => (showImportTokenModal = false)} />
   {/if}
-</TestIdWrapper>
+</div>
 
 <style lang="scss">
   @use "@dfinity/gix-components/dist/styles/mixins/effect";
   @use "@dfinity/gix-components/dist/styles/mixins/media";
 
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-2x);
+  }
+
   .settings-button {
     --content-color: var(--text-description);
 
diff --git a/frontend/src/tests/lib/pages/Tokens.spec.ts b/frontend/src/tests/lib/pages/Tokens.spec.ts
index 9207ec334f7..6f951b56aa1 100644
--- a/frontend/src/tests/lib/pages/Tokens.spec.ts
+++ b/frontend/src/tests/lib/pages/Tokens.spec.ts
@@ -1,6 +1,7 @@
 import { MAX_IMPORTED_TOKENS } from "$lib/constants/imported-tokens.constants";
 import { NNS_TOKEN_DATA } from "$lib/constants/tokens.constants";
 import TokensPage from "$lib/pages/Tokens.svelte";
+import { overrideFeatureFlagsStore } from "$lib/stores/feature-flags.store";
 import { hideZeroBalancesStore } from "$lib/stores/hide-zero-balances.store";
 import { importedTokensStore } from "$lib/stores/imported-tokens.store";
 import type { UserTokenData } from "$lib/types/tokens-page";
@@ -288,4 +289,58 @@ describe("Tokens page", () => {
       expect(await po.getImportTokenModalPo().isPresent()).toBe(true);
     });
   });
+
+  it("should not show total USD value banner when feature flag is disabled", async () => {
+    overrideFeatureFlagsStore.setFlag("ENABLE_USD_VALUES", false);
+
+    const po = renderPage(userTokensPageMock);
+
+    expect(await po.getUsdValueBannerPo().isPresent()).toBe(false);
+  });
+
+  it("should show total USD value banner when feature flag is enabled", async () => {
+    overrideFeatureFlagsStore.setFlag("ENABLE_USD_VALUES", true);
+
+    const po = renderPage(userTokensPageMock);
+
+    expect(await po.getUsdValueBannerPo().isPresent()).toBe(true);
+  });
+
+  it("should show total USD value", async () => {
+    overrideFeatureFlagsStore.setFlag("ENABLE_USD_VALUES", true);
+
+    const token1 = createUserToken({
+      universeId: principal(1),
+      balanceInUsd: 2,
+    });
+    const token2 = createUserToken({
+      universeId: principal(2),
+      balanceInUsd: 3,
+    });
+    const po = renderPage([token1, token2]);
+
+    expect(await po.getUsdValueBannerPo().isPresent()).toBe(true);
+    expect(await po.getUsdValueBannerPo().getPrimaryAmount()).toBe("$5.00");
+  });
+
+  it("should ignore tokens with unknown balance in USD when adding up the total", async () => {
+    overrideFeatureFlagsStore.setFlag("ENABLE_USD_VALUES", true);
+
+    const token1 = createUserToken({
+      universeId: principal(1),
+      balanceInUsd: 3,
+    });
+    const token2 = createUserToken({
+      universeId: principal(2),
+      balanceInUsd: undefined,
+    });
+    const token3 = createUserToken({
+      universeId: principal(3),
+      balanceInUsd: 5,
+    });
+    const po = renderPage([token1, token2, token3]);
+
+    expect(await po.getUsdValueBannerPo().isPresent()).toBe(true);
+    expect(await po.getUsdValueBannerPo().getPrimaryAmount()).toBe("$8.00");
+  });
 });
diff --git a/frontend/src/tests/page-objects/TokensPage.page-object.ts b/frontend/src/tests/page-objects/TokensPage.page-object.ts
index 5385a7a98fb..6457782bbaf 100644
--- a/frontend/src/tests/page-objects/TokensPage.page-object.ts
+++ b/frontend/src/tests/page-objects/TokensPage.page-object.ts
@@ -1,4 +1,5 @@
 import { ImportTokenModalPo } from "$tests/page-objects/ImportTokenModal.page-object";
+import { UsdValueBannerPo } from "$tests/page-objects/UsdValueBanner.page-object";
 import { BasePageObject } from "$tests/page-objects/base.page-object";
 import type { PageObjectElement } from "$tests/types/page-object.types";
 import { BackdropPo } from "./Backdrop.page-object";
@@ -14,6 +15,10 @@ export class TokensPagePo extends BasePageObject {
     return new TokensPagePo(element.byTestId(TokensPagePo.TID));
   }
 
+  getUsdValueBannerPo(): UsdValueBannerPo {
+    return UsdValueBannerPo.under(this.root);
+  }
+
   getTokensTable(): TokensTablePo {
     return TokensTablePo.under(this.root);
   }