whitehash
Domain

MarketStats

Floor, volume, charts, and event history from one market index.

Usage

tsx
import { MarketStats } from "@whitehash/ui"


import { useMarketIndex } from "@whitehash/react"


const { index } = useMarketIndex("/market-index.json")
if (!index) return null


<MarketStats.Root index={index}>
  <MarketStats.Tiles />
  <MarketStats.FloorChart />
  <MarketStats.VolumeChart />
  <MarketStats.Events limit={25} />
</MarketStats.Root>

Parts

tsx
MarketStats.Root          // provides the index and its chain currency
MarketStats.Tiles         // the default stat set, in a responsive grid
MarketStats.Floor         // individual tiles
MarketStats.Listed
MarketStats.Median
MarketStats.Volume        // span="24h" | "7d" | "30d" | "all" | …
MarketStats.Sales
MarketStats.HighestSale
MarketStats.LowestSale
MarketStats.FloorChart    // daily floor, with a crosshair
MarketStats.VolumeChart   // daily traded volume
MarketStats.Events        // newest-first history; limit={25}
MarketStats.Tile          // label/value cell for your own arrangements
MarketStats.Delta         // signed percentage, colored by direction

Currency is handled for you

Every money field in an index is a base-unit string, mutez on Tezos and wei on EVM. The parts format them with the chain the index came from, so your code never converts. The same helpers are exported from @whitehash/market if you render your own layout.

FloorChart renders nothing when active listings are unavailable, which is the case on Ethereum and Base: fxhash listings there are signed off-chain, so only sales can be recovered. Floor and Listed say so on the tile.

Live result