shadcn.io is not affiliated with official shadcn/ui
Contributor Rewards Web3 Block for React Aria
A contributor program screen with a four-step tier ladder, a progress bar to the next tier, this month's pool share worked out from typed points, a ledger of eight contributions filtered by kind, and a Claim button for the released amount.
Installation
Overview
Show contributors what their work has earned, and what is still to come, with this reward screen for React with React Aria. It's the screen of Kudoshire, a contributor program. A hairline frame with a plus mark on each corner opens on a tier ladder, Bronze, Silver, Gold and Platinum, each with its threshold and the current tier outlined, over a Progress bar that says "240 points to Gold". The pool band works out your share from the typed numbers: 360 points of 15,000 is 2.4 %, which is 1,200 of the month's 50,000 KUDO. Under it a Toggle Group filters the ledger of eight credited contributions by kind: code, docs, reviews and support, each with its points and its date, in a scroll region that keeps its height. The foot holds the status line and the one Shine Button, Claim 120 KUDO. For community programs, open-source funds and DAOs that pay out of a monthly pool.
FAQ
How is the share of the pool worked out?
Your points are added up from the ledger, divided by the typed total for everyone, and multiplied by the pool, rounded down to a whole token. 360 of 15,000 points is 2.4 %, so 1,200 KUDO of 50,000. Change a number in the typed data at the top of the file and the tier, the bar, the share and the header sentence follow, because none of them is written out twice.
How does the tier ladder decide where you are?
Each tier has a threshold in points and you hold the highest one you have reached. The current cell is outlined and marked as the current step for assistive technology, and the progress bar runs from your tier's threshold to the next one. At the top tier the bar is full and the sentence says so.
What does Claim 120 KUDO do?
It moves the released amount to claimed in local state and says "Claimed 120 KUDO. Nothing signed." Nothing is signed, no wallet is asked and no token moves. Pressed again, it answers that it was already claimed instead of doing anything. In your app the button would start your claim transaction and the amount would come from your contract.
What stays local, and how do I wire it?
All of it. The contributions, the points of everyone and the pool are typed constants, the filter and the claim are local state, and the figures are samples, not market data. In your app load the ledger and the totals from your server, keep the tier thresholds in one place both sides read, and check the claim on the server.