Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

Delegations Web3 Block for React Aria

A delegation manager: five validators with commission, uptime, your stake and the monthly reward after commission, and a Redelegate band that opens under a row with a target, an amount slider, before and after rewards and the cooldown.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Compare validators by what they pay you and move stake between them, with this delegation manager for React with React Aria. It's the page of Proxyfield, a fictional delegation manager, and the rate is an example of 4.2 percent a year before commission, not a promise of returns. A strip of totals shows what is delegated, the monthly rewards and the stake still unbonding with its date. A table lists five validators with commission, uptime, your stake and the monthly reward, worked out as the stake times the example rate times one minus the commission. Pressing Redelegate on a row opens a band in place under it, not a dialog: a native select for the target, a slider for how much of the stake to move, both validators' monthly rewards before and after, the net change with the commission shift, and the 7 day cooldown. The foot's one primary confirms, and the stake, the rewards and the totals are worked out again. For staking apps and validator pickers.

FAQ

How is the monthly reward worked out?

Stake times the example rate of 4.2 percent, divided by 12, times one minus the validator's commission. The same function feeds the table, the totals strip and the before and after lines in the band, so they never disagree. A validator with no stake of yours pays 0.0000 ETH.

What is the cooldown?

Redelegated stake cannot move again for 7 days. After a move the receiving validator is held until the date counted from the fixed demo day, its Redelegate button refuses with that date, and one validator starts already held so both states exist. In this demo the hold covers the validator's whole stake.

Why does the band open in the table instead of a dialog?

You can see both validators while you choose. Because opening it adds height, the table lives in a fixed-height scroll region and scrolls the opened row to the top, so the rest of the panel never moves. Close it with Close or by pressing Redelegate on the same row again.

What stays local, and how do I wire it?

All of it. Nothing is delegated or sent; the validators, stakes and dates are typed constants and the move is a state update. In your app read validators and delegations from your staking module, send the redelegation as a wallet transaction, and take the cooldown from the chain's own rules.

Is it accessible from the keyboard?

Yes. The table has a caption, row headers and column headers, each Redelegate button says which validator it moves from and whether its band is open, and the slider reads its percent and amount. One polite status message says what changed.

How does it look on a phone?

The table keeps four columns (validator, fee, stake and monthly reward) with the uptime and the Redelegate button under the name, and the band opens full width with the target and the slider stacked. The foot stays pinned so the primary is always in reach.

All 100 web3 blocks