UI Kit
Leaderboard Page
Interactive preview for the @agg-build/ui LeaderboardPage surface
Leaderboard Page
LeaderboardPage ranks your app's traders by realized P&L or volume over a preset period
(24h, 7d, 30d, all time). Identity fields (username, avatar, wallet) follow the app's
leaderboardIdentity setting, which defaults to anonymous.
Rankings are GET /leaderboard. See Portfolio and Trader leaderboard.
Use Storybook as the source of truth for controls, layout states, and composition details.
Import
import "@agg-build/ui/styles.css";
import { LeaderboardPage } from "@agg-build/ui/pages";Requires <AggProvider> from @agg-build/hooks.
Props
| Prop | Description |
|---|---|
period, onPeriodChange | Controlled preset: "1d" | "7d" | "30d" | "all" |
metric, onMetricChange | Controlled sort: "realizedPnl" | "volume" |
rows, isLoading, error, hasNextPage, onLoadMore, isLoadingMore | Supply your own data instead of the built-in useLeaderboard hook |
currentUserId | Row to highlight as "You" (defaults to the signed-in user) |
appName | Shown in the subtitle |
onError | Called with render errors caught by the page's error boundary |
className | Extra classes on the root element |
classNames | Slot overrides: root, header, toolbar, list, row, footer |
P&L is realized only (sells and settled markets, before fees) and refreshes every 5 minutes. Each row
carries volume (buys and sells) and spent (buys only), so you can show either.