Gas Tracker
Gas tiers with what each actually costs. Gwei alone is not a decision — the same gas price costs four times more for a swap than a transfer, which is why gasLimit is a prop.
src/components/ui/gas-tracker.tsxAbout
From the component's own source, where it was written.
Gas price tiers, with what each actually costs.
Gwei alone is not a decision. "32 gwei" means nothing without the fiat cost of the transaction you are about to send, which is why every tier carries both — and why gasLimit is a prop: the same gas price costs four times more for a swap than for a transfer.
Tiers are shown with their expected wait, because the trade being made is time against money and a price with no time attached only shows one side.
Install
npx astralyx-ui add gas-tracker
Usage
import { GasTracker } from '@/components/ui/gas-tracker'
<GasTracker tiers={tiers} gasLimit={120000} nativePrice={ethUsd} onSelect={setTier} />Composer
Change the props and the source below follows.
<GasTracker tiers={tiers} gasLimit={120000} nativePrice={3284.5} />Examples
Tiers
<GasTracker tiers={tiers} gasLimit={120000} nativePrice={ethUsd} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
GasTracker
Gas price tiers, with what each actually costs.
Extends Omit<ComponentProps<'div'>, 'onSelect'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | 'Gas' | — |
| tiers | GasTier[] | required | { id, label, price, wait?, recommended? } where price is gwei. |
| selected | string | — | — |
| onSelect | (id: string) => void | — | — |
| gasLimit | number | 21000 | Units of gas for the transaction being priced — 21000 is a bare transfer. |
| nativePrice | number | — | Fiat price of the native token. Without it the cost is shown in the native unit. |
| nativeSymbol | string | 'ETH' | — |
| currency | string | 'USD' | — |
| locale | string | 'en-GB' | — |
| baseFee | number | — | — |
Types
GasTier
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | ReactNode | — |
| price | number | Gwei. |
| wait? | string | Shown beside the price: the trade is time against money, and a price with no time shows one side. |
| recommended? | boolean | — |