Support rendering stake in USD in NeuronsTable (#6018)

# Motivation

We want to show USD values in the neurons tables, similar to the tokens
table and the projects table.

This PR adds support for rendering the `stakeInUsd` field in the
`NeuronsTable` components.

Still missing (for future PRs):
1. Passing `icpSwapUsdPrices` to `tableNeuronsFromNeuronInfos` and
`tableNeuronsFromSnsNeurons`.
2. Calling `loadIcpSwapTickers` on the neurons table page to make sure
data is available.

# Changes

1. Render stake in USD in `NeuronStakeCell.svelte` if
`ENABLE_USD_VALUES_FOR_NEURONS` is enabled.

# Tests

1. Unit tests added.
2. Manually at
https://qsgjb-riaaa-aaaaa-aaaga-cai.dskloet-ingress.devenv.dfinity.network/neurons/?u=qsgjb-riaaa-aaaaa-aaaga-cai

# Todos

- [ ] Add entry to changelog (if necessary).
not yet

frontend/src/lib/components/neurons/NeuronsTable/NeuronStakeCell.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
   import AmountDisplay from "$lib/components/ic/AmountDisplay.svelte";
+  import AmountWithUsd from "$lib/components/ic/AmountWithUsd.svelte";
+  import { ENABLE_USD_VALUES_FOR_NEURONS } from "$lib/stores/feature-flags.store";
   import type { TableNeuron } from "$lib/types/neurons-table";
 
   export let rowData: TableNeuron;
 </script>
 
 <div data-tid="neuron-stake-cell-component" class="container">
-  <AmountDisplay singleLine amount={rowData.stake} />
+  {#if $ENABLE_USD_VALUES_FOR_NEURONS}
+    <AmountWithUsd amount={rowData.stake} amountInUsd={rowData.stakeInUsd} />
+  {:else}
+    <AmountDisplay singleLine amount={rowData.stake} />
+  {/if}
 </div>
 
 <style lang="scss">

frontend/src/lib/components/staking/ProjectStakeCell.svelte

@@ -11,8 +11,7 @@
 <div data-tid="project-stake-cell-component">
   {#if !(rowData.stake instanceof TokenAmountV2) || rowData.stake.toUlps() > 0}
     {#if $ENABLE_USD_VALUES_FOR_NEURONS}
-      <AmountWithUsd amount={rowData.stake} amountInUsd={rowData.stakeInUsd}
-      ></AmountWithUsd>
+      <AmountWithUsd amount={rowData.stake} amountInUsd={rowData.stakeInUsd} />
     {:else}
       <AmountDisplay singleLine amount={rowData.stake} />
     {/if}

frontend/src/lib/components/tokens/TokensTable/TokenBalanceCell.svelte

@@ -22,8 +22,10 @@
   >
 {:else if isUserTokenData(rowData)}
   {#if $ENABLE_USD_VALUES}
-    <AmountWithUsd amount={rowData.balance} amountInUsd={rowData.balanceInUsd}
-    ></AmountWithUsd>
+    <AmountWithUsd
+      amount={rowData.balance}
+      amountInUsd={rowData.balanceInUsd}
+    />
   {:else}
     <AmountDisplay singleLine amount={rowData.balance} />
   {/if}

frontend/src/tests/lib/components/neurons/NeuronsTable/NeuronsTable.spec.ts

@@ -4,6 +4,7 @@ import {
   SECONDS_IN_EIGHT_YEARS,
   SECONDS_IN_MONTH,
 } from "$lib/constants/constants";
+import { overrideFeatureFlagsStore } from "$lib/stores/feature-flags.store";
 import { neuronsTableOrderStore } from "$lib/stores/neurons-table.store";
 import type { TableNeuron } from "$lib/types/neurons-table";
 import { mockTableNeuron } from "$tests/mocks/neurons.mock";
@@ -196,6 +197,56 @@ describe("NeuronsTable", () => {
     expect(await rowPos[0].getStake()).toBe("10.00 ICP");
   });
 
+  it("should render neuron stake in USD", async () => {
+    overrideFeatureFlagsStore.setFlag("ENABLE_USD_VALUES_FOR_NEURONS", true);
+
+    const po = renderComponent({
+      neurons: [
+        {
+          ...neuron1,
+          stakeInUsd: 1234.56,
+        },
+      ],
+    });
+    const rowPos = await po.getNeuronsTableRowPos();
+    expect(rowPos).toHaveLength(1);
+    expect(await rowPos[0].getStakeInUsd()).toBe("$1’234.56");
+    expect(await rowPos[0].hasStakeInUsd()).toBe(true);
+  });
+
+  it("should render absent neuron stake in USD", async () => {
+    overrideFeatureFlagsStore.setFlag("ENABLE_USD_VALUES_FOR_NEURONS", true);
+
+    const po = renderComponent({
+      neurons: [
+        {
+          ...neuron1,
+          stakeInUsd: undefined,
+        },
+      ],
+    });
+    const rowPos = await po.getNeuronsTableRowPos();
+    expect(rowPos).toHaveLength(1);
+    expect(await rowPos[0].getStakeInUsd()).toBe("$-/-");
+    expect(await rowPos[0].hasStakeInUsd()).toBe(true);
+  });
+
+  it("should not render neuron stake in USD if feature flag is disabled", async () => {
+    overrideFeatureFlagsStore.setFlag("ENABLE_USD_VALUES_FOR_NEURONS", false);
+
+    const po = renderComponent({
+      neurons: [
+        {
+          ...neuron1,
+          stakeInUsd: 1234.56,
+        },
+      ],
+    });
+    const rowPos = await po.getNeuronsTableRowPos();
+    expect(rowPos).toHaveLength(1);
+    expect(await rowPos[0].hasStakeInUsd()).toBe(false);
+  });
+
   it("should render neuron maturity", async () => {
     const po = renderComponent({
       neurons: [

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

@@ -1,4 +1,5 @@
 import { AmountDisplayPo } from "$tests/page-objects/AmountDisplay.page-object";
+import { AmountWithUsdPo } from "$tests/page-objects/AmountWithUsd.page-object";
 import { BasePageObject } from "$tests/page-objects/base.page-object";
 import type { PageObjectElement } from "$tests/types/page-object.types";
 
@@ -9,6 +10,10 @@ export class NeuronStakeCellPo extends BasePageObject {
     return new NeuronStakeCellPo(element.byTestId(NeuronStakeCellPo.TID));
   }
 
+  getAmountWithUsdPo(): AmountWithUsdPo {
+    return AmountWithUsdPo.under(this.root);
+  }
+
   getAmountDisplayPo(): AmountDisplayPo {
     return AmountDisplayPo.under(this.root);
   }
@@ -20,4 +25,12 @@ export class NeuronStakeCellPo extends BasePageObject {
   getStakeBalance(): Promise<string> {
     return this.getAmountDisplayPo().getAmount();
   }
+
+  async getStakeInUsd(): Promise<string> {
+    return await this.getAmountWithUsdPo().getAmountInUsd();
+  }
+
+  async hasStakeInUsd(): Promise<boolean> {
+    return await this.getAmountWithUsdPo().isPresent();
+  }
 }

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

@@ -46,6 +46,14 @@ export class NeuronsTableRowPo extends ResponsiveTableRowPo {
     return this.getNeuronStakeCellPo().getStake();
   }
 
+  getStakeInUsd(): Promise<string> {
+    return this.getNeuronStakeCellPo().getStakeInUsd();
+  }
+
+  hasStakeInUsd(): Promise<boolean> {
+    return this.getNeuronStakeCellPo().hasStakeInUsd();
+  }
+
   // Stake without the currency symbol
   getStakeBalance(): Promise<string> {
     return this.getNeuronStakeCellPo().getStakeBalance();