From eb4276050c53983e9546435e6cb070300f105cf1 Mon Sep 17 00:00:00 2001 From: Tong Li Date: Sun, 22 Dec 2024 16:29:40 +1100 Subject: [PATCH 1/2] add claim reward modal --- .../components/Modals/ClaimRewardModal.tsx | 58 +++++++++++++++++++ .../Notification/NotificationContainer.tsx | 2 +- .../Notification/NotificationText.tsx | 4 +- .../Notification/NotificationTitle.tsx | 4 +- .../PersonalBalance/PersonalBalance.tsx | 21 ++++++- 5 files changed, 81 insertions(+), 8 deletions(-) create mode 100644 src/app/components/Modals/ClaimRewardModal.tsx diff --git a/src/app/components/Modals/ClaimRewardModal.tsx b/src/app/components/Modals/ClaimRewardModal.tsx new file mode 100644 index 00000000..4591512f --- /dev/null +++ b/src/app/components/Modals/ClaimRewardModal.tsx @@ -0,0 +1,58 @@ +import { Heading, Text } from "@babylonlabs-io/bbn-core-ui"; +import { PropsWithChildren } from "react"; + +import { ConfirmationModal } from "./ConfirmationModal"; + +interface ConfirmationModalProps { + open: boolean; + onClose: () => void; + onSubmit: () => void; + receivingValue: string; + address: string; + transactionFee: string; +} + +export const ClaimRewardModal = ({ + open, + onClose, + onSubmit, + receivingValue, + address, + transactionFee, +}: PropsWithChildren) => { + return ( + +
+
+
+ + Receiving + + {receivingValue} tBABY +
+ +
+ Babylon Test ChainAddress + {address} +
+
+ Transaction Fees + {transactionFee} tBABY +
+
+
+ Attension! + + Processing your claim will take approximately 2 blocks to complete. + +
+
+ + ); +}; diff --git a/src/app/components/Notification/NotificationContainer.tsx b/src/app/components/Notification/NotificationContainer.tsx index 9b19ee24..f35345b7 100644 --- a/src/app/components/Notification/NotificationContainer.tsx +++ b/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"} /> ); }; diff --git a/src/app/components/Notification/NotificationText.tsx b/src/app/components/Notification/NotificationText.tsx index 5c8e1908..a97bffdb 100644 --- a/src/app/components/Notification/NotificationText.tsx +++ b/src/app/components/Notification/NotificationText.tsx @@ -4,8 +4,6 @@ interface Props { export const NotificationText = ({ children }: Props) => { return ( - - {children} - + {children} ); }; diff --git a/src/app/components/Notification/NotificationTitle.tsx b/src/app/components/Notification/NotificationTitle.tsx index 206751cf..c9fce915 100644 --- a/src/app/components/Notification/NotificationTitle.tsx +++ b/src/app/components/Notification/NotificationTitle.tsx @@ -4,8 +4,6 @@ interface Props { export const NotificationTitle = ({ children }: Props) => { return ( - - {children} - + {children} ); }; diff --git a/src/app/components/PersonalBalance/PersonalBalance.tsx b/src/app/components/PersonalBalance/PersonalBalance.tsx index bdfb22c1..bf5d2296 100644 --- a/src/app/components/PersonalBalance/PersonalBalance.tsx +++ b/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 = { @@ -31,6 +34,14 @@ export function PersonalBalance() { } = useBbnQuery(); const { claimRewards } = 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], @@ -80,10 +91,18 @@ export function PersonalBalance() { value={`${ubbnToBbn(rewardsQuery.data ?? 0)} BBN`} actionComponent={{ title: "Claim", - onAction: claimRewards, + onAction: () => setShowClaimRewardModal(true), }} /> + setShowClaimRewardModal(false)} + onSubmit={claimAction} + receivingValue={`${ubbnToBbn(rewardsQuery.data ?? 0)}`} + address="(placeholder)bbn170...e9m94d" + transactionFee="(placeholder)0.050" + /> ); } From 5e0ca51f72a38c1f1a4a17e6c965a3d10dfc3b4d Mon Sep 17 00:00:00 2001 From: wjrjerome Date: Mon, 23 Dec 2024 13:31:47 +1100 Subject: [PATCH 2/2] disable reward button if nothing to claim and hook up with real wallet data --- .../components/Modals/ClaimRewardModal.tsx | 26 ++++++++++++++---- .../PersonalBalance/PersonalBalance.tsx | 27 +++++++++++-------- src/app/components/Stats/ActionComponent.tsx | 9 ++++++- src/app/components/Stats/StatItem.tsx | 2 ++ 4 files changed, 47 insertions(+), 17 deletions(-) diff --git a/src/app/components/Modals/ClaimRewardModal.tsx b/src/app/components/Modals/ClaimRewardModal.tsx index 4591512f..f9f2f52a 100644 --- a/src/app/components/Modals/ClaimRewardModal.tsx +++ b/src/app/components/Modals/ClaimRewardModal.tsx @@ -1,5 +1,7 @@ import { Heading, Text } from "@babylonlabs-io/bbn-core-ui"; -import { PropsWithChildren } from "react"; +import { PropsWithChildren, useEffect, useState } from "react"; + +import { LoadingSmall } from "../Loading/Loading"; import { ConfirmationModal } from "./ConfirmationModal"; @@ -9,7 +11,7 @@ interface ConfirmationModalProps { onSubmit: () => void; receivingValue: string; address: string; - transactionFee: string; + getTransactionFee: () => Promise; } export const ClaimRewardModal = ({ @@ -18,8 +20,18 @@ export const ClaimRewardModal = ({ onSubmit, receivingValue, address, - transactionFee, + getTransactionFee, }: PropsWithChildren) => { + const [transactionFee, setTransactionFee] = useState(0); + + useEffect(() => { + const fetchTransactionFee = async () => { + const fee = await getTransactionFee(); + setTransactionFee(fee); + }; + fetchTransactionFee(); + }, [getTransactionFee]); + return (
Transaction Fees - {transactionFee} tBABY + {transactionFee === 0 ? ( + + ) : ( + {transactionFee} tBABY + )}
- Attension! + Attention! Processing your claim will take approximately 2 blocks to complete. diff --git a/src/app/components/PersonalBalance/PersonalBalance.tsx b/src/app/components/PersonalBalance/PersonalBalance.tsx index bf5d2296..992b601a 100644 --- a/src/app/components/PersonalBalance/PersonalBalance.tsx +++ b/src/app/components/PersonalBalance/PersonalBalance.tsx @@ -27,12 +27,12 @@ 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); @@ -53,6 +53,8 @@ export function PersonalBalance() { return null; } + const rewardBalance = ubbnToBbn(rewardsQuery.data ?? 0); + return (
@@ -88,21 +90,24 @@ export function PersonalBalance() { setShowClaimRewardModal(true), + isDisabled: rewardBalance === 0, }} />
- setShowClaimRewardModal(false)} - onSubmit={claimAction} - receivingValue={`${ubbnToBbn(rewardsQuery.data ?? 0)}`} - address="(placeholder)bbn170...e9m94d" - transactionFee="(placeholder)0.050" - /> + {showClaimRewardModal && ( + setShowClaimRewardModal(false)} + onSubmit={claimAction} + receivingValue={`${rewardBalance}`} + address={bech32Address} + getTransactionFee={estimateClaimRewardsGas} + /> + )}
); } diff --git a/src/app/components/Stats/ActionComponent.tsx b/src/app/components/Stats/ActionComponent.tsx index 11042543..2e90707f 100644 --- a/src/app/components/Stats/ActionComponent.tsx +++ b/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 ( - ); diff --git a/src/app/components/Stats/StatItem.tsx b/src/app/components/Stats/StatItem.tsx index ba3c2e02..82e40d2d 100644 --- a/src/app/components/Stats/StatItem.tsx +++ b/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 = ({ ) : null}