From e86c78db4e037a5f6b4851aca96644024f8b9bce Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 5 Dec 2024 06:54:18 +0800
Subject: [PATCH] add btc usd price

---
 package-lock.json                            |  4 +--
 package.json                                 |  2 +-
 src/app/api/getStats.ts                      |  2 ++
 src/app/components/Stats/Stats.tsx           |  7 ++++-
 src/app/context/api/StakingStatsProvider.tsx |  1 +
 src/app/types/stakingStats.ts                |  1 +
 src/utils/formatAmount.ts                    | 32 ++++++++++++++++++++
 7 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/formatAmount.ts

diff --git a/package-lock.json b/package-lock.json
index 61d3665f..60278676 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "simple-staking",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "simple-staking",
-      "version": "0.3.13",
+      "version": "0.3.15",
       "dependencies": {
         "@babylonlabs-io/btc-staking-ts": "0.3.0",
         "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
diff --git a/package.json b/package.json
index 5318409a..804debc6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/src/app/api/getStats.ts b/src/app/api/getStats.ts
index 45a50e62..6eba340c 100644
--- a/src/app/api/getStats.ts
+++ b/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,
   };
 };
diff --git a/src/app/components/Stats/Stats.tsx b/src/app/components/Stats/Stats.tsx
index 582cdb28..f0b4af07 100644
--- a/src/app/components/Stats/Stats.tsx
+++ b/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,
       },
diff --git a/src/app/context/api/StakingStatsProvider.tsx b/src/app/context/api/StakingStatsProvider.tsx
index 070ca3b8..dd6f970a 100644
--- a/src/app/context/api/StakingStatsProvider.tsx
+++ b/src/app/context/api/StakingStatsProvider.tsx
@@ -13,6 +13,7 @@ export interface StakingStats {
   totalDelegations: number;
   totalStakers: number;
   unconfirmedTVLSat: number;
+  btcPriceUsd: number;
 }
 
 interface StakingStatsProviderProps {
diff --git a/src/app/types/stakingStats.ts b/src/app/types/stakingStats.ts
index 910c5105..3af90099 100644
--- a/src/app/types/stakingStats.ts
+++ b/src/app/types/stakingStats.ts
@@ -5,4 +5,5 @@ export interface StakingStats {
   totalDelegations: number;
   totalStakers: number;
   unconfirmedTVLSat: number;
+  btcPriceUsd: number;
 }
diff --git a/src/utils/formatAmount.ts b/src/utils/formatAmount.ts
new file mode 100644
index 00000000..aade4d08
--- /dev/null
+++ b/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;
+}