shadcn.io is not affiliated with official shadcn/ui
DAO Members Web3 Block for React Aria
A DAO member table sorted by voting power, delegators or score, with the share held by the top three and the Nakamoto coefficient re-derived by a role select and an Include delegated power switch, and each member's delegation chain in a side cell.
Installation
Overview
See how concentrated a DAO's votes are, and what delegation does to that, with this member directory for React with React Aria. It's the directory of Harbourmeet, a DAO with ten typed members. A strip of figures leads: the share of voting power the top 3 hold, the smallest number of members that reach 51 % (the Nakamoto coefficient) and the total power. A Native Select narrows the set by role, and a Switch called Include delegated power moves each delegator's tokens to the delegate who holds them, so the top three jump from 40 % to 70 % and the number of members needed falls from 4 to 2. The table shows each member's initials, role, voting power, share, delegators and contribution score; the three numeric heads sort it. A row opens that member's delegation chain in the side cell. For DAOs, validator sets and any group where power can be delegated.
FAQ
What is the Nakamoto coefficient here?
The smallest number of members whose combined voting power reaches 51 % of the set shown. The members are ranked by power and added up until the running total passes the line. The figure at the top, the sentence under it and the status line all come from the same function.
What does Include delegated power change?
Off, every member counts the tokens they hold. On, a member who delegates counts as zero and their tokens add to the delegate they chose, so power concentrates in fewer rows. The total never changes, only who holds it, and the rows keep their order until you sort.
Does the role select change the shares?
Yes. Shares and the two figures are worked out over the members shown, so Delegates alone read as their own set. Shares are whole numbers that add up to 100 using the largest remainder, so the column never says 99 or 101.
What stays local, and how do I wire it?
All of it. Members, token balances and who delegates to whom are typed constants; nothing is read from a chain. In your app read balances and delegations at a snapshot block from your token contract or an indexer, and keep computing the shares from that list.
Is it accessible from the keyboard?
Yes. The table has a caption and row and column headings, each sortable head is a button that says it sorts high to low and which one is current, the member name is a button that opens the chain without moving focus, and one polite status message reports each change.