From 61c6b343016d170d1776dfeda4cd17105965d709 Mon Sep 17 00:00:00 2001
From: Vasanth T <vasanth.dev2004@gmail.com>
Date: Tue, 6 Oct 2026 10:48:37 +0530
Subject: [PATCH] ui: token page hero, trade panel and details

A hero that wears the token's card cover, the trade panel with price impact, proof facts, the about card, and the loading frame the market row morphs into.
---
 app/src/app/t/[chain]/[token]/loading.tsx     |   9 +-
 app/src/app/t/[chain]/[token]/page.tsx        | 159 ++++++++++++++----
 app/src/components/launchpad/CollectPanel.tsx |  16 +-
 app/src/components/launchpad/CopyChip.tsx     |  46 +++--
 app/src/components/launchpad/HoldersPanel.tsx |  31 ++--
 .../components/launchpad/LaunchReceipt.tsx    |  33 ++--
 .../launchpad/PendingTokenHeader.tsx          |  50 ++++--
 app/src/components/launchpad/TokenAbout.tsx   |  56 ++++++
 app/src/components/launchpad/TokenDetails.tsx |   5 +-
 app/src/components/launchpad/TokenProof.tsx   |  77 +++++++++
 app/src/components/launchpad/TokenTrades.tsx  |  29 +++-
 app/src/components/launchpad/TradePanel.tsx   | 148 ++++++++++------
 .../launchpad/market-cap-sites.test.ts        |  10 +-
 .../components/launchpad/token-page.test.ts   |  55 ++++++
 app/src/lib/launchpad/price-impact.test.ts    |  68 ++++++++
 app/src/lib/launchpad/price-impact.ts         |  45 +++++
 app/src/lib/launchpad/proof.test.ts           |  66 ++++++++
 app/src/lib/launchpad/proof.ts                |  72 ++++++++
 app/src/lib/launchpad/tintServer.ts           |  36 ++++
 19 files changed, 841 insertions(+), 170 deletions(-)
 create mode 100644 app/src/components/launchpad/TokenAbout.tsx
 create mode 100644 app/src/components/launchpad/TokenProof.tsx
 create mode 100644 app/src/components/launchpad/token-page.test.ts
 create mode 100644 app/src/lib/launchpad/price-impact.test.ts
 create mode 100644 app/src/lib/launchpad/price-impact.ts
 create mode 100644 app/src/lib/launchpad/proof.test.ts
 create mode 100644 app/src/lib/launchpad/proof.ts
 create mode 100644 app/src/lib/launchpad/tintServer.ts

diff --git a/app/src/app/t/[chain]/[token]/loading.tsx b/app/src/app/t/[chain]/[token]/loading.tsx
index c395ea8a..7f112e21 100644
--- a/app/src/app/t/[chain]/[token]/loading.tsx
+++ b/app/src/app/t/[chain]/[token]/loading.tsx
@@ -1,15 +1,14 @@
 import { Sk } from "@/components/Skeleton";
 import PendingTokenHeader from "@/components/launchpad/PendingTokenHeader";
 
-/* Same frame as page.tsx (main padding, breadcrumb row, header): the token header that the market-row
+/* Same frame as page.tsx (main padding, the hero with its cover): the token header that the market-row
    morph lands on must sit exactly where the real one renders, or the second hop would jump. */
 export default function Loading() {
-  return <main className="mx-auto max-w-6xl px-4 pt-5 pb-28 sm:pt-7 lg:pb-16" aria-busy="true" aria-label="Loading token market">
-    <div className="mb-5 flex min-h-8 items-center"><Sk className="h-4 w-24" /></div>
+  return <main className="bb-mid bb-page pt-5 pb-28 sm:pt-7 lg:pb-16" aria-busy="true" aria-label="Loading token market">
     <PendingTokenHeader />
-    <div className="grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_21rem] lg:gap-6">
+    <div className="grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_23.75rem] lg:gap-6">
       <div className="min-w-0 space-y-4">
-        <div className="overflow-hidden rounded-2xl border border-line p-5"><Sk className="h-3 w-24" /><Sk className="mt-3 h-10 w-44" /><Sk className="mt-6 h-10 w-full" /><Sk className="mt-3 h-72 w-full sm:h-[360px] xl:h-[390px]" /></div>
+        <div className="overflow-hidden rounded-2xl border border-line p-5"><Sk className="h-3 w-24" /><Sk className="mt-3 h-10 w-44" /><Sk className="mt-6 h-10 w-full" /><Sk className="mt-3 h-72 w-full sm:h-[360px] xl:h-[380px]" /></div>
         <div className="grid grid-cols-2 gap-4 rounded-xl border border-line bg-card p-4 sm:grid-cols-4">{Array.from({ length: 4 }, (_, i) => <div key={i} className="space-y-2"><Sk className="h-3 w-16" /><Sk className="h-5 w-full" /></div>)}</div>
       </div>
       <aside className="space-y-4">
diff --git a/app/src/app/t/[chain]/[token]/page.tsx b/app/src/app/t/[chain]/[token]/page.tsx
index 53d98a59..44ebcb48 100644
--- a/app/src/app/t/[chain]/[token]/page.tsx
+++ b/app/src/app/t/[chain]/[token]/page.tsx
@@ -10,13 +10,14 @@ import TradePanel from "@/components/launchpad/TradePanel";
 import CollectPanel from "@/components/launchpad/CollectPanel";
 import CopyChip from "@/components/launchpad/CopyChip";
 import MobileBuyBar from "@/components/launchpad/MobileBuyBar";
-import PriceChart from "@/components/launchpad/PriceChart";
+import TokenChart from "@/components/launchpad/TokenChart";
 import TokenComments from "@/components/launchpad/Posts";
 import ChangeChip from "@/components/launchpad/ChangeChip";
 import HoldersPanel from "@/components/launchpad/HoldersPanel";
 import TokenDetails from "@/components/launchpad/TokenDetails";
 import TokenTrades from "@/components/launchpad/TokenTrades";
 import LaunchReceipt from "@/components/launchpad/LaunchReceipt";
+import TokenAbout from "@/components/launchpad/TokenAbout";
 import { getHolderPanel } from "@/lib/launchpad/holdersServer";
 import { memo } from "@/lib/launchpad/memo";
 import { ago, nowMs } from "@/lib/launchpad/time";
@@ -39,6 +40,15 @@ import { stockByAddress } from "@/lib/launchpad/stocksServer";
 import { BRAND_DOMAIN, BRAND_X } from "@/lib/brand";
 import { clampSocial } from "@/lib/launchpad/ogcard";
 import { capDisplay } from "@/lib/launchpad/market-cap";
+import { launchpad } from "@/lib/launchpad/config";
+import { tokenTint } from "@/lib/launchpad/tintServer";
+import { proofFacts } from "@/lib/launchpad/proof";
+import TokenProof, { type ProofLink } from "@/components/launchpad/TokenProof";
+import WatchButton from "@/components/launchpad/WatchButton";
+import { BorderBeam } from "@/components/vendor/border-beam";
+import { Banner } from "@/components/launchpad/LaunchCard";
+import { ChainLogo } from "@/components/launchpad/ChainLogo";
+import type { ProofKey } from "@/lib/launchpad/proof";
 
 /** Where GITLAWB lives, as said beside a GITLAWB-quoted pool. */
 const GITLAWB_ORIGIN: Record<ChainKey, string> = { base: " on Base", robinhood: " (bridged 1:1 from Base over LayerZero; one supply, two chains)", arc: "" /* not bridged to Arc */ };
@@ -79,9 +89,19 @@ export default async function TokenPage({ params }: { params: Promise<{ chain: s
   };
   const unlisted = quote.key === "other";
   const stockQuote = quote.key === "stock" ? stockByAddress(chain, l.quote) : null;
-  const [swaps, holders] = await Promise.all([getSwaps(chain, l.token, quote.decimals, 40), memo(`holders:${chain}:${l.token}`, 5_000, () => getHolderPanel(chain, l.token))]);
+  const [swaps, holders, tint] = await Promise.all([getSwaps(chain, l.token, quote.decimals, 40), memo(`holders:${chain}:${l.token}`, 5_000, () => getHolderPanel(chain, l.token)), tokenTint(l.image_url, l.token)]);
   const now = nowMs();
   const mode = feeModeOf(l.lp_fee, l.recipients);
+  const cap = capDisplay(l.fdv_quote, l.quote_usd, { key: l.quote_key, symbol: l.quote_symbol, decimals: l.quote_decimals });
+  const proof = proofFacts({ holders, symbol: l.symbol, launcher: l.launcher, lpFee: l.lp_fee, mode, recipients: l.recipients.length });
+  const locker = launchpad(chain).locker;
+  const proofLinks: Partial<Record<ProofKey, ProofLink>> = {
+    ...(locker ? { lock: { href: explorerAddress(chain, locker), label: "View locker", external: true } } : {}),
+    creator: { href: explorerAddress(chain, l.launcher), label: "Creator wallet", external: true },
+    spread: { href: "#holders", label: "All holders" },
+    launch: { href: explorerTx(chain, l.tx_hash), label: "Launch transaction", external: true },
+    fees: { href: "#contracts", label: "Fee settings" },
+  };
   const poolKey = { currency0: l.quote as Address, currency1: l.token as Address, fee: l.lp_fee, tickSpacing: TICK_SPACING, hooks: NATIVE as Address };
   const priceUsd = l.price_usd;
   const chainLabel = CHAIN_LABELS[chain];
@@ -89,8 +109,14 @@ export default async function TokenPage({ params }: { params: Promise<{ chain: s
 
   const supplyLabel = fmtCompact(Number(BigInt(l.supply)) / 1e18, 0);
   const feeRoute = mode === "free" ? "No trading fee" : `${pipsToPct(l.lp_fee)} trading fee → ${mode === "burn" ? "burned" : mode === "split" ? "beneficiaries" : "beneficiary"}`;
+  // the trade box's own wording: short, no arrow
+  const tradeFee = mode === "free" ? "None" : `${pipsToPct(l.lp_fee)}, ${mode === "burn" ? "burned" : mode === "split" ? `to ${l.recipients.length} recipients` : "to the recipient"}`;
   const swapSite = SWAP_SITES[chain];
   const utility = "inline-flex min-h-9 items-center gap-1.5 rounded-lg border border-line px-2.5 text-xs text-muted hover:border-line-strong hover:text-ink";
+  // a chip on the cover: dark glass, so it reads over any banner in either theme (display is set where it is used)
+  const glass = "h-7 shrink-0 items-center gap-1.5 rounded-full bg-black/45 px-2.5 text-[11px] font-medium text-white ring-1 ring-white/15 backdrop-blur-md";
+  // one segment of the action bar; display is set per segment, so a phone-hidden one never carries two display classes
+  const segment = "items-center gap-1.5 px-3 transition-colors hover:bg-ink/5 hover:text-ink focus-visible:-outline-offset-2 motion-reduce:transition-none";
 
   // Facts-only structured data (on-chain fields + creator metadata, no scores).
   // Escaped for the script sink: creator-supplied name/description must not
@@ -115,45 +141,94 @@ export default async function TokenPage({ params }: { params: Promise<{ chain: s
   return (
     <>
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: jsonLd }} />
-      <main className="mx-auto max-w-6xl px-4 pt-5 pb-28 sm:pt-7 lg:pb-16">
-        <nav aria-label="Breadcrumb" className="mb-5 flex min-h-8 items-center justify-between gap-3 text-xs text-muted">
-          <Link href="/#launches" className="inline-flex items-center gap-2 hover:text-ink"><ArrowLeft size={13} /> All launches</Link>
-          <span className="flex items-center gap-2"><span>{chainLabel}</span><span aria-hidden>·</span><span>Uniswap v4</span></span>
-        </nav>
-
-        <header className="mb-6 flex flex-wrap items-center justify-between gap-x-6 gap-y-4">
-          <div className="flex min-w-0 items-center gap-3 sm:gap-4">
-            {/* the mark and name the market row morphs into (see TokenMorph); PendingTokenHeader holds the same frame while loading */}
-            <MorphAvatar chain={l.chain} token={l.token}>
-              <TokenAvatar chain={l.chain} token={l.token} symbol={l.symbol} image={l.image_url} size={56} className="shrink-0 rounded-2xl" />
-            </MorphAvatar>
-            <div className="min-w-0">
-              <MorphName chain={l.chain} token={l.token}>
-                <h1 className="break-words font-display text-2xl font-bold tracking-[-0.03em] text-ink sm:text-3xl">{l.name}</h1>
-              </MorphName>
-              <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted"><span className="font-mono text-body">${l.symbol}</span><span aria-hidden>·</span>{quote.key === "twig" ? <TwigBadge label="Paired with TWIG" /> : quote.key === "gitlawb" ? <GitlawbBadge label="Paired with GITLAWB" /> : quote.key === "museworld" ? <MuseworldBadge label="Paired with MUSEWORLD" /> : <span>Paired with {quote.symbol}</span>}{unlisted ? <UnlistedPairBadge symbol={quote.symbol} /> : null}<span aria-hidden>·</span><span title={new Date(l.block_time).toUTCString()}>Launched {ago(l.block_time, now)} ago</span></div>
-            </div>
+      {/* the token's tint (from its logo) is a CSS variable per theme: the ring, the chart line, the proof marks. Never an action colour. */}
+      <div className="relative isolate overflow-x-clip [--tok:var(--tok-light)] dark:[--tok:var(--tok-dark)]" style={{ "--tok-light": tint.light, "--tok-dark": tint.dark } as React.CSSProperties}>
+      <main className="bb-mid bb-page pt-5 pb-28 sm:pt-7 lg:pb-16">
+        {/* The hero: the same cover the token wears on its market card (the creator's banner, else its logo's colours),
+            the way back and the chain on it, and the mark over its lower edge. PendingTokenHeader holds this frame while
+            the page loads, so the mark and name that morph in from the market row land in place. */}
+        <header className="relative mb-6 overflow-hidden rounded-3xl border border-line bg-card">
+          <div className="relative h-24 overflow-hidden sm:h-28">
+            <Banner token={l.token} image={l.image_url} banner={l.banner_url} />
+            {/* the cover melts into the card, so the mark and the name read on one surface */}
+            <span aria-hidden="true" className="pointer-events-none absolute inset-x-0 bottom-0 h-3/4 bg-linear-to-b from-transparent via-card/50 to-card" />
+            <nav aria-label="Breadcrumb" className="absolute inset-x-3 top-3 flex items-center justify-between gap-2 sm:inset-x-4 sm:top-4">
+              <Link href="/#launches" className={`inline-flex ${glass} transition-colors hover:bg-black/60 motion-reduce:transition-none`}><ArrowLeft size={13} aria-hidden="true" /> All launches</Link>
+              <span className="flex min-w-0 items-center gap-1.5">
+                <span className={`inline-flex ${glass}`}><ChainLogo chain={chain} size={14} />{chainLabel}</span>
+                <span className={`hidden sm:inline-flex ${glass}`}>Uniswap v4</span>
+              </span>
+            </nav>
           </div>
-          <div className="flex max-w-full flex-wrap items-center gap-2">
-            <CopyChip value={l.token} className="!min-h-9 !rounded-lg" />
-            <a href={explorerAddress(chain, l.token)} target="_blank" rel="noreferrer" className={utility}>{explorerName(chain)}<ArrowUpRight size={12} /></a>
-            <a href={`https://x.com/intent/post?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(`${SITE_URL}/t/${chain}/${l.token}`)}`} target="_blank" rel="noreferrer" className={utility} aria-label="Share token on X"><Share2 size={13} /> Share</a>
+          <div className="grid gap-x-8 gap-y-4 px-4 pb-5 sm:px-6 sm:pb-6 md:grid-cols-[minmax(0,1fr)_auto] md:items-end">
+            <div className="flex min-w-0 items-start gap-4">
+              {/* the ring takes the tint; the mark and name inside are what the market row morphs into (see TokenMorph) */}
+              <span className="relative -mt-11 shrink-0 rounded-[22px] border-2 bg-card p-[3px] shadow-[0_10px_28px_-12px_rgb(0_0_0/0.55)] sm:-mt-12" style={{ borderColor: "var(--tok)" }}>
+                <MorphAvatar chain={l.chain} token={l.token}>
+                  <TokenAvatar chain={l.chain} token={l.token} symbol={l.symbol} image={l.image_url} size={72} className="shrink-0 rounded-2xl" />
+                </MorphAvatar>
+              </span>
+              <div className="min-w-0 pt-2">
+                <MorphName chain={l.chain} token={l.token}>
+                  <h1 className="break-words font-display text-2xl font-bold tracking-[-0.03em] text-ink sm:text-3xl">{l.name}</h1>
+                </MorphName>
+                {/* the chain is on the cover; here the ticker, the pair and the age. Phones wrap these, so they drop the dots that would dangle at a line's end. */}
+                <p className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[13px] text-muted sm:gap-x-1.5">
+                  <span className="font-mono text-body">{l.symbol}</span>
+                  <span aria-hidden="true" className="max-sm:hidden">·</span>
+                  {quote.key === "twig" ? <TwigBadge label="Paired with TWIG" /> : quote.key === "gitlawb" ? <GitlawbBadge label="Paired with GITLAWB" /> : quote.key === "museworld" ? <MuseworldBadge label="Paired with MUSEWORLD" /> : <span>paired with {quote.symbol}</span>}
+                  {unlisted ? <UnlistedPairBadge symbol={quote.symbol} /> : null}
+                  <span aria-hidden="true" className="max-sm:hidden">·</span>
+                  <span title={new Date(l.block_time).toUTCString()}>launched {ago(l.block_time, now)} ago</span>
+                </p>
+              </div>
+            </div>
+            <div className="md:row-span-2 md:text-right">
+              <p className="text-xs text-muted">Market cap</p>
+              <p className="mt-1 font-mono text-3xl font-bold tracking-[-0.03em] text-ink tnum sm:text-4xl" title={cap.usd !== null ? fmtUsd(cap.usd) : cap.main}>{cap.main}</p>
+              <p className="mt-1 font-mono text-[11px] text-muted tnum">{cap.detail}</p>
+              <p className="mt-2.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted md:justify-end">
+                <span className="text-sm"><ChangeChip v={l.change_from_launch} plain /> <span className="text-muted">since launch</span></span>
+                <span aria-hidden="true">·</span>
+                <span><span className="font-mono text-body tnum">{l.holders.toLocaleString("en-US")}</span> holders, <span className="font-mono text-body tnum">{(l.buys + l.sells).toLocaleString("en-US")}</span> trades</span>
+              </p>
+            </div>
+            <div className="flex max-w-full flex-wrap items-center gap-2">
+              <WatchButton token={{ chain, token: l.token, name: l.name, symbol: l.symbol }} labelled />
+              {/* the token's links as one bar, the Watch button's height: share, copy the address, the explorer */}
+              <div className="inline-flex h-10 max-w-full items-stretch overflow-hidden rounded-xl border border-line bg-card text-xs font-medium text-body sm:h-9">
+                <a href={`https://x.com/intent/post?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(`${SITE_URL}/t/${chain}/${l.token}`)}`} target="_blank" rel="noreferrer" className={`inline-flex ${segment}`} aria-label="Share token on X"><Share2 size={13} aria-hidden="true" /><span className="hidden sm:inline">Share</span></a>
+                <CopyChip value={l.token} className={`inline-flex ${segment} border-l border-line font-code`} />
+                {/* phones keep one row of actions; the explorer link is also in About & contracts */}
+                <a href={explorerAddress(chain, l.token)} target="_blank" rel="noreferrer" className={`hidden sm:inline-flex ${segment} border-l border-line`}>{explorerName(chain)}<ArrowUpRight size={13} aria-hidden="true" /></a>
+              </div>
+            </div>
           </div>
         </header>
 
-        <div className="grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_21rem] lg:gap-6 lg:grid-rows-[min-content_1fr]">
-          <div className="min-w-0 lg:col-start-1 lg:row-start-1">
-            <PriceChart key={`${chain}:${l.token}`} chain={chain} token={l.token} symbol={l.symbol} launchedAt={l.block_time} />
-            <dl className="mt-4 grid grid-cols-2 divide-x divide-line overflow-hidden rounded-xl border border-line bg-card sm:grid-cols-4">
-              <Stat k={priceUsd !== null ? "Price / USD" : `Price / ${quote.symbol}`} v={priceUsd !== null ? fmtUsd(priceUsd) : `${fmtPrice(l.price_quote)} ${quote.symbol}`} sub={`${fmtPrice(l.price_quote)} ${quote.symbol}`} />
-              <Stat k="Volume / all time" v={l.volume_usd !== null ? marketUsd(l.volume_usd) : fmtQuote(l.volume_quote, quote.decimals, quote.symbol)} sub={fmtQuote(l.volume_quote, quote.decimals, quote.symbol)} />
-              <Stat k="Buys / sells" v={<><span className="text-up">{count(l.buys)}</span><span className="px-1 text-muted">/</span><span className="text-down-ink">{count(l.sells)}</span></>} sub={`${count(l.buys + l.sells)} total trades`} />
-              <Stat k="Since launch" v={<ChangeChip v={l.change_from_launch} plain />} sub="Market cap change" />
+        <div className="grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_23.75rem] lg:gap-6 lg:grid-rows-[min-content_1fr]">
+          <div className="min-w-0 space-y-4 lg:col-start-1 lg:row-start-1">
+            <TokenChart chain={chain} token={l.token} symbol={l.symbol} poolId={l.pool_id} quote={l.quote} launchedAt={l.block_time} hasTrades={l.buys + l.sells > 0} />
+            {/* hairlines between the cells come from the gap over a line-coloured grid, so they hold in both layouts */}
+            <dl className="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-line bg-line sm:grid-cols-4">
+              <Stat k="Price" v={priceUsd !== null ? fmtUsd(priceUsd) : `${fmtPrice(l.price_quote)} ${quote.symbol}`} sub={`${fmtPrice(l.price_quote)} ${quote.symbol}`} />
+              <Stat k="24h volume" v={l.volume_24h_usd !== null ? marketUsd(l.volume_24h_usd) : fmtQuote(l.volume_24h, quote.decimals, quote.symbol)} sub={fmtQuote(l.volume_24h, quote.decimals, quote.symbol)} />
+              <Stat k="Total volume" v={l.volume_usd !== null ? marketUsd(l.volume_usd) : fmtQuote(l.volume_quote, quote.decimals, quote.symbol)} sub={fmtQuote(l.volume_quote, quote.decimals, quote.symbol)} />
+              <Stat k="Buys and sells" v={<><span className="text-up">{count(l.buys)}</span><span className="px-1 text-faint">/</span><span className="text-down-ink">{count(l.sells)}</span></>} sub={`${count(l.buys + l.sells)} trades`}>
+                <BuySellBar buys={l.buys} sells={l.sells} />
+              </Stat>
             </dl>
+            <TokenProof facts={proof.facts} holdersReady={proof.holdersReady} links={proofLinks} bar={proof.holdersReady && holders ? { top10Bps: holders.top10Bps, poolBps: holders.poolBps } : null} />
           </div>
 
           <aside className="min-w-0 space-y-4 lg:sticky lg:top-24 lg:col-start-2 lg:row-span-2 lg:row-start-1">
-            <TradePanel chain={chain} token={l.token as Address} symbol={l.symbol} poolKey={poolKey} quote={quote} ethUsd={usd} />
+            {/* a beam in the token's colour travels the trade box border; the box itself keeps the action colours */}
+            <div className="relative rounded-2xl">
+              <TradePanel chain={chain} token={l.token as Address} symbol={l.symbol} poolKey={poolKey} poolId={l.pool_id as `0x${string}`} feeRoute={tradeFee} quote={quote} ethUsd={usd} />
+              <BorderBeam size={120} duration={9} colorFrom="var(--tok)" colorTo="var(--tok)" />
+            </div>
+            {/* the token at a glance beside the trade box, as other launchpads keep it; the full record is in the About tab */}
+            <TokenAbout chain={chain} token={l.token} symbol={l.symbol} description={l.description} website={l.website} x_handle={l.x_handle} launcher={l.launcher} launchedAt={l.block_time} now={now} swap={swapSite ? { name: swapSite.name, url: swapSite.url(l.token) } : null} />
             <LaunchReceipt chain={chain} symbol={l.symbol} supply={supplyLabel} txHash={l.tx_hash} />
             <CollectPanel chain={chain} quote={quote} token={l.token as Address} tokenId={l.token_id} symbol={l.symbol} lpFee={l.lp_fee} recipients={l.recipients} collectedQuote={l.fees_quote_collected} collectedToken={l.fees_token_collected} burnedQuote={l.fees_quote_burned} burnedToken={l.fees_token_burned} priceQuote={l.price_quote} ethUsd={usd} />
           </aside>
@@ -192,17 +267,27 @@ export default async function TokenPage({ params }: { params: Promise<{ chain: s
           </div>
         </div>
       </main>
-      <MobileBuyBar symbol={l.symbol} mcap={capDisplay(l.fdv_quote, l.quote_usd, { key: l.quote_key, symbol: l.quote_symbol, decimals: l.quote_decimals }).compact} />
+      </div>
+      <MobileBuyBar symbol={l.symbol} mcap={cap.compact} />
     </>
   );
 }
 
-function Stat({ k, v, sub }: { k: string; v: React.ReactNode; sub: string }) {
-  return <div className="min-w-0 px-4 py-3"><dt className="text-[10px] text-muted">{k}</dt><dd className="mt-1 truncate font-mono text-sm font-bold text-ink tnum">{v}</dd><dd className="mt-1 truncate font-mono text-[10px] text-muted tnum" title={sub}>{sub}</dd></div>;
+function Stat({ k, v, sub, children }: { k: string; v: React.ReactNode; sub: string; children?: React.ReactNode }) {
+  return <div className="min-w-0 bg-card px-4 py-3.5"><dt className="text-[11px] text-muted">{k}</dt><dd className="mt-1.5 truncate font-mono text-[15px] font-bold tracking-tight text-ink tnum">{v}</dd><dd className="mt-1 truncate font-mono text-[10px] text-muted tnum" title={sub}>{sub}</dd>{children}</div>;
+}
+/** Buys against sells as one thin bar; no trades draws an empty track, never an even split. */
+function BuySellBar({ buys, sells }: { buys: number; sells: number }) {
+  const trades = buys + sells;
+  const share = trades ? Math.round((buys / trades) * 100) : 0;
+  return <dd className="mt-2 flex h-1 gap-px overflow-hidden rounded-full" title={trades ? `${share}% of trades are buys` : "No trades yet"}>
+    {trades ? <><span className="bg-up" style={{ width: `${(buys / trades) * 100}%` }} /><span className="flex-1 bg-down" /></> : <span className="flex-1 bg-line-strong" />}
+    <span className="sr-only">{trades ? `${share}% of trades are buys` : "No trades yet"}</span>
+  </dd>;
 }
 function Row({ k, v }: { k: string; v: React.ReactNode }) {
   return <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-3"><dt className="text-muted">{k}</dt><dd className="min-w-0 break-words text-right font-mono text-body tnum">{v}</dd></div>;
 }
 function A({ href, children }: { href: string; children: React.ReactNode }) {
-  return <a href={href} target="_blank" rel="noreferrer" className="text-ink underline decoration-line-strong underline-offset-4 hover:decoration-ink">{children}</a>;
+  return <a href={href} target="_blank" rel="noreferrer" className="font-code text-ink underline decoration-line-strong underline-offset-4 hover:decoration-ink">{children}</a>;
 }
diff --git a/app/src/components/launchpad/CollectPanel.tsx b/app/src/components/launchpad/CollectPanel.tsx
index 7d9057d9..576b6306 100644
--- a/app/src/components/launchpad/CollectPanel.tsx
+++ b/app/src/components/launchpad/CollectPanel.tsx
@@ -2,7 +2,8 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { useAccount, useConfig, useReadContracts } from "wagmi";
+import { useConfig, useReadContracts } from "wagmi";
+import { useHydratedAccount } from "@/lib/useHydratedAccount";
 import { getPublicClient, getWalletClient } from "wagmi/actions";
 import { type Address, type Hex } from "viem";
 import { btn } from "@/components/ui";
@@ -54,7 +55,7 @@ export default function CollectPanel({
 }) {
   const router = useRouter();
   const config = useConfig();
-  const { address, chainId } = useAccount();
+  const { address, chainId } = useHydratedAccount();
   const CHAIN = CHAINS[chain];
   const LOCKER_ADDRESS = launchpad(chain).locker;
   const quoteUsd = quoteUsdOf(quote, ethUsd);
@@ -119,7 +120,7 @@ export default function CollectPanel({
   ].filter((c) => c.raw > 0n);
 
   return (
-    <section className="rounded-2xl bg-paper border border-line p-5 space-y-3">
+    <section className="rounded-2xl border border-line bg-card p-5 space-y-3">
       <div className="flex items-baseline justify-between gap-3">
         <h2 className="text-sm font-semibold text-ink">Where the fees go</h2>
         <span className="font-mono font-bold text-ink tnum">{pipsToPct(lpFee)}</span>
@@ -140,7 +141,7 @@ export default function CollectPanel({
                     {burn ? (
                       <span className="text-warm-ink font-medium">Burned</span>
                     ) : (
-                      <a href={explorerAddress(chain, r.payout)} target="_blank" rel="noreferrer" className="font-mono text-ink hover:underline underline-offset-2 truncate">
+                      <a href={explorerAddress(chain, r.payout)} target="_blank" rel="noreferrer" className="font-code text-ink hover:underline underline-offset-2 truncate">
                         {address && r.payout.toLowerCase() === address.toLowerCase() ? "You" : shortAddr(r.payout)}
                       </a>
                     )}
@@ -163,8 +164,9 @@ export default function CollectPanel({
                 <dd className="text-[11px] text-body leading-relaxed">Both sides sent to the dead address. Nobody can claim them.</dd>
               ) : (
                 <>
-                  <dd className="font-mono font-bold text-sm tnum text-warm-ink break-words">{fq(burned.quote)}</dd>
-                  <dd className="font-mono font-bold text-sm tnum text-warm-ink break-words">{ft(burned.token)}</dd>
+                  {/* amber only once something has actually burned; zero reads as the plain fact it is */}
+                  <dd className={`font-mono font-bold text-sm tnum break-words ${burned.quote > 0n ? "text-warm-ink" : "text-muted"}`}>{fq(burned.quote)}</dd>
+                  <dd className={`font-mono font-bold text-sm tnum break-words ${burned.token > 0n ? "text-warm-ink" : "text-muted"}`}>{ft(burned.token)}</dd>
                 </>
               )}
             </div>
@@ -199,7 +201,7 @@ export default function CollectPanel({
       {phase.k === "sent" ? (
         <p className="text-[11px] text-muted">
           tx{" "}
-          <a href={explorerTx(chain, phase.hash)} target="_blank" rel="noreferrer" className="font-mono underline underline-offset-2">
+          <a href={explorerTx(chain, phase.hash)} target="_blank" rel="noreferrer" className="font-code underline underline-offset-2">
             {phase.hash.slice(0, 10)}…
           </a>
         </p>
diff --git a/app/src/components/launchpad/CopyChip.tsx b/app/src/components/launchpad/CopyChip.tsx
index 0e7a6a8c..70da8a0f 100644
--- a/app/src/components/launchpad/CopyChip.tsx
+++ b/app/src/components/launchpad/CopyChip.tsx
@@ -1,26 +1,36 @@
 "use client";
 
 import { useState } from "react";
+import { Check, Copy } from "lucide-react";
 
-export default function CopyChip({ value, label, className = "" }: { value: string; label?: string; className?: string }) {
+/** The chip's own look. A `className` replaces it entirely, so a toolbar can draw the button as one of its segments. */
+const CHIP = "inline-flex h-7 items-center gap-1.5 rounded-full border border-line bg-card px-2.5 font-code text-[11px] text-body hover:border-line-strong hover:text-ink";
+
+export default function CopyChip({ value, label, className = CHIP }: { value: string; label?: string; className?: string }) {
   const [done, setDone] = useState(false);
+  const shown = label ?? `${value.slice(0, 6)}…${value.slice(-4)}`;
   return (
-    <button
-      type="button"
-      onClick={async () => {
-        try {
-          await navigator.clipboard.writeText(value);
-          setDone(true);
-          setTimeout(() => setDone(false), 1200);
-        } catch {
-          /* clipboard blocked */
-        }
-      }}
-      className={`inline-flex items-center gap-1.5 h-7 px-2.5 rounded-full border border-line bg-card text-[11px] font-mono text-body hover:text-ink hover:border-line-strong ${className}`}
-      title={value}
-    >
-      {label ?? `${value.slice(0, 6)}…${value.slice(-4)}`}
-      <span className="text-faint">{done ? "✓" : "⧉"}</span>
-    </button>
+    <>
+      <button
+        type="button"
+        onClick={async () => {
+          try {
+            await navigator.clipboard.writeText(value);
+            setDone(true);
+            setTimeout(() => setDone(false), 1200);
+          } catch {
+            /* clipboard blocked */
+          }
+        }}
+        className={className}
+        title={value}
+        aria-label={`Copy ${shown}`}
+      >
+        {shown}
+        {done ? <Check size={13} aria-hidden="true" className="shrink-0 text-up" /> : <Copy size={13} aria-hidden="true" className="shrink-0 text-faint" />}
+      </button>
+      {/* outside the button: a button's children are presentational, so a live region inside it may never be read */}
+      <span role="status" className="sr-only">{done ? "Copied" : ""}</span>
+    </>
   );
 }
diff --git a/app/src/components/launchpad/HoldersPanel.tsx b/app/src/components/launchpad/HoldersPanel.tsx
index 9955e5b2..ed126eaf 100644
--- a/app/src/components/launchpad/HoldersPanel.tsx
+++ b/app/src/components/launchpad/HoldersPanel.tsx
@@ -16,24 +16,27 @@ const TAG_STYLE: Record<string, string> = {
   sniper: "border-warm/40 bg-warm-soft text-warm-ink",
   whale: "border-line-strong bg-card text-ink",
 };
+/** Tags read as words in sentence case, not shouted labels. */
+const TAG_LABEL: Record<string, string> = { creator: "Creator", pool: "Pool", burn: "Burn", sniper: "Sniper", whale: "Whale" };
 const NOTE_STYLE = { warn: "border-warm/40 bg-warm-soft text-warm-ink", info: "border-line bg-card text-body", good: "border-holder-good-line bg-holder-good-bg text-up" } as const;
 
 export default function HoldersPanel({ chain, symbol, p, embedded = false }: { chain: ChainKey; symbol: string; p: HolderPanel | null; embedded?: boolean }) {
   if (!p || !holderFactsAvailable(p)) return <section aria-label="holders" className={embedded ? "p-5" : "rounded-2xl border border-line bg-paper p-5"}><div className="flex items-center justify-between gap-3"><h2 className="text-sm font-semibold text-ink">Supply distribution</h2><span className="text-[11px] text-muted">Awaiting transfer history</span></div><div className="flex min-h-44 flex-col items-center justify-center gap-2 text-center"><UsersRound size={24} strokeWidth={1.4} className="mb-1 text-muted" /><h3 className="text-sm font-medium text-ink">The holder picture is not ready yet.</h3><p className="max-w-sm text-xs leading-relaxed text-muted text-pretty">Concentration, creator holdings and early buyers appear after transfer history is indexed. Missing data is not a clean bill of health.</p></div></section>;
   const supply = Number(BigInt(p.supply)) / 1e18;
   return (
-    <section className={embedded ? "overflow-hidden bg-paper" : "overflow-hidden rounded-2xl border border-line bg-paper"} aria-label="holders">
-      <div className="px-4 pt-4 pb-3 flex items-baseline justify-between gap-3 flex-wrap">
-        <h2 className="font-semibold text-ink">Holders</h2>
-        <span className="text-xs text-muted">{p.synced ? "from every transfer of the token, live" : "indexing transfer history…"}</span>
+    <section className={embedded ? "overflow-hidden" : "overflow-hidden rounded-2xl border border-line bg-card"} aria-label="holders">
+      <div className="px-5 pt-4 pb-3 flex items-baseline justify-between gap-3 flex-wrap">
+        {/* inside the Holders tab the tab already names the panel; the heading stays for the document outline */}
+        <h2 className={embedded ? "sr-only" : "text-sm font-semibold text-ink"}>Holders</h2>
+        <span className="text-[11px] text-muted">{p.synced ? "From every transfer of the token, live" : "Indexing transfer history…"}</span>
       </div>
-      <dl className="px-4 grid grid-cols-2 sm:grid-cols-4 gap-2.5">
+      <dl className="px-5 grid grid-cols-2 sm:grid-cols-4 gap-2.5">
         <Stat k="Holders" v={`${p.holders}`} />
         <Stat k="Top 10 hold" v={fmtShare(p.top10Bps)} warn={p.top10Bps >= 5000} />
         <Stat k="Creator holds" v={fmtShare(p.creator.bps)} sub={p.creator.sells > 0 ? `sold ${p.creator.sells}×` : "never sold"} warn={p.creator.bps >= 2000 || p.creator.sells > 0} />
         <Stat k="Sniped at launch" v={fmtShare(p.sniper.bps)} sub={`${p.sniper.wallets} wallet${p.sniper.wallets === 1 ? "" : "s"}`} warn={p.sniper.bps >= 1000} />
       </dl>
-      <ul className="px-4 pt-3 flex flex-wrap gap-1.5">
+      <ul className="px-5 pt-3 flex flex-wrap gap-1.5">
         {p.notes.filter((n) => !n.text.includes("no red flags")).map((n) => (
           <li key={n.text} className={`inline-flex items-center h-6 px-2 rounded-full border text-[11px] font-medium ${NOTE_STYLE[n.level]}`}>
             {n.text}
@@ -43,21 +46,21 @@ export default function HoldersPanel({ chain, symbol, p, embedded = false }: { c
       {p.top.length > 0 ? (
         <ol className="mt-3 border-t border-line divide-y divide-line">
           {p.top.map((h, i) => (
-            <li key={h.address} className="px-4 py-2 flex items-center gap-3 text-sm">
+            <li key={h.address} className="px-5 py-2.5 flex items-center gap-3 text-sm transition-colors hover:bg-ink/[0.03] motion-reduce:transition-none">
               <span className="w-5 text-right font-mono text-xs text-muted tnum">{i + 1}</span>
-              <a href={explorerAddress(chain, h.address)} target="_blank" rel="noreferrer" className="font-mono text-xs text-body hover:text-ink" title={h.address}>
+              <a href={explorerAddress(chain, h.address)} target="_blank" rel="noreferrer" className="font-code text-xs text-body hover:text-ink" title={h.address}>
                 {shortAddr(h.address)}
               </a>
               <span className="flex gap-1">
                 {h.tags.map((t) => (
-                  <span key={t} className={`inline-flex items-center h-5 px-1.5 rounded-full border text-[10px] font-semibold uppercase tracking-wide ${TAG_STYLE[t]}`}>
-                    {t}
+                  <span key={t} className={`inline-flex items-center h-5 px-1.5 rounded-md border text-[10px] font-medium ${TAG_STYLE[t]}`}>
+                    {TAG_LABEL[t] ?? t}
                   </span>
                 ))}
               </span>
               <span className="ml-auto flex items-center gap-2 min-w-0">
-                <span className="hidden sm:block h-1.5 w-24 rounded-full bg-paper overflow-hidden" aria-hidden>
-                  <span className="block h-full bg-ink" style={{ width: `${Math.min(100, h.bps / 100)}%` }} />
+                <span className="hidden sm:block h-1.5 w-24 rounded-full bg-line overflow-hidden" aria-hidden>
+                  <span className="block h-full rounded-full bg-[color:var(--tok,var(--color-ink))]" style={{ width: `${Math.min(100, h.bps / 100)}%` }} />
                 </span>
                 <span className="font-mono tnum text-xs text-muted hidden md:inline">{fmtCompact(Number(BigInt(h.balance)) / 1e18, 1)}</span>
                 <span className="font-mono tnum font-semibold text-ink w-14 text-right">{fmtShare(h.bps)}</span>
@@ -66,9 +69,9 @@ export default function HoldersPanel({ chain, symbol, p, embedded = false }: { c
           ))}
         </ol>
       ) : (
-        <p className="px-4 pb-4 pt-3 text-sm text-muted">{p.synced ? `Nobody holds ${symbol} outside the pool yet.` : "Holder list appears once the transfer history is indexed."}</p>
+        <p className="px-5 pb-4 pt-3 text-sm text-muted">{p.synced ? `Nobody holds ${symbol} outside the pool yet.` : "Holder list appears once the transfer history is indexed."}</p>
       )}
-      <p className="px-4 py-3 text-[11px] text-muted border-t border-line">
+      <p className="px-5 py-3 text-[11px] text-muted border-t border-line">
         {fmtShare(p.poolBps)} of the {fmtCompact(supply, 0)} supply is in the locked Uniswap v4 pool. Pool, locker and burn addresses are never counted as holders.
       </p>
     </section>
diff --git a/app/src/components/launchpad/LaunchReceipt.tsx b/app/src/components/launchpad/LaunchReceipt.tsx
index 403bfce6..62a006ea 100644
--- a/app/src/components/launchpad/LaunchReceipt.tsx
+++ b/app/src/components/launchpad/LaunchReceipt.tsx
@@ -1,20 +1,29 @@
-import { ArrowDown, ArrowUpRight, LockKeyhole } from "lucide-react";
+import { ArrowUpRight } from "lucide-react";
 import { launchpad } from "@/lib/launchpad/config";
 import { explorerAddress, explorerTx, type ChainKey } from "@/lib/chainPublic";
 
-/** A receipt of the launch mechanics, not a claim about current wallet balances. */
+/** A receipt of the launch mechanics, not a claim about current wallet balances. Set like one: dotted leaders, mono figures. */
 export default function LaunchReceipt({ chain, symbol, supply, txHash }: { chain: ChainKey; symbol: string; supply: string; txHash: string }) {
   const locker = launchpad(chain).locker;
-  return <section className="overflow-hidden rounded-2xl border border-line bg-paper" aria-labelledby="receipt-title">
-    <div className="flex min-h-12 items-center justify-between border-b border-line px-5"><h2 id="receipt-title" className="text-sm font-semibold text-ink">The launch receipt</h2><a href={explorerTx(chain, txHash)} target="_blank" rel="noreferrer" className="flex size-9 items-center justify-center text-muted hover:text-ink" aria-label="Verify the launch transaction"><ArrowUpRight size={16} /></a></div>
-    <div className="px-5 py-4">
-      <div className="flex items-baseline justify-between gap-3"><span className="text-xs text-muted">Fixed supply</span><span className="truncate font-mono text-sm text-ink tnum" title={`${supply} ${symbol}`}>{supply} {symbol}</span></div>
-      <div className="flex items-center gap-3 py-2 text-[10px] text-muted"><ArrowDown size={13} className="ml-1" /><span>100% deposited at launch</span></div>
-      <a href={locker ? explorerAddress(chain, locker) : "/rules#contracts"} target={locker ? "_blank" : undefined} rel={locker ? "noreferrer" : undefined} className="flex items-center justify-between gap-3 rounded-xl border border-line-strong px-3 py-3 hover:bg-card">
-        <div><span className="flex items-center gap-2 text-xs font-medium text-ink"><LockKeyhole size={13} /> Liquidity position</span><span className="mt-1 block text-[11px] text-muted">Ownerless locker · read the code ↗</span></div><span className="font-mono text-xs font-bold text-up">Forever</span>
-      </a>
-      <div className="mt-4 flex items-center justify-between border-t border-dashed border-line-strong pt-4"><span className="text-xs text-muted line-through decoration-faint">Platform fee</span><span className="font-mono text-xl font-bold text-up tnum">$0</span></div>
-      <p className="mt-1 text-[11px] leading-relaxed text-muted text-pretty">No withdrawal key. No platform cut. This does not prevent token prices from falling.</p>
+  return <section className="overflow-hidden rounded-2xl border border-line bg-card" aria-labelledby="receipt-title">
+    <div className="flex items-center justify-between gap-3 px-5 pt-4">
+      <h2 id="receipt-title" className="text-sm font-semibold text-ink">The launch receipt</h2>
+      <a href={explorerTx(chain, txHash)} target="_blank" rel="noreferrer" className="inline-flex min-h-8 items-center gap-1 text-xs text-muted transition-colors hover:text-ink motion-reduce:transition-none" aria-label="Verify the launch transaction">Launch tx<ArrowUpRight size={12} aria-hidden="true" /></a>
     </div>
+    <dl className="px-5 pb-4 pt-2 text-xs">
+      <Line k="Fixed supply" v={<span title={`${supply} ${symbol}`}>{supply} {symbol}</span>} />
+      <Line k="Into the pool at launch" v="100%" />
+      <Line k="Liquidity" v={<a href={locker ? explorerAddress(chain, locker) : "/rules#contracts"} target={locker ? "_blank" : undefined} rel={locker ? "noreferrer" : undefined} title="An ownerless locker holds the position. Read the code." className="inline-flex items-center gap-1 text-up underline decoration-up/30 underline-offset-4 transition-colors hover:decoration-up motion-reduce:transition-none">Locked forever<ArrowUpRight size={12} aria-hidden="true" /></a>} />
+      <Line k="Platform fee" v={<span className="text-up">$0</span>} />
+    </dl>
+    <p className="border-t border-dashed border-line-strong px-5 py-3 text-[11px] leading-relaxed text-muted text-pretty">No withdrawal key. No platform cut. This does not prevent token prices from falling.</p>
   </section>;
 }
+
+function Line({ k, v }: { k: string; v: React.ReactNode }) {
+  return <div className="flex items-baseline gap-2 py-1.5">
+    <dt className="shrink-0 text-muted">{k}</dt>
+    <span aria-hidden="true" className="min-w-4 flex-1 translate-y-[-3px] border-b border-dotted border-line-strong" />
+    <dd className="min-w-0 truncate font-mono font-semibold text-ink tnum">{v}</dd>
+  </div>;
+}
diff --git a/app/src/components/launchpad/PendingTokenHeader.tsx b/app/src/components/launchpad/PendingTokenHeader.tsx
index a467af92..f0545111 100644
--- a/app/src/components/launchpad/PendingTokenHeader.tsx
+++ b/app/src/components/launchpad/PendingTokenHeader.tsx
@@ -11,31 +11,45 @@ import { getPendingToken, pendingTokenFor, subscribePendingToken } from "@/lib/l
  * The token page's loading header. When the visitor arrived by tapping a market row, it already
  * shows that token's mark and name, at the same size and place as the real header, so the morph
  * from the row lands here and the page fills in around it. Otherwise it is a plain skeleton.
+ * Keep the cover's height, the ring and the type sizes in step with the hero in app/t/[chain]/[token]/page.tsx.
  */
 export default function PendingTokenHeader() {
   const pathname = usePathname();
   const note = useSyncExternalStore(subscribePendingToken, getPendingToken, () => null);
   const p = pendingTokenFor(pathname, note);
   return (
-    <header className="mb-6 flex flex-wrap items-center justify-between gap-x-6 gap-y-4">
-      <div className="flex min-w-0 items-center gap-3 sm:gap-4">
-        {p ? (
-          <MorphAvatar chain={p.chain} token={p.token}>
-            <TokenAvatar chain={p.chain} token={p.token} symbol={p.symbol} image={p.image} size={56} className="shrink-0 rounded-2xl" />
-          </MorphAvatar>
-        ) : (
-          <Sk className="size-14 shrink-0 rounded-2xl" />
-        )}
-        <div className="min-w-0">
-          {p ? (
-            <MorphName chain={p.chain} token={p.token}>
-              <h1 className="break-words font-display text-2xl font-bold tracking-[-0.03em] text-ink sm:text-3xl">{p.name}</h1>
-            </MorphName>
-          ) : (
-            <Sk className="h-8 w-48" />
-          )}
-          <Sk className="mt-2 h-3 w-60 max-w-full" />
+    <header className="relative mb-6 overflow-hidden rounded-3xl border border-line bg-card">
+      {/* the cover's place; the token's own cover arrives with the page */}
+      <span aria-hidden="true" className="bb-skel block h-24 sm:h-28" />
+      <div className="grid gap-x-8 gap-y-4 px-4 pb-5 sm:px-6 sm:pb-6 md:grid-cols-[minmax(0,1fr)_auto] md:items-end">
+        <div className="flex min-w-0 items-start gap-4">
+          {/* the tint is not known yet: the ring waits in the neutral line colour */}
+          <span className="relative -mt-11 shrink-0 rounded-[22px] border-2 bg-card p-[3px] sm:-mt-12" style={{ borderColor: "var(--tok, var(--color-line-strong))" }}>
+            {p ? (
+              <MorphAvatar chain={p.chain} token={p.token}>
+                <TokenAvatar chain={p.chain} token={p.token} symbol={p.symbol} image={p.image} size={72} className="shrink-0 rounded-2xl" />
+              </MorphAvatar>
+            ) : (
+              <Sk className="size-[72px] shrink-0 rounded-2xl" />
+            )}
+          </span>
+          <div className="min-w-0 pt-2">
+            {p ? (
+              <MorphName chain={p.chain} token={p.token}>
+                <h1 className="break-words font-display text-2xl font-bold tracking-[-0.03em] text-ink sm:text-3xl">{p.name}</h1>
+              </MorphName>
+            ) : (
+              <Sk className="h-8 w-48" />
+            )}
+            <Sk className="mt-2 h-3.5 w-56 max-w-full" />
+          </div>
         </div>
+        <div className="space-y-2 md:row-span-2 md:flex md:flex-col md:items-end">
+          <Sk className="h-3 w-20" />
+          <Sk className="h-9 w-40" />
+          <Sk className="h-3 w-28" />
+        </div>
+        <div className="flex flex-wrap gap-2">{[88, 76, 120, 96].map((w) => <Sk key={w} className="h-9 rounded-lg" style={{ width: w }} />)}</div>
       </div>
     </header>
   );
diff --git a/app/src/components/launchpad/TokenAbout.tsx b/app/src/components/launchpad/TokenAbout.tsx
new file mode 100644
index 00000000..4d04e6a3
--- /dev/null
+++ b/app/src/components/launchpad/TokenAbout.tsx
@@ -0,0 +1,56 @@
+import { ArrowUpRight, Globe } from "lucide-react";
+import CopyChip from "./CopyChip";
+import { XMark } from "./BrandMarks";
+import { safeSocials } from "@/lib/launchpad/socials";
+import { explorerAddress, shortAddr, type ChainKey } from "@/lib/chainPublic";
+import { ago } from "@/lib/launchpad/time";
+
+/**
+ * The token at a glance, beside the trade box: what the creator wrote, where to find them, and who launched it.
+ * The full record (pool, fee route, supply, launch transaction) stays in the About & contracts tab.
+ */
+export default function TokenAbout({ chain, token, symbol, description, website, x_handle, launcher, launchedAt, now, swap }: {
+  chain: ChainKey;
+  token: string;
+  symbol: string;
+  description: string | null;
+  website: string | null;
+  x_handle: string | null;
+  launcher: string;
+  launchedAt: string;
+  now: number;
+  swap: { name: string; url: string } | null;
+}) {
+  const { x, site, host } = safeSocials({ website, x_handle });
+  return (
+    <section aria-labelledby="token-about-heading" className="rounded-2xl border border-line bg-card p-5">
+      <h2 id="token-about-heading" className="text-sm font-semibold text-ink">About {symbol}</h2>
+      <p className={`mt-2 whitespace-pre-wrap break-words text-[13px] leading-relaxed text-pretty ${description ? "text-body" : "text-muted"}`}>
+        {description || "The creator has not added a description yet."}
+      </p>
+      {x || site || swap ? (
+        <div className="mt-3 flex flex-wrap gap-2">
+          {x ? <a href={`https://x.com/${x}`} target="_blank" rel="noopener noreferrer nofollow" className={chip}><XMark />@{x}</a> : null}
+          {site ? <a href={site} target="_blank" rel="noopener noreferrer nofollow" className={chip}><Globe size={13} aria-hidden="true" /><span className="max-w-40 truncate">{host}</span></a> : null}
+          {swap ? <a href={swap.url} target="_blank" rel="noopener noreferrer" className={chip}>Open in {swap.name}<ArrowUpRight size={12} aria-hidden="true" /></a> : null}
+        </div>
+      ) : null}
+      <dl className="mt-4 divide-y divide-line border-t border-line text-xs">
+        <div className="flex items-center justify-between gap-3 py-2.5">
+          <dt className="text-muted">Creator</dt>
+          <dd><a href={explorerAddress(chain, launcher)} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 font-code text-ink underline decoration-line-strong underline-offset-4 hover:decoration-ink">{shortAddr(launcher)}<ArrowUpRight size={11} aria-hidden="true" /></a></dd>
+        </div>
+        <div className="flex items-center justify-between gap-3 py-2.5">
+          <dt className="text-muted">Contract</dt>
+          <dd><CopyChip value={token} /></dd>
+        </div>
+        <div className="flex items-center justify-between gap-3 pt-2.5">
+          <dt className="text-muted">Launched</dt>
+          <dd className="font-mono text-body tnum"><time dateTime={launchedAt} title={new Date(launchedAt).toUTCString()}>{ago(launchedAt, now)} ago</time></dd>
+        </div>
+      </dl>
+    </section>
+  );
+}
+
+const chip = "inline-flex min-h-8 items-center gap-1.5 rounded-full border border-line px-3 text-xs font-medium text-body transition-colors hover:border-line-strong hover:text-ink motion-reduce:transition-none";
diff --git a/app/src/components/launchpad/TokenDetails.tsx b/app/src/components/launchpad/TokenDetails.tsx
index 3d0c21a2..65cc453b 100644
--- a/app/src/components/launchpad/TokenDetails.tsx
+++ b/app/src/components/launchpad/TokenDetails.tsx
@@ -14,12 +14,13 @@ export default function TokenDetails({ trades, holders, conversation, about }: {
     return () => { clearTimeout(timer); cancelAnimationFrame(frame); window.removeEventListener("hashchange", selectHash); };
   }, []);
   return (
-    <Tabs id="token-details" value={tab} onValueChange={(v) => setTab(String(v))} className="scroll-mt-24 overflow-hidden rounded-2xl border border-line bg-paper">
+    <Tabs id="token-details" value={tab} onValueChange={(v) => setTab(String(v))} className="scroll-mt-24 overflow-hidden rounded-2xl border border-line bg-card">
       <TabsList aria-label="Token details">
         <TabsTab value="trades">Trades</TabsTab>
         <TabsTab value="holders">Holders</TabsTab>
         <TabsTab value="conversation">Conversation</TabsTab>
-        <TabsTab value="about">About & contracts</TabsTab>
+        {/* the long label only where it fits beside the others */}
+        <TabsTab value="about"><span className="sm:hidden">About</span><span className="hidden sm:inline">About & contracts</span></TabsTab>
       </TabsList>
       <TabsPanel value="trades">{trades}</TabsPanel>
       <TabsPanel value="holders">{holders}</TabsPanel>
diff --git a/app/src/components/launchpad/TokenProof.tsx b/app/src/components/launchpad/TokenProof.tsx
new file mode 100644
index 00000000..23e2eb56
--- /dev/null
+++ b/app/src/components/launchpad/TokenProof.tsx
@@ -0,0 +1,77 @@
+import { ArrowUpRight, Coins, LockKeyhole, UserRound, UsersRound, Zap, type LucideIcon } from "lucide-react";
+import type { ProofFact, ProofKey } from "@/lib/launchpad/proof";
+import { fmtShare } from "@/lib/launchpad/holders";
+
+const ICON: Record<ProofKey, LucideIcon> = { lock: LockKeyhole, creator: UserRound, spread: UsersRound, launch: Zap, fees: Coins };
+/** A good fact reads green, a plain one in the token's colour, one worth a second look in amber. */
+const TONE: Record<ProofFact["tone"], string> = {
+  good: "bg-up-soft text-up",
+  info: "bg-paper text-[color:var(--tok,var(--color-ink))] ring-1 ring-line",
+  warn: "bg-warm-soft text-warm-ink",
+};
+export type ProofLink = { href: string; label: string; external?: boolean };
+
+/**
+ * The token's Proof panel (server component): five facts read from the chain, one line each, with a link to check
+ * it. No score. A fact worth a second look is marked in amber, using the same thresholds as the Holders tab.
+ */
+export default function TokenProof({ facts, holdersReady, links, bar }: { facts: ProofFact[]; holdersReady: boolean; links: Partial<Record<ProofKey, ProofLink>>; bar: { top10Bps: number; poolBps: number } | null }) {
+  return (
+    <section aria-labelledby="proof-heading" className="min-w-0 overflow-hidden rounded-2xl border border-line bg-card">
+      <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-b border-line px-5 py-3.5">
+        <h2 id="proof-heading" className="text-sm font-semibold text-ink">Proof</h2>
+        <span className="text-[11px] text-muted">Every line links to where you can check it</span>
+      </div>
+      <ul className="divide-y divide-line">
+        {facts.map((fact) => {
+          const Icon = ICON[fact.key];
+          const link = links[fact.key];
+          return (
+            <li key={fact.key} className="flex gap-3.5 px-5 py-4">
+              <span className={`grid size-8 shrink-0 place-items-center rounded-full ${TONE[fact.tone]}`}><Icon size={15} aria-hidden="true" /></span>
+              {/* the link reads last, after the fact and its detail; from sm up it moves beside the title */}
+              <div className="grid min-w-0 flex-1 grid-cols-1 gap-x-4 sm:grid-cols-[minmax(0,1fr)_auto]">
+                <p className={`text-sm font-semibold sm:col-start-1 sm:row-start-1 ${fact.tone === "warn" ? "text-warm-ink" : "text-ink"}`}>{fact.title}</p>
+                <p className="mt-1 text-xs leading-relaxed text-muted text-pretty sm:col-span-2">{fact.detail}</p>
+                {fact.key === "spread" && bar ? <div className="sm:col-span-2"><SupplyBar {...bar} /></div> : null}
+                {link ? (
+                  <a href={link.href} {...(link.external ? { target: "_blank", rel: "noreferrer" } : {})} className="mt-2 inline-flex items-center gap-1 justify-self-start whitespace-nowrap text-xs text-muted transition-colors hover:text-ink motion-reduce:transition-none sm:col-start-2 sm:row-start-1 sm:mt-0 sm:justify-self-end sm:self-baseline">
+                    {link.label}{link.external ? <ArrowUpRight size={12} aria-hidden="true" /> : null}
+                  </a>
+                ) : null}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+      {!holdersReady ? <p className="border-t border-line px-5 py-3 text-[11px] leading-relaxed text-muted text-pretty">Creator holdings, holder spread and launch-window buyers appear once this token&apos;s transfer history is indexed. Missing data is not a clean bill of health.</p> : null}
+    </section>
+  );
+}
+
+/** Where the supply sits: the ten largest wallets, then the locked pool, then everyone else, each with its share. */
+function SupplyBar({ top10Bps, poolBps }: { top10Bps: number; poolBps: number }) {
+  const top = Math.max(0, Math.min(10_000, top10Bps));
+  const pool = Math.max(0, Math.min(10_000 - top, poolBps));
+  const rest = 10_000 - top - pool;
+  const parts = [
+    { label: "Top 10 wallets", bps: top, swatch: { background: "var(--tok, var(--color-ink))" }, className: "" },
+    { label: "Locked pool", bps: pool, swatch: undefined, className: "bg-muted/50" },
+    { label: "Everyone else", bps: rest, swatch: undefined, className: "bg-line-strong" },
+  ];
+  return (
+    <div className="mt-3">
+      <div className="flex h-2 gap-0.5 overflow-hidden rounded-full" aria-hidden="true">
+        {parts.map((part) => part.bps > 0 ? <span key={part.label} className={`h-full ${part.className}`} style={{ width: `${part.bps / 100}%`, ...part.swatch }} /> : null)}
+      </div>
+      <ul className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-muted">
+        {parts.map((part) => (
+          <li key={part.label} className="inline-flex items-center gap-1.5">
+            <span className={`size-2 rounded-full ${part.className}`} style={part.swatch} aria-hidden="true" />
+            {part.label} <span className="font-mono text-body tnum">{fmtShare(part.bps)}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/app/src/components/launchpad/TokenTrades.tsx b/app/src/components/launchpad/TokenTrades.tsx
index 924a028e..800a352c 100644
--- a/app/src/components/launchpad/TokenTrades.tsx
+++ b/app/src/components/launchpad/TokenTrades.tsx
@@ -5,19 +5,34 @@ import { fmtCompact, fmtPrice, fmtQuote, fmtUsd } from "@/lib/launchpad/math";
 import { ago } from "@/lib/launchpad/time";
 import type { Quote } from "@/lib/launchpad/config";
 
+/** Recent swaps straight from the pool: a side pill, the wallet, both amounts, the price and a link to each transaction. */
 export default function TokenTrades({ chain, symbol, quote, swaps, now }: { chain: ChainKey; symbol: string; quote: Quote; swaps: SwapRow[]; now: number }) {
   return <section aria-label="Indexed trades">
     <div className="flex min-h-11 items-center justify-between gap-3 px-5 text-[11px] text-muted"><span>Direct from the pool</span><span className="font-mono tnum">{swaps.length} recent swaps</span></div>
     {swaps.length === 0 ? <div className="flex min-h-48 flex-col items-center justify-center gap-2 border-t border-line px-5 text-center"><Activity size={22} strokeWidth={1.4} className="mb-1 text-muted" /><h3 className="text-sm font-medium text-ink">The tape is quiet.</h3><p className="max-w-xs text-xs leading-relaxed text-muted text-pretty">No swaps have been indexed for this token yet. Confirmed trades appear here with an explorer link.</p></div> :
       <div className="max-h-[480px] overflow-auto bb-scroll" tabIndex={0} aria-label="Trade history">
         <table className="w-full text-xs">
-          <thead className="sticky top-0 z-10 border-y border-line bg-card text-[11px] text-muted"><tr><th className="px-4 py-3 text-left font-medium">Side / trader</th><th className="px-4 py-3 text-right font-medium">{quote.symbol}</th><th className="hidden px-4 py-3 text-right font-medium sm:table-cell">{symbol}</th><th className="hidden px-4 py-3 text-right font-medium md:table-cell">Price</th><th className="px-4 py-3 text-right font-medium">Time</th></tr></thead>
-          <tbody>{swaps.map((s) => { const q = BigInt(s.amount0); const t = BigInt(s.amount1); const Icon = s.is_buy ? ArrowDownLeft : ArrowUpRight; return <tr key={`${s.tx_hash}:${s.log_index}`} className="border-b border-line last:border-0 hover:bg-card">
-            <td className="px-4 py-3"><span className={`flex items-center gap-1.5 font-medium ${s.is_buy ? "text-up" : "text-down-ink"}`}><Icon size={13} />{s.is_buy ? "Buy" : "Sell"}</span>{s.trader ? <a href={explorerAddress(chain, s.trader)} target="_blank" rel="noreferrer" className="mt-0.5 block font-mono text-[10px] text-muted hover:text-ink" title={s.trader}>{shortAddr(s.trader)}</a> : null}</td>
-            <td className="px-4 py-3 text-right font-mono text-ink tnum">{fmtQuote(q < 0n ? -q : q, quote.decimals, "").trim()}</td>
-            <td className="hidden px-4 py-3 text-right font-mono text-body tnum sm:table-cell">{fmtCompact(Number(t < 0n ? -t : t) / 1e18)}</td>
-            <td className="hidden px-4 py-3 text-right font-mono text-muted tnum md:table-cell">{quote.usd !== null ? fmtUsd(s.price_quote * quote.usd) : `${fmtPrice(s.price_quote)} ${quote.symbol}`}</td>
-            <td className="px-4 py-3 text-right font-mono text-muted tnum"><a href={explorerTx(chain, s.tx_hash)} target="_blank" rel="noreferrer" className="whitespace-nowrap hover:text-ink" title={new Date(s.block_time).toUTCString()}>{ago(s.block_time, now)} ↗</a></td>
+          <thead className="sticky top-0 z-10 border-y border-line bg-card text-[11px] text-muted">
+            <tr>
+              <th className="py-2.5 pl-5 pr-3 text-left font-medium">Trade</th>
+              <th className="hidden px-3 py-2.5 text-left font-medium sm:table-cell">Wallet</th>
+              <th className="px-3 py-2.5 text-right font-medium">{quote.symbol}</th>
+              <th className="hidden px-3 py-2.5 text-right font-medium sm:table-cell">{symbol}</th>
+              <th className="hidden px-3 py-2.5 text-right font-medium md:table-cell">Price</th>
+              <th className="py-2.5 pl-3 pr-5 text-right font-medium">Time</th>
+            </tr>
+          </thead>
+          <tbody>{swaps.map((s) => { const q = BigInt(s.amount0); const t = BigInt(s.amount1); const Icon = s.is_buy ? ArrowDownLeft : ArrowUpRight; const wallet = s.trader ? <a href={explorerAddress(chain, s.trader)} target="_blank" rel="noreferrer" className="font-code text-[11px] text-muted transition-colors hover:text-ink motion-reduce:transition-none" title={s.trader}>{shortAddr(s.trader)}</a> : null; return <tr key={`${s.tx_hash}:${s.log_index}`} className="border-b border-line last:border-0 transition-colors hover:bg-ink/[0.03] motion-reduce:transition-none">
+            <td className="py-2.5 pl-5 pr-3">
+              <span className={`inline-flex h-6 items-center gap-1 rounded-md px-2 text-[11px] font-semibold ${s.is_buy ? "bg-up-soft text-up" : "bg-down-soft text-down-ink"}`}><Icon size={12} aria-hidden="true" />{s.is_buy ? "Buy" : "Sell"}</span>
+              {/* phones have no wallet column: the wallet sits under the side */}
+              <span className="mt-1 block sm:hidden">{wallet}</span>
+            </td>
+            <td className="hidden px-3 py-2.5 sm:table-cell">{wallet}</td>
+            <td className="px-3 py-2.5 text-right font-mono text-ink tnum">{fmtQuote(q < 0n ? -q : q, quote.decimals, "").trim()}</td>
+            <td className="hidden px-3 py-2.5 text-right font-mono text-body tnum sm:table-cell">{fmtCompact(Number(t < 0n ? -t : t) / 1e18)}</td>
+            <td className="hidden px-3 py-2.5 text-right font-mono text-muted tnum md:table-cell">{quote.usd !== null ? fmtUsd(s.price_quote * quote.usd) : `${fmtPrice(s.price_quote)} ${quote.symbol}`}</td>
+            <td className="py-2.5 pl-3 pr-5 text-right font-mono text-muted tnum"><a href={explorerTx(chain, s.tx_hash)} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 whitespace-nowrap transition-colors hover:text-ink motion-reduce:transition-none" title={new Date(s.block_time).toUTCString()}><span className="sr-only">View transaction, </span>{ago(s.block_time, now)}<ArrowUpRight size={11} aria-hidden="true" /></a></td>
           </tr>; })}</tbody>
         </table>
       </div>}
diff --git a/app/src/components/launchpad/TradePanel.tsx b/app/src/components/launchpad/TradePanel.tsx
index 3010a485..5bb23d0c 100644
--- a/app/src/components/launchpad/TradePanel.tsx
+++ b/app/src/components/launchpad/TradePanel.tsx
@@ -2,18 +2,20 @@
 
 import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { useRouter } from "next/navigation";
-import { useAccount, useBalance, useConfig, useReadContract, useSwitchChain } from "wagmi";
+import { useBalance, useConfig, useReadContract, useSwitchChain } from "wagmi";
+import { useHydratedAccount } from "@/lib/useHydratedAccount";
 import { getPublicClient, getWalletClient } from "wagmi/actions";
 import { formatEther, formatUnits, maxUint160, maxUint256, parseUnits, type Address, type Hex } from "viem";
 import { ArrowDown, ArrowRight, Wallet } from "lucide-react";
 import { ToggleGroup, ToggleGroupItem } from "@/components/vendor/toggle-group";
 import { btn } from "@/components/ui";
 import { toast } from "./TxToasts";
-import { ERC20_MIN_ABI, PERMIT2_ABI, UNIVERSAL_ROUTER_ABI, V4_QUOTER_ABI } from "@/lib/launchpad/abi";
+import { ERC20_MIN_ABI, PERMIT2_ABI, STATE_VIEW_ABI, UNIVERSAL_ROUTER_ABI, V4_QUOTER_ABI } from "@/lib/launchpad/abi";
+import { fmtImpact, impactLevel, priceImpact } from "@/lib/launchpad/price-impact";
 import { BUY_PRESETS, NATIVE, SWAP_GAS_RESERVE_WEI, launchpad, quoteUsdOf, sharesGasBalance, type Quote } from "@/lib/launchpad/config";
 import { TWIG_WRAP_URL } from "@/lib/launchpad/twig";
 import { gasReserveInQuote } from "@/lib/launchpad/first-buy";
-import { fmtCompact, fmtQuoteUnits, fmtUsd, minOut, units, pipsToPct } from "@/lib/launchpad/math";
+import { fmtCompact, fmtQuoteUnits, fmtUsd, minOut, units } from "@/lib/launchpad/math";
 import { sanitizeDecimalInput } from "@/lib/launchpad/decimal-input";
 import { encodeV4ExactInSingle, type PoolKey } from "@/lib/launchpad/swap";
 import { CHAINS, CHAIN_LABELS, BUILDER_DATA_SUFFIX, explorerAddress, explorerTx, shortAddr, type ChainKey } from "@/lib/chainPublic";
@@ -22,6 +24,7 @@ import { SLIPPAGE_PRESETS_BPS, formatSlippageBps, getSlippageBps, getSlippageBps
 import { friendlyError } from "@/lib/errors";
 import { Spinner } from "@/components/Skeleton";
 import ConnectWallet from "@/components/ConnectWallet";
+import { ChainLogo } from "./ChainLogo";
 
 /**
  * In-page buy / sell straight against the token's Uniswap v4 pool via the
@@ -43,7 +46,7 @@ type Phase =
 const PERMIT_EXPIRY_S = 30 * 24 * 3600;
 
 
-export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUsd, onTraded }: { chain: ChainKey; token: Address; symbol: string; poolKey: PoolKey; quote: Quote; ethUsd: number | null; onTraded?: () => void }) {
+export default function TradePanel({ chain, token, symbol, poolKey, poolId, feeRoute, quote, ethUsd, onTraded }: { chain: ChainKey; token: Address; symbol: string; poolKey: PoolKey; poolId: Hex; feeRoute: string; quote: Quote; ethUsd: number | null; onTraded?: () => void }) {
   const CHAIN = CHAINS[chain];
   const CHAIN_LABEL = CHAIN_LABELS[chain];
   const V4 = launchpad(chain).v4;
@@ -61,7 +64,7 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
   const fmtQ = (raw: bigint) => `${fmtQuoteUnits(units(raw, quote.decimals), quote.decimals)} ${quote.symbol}`;
   const router = useRouter();
   const config = useConfig();
-  const { address, isConnected, chainId } = useAccount();
+  const { address, isConnected, chainId } = useHydratedAccount();
   const { switchChainAsync, isPending: switching } = useSwitchChain();
   const [side, setSide] = useState<Side>("buy");
   const [amount, setAmount] = useState("");
@@ -71,9 +74,13 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
   const slippageBps = useSyncExternalStore(subscribeSlippage, getSlippageSnapshot, getSlippageBpsServer);
   const [slippageInput, setSlippageInput] = useState<string | null>(null);
   const [slippageError, setSlippageError] = useState<string | null>(null);
-  const [quote_, setQuote] = useState<{ out: bigint; forKey: string } | null>(null);
+  // `sqrtPriceX96` is the pool's spot price read beside the quote (null if StateView could not answer): it gives price impact
+  const [quote_, setQuote] = useState<{ out: bigint; forKey: string; sqrtPriceX96: bigint | null } | null>(null);
   const [quoting, setQuoting] = useState(false);
   const [phase, setPhase] = useState<Phase>({ k: "idle" });
+  // a trade that moves the price past IMPACT_CONFIRM takes a second tap; this holds the quote the first tap armed
+  const [armed, setArmed] = useState<string | null>(null);
+  const [sellAll, setSellAll] = useState<{ forBalance: string; out: bigint; impact: number | null } | null>(null);
   const seq = useRef(0);
   const transactionLock = useRef(false);
 
@@ -105,13 +112,16 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
       setQuoting(true);
       try {
         const pub = getPublicClient(config, { chainId: CHAIN.id })!;
-        const { result } = await pub.simulateContract({
-          address: quoter,
-          abi: V4_QUOTER_ABI,
-          functionName: "quoteExactInputSingle",
-          args: [{ poolKey, zeroForOne: side === "buy", exactAmount: amountIn, hookData: "0x" }],
-        });
-        if (my === seq.current) setQuote({ out: result[0], forKey: quoteKey });
+        const [{ result }, sqrtPriceX96] = await Promise.all([
+          pub.simulateContract({
+            address: quoter,
+            abi: V4_QUOTER_ABI,
+            functionName: "quoteExactInputSingle",
+            args: [{ poolKey, zeroForOne: side === "buy", exactAmount: amountIn, hookData: "0x" }],
+          }),
+          pub.readContract({ address: V4.stateView, abi: STATE_VIEW_ABI, functionName: "getSlot0", args: [poolId] }).then((slot0) => slot0[0] as bigint, () => null),
+        ]);
+        if (my === seq.current) setQuote({ out: result[0], forKey: quoteKey, sqrtPriceX96 });
       } catch {
         if (my === seq.current) setQuote(null);
       } finally {
@@ -119,7 +129,28 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
       }
     }, 400);
     return () => { clearTimeout(t); seq.current = my + 1; };
-  }, [amountIn, side, poolKey, config, amount, V4.quoter, CHAIN.id, quoteKey]);
+  }, [amountIn, side, poolKey, poolId, config, amount, V4.quoter, V4.stateView, CHAIN.id, quoteKey]);
+
+  // What selling the whole position would return right now, re-quoted whenever the balance changes
+  const tokenBalance = tok.data as bigint | undefined;
+  useEffect(() => {
+    if (!address || !tradable || tokenBalance === undefined || tokenBalance <= 0n) return;
+    let active = true;
+    const t = setTimeout(async () => {
+      try {
+        const pub = getPublicClient(config, { chainId: CHAIN.id })!;
+        const [{ result }, sqrtPriceX96] = await Promise.all([
+          pub.simulateContract({ address: V4.quoter, abi: V4_QUOTER_ABI, functionName: "quoteExactInputSingle", args: [{ poolKey, zeroForOne: false, exactAmount: tokenBalance, hookData: "0x" }] }),
+          pub.readContract({ address: V4.stateView, abi: STATE_VIEW_ABI, functionName: "getSlot0", args: [poolId] }).then((slot0) => slot0[0] as bigint, () => null),
+        ]);
+        const impact = sqrtPriceX96 === null ? null : priceImpact({ sqrtPriceX96, amountIn: tokenBalance, amountOut: result[0], zeroForOne: false, feePips: poolKey.fee });
+        if (active) setSellAll({ forBalance: tokenBalance.toString(), out: result[0], impact });
+      } catch {
+        if (active) setSellAll(null);
+      }
+    }, 600);
+    return () => { active = false; clearTimeout(t); };
+  }, [address, tradable, tokenBalance, poolKey, poolId, config, V4.quoter, V4.stateView, CHAIN.id]);
 
   async function trade() {
     if (!tradable || !address || amountIn === null || !quote_ || quote_.forKey !== quoteKey || busy || insufficient || transactionLock.current) return;
@@ -200,61 +231,68 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
   const outLabel = quote_ && quote_.forKey === quoteKey ? (side === "buy" ? `${fmtCompact(Number(quote_.out) / 1e18)} ${symbol}` : fmtQ(quote_.out)) : null;
   const outUsd = quote_ && quote_.forKey === quoteKey && side === "sell" && quoteUsd ? fmtUsd(units(quote_.out, quote.decimals) * quoteUsd) : null;
   const inUsd = amountIn !== null && side === "buy" && quoteUsd ? fmtUsd(units(amountIn, quote.decimals) * quoteUsd) : null;
+  const fresh = quote_ && quote_.forKey === quoteKey ? quote_ : null;
+  const impact = fresh && fresh.sqrtPriceX96 !== null && amountIn !== null ? priceImpact({ sqrtPriceX96: fresh.sqrtPriceX96, amountIn, amountOut: fresh.out, zeroForOne: side === "buy", feePips: poolKey.fee }) : null;
+  const level = impact === null ? null : impactLevel(impact);
+  const confirming = level === "confirm" && armed === quoteKey;
+  // the second tap is outside trade() on purpose: trade() keeps its synchronous lock as the first thing it does
+  function onTrade() {
+    if (level === "confirm" && armed !== quoteKey) { setArmed(quoteKey); return; }
+    setArmed(null);
+    void trade();
+  }
+  const sold = sellAll && tokenBalance !== undefined && tokenBalance > 0n && sellAll.forBalance === tokenBalance.toString() ? sellAll : null;
 
   return (
-    <section className="overflow-hidden rounded-2xl border border-line-strong bg-paper scroll-mt-24" id="trade" tabIndex={-1} aria-label={`Trade ${symbol}`}>
-      <div className="flex min-h-12 items-center justify-between gap-3 border-b border-line px-5"><h2 className="min-w-0 truncate text-sm font-semibold text-ink">Trade {symbol}</h2><span className="shrink-0 text-[11px] text-muted">{CHAIN_LABEL}</span></div>
+    <section className="overflow-hidden rounded-2xl border border-line bg-card scroll-mt-24" id="trade" tabIndex={-1} aria-label={`Trade ${symbol}`}>
+      <div className="flex min-h-12 items-center justify-between gap-3 border-b border-line px-5"><h2 className="min-w-0 truncate text-sm font-semibold text-ink">Trade {symbol}</h2><span className="inline-flex shrink-0 items-center gap-1.5 text-[11px] text-muted"><ChainLogo chain={chain} size={12} />{CHAIN_LABEL}</span></div>
       <div className="space-y-4 p-4 sm:p-5">
       <ToggleGroup aria-label="Trade side" value={[side]} onValueChange={(v) => { if (!v[0] || busy) return; setSide(v[0] as Side); setAmount(""); setQuote(null); setQuoting(false); setPhase({ k: "idle" }); }} className="grid w-full grid-cols-2">
-        {(["buy", "sell"] as Side[]).map((s) => <ToggleGroupItem key={s} value={s} disabled={busy} className={`min-h-10 text-sm ${s === "buy" ? "data-pressed:text-up" : "data-pressed:text-down-ink"}`}>{s === "buy" ? "Buy" : "Sell"}</ToggleGroupItem>)}
+        {(["buy", "sell"] as Side[]).map((s) => <ToggleGroupItem key={s} value={s} disabled={busy} thumbClassName={s === "buy" ? "bg-up-soft" : "bg-down-soft"} className={`min-h-10 text-sm font-semibold ${s === "buy" ? "data-pressed:text-up" : "data-pressed:text-down-ink"}`}>{s === "buy" ? "Buy" : "Sell"}</ToggleGroupItem>)}
       </ToggleGroup>
 
       {unlisted ? (
         <p role="note" className="rounded-xl border border-warm/30 bg-warm-soft px-3 py-2 text-[11px] leading-relaxed text-warm-ink text-pretty">
-          <b>Unlisted pair.</b> Priced in {quote.symbol} (<a href={explorerAddress(chain, quote.address)} target="_blank" rel="noreferrer" className="font-mono underline underline-offset-2">{shortAddr(quote.address)} ↗</a>), a token openlaunch does not list. Anyone can deploy a token with any name, so check that address before you trade. No USD price is shown.
+          <b>Unlisted pair.</b> Priced in {quote.symbol} (<a href={explorerAddress(chain, quote.address)} target="_blank" rel="noreferrer" className="font-code underline underline-offset-2">{shortAddr(quote.address)} ↗</a>), a token openlaunch does not list. Anyone can deploy a token with any name, so check that address before you trade. No USD price is shown.
         </p>
       ) : null}
 
       <div className="relative">
-        <div className="rounded-xl border border-line bg-card px-4 pt-3 pb-4">
+        {/* the pay well: amount, its token, the balance and quick amounts; the well itself shows the input's focus */}
+        <div className="rounded-2xl border border-line bg-paper px-4 pb-3.5 pt-3 transition-[border-color,box-shadow] has-[input:focus-visible]:border-transparent has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-brand/60 motion-reduce:transition-none">
           <div className="flex items-center justify-between gap-2 text-[11px] text-muted"><label htmlFor={`amount-${chain}-${token}`}>{side === "buy" ? "You pay" : "You sell"}</label>
-            {balance !== undefined ? <button type="button" disabled={busy} className="max-w-[65%] truncate font-mono text-[10px] hover:text-ink" title={`Use maximum available balance (reserve gas for ${NATIVE_SYMBOL})`} onClick={() => setAmount(side === "buy" ? formatUnits(balance > buyReserve ? balance - buyReserve : 0n, quote.decimals) : formatEther(balance))}>Bal {side === "buy" ? fmtQ(balance) : fmtCompact(Number(balance) / 1e18)}</button> : <Wallet size={12} aria-hidden />}
+            {balance !== undefined ? <button type="button" disabled={busy} className="-mr-1.5 inline-flex max-w-[65%] items-center gap-1 truncate rounded-md px-1.5 py-0.5 font-mono text-[10px] transition-colors hover:bg-ink/5 hover:text-ink motion-reduce:transition-none" title={`Use maximum available balance (reserve gas for ${NATIVE_SYMBOL})`} aria-label={`Use balance ${side === "buy" ? fmtQ(balance) : fmtCompact(Number(balance) / 1e18)}`} onClick={() => setAmount(side === "buy" ? formatUnits(balance > buyReserve ? balance - buyReserve : 0n, quote.decimals) : formatEther(balance))}><Wallet size={11} aria-hidden className="shrink-0" />{side === "buy" ? fmtQ(balance) : fmtCompact(Number(balance) / 1e18)}</button> : <Wallet size={12} aria-hidden />}
           </div>
-          <div className="mt-2 flex items-center gap-3">
-            <input id={`amount-${chain}-${token}`} disabled={busy} className="min-w-0 w-full bg-transparent py-1 font-mono text-[30px] leading-tight text-ink outline-offset-4 placeholder:text-faint tnum" value={amount} onChange={(e) => setAmount(sanitizeDecimalInput(e.target.value))} placeholder="0.0" inputMode="decimal" autoComplete="off" aria-label={side === "buy" ? `${quote.symbol} amount` : `${symbol} amount`} />
-            <span className="max-w-24 shrink-0 truncate rounded-lg border border-line-strong bg-paper px-2.5 py-1.5 text-xs font-medium text-ink">{side === "buy" ? quote.symbol : symbol}</span>
+          <div className="mt-1.5 flex items-center gap-3">
+            <input id={`amount-${chain}-${token}`} disabled={busy} className="min-w-0 w-full bg-transparent py-1 font-mono text-[30px] leading-tight text-ink placeholder:text-faint focus-visible:outline-none! tnum" value={amount} onChange={(e) => setAmount(sanitizeDecimalInput(e.target.value))} placeholder="0.0" inputMode="decimal" autoComplete="off" aria-label={side === "buy" ? `${quote.symbol} amount` : `${symbol} amount`} />
+            <span className="max-w-28 shrink-0 truncate rounded-full border border-line bg-card px-3 py-1.5 text-xs font-semibold text-ink">{side === "buy" ? quote.symbol : symbol}</span>
           </div>
-          <div className="mt-3 grid grid-cols-4 gap-1.5">
-            {side === "buy" ? BUY_PRESETS[quote.key].map((p) => <button key={p} type="button" disabled={busy} onClick={() => setAmount(p)} aria-label={`Pay ${p} ${quote.symbol}`} className={`min-h-8 rounded-md border font-mono text-[11px] tnum hover:border-line-strong disabled:opacity-40 ${amount === p ? "border-line-strong bg-paper text-ink" : "border-line text-muted"}`}>{fmtQuoteUnits(Number(p), quote.decimals)}</button>) : [25, 50, 100].map((pct) => <button key={pct} type="button" disabled={busy || !balance} onClick={() => balance !== undefined && setAmount(formatEther((balance * BigInt(pct)) / 100n))} className="min-h-8 rounded-md border border-line font-mono text-[11px] text-muted tnum hover:border-line-strong disabled:opacity-40">{pct === 100 ? "Max" : `${pct}%`}</button>)}
+          <div className="mt-3 flex gap-1.5">
+            {side === "buy" ? BUY_PRESETS[quote.key].map((p) => <button key={p} type="button" disabled={busy} onClick={() => setAmount(p)} aria-label={`Pay ${p} ${quote.symbol}`} className={`min-h-7 flex-1 rounded-full border px-2 font-mono text-[11px] tnum transition-colors hover:border-line-strong hover:text-ink disabled:opacity-40 motion-reduce:transition-none ${amount === p ? "border-line-strong bg-card text-ink" : "border-line text-muted"}`}>{fmtQuoteUnits(Number(p), quote.decimals)}</button>) : [25, 50, 100].map((pct) => <button key={pct} type="button" disabled={busy || !balance} onClick={() => balance !== undefined && setAmount(formatEther((balance * BigInt(pct)) / 100n))} className="min-h-7 flex-1 rounded-full border border-line px-2 font-mono text-[11px] text-muted tnum transition-colors hover:border-line-strong hover:text-ink disabled:opacity-40 motion-reduce:transition-none">{pct === 100 ? "Max" : `${pct}%`}</button>)}
           </div>
         </div>
-        <div className="relative z-10 mx-auto -my-3 flex size-7 items-center justify-center rounded-lg border border-line bg-paper text-muted" aria-hidden><ArrowDown size={13} /></div>
-        <div className="rounded-xl border border-line bg-card px-4 pt-4 pb-3">
-          <div className="text-[11px] text-muted">You receive <span className="text-[10px]">· estimated</span></div>
-          <div className="mt-2 flex min-h-7 items-center justify-between gap-3">
-            <span className="min-w-0 break-words font-mono text-base font-bold text-ink tnum">{outLabel ?? "—"}</span>{quoting && amountIn !== null ? <Spinner size={13} className="shrink-0 text-muted" /> : null}
+        {/* the arrow sits in a cut between the two wells, ringed in the card's own colour */}
+        <div className="relative z-10 mx-auto -my-3.5 flex size-9 items-center justify-center rounded-full border-4 border-card bg-paper text-muted" aria-hidden><ArrowDown size={14} /></div>
+        <div className="rounded-2xl border border-line bg-paper px-4 pb-3 pt-3.5">
+          <div className="text-[11px] text-muted">You receive <span className="text-faint">· estimated</span></div>
+          <div className="mt-1.5 flex min-h-9 items-center justify-between gap-3">
+            <span className={`min-w-0 break-words font-mono text-[22px] font-bold leading-tight tnum ${outLabel ? "text-ink" : "text-faint"}`}>{outLabel ?? "—"}</span>{quoting && amountIn !== null ? <Spinner size={13} className="shrink-0 text-muted" /> : null}
           </div>
           <div className="mt-1 min-h-4 text-[10px] text-muted">{inUsd ?? outUsd ?? "Quote includes the pool trading fee."}</div>
         </div>
       </div>
-      <dl className="space-y-2 text-[11px]">
+      <dl className="space-y-2.5 px-1 text-[11px]">
+        <div className="flex justify-between gap-3"><dt className="text-muted">Price impact</dt><dd className={`flex items-center gap-1.5 text-right font-mono tnum ${level === "warn" || level === "confirm" ? "text-warm-ink" : "text-body"}`}>{level === "warn" || level === "confirm" ? <span aria-hidden className="size-1.5 rounded-full bg-warm" /> : null}{impact === null ? "—" : fmtImpact(impact)}</dd></div>
+        <div className="flex justify-between gap-3"><dt className="text-muted">Trading fee</dt><dd className="text-right text-body">{feeRoute}</dd></div>
+        <div className="flex justify-between gap-3"><dt className="text-muted">Platform fee</dt><dd className="text-right font-mono text-up tnum">$0</dd></div>
         <div className="flex justify-between gap-3"><dt className="text-muted">Minimum received</dt><dd className="text-right font-mono text-body tnum">{quote_ && quote_.forKey === quoteKey ? (side === "buy" ? `${fmtCompact(Number(minOut(quote_.out, slippageBps)) / 1e18)} ${symbol}` : fmtQ(minOut(quote_.out, slippageBps))) : "—"}</dd></div>
         <div className="flex items-center justify-between gap-3">
           <dt className="text-muted"><label htmlFor={`slippage-${chain}-${token}`}>Slippage tolerance</label></dt>
           <dd className="flex items-center gap-1.5">
-            {SLIPPAGE_PRESETS_BPS.map((p) => (
-              <button
-                key={p}
-                type="button"
-                disabled={busy}
-                aria-pressed={slippageBps === p}
-                aria-label={`Slippage ${formatSlippageBps(p)}`}
-                onClick={() => { setSlippageBps(chain, p); setSlippageInput(null); setSlippageError(null); }}
-                className={`min-h-7 rounded-md border px-2 font-mono text-[11px] tnum disabled:opacity-40 ${slippageBps === p ? "border-line-strong bg-paper text-ink" : "border-line text-muted hover:border-line-strong"}`}
-              >
-                {formatSlippageBps(p)}
-              </button>
-            ))}
+            {/* a custom value that matches no preset leaves the presets unpressed */}
+            <ToggleGroup aria-label="Slippage presets" value={SLIPPAGE_PRESETS_BPS.includes(slippageBps) ? [String(slippageBps)] : []} onValueChange={(values) => { const p = Number(values[0]); if (!values[0] || !Number.isFinite(p)) return; setSlippageBps(chain, p); setSlippageInput(null); setSlippageError(null); }} className="rounded-[9px] p-0.5">
+              {SLIPPAGE_PRESETS_BPS.map((p) => <ToggleGroupItem key={p} value={String(p)} disabled={busy} aria-label={`Slippage ${formatSlippageBps(p)}`} className="min-h-6 rounded-[7px] px-2 font-mono text-[11px] tnum">{formatSlippageBps(p)}</ToggleGroupItem>)}
+            </ToggleGroup>
             <span className="relative">
               <input
                 id={`slippage-${chain}-${token}`}
@@ -281,6 +319,11 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
         </div>
         {slippageError ? <p id={`slippage-err-${chain}`} role="alert" className="text-right text-[10px] text-down-ink">Use 0.1–20%.</p> : null}
       </dl>
+      {level === "confirm" && impact !== null ? (
+        <p role="note" className="rounded-xl border border-warm/30 bg-warm-soft px-3 py-2 text-[11px] leading-relaxed text-warm-ink text-pretty">
+          This trade moves the price {fmtImpact(impact)}. New pools are thin, so a smaller amount can fill at a much better price. The button asks for a second tap.
+        </p>
+      ) : null}
 
       {!configured || !tradable ? (
         <button type="button" disabled className={`${btn.secondary} !border-ink !bg-ink !text-inverse w-full min-h-12`}>
@@ -297,9 +340,9 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
       ) : (
         <button
           type="button"
-          onClick={() => void trade()}
+          onClick={onTrade}
           disabled={busy || amountIn === null || !quote_ || quote_.forKey !== quoteKey || insufficient}
-          className={`${side === "buy" ? btn.up : `${btn.primary} !bg-down hover:brightness-110`} w-full min-h-12 text-[15px]`}
+          className={`${confirming ? btn.warm : side === "buy" ? btn.up : `${btn.primary} !bg-down hover:brightness-110`} w-full min-h-12 text-[15px]`}
         >
           {phase.k === "preparing" ? (
             <><Spinner size={14} /> Preparing trade…</>
@@ -317,6 +360,8 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
             </>
           ) : insufficient ? (
             `Not enough ${side === "buy" ? quote.symbol : symbol}`
+          ) : confirming && impact !== null ? (
+            `Tap again to ${side} at ${fmtImpact(impact)} impact`
           ) : side === "buy" ? (
             `Buy ${symbol}`
           ) : (
@@ -339,14 +384,19 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
       {phase.k === "done" ? (
         <p className="text-xs text-up">
           {phase.side === "buy" ? "Bought" : "Sold"}.{" "}
-          <a href={explorerTx(chain, phase.hash)} target="_blank" rel="noreferrer" className="font-mono underline underline-offset-2">
+          <a href={explorerTx(chain, phase.hash)} target="_blank" rel="noreferrer" className="font-code underline underline-offset-2">
             {phase.hash.slice(0, 10)}…
           </a>
         </p>
       ) : null}
-      <p className="text-center text-[10px] leading-relaxed text-muted text-pretty">{pipsToPct(poolKey.fee)} pool fee · <span className="text-up">0% platform fee</span> · gas applies</p>
+      {sold && tokenBalance !== undefined ? (
+        <dl className="space-y-1 rounded-xl border border-line bg-paper px-3 py-2.5 text-[11px]">
+          <div className="flex justify-between gap-3"><dt className="text-muted">Your {symbol}</dt><dd className="font-mono text-ink tnum">{fmtCompact(Number(tokenBalance) / 1e18)}</dd></div>
+          <div className="flex justify-between gap-3"><dt className="text-muted">Sell it all now</dt><dd className="text-right font-mono text-body tnum">≈ {fmtQ(sold.out)}{sold.impact !== null ? `, ${fmtImpact(sold.impact)} impact` : ""}</dd></div>
+        </dl>
+      ) : null}
       </div>
-      <div className="border-t border-line bg-card px-5 py-3 text-[11px] leading-relaxed text-muted text-pretty">Wallet → Uniswap v4 pool. Your funds never pass through openlaunch.</div>
+      <div className="border-t border-line px-5 py-3 text-[11px] leading-relaxed text-muted text-pretty">Your wallet trades with the pool directly. openlaunch never holds your funds. Network gas applies.</div>
     </section>
   );
 }
diff --git a/app/src/components/launchpad/market-cap-sites.test.ts b/app/src/components/launchpad/market-cap-sites.test.ts
index 6d3fdd15..4deaac97 100644
--- a/app/src/components/launchpad/market-cap-sites.test.ts
+++ b/app/src/components/launchpad/market-cap-sites.test.ts
@@ -13,13 +13,21 @@ test("the home row shows the quote detail on every width", () => {
 });
 
 test("one-string sites use the compact form, which carries the mark for an unpriced quote", () => {
-  for (const [file, expected] of [["./TrendingStrip.tsx", 1], ["./MeDashboard.tsx", 2], ["../../app/t/[chain]/[token]/page.tsx", 1]] as const) {
+  for (const [file, expected] of [["./TrendingStrip.tsx", 1], ["./MeDashboard.tsx", 2], ["./LaunchCard.tsx", 1]] as const) {
     const src = read(file);
     assert.equal((src.match(/capDisplay\([^)]*\)\.compact/g) ?? []).length, expected, `${file} uses .compact`);
     assert.doesNotMatch(src, /capDisplay\([^)]*\)\.main/, `${file} never renders .main alone`);
   }
 });
 
+test("the token page leads with dollars and keeps the quote detail; the phone bar uses the compact form", () => {
+  const page = read("../../app/t/[chain]/[token]/page.tsx");
+  assert.match(page, /const cap = capDisplay\(l\.fdv_quote, l\.quote_usd, /);
+  assert.match(page, />\{cap\.main\}<\/p>\r?\n\s*<p [^>]*>\{cap\.detail\}<\/p>/, "the header shows the quote detail under the dollar figure");
+  assert.match(page, /<MobileBuyBar symbol=\{l\.symbol\} mcap=\{cap\.compact\} \/>/);
+  assert.doesNotMatch(page, /capDisplay\([^)]*\)\.main/);
+});
+
 test("the launch form renders main + detail for the opening cap, the preview card and the post-buy estimate", () => {
   const form = read("./LaunchForm.tsx");
   assert.equal((form.match(/cap\(fdvPreview\)\.main/g) ?? []).length, 2);
diff --git a/app/src/components/launchpad/token-page.test.ts b/app/src/components/launchpad/token-page.test.ts
new file mode 100644
index 00000000..488321fa
--- /dev/null
+++ b/app/src/components/launchpad/token-page.test.ts
@@ -0,0 +1,55 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+
+/**
+ * Source contracts for the token page: its tint, the Proof panel, price impact in the trade box and the chart
+ * sources. The math is unit-tested beside each module (tint, proof, price-impact, chart-terminal).
+ */
+const read = (file: string) => readFileSync(new URL(file, import.meta.url), "utf8").replaceAll("\r\n", "\n");
+const page = read("../../app/t/[chain]/[token]/page.tsx");
+const panel = read("./TradePanel.tsx");
+const chart = read("./TokenChart.tsx");
+const tintServer = read("../../lib/launchpad/tintServer.ts");
+const about = read("./TokenAbout.tsx");
+
+test("the tint comes from the stored logo by key, per theme, and never reaches an action", () => {
+  assert.match(page, /tokenTint\(l\.image_url, l\.token\)/);
+  assert.match(page, /\[--tok:var\(--tok-light\)\][^"]*dark:\[--tok:var\(--tok-dark\)\]/);
+  assert.match(page, /style=\{\{ borderColor: "var\(--tok\)" \}\}/, "the ring takes the tint");
+  assert.match(tintServer, /storedImageKey\(image\)/);
+  assert.match(tintServer, /await readImage\(key\)/);
+  assert.doesNotMatch(tintServer, /\bfetch\s*\(/, "a logo is read from our store, never fetched from a URL");
+  assert.doesNotMatch(panel, /--tok/, "buttons stay in the action colours");
+});
+
+test("the Proof panel is built from facts with a link for each, holder facts gated on the index", () => {
+  assert.match(page, /proofFacts\(\{ holders, symbol: l\.symbol, launcher: l\.launcher, lpFee: l\.lp_fee, mode, recipients: l\.recipients\.length \}\)/);
+  for (const key of ["lock", "creator", "spread", "launch", "fees"]) assert.match(page, new RegExp(`${key}: \\{ href: `), `link for ${key}`);
+  assert.match(page, /bar=\{proof\.holdersReady && holders \?/);
+});
+
+test("price impact uses the pool's own spot and fee, and a big move takes a second tap outside trade()", () => {
+  assert.match(panel, /functionName: "getSlot0", args: \[poolId\]/);
+  assert.match(panel, /priceImpact\(\{ sqrtPriceX96: fresh\.sqrtPriceX96, amountIn, amountOut: fresh\.out, zeroForOne: side === "buy", feePips: poolKey\.fee \}\)/);
+  assert.match(panel, /if \(level === "confirm" && armed !== quoteKey\) \{ setArmed\(quoteKey\); return; \}/);
+  assert.match(panel, /onClick=\{onTrade\}/);
+  const trade = panel.slice(panel.indexOf("async function trade()"), panel.indexOf("const outLabel"));
+  assert.doesNotMatch(trade, /armed|impact/, "trade() keeps its synchronous lock as the first thing it does");
+  assert.match(panel, /Sell it all now/);
+});
+
+test("our on-chain chart is the default; GeckoTerminal is checked only when asked for and framed safely", () => {
+  assert.match(chart, /useState<"onchain" \| "gecko">\("onchain"\)/);
+  assert.doesNotMatch(chart, /useEffect/, "no lookup on page load");
+  assert.match(chart, /if \(next === "gecko" && lookup !== "ready" && lookup !== "checking"\) void check\(\);/);
+  assert.match(chart, /referrerPolicy="no-referrer"/);
+  assert.doesNotMatch(chart, /allow-top-navigation|dangerouslySetInnerHTML|useAccount/);
+  assert.match(page, /hasTrades=\{l\.buys \+ l\.sells > 0\}/);
+});
+
+test("the About card sits under the trade box and links only checked socials", () => {
+  assert.match(page, /<BorderBeam [^\n]*\/>\n\s*<\/div>\n\s*\{\/\* the token at a glance[^\n]*\*\/\}\n\s*<TokenAbout /);
+  assert.match(about, /const \{ x, site, host \} = safeSocials\(\{ website, x_handle \}\);/);
+  assert.match(about, /rel="noopener noreferrer nofollow"/);
+});
diff --git a/app/src/lib/launchpad/price-impact.test.ts b/app/src/lib/launchpad/price-impact.test.ts
new file mode 100644
index 00000000..82baf821
--- /dev/null
+++ b/app/src/lib/launchpad/price-impact.test.ts
@@ -0,0 +1,68 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { IMPACT_CONFIRM, IMPACT_WARN, fmtImpact, impactLevel, priceImpact, spotPrice1Per0 } from "./price-impact.ts";
+
+/** sqrtPriceX96 for a currency1-per-currency0 price, exact enough for these checks. */
+const sqrtFor = (price: number) => BigInt(Math.round(Math.sqrt(price) * 2 ** 48)) * 2n ** 48n;
+
+/**
+ * A constant-product pool (x·y = k) with the fee taken from the input: the exact output Uniswap's math gives for
+ * full-range liquidity, which is what a fresh openlaunch pool is around the starting price.
+ */
+function cpOut(reserveIn: number, reserveOut: number, amountIn: number, feePips: number) {
+  const inAfterFee = amountIn * (1 - feePips / 1e6);
+  return (reserveOut * inAfterFee) / (reserveIn + inAfterFee);
+}
+
+test("spot price comes back from sqrtPriceX96", () => {
+  assert.ok(Math.abs(spotPrice1Per0(sqrtFor(1e9)) / 1e9 - 1) < 1e-9);
+  assert.equal(spotPrice1Per0(2n ** 96n), 1);
+});
+
+test("a buy's impact matches the constant-product curve, fee excluded", () => {
+  // 10 ETH and 10B tokens in the pool: 1e9 tokens per ETH
+  const x = 10e18, y = 10e27;
+  for (const [amount, expected] of [[0.01e18, 0.001 / 1.001], [1e18, 1 / 11], [5e18, 5 / 15]] as const) {
+    for (const fee of [0, 10_000, 30_000]) {
+      const out = cpOut(x, y, amount, fee);
+      const impact = priceImpact({ sqrtPriceX96: sqrtFor(y / x), amountIn: BigInt(amount), amountOut: BigInt(Math.floor(out)), zeroForOne: true, feePips: fee })!;
+      // with the fee, the effective input is smaller, so the impact is a little smaller than the no-fee figure
+      const inAfter = amount * (1 - fee / 1e6);
+      const exact = inAfter / (x + inAfter);
+      assert.ok(Math.abs(impact - exact) < 1e-6, `${amount}/${fee}: ${impact} vs ${exact}`);
+      if (fee === 0) assert.ok(Math.abs(impact - expected) < 1e-6);
+    }
+  }
+});
+
+test("a sell's impact uses the inverse price", () => {
+  const x = 10e18, y = 10e27;
+  const amount = 1e27; // sell a tenth of the pool's tokens
+  const out = cpOut(y, x, amount, 10_000);
+  const impact = priceImpact({ sqrtPriceX96: sqrtFor(y / x), amountIn: BigInt(amount), amountOut: BigInt(Math.floor(out)), zeroForOne: false, feePips: 10_000 })!;
+  const inAfter = amount * 0.99;
+  assert.ok(Math.abs(impact - inAfter / (y + inAfter)) < 1e-6);
+});
+
+test("rounding above the ideal reads as zero, never negative; nonsense inputs read as unknown", () => {
+  assert.equal(priceImpact({ sqrtPriceX96: 2n ** 96n, amountIn: 1000n, amountOut: 1001n, zeroForOne: true, feePips: 0 }), 0);
+  assert.equal(priceImpact({ sqrtPriceX96: 0n, amountIn: 1000n, amountOut: 900n, zeroForOne: true, feePips: 0 }), null);
+  assert.equal(priceImpact({ sqrtPriceX96: 2n ** 96n, amountIn: 0n, amountOut: 0n, zeroForOne: true, feePips: 0 }), null);
+  assert.equal(priceImpact({ sqrtPriceX96: 2n ** 96n, amountIn: 10n, amountOut: 5n, zeroForOne: true, feePips: 1_000_000 }), null);
+  assert.equal(priceImpact({ sqrtPriceX96: 2n ** 96n, amountIn: 10n, amountOut: 0n, zeroForOne: true, feePips: 0 }), 1, "nothing back is the whole price");
+});
+
+test("levels: amber from 5%, a second tap from 15%", () => {
+  assert.equal(impactLevel(0.049), "low");
+  assert.equal(impactLevel(IMPACT_WARN), "warn");
+  assert.equal(impactLevel(0.149), "warn");
+  assert.equal(impactLevel(IMPACT_CONFIRM), "confirm");
+});
+
+test("impact reads in sensible precision", () => {
+  assert.equal(fmtImpact(0.00004), "<0.01%");
+  assert.equal(fmtImpact(0.0042), "0.42%");
+  assert.equal(fmtImpact(0.042), "4.2%");
+  assert.equal(fmtImpact(0.374), "37%");
+  assert.equal(fmtImpact(1), "100%");
+});
diff --git a/app/src/lib/launchpad/price-impact.ts b/app/src/lib/launchpad/price-impact.ts
new file mode 100644
index 00000000..bda4c0be
--- /dev/null
+++ b/app/src/lib/launchpad/price-impact.ts
@@ -0,0 +1,45 @@
+/**
+ * How far a trade moves a Uniswap v4 pool's price, with the pool fee taken out: 1 − (the quoter's output ÷ what the
+ * same input would fetch at the pre-trade spot price after the fee). Pure; the spot comes from StateView.getSlot0
+ * and the output from the V4 Quoter, both read by the trade panel.
+ */
+const Q96 = 2 ** 96;
+/** Above this the impact line turns amber. */
+export const IMPACT_WARN = 0.05;
+/** Above this the trade needs a second, deliberate tap. */
+export const IMPACT_CONFIRM = 0.15;
+
+/** currency1 per currency0, in raw units, from sqrtPriceX96. */
+export function spotPrice1Per0(sqrtPriceX96: bigint): number {
+  const root = Number(sqrtPriceX96) / Q96;
+  return root * root;
+}
+
+/**
+ * `zeroForOne`: paying currency0 for currency1 (a buy, when the quote is currency0). `feePips` is the pool's LP
+ * fee in millionths, charged on the input. Null when the inputs cannot give a meaningful answer.
+ */
+export function priceImpact({ sqrtPriceX96, amountIn, amountOut, zeroForOne, feePips }: { sqrtPriceX96: bigint; amountIn: bigint; amountOut: bigint; zeroForOne: boolean; feePips: number }): number | null {
+  if (sqrtPriceX96 <= 0n || amountIn <= 0n || amountOut < 0n || feePips < 0 || feePips >= 1_000_000) return null;
+  const price = spotPrice1Per0(sqrtPriceX96);
+  const afterFee = Number(amountIn) * (1 - feePips / 1_000_000);
+  const ideal = zeroForOne ? afterFee * price : afterFee / price;
+  if (!Number.isFinite(ideal) || ideal <= 0) return null;
+  // rounding in the quoter can land a hair above the ideal on a tiny trade: that is zero impact, not negative
+  return Math.min(1, Math.max(0, 1 - Number(amountOut) / ideal));
+}
+
+export type ImpactLevel = "low" | "warn" | "confirm";
+
+export function impactLevel(impact: number): ImpactLevel {
+  return impact >= IMPACT_CONFIRM ? "confirm" : impact >= IMPACT_WARN ? "warn" : "low";
+}
+
+/** "<0.01%", "0.42%", "4.2%", "37%". */
+export function fmtImpact(impact: number): string {
+  const pct = impact * 100;
+  if (pct < 0.01) return "<0.01%";
+  if (pct < 1) return `${pct.toFixed(2)}%`;
+  if (pct < 10) return `${pct.toFixed(1)}%`;
+  return `${Math.round(pct)}%`;
+}
diff --git a/app/src/lib/launchpad/proof.test.ts b/app/src/lib/launchpad/proof.test.ts
new file mode 100644
index 00000000..819f1d64
--- /dev/null
+++ b/app/src/lib/launchpad/proof.test.ts
@@ -0,0 +1,66 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { proofFacts } from "./proof.ts";
+
+const LAUNCHER = "0x6b2b000000000000000000000000000000c051d3";
+const base = { symbol: "PANCHU", launcher: LAUNCHER, lpFee: 10_000, mode: "creator" as const, recipients: 1 };
+const holders = (o: Partial<{ holders: number; top10Bps: number; poolBps: number; bps: number; sells: number; bought: string; sniperWallets: number; sniperBps: number }> = {}) => ({
+  synced: true,
+  holders: o.holders ?? 1_480,
+  top10Bps: o.top10Bps ?? 1_150,
+  poolBps: o.poolBps ?? 5_020,
+  creator: { address: LAUNCHER, bps: o.bps ?? 0, bought: o.bought ?? "0", sold: "0", sells: o.sells ?? 0 },
+  sniper: { wallets: o.sniperWallets ?? 0, bps: o.sniperBps ?? 0 },
+});
+const fact = (facts: { key: string }[], key: string) => facts.find((f) => f.key === key) as { tone: string; title: string; detail: string };
+
+test("all five facts, in order, for an indexed token", () => {
+  const { facts, holdersReady } = proofFacts({ ...base, holders: holders() });
+  assert.equal(holdersReady, true);
+  assert.deepEqual(facts.map((f) => f.key), ["lock", "creator", "spread", "launch", "fees"]);
+  assert.match(fact(facts, "lock").detail, /^50% of the supply is in the locked Uniswap v4 pool\./);
+  assert.equal(fact(facts, "creator").title, "The creator holds none");
+  assert.equal(fact(facts, "creator").detail, "0x6b2b…51d3 has never bought or sold PANCHU.");
+  assert.equal(fact(facts, "spread").title, "1,480 holders");
+  assert.equal(fact(facts, "spread").detail, "The ten largest hold 12% of the supply between them.");
+  assert.equal(fact(facts, "launch").title, "Nobody bought at launch");
+  assert.equal(fact(facts, "launch").detail, "No wallet bought in the launch block or the 3 blocks after it.");
+  assert.equal(fact(facts, "fees").title, "1% trading fee, to the recipient set at launch");
+});
+
+test("missing holder history leaves the holder facts out instead of guessing", () => {
+  for (const h of [null, { ...holders(), synced: false }]) {
+    const { facts, holdersReady } = proofFacts({ ...base, holders: h });
+    assert.equal(holdersReady, false);
+    assert.deepEqual(facts.map((f) => f.key), ["lock", "fees"]);
+    assert.doesNotMatch(fact(facts, "lock").detail, /%/, "no share without the index");
+  }
+});
+
+test("the creator's holdings and sells read as facts, flagged at the holders panel's thresholds", () => {
+  const holds = (o: Parameters<typeof holders>[0]) => fact(proofFacts({ ...base, holders: holders(o) }).facts, "creator");
+  assert.deepEqual([holds({ bps: 350 }).title, holds({ bps: 350 }).tone, holds({ bps: 350 }).detail], ["The creator holds 3.5%", "info", "0x6b2b…51d3 has not sold any."]);
+  assert.equal(holds({ bps: 2_500 }).tone, "warn");
+  assert.deepEqual([holds({ bps: 350, sells: 2 }).tone, holds({ bps: 350, sells: 2 }).detail], ["warn", "0x6b2b…51d3 has sold twice."]);
+  assert.deepEqual([holds({ sells: 3, bought: "100" }).title, holds({ sells: 3, bought: "100" }).detail], ["The creator holds none now", "0x6b2b…51d3 sold 3 times and holds no PANCHU."]);
+  assert.equal(holds({ bought: "100" }).tone, "info");
+});
+
+test("concentration and launch-window buyers are flagged only past their thresholds", () => {
+  const f = (o: Parameters<typeof holders>[0]) => proofFacts({ ...base, holders: holders(o) }).facts;
+  assert.equal(fact(f({ top10Bps: 6_000 }), "spread").tone, "warn");
+  assert.equal(fact(f({ holders: 4, top10Bps: 900 }), "spread").detail, "Together they hold 9.0% of the supply.");
+  assert.equal(fact(f({ holders: 0, top10Bps: 0 }), "spread").detail, "Nobody holds PANCHU outside the pool yet.");
+  const one = fact(f({ sniperWallets: 1, sniperBps: 400 }), "launch");
+  assert.deepEqual([one.title, one.tone, one.detail], ["1 wallet bought at launch", "info", "It took 4.0% of the supply in the launch block or the 3 blocks after it."]);
+  assert.equal(fact(f({ sniperWallets: 5, sniperBps: 1_200 }), "launch").tone, "warn");
+});
+
+test("fee routing says where every fee goes and that it cannot change", () => {
+  const fees = (o: Partial<typeof base>) => fact(proofFacts({ ...base, ...o, holders: null }).facts, "fees");
+  assert.equal(fees({ lpFee: 0, mode: "free" as never }).title, "No trading fee");
+  assert.equal(fees({ lpFee: 30_000, mode: "burn" as never }).title, "3% trading fee, burned");
+  assert.match(fees({ lpFee: 30_000, mode: "burn" as never }).detail, /0x…dEaD/);
+  assert.equal(fees({ mode: "split" as never, recipients: 3 }).title, "1% trading fee, to the recipients set at launch");
+  assert.match(fees({ mode: "split" as never, recipients: 3 }).detail, /^3 wallets share it\. openlaunch takes 0%\. .*can never change\.$/);
+});
diff --git a/app/src/lib/launchpad/proof.ts b/app/src/lib/launchpad/proof.ts
new file mode 100644
index 00000000..32451a95
--- /dev/null
+++ b/app/src/lib/launchpad/proof.ts
@@ -0,0 +1,72 @@
+import type { HolderPanel } from "./holdersServer";
+import { SNIPER_BLOCKS, fmtShare } from "./holders.ts";
+import { pipsToPct } from "./math.ts";
+
+/**
+ * The token page's Proof panel: five facts, each read from the chain or the launch transaction, worded plainly
+ * and never scored. `tone` only says which facts deserve a second look (the same thresholds as the holders panel).
+ * Holder facts are left out until the transfer history is indexed: missing data is not a clean bill of health.
+ */
+export type ProofKey = "lock" | "creator" | "spread" | "launch" | "fees";
+export type ProofFact = { key: ProofKey; tone: "good" | "info" | "warn"; title: string; detail: string };
+export type FeeMode = "free" | "burn" | "creator" | "split";
+
+const short = (a: string) => `${a.slice(0, 6)}…${a.slice(-4)}`;
+const plural = (n: number, one: string, many = `${one}s`) => `${n.toLocaleString("en-US")} ${n === 1 ? one : many}`;
+const times = (n: number) => (n === 1 ? "once" : n === 2 ? "twice" : `${n.toLocaleString("en-US")} times`);
+
+export function proofFacts({ holders, symbol, launcher, lpFee, mode, recipients }: {
+  holders: Pick<HolderPanel, "synced" | "holders" | "top10Bps" | "poolBps" | "creator" | "sniper"> | null;
+  symbol: string;
+  launcher: string;
+  lpFee: number;
+  mode: FeeMode;
+  recipients: number;
+}): { facts: ProofFact[]; holdersReady: boolean } {
+  const ready = holders?.synced === true;
+  const facts: ProofFact[] = [];
+
+  facts.push({
+    key: "lock",
+    tone: "good",
+    title: "Liquidity is locked forever",
+    detail: ready
+      ? `${fmtShare(holders!.poolBps)} of the supply is in the locked Uniswap v4 pool. No wallet can withdraw the position, including the creator and openlaunch.`
+      : "The pool position sits in an ownerless locker. No wallet can withdraw it, including the creator and openlaunch.",
+  });
+
+  if (ready) {
+    const h = holders!;
+    const { bps, sells } = h.creator;
+    const bought = BigInt(h.creator.bought);
+    facts.push(bps === 0 && sells === 0 && bought === 0n
+      ? { key: "creator", tone: "good", title: "The creator holds none", detail: `${short(launcher)} has never bought or sold ${symbol}.` }
+      : bps === 0
+        ? { key: "creator", tone: sells > 0 ? "warn" : "info", title: "The creator holds none now", detail: sells > 0 ? `${short(launcher)} sold ${times(sells)} and holds no ${symbol}.` : `${short(launcher)} bought and no longer holds ${symbol}.` }
+        : { key: "creator", tone: bps >= 2_000 || sells > 0 ? "warn" : "info", title: `The creator holds ${fmtShare(bps)}`, detail: sells > 0 ? `${short(launcher)} has sold ${times(sells)}.` : `${short(launcher)} has not sold any.` });
+
+    facts.push({
+      key: "spread",
+      tone: h.top10Bps >= 5_000 ? "warn" : "info",
+      title: plural(h.holders, "holder"),
+      detail: h.holders === 0 ? `Nobody holds ${symbol} outside the pool yet.` : h.holders <= 10
+        ? `Together they hold ${fmtShare(h.top10Bps)} of the supply.`
+        : `The ten largest hold ${fmtShare(h.top10Bps)} of the supply between them.`,
+    });
+
+    const window = `the launch block or the ${SNIPER_BLOCKS} blocks after it`;
+    facts.push(h.sniper.wallets === 0
+      ? { key: "launch", tone: "good", title: "Nobody bought at launch", detail: `No wallet bought in ${window}.` }
+      : { key: "launch", tone: h.sniper.bps >= 1_000 ? "warn" : "info", title: `${plural(h.sniper.wallets, "wallet")} bought at launch`, detail: `${h.sniper.wallets === 1 ? "It" : "They"} took ${fmtShare(h.sniper.bps)} of the supply in ${window}.` });
+  }
+
+  const fixed = "openlaunch takes 0%. Fee routing was set in the launch transaction and can never change.";
+  const pct = pipsToPct(lpFee);
+  facts.push(mode === "free"
+    ? { key: "fees", tone: "good", title: "No trading fee", detail: `Trades pay only the network's gas. ${fixed}` }
+    : mode === "burn"
+      ? { key: "fees", tone: "info", title: `${pct} trading fee, burned`, detail: `Every fee goes to 0x…dEaD. ${fixed}` }
+      : { key: "fees", tone: "info", title: `${pct} trading fee, to the ${recipients === 1 ? "recipient" : "recipients"} set at launch`, detail: `${recipients === 1 ? "One wallet receives" : `${plural(recipients, "wallet")} share`} it. ${fixed}` });
+
+  return { facts, holdersReady: ready };
+}
diff --git a/app/src/lib/launchpad/tintServer.ts b/app/src/lib/launchpad/tintServer.ts
new file mode 100644
index 00000000..7e4fc7e3
--- /dev/null
+++ b/app/src/lib/launchpad/tintServer.ts
@@ -0,0 +1,36 @@
+import "server-only";
+import sharp from "sharp";
+import { readImage } from "./imageStore";
+import { storedImageKey } from "./images";
+import { fallbackTint, tintFromPixels, type TokenTint } from "./tint";
+
+/**
+ * A token page's tint, read from its stored logo. Only our own store is read (by key, never by fetching a URL),
+ * the image is shrunk to 32×32 before counting, and results are cached per key: stored logos never change.
+ * A logo the store cannot return right now falls back to the avatar hue for a minute, then is tried again.
+ */
+const SAMPLE = 32;
+const MAX_CACHED = 2_000;
+const RETRY_MS = 60_000;
+const cache = new Map<string, { tint: TokenTint; until: number }>();
+
+export async function tokenTint(image: string | null, token: string): Promise<TokenTint> {
+  const key = storedImageKey(image);
+  if (!key) return fallbackTint(token);
+  const hit = cache.get(key);
+  if (hit && hit.until > Date.now()) return hit.tint;
+  let tint: TokenTint | null = null;
+  try {
+    const bytes = await readImage(key);
+    if (bytes) {
+      const { data, info } = await sharp(bytes, { limitInputPixels: 4_096 * 4_096 }).resize(SAMPLE, SAMPLE, { fit: "cover" }).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+      tint = tintFromPixels(data, info.channels === 3 ? 3 : 4);
+    }
+  } catch {
+    tint = null;
+  }
+  if (cache.size >= MAX_CACHED) cache.delete(cache.keys().next().value!);
+  const result = tint ?? fallbackTint(token);
+  cache.set(key, { tint: result, until: tint ? Infinity : Date.now() + RETRY_MS });
+  return result;
+}