shadcn.io is not affiliated with official shadcn/ui
DAO Treasury Web3 Block for React
A DAO treasury page: five holdings in integer base units beside their sample USD values, a monthly burn in four lines, and a runway in months that a volatile-asset select and a burn-change range both re-derive, with recent movements as signed rows.
Installation
Overview
Show how long a DAO can keep paying its bills, and what that depends on, with this treasury panel for React with Base UI. It's the treasury page of Hollowvault, a DAO. The headline is the runway in months: the liquid value divided by the net monthly burn. A Native Select sets how much of the volatile assets counts, 100, 70 or 50 %, and a range called Burn changes by moves the burn from minus 30 % to plus 50 %; the runway and a sentence like At 70 % the runway is 20.1 months follow both. Five holdings sit in a table: the decimal amount over the exact integer in base units, a sample USD value, a Stable or Volatile word and what counts. Next to it are four burn lines with bars on one shared scale, the fixed fee income, and the recent movements as signed rows with an arrow and a word for in or out. For DAOs, foundations and any balance sheet with a runway.
FAQ
How is the runway computed?
Liquid value is the stable assets in full plus the volatile ones at the chosen percentage, in sample USD. Net burn is the four monthly lines after the change, less the fixed fee income. The runway is the first divided by the second, rounded down to one decimal, and it appears in the headline, the sentence and the status line.
Why are the balances shown in base units?
Because that is what a chain stores: an integer in the token's smallest unit, with a number of decimals that says where the point goes. USDC has 6, WBTC 8 and ETH 18, so 1,840,000 USDC is 1840000000000. The table shows the amount and the exact integer, and the value uses a typed sample rate, not a market price.
What does Burn changes by do?
It scales the four burn lines by the chosen percentage and leaves the fee income alone, which is why a cut of 30 % raises the runway by more than 30 %. The bars share one scale, so a line really shrinks when the range moves. It is a native range, so arrow keys, Home and End work.
What stays local, and how do I wire it?
All of it. Holdings, rates, burn lines and movements are typed constants and nothing is read from a chain or a price feed. In your app read balances from the treasury's addresses, prices from your price source and the burn from your payment records, and keep dividing liquid value by net burn in one function.
Is it accessible from the keyboard?
Yes. The select and the range have visible labels, the range reads its value as a sentence, the holdings are a table with a caption and row headings in a named scroll region, and movements say in or out for screen readers. One polite status message reports the runway after each change.