From 32d0256aba21c576d43cf8be3f3a601207f8cd6f Mon Sep 17 00:00:00 2001
From: Shroominic <db2002dominic@gmail.com>
Date: Sun, 23 Nov 2025 13:11:27 -0800
Subject: [PATCH] feat(ui): implement global currency selection

- Add global currency store (sat/msat/usd)
- Add currency toggle to site header
- Update currency formatting logic (integers for sats, 2 decimals for USD)
- Connect dashboard and balances pages to global currency state
---
 ui/components/currency-toggle.tsx | 58 +++++++++++++++++++++++++++++++
 ui/components/site-header.tsx     |  2 ++
 ui/lib/currency.ts                |  8 ++---
 ui/lib/stores/currency.ts         | 21 +++++++++++
 4 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 ui/components/currency-toggle.tsx
 create mode 100644 ui/lib/stores/currency.ts

diff --git a/ui/components/currency-toggle.tsx b/ui/components/currency-toggle.tsx
new file mode 100644
index 00000000..a280d663
--- /dev/null
+++ b/ui/components/currency-toggle.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { useCurrencyStore } from '@/lib/stores/currency';
+import { useQuery } from '@tanstack/react-query';
+import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useEffect } from 'react';
+import type { DisplayUnit } from '@/lib/types/units';
+
+export function CurrencyToggle() {
+  const { displayUnit, setDisplayUnit } = useCurrencyStore();
+
+  const { data: btcUsdPrice } = useQuery({
+    queryKey: ['btc-usd-price'],
+    queryFn: fetchBtcUsdPrice,
+    refetchInterval: 120_000,
+    staleTime: 60_000,
+  });
+
+  const usdPerSat = btcUsdPrice ? btcToSatsRate(btcUsdPrice) : null;
+
+  useEffect(() => {
+    if (displayUnit === 'usd' && usdPerSat === null) {
+      setDisplayUnit('sat');
+    }
+  }, [displayUnit, usdPerSat, setDisplayUnit]);
+
+  return (
+    <ToggleGroup
+      type='single'
+      value={displayUnit}
+      onValueChange={(value) => {
+        if (value) {
+          setDisplayUnit(value as DisplayUnit);
+        }
+      }}
+      variant='outline'
+      size='sm'
+      className="mr-2"
+    >
+      <ToggleGroupItem value='msat' aria-label="Toggle msat" title="Millisatoshis">
+        mSAT
+      </ToggleGroupItem>
+      <ToggleGroupItem value='sat' aria-label="Toggle sat" title="Satoshis">
+        sat
+      </ToggleGroupItem>
+      <ToggleGroupItem 
+        value='usd' 
+        disabled={!usdPerSat} 
+        aria-label="Toggle usd" 
+        title="US Dollar (approx)"
+      >
+        USD
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
+
diff --git a/ui/components/site-header.tsx b/ui/components/site-header.tsx
index 617607f1..70cfc485 100644
--- a/ui/components/site-header.tsx
+++ b/ui/components/site-header.tsx
@@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation';
 import { adminLogout } from '@/lib/api/services/auth';
 import { toast } from 'sonner';
 import { ThemeToggle } from '@/components/theme-toggle';
+import { CurrencyToggle } from '@/components/currency-toggle';
 
 export function SiteHeader() {
   const router = useRouter();
@@ -35,6 +36,7 @@ export function SiteHeader() {
           <h1 className='text-base font-medium lg:hidden'>Routstr Node</h1>
         </div>
         <div className='flex items-center gap-2'>
+          <CurrencyToggle />
           <ThemeToggle />
           <Button
             variant='ghost'
diff --git a/ui/lib/currency.ts b/ui/lib/currency.ts
index 9f9ab595..5af7acf1 100644
--- a/ui/lib/currency.ts
+++ b/ui/lib/currency.ts
@@ -25,7 +25,8 @@ export function formatFromMsat(
 
   if (displayUnit === 'sat') {
     const sats = amountMsat / 1000;
-    return `${sats.toLocaleString()} sats`;
+    // Format as integer for sats
+    return `${Math.floor(sats).toLocaleString()} sats`;
   }
 
   if (usdPerSat === null) {
@@ -34,12 +35,11 @@ export function formatFromMsat(
 
   const sats = amountMsat / 1000;
   const usd = sats * usdPerSat;
-  const precision = Math.abs(usd) >= 1 ? 2 : 4;
   const formatter = new Intl.NumberFormat(undefined, {
     style: 'currency',
     currency: 'USD',
-    minimumFractionDigits: precision,
-    maximumFractionDigits: Math.max(precision, 6),
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
   });
   return formatter.format(usd);
 }
diff --git a/ui/lib/stores/currency.ts b/ui/lib/stores/currency.ts
new file mode 100644
index 00000000..38d78c05
--- /dev/null
+++ b/ui/lib/stores/currency.ts
@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { DisplayUnit } from '@/lib/types/units';
+
+interface CurrencyState {
+  displayUnit: DisplayUnit;
+  setDisplayUnit: (unit: DisplayUnit) => void;
+}
+
+export const useCurrencyStore = create<CurrencyState>()(
+  persist(
+    (set) => ({
+      displayUnit: 'sat',
+      setDisplayUnit: (unit) => set({ displayUnit: unit }),
+    }),
+    {
+      name: 'currency-storage',
+    }
+  )
+);
+