From 01538d64a931c9c0e7b3cf338ba21b019d74149b Mon Sep 17 00:00:00 2001
From: Jeremy <168515712+jeremy-babylonlabs@users.noreply.github.com>
Date: Thu, 5 Dec 2024 23:33:15 +1100
Subject: [PATCH] add btc usd price (#440)

* add btc usd price

* resolve comments

* resolve comments

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

diff --git a/package-lock.json b/package-lock.json
index 60278676..febeb9d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "simple-staking",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "simple-staking",
-      "version": "0.3.15",
+      "version": "0.3.16",
       "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 804debc6..3f42bded 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "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..7f86f726 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,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,
       },
diff --git a/src/app/context/api/StakingStatsProvider.tsx b/src/app/context/api/StakingStatsProvider.tsx
index 070ca3b8..5b6edeeb 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..42c9938a 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..c5318fbf
--- /dev/null
+++ b/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;
+}