From a73446bd97668e1958b4b35eedae32326597f459 Mon Sep 17 00:00:00 2001 From: jeremy-babylonchain Date: Sat, 5 Oct 2024 13:50:43 +0700 Subject: [PATCH 1/2] 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 | 54 ++++++++++--------- .../components/Modals/UnbondWithdrawModal.tsx | 13 +++-- src/app/hooks/useVersions.ts | 10 ++++ 5 files changed, 52 insertions(+), 31 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 a3138bc6..ec63ad41 100644 --- a/src/app/components/Delegations/Delegations.tsx +++ b/src/app/components/Delegations/Delegations.tsx @@ -1,5 +1,5 @@ import type { networks } from "bitcoinjs-lib"; -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import InfiniteScroll from "react-infinite-scroll-component"; import { useLocalStorage } from "usehooks-ts"; @@ -104,9 +104,6 @@ const DelegationsContent: React.FC = ({ const { showError } = useError(); const { isApiNormal, isGeoBlocked } = useHealthCheck(); const [awaitingWalletResponse, setAwaitingWalletResponse] = useState(false); - const [selectedDelegationHeight, setSelectedDelegationHeight] = useState< - number | undefined - >(); const { delegations = [], fetchMoreDelegations, @@ -114,6 +111,12 @@ const DelegationsContent: React.FC = ({ isLoading, } = useDelegationState(); + const delegation = useMemo( + () => + delegationsAPI.find((delegation) => delegation.stakingTxHashHex === txID), + [delegationsAPI, txID], + ); + const shouldShowPoints = isApiNormal && !isGeoBlocked && shouldDisplayPoints(); // Local storage state for intermediate delegations (withdrawing, unbonding) @@ -184,15 +187,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); } }; @@ -221,23 +222,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(() => { @@ -285,6 +283,21 @@ const DelegationsContent: React.FC = ({ }); }, [delegationsAPI, setIntermediateDelegationsLocalStorage]); + useEffect(() => { + if (modalOpen && !delegation) { + showError({ + error: { + message: "Delegation not found", + errorState: ErrorState.SERVER_ERROR, + }, + noCancel: false, + }); + setModalOpen(false); + setTxID(""); + setModalMode(undefined); + } + }, [modalOpen, delegation, showError]); + // combine delegations from the API and local storage, prioritizing API data const combinedDelegationsData = delegationsAPI ? [...delegations, ...delegationsAPI] @@ -343,19 +356,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} @@ -367,7 +370,7 @@ const DelegationsContent: React.FC = ({ )} - {modalMode && txID && ( + {modalMode && txID && delegation && ( setModalOpen(false)} @@ -378,6 +381,7 @@ const DelegationsContent: React.FC = ({ }} mode={modalMode} awaitingWalletResponse={awaitingWalletResponse} + delegation={delegation} /> )} diff --git a/src/app/components/Modals/UnbondWithdrawModal.tsx b/src/app/components/Modals/UnbondWithdrawModal.tsx index dd5f2632..499a62e4 100644 --- a/src/app/components/Modals/UnbondWithdrawModal.tsx +++ b/src/app/components/Modals/UnbondWithdrawModal.tsx @@ -1,6 +1,7 @@ import { IoMdClose } from "react-icons/io"; import { useAppState } from "@/app/state"; +import { Delegation as DelegationInterface } from "@/app/types/delegations"; import { getNetworkConfig } from "@/config/network.config"; import { blocksToDisplayTime } from "@/utils/blocksToDisplayTime"; import { satoshiToBtc } from "@/utils/btcConversions"; @@ -9,6 +10,7 @@ import { maxDecimals } from "@/utils/maxDecimals"; import { LoadingView } from "../Loading/Loading"; import { GeneralModal } from "./GeneralModal"; +import { useVersionByHeight } from "@/app/hooks/useVersions"; export const MODE_UNBOND = "unbond"; export const MODE_WITHDRAW = "withdraw"; @@ -20,6 +22,7 @@ interface PreviewModalProps { onProceed: () => void; mode: MODE; awaitingWalletResponse: boolean; + delegation: DelegationInterface; } export const UnbondWithdrawModal: React.FC = ({ @@ -28,12 +31,16 @@ export const UnbondWithdrawModal: React.FC = ({ onProceed, mode, awaitingWalletResponse, + delegation, }) => { const { coinName, networkName } = getNetworkConfig(); - const { currentVersion: globalParams } = useAppState(); - const unbondingFeeSat = globalParams?.unbondingFeeSat || 0; - const unbondingTimeBlocks = globalParams?.unbondingTime || 0; + 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/hooks/useVersions.ts b/src/app/hooks/useVersions.ts index a1893072..6afff6f2 100644 --- a/src/app/hooks/useVersions.ts +++ b/src/app/hooks/useVersions.ts @@ -1,5 +1,7 @@ import { getGlobalParams } from "@/app/api/getGlobalParams"; import { useAPIQuery } from "@/app/hooks/useApi"; +import { getCurrentGlobalParamsVersion } from "@/utils/globalParams"; +import { useMemo } from "react"; export const VERSIONS_KEY = "VERSIONS"; @@ -12,3 +14,11 @@ export function useVersions({ enabled = true }: { enabled?: boolean } = {}) { return data; } + +export function useVersionByHeight(height: number) { + const { data: versions } = useVersions(); + return useMemo( + () => getCurrentGlobalParamsVersion(height, versions ?? []), + [versions, height], + ); +} \ No newline at end of file From 55caf93d672feaa05651f57d512cca55a47e0644 Mon Sep 17 00:00:00 2001 From: jeremy-babylonchain Date: Sun, 6 Oct 2024 19:11:18 +0700 Subject: [PATCH 2/2] fix format --- src/app/components/Modals/UnbondWithdrawModal.tsx | 3 +-- src/app/hooks/useVersions.ts | 5 +++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/components/Modals/UnbondWithdrawModal.tsx b/src/app/components/Modals/UnbondWithdrawModal.tsx index 499a62e4..e4069f03 100644 --- a/src/app/components/Modals/UnbondWithdrawModal.tsx +++ b/src/app/components/Modals/UnbondWithdrawModal.tsx @@ -1,6 +1,6 @@ import { IoMdClose } from "react-icons/io"; -import { useAppState } from "@/app/state"; +import { useVersionByHeight } from "@/app/hooks/useVersions"; import { Delegation as DelegationInterface } from "@/app/types/delegations"; import { getNetworkConfig } from "@/config/network.config"; import { blocksToDisplayTime } from "@/utils/blocksToDisplayTime"; @@ -10,7 +10,6 @@ import { maxDecimals } from "@/utils/maxDecimals"; import { LoadingView } from "../Loading/Loading"; import { GeneralModal } from "./GeneralModal"; -import { useVersionByHeight } from "@/app/hooks/useVersions"; export const MODE_UNBOND = "unbond"; export const MODE_WITHDRAW = "withdraw"; diff --git a/src/app/hooks/useVersions.ts b/src/app/hooks/useVersions.ts index 6afff6f2..f1f812b3 100644 --- a/src/app/hooks/useVersions.ts +++ b/src/app/hooks/useVersions.ts @@ -1,7 +1,8 @@ +import { useMemo } from "react"; + import { getGlobalParams } from "@/app/api/getGlobalParams"; import { useAPIQuery } from "@/app/hooks/useApi"; import { getCurrentGlobalParamsVersion } from "@/utils/globalParams"; -import { useMemo } from "react"; export const VERSIONS_KEY = "VERSIONS"; @@ -21,4 +22,4 @@ export function useVersionByHeight(height: number) { () => getCurrentGlobalParamsVersion(height, versions ?? []), [versions, height], ); -} \ No newline at end of file +}