add btc usd price

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/api/getStats.ts

@@ -13,6 +13,7 @@ interface StatsAPI {
   total_delegations: number;
   total_stakers: number;
   unconfirmed_tvl: number;
+  btc_price_usd: number;
 }
 
 export const getStats = async (): Promise<StakingStats> => {
@@ -27,5 +28,6 @@ export const getStats = async (): Promise<StakingStats> => {
     totalDelegations: statsAPI.total_delegations,
     totalStakers: statsAPI.total_stakers,
     unconfirmedTVLSat: statsAPI.unconfirmed_tvl,
+    btcPriceUsd: statsAPI.btc_price_usd,
   };
 };

src/app/components/Stats/Stats.tsx

@@ -12,6 +12,7 @@ import { useBtcHeight } from "@/app/context/mempool/BtcHeightProvider";
 import { GlobalParamsVersion } from "@/app/types/globalParams";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btcConversions";
+import { formatAmount } from "@/utils/formatAmount";
 import {
   ParamsWithContext,
   getCurrentGlobalParamsVersion,
@@ -82,6 +83,7 @@ export const Stats: React.FC = () => {
     totalDelegations: 0,
     totalStakers: 0,
     unconfirmedTVLSat: 0,
+    btcPriceUsd: 0,
   });
   const [stakingCapText, setStakingCapText] = useState<{
     title: string;
@@ -135,7 +137,10 @@ export const Stats: React.FC = () => {
       {
         title: "Confirmed TVL",
         value: stakingStats?.activeTVLSat
-          ? `${maxDecimals(satoshiToBtc(stakingStats.activeTVLSat), 2)} ${coinName}`
+          ? `${maxDecimals(satoshiToBtc(stakingStats.activeTVLSat), 2)} ${coinName} ($${formatAmount(
+              satoshiToBtc(stakingStats.activeTVLSat) *
+                stakingStats.btcPriceUsd,
+            )})`
           : 0,
         icon: confirmedTvl,
       },

src/app/context/api/StakingStatsProvider.tsx

@@ -13,6 +13,7 @@ export interface StakingStats {
   totalDelegations: number;
   totalStakers: number;
   unconfirmedTVLSat: number;
+  btcPriceUsd: number;
 }
 
 interface StakingStatsProviderProps {

src/app/types/stakingStats.ts

@@ -5,4 +5,5 @@ export interface StakingStats {
   totalDelegations: number;
   totalStakers: number;
   unconfirmedTVLSat: number;
+  btcPriceUsd: number;
 }

src/utils/formatAmount.ts

@@ -0,0 +1,32 @@
+export function formatAmount(amount: number): string {
+  let abbreviated: string;
+
+  const trillion = 1_000_000_000_000;
+  const billion = 1_000_000_000;
+  const million = 1_000_000;
+  const thousand = 1_000;
+
+  if (amount >= trillion) {
+    // Trillions
+    abbreviated = (amount / trillion).toFixed(2) + "T";
+  } else if (amount >= billion) {
+    // Billions
+    abbreviated = (amount / billion).toFixed(2) + "B";
+  } else if (amount >= million) {
+    // Millions
+    abbreviated = (amount / million).toFixed(2) + "M";
+  } else if (amount >= thousand) {
+    // Thousands
+    abbreviated = (amount / thousand).toFixed(2) + "k";
+  } else {
+    abbreviated = amount.toFixed(2);
+  }
+
+  const [numberPart, suffix] = abbreviated.split(/([a-zA-Z]+)/);
+  const formattedNumber = parseFloat(numberPart).toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+
+  return suffix ? formattedNumber + suffix : formattedNumber;
+}