feat: refactor global params (#182)

* feat: refactor global params * fix: version info data for loading state * fix: small review issues * fix: review issues
babylonlabs-io · Oct 4, 2024 · 2b54b34 · 2b54b34
1 parent db2478a
commit 2b54b34
Show file tree

Hide file tree

Showing 15 changed files with 214 additions and 221 deletions.
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,10 +1,9 @@
 import { IoMdClose } from "react-icons/io";
 
-import { useGlobalParams } from "@/app/context/api/GlobalParamsProvider";
+import { useVersionInfo } from "@/app/context/api/VersionInfo";
 import { getNetworkConfig } from "@/config/network.config";
 import { blocksToDisplayTime } from "@/utils/blocksToDisplayTime";
 import { satoshiToBtc } from "@/utils/btcConversions";
-import { getCurrentGlobalParamsVersion } from "@/utils/globalParams";
 import { maxDecimals } from "@/utils/maxDecimals";
 
 import { LoadingView } from "../Loading/Loading";
@@ -33,17 +32,9 @@ export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
   awaitingWalletResponse,
 }) => {
   const { coinName, networkName } = getNetworkConfig();
-  const { data: allGlobalParamsVersions } = useGlobalParams();
+  const versionInfo = useVersionInfo();
 
-  const getGlobalParamsForDelegation = (startHeight: number) => {
-    const { currentVersion } = getCurrentGlobalParamsVersion(
-      startHeight,
-      allGlobalParamsVersions || [],
-    );
-    return currentVersion;
-  };
-
-  const globalParams = getGlobalParamsForDelegation(delegationHeight);
+  const globalParams = versionInfo?.currentVersion;
   const unbondingFeeSat = globalParams?.unbondingFeeSat || 0;
   const unbondingTimeBlocks = globalParams?.unbondingTime || 0;
 

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,26 +129,13 @@ 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 } = paramWithCtx.currentVersion;
+    const { stakingCapHeight, stakingCapSat } = versionInfo.currentVersion;
     // Use height based cap than value based cap if it is set
     if (stakingCapHeight) {
       setOverflow({
@@ -178,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 &&
@@ -251,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,
@@ -341,7 +323,7 @@ export const Staking: React.FC<StakingProps> = ({
       publicKeyNoCoord &&
       stakingAmountSat &&
       finalityProvider &&
-      paramWithCtx?.currentVersion &&
+      versionInfo?.currentVersion &&
       mempoolFeeRates &&
       availableUTXOs
     ) {
@@ -353,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,
@@ -395,7 +377,7 @@ export const Staking: React.FC<StakingProps> = ({
     stakingAmountSat,
     stakingTimeBlocks,
     finalityProvider,
-    paramWithCtx,
+    versionInfo,
     mempoolFeeRates,
     selectedFeeRate,
     availableUTXOs,

diff --git a/src/app/components/Stats/Stats.tsx b/src/app/components/Stats/Stats.tsx
@@ -1,21 +1,17 @@
 import Image from "next/image";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useMemo, useState } from "react";
 import { AiOutlineInfoCircle } from "react-icons/ai";
 import { Tooltip } from "react-tooltip";
 
-import { useGlobalParams } from "@/app/context/api/GlobalParamsProvider";
 import {
   StakingStats,
   useStakingStats,
 } from "@/app/context/api/StakingStatsProvider";
-import { useBtcHeight } from "@/app/context/mempool/BtcHeightProvider";
+import { useVersionInfo } from "@/app/context/api/VersionInfo";
 import { GlobalParamsVersion } from "@/app/types/globalParams";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btcConversions";
-import {
-  ParamsWithContext,
-  getCurrentGlobalParamsVersion,
-} from "@/utils/globalParams";
+import { ParamsWithContext } from "@/utils/globalParams";
 import { maxDecimals } from "@/utils/maxDecimals";
 
 import confirmedTvl from "./icons/confirmed-tvl.svg";
@@ -83,17 +79,9 @@ export const Stats: React.FC = () => {
     totalStakers: 0,
     unconfirmedTVLSat: 0,
   });
-  const [stakingCapText, setStakingCapText] = useState<{
-    title: string;
-    value: string;
-  }>({
-    title: "Staking TVL Cap",
-    value: "-",
-  });
   const [isLoading, setIsLoading] = useState(true);
   const stakingStatsProvider = useStakingStats();
-  const btcHeight = useBtcHeight();
-  const globalParams = useGlobalParams();
+  const versionInfo = useVersionInfo();
 
   const { coinName } = getNetworkConfig();
 
@@ -102,23 +90,32 @@ export const Stats: React.FC = () => {
     if (stakingStatsProvider.data) {
       setStakingStats(stakingStatsProvider.data);
     }
-    setIsLoading(stakingStatsProvider.isLoading || globalParams.isLoading);
-  }, [stakingStatsProvider, globalParams]);
+    setIsLoading(
+      stakingStatsProvider.isLoading || Boolean(versionInfo?.isLoading),
+    );
+  }, [stakingStatsProvider, versionInfo?.isLoading]);
 
-  useEffect(() => {
-    if (!btcHeight || !globalParams.data) {
-      return;
+  const stakingCapText = useMemo(() => {
+    if (!versionInfo?.currentHeight) {
+      return {
+        title: "Staking TVL Cap",
+        value: "-",
+      };
     }
-    const paramsWithCtx = getCurrentGlobalParamsVersion(
-      btcHeight + 1,
-      globalParams.data,
+
+    const cap = buildStakingCapSection(
+      coinName,
+      versionInfo.currentHeight,
+      versionInfo,
     );
-    if (!paramsWithCtx) {
-      return;
-    }
-    const cap = buildStakingCapSection(coinName, btcHeight, paramsWithCtx);
-    if (cap) setStakingCapText(cap);
-  }, [globalParams, btcHeight, stakingStats, coinName]);
+
+    return (
+      cap ?? {
+        title: "Staking TVL Cap",
+        value: "-",
+      }
+    );
+  }, [coinName, versionInfo]);
 
   const formatter = Intl.NumberFormat("en", {
     notation: "compact",

diff --git a/src/app/components/Summary/Summary.tsx b/src/app/components/Summary/Summary.tsx
@@ -1,18 +1,12 @@
-import { useEffect, useState } from "react";
 import { AiOutlineInfoCircle } from "react-icons/ai";
 import { FaBitcoin } from "react-icons/fa";
 import { Tooltip } from "react-tooltip";
 
-import { useGlobalParams } from "@/app/context/api/GlobalParamsProvider";
-import { useBtcHeight } from "@/app/context/mempool/BtcHeightProvider";
+import { useVersionInfo } from "@/app/context/api/VersionInfo";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { shouldDisplayPoints } from "@/config";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btcConversions";
-import {
-  getCurrentGlobalParamsVersion,
-  ParamsWithContext,
-} from "@/utils/globalParams";
 import { maxDecimals } from "@/utils/maxDecimals";
 import { Network } from "@/utils/wallet/wallet_provider";
 
@@ -32,26 +26,11 @@ export const Summary: React.FC<SummaryProps> = ({
   btcWalletBalanceSat,
   publicKeyNoCoord,
 }) => {
-  const { coinName } = getNetworkConfig();
-  const onMainnet = getNetworkConfig().network === Network.MAINNET;
-  const [paramWithCtx, setParamWithCtx] = useState<
-    ParamsWithContext | undefined
-  >();
-
-  const btcHeight = useBtcHeight();
-  const globalParams = useGlobalParams();
   const { isApiNormal, isGeoBlocked } = useHealthCheck();
+  const versionInfo = useVersionInfo();
 
-  useEffect(() => {
-    if (!btcHeight || !globalParams.data) {
-      return;
-    }
-    const paramCtx = getCurrentGlobalParamsVersion(
-      btcHeight + 1,
-      globalParams.data,
-    );
-    setParamWithCtx(paramCtx);
-  }, [btcHeight, globalParams]);
+  const { coinName } = getNetworkConfig();
+  const onMainnet = getNetworkConfig().network === Network.MAINNET;
 
   return (
     <div className="card flex flex-col gap-2 bg-base-300 p-4 shadow-sm xl:gap-4">
@@ -65,7 +44,7 @@ export const Summary: React.FC<SummaryProps> = ({
                 <span
                   className="cursor-pointer text-xs"
                   data-tooltip-id="tooltip-total-staked"
-                  data-tooltip-content={`Total staked is updated after ${paramWithCtx?.currentVersion?.confirmationDepth || 10} confirmations`}
+                  data-tooltip-content={`Total staked is updated after ${versionInfo?.currentVersion?.confirmationDepth || 10} confirmations`}
                   data-tooltip-place="bottom"
                 >
                   <AiOutlineInfoCircle />

diff --git a/src/app/constants.ts b/src/app/constants.ts
@@ -0,0 +1,2 @@
+export const ONE_SECOND = 1000;
+export const ONE_MINUTE = 60 * ONE_SECOND;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const ONE_SECOND = 1000;
		export const ONE_MINUTE = 60 * ONE_SECOND;