webdevpuneet.com

Related Snippets

69 in Tools & Calculators category
33–38 of 60

Gas Fee Estimator

Canvas ASCII Art Converter

Cron Expression Builder

Morse Code Translator & Player

Avatar Generator

Box Shadow Generator

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

Gas Fee Estimator · Tools · Plain HTML, CSS & JS · Live preview

CategoryTools & Calculators
TagsAccessibilityCSS Grid

Copy & paste

Source Code

<div class="gfe-card">
  <div class="gfe-head">
    <h3>Network fee</h3>
    <span class="gfe-net">Ethereum Mainnet</span>
  </div>

  <div class="gfe-tiers" id="gfeTiers" role="radiogroup" aria-label="Gas speed">
    <button type="button" class="gfe-tier" data-tier="slow" data-gwei="18" data-wait="~5 min">
      <span class="gfe-tier-icon">🐢</span>
      <span class="gfe-tier-name">Slow</span>
      <span class="gfe-tier-fee">$0.42</span>
      <span class="gfe-tier-wait">~5 min</span>
    </button>
    <button type="button" class="gfe-tier active" data-tier="normal" data-gwei="26" data-wait="~1 min">
      <span class="gfe-tier-icon">🚗</span>
      <span class="gfe-tier-name">Normal</span>
      <span class="gfe-tier-fee">$0.61</span>
      <span class="gfe-tier-wait">~1 min</span>
    </button>
    <button type="button" class="gfe-tier" data-tier="fast" data-gwei="41" data-wait="~15 sec">
      <span class="gfe-tier-icon">🚀</span>
      <span class="gfe-tier-name">Fast</span>
      <span class="gfe-tier-fee">$0.97</span>
      <span class="gfe-tier-wait">~15 sec</span>
    </button>
  </div>

  <button type="button" class="gfe-advanced-toggle" id="gfeAdvToggle" aria-expanded="false" aria-controls="gfeAdvPanel">
    <span>Advanced: custom gas price</span>
    <span class="gfe-chevron" id="gfeChevron">⌄</span>
  </button>

  <div class="gfe-advanced" id="gfeAdvPanel" hidden>
    <div class="gfe-slider-row">
      <input type="range" id="gfeGweiSlider" min="10" max="80" step="1" value="26" aria-label="Custom gas price in gwei">
      <span class="gfe-gwei-val" id="gfeGweiVal">26 gwei</span>
    </div>
    <p class="gfe-custom-fee">Estimated fee: <b id="gfeCustomFee">$0.61</b></p>
  </div>

  <div class="gfe-summary">
    <span>Selected: <b id="gfeSummaryName">Normal</b></span>
    <span id="gfeSummaryFee">$0.61 &middot; ~1 min</span>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Three speed tiers
Slow, Normal, Fast — each with its own fee and wait estimate.
Single active selection
Clicking a tier highlights it and clears the others.
Shared fee formula
Presets and custom slider both derive from one gwei-to-USD calculation.
Accessible disclosure
Advanced panel uses aria-expanded, aria-controls, and the hidden attribute.
Live custom slider
Drag to any gwei value with a real-time fee readout.
Preset/custom exclusivity
Adjusting the slider clears preset selection so the UI never shows two conflicting fees.
Rotating chevron
A lightweight visual cue mirrors the panel's open/closed state.
Tabular gwei readout
Monospaced numerals keep the value from jittering as digits change.

About this UI Snippet

Gas Fee Estimator — Speed Tiers Plus a Custom Gwei Slider

Screenshot of the Gas Fee Estimator snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThree speed tiers render with Normal pre-selected.
  2. 2
    Click a tierThe chosen tier highlights and the summary line at the bottom updates.
  3. 3
    Open "Advanced"Click the toggle to reveal a raw gwei slider with a live USD estimate.
  4. 4
    Drag the sliderThe presets deselect and the summary switches to "Custom" with the live fee.
  5. 5
    Swap in real ratesReplace the tier gwei values and ETH_USD with live figures from your provider.
  6. 6
    Wire the submit actionRead the active tier's gwei (or the slider's value) when the user confirms a transaction.

Real-world uses

Common Use Cases

Wallet send flows
Show Slow, Normal and Fast tiers with fees and wait times before confirming a transaction, beside a wallet card.
DeFi transaction confirmations
Let users choose urgency before signing, with every tier and the custom slider sharing one gwei to dollar formula.
NFT minting checkouts
Pair with NFT mint progress so the cost is shown before submission and the transaction status is shown after it.
dApp settings panels
Offer a default gas preference alongside a settings panel, with an advanced disclosure using aria-expanded and aria-controls.
Swap and bridge widgets
Show network cost next to a currency converter, and an API key manager for developer tooling.
Related: Number Stepper with Keyboard Arrows and Long-Press Acceleration
See the Number Stepper with Keyboard Arrows and Long-Press Acceleration for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

feeForGwei(gwei) converts the gwei price into ETH using a fixed gas limit representing the transaction type (21,000 for a standard transfer), then multiplies by a reference ETH/USD rate: gwei * 1e-9 * gasLimit * ethUsd. Both the three preset tiers and the custom slider run through this same formula, so there is never a mismatch between preset and manual pricing.

Once the user manually overrides the gas price, none of the three presets accurately represents what will be submitted. The slider's input handler clears the active class from every tier button and relabels the summary "Custom" so the UI never implies two different fees are simultaneously selected.

Replace the static data-gwei values on each tier button and the ETH_USD constant with live figures. Most RPC providers and gas APIs (Etherscan gas oracle, blocknative, etc.) return low/medium/high gwei suggestions — map those to the Slow/Normal/Fast tiers on load or on an interval, and update ETH_USD from a price feed like the crypto price ticker card.

Yes. The toggle button carries aria-expanded (kept in sync with true/false) and aria-controls pointing at the panel's id. The panel itself is hidden with the hidden attribute rather than a CSS-only display trick, so screen readers correctly treat its contents as absent until expanded, matching what sighted users see.

Hold selectedTier (or null when custom) and gweiValue in component state. Derive the fee for each tier and the custom slider from the same feeForGwei-equivalent function, and drive the active class and hidden panel from state rather than direct DOM manipulation. The CSS ports unchanged.