feat(packages): co-staking API APR data

services/simple-staking/src/ui/baby/hooks/services/useDelegationService.ts

@@ -1,7 +1,11 @@
 import { useCallback, useMemo } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 
 import babylon from "@/infrastructure/babylon";
-import { useDelegations } from "@/ui/baby/hooks/api/useDelegations";
+import {
+  useDelegations,
+  BABY_DELEGATIONS_KEY,
+} from "@/ui/baby/hooks/api/useDelegations";
 import { useUnbondingDelegations } from "@/ui/baby/hooks/api/useUnbondingDelegations";
 import { usePendingOperationsService } from "@/ui/baby/hooks/services/usePendingOperationsService";
 import {
@@ -33,6 +37,7 @@ export interface Delegation {
 }
 
 export function useDelegationService() {
+  const queryClient = useQueryClient();
   const { bech32Address } = useCosmosWallet();
   const {
     pendingOperations,
@@ -241,9 +246,12 @@ export function useDelegationService() {
       // Only add pending operation after successful transaction submission
       addPendingOperation(validatorAddress, amount, operationType);
 
+      // Invalidate queries to trigger APR refetch with updated totals
+      queryClient.invalidateQueries({ queryKey: [BABY_DELEGATIONS_KEY] });
+
       return result;
     },
-    [sendBbnTx, addPendingOperation],
+    [sendBbnTx, addPendingOperation, queryClient],
   );
 
   const estimateStakingFee = useCallback(

services/simple-staking/src/ui/baby/hooks/services/usePendingOperationsService.tsx

@@ -12,6 +12,10 @@ import { useCosmosWallet } from "@/ui/common/context/wallet/CosmosWalletProvider
 import { useLogger } from "@/ui/common/hooks/useLogger";
 import { getCurrentEpoch } from "@/ui/common/utils/local_storage/epochStorage";
 
+/**
+ * Runtime representation of a pending BABY staking operation.
+ * Uses bigint for amount to support arbitrary precision arithmetic.
+ */
 export interface PendingOperation {
   validatorAddress: string;
   amount: bigint;
@@ -21,9 +25,14 @@ export interface PendingOperation {
   epoch?: number;
 }
 
-interface PendingOperationStorage {
+/**
+ * localStorage-serializable format of PendingOperation.
+ * Converts bigint → string because JSON doesn't support BigInt.
+ * Use this type when reading/writing to localStorage.
+ */
+export interface PendingOperationStorage {
   validatorAddress: string;
-  amount: string;
+  amount: string; // Serialized bigint
   operationType: "stake" | "unstake";
   timestamp: number;
   walletAddress: string;
@@ -108,6 +117,9 @@ function usePendingOperationsServiceInternal() {
     );
 
     localStorage.setItem(storageKey, JSON.stringify(storageFormat));
+
+    // Emit custom event for same-tab updates (storage event only fires for other tabs)
+    window.dispatchEvent(new Event("baby-pending-operations-updated"));
   }, [pendingOperations, bech32Address]);
 
   const addPendingOperation = useCallback(

services/simple-staking/src/ui/common/api/getAPR.ts

@@ -1,17 +1,41 @@
 import { API_ENDPOINTS } from "../constants/endpoints";
-import { GlobalUnitAPRData } from "../types/api/coStaking";
+import { PersonalizedAPRResponse } from "../types/api/coStaking";
 
 import { apiWrapper } from "./apiWrapper";
 
 /**
- * Fetch APR data from the backend API
- * Returns APR values for BTC staking, BABY staking, Co-staking, and maximum APR
+ * Fetch personalized APR data from backend based on user's total staked amounts
+ * @param btcStakedSat - Total BTC in satoshis (confirmed + pending)
+ * @param babyStakedUbbn - Total BABY in ubbn (confirmed + pending)
+ * @returns Personalized APR data including current, boost, and additional BABY needed
+ * @throws Error if stake amounts are invalid (negative or not finite)
  */
-export const getAPR = async (): Promise<GlobalUnitAPRData> => {
-  const { data } = await apiWrapper<{ data: GlobalUnitAPRData }>(
+export const getPersonalizedAPR = async (
+  btcStakedSat: number,
+  babyStakedUbbn: number,
+): Promise<PersonalizedAPRResponse["data"]> => {
+  // Validate input parameters
+  if (btcStakedSat < 0 || !isFinite(btcStakedSat)) {
+    throw new Error(
+      `Invalid BTC stake amount: ${btcStakedSat}. Must be non-negative and finite.`,
+    );
+  }
+
+  if (babyStakedUbbn < 0 || !isFinite(babyStakedUbbn)) {
+    throw new Error(
+      `Invalid BABY stake amount: ${babyStakedUbbn}. Must be non-negative and finite.`,
+    );
+  }
+
+  const params = new URLSearchParams({
+    btc_staked: btcStakedSat.toString(),
+    baby_staked: babyStakedUbbn.toString(),
+  });
+
+  const { data } = await apiWrapper<PersonalizedAPRResponse>(
     "GET",
-    API_ENDPOINTS.APR,
-    "Error fetching APR data",
+    `${API_ENDPOINTS.APR}?${params.toString()}`,
+    "Error fetching personalized APR data",
   );
 
   return data.data;

services/simple-staking/src/ui/common/components/Modals/CoStakingBoostModal.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import { getNetworkConfigBTC } from "../../config/network/btc";
 import { getNetworkConfigBBN } from "../../config/network/bbn";
-import { useCoStakingService } from "../../hooks/services/useCoStakingService";
+import { useCoStakingState } from "../../state/CoStakingState";
 import { formatAPRPercentage } from "../../utils/formatAPR";
 
 import { SubmitModal } from "./SubmitModal";
@@ -18,9 +18,9 @@ export const CoStakingBoostModal: React.FC<FeedbackModalProps> = ({
 }) => {
   const { coinSymbol: btcCoinSymbol } = getNetworkConfigBTC();
   const { coinSymbol: babyCoinSymbol } = getNetworkConfigBBN();
-  const { getCoStakingAPR } = useCoStakingService();
+  const { aprData } = useCoStakingState();
 
-  const { currentApr, boostApr, additionalBabyNeeded } = getCoStakingAPR();
+  const { currentApr, boostApr, additionalBabyNeeded } = aprData;
 
   const submitButtonText = useMemo(
     () =>