Crypto Market

import { MarketOverview } from '@hanzo/ui'

export function Default() {
  return <MarketOverview />
}

export function SeveralPresets() {
  return <MarketOverview tabs={["indices", "futures", "bonds", "forex"]} height={420} />
}

export function CustomTab() {
  return (
    <MarketOverview
      tabs={[
        "crypto",
        {
          title: "Watchlist",
          symbols: [
            { s: "NASDAQ:AAPL", d: "Apple" },
            { s: "NASDAQ:MSFT", d: "Microsoft" },
          ],
        },
      ]}
      colorTheme="light"
      height={420}
    />
  )
}

export function Controlled() {
  const presets = ["crypto", "indices", "forex"] as const
  const [tab, setTab] = useState<(typeof presets)[number]>("crypto")
  return (
    <YStack gap="$3">
      <XStack gap="$2">
        {presets.map((p) => (
          <Button
            key={p}
            size="sm"
            variant={p === tab ? "primary" : "outline"}
            onPress={() => setTab(p)}
          >
            {p}
          </Button>
        ))}
      </XStack>
      <MarketOverview tabs={[tab]} height={380} />
    </YStack>
  )
}

Types

export interface MarketOverviewSymbol {
  /** Exchange-qualified ticker, e.g. `BINANCE:BTCUSDT`. */
  s: string
  /** The label shown in the row. */
  d: string
}

export interface MarketOverviewTab {
  title: string
  symbols: MarketOverviewSymbol[]
}

export type MarketOverviewPreset = 'crypto' | 'indices' | 'futures' | 'bonds' | 'forex'

export type MarketOverviewTheme = 'light' | 'dark'

export interface MarketOverviewProps extends Omit<YStackProps, 'width' | 'height' | 'theme'> {
  /** Which tabs the table opens with, a preset name or a spelled-out group. */
  tabs?: (MarketOverviewPreset | MarketOverviewTab)[]
  /** The table's own palette; independent of the surrounding gui theme. */
  colorTheme?: MarketOverviewTheme
  /** How far back the sparkline in each row reaches. */
  dateRange?: string
  locale?: string
  isTransparent?: boolean
  showFloatingTooltip?: boolean
  showSymbolLogo?: boolean
  showChart?: boolean
  width?: string | number
  height?: string | number
}

Exports