feat: detailed balance for web

apps/web/src/components/AccountCard/AccountBalance.test.tsx

@@ -7,13 +7,14 @@ import {
   makeStore,
   networksActions,
 } from "@umami/state";
-import { GHOSTNET, MAINNET } from "@umami/tezos";
+import { GHOSTNET, MAINNET, mockImplicitAddress } from "@umami/tezos";
 
 import { AccountBalance } from "./AccountBalance";
 import { act, render, screen, userEvent, waitFor, within } from "../../testUtils";
 
 let store: UmamiStore;
 const account = mockImplicitAccount(0);
+const stakerAddress = mockImplicitAddress(0).pkh;
 
 beforeEach(() => {
   store = makeStore();
@@ -85,7 +86,10 @@ describe("<AccountBalance />", () => {
       render(<AccountBalance />, { store });
 
       expect(screen.getByTestId("tez-balance")).toHaveTextContent("1.234567 ꜩ");
-      expect(screen.getByTestId("usd-balance")).toHaveTextContent("$3.02");
+      expect(screen.getByTestId("usd-balance")).toHaveTextContent("$3.02 (US$2.44 / XTZ)");
+      expect(screen.queryByTestId("spendable-balance")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("staked-balance")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("finalizable-balance")).not.toBeInTheDocument();
     });
 
     it("renders only tez balance if conversion rate is not available", () => {
@@ -109,6 +113,196 @@ describe("<AccountBalance />", () => {
 
       expect(screen.getByTestId("tez-balance")).toHaveTextContent("0 ꜩ");
       expect(screen.getByTestId("usd-balance")).toHaveTextContent("$0.00");
+      expect(screen.queryByTestId("spendable-balance")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("staked-balance")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("finalizable-balance")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Delegation and staking", () => {
+    // beforeEach(() => {
+    //   // Clear the store before each test
+    //   store.dispatch(assetsActions.clearAccountStates());
+    //   store.dispatch(assetsActions.updateConversionRate(null)); // Clear conversion rate
+    // });
+
+    it("renders delegation status as Active when delegate exists", () => {
+      store.dispatch(
+        assetsActions.updateAccountStates([
+          rawAccountFixture({
+            address: account.address.pkh,
+          }),
+        ])
+      );
+
+      render(<AccountBalance />, { store });
+
+      expect(screen.getByText("Delegation:")).toBeInTheDocument();
+      expect(screen.getByText("Active")).toBeInTheDocument();
+      expect(screen.getByTestId("current-baker")).toHaveTextContent("mega_baker");
+    });
+
+    it("renders delegation status as Inactive when no delegate exists", () => {
+      store.dispatch(
+        assetsActions.updateAccountStates([
+          rawAccountFixture({
+            address: account.address.pkh,
+            delegate: null,
+          }),
+        ])
+      );
+
+      render(<AccountBalance />, { store });
+
+      expect(screen.getByText("Delegation:")).toBeInTheDocument();
+      expect(screen.getByText("Inactive")).toBeInTheDocument();
+      expect(screen.queryByTestId("current-baker")).not.toBeInTheDocument();
+    });
+
+    it("renders staked and spendable balance", () => {
+      store.dispatch(
+        assetsActions.updateAccountStates([
+          rawAccountFixture({
+            address: account.address.pkh,
+            balance: 1234567,
+            stakedBalance: 1000000,
+          }),
+        ])
+      );
+
+      render(<AccountBalance />, { store });
+
+      expect(screen.getByTestId("tez-balance")).toHaveTextContent("1.234567 ꜩ");
+      expect(screen.getByTestId("spendable-balance")).toHaveTextContent("Spendable:");
+      expect(screen.getByTestId("spendable-balance")).toHaveTextContent("0.234567 ꜩ");
+      expect(screen.getByTestId("staked-balance")).toHaveTextContent("Staked:");
+      expect(screen.getByTestId("staked-balance")).toHaveTextContent("1.000000 ꜩ");
+      expect(screen.queryByTestId("unstaked-balance")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("finalizable-balance")).not.toBeInTheDocument();
+    });
+
+    it("renders unstaked (frozen) balance when greater than 0", () => {
+      const stakerAddress = mockImplicitAddress(0).pkh;
+      store.dispatch(
+        assetsActions.updateAccountStates([
+          rawAccountFixture({
+            address: account.address.pkh,
+            balance: 1234567,
+          }),
+        ])
+      );
+
+      store.dispatch(
+        assetsActions.updateUnstakeRequests([
+          {
+            cycle: 1,
+            amount: 100000,
+            staker: { address: stakerAddress },
+            status: "pending",
+          },
+          {
+            cycle: 1,
+            amount: 20000,
+            staker: { address: stakerAddress },
+            status: "pending",
+          },
+        ])
+      );
+
+      render(<AccountBalance />, { store });
+
+      expect(screen.getByTestId("tez-balance")).toHaveTextContent("1.354567 ꜩ");
+      expect(screen.getByTestId("spendable-balance")).toHaveTextContent("Spendable:");
+      expect(screen.getByTestId("spendable-balance")).toHaveTextContent("1.234567 ꜩ");
+      expect(screen.queryByTestId("staked-balance")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("finalizable-balance")).not.toBeInTheDocument();
+      expect(screen.getByTestId("unstaked-balance")).toHaveTextContent("Frozen unstaked:");
+      expect(screen.getByTestId("unstaked-balance")).toHaveTextContent("0.120000 ꜩ");
+    });
+
+    it("renders finalizable balance when greater than 0", () => {
+      store.dispatch(
+        assetsActions.updateAccountStates([
+          rawAccountFixture({
+            address: account.address.pkh,
+            balance: 1234567,
+          }),
+        ])
+      );
+
+      store.dispatch(
+        assetsActions.updateUnstakeRequests([
+          {
+            cycle: 2,
+            amount: 300000,
+            staker: { address: stakerAddress },
+            status: "finalizable",
+          },
+        ])
+      );
+
+      render(<AccountBalance />, { store });
+
+      expect(screen.getByTestId("tez-balance")).toHaveTextContent("1.534567 ꜩ");
+      expect(screen.getByTestId("spendable-balance")).toHaveTextContent("Spendable:");
+      expect(screen.getByTestId("spendable-balance")).toHaveTextContent("1.234567 ꜩ");
+      expect(screen.queryByTestId("staked-balance")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("unstaked-balance")).not.toBeInTheDocument();
+      expect(screen.getByTestId("finalizable-balance")).toHaveTextContent("Finalizable:");
+      expect(screen.getByTestId("finalizable-balance")).toHaveTextContent("0.300000 ꜩ");
+    });
+
+    it("renders combination of staked, unstaked and frozen", () => {
+      store.dispatch(
+        assetsActions.updateAccountStates([
+          rawAccountFixture({
+            address: account.address.pkh,
+            balance: 1234567,
+            stakedBalance: 1000000,
+          }),
+        ])
+      );
+
+      store.dispatch(
+        assetsActions.updateUnstakeRequests([
+          {
+            cycle: 1,
+            amount: 10000,
+            staker: { address: stakerAddress },
+            status: "pending",
+          },
+          {
+            cycle: 1,
+            amount: 200000,
+            staker: { address: stakerAddress },
+            status: "pending",
+          },
+          {
+            cycle: 2,
+            amount: 3000000,
+            staker: { address: stakerAddress },
+            status: "finalizable",
+          },
+          {
+            cycle: 5,
+            amount: 40000000,
+            staker: { address: stakerAddress },
+            status: "finalized",
+          },
+        ])
+      );
+
+      render(<AccountBalance />, { store });
+
+      expect(screen.getByTestId("tez-balance")).toHaveTextContent("4.444567 ꜩ");
+      expect(screen.getByTestId("spendable-balance")).toHaveTextContent("Spendable:");
+      expect(screen.getByTestId("spendable-balance")).toHaveTextContent("0.234567 ꜩ");
+      expect(screen.getByTestId("staked-balance")).toHaveTextContent("Staked:");
+      expect(screen.getByTestId("staked-balance")).toHaveTextContent("1.000000 ꜩ");
+      expect(screen.getByTestId("unstaked-balance")).toHaveTextContent("Frozen unstaked:");
+      expect(screen.getByTestId("unstaked-balance")).toHaveTextContent("0.210000 ꜩ");
+      expect(screen.getByTestId("finalizable-balance")).toHaveTextContent("Finalizable:");
+      expect(screen.getByTestId("finalizable-balance")).toHaveTextContent("3.000000 ꜩ");
     });
   });