Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

Rewards Calculator Web3 Block for Ark UI

A staking rewards projection: an amount, a token with its example rate, a 3, 6, 12 or 24 month duration and a compounding choice, with projected rewards, daily and monthly earnings, what compounding adds and a year by year table with bars.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Project what a stake could earn and what compounding adds, with this rewards calculator for React with Ark UI. It's the calculator of Yieldmeadow, a fictional staking tool, and every rate is a typed example between 1 and 12 percent, labelled as such, not a promise of returns. An amount field, a Native Select of four tokens (each shows its example rate), a Segment Group for 3, 6, 12 or 24 months and a Compounding select with Daily, Weekly, Monthly and None feed the result. The result shows the projected rewards for the whole period, what a day and a month earn at the start, and what compounding adds over simple interest. A table lists each year with its start, rewards and end, and a bar under each year's rewards shares one scale. For staking pages, wallets and anywhere a rate needs to be put in terms of money.

FAQ

How are the numbers worked out?

With compounding, the balance after t years is the amount times one plus the rate over n, to the power of n times t, where n is 365, 52 or 12. With None it is simple interest, the amount times one plus the rate times t. Compounding adds is the first minus the second. A day is the amount times the rate over 365 and a month is over 12, both at the starting balance.

What does a 3 or 6 month projection show in the table?

One row, named for the months it covers (for example Year 1, 6 months), with the rewards earned in that part of the year. A 24 month projection shows two full years and the second year starts from the first year's end when compounding is on.

What happens with a bad amount?

A problem appears under the field (an amount above zero, under a billion), the results show dashes, and the status line repeats the problem. The layout never changes height: the problem has a reserved line and the table keeps room for two years.

What stays local, and how do I wire it?

All of it. The rates are constants in the file and nothing is staked. In your app load each token's current rate from your staking provider, say when it was fetched, and keep the wording that real rates change; the arithmetic can stay as it is.

Is it accessible from the keyboard?

Yes. Every field has a visible label, the duration group is named by its heading, the table has a caption and row headers, and one polite status line reads the whole projection.

How does it look on a phone?

The four inputs stack, the result keeps its headline figure and three small ones, and the table drops its Start column so the period, the rewards with their bar and the end balance stay readable at 320 pixels.

All 100 web3 blocks