shadcn.io is not affiliated with official shadcn/ui
Referral Program Web3 Block for React Aria
A referral screen with a personal link, a campaign select that adds a tag to it, four tiers by referral count with the current one outlined, an earnings model that works out the monthly amount in cents, and a ledger of five payouts.
Installation
Overview
Turn a share link into a number the person can plan around with this referral screen for React with React Aria. It's the screen of Friendloop, an invite program for a trading community. A hairline frame with a plus mark on each corner starts with your link: a Native Select for the campaign adds a tag to the typed address (?src=newsletter) and a Copy Button copies the result. A ladder of four tiers, Bronze, Silver, Gold and Platinum, shows the referrals each needs and its share of the trading fee, with the current tier outlined and a sentence for how many more reach the next. The earnings model is a Field: type how much each friend trades a month and it works out the monthly earning from the typed 0.30 % fee, your tier's share and the seven friends, in whole cents, and what the next tier would earn on the same trading. Five typed payouts close the panel. For exchanges, wallets and communities with an invite program.
FAQ
How is the monthly earning worked out?
Volume per friend, times the friend count, times the fee rate (30 basis points), times your tier's share (15 % at Silver), all in integer cents so the rounding is the same everywhere: 5,000 USD times 7 friends is 15.75 USD a month. The next tier's line uses the same volume with the next share. A different tier, rate or friend count changes the typed data at the top of the file, and the sentences follow.
What does the volume field accept?
Digits with up to two decimals and thousands commas, up to 1,000,000. Anything else keeps the previous result out of the way, says what is wrong in words next to the field and shows "Waiting for a number" instead of a figure. Western digits are read whatever the page's numerals.
Is the link real, and is anything tracked?
No. The address uses the reserved example domain, the campaign only changes the text after ?src=, and nothing is tracked, counted or paid. Copy uses the browser's clipboard on your press. In your app generate the link on your server, store the campaign tag with each signup, and compute referrals and payouts there.