add btc usd price (#440)

* add btc usd price

* resolve comments

* resolve comments

* bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "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,14 @@ export const Stats: React.FC = () => {
       {
         title: "Confirmed TVL",
         value: stakingStats?.activeTVLSat
-          ? `${maxDecimals(satoshiToBtc(stakingStats.activeTVLSat), 2)} ${coinName}`
+          ? `${maxDecimals(satoshiToBtc(stakingStats.activeTVLSat), 2)} ${coinName}${
+              stakingStats.btcPriceUsd
+                ? ` ($${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,35 @@
+export function formatAmount(
+  amount: number,
+  locale: string = "en-US",
+  currency?: string,
+): string {
+  let abbreviated: string;
+  const formatter = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+    ...(currency && { style: "currency", currency }),
+  });
+
+  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 = formatter.format(amount / trillion) + "T";
+  } else if (amount >= billion) {
+    // Billions
+    abbreviated = formatter.format(amount / billion) + "B";
+  } else if (amount >= million) {
+    // Millions
+    abbreviated = formatter.format(amount / million) + "M";
+  } else if (amount >= thousand) {
+    // Thousands
+    abbreviated = formatter.format(amount / thousand) + "k";
+  } else {
+    abbreviated = formatter.format(amount);
+  }
+
+  return abbreviated;
+}