[#350] Round token price and supply to readable precision

lib/format.ts

@@ -0,0 +1,25 @@
+/**
+ * Shared number formatting utilities for readable display.
+ *
+ * formatPrice  — token prices (small decimals, 4 sig digits)
+ * formatSupply — token supply / balances (large numbers, commas)
+ */
+
+/** Format a token price for display. Accepts a string or number. */
+export function formatPrice(value: string | number): string {
+  const v = typeof value === "string" ? parseFloat(value) : value;
+  if (v === 0 || isNaN(v)) return "0";
+  if (v < 0.001) return v.toExponential(0);
+  if (v < 1) return v.toFixed(4);
+  return v.toFixed(2);
+}
+
+/** Format a token supply or balance for display. Accepts a string or number. */
+export function formatSupply(value: string | number): string {
+  const v = typeof value === "string" ? parseFloat(value) : value;
+  if (v === 0 || isNaN(v)) return "0";
+  if (v < 1) return v.toFixed(4);
+  if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`;
+  if (v >= 1_000) return Math.round(v).toLocaleString("en-US");
+  return v.toFixed(2);
+}

src/app/story/[storylineId]/page.tsx

@@ -11,6 +11,7 @@ import { RatingSummary } from "../../../components/RatingSummary";
 import { ShareToFarcaster } from "../../../components/ShareToFarcaster";
 import { getTokenPrice, type TokenPriceInfo } from "../../../../lib/price";
 import { RESERVE_LABEL, STORY_FACTORY } from "../../../../lib/contracts/constants";
+import { formatPrice, formatSupply } from "../../../../lib/format";
 import { type Address } from "viem";
 import { truncateAddress } from "../../../../lib/utils";
 import Link from "next/link";
@@ -56,7 +57,7 @@ export async function generateMetadata({
     : null;
   const reserveLabel = RESERVE_LABEL;
   const priceSuffix = priceInfo
-    ? ` — Price: ${priceInfo.pricePerToken} ${reserveLabel}`
+    ? ` — Price: ${formatPrice(priceInfo.pricePerToken)} ${reserveLabel}`
     : "";
   const description = `An on-chain story by ${truncateAddress(sl.writer_address)} — ${sl.plot_count} ${sl.plot_count === 1 ? "plot" : "plots"}${priceSuffix}`;
 
@@ -260,15 +261,15 @@ function StoryHeader({
               Token Price
             </span>
             <span className="text-foreground">
-              {priceInfo.pricePerToken} {reserveLabel}
+              {formatPrice(priceInfo.pricePerToken)} {reserveLabel}
             </span>
           </div>
           <div>
             <span className="text-muted block text-[10px] uppercase tracking-wider">
               Supply Minted
             </span>
             <span className="text-foreground">
-              {priceInfo.totalSupply} tokens
+              {formatSupply(priceInfo.totalSupply)} tokens
             </span>
           </div>
         </div>

src/components/ReaderPortfolio.tsx

@@ -3,6 +3,7 @@
 import { useAccount } from "wagmi";
 import { useQuery } from "@tanstack/react-query";
 import { formatUnits, type Address } from "viem";
+import { formatPrice, formatSupply } from "../../lib/format";
 import { publicClient } from "../../lib/rpc";
 import { erc20Abi, mcv2BondAbi, get24hPriceChange, getTokenTVL } from "../../lib/price";
 import { MCV2_BOND, RESERVE_LABEL, STORY_FACTORY } from "../../lib/contracts/constants";
@@ -125,7 +126,7 @@ export function ReaderPortfolio() {
                 Total Value
               </span>
               <span className="text-accent text-sm font-medium">
-                {formatUnits(totalValue, reserveDecimals)} {RESERVE_LABEL}
+                {formatPrice(formatUnits(totalValue, reserveDecimals))} {RESERVE_LABEL}
               </span>
             </div>
             {bestPick && bestPick.priceChange !== null && (
@@ -159,12 +160,12 @@ export function ReaderPortfolio() {
                     {h.storyline.title}
                   </Link>
                   <div className="text-muted mt-0.5">
-                    {formatUnits(h.balance, 18)} tokens
+                    {formatSupply(formatUnits(h.balance, 18))} tokens
                   </div>
                 </div>
                 <div className="text-right">
                   <div className="text-foreground">
-                    {formatUnits(h.value, h.reserveDecimals)} {RESERVE_LABEL}
+                    {formatPrice(formatUnits(h.value, h.reserveDecimals))} {RESERVE_LABEL}
                   </div>
                   {h.priceChange !== null && (
                     <div

src/components/WriterTradingStats.tsx

@@ -5,6 +5,7 @@ import { formatUnits, type Address } from "viem";
 import { publicClient } from "../../lib/rpc";
 import { mcv2BondAbi, getTokenTVL } from "../../lib/price";
 import { MCV2_BOND, RESERVE_LABEL } from "../../lib/contracts/constants";
+import { formatPrice } from "../../lib/format";
 import type { Storyline } from "../../lib/supabase";
 
 interface WriterTradingStatsProps {
@@ -46,15 +47,15 @@ export function WriterTradingStats({ storyline }: WriterTradingStatsProps) {
           Token Price
         </span>
         <span className="text-foreground">
-          {data ? `${data.price} ${RESERVE_LABEL}` : "—"}
+          {data ? `${formatPrice(data.price)} ${RESERVE_LABEL}` : "—"}
         </span>
       </div>
       <div>
         <span className="block text-[10px] uppercase tracking-wider">
           TVL
         </span>
         <span className="text-foreground">
-          {data ? `${data.tvl} ${RESERVE_LABEL}` : "—"}
+          {data ? `${formatPrice(data.tvl)} ${RESERVE_LABEL}` : "—"}
         </span>
       </div>
     </div>