Sync from dev to phase-2 (#199)

babylonlabs-io · Oct 4, 2024 · 6243d42 · 6243d42
2 parents 646d7d2 + 2b54b34
commit 6243d42
Show file tree

Hide file tree

Showing 20 changed files with 259 additions and 239 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx
@@ -111,6 +111,9 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
   const { showError } = useError();
   const { isApiNormal, isGeoBlocked } = useHealthCheck();
   const [awaitingWalletResponse, setAwaitingWalletResponse] = useState(false);
+  const [selectedDelegationHeight, setSelectedDelegationHeight] = useState<
+    number | undefined
+  >();
 
   const shouldShowPoints =
     isApiNormal && !isGeoBlocked && shouldDisplayPoints();
@@ -182,13 +185,15 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
           message: error.message,
           errorState: ErrorState.UNBONDING,
         },
-        retryAction: () => handleModal(id, MODE_UNBOND),
+        retryAction: () =>
+          handleModal(id, MODE_UNBOND, selectedDelegationHeight!),
       });
     } finally {
       setModalOpen(false);
       setTxID("");
       setModalMode(undefined);
       setAwaitingWalletResponse(false);
+      setSelectedDelegationHeight(undefined);
     }
   };
 
@@ -217,20 +222,23 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
           message: error.message,
           errorState: ErrorState.WITHDRAW,
         },
-        retryAction: () => handleModal(id, MODE_WITHDRAW),
+        retryAction: () =>
+          handleModal(id, MODE_WITHDRAW, selectedDelegationHeight!),
       });
     } finally {
       setModalOpen(false);
       setTxID("");
       setModalMode(undefined);
       setAwaitingWalletResponse(false);
+      setSelectedDelegationHeight(undefined);
     }
   };
 
-  const handleModal = (txID: string, mode: MODE) => {
+  const handleModal = (txID: string, mode: MODE, delegationHeight: number) => {
     setModalOpen(true);
     setTxID(txID);
     setModalMode(mode);
+    setSelectedDelegationHeight(delegationHeight);
   };
 
   useEffect(() => {
@@ -336,9 +344,19 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
                     stakingValueSat={stakingValueSat}
                     stakingTxHash={stakingTxHashHex}
                     state={state}
-                    onUnbond={() => handleModal(stakingTxHashHex, MODE_UNBOND)}
+                    onUnbond={() =>
+                      handleModal(
+                        stakingTxHashHex,
+                        MODE_UNBOND,
+                        stakingTx.startHeight,
+                      )
+                    }
                     onWithdraw={() =>
-                      handleModal(stakingTxHashHex, MODE_WITHDRAW)
+                      handleModal(
+                        stakingTxHashHex,
+                        MODE_WITHDRAW,
+                        stakingTx.startHeight,
+                      )
                     }
                     intermediateState={intermediateDelegation?.state}
                     isOverflow={isOverflow}
@@ -350,11 +368,9 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
           </div>
         </>
       )}
-
-      {modalMode && txID && (
+      {modalMode && txID && selectedDelegationHeight !== undefined && (
         <UnbondWithdrawModal
-          unbondingTimeBlocks={globalParamsVersion.unbondingTime}
-          unbondingFeeSat={globalParamsVersion.unbondingFeeSat}
+          delegationHeight={selectedDelegationHeight}
           open={modalOpen}
           onClose={() => setModalOpen(false)}
           onProceed={() => {

diff --git a/src/app/components/FAQ/FAQ.tsx b/src/app/components/FAQ/FAQ.tsx
@@ -1,39 +1,14 @@
-import { useEffect, useState } from "react";
-
-import { useGlobalParams } from "@/app/context/api/GlobalParamsProvider";
-import { useBtcHeight } from "@/app/context/mempool/BtcHeightProvider";
+import { useVersionInfo } from "@/app/context/api/VersionInfo";
 import { getNetworkConfig } from "@/config/network.config";
-import {
-  getCurrentGlobalParamsVersion,
-  ParamsWithContext,
-} from "@/utils/globalParams";
 
 import { questions } from "./data/questions";
 import { Section } from "./Section";
 
 interface FAQProps {}
 
 export const FAQ: React.FC<FAQProps> = () => {
-  const [paramWithCtx, setParamWithCtx] = useState<
-    ParamsWithContext | undefined
-  >();
   const { coinName, networkName } = getNetworkConfig();
-  const btcHeight = useBtcHeight();
-  const globalParams = useGlobalParams();
-
-  useEffect(() => {
-    if (!btcHeight || !globalParams.data) {
-      return;
-    }
-    const paramsWithCtx = getCurrentGlobalParamsVersion(
-      btcHeight + 1,
-      globalParams.data,
-    );
-    if (!paramsWithCtx) {
-      return;
-    }
-    setParamWithCtx(paramsWithCtx);
-  }, [globalParams, btcHeight]);
+  const versionInfo = useVersionInfo();
 
   return (
     <div className="container mx-auto flex flex-col gap-2 p-6">
@@ -42,7 +17,7 @@ export const FAQ: React.FC<FAQProps> = () => {
         {questions(
           coinName,
           networkName,
-          paramWithCtx?.currentVersion?.confirmationDepth,
+          versionInfo?.currentVersion?.confirmationDepth,
         ).map((question) => (
           <Section
             key={question.title}

diff --git a/src/app/components/Modals/UnbondWithdrawModal.tsx b/src/app/components/Modals/UnbondWithdrawModal.tsx
@@ -1,5 +1,6 @@
 import { IoMdClose } from "react-icons/io";
 
+import { useVersionInfo } from "@/app/context/api/VersionInfo";
 import { getNetworkConfig } from "@/config/network.config";
 import { blocksToDisplayTime } from "@/utils/blocksToDisplayTime";
 import { satoshiToBtc } from "@/utils/btcConversions";
@@ -14,8 +15,7 @@ export const MODE_WITHDRAW = "withdraw";
 export type MODE = typeof MODE_UNBOND | typeof MODE_WITHDRAW;
 
 interface PreviewModalProps {
-  unbondingTimeBlocks: number;
-  unbondingFeeSat: number;
+  delegationHeight: number;
   open: boolean;
   onClose: (value: boolean) => void;
   onProceed: () => void;
@@ -24,15 +24,19 @@ interface PreviewModalProps {
 }
 
 export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
-  unbondingTimeBlocks,
-  unbondingFeeSat,
+  delegationHeight,
   open,
   onClose,
   onProceed,
   mode,
   awaitingWalletResponse,
 }) => {
   const { coinName, networkName } = getNetworkConfig();
+  const versionInfo = useVersionInfo();
+
+  const globalParams = versionInfo?.currentVersion;
+  const unbondingFeeSat = globalParams?.unbondingFeeSat || 0;
+  const unbondingTimeBlocks = globalParams?.unbondingTime || 0;
 
   const unbondTitle = "Unbond";
 

diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
@@ -11,8 +11,8 @@ import {
 } from "@/app/common/constants";
 import { LoadingView } from "@/app/components/Loading/Loading";
 import { useError } from "@/app/context/Error/ErrorContext";
-import { useGlobalParams } from "@/app/context/api/GlobalParamsProvider";
 import { useStakingStats } from "@/app/context/api/StakingStatsProvider";
+import { useVersionInfo } from "@/app/context/api/VersionInfo";
 import { useWallet } from "@/app/context/wallet/WalletProvider";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { Delegation } from "@/app/types/delegations";
@@ -27,10 +27,6 @@ import {
   signStakingTx,
 } from "@/utils/delegations/signStakingTx";
 import { getFeeRateFromMempool } from "@/utils/getFeeRateFromMempool";
-import {
-  getCurrentGlobalParamsVersion,
-  ParamsWithContext,
-} from "@/utils/globalParams";
 import { isStakingSignReady } from "@/utils/isStakingSignReady";
 import { toLocalStorageDelegation } from "@/utils/local_storage/toLocalStorageDelegation";
 import type { UTXO } from "@/utils/wallet/wallet_provider";
@@ -101,15 +97,14 @@ export const Staking: React.FC<StakingProps> = ({
     useLocalStorage<boolean>("bbn-staking-successFeedbackModalOpened", false);
   const [cancelFeedbackModalOpened, setCancelFeedbackModalOpened] =
     useLocalStorage<boolean>("bbn-staking-cancelFeedbackModalOpened ", false);
-  const [paramWithCtx, setParamWithCtx] = useState<
-    ParamsWithContext | undefined
-  >();
   const [overflow, setOverflow] = useState<OverflowProperties>({
     isHeightCap: false,
     overTheCapRange: false,
     approchingCapRange: false,
   });
 
+  const versionInfo = useVersionInfo();
+
   // Mempool fee rates, comes from the network
   // Fetch fee rates, sat/vB
   const {
@@ -134,33 +129,18 @@ export const Staking: React.FC<StakingProps> = ({
 
   const stakingStats = useStakingStats();
 
-  // load global params and calculate the current staking params
-  const globalParams = useGlobalParams();
-  useEffect(() => {
-    if (!btcHeight || !globalParams.data) {
-      return;
-    }
-    const paramCtx = getCurrentGlobalParamsVersion(
-      btcHeight + 1,
-      globalParams.data,
-    );
-    setParamWithCtx(paramCtx);
-  }, [btcHeight, globalParams]);
-
   // Calculate the overflow properties
   useEffect(() => {
-    if (!paramWithCtx || !paramWithCtx.currentVersion || !btcHeight) {
+    if (!versionInfo?.currentVersion || !btcHeight) {
       return;
     }
     const nextBlockHeight = btcHeight + 1;
-    const { stakingCapHeight, stakingCapSat, confirmationDepth } =
-      paramWithCtx.currentVersion;
+    const { stakingCapHeight, stakingCapSat } = versionInfo.currentVersion;
     // Use height based cap than value based cap if it is set
     if (stakingCapHeight) {
       setOverflow({
         isHeightCap: true,
-        overTheCapRange:
-          nextBlockHeight >= stakingCapHeight + confirmationDepth,
+        overTheCapRange: nextBlockHeight > stakingCapHeight,
         /*
           When btc height is approching the staking cap height,
           there is higher chance of overflow due to tx not being included in the next few blocks on time
@@ -180,12 +160,12 @@ export const Staking: React.FC<StakingProps> = ({
           stakingCapSat * OVERFLOW_TVL_WARNING_THRESHOLD < unconfirmedTVLSat,
       });
     }
-  }, [paramWithCtx, btcHeight, stakingStats]);
+  }, [versionInfo, btcHeight, stakingStats]);
 
   const { coinName } = getNetworkConfig();
-  const stakingParams = paramWithCtx?.currentVersion;
-  const firstActivationHeight = paramWithCtx?.firstActivationHeight;
-  const isUpgrading = paramWithCtx?.isApprochingNextVersion;
+  const stakingParams = versionInfo?.currentVersion;
+  const firstActivationHeight = versionInfo?.firstActivationHeight;
+  const isUpgrading = versionInfo?.isApprochingNextVersion;
   const isBlockHeightUnderActivation =
     !stakingParams ||
     (btcHeight &&
@@ -253,13 +233,13 @@ export const Staking: React.FC<StakingProps> = ({
       if (!btcWalletNetwork) throw new Error("Wallet network is not connected");
       if (!finalityProvider)
         throw new Error("Finality provider is not selected");
-      if (!paramWithCtx || !paramWithCtx.currentVersion)
+      if (!versionInfo?.currentVersion)
         throw new Error("Global params not loaded");
       if (!feeRate) throw new Error("Fee rates not loaded");
       if (!availableUTXOs || availableUTXOs.length === 0)
         throw new Error("No available balance");
 
-      const { currentVersion: globalParamsVersion } = paramWithCtx;
+      const { currentVersion: globalParamsVersion } = versionInfo;
       // Sign the staking transaction
       const { stakingTxHex, stakingTerm } = await signStakingTx(
         btcWallet,
@@ -343,7 +323,7 @@ export const Staking: React.FC<StakingProps> = ({
       publicKeyNoCoord &&
       stakingAmountSat &&
       finalityProvider &&
-      paramWithCtx?.currentVersion &&
+      versionInfo?.currentVersion &&
       mempoolFeeRates &&
       availableUTXOs
     ) {
@@ -355,7 +335,7 @@ export const Staking: React.FC<StakingProps> = ({
         const memoizedFeeRate = selectedFeeRate || defaultFeeRate;
         // Calculate the staking fee
         const { stakingFeeSat } = createStakingTx(
-          paramWithCtx.currentVersion,
+          versionInfo.currentVersion,
           stakingAmountSat,
           stakingTimeBlocks,
           finalityProvider.btcPk,
@@ -397,7 +377,7 @@ export const Staking: React.FC<StakingProps> = ({
     stakingAmountSat,
     stakingTimeBlocks,
     finalityProvider,
-    paramWithCtx,
+    versionInfo,
     mempoolFeeRates,
     selectedFeeRate,
     availableUTXOs,