From dfec7587305fee59f8304000994ca16a495f7389 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Mon, 29 Jun 2026 01:41:22 -0700
Subject: feat: update financial overview components

---
 frontend/components/prism/TickerHeader.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

(limited to 'frontend/components/prism/TickerHeader.tsx')

diff --git a/frontend/components/prism/TickerHeader.tsx b/frontend/components/prism/TickerHeader.tsx
index 804ffc0..c47f67f 100644
--- a/frontend/components/prism/TickerHeader.tsx
+++ b/frontend/components/prism/TickerHeader.tsx
@@ -1,6 +1,7 @@
 import { deltaClass, fmtCurrency, fmtPct } from "@/lib/format";
 import { rangePercent } from "@/lib/overview";
 import type { TickerOverview } from "@/types/api";
+import { CurrencyWarning } from "./CurrencyWarning";
 
 type Props = {
   overview: TickerOverview;
@@ -25,15 +26,16 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
         <div className="psm-head-meta">
           {overview.profile.exchange ? <span className="psm-tag">{overview.profile.exchange}</span> : null}
           {overview.meta.is_partial ? <span className="psm-partial-chip">Partial Data</span> : null}
+          <CurrencyWarning warning={overview.currency_warning} />
         </div>
       </div>
 
       <div className="psm-range">
         <div className="psm-eyebrow">52 Week Range</div>
         <div className="psm-range-values">
-          <span>{fmtCurrency(overview.range_52w.low)}</span>
-          <span className="psm-range-spot">{fmtCurrency(overview.range_52w.price ?? overview.quote.price)}</span>
-          <span>{fmtCurrency(overview.range_52w.high)}</span>
+          <span>{fmtCurrency(overview.range_52w.low, 2, overview.currency)}</span>
+          <span className="psm-range-spot">{fmtCurrency(overview.range_52w.price ?? overview.quote.price, 2, overview.currency)}</span>
+          <span>{fmtCurrency(overview.range_52w.high, 2, overview.currency)}</span>
         </div>
         <div className="psm-range-rail" aria-hidden>
           {pct != null ? <span className="psm-range-indicator" style={{ left: `${pct}%` }} /> : null}
@@ -42,11 +44,11 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
       </div>
 
       <div className="psm-price-stack">
-        <span className="psm-price">{fmtCurrency(overview.quote.price)}</span>
+        <span className="psm-price">{fmtCurrency(overview.quote.price, 2, overview.currency)}</span>
         <span className={`psm-change ${deltaClass(overview.quote.change_pct)}`}>
-          {fmtCurrency(overview.quote.change)} · {fmtPct(overview.quote.change_pct, 2, true)}
+          {fmtCurrency(overview.quote.change, 2, overview.currency)} · {fmtPct(overview.quote.change_pct, 2, true)}
         </span>
-        <span className="psm-quote-line">Prev close {fmtCurrency(overview.quote.prev_close)}</span>
+        <span className="psm-quote-line">Prev close {fmtCurrency(overview.quote.prev_close, 2, overview.currency)}</span>
         {lastSource ? <span className="psm-quote-line">Source {lastSource.replaceAll("_", " ")}</span> : null}
         <button type="button" className={`psm-primary-action${isSaved ? " subtle" : ""}`} onClick={onToggleWatchlist}>
           {isSaved ? "Remove From Watchlist" : "Save To Watchlist"}
-- 
cgit v1.3-2-g0d8e