fix: refactor system stats section

src/app/components/Delegations/Delegations.tsx

@@ -11,7 +11,7 @@ import { LoadingTableList } from "@/app/components/Loading/Loading";
 import { DelegationsPointsProvider } from "@/app/context/api/DelegationsPointsProvider";
 import { useError } from "@/app/context/Error/ErrorContext";
 import { useWallet } from "@/app/context/wallet/WalletProvider";
-import { useDelegations } from "@/app/hooks/useDelegations";
+import { useDelegations } from "@/app/hooks/api/useDelegations";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { useAppState } from "@/app/state";
 import { useDelegationState } from "@/app/state/DelegationState";

src/app/components/Modals/UnbondWithdrawModal.tsx

@@ -1,6 +1,6 @@
 import { IoMdClose } from "react-icons/io";
 
-import { useVersionByHeight } from "@/app/hooks/useVersions";
+import { useVersionByHeight } from "@/app/hooks/useVersionByHeight";
 import { Delegation as DelegationInterface } from "@/app/types/delegations";
 import { getNetworkConfig } from "@/config/network.config";
 import { blocksToDisplayTime } from "@/utils/blocksToDisplayTime";

src/app/components/Stats/StakingCapItem.tsx

@@ -0,0 +1,113 @@
+import { memo } from "react";
+
+import { useAppState, type AppState } from "@/app/state";
+import { getNetworkConfig } from "@/config/network.config";
+import { satoshiToBtc } from "@/utils/btcConversions";
+import { maxDecimals } from "@/utils/maxDecimals";
+
+import { StatItem } from "./StatItem";
+import { stakingTvlCap } from "./icons";
+
+const { coinName } = getNetworkConfig();
+
+type StakingCapAdapter = {
+  match: (state: AppState) => boolean;
+  adopt: (state: AppState) => JSX.Element | undefined;
+};
+
+const STAKING_CAP_ITEMS: StakingCapAdapter[] = [
+  {
+    match: ({ isLoading, currentHeight, currentVersion }) =>
+      !currentHeight || !currentVersion || isLoading,
+    adopt: ({ isLoading }) => (
+      <StatItem
+        loading={isLoading}
+        icon={stakingTvlCap}
+        title="Staking TVL Cap"
+        value="-"
+      />
+    ),
+  },
+
+  {
+    match: ({ isApprochingNextVersion, nextVersion }) =>
+      isApprochingNextVersion && Boolean(nextVersion?.activationHeight),
+    adopt: ({
+      nextVersion: { activationHeight = 0 } = {},
+      currentHeight = 0,
+    }) => {
+      const remainingBlocks = activationHeight - currentHeight - 1;
+
+      return (
+        <StatItem
+          icon={stakingTvlCap}
+          title="Staking Window"
+          value={`opens in ${remainingBlocks} ${remainingBlocks == 1 ? "block" : "blocks"}`}
+        />
+      );
+    },
+  },
+
+  {
+    match: ({ isApprochingNextVersion, nextVersion }) =>
+      isApprochingNextVersion && Boolean(nextVersion?.stakingCapSat),
+    adopt: ({ nextVersion: { stakingCapSat = 0 } = {} }) => (
+      <StatItem
+        icon={stakingTvlCap}
+        title="Next Staking TVL Cap"
+        value={`${maxDecimals(satoshiToBtc(stakingCapSat), 8)} ${coinName}`}
+      />
+    ),
+  },
+
+  {
+    match: ({ currentVersion }) => Boolean(currentVersion?.stakingCapHeight),
+    adopt: ({
+      currentVersion: { stakingCapHeight = 0 } = {},
+      currentHeight = 0,
+    }) => {
+      const numOfBlockLeft = stakingCapHeight - currentHeight;
+
+      return (
+        <StatItem
+          icon={stakingTvlCap}
+          title="Staking Window"
+          value={
+            numOfBlockLeft > 0
+              ? `closes in ${numOfBlockLeft} ${numOfBlockLeft == 1 ? "block" : "blocks"}`
+              : "closed"
+          }
+        />
+      );
+    },
+  },
+
+  {
+    match: ({ currentVersion }) => Boolean(currentVersion?.stakingCapSat),
+    adopt: ({ currentVersion: { stakingCapSat = 0 } = {} }) => (
+      <StatItem
+        icon={stakingTvlCap}
+        title="Staking TVL Cap"
+        value={`${maxDecimals(satoshiToBtc(stakingCapSat), 8)} ${coinName}`}
+      />
+    ),
+  },
+
+  {
+    match: () => true,
+    adopt: () => (
+      <StatItem icon={stakingTvlCap} title="Staking TVL Cap" value="-" />
+    ),
+  },
+];
+
+export const StakingCapItem = memo(() => {
+  const appState = useAppState();
+  const stakingCapAdapter = STAKING_CAP_ITEMS.find(({ match }) =>
+    match(appState),
+  );
+
+  return stakingCapAdapter?.adopt(appState);
+});
+
+StakingCapItem.displayName = "StakingCapItem";

src/app/components/Stats/StatItem.tsx

@@ -0,0 +1,51 @@
+import { type JSX } from "react";
+import { AiOutlineInfoCircle } from "react-icons/ai";
+import { Tooltip } from "react-tooltip";
+
+interface StatItemProps {
+  loading?: boolean;
+  icon: JSX.Element;
+  title: string;
+  value: string | number;
+  tooltip?: string;
+}
+
+export const StatItem = ({
+  loading,
+  icon,
+  title,
+  value,
+  tooltip,
+}: StatItemProps) => (
+  <div className="flex items-center gap-2 md:flex-1 md:flex-col lg:flex-initial lg:flex-row flex-wrap justify-center">
+    <div className="flex items-center gap-2">
+      {icon}
+      <div className="flex items-center gap-1">
+        <p className="dark:text-neutral-content">{title}</p>
+        {tooltip && (
+          <>
+            <span
+              className="cursor-pointer text-xs"
+              data-tooltip-id={`tooltip-${title}`}
+              data-tooltip-content={tooltip}
+              data-tooltip-place="top"
+            >
+              <AiOutlineInfoCircle />
+            </span>
+            <Tooltip id={`tooltip-${title}`} className="tooltip-wrap" />
+          </>
+        )}
+      </div>
+    </div>
+
+    <div>
+      <p className="flex-1 text-right">
+        {loading ? (
+          <span className="loading loading-spinner text-primary" />
+        ) : (
+          <strong>{value}</strong>
+        )}
+      </p>
+    </div>
+  </div>
+);