From 2e39b20bdacbd546a8e6808fe03430fbe3b7eb20 Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Sat, 4 Jan 2025 14:45:30 -0800
Subject: [PATCH] Update program-metrics.tsx

---
 .../programs/[programId]/program-metrics.tsx  | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/program-metrics.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/program-metrics.tsx
index c31d5998fc..7fb141cfcb 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/program-metrics.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/program-metrics.tsx
@@ -1,7 +1,7 @@
 import useProgramMetrics from "@/lib/swr/use-program-metrics";
 import { Icon } from "@dub/ui";
 import { Check2, CurrencyDollar, MoneyBills2, Users } from "@dub/ui/icons";
-import { currencyFormatter, nFormatter } from "@dub/utils";
+import NumberFlow from "@number-flow/react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 
@@ -79,14 +79,19 @@ function Stat({
             {error ? (
               "-"
             ) : (
-              <>
-                {isCurrency
-                  ? currencyFormatter(value! / 100, {
-                      minimumFractionDigits: 2,
-                      maximumFractionDigits: 2,
-                    })
-                  : nFormatter(value)}
-              </>
+              <NumberFlow
+                value={isCurrency ? value! / 100 : value || 0}
+                {...(isCurrency
+                  ? {
+                      format: {
+                        style: "currency",
+                        currency: "USD",
+                        // @ts-ignore – this is a valid option but TS is outdated
+                        trailingZeroDisplay: "stripIfInteger",
+                      },
+                    }
+                  : {})}
+              />
             )}
           </div>
         )}