shadcn.io is not affiliated with official shadcn/ui
DAO Proposal Web3 Block for Radix UI
One proposal of a grants DAO: a three-part bar of For, Against and Abstain with a tick at quorum, a status worked out from the tally, a vote group that adds your delegated voting power, and the decoded call the proposal runs.
Installation
Overview
Show one governance proposal and let a reader vote on it, with this DAO proposal panel for React with Radix UI. It's proposal OMP-27 of Orchardmoot, a grants DAO, and every number is typed. A bar splits the votes cast into For, Against and Abstain, with a tick where quorum sits and the counts and shares in a list under it. The headline is a status worked out from those counts: Failing, quorum not reached, until the votes cast reach 4,400,000, then Passing or Failing. A side cell lists your voting power, 940 of your own and 300 delegated to you, the block it was counted at, and a vote group with a Shine Button that casts it. Casting adds all 1,240 to the chosen side and the tally, the bar and the status change at once; afterwards the cell says you voted and that on a chain a vote cannot be changed. A Collapsible below the tally lists the call the proposal runs, Transfer 250,000 USDC to the grants multisig, with its typed calldata. For DAOs, grant programs and any proposal page.
FAQ
How is the status worked out?
From the counts alone. Quorum is 4,400,000 votes in all, and Abstain counts toward it. Below that the status is Failing: quorum not reached, with the number of votes still missing; above it, For beats Against is Passing and anything else is Failing. The demo starts 1,000 votes short, so any vote you cast reaches quorum and shows the status changing.
What is delegated voting power?
The sum of your own tokens and the tokens other holders delegated to you, counted at a snapshot block so buying or moving tokens later changes nothing. Here that is 940 plus 300, and one vote carries all 1,240 to a single side; it cannot be split.
What is in Actions this proposal runs?
The decoded call a passed proposal would execute, in words, with the raw calldata under it: the selector for transfer(address,uint256), the padded recipient and the amount in the token's smallest unit. The values are typed samples and nothing is executed.
What stays local, and how do I wire it to a chain?
All of it. The tally, the quorum and your power are constants at the top of the file, and casting a vote changes local state only; nothing is signed or sent. In your app read the tally and your power at the proposal's snapshot from your governor contract or indexer, send the vote as a signed transaction or an off-chain signature, and recompute the status from what comes back.
Is it accessible from the keyboard?
Yes. The vote choices are native radio buttons in a named group, Cast vote answers when nothing is chosen instead of staying silent, the call list is a disclosure button, and the bar has a text equivalent in the counts beside it. One polite status message reports the status and each action.