feat: show correct total balance

src/app/components/PersonalBalance/PersonalBalance.tsx

@@ -1,11 +1,13 @@
 import { Heading } from "@babylonlabs-io/bbn-core-ui";
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
 import { useCosmosWallet } from "@/app/context/wallet/CosmosWalletProvider";
 import { useBbnQuery } from "@/app/hooks/client/rpc/queries/useBbnQuery";
 import { useRewardsService } from "@/app/hooks/services/useRewardsService";
+import { useAppState } from "@/app/state";
+import { useDelegationV2State } from "@/app/state/DelegationV2State";
 import { getNetworkConfigBBN } from "@/config/network/bbn";
 import { getNetworkConfigBTC } from "@/config/network/btc";
 import { ubbnToBbn } from "@/utils/bbn";
@@ -31,6 +33,9 @@ export function PersonalBalance() {
   } = useBTCWallet();
   const { connected: cosmosConnected, bech32Address } = useCosmosWallet();
 
+  const { totalBalance: availableBalance } = useAppState();
+  const { getStakedBalance } = useDelegationV2State();
+
   const {
     balanceQuery: { data: cosmosBalance, isLoading: cosmosBalanceLoading },
   } = useBbnQuery();
@@ -49,6 +54,11 @@ export function PersonalBalance() {
     enabled: btcConnected,
   });
 
+  const totalBalance = useMemo(
+    () => (btcBalance ?? 0) + getStakedBalance(),
+    [btcBalance, getStakedBalance],
+  );
+
   if (!btcConnected || !cosmosConnected) {
     return null;
   }
@@ -61,20 +71,18 @@ export function PersonalBalance() {
         Wallet Balance
       </Heading>
       <div className="flex flex-col justify-between bg-secondary-contrast rounded p-6 text-base md:flex-row">
-        {/* TODO: Need to add the staker tvl value for the bitcoin balance 
-          as well as remove the filtering on inscription balance*/}
         <StatItem
           loading={btcBalanceLoading}
-          title={`${coinName} Balance`}
-          value={`${satoshiToBtc(btcBalance ?? 0)} ${coinSymbol}`}
+          title={`Total ${coinName} Balance`}
+          value={`${satoshiToBtc(totalBalance)} ${coinSymbol}`}
         />
 
         <div className="divider mx-0 my-2 md:divider-horizontal" />
 
         <StatItem
           loading={cosmosBalanceLoading}
           title={"Stakable Balance"}
-          value={`${satoshiToBtc(btcBalance ?? 0)} ${coinSymbol}`}
+          value={`${satoshiToBtc(availableBalance)} ${coinSymbol}`}
         />
 
         <div className="divider mx-0 my-2 md:divider-horizontal" />

src/app/state/DelegationV2State.tsx

@@ -1,7 +1,11 @@
 import { useCallback, useMemo, type PropsWithChildren } from "react";
 
 import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
-import type { DelegationLike, DelegationV2 } from "@/app/types/delegationsV2";
+import {
+  DelegationV2StakingState,
+  type DelegationLike,
+  type DelegationV2,
+} from "@/app/types/delegationsV2";
 import { createStateUtils } from "@/utils/createStateUtils";
 import { getDelegationsV2LocalStorageKey } from "@/utils/local_storage/getDelegationsLocalStorageKey";
 
@@ -16,8 +20,22 @@ interface DelegationV2State {
   updateDelegationStatus: (is: string, status: DelegationV2["state"]) => void;
   fetchMoreDelegations: () => void;
   findDelegationByTxHash: (txHash: string) => DelegationV2 | undefined;
+  getStakedBalance: () => number;
 }
 
+const STAKED_BALANCE_STATUSES = [
+  DelegationV2StakingState.ACTIVE,
+  DelegationV2StakingState.TIMELOCK_UNBONDING,
+  DelegationV2StakingState.EARLY_UNBONDING,
+  DelegationV2StakingState.TIMELOCK_WITHDRAWABLE,
+  DelegationV2StakingState.EARLY_UNBONDING_WITHDRAWABLE,
+  DelegationV2StakingState.TIMELOCK_SLASHING_WITHDRAWABLE,
+  DelegationV2StakingState.EARLY_UNBONDING_SLASHING_WITHDRAWABLE,
+  DelegationV2StakingState.SLASHED,
+  DelegationV2StakingState.INTERMEDIATE_PENDING_BTC_CONFIRMATION,
+  DelegationV2StakingState.INTERMEDIATE_UNBONDING_SUBMITTED,
+];
+
 const { StateProvider, useState } = createStateUtils<DelegationV2State>({
   isLoading: false,
   delegations: [],
@@ -26,6 +44,7 @@ const { StateProvider, useState } = createStateUtils<DelegationV2State>({
   updateDelegationStatus: () => {},
   fetchMoreDelegations: () => {},
   findDelegationByTxHash: () => undefined,
+  getStakedBalance: () => 0,
 });
 
 export function DelegationV2State({ children }: PropsWithChildren) {
@@ -45,6 +64,31 @@ export function DelegationV2State({ children }: PropsWithChildren) {
     (txHash: string) => delegations.find((d) => d.stakingTxHashHex === txHash),
     [delegations],
   );
+  // Temporary solution to calculate total staked balance while waiting for API support.
+  // Once the API is complete, it will directly provide the staker's total balance
+  // (active + unbonding + withdrawing). For now, we manually sum up all delegation
+  // amounts that are in relevant states, including intermediate states.
+  const getStakedBalance = useCallback(() => {
+    // First create a map of status -> amounts array
+    const statusAmountMap = delegations.reduce(
+      (acc, delegation) => {
+        if (!STAKED_BALANCE_STATUSES.includes(delegation.state)) {
+          return acc;
+        }
+        if (!acc[delegation.state]) {
+          acc[delegation.state] = [];
+        }
+        acc[delegation.state].push(delegation.stakingAmount);
+        return acc;
+      },
+      {} as Record<DelegationV2StakingState, number[]>,
+    );
+
+    // Then sum up all amounts across all statuses into a single number
+    return Object.values(statusAmountMap)
+      .flat()
+      .reduce((total, amount) => total + amount, 0);
+  }, [delegations]);
 
   // Context
   const state = useMemo(
@@ -56,6 +100,7 @@ export function DelegationV2State({ children }: PropsWithChildren) {
       updateDelegationStatus,
       findDelegationByTxHash,
       fetchMoreDelegations: fetchNextPage,
+      getStakedBalance,
     }),
     [
       delegations,
@@ -65,6 +110,7 @@ export function DelegationV2State({ children }: PropsWithChildren) {
       updateDelegationStatus,
       findDelegationByTxHash,
       fetchNextPage,
+      getStakedBalance,
     ],
   );
 

src/components/delegations/DelegationList/components/Status.tsx

@@ -26,6 +26,7 @@ interface StatusTooltipProps {
 const STATUS_LABELS = {
   PENDING: "Pending",
   VERIFIED: "Verified",
+  PENDING_BTC_CONFIRMATION: "Pending BTC Confirmation",
   ACTIVE: "Active",
   UNBONDING: "Unbonding",
   WITHDRAWABLE: "Withdrawable",
@@ -144,7 +145,7 @@ const STATUSES: Record<
     tooltip: STATUS_MESSAGES.PENDING,
   }),
   [State.INTERMEDIATE_PENDING_BTC_CONFIRMATION]: ({ params }) => ({
-    label: STATUS_LABELS.PENDING,
+    label: STATUS_LABELS.PENDING_BTC_CONFIRMATION,
     tooltip: STATUS_MESSAGES.PENDING_BTC_CONFIRMATION(
       params?.btcEpochCheckParams.latestParam.btcConfirmationDepth ?? 0,
     ),