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

@@ -108,6 +108,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,27 @@
 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
  */
-export const getAPR = async (): Promise<GlobalUnitAPRData> => {
-  const { data } = await apiWrapper<{ data: GlobalUnitAPRData }>(
+export const getPersonalizedAPR = async (
+  btcStakedSat: number,
+  babyStakedUbbn: number,
+): Promise<PersonalizedAPRResponse["data"]> => {
+  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(
     () =>