MarketHeader
Installation
import { MarketHeader } from "@/components/product/market-header/market-header";Overview
Market detail page header: thumbnail, market question, a meta row (volume, close date, optionally time-to-maturity), watchlist toggle, and an expandable rules panel (MarketRules). The headline shows a probability or APY-style number for one outcome with a trend indicator (positive = up, negative = down) and a "View{opposite}" toggle to flip which outcome is headlined. A separate CDS-oriented presentation is available as an opt-in variant — see CDS Variant below — which re-frames the same header around a protocol name and a 3-tier KPI hierarchy instead of the default single-outcome headline. Omitting the CDS-specific fields keeps the header in its default, legacy prediction-market framing.
Interactive Demo
Will Reza Pahlavi lead Iran in 2026?
CDS Variant
variant="cds" flips the header into a 3-tier KPI hierarchy: Tier 1 hero pair (Chance of default · Earn if no default) at 24px, Tier 2 inline context row (TVL at risk · Premium pool) at 14px, and Tier 3 trust signal (Audited N× auditors) inline in the meta row at 12px. No cards, no borders, no view toggle — both hero sides shown simultaneously. Max font size 24px.
Full CDS header (Marrow Bridge)
Marrow Bridge
Will Marrow Bridge default or be exploited before Jun 30, 2026?
CDS variant without cdsMetrics (graceful — Tier 1/2/3 all skipped, falls back to default hero path)
Early-stage Protocol
Will Early-stage Protocol default before Sep 30, 2026?
CDS variant — single auditor (Tier 3 trims auditors gracefully)
Helios Lend
Will Helios Lend default before Sep 30, 2026?