From 9083bdb20ce7a4127347799539a19470a2b3fff4 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sun, 12 Apr 2026 11:14:01 +0100
Subject: [PATCH] [#860] Show full USD token price in header instead of '<
 $0.01'

Add formatUsdTokenPrice() that shows significant digits for small USD
values (e.g. $0.0054 instead of < $0.01). Used in TokenPriceBox for
the story page header. The generic formatUsdValue() is unchanged for
other contexts.

Fixes #860

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 lib/usd-price.ts                 | 14 ++++++++++++++
 src/components/TokenPriceBox.tsx |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/lib/usd-price.ts b/lib/usd-price.ts
index dafef90b..6dbe11ff 100644
--- a/lib/usd-price.ts
+++ b/lib/usd-price.ts
@@ -117,3 +117,17 @@ export function formatUsdValue(value: number | null): string {
   if (value < 1_000_000) return `$${(value / 1000).toFixed(2)}K`;
   return `$${(value / 1_000_000).toFixed(2)}M`;
 }
+
+/**
+ * Format a USD token price with full precision for small values.
+ * Shows enough significant digits to expose the actual price
+ * instead of hiding it behind "< $0.01".
+ */
+export function formatUsdTokenPrice(value: number | null): string {
+  if (value === null) return "—";
+  if (value === 0) return "$0";
+  if (value >= 0.01) return formatUsdValue(value);
+  // For very small values, show 2 significant digits
+  const digits = Math.max(2, -Math.floor(Math.log10(value)) + 1);
+  return `$${value.toFixed(digits)}`;
+}
diff --git a/src/components/TokenPriceBox.tsx b/src/components/TokenPriceBox.tsx
index f775d816..38263cf0 100644
--- a/src/components/TokenPriceBox.tsx
+++ b/src/components/TokenPriceBox.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { usePlotUsdPrice } from "../hooks/usePlotUsdPrice";
-import { formatUsdValue } from "../../lib/usd-price";
+import { formatUsdTokenPrice } from "../../lib/usd-price";
 import { formatPrice } from "../../lib/format";
 import { RESERVE_LABEL } from "../../lib/contracts/constants";
 
@@ -16,7 +16,7 @@ export function TokenPriceBox({ pricePerToken }: { pricePerToken: number }) {
   return (
     <>
       <div className="text-foreground text-sm font-bold">
-        {usdPrice !== null ? formatUsdValue(usdPrice) : `${formatPrice(pricePerToken)} ${RESERVE_LABEL}`}
+        {usdPrice !== null ? formatUsdTokenPrice(usdPrice) : `${formatPrice(pricePerToken)} ${RESERVE_LABEL}`}
       </div>
       <div className="text-muted text-[9px]">Token Price</div>
     </>