feat: implements BABY rewards card and function (#1362)

* implements baby rewards

* Remove debug logs

* Update src/ui/baby/components/RewardCard/index.tsx

Co-authored-by: Copilot <[email protected]>

* Fix claims

* Revisions

* Fix rewards modal

---------

Co-authored-by: Copilot <[email protected]>

Author: jonybur

src/ui/baby/components/RewardCard/index.tsx

@@ -1,10 +1,19 @@
 import { Avatar, Button, SubSection, Text } from "@babylonlabs-io/core-ui";
 
+import { useRewardState } from "@/ui/baby/state/RewardState";
 import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
+import { ubbnToBaby } from "@/ui/common/utils/bbn";
+import { maxDecimals } from "@/ui/common/utils/maxDecimals";
 
 const { logo, coinSymbol } = getNetworkConfigBBN();
 
 export function RewardCard() {
+  const { totalReward, openClaimModal, loading, refreshRewards } =
+    useRewardState();
+
+  const hasRewards = totalReward > 0n;
+  const formattedReward = maxDecimals(ubbnToBaby(Number(totalReward)), 6);
+
   return (
     <SubSection className="flex-col gap-4">
       <div className="flex justify-between items-center w-full">
@@ -15,7 +24,24 @@ export function RewardCard() {
           </span>
         </div>
 
-        <Button size="small">Claim</Button>
+        <div className="flex gap-2">
+          <Button
+            size="small"
+            onClick={refreshRewards}
+            disabled={loading}
+            variant="outlined"
+            aria-label="Refresh rewards"
+          >
+            🔄
+          </Button>
+          <Button
+            size="small"
+            onClick={openClaimModal}
+            disabled={!hasRewards || loading}
+          >
+            Claim
+          </Button>
+        </div>
       </div>
 
       <Text
@@ -24,10 +50,17 @@ export function RewardCard() {
         className="flex justify-between items-center text-accent-secondary"
       >
         <span>Babylon Genesis</span>
-        <span>$100.00 USD</span>
+        <span>
+          {formattedReward} {coinSymbol}
+          <span style={{ fontSize: "10px", opacity: 0.5, marginLeft: "8px" }}>
+            (raw: {totalReward.toString()})
+          </span>
+        </span>
       </Text>
 
-      <Button fluid>Claim</Button>
+      <Button fluid onClick={openClaimModal} disabled={!hasRewards || loading}>
+        Claim
+      </Button>
     </SubSection>
   );
 }

src/ui/baby/components/RewardPreviewModal/index.tsx

@@ -5,19 +5,28 @@ import {
   DialogHeader,
   Text,
 } from "@babylonlabs-io/core-ui";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useEffect, useState } from "react";
 
+import babylon from "@/infrastructure/babylon";
 import { ResponsiveDialog } from "@/ui/common/components/Modals/ResponsiveDialog";
 import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
+import { useCosmosWallet } from "@/ui/common/context/wallet/CosmosWalletProvider";
+import { usePrice } from "@/ui/common/hooks/client/api/usePrices";
+import { useBbnTransaction } from "@/ui/common/hooks/client/rpc/mutation/useBbnTransaction";
+import { ubbnToBaby } from "@/ui/common/utils/bbn";
+import { calculateTokenValueInCurrency } from "@/ui/common/utils/formatCurrency";
+import { maxDecimals } from "@/ui/common/utils/maxDecimals";
 
-const { coinSymbol } = getNetworkConfigBBN();
+const { coinSymbol, displayUSD } = getNetworkConfigBBN();
 
 interface PreviewModalProps {
   open: boolean;
   processing?: boolean;
   title: string;
   onClose: () => void;
   onProceed: () => void;
+  rewards: Array<{ validatorAddress: string }>;
+  totalReward: bigint;
 }
 
 export const RewardsPreviewModal = ({
@@ -26,7 +35,54 @@ export const RewardsPreviewModal = ({
   title,
   onClose,
   onProceed,
+  rewards,
+  totalReward,
 }: PropsWithChildren<PreviewModalProps>) => {
+  const { bech32Address } = useCosmosWallet();
+  const { estimateBbnGasFee } = useBbnTransaction();
+  const babyPrice = usePrice(coinSymbol);
+  const [feeAmount, setFeeAmount] = useState<number>(0);
+  const [feeLoading, setFeeLoading] = useState<boolean>(false);
+
+  // Estimate fee when modal opens
+  useEffect(() => {
+    const estimateFee = async () => {
+      if (!open || !bech32Address || !rewards.length) return;
+
+      setFeeLoading(true);
+      try {
+        const msgs = rewards.map((reward) =>
+          babylon.txs.baby.createClaimRewardMsg({
+            validatorAddress: reward.validatorAddress,
+            delegatorAddress: bech32Address,
+          }),
+        );
+        const gasFee = await estimateBbnGasFee(msgs);
+        const totalFee = gasFee.amount.reduce(
+          (acc, coin) => acc + Number(coin.amount),
+          0,
+        );
+        setFeeAmount(totalFee);
+      } catch (error) {
+        console.error("Error estimating fee:", error);
+        setFeeAmount(0);
+      } finally {
+        setFeeLoading(false);
+      }
+    };
+
+    estimateFee();
+  }, [open, bech32Address, rewards, estimateBbnGasFee]);
+
+  const feeInBaby = ubbnToBaby(feeAmount);
+  const feeInUsd = displayUSD
+    ? calculateTokenValueInCurrency(feeInBaby, babyPrice)
+    : undefined;
+
+  const rewardInBaby = ubbnToBaby(Number(totalReward));
+  const rewardInUsd = displayUSD
+    ? calculateTokenValueInCurrency(rewardInBaby, babyPrice)
+    : undefined;
   return (
     <ResponsiveDialog open={open} onClose={onClose}>
       <DialogHeader title={title} className="text-accent-primary" />
@@ -36,8 +92,8 @@ export const RewardsPreviewModal = ({
           <Text variant="body1" className="flex justify-between">
             <span>Babylon Genesis</span>
             <span className="flex flex-col items-end">
-              1000 {coinSymbol}
-              <Text variant="body2">~ $5,677.39 USD</Text>
+              {maxDecimals(rewardInBaby, 6)} {coinSymbol}
+              {rewardInUsd && <Text variant="body2">{rewardInUsd}</Text>}
             </span>
           </Text>
 
@@ -46,8 +102,14 @@ export const RewardsPreviewModal = ({
           <Text variant="body1" className="flex justify-between">
             <span>Transaction Fees</span>
             <span className="flex flex-col gap-2 items-end">
-              10 {coinSymbol}
-              <Text variant="body2">~ $5,677.39 USD</Text>
+              {feeLoading ? (
+                <Text variant="body2">Calculating...</Text>
+              ) : (
+                <>
+                  {maxDecimals(feeInBaby, 6)} {coinSymbol}
+                  {feeInUsd && <Text variant="body2">{feeInUsd}</Text>}
+                </>
+              )}
             </span>
           </Text>
         </div>

src/ui/baby/hooks/services/useRewardService.ts

@@ -4,6 +4,7 @@ import babylon from "@/infrastructure/babylon";
 import { useRewards } from "@/ui/baby/hooks/api/useRewards";
 import { useCosmosWallet } from "@/ui/common/context/wallet/CosmosWalletProvider";
 import { useBbnTransaction } from "@/ui/common/hooks/client/rpc/mutation/useBbnTransaction";
+import { coinAmountToBigInt } from "@/ui/common/utils/bbn";
 
 export interface Reward {
   validatorAddress: string;
@@ -20,27 +21,30 @@ export function useRewardService() {
   } = useRewards(bech32Address);
   const { signBbnTx, sendBbnTx } = useBbnTransaction();
 
-  const rewardList = useMemo(
-    () =>
-      rewards
-        .map(({ validatorAddress, reward }) => {
-          const coin = reward.find((coin) => coin.denom === "ubbn");
-          return coin
-            ? {
-                validatorAddress,
-                amount: BigInt(coin.amount),
-                coin: coin.denom,
-              }
-            : null;
-        })
-        .filter(Boolean) as Reward[],
-    [rewards],
-  );
+  const rewardList = useMemo(() => {
+    const processed = rewards
+      .map(({ validatorAddress, reward }) => {
+        const coin = reward.find((coin) => coin.denom === "ubbn");
+        return coin
+          ? {
+              validatorAddress,
+              amount: coinAmountToBigInt(coin.amount),
+              coin: coin.denom,
+            }
+          : null;
+      })
+      .filter(Boolean) as Reward[];
 
-  const totalReward = useMemo(
-    () => rewardList.reduce((total, reward) => total + reward.amount, 0n),
-    [rewardList],
-  );
+    return processed;
+  }, [rewards]);
+
+  const totalReward = useMemo(() => {
+    const total = rewardList.reduce(
+      (total, reward) => total + reward.amount,
+      0n,
+    );
+    return total;
+  }, [rewardList]);
 
   const claimAllRewards = useCallback(async () => {
     if (!bech32Address) throw Error("Babylon Wallet is not connected");
@@ -61,5 +65,6 @@ export function useRewardService() {
     rewards: rewardList,
     totalReward,
     claimAllRewards,
+    refetchRewards,
   };
 }

src/ui/baby/layout.tsx

@@ -1,6 +1,7 @@
 import { Outlet } from "react-router";
 
 import { DelegationState } from "@/ui/baby/state/DelegationState";
+import { RewardState } from "@/ui/baby/state/RewardState";
 import { StakingState } from "@/ui/baby/state/StakingState";
 import { ValidatorState } from "@/ui/baby/state/ValidatorState";
 import { AuthGuard } from "@/ui/common/components/Common/AuthGuard";
@@ -12,19 +13,21 @@ export default function BabyLayout() {
     <StakingState>
       <ValidatorState>
         <DelegationState>
-          <Content>
-            <AuthGuard>
-              <Nav>
-                <NavItem title="Stake" to="/baby/staking" />
-                <NavItem title="Activity" to="/baby/activities" />
-                <NavItem title="Rewards" to="/baby/rewards" />
-              </Nav>
-            </AuthGuard>
+          <RewardState>
+            <Content>
+              <AuthGuard>
+                <Nav>
+                  <NavItem title="Stake" to="/baby/staking" />
+                  <NavItem title="Activity" to="/baby/activities" />
+                  <NavItem title="Rewards" to="/baby/rewards" />
+                </Nav>
+              </AuthGuard>
 
-            <div className="mt-10">
-              <Outlet />
-            </div>
-          </Content>
+              <div className="mt-10">
+                <Outlet />
+              </div>
+            </Content>
+          </RewardState>
         </DelegationState>
       </ValidatorState>
     </StakingState>

src/ui/baby/state/RewardState.tsx

@@ -11,30 +11,55 @@ import { createStateUtils } from "@/ui/common/utils/createStateUtils";
 interface RewardState {
   loading: boolean;
   rewards: Reward[];
+  totalReward: bigint;
   claimAll: () => Promise<void>;
+  showClaimModal: boolean;
+  openClaimModal: () => void;
+  closeClaimModal: () => void;
+  refreshRewards: () => void;
 }
 
 const { StateProvider, useState: useRewardState } =
   createStateUtils<RewardState>({
     loading: false,
     rewards: [],
+    totalReward: 0n,
     claimAll: async () => {},
+    showClaimModal: false,
+    openClaimModal: () => {},
+    closeClaimModal: () => {},
+    refreshRewards: () => {},
   });
 
 function RewardState({ children }: PropsWithChildren) {
   const [processing, setProcessing] = useState(false);
+  const [showClaimModal, setShowClaimModal] = useState(false);
 
-  const { loading, rewards, totalReward, claimAllRewards } = useRewardService();
+  const { loading, rewards, totalReward, claimAllRewards, refetchRewards } =
+    useRewardService();
   const { handleError } = useError();
   const logger = useLogger();
 
+  const openClaimModal = useCallback(() => {
+    setShowClaimModal(true);
+  }, []);
+
+  const closeClaimModal = useCallback(() => {
+    setShowClaimModal(false);
+  }, []);
+
+  const refreshRewards = useCallback(() => {
+    refetchRewards();
+  }, [refetchRewards]);
+
   const claimAll = useCallback(async () => {
     try {
       setProcessing(true);
       const result = await claimAllRewards();
-      logger.info("Baby Staking: stake", {
+      logger.info("Baby Staking: claim rewards", {
         txHash: result?.txHash,
       });
+      setShowClaimModal(false);
     } catch (error: any) {
       handleError({ error });
       logger.error(error);
@@ -49,8 +74,22 @@ function RewardState({ children }: PropsWithChildren) {
       rewards,
       totalReward,
       claimAll,
+      showClaimModal,
+      openClaimModal,
+      closeClaimModal,
+      refreshRewards,
     }),
-    [loading, processing, rewards, totalReward, claimAll],
+    [
+      loading,
+      processing,
+      rewards,
+      totalReward,
+      claimAll,
+      showClaimModal,
+      openClaimModal,
+      closeClaimModal,
+      refreshRewards,
+    ],
   );
 
   return <StateProvider value={context}>{children}</StateProvider>;