gas.watch

What this is

gas.watch is a small read-only dashboard for practitioners who want numbers tied to real nodes. It polls seven public EVM RPC endpoints in parallel, normalizes base and priority components where the chain exposes them, and shows both gwei and a USD estimate for a simple 21,000-gas transfer. There is no wallet, no write path, and no API key in the default setup—just direct JSON-RPC and one batched CoinGecko call for spot prices.

Architecture

Public RPCs (7 chains)
        |
        v   viem (eth_gasPrice, eth_feeHistory, eth_baseFee, …)
  /api/gas   Next.js Route Handler — Promise.all per chain, stale merge
        |
        v   GasData[] + in-memory history ring
 useGasPrices (SWR, 30s)          useTokenPrices (SWR, 60s)
        |                                    |
        +------------------+------------------+
                           v
              GasTable · sparklines · HistoryDrawer

CoinGecko runs on a separate route with a 60-second in-process cache so the free tier is not hammered on every gas poll.

Data sources and why direct RPC

Aggregator APIs are convenient, but they add another hop, another cache, and another party whose incentives are not yours. For gas, a stale number still looks plausible—you simply pay more.

This app reads each chain’s public endpoint directly. When an RPC fails, the UI keeps the last good sample and marks it stale instead of pretending nothing changed. That is noisier than a polished graph, and that is the point.

Running locally

1. Clone the repository and cd into it.
2. Install dependencies: npm install
3. Start the dev server: npm run dev
4. Open http://localhost:3000

Deploy to Vercel with the default Next.js preset; no environment variables are required for the stock configuration.

Adding a new chain

1. src/constants/chains.ts — append a ChainConfig object: key, label, name, chainId, viemChain (from viem/chains or defineChain), rpcUrl, explorerUrl, and coingeckoId for the native gas token. Add a matching entry in CHAIN_ICONS inside ChainBadge.tsx using the appropriate component from @web3icons/react.

2. src/lib/rpc.ts — if the new chain needs a non-default fetch path (e.g. custom eth_* methods), add a case in fetchGasForChain and implement a small helper, mirroring Polygon or Avalanche.

3. If the token is not already covered, add its CoinGecko id to COINGECKO_IDS in chains.ts so /api/prices batches it.

No UI file needs a hard-coded chain list beyond CHAINS.

Limitations and known gaps

• History is in-memory — trend buffers and the 24h panel reset on server restart or cold start. For durable history you would add Redis, a time-series DB, or similar; the UI calls this out explicitly.
• CoinGecko — free tier is roughly ten requests per minute; when throttled, gwei still shows and USD becomes unavailable (tooltip explains why).
• Public RPCs — shared endpoints can lag or rate-limit; one slow chain does not block the others, but you may see stale rows.
• Priority fee — figures come from node RPCs (eth_maxPriorityFeePerGas, fee history rewards, etc.), not mempool simulation. Treat them as estimates.
• USD column — assumes a plain native transfer at 21,000 gas. Contract calls, L1 data on rollups, and complex txs cost more.

License

MIT — see LICENSE.