feat: refactor global params

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/VarsionInfo";
 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}

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/VarsionInfo";
 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,27 +129,14 @@ 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;
+      versionInfo.currentVersion;
     // Use height based cap than value based cap if it is set
     if (stakingCapHeight) {
       setOverflow({
@@ -180,12 +162,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 +235,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 +325,7 @@ export const Staking: React.FC<StakingProps> = ({
       publicKeyNoCoord &&
       stakingAmountSat &&
       finalityProvider &&
-      paramWithCtx?.currentVersion &&
+      versionInfo?.currentVersion &&
       mempoolFeeRates &&
       availableUTXOs
     ) {
@@ -355,7 +337,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 +379,7 @@ export const Staking: React.FC<StakingProps> = ({
     stakingAmountSat,
     stakingTimeBlocks,
     finalityProvider,
-    paramWithCtx,
+    versionInfo,
     mempoolFeeRates,
     selectedFeeRate,
     availableUTXOs,

src/app/components/Stats/Stats.tsx

@@ -1,5 +1,5 @@
 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";
 
@@ -8,14 +8,11 @@ import {
   StakingStats,
   useStakingStats,
 } from "@/app/context/api/StakingStatsProvider";
-import { useBtcHeight } from "@/app/context/mempool/BtcHeightProvider";
+import { useVersionInfo } from "@/app/context/api/VarsionInfo";
 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,16 +80,8 @@ 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 { coinName } = getNetworkConfig();
@@ -105,20 +94,29 @@ export const Stats: React.FC = () => {
     setIsLoading(stakingStatsProvider.isLoading || globalParams.isLoading);
   }, [stakingStatsProvider, globalParams]);
 
-  useEffect(() => {
-    if (!btcHeight || !globalParams.data) {
-      return;
+  const versionInfo = useVersionInfo();
+
+  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",

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/VarsionInfo";
 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 />

src/app/constants.ts

@@ -0,0 +1,2 @@
+export const ONE_SECOND = 1000;
+export const ONE_MINUTE = 60 * ONE_SECOND;

src/app/context/api/VarsionInfo.tsx

@@ -0,0 +1,62 @@
+import { createContext, PropsWithChildren, useContext, useMemo } from "react";
+
+import { useBTCTipHeight } from "@/app/hooks/useBTCTipHeight";
+import { useVersions } from "@/app/hooks/useVersions";
+import type { GlobalParamsVersion } from "@/app/types/globalParams";
+import { getCurrentGlobalParamsVersion } from "@/utils/globalParams";
+
+interface VersionInfoProps {
+  currentVersion?: GlobalParamsVersion;
+  currentHeight?: number;
+  nextVersion?: GlobalParamsVersion;
+  isApprochingNextVersion: boolean;
+  firstActivationHeight: number;
+  isError?: boolean;
+  isLoading?: boolean;
+}
+
+const VersionInfoContext = createContext<VersionInfoProps | undefined>({
+  isApprochingNextVersion: false,
+  firstActivationHeight: 0,
+});
+
+export function useVersionInfo() {
+  return useContext(VersionInfoContext);
+}
+
+export function VersionInfo({ children }: PropsWithChildren) {
+  const {
+    data: versions,
+    isError: isVersionError,
+    isLoading: isVersionLoading,
+  } = useVersions();
+  const {
+    data: height,
+    isError: isHeightError,
+    isLoading: isHeightLoading,
+  } = useBTCTipHeight();
+
+  const context = useMemo(() => {
+    if (!versions || !height) return;
+
+    return {
+      currentHeight: height,
+      isError: isHeightError || isVersionError,
+      isLoading: isVersionLoading || isHeightLoading,
+      ...getCurrentGlobalParamsVersion(height + 1, versions),
+    };
+  }, [
+    versions,
+    height,
+    isHeightError,
+    isVersionError,
+    isVersionLoading,
+    isHeightLoading,
+  ]);
+
+  return (
+    <VersionInfoContext.Provider value={context}>
+      {children}
+    </VersionInfoContext.Provider>
+  );
+}