UI Library
Live Mode
Auto-connected UI components that fetch their own data by arenaId.
Live mode is v0.3.0 territory. For now you're wiring up your own SDK calls + WebSocket — but here's what's coming so you can architect around it.
What it will do
Every display component, wrapped with auto-fetching from the on-chain SDK + game server WebSocket. Pass an arenaId, get a working spectator view. That's the whole pitch.
// Coming soon:
import { Leaderboard, PrizePool, EventFeed } from '@ritarena/ui/live'
<Leaderboard arenaId={5} />
<PrizePool arenaId={5} />
<EventFeed arenaId={5} wsUrl="wss://game.ritarena.xyz/snake" /><RitArenaEmbed> (all-in-one)
For platforms that just want to slap a spectator view into their app and move on:
// Coming soon:
import { RitArenaEmbed } from '@ritarena/ui/live'
<RitArenaEmbed
arenaId={5}
wsUrl="wss://game.ritarena.xyz/snake"
theme={{ accent: '#FFC53D' }}
onGameEnd={(result) => console.log(result)}
/>Leaderboard, event feed, prize pool, match result — all bundled. The game canvas is a slot: you render your game inside.
Features (planned)
- Auto-reconnect on WebSocket drop (because they drop)
- SSR-safe (
"use client"boundaries handled internally) - Accepts your existing Solana wallet adapter from context
- Event callbacks:
onElimination,onGameEnd,onRoundComplete
Until then: use display components with your own data pipeline, or the upcoming hooks if you want the data layer without our visuals.