shadcn.io is not affiliated with official shadcn/ui
Airdrop Claim Web3 Block for Svelte
A token claim page with the allocation split into Base, Early user and Governance with the total derived, a vesting split of 25 percent now and 75 percent over 12 months, the claim deadline, the gas against the claim's value and a claim that signs nothing.
Installation
Overview
Show exactly what a claim gives, when the rest unlocks and what it costs to take it, with this claim page for Svelte with Ark UI. It's the page of Claimhouse, a token claim service. A hairline frame with a plus mark on each corner starts with the allocation: Base 1,200, Early user 300 and Governance 150, with the total of 1,650 ZEFR derived from them. The vesting band has a Progress bar at 25 % and four lines: what unlocks when you claim, the monthly amount after that, the first monthly unlock (30 days after the fixed date) and the claim deadline with the days to go. The cost band sets the gas estimate against the claim's sample value, "Gas is about 0.6 % of the claim". The one Shine Button, Claim 412.5 ZEFR now, shows a typed sample hash and the next unlock; pressing it again says "Already claimed in this demo". For token launches, airdrops and grants with a vesting schedule.
FAQ
How is the vesting split worked out?
The total is the sum of the three parts, 25 % of it is the amount that unlocks now (412.5 ZEFR), and the remaining 1,237.5 is spread over 12 months, about 103.1 a month. All amounts are kept in tenths of a token so the sums are exact; change a part or the percentage in the typed data and every figure follows. The first monthly unlock is the fixed date plus 30 days.
How is the gas comparison made?
The claim's sample value is the unlocked amount times a typed price of 35 cents, 144.38 USD; the gas estimate is a typed 0.90 USD, which is 0.6 % of that. Both are samples, not market data. A real page would estimate gas for the current network and the user's wallet at the time they claim.
What does Claim do, and what does it not?
It marks the claim as made in local state, shows a sample hash that could not pass for a real one and says "Claimed here. Nothing was signed." No wallet is asked and no transaction is sent. Pressing it again changes nothing but the message and the next unlock row. In your app the button would start your claim transaction and read the result from the chain.
Where do the dates come from?
From two typed constants: the fixed date that stands in for today and the claim deadline. The days to go are counted between them, never from the clock, so the page reads the same on every visit.