COMPONENT live-price-chart

Live Price Chart

Canvas-based real-time chart for the underlying asset's perp price (what the prediction market resolves against). Feed with useUnderlyingPrice(symbol) which returns { prices, currentPrice }. Key props: symbol (string), prices (PricePoint[]), currentPrice (number), targetPrice? (number, the strike price), color? (string, defaults to asset brand color).

Install

$ npx shadcn@latest add https://ui.purrdict.xyz/r/live-price-chart.json

Preview

BTCBTC
Usage 
import { LivePriceChart } from "@/components/hip4/live-price-chart"
import { useUnderlyingPrice } from "@/hooks/hip4/use-underlying-price"

function PriceChart({ symbol, targetPrice }: {
  symbol: string
  targetPrice: number
}) {
  const { prices, currentPrice } = useUnderlyingPrice(symbol, {
    historyMinutes: 60,
  })

  return (
    <LivePriceChart
      symbol={symbol}
      prices={prices}
      currentPrice={currentPrice}
      targetPrice={targetPrice}
      height={200}
    />
  )
}
Props
Prop Type Description
symbol string Underlying asset symbol (BTC, ETH, SOL, HYPE)
prices PricePoint[] Array of {time, value} price history
currentPrice number Latest live price for the dot indicator
targetPrice number Reference target price dashed line
color string Line color override. Defaults to asset brand (BTC #f7931a, ETH #627eea, SOL #9945ff, HYPE #50e3c2)
height number Chart height in px. Default: 200
theme "light" | "dark" Color scheme. Default: "dark"

Dependencies

Registry components

hip4-format use-underlying-price