Gas Fee Estimator — Free Slow/Normal/Fast Network Fee UI

Every crypto wallet or dApp that submits a transaction needs to show the user what it will cost and how long it might take — the gas fee estimator is that widget. This snippet builds the now-standard pattern: three tappable speed tiers (Slow, Normal, Fast) each showing a USD fee and a wait estimate, plus an "advanced" disclosure that reveals a raw gwei slider for users who want manual control.

Tiers as buttons, not radios

Each tier is a plain <button> carrying its gwei price and wait estimate as data-* attributes, grouped visually with role="radiogroup". Clicking one toggles an .active class across the group and updates a summary line at the bottom — deliberately simple state, since the whole point of the tier row is a single, obvious selection rather than a form that needs native radio semantics for keyboard grouping.

One formula computes every fee

feeForGwei(gwei) converts a gwei price into a USD estimate using a fixed gas limit (21,000, a standard ETH transfer) and a reference ETH/USD rate: gwei * 1e-9 * gasLimit * ethUsd. Both the preset tiers' displayed fees and the custom slider's live fee run through conceptually the same math, so switching between presets and manual entry never shows two different pricing models.

The advanced disclosure follows the button pattern properly

The "Advanced: custom gas price" toggle is a real button with aria-expanded and aria-controls pointing at the panel it reveals, and the panel itself uses the hidden attribute rather than a CSS-only display hack — so assistive technology and the DOM agree on whether the content exists right now. A rotating chevron gives a lightweight visual cue that mirrors the aria-expanded state.

Custom slider deselects the presets

Dragging the gwei slider intentionally clears the .active class from all three tier buttons and relabels the summary as "Custom" — because once a user overrides the gas price manually, showing a preset as still "selected" would misrepresent what's actually about to be submitted. This is a small but important correctness detail: the UI should never claim two conflicting fees are both the current choice.

Tuning it for a real network

Swap the hardcoded ETH_USD rate for a live price (pair with the crypto price ticker card), and replace the static tier gwei values with real estimates from your RPC provider's fee-suggestion endpoint (most return low/medium/high percentiles). The summary line and custom-fee math will pick up new numbers automatically since they always recompute from whatever gwei value is current.