Prediction market
components for React.

import { MarketCard } from "@/components/hip4/market-card"
import { useMarkets } from "@/hooks/hip4/use-markets"

function MarketList() {
  // Variant auto-detected from market.description
  // Prices auto-resolved from mids map
  const { markets, mids } = useMarkets()

  return (
    <div className="grid grid-cols-3 gap-4">
      {markets.map((m) => (
        <MarketCard
          key={m.yesCoin}
          market={m}
          mids={mids}
          onSideClick={(side) =>
            router.push(`/market/${m.yesCoin}?side=${side}`)
          }
        />
      ))}
    </div>
  )
}

import { LivePriceChart } from "@/components/hip4/live-price-chart"
import { useMarkets } from "@/hooks/hip4/use-markets"

function PriceChart({ symbol, targetPrice }: {
  symbol: string
  targetPrice: number
}) {
  // Hook auto-populates prices via WebSocket
  const { mids } = useMarkets()
  const [prices, setPrices] = useState<PricePoint[]>([])

  // Append new price points on every mid update
  useEffect(() => {
    const coin = `#${symbol}`
    const mid = mids[coin]
    if (mid) {
      setPrices((prev) => [
        ...prev.slice(-3600),
        { time: Math.floor(Date.now() / 1000), value: mid },
      ])
    }
  }, [mids, symbol])

  return (
    <LivePriceChart
      symbol={symbol}
      prices={prices}
      targetPrice={targetPrice}
      height={200}
    />
  )
}

import { ProbabilityChart } from "@/components/hip4/probability-chart"
import { useProbabilityHistory } from "@/hooks/hip4/use-probability-history"

// Multi-outcome question market (3+ outcomes)
function QuestionChart({ markets }: { markets: Market[] }) {
  const { series, isLoading } = useProbabilityHistory(markets)

  if (isLoading) return <Skeleton />

  return (
    <ProbabilityChart
      series={series}
      height={220}
    />
  )
}

import { Orderbook } from "@/components/hip4/orderbook"
import { useOrderbook } from "@/hooks/hip4/use-orderbook"

function MarketOrderbook({ coin }: { coin: string }) {
  const { bids, asks } = useOrderbook(undefined, coin)

  return (
    <Orderbook
      coin={coin}
      bids={bids}
      asks={asks}
      depth={10}
      onPriceClick={(px) => setLimitPrice(px)}
    />
  )
}

import { RecentTrades } from "@/components/hip4/recent-trades"
import type { Trade } from "@/components/hip4/recent-trades"

<RecentTrades
  trades={recentTrades}
  maxRows={15}
/>

import { TradeForm } from "@/components/hip4/trade-form"
import { useOrderbook } from "@/hooks/hip4/use-orderbook"
import { usePortfolio } from "@/hooks/hip4/use-portfolio"
import { useMinShares } from "@/hooks/hip4/use-min-shares"

function TradingPanel({ market }: { market: Market }) {
  // Hooks auto-resolve client from HIP4Provider
  const book = useOrderbook(undefined, market.sides[0].coin)
  const { balance } = usePortfolio(undefined, address)
  const { minShares } = useMinShares(undefined, market.sides[0].coin)

  return (
    <TradeForm
      sides={market.sides}
      bookData={book}
      minShares={minShares}
      usdhBalance={balance}
      isConnected={!!signer}
      onSubmit={async (params) => {
        await placeOrder(params)
      }}
    />
  )
}

import { MarketStats } from "@/components/hip4/market-stats"

<MarketStats volume={42500} trades={186} traders={24} />

import { ProbabilityBar } from "@/components/hip4/probability-bar"

{/* Default Yes/No */}
<ProbabilityBar yesPx={0.72} noPx={0.28} />

{/* Recurring markets — Up/Down */}
<ProbabilityBar
  yesPx={0.58}
  noPx={0.42}
  yesLabel="Up"
  noLabel="Down"
/>

// Segmented countdown (DAYS / HRS / MINS / SECS with urgency colors)
import { Countdown } from "@/components/hip4/countdown"

<Countdown expiry={market.expiry} />

// Simple text countdown (legacy — "2h 15m 30s")
import { CountdownTimer } from "@/components/hip4/countdown"

<CountdownTimer
  expiry={market.expiry}
  onExpire={() => refetchMarket()}
/>

import { PositionCard } from "@/components/hip4/position-card"

<PositionCard
  coin={market.yesCoin}
  shares={100}
  avgEntry={0.45}
  currentPrice={0.65}
  onSell={(coin) => openSellDialog(coin)}
/>

import { RoundsTimeline } from "@/components/hip4/rounds-timeline"
import type { Round } from "@/components/hip4/rounds-timeline"

const rounds: Round[] = [
  { id: 1, expiry: "2026-03-30T09:30:00Z", result: "above", targetPrice: 67000, settlePrice: 67500 },
  { id: 2, expiry: "2026-03-29T09:30:00Z", result: "below", targetPrice: 68000, settlePrice: 66000 },
]

<RoundsTimeline
  rounds={rounds}
  activeRoundId={1}
  onRoundSelect={(round) => router.push(`/market/${round.id}`)}
  period="1d"
  underlying="BTC"
/>