Leaderboard Web3 Block for Radix UI

Every contributor has three typed scores in each of two seasons. The list sorts them by the chosen metric, highest first, with ties keeping the list order, and the rank is the position. Change a score in the typed data and the order, the change column, the header sentence and your gap all follow.

It compares a contributor's rank in this season with their rank for the same metric in the season before: Up 3 places, Down 2 places or No change. In Season 2 there is no earlier season in this demo, so the rows say so. The arrow is a shape and the words say the same, so no hue carries it.

Your row, always, under the list: when you are below the visible ten it shows your rank and how far you are from the contributor above you in the metric's own unit. When you are already inside the list it keeps its space but is hidden, and the line above it says where you are, so the panel never changes height.

All of it. The thirty contributors and their scores are typed lines at the top of the file and the show-more count is local state; volume is sample figures in USD, not market data. In your app rank on your server with the same tie rule, page the list instead of holding it, and compute your own row's gap there.

Yes. The metric buttons are a labelled group of toggles, the season is a native select, the list is a named, focusable scroll region and Show 10 more is a button that explains itself when nothing is left. One polite status message reports each change.

The toolbar wraps, each row keeps the rank, the avatar, the name with the rank change under it, and the value at the end, and the pinned row and the button sit under the list.