BigNumber now handles big values using formatNumber and formatNumberCompact

Also includes some responsive improvements to make sure things wrap when it gets tight

Author: samejr

apps/webapp/app/components/metrics/BigNumber.tsx

@@ -1,7 +1,10 @@
 import { type ReactNode } from "react";
 import { AnimatedNumber } from "../primitives/AnimatedNumber";
 import { Spinner } from "../primitives/Spinner";
+import { SimpleTooltip } from "../primitives/Tooltip";
 import { cn } from "~/utils/cn";
+import { formatNumber, formatNumberCompact } from "~/utils/numberFormatter";
+import { Header3 } from "../primitives/Headers";
 
 interface BigNumberProps {
   title: ReactNode;
@@ -13,6 +16,7 @@ interface BigNumberProps {
   accessory?: ReactNode;
   suffix?: string;
   suffixClassName?: string;
+  compactThreshold?: number;
 }
 
 export function BigNumber({
@@ -25,25 +29,42 @@ export function BigNumber({
   accessory,
   animate = false,
   loading = false,
+  compactThreshold = 100000,
 }: BigNumberProps) {
   const v = value ?? defaultValue;
+
+  const formatValue = (num: number) => {
+    return num >= compactThreshold ? formatNumberCompact(num) : formatNumber(num);
+  };
+
+  const shouldCompact = v !== undefined && v >= compactThreshold;
+
   return (
-    <div className="grid grid-rows-[1.5rem_auto] gap-4 rounded-sm border border-grid-dimmed bg-background-bright p-4">
-      <div className="flex items-center justify-between">
-        <div className="text-2sm text-text-dimmed">{title}</div>
+    <div className="flex flex-col justify-between gap-4 rounded-sm border border-grid-dimmed bg-background-bright p-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Header3 className="leading-6">{title}</Header3>
         {accessory && <div className="flex-shrink-0">{accessory}</div>}
       </div>
       <div
         className={cn(
-          "h-[3.75rem] text-[3.75rem] font-normal tabular-nums leading-none text-text-bright",
+          "text-[3.75rem] font-normal tabular-nums leading-none text-text-bright",
           valueClassName
         )}
       >
         {loading ? (
           <Spinner className="size-6" />
         ) : v !== undefined ? (
-          <div className="flex items-baseline gap-1">
-            {animate ? <AnimatedNumber value={v} /> : v}
+          <div className="flex flex-wrap items-baseline gap-2">
+            {shouldCompact ? (
+              <SimpleTooltip
+                button={animate ? <AnimatedNumber value={v} /> : formatValue(v)}
+                content={formatNumber(v)}
+              />
+            ) : animate ? (
+              <AnimatedNumber value={v} />
+            ) : (
+              formatValue(v)
+            )}
             {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
           </div>
         ) : (

apps/webapp/app/components/primitives/AnimatedNumber.tsx

@@ -1,4 +1,4 @@
-import { motion, useSpring, useTransform, useMotionValue, animate } from "framer-motion";
+import { animate, motion, useMotionValue, useTransform } from "framer-motion";
 import { useEffect } from "react";
 
 export function AnimatedNumber({ value }: { value: number }) {