shadcn.io is not affiliated with official shadcn/ui
Safe Wallet Web3 Block for React
A co-op treasury's spending policy: four owners with a Remove that can be blocked, an Add owner form that checks the address shape, a Slider for how many must approve and a list showing what the new rule does to the queued transfers.
Installation
Overview
Set who can move shared funds before the rule is saved, with this spending policy panel for React with Base UI. It's the treasury of Cairnfold, a farming co-op. A hairline frame with a plus mark on each corner holds three bands. Owners lists four people, each with an initials Avatar, a short address and a ghost Remove button that stays off when removing would leave fewer owners than the rule needs, and says so. Add an owner takes a name and an address in two Fields and checks the address's shape as you add. Approval rule has a Slider for how many owners must approve and a warning at one. Under it a list re-reads the four queued transfers against the rule you are setting, with a sentence that counts them and names the largest, and a note of what each was before. The foot's Shine Button, Save policy, waits until something changes, and Discard puts everything back. For treasuries, co-ops and any shared wallet.
FAQ
How is the impact worked out?
From the queue (QUEUE), which lists who has approved each transfer. With the rule you set, a transfer needs the threshold minus its approvals still counted, and approvals only count from owners who remain. The sentence over the list counts the transfers that need more, and names the largest and how many approvals it has. Each row also shows what it needed under the saved rule when that differs, so you see what changed.
When is Remove blocked?
When removing an owner would leave fewer owners than the rule needs, or fewer than two. The button stays focusable and tells screen readers why, and a note under the list says it. Lower the rule with the slider first and Remove turns on again. Removing an owner also drops their approvals from the impact list.
What does the address check do?
It checks the shape only: 0x and then 40 characters from 0 to 9 and a to f, and not already an owner. A mixed-case address isn't checked against its checksum here, and the form says so. In your app verify the checksum (EIP-55) and, if you use a name service, resolve names on the server.
What stays local, and how do I wire it?
Everything. Saving changes this page's own state and says Policy saved in this demo; nothing is signed or sent, and a real policy change is itself a transaction the owners must approve under the current rule. In your app turn Save policy into a proposed transaction to your wallet contract, and show the change as pending until enough owners have approved it.
Is it accessible from the keyboard?
Yes. The slider moves one owner at a time with the arrow keys and reads its value as, for example, 3 of 4 owners. Each Remove names its owner, the form's problem line is always present so nothing jumps, and Enter in either field adds the owner. One polite status line in the foot reports the unsaved count and each result.