Skip to content

feat: add gas tracker with real-time estimates #136

@AugustoL

Description

@AugustoL

Summary

Add a gas tracker feature showing real-time gas prices and transaction cost estimates.

Features

1. Gas Price Display

Show current gas prices in the navbar or dedicated section:

Gas: 🟢 Low: 15 | 🟡 Avg: 20 | 🔴 High: 25 gwei

2. Gas Price Tiers

  • Low (Slow): ~10+ minutes confirmation
  • Average (Standard): ~3-5 minutes confirmation
  • High (Fast): ~30 seconds confirmation

3. Transaction Cost Estimator

Tool in DevTools to estimate transaction costs:

┌─────────────────────────────────────────┐
│ Gas Estimator                           │
├─────────────────────────────────────────┤
│ Transaction Type: [ETH Transfer ▼]      │
│                                         │
│ Estimated Gas: 21,000                   │
│                                         │
│ Cost Estimates:                         │
│   Low:  0.000315 ETH (~$0.79)          │
│   Avg:  0.000420 ETH (~$1.05)          │
│   High: 0.000525 ETH (~$1.31)          │
└─────────────────────────────────────────┘

4. Common Transaction Types

Pre-configured gas estimates for:

  • ETH/native transfer (21,000 gas)
  • ERC20 transfer (~65,000 gas)
  • ERC20 approve (~46,000 gas)
  • NFT transfer (~85,000 gas)
  • Uniswap swap (~150,000 gas)
  • Custom (user input)

Technical Approach

Data Source

  • Primary: RPC eth_gasPrice and eth_feeHistory
  • EIP-1559 support: baseFeePerGas + priority fee estimates
  • Poll interval: Every 12 seconds (1 block)

Gas Price Calculation

interface GasPrices {
  low: bigint;      // 25th percentile of recent blocks
  average: bigint;  // 50th percentile
  high: bigint;     // 75th percentile
  baseFee: bigint;  // Current base fee (EIP-1559)
}

Network Support

  • Ethereum Mainnet (EIP-1559)
  • L2s with different gas models:
    • Arbitrum (L1 + L2 gas)
    • Optimism/Base (L1 data fee + L2 execution)
    • Polygon (standard gas)
    • BSC (standard gas)

UI Locations

  1. Navbar: Compact gas indicator (optional, toggle in settings)
  2. Network page: Gas section with more details
  3. DevTools: Full gas estimator tool

Settings

  • Show/hide gas in navbar
  • Default gas tier preference
  • Auto-refresh interval

Acceptance Criteria

  • Real-time gas price fetching via RPC
  • Low/Average/High tier calculation
  • EIP-1559 support (base fee + priority fee)
  • Gas estimator tool in DevTools
  • Common transaction type presets
  • USD cost estimates (requires price integration)
  • L2 gas model support
  • Navbar gas indicator (optional)

Dependencies

  • Price integration - for USD cost estimates

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions