shadcn.io is not affiliated with official shadcn/ui
Gas Tracker Web3 Block for Radix UI
A fee estimator with Slow, Standard and Fast tiers, a cost table for six actions, a 24-hour fee chart that marks the cheapest three hours, and a wait slider that reads the best saving.
Installation
Overview
Say what a transaction costs and when it costs least, with this gas tracker panel for React with Radix UI. It's the fee estimator of Feegauge, and every fee is a typed sample pattern, not a live feed. A Segment Group picks Slow, Standard or Fast, each a typed multiple of the hour's base fee with a typed wait in seconds. A table prices six actions, from a plain ETH transfer at 21,000 gas to a contract deploy at 1,200,000, as gas units times gwei times a sample ether rate, in USD and ETH. Beside it, a chart of 24 bars shows the typical base fee by hour of day, marks the cheapest three hours with the darkest weight and the hours you can wait with a middle one, and a Slider, I can wait, reads the best saving from the fixed starting hour, for example "Waiting 7 hours saves about 17%". For wallets, swap screens and developer dashboards.
FAQ
How is a cost worked out?
Gas units times the fee in gwei, divided by a billion, gives ETH; that times the sample rate of 3,120 USD per ETH gives dollars. The same helper feeds the table, the header sentence and the screen reader text, and the figures are labelled sample figures, not market data.
What do Slow, Standard and Fast change?
The fee, through a typed multiple of the base fee at the starting hour, and the typed wait beside it. The chart always shows the standard pattern, so changing the speed moves the table and the header but not the bars.
How is the saving worked out?
From the hour of the fixed AS_OF time, the helper looks at every hour up to the wait you chose, finds the lowest base fee, and compares it with the fee now. If now is already the lowest, the line says waiting saves nothing. The cheapest three hours of the whole day are found the same way over the typed pattern.
What stays local, and how do I wire it?
All of it: the hourly pattern, the tiers and the rate are typed constants, and no node or gas oracle is called. In your app read a fee estimate from your node or a gas service, keep a rolling history for the chart, and label how fresh it is.