From 597c2edb494a4c993ffa02994db31bb3af3590f1 Mon Sep 17 00:00:00 2001 From: jeremy-babylonchain Date: Fri, 4 Oct 2024 19:30:10 +0700 Subject: [PATCH] use correct height for unbonding model (#196) * fix: improvement on using the correct height for unbonding model --------- Co-authored-by: wjrjerome --- package-lock.json | 4 +-- package.json | 2 +- .../components/Delegations/Delegations.tsx | 33 +++++-------------- .../components/Modals/UnbondWithdrawModal.tsx | 26 +++++++++++---- src/app/context/api/VersionInfo.tsx | 15 ++++++++- 5 files changed, 44 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index afb67f82..e6bebe45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "simple-staking", - "version": "0.3.4", + "version": "0.3.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "simple-staking", - "version": "0.3.4", + "version": "0.3.5", "dependencies": { "@babylonlabs-io/btc-staking-ts": "0.3.0", "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3", diff --git a/package.json b/package.json index f744a64e..c78586e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simple-staking", - "version": "0.3.4", + "version": "0.3.5", "private": true, "scripts": { "dev": "next dev", diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx index 066cf4c7..ea8dfd21 100644 --- a/src/app/components/Delegations/Delegations.tsx +++ b/src/app/components/Delegations/Delegations.tsx @@ -111,9 +111,6 @@ const DelegationsContent: React.FC = ({ const { showError } = useError(); const { isApiNormal, isGeoBlocked } = useHealthCheck(); const [awaitingWalletResponse, setAwaitingWalletResponse] = useState(false); - const [selectedDelegationHeight, setSelectedDelegationHeight] = useState< - number | undefined - >(); const shouldShowPoints = isApiNormal && !isGeoBlocked && shouldDisplayPoints(); @@ -185,15 +182,13 @@ const DelegationsContent: React.FC = ({ message: error.message, errorState: ErrorState.UNBONDING, }, - retryAction: () => - handleModal(id, MODE_UNBOND, selectedDelegationHeight!), + retryAction: () => handleModal(id, MODE_UNBOND), }); } finally { setModalOpen(false); setTxID(""); setModalMode(undefined); setAwaitingWalletResponse(false); - setSelectedDelegationHeight(undefined); } }; @@ -222,23 +217,20 @@ const DelegationsContent: React.FC = ({ message: error.message, errorState: ErrorState.WITHDRAW, }, - retryAction: () => - handleModal(id, MODE_WITHDRAW, selectedDelegationHeight!), + retryAction: () => handleModal(id, MODE_WITHDRAW), }); } finally { setModalOpen(false); setTxID(""); setModalMode(undefined); setAwaitingWalletResponse(false); - setSelectedDelegationHeight(undefined); } }; - const handleModal = (txID: string, mode: MODE, delegationHeight: number) => { + const handleModal = (txID: string, mode: MODE) => { setModalOpen(true); setTxID(txID); setModalMode(mode); - setSelectedDelegationHeight(delegationHeight); }; useEffect(() => { @@ -344,19 +336,9 @@ const DelegationsContent: React.FC = ({ stakingValueSat={stakingValueSat} stakingTxHash={stakingTxHashHex} state={state} - onUnbond={() => - handleModal( - stakingTxHashHex, - MODE_UNBOND, - stakingTx.startHeight, - ) - } + onUnbond={() => handleModal(stakingTxHashHex, MODE_UNBOND)} onWithdraw={() => - handleModal( - stakingTxHashHex, - MODE_WITHDRAW, - stakingTx.startHeight, - ) + handleModal(stakingTxHashHex, MODE_WITHDRAW) } intermediateState={intermediateDelegation?.state} isOverflow={isOverflow} @@ -368,9 +350,8 @@ const DelegationsContent: React.FC = ({ )} - {modalMode && txID && selectedDelegationHeight !== undefined && ( + {modalMode && txID && ( setModalOpen(false)} onProceed={() => { @@ -380,6 +361,8 @@ const DelegationsContent: React.FC = ({ }} mode={modalMode} awaitingWalletResponse={awaitingWalletResponse} + delegationsAPI={delegationsAPI} + txID={txID} /> )} diff --git a/src/app/components/Modals/UnbondWithdrawModal.tsx b/src/app/components/Modals/UnbondWithdrawModal.tsx index 63aeb715..d418b0f4 100644 --- a/src/app/components/Modals/UnbondWithdrawModal.tsx +++ b/src/app/components/Modals/UnbondWithdrawModal.tsx @@ -1,6 +1,8 @@ +import { useMemo } from "react"; import { IoMdClose } from "react-icons/io"; -import { useVersionInfo } from "@/app/context/api/VersionInfo"; +import { useVersionByHeight } from "@/app/context/api/VersionInfo"; +import { Delegation as DelegationInterface } from "@/app/types/delegations"; import { getNetworkConfig } from "@/config/network.config"; import { blocksToDisplayTime } from "@/utils/blocksToDisplayTime"; import { satoshiToBtc } from "@/utils/btcConversions"; @@ -15,28 +17,38 @@ export const MODE_WITHDRAW = "withdraw"; export type MODE = typeof MODE_UNBOND | typeof MODE_WITHDRAW; interface PreviewModalProps { - delegationHeight: number; open: boolean; onClose: (value: boolean) => void; onProceed: () => void; mode: MODE; awaitingWalletResponse: boolean; + delegationsAPI: DelegationInterface[]; + txID: string; } export const UnbondWithdrawModal: React.FC = ({ - delegationHeight, open, onClose, onProceed, mode, awaitingWalletResponse, + delegationsAPI, + txID, }) => { const { coinName, networkName } = getNetworkConfig(); - const versionInfo = useVersionInfo(); - const globalParams = versionInfo?.currentVersion; - const unbondingFeeSat = globalParams?.unbondingFeeSat || 0; - const unbondingTimeBlocks = globalParams?.unbondingTime || 0; + const delegation = useMemo( + () => + delegationsAPI.find((delegation) => delegation.stakingTxHashHex === txID), + [delegationsAPI, txID], + ); + + const { currentVersion: delegationGlobalParams } = useVersionByHeight( + delegation?.stakingTx?.startHeight ?? 0, + ); + + const unbondingFeeSat = delegationGlobalParams?.unbondingFeeSat ?? 0; + const unbondingTimeBlocks = delegationGlobalParams?.unbondingTime ?? 0; const unbondTitle = "Unbond"; diff --git a/src/app/context/api/VersionInfo.tsx b/src/app/context/api/VersionInfo.tsx index 75a5d1cd..5f0d75d3 100644 --- a/src/app/context/api/VersionInfo.tsx +++ b/src/app/context/api/VersionInfo.tsx @@ -24,6 +24,14 @@ export function useVersionInfo() { return useContext(VersionInfoContext); } +export function useVersionByHeight(height: number) { + const { data: versions } = useVersions(); + return useMemo( + () => getCurrentGlobalParamsVersion(height, versions ?? []), + [versions, height], + ); +} + export function VersionInfoProvider({ children }: PropsWithChildren) { const { data: versions, @@ -45,11 +53,16 @@ export function VersionInfoProvider({ children }: PropsWithChildren) { isLoading: isVersionLoading || isHeightLoading, }; + const currentVersionInfo = getCurrentGlobalParamsVersion( + height + 1, + versions, + ); + return { currentHeight: height, isError: isHeightError || isVersionError, isLoading: isVersionLoading || isHeightLoading, - ...getCurrentGlobalParamsVersion(height + 1, versions), + ...currentVersionInfo, }; }, [ versions,