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. 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.

Preview