Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Snapshot Vote Web3 Block for Solid

An off-chain ranked-choice vote: rank four grants tracks with up and down buttons, submit your ballot, and read the instant-runoff count of every ballot as a table of rounds with the option that drops out each round.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Run a ranked-choice vote and show exactly how it was counted, with this snapshot vote panel for Solid with Ark UI. It's a vote on Ballotwell, an off-chain voting tool, asking which of four grants tracks gets next quarter. The top band is your ballot: four options ranked with up and down buttons, each saying what it moves, and your power of 1,240 votes counted at block 19,425,000. Under it nine ballots already in are counted by instant runoff and drawn as a table of rounds: each round counts every ballot's highest option still in play, marks the option with the fewest votes as Out, and stops when one option holds more than half of the ballots still in play. A sentence names the winner and its share, and a line says what a plain first-choice count would have picked. Submit ballot, the Shine Button in the foot, adds yours and the rounds run again; Withdraw ballot takes it back. For off-chain polls, DAOs and any vote with more than two choices.

FAQ

How does instant runoff count?

Every ballot ranks the options. A round counts each ballot for its highest-ranked option that is still in play, weighted by the voter's power. If one option holds more than half of the weight still in play it wins; otherwise the option with the fewest votes drops out, its ballots move to their next choice and the count repeats. A tie for last drops the option listed later.

Why can it differ from a first-choice count?

Because a first-choice count ignores second choices. In the demo Tooling grants leads round one with 35 % but never reaches a majority, and the ballots of the options that drop out move to Education grants, which wins in round 3. Add your ballot with Tooling grants first and the result flips, which is the point of showing both.

What does counted at block 19,425,000 mean?

Off-chain votes are weighted by what each voter held at a fixed block, so moving tokens after the snapshot changes nothing. Here the block and your 1,240 votes are typed; each of the nine other ballots carries its own typed weight, and a ballot can rank only some options.

What stays local, and how do I wire it?

All of it. Ballots, weights and the count are typed constants and one pure function, and submitting changes local state; nothing is signed or sent. In your app sign the ballot as an off-chain message with the connected wallet, post it to your voting service, and load every ballot with its weight at the snapshot to run the same count on the server.

Is it accessible from the keyboard?

Yes. The ranking is an ordered list, each button names the option it moves, focus follows the option you moved, and the buttons that cannot move stay focusable and explain why. The rounds are a table with column and row headings in a named scroll region. One polite status message reports each move and the result.

How does it look on a phone?

The ballot rows keep their three columns, the table scrolls sideways inside its own region with the option names kept first, and the foot with Submit ballot stays pinned to the bottom of the screen.