add claim reward modal

src/app/components/Modals/ClaimRewardModal.tsx

@@ -0,0 +1,74 @@
+import { Heading, Text } from "@babylonlabs-io/bbn-core-ui";
+import { PropsWithChildren, useEffect, useState } from "react";
+
+import { LoadingSmall } from "../Loading/Loading";
+
+import { ConfirmationModal } from "./ConfirmationModal";
+
+interface ConfirmationModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+  receivingValue: string;
+  address: string;
+  getTransactionFee: () => Promise<number>;
+}
+
+export const ClaimRewardModal = ({
+  open,
+  onClose,
+  onSubmit,
+  receivingValue,
+  address,
+  getTransactionFee,
+}: PropsWithChildren<ConfirmationModalProps>) => {
+  const [transactionFee, setTransactionFee] = useState<number>(0);
+
+  useEffect(() => {
+    const fetchTransactionFee = async () => {
+      const fee = await getTransactionFee();
+      setTransactionFee(fee);
+    };
+    fetchTransactionFee();
+  }, [getTransactionFee]);
+
+  return (
+    <ConfirmationModal
+      open={open}
+      processing={false}
+      title="Claim tBABY Reward"
+      onClose={onClose}
+      onSubmit={onSubmit}
+    >
+      <div className="flex flex-col mt-8 gap-10">
+        <div className="flex flex-col gap-4 divide-y divide-inherit">
+          <div className="flex flex-row items-center justify-between">
+            <Text variant="body1" className="text-center">
+              Receiving
+            </Text>
+            <Text variant="body1">{receivingValue} tBABY</Text>
+          </div>
+
+          <div className="flex flex-row items-center justify-between pt-4">
+            <Text variant="body1">Babylon Test ChainAddress</Text>
+            <Text variant="body1">{address}</Text>
+          </div>
+          <div className="flex flex-row items-center justify-between pt-4">
+            <Text variant="body1">Transaction Fees</Text>
+            {transactionFee === 0 ? (
+              <LoadingSmall />
+            ) : (
+              <Text variant="body1">{transactionFee} tBABY</Text>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col gap-4 mb-10">
+          <Heading variant="h6">Attention!</Heading>
+          <Text variant="body2">
+            Processing your claim will take approximately 2 blocks to complete.
+          </Text>
+        </div>
+      </div>
+    </ConfirmationModal>
+  );
+};

src/app/components/Notification/NotificationContainer.tsx

@@ -28,7 +28,7 @@ export const NotificationContainer = () => {
       closeButton={false}
       icon={false}
       hideProgressBar={true}
-      position={isMobileView ? "top-center" : "top-right"}
+      position={isMobileView ? "top-center" : "bottom-center"}
     />
   );
 };

src/app/components/Notification/NotificationText.tsx

@@ -4,8 +4,6 @@ interface Props {
 
 export const NotificationText = ({ children }: Props) => {
   return (
-    <span className="text-sm font-normal dark:text-[#AFAFAF] text-[#303030]">
-      {children}
-    </span>
+    <span className="text-sm font-normal text-primary-dark">{children}</span>
   );
 };

src/app/components/Notification/NotificationTitle.tsx

@@ -4,8 +4,6 @@ interface Props {
 
 export const NotificationTitle = ({ children }: Props) => {
   return (
-    <span className="text-base font-bold dark:text-white text-black">
-      {children}
-    </span>
+    <span className="text-base font-bold text-primary-dark">{children}</span>
   );
 };

src/app/components/PersonalBalance/PersonalBalance.tsx

@@ -1,14 +1,17 @@
 import { Heading } from "@babylonlabs-io/bbn-core-ui";
 import { useQuery } from "@tanstack/react-query";
+import { 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 { notifySuccess } from "@/app/hooks/useNotification";
 import { getNetworkConfig } from "@/config/network.config";
 import { ubbnToBbn } from "@/utils/bbn";
 import { satoshiToBtc } from "@/utils/btc";
 
+import { ClaimRewardModal } from "../Modals/ClaimRewardModal";
 import { StatItem } from "../Stats/StatItem";
 
 const QUERY_KEYS = {
@@ -24,13 +27,21 @@ export function PersonalBalance() {
     connected: btcConnected,
     address,
   } = useBTCWallet();
-  const { connected: cosmosConnected } = useCosmosWallet();
+  const { connected: cosmosConnected, bech32Address } = useCosmosWallet();
 
   const {
     balanceQuery: { data: cosmosBalance, isLoading: cosmosBalanceLoading },
   } = useBbnQuery();
-  const { claimRewards } = useRewardsService();
+  const { claimRewards, estimateClaimRewardsGas } = useRewardsService();
   const { rewardsQuery } = useBbnQuery();
+  const [showClaimRewardModal, setShowClaimRewardModal] = useState(false);
+
+  const claimAction = async () => {
+    setShowClaimRewardModal(false);
+    notifySuccess("Claim Processing", "more info");
+    await claimRewards();
+    notifySuccess("Successfully Claimed tBABY", "more info");
+  };
 
   const { data: btcBalance, isLoading: btcBalanceLoading } = useQuery({
     queryKey: [QUERY_KEYS.BTC_BALANCE],
@@ -42,6 +53,8 @@ export function PersonalBalance() {
     return null;
   }
 
+  const rewardBalance = ubbnToBbn(rewardsQuery.data ?? 0);
+
   return (
     <div className="flex flex-col gap-4 p-1 xl:justify-between mb-12">
       <Heading variant="h4" className="text-primary-dark md:text-4xl">
@@ -77,13 +90,24 @@ export function PersonalBalance() {
         <StatItem
           loading={rewardsQuery.isLoading}
           title="BBN Rewards"
-          value={`${ubbnToBbn(rewardsQuery.data ?? 0)} BBN`}
+          value={`${rewardBalance} BBN`}
           actionComponent={{
             title: "Claim",
-            onAction: claimRewards,
+            onAction: () => setShowClaimRewardModal(true),
+            isDisabled: rewardBalance === 0,
           }}
         />
       </div>
+      {showClaimRewardModal && (
+        <ClaimRewardModal
+          open={showClaimRewardModal}
+          onClose={() => setShowClaimRewardModal(false)}
+          onSubmit={claimAction}
+          receivingValue={`${rewardBalance}`}
+          address={bech32Address}
+          getTransactionFee={estimateClaimRewardsGas}
+        />
+      )}
     </div>
   );
 }

src/app/components/Stats/ActionComponent.tsx

@@ -4,15 +4,22 @@ interface ActionComponentProps {
   title: string;
   onAction: () => void;
   awaitingResponse?: boolean;
+  isDisabled?: boolean;
 }
 
 export function ActionComponent({
   title,
   onAction,
   awaitingResponse,
+  isDisabled,
 }: ActionComponentProps) {
   return (
-    <Button variant="outlined" size="small" onClick={onAction}>
+    <Button
+      variant="outlined"
+      size="small"
+      onClick={onAction}
+      disabled={isDisabled}
+    >
       {awaitingResponse ? <Loader size={16} className="text-white" /> : title}
     </Button>
   );

src/app/components/Stats/StatItem.tsx

@@ -13,6 +13,7 @@ interface StatItemProps {
   actionComponent?: {
     title: string;
     onAction: () => void;
+    isDisabled?: boolean;
   };
 }
 
@@ -60,6 +61,7 @@ export const StatItem = ({
       <ActionComponent
         title={actionComponent.title}
         onAction={actionComponent.onAction}
+        isDisabled={actionComponent.isDisabled}
       />
     ) : null}
   </div>