shadcn.io is not affiliated with official shadcn/ui
Payroll Web3 Block for Vue
A DAO pay run: five recipients with an include box, a new-recipient badge and a token select each, and a pre-flight list that checks the balance per token, duplicate addresses and new recipients before Run payroll turns on.
Installation
Overview
Catch the mistakes before one batch pays everyone, with this pay run panel for Vue with Ark UI. It's the payroll screen of Wagewell, a payroll tool for DAOs. Five recipients sit in a list, each with a Checkbox to include them, initials, a short address, a Badge when they have never been paid, the amount and a token Native Select for USDC or DAI. Under it a pre-flight list re-runs on every change: what the batch needs in each token against the demo treasury (for example DAI: needs 3,120, you hold 2,640, add 480), whether any address appears twice, and a box to confirm the new recipient. The foot's Shine Button, Run payroll, stays off with the reason in the status line until every check passes; running it marks the rows paid and says how much sample gas one batch saves over single payments. For DAOs, studios and any team that pays several people at once.
FAQ
What are the checks?
Per token, the sum of the included rows against the typed balance (and how much to add if it falls short); duplicates, meaning two included rows with the same address; and new recipients, which needs the I checked the address box. Unticking a row removes it from every sum. Switching a person from DAI to USDC moves their amount between the totals, which is how the DAI shortfall is fixed.
Where does the gas figure come from?
A single token transfer is priced at 65,000 gas; a batch at 40,000 plus 20,000 for each recipient. The difference, times 20 gwei and a sample ETH rate, is the saving shown after the run. All three numbers are typed samples, and the saving changes with how many rows are included.
How are amounts stored?
As whole hundredths of a token, so nothing is rounded as a decimal; they are shown with commas and two decimals only when they are not whole. Both tokens count as one dollar in this sample.
What stays local, and how do I wire it?
All of it. Run payroll only changes this page and says Paid in this demo; no transaction is built or signed. In your app load recipients and balances from your records and chain, and send the batch through a multisig or a batch contract that the approvers sign, then mark rows paid from the receipts.
Is it accessible from the keyboard?
Yes. Every checkbox and select is named with the person it belongs to, the checks are a list that says whether each passes in words as well as with a glyph, and the one polite status line in the foot gives the first reason Run payroll is off. The button stays focusable while it is off.