Skip to content

feat(network): add gas tendency chart on Network and Blocks pages#386

Open
MatiasOS wants to merge 5 commits into
openscan-explorer:devfrom
MatiasOS:feat/gas-tendency-chart
Open

feat(network): add gas tendency chart on Network and Blocks pages#386
MatiasOS wants to merge 5 commits into
openscan-explorer:devfrom
MatiasOS:feat/gas-tendency-chart

Conversation

@MatiasOS
Copy link
Copy Markdown
Member

@MatiasOS MatiasOS commented May 13, 2026

Description

Adds a 50-block gas tendency sparkline above the txs/blocks tables on the Network page and above the blocks table on the Blocks page. Renders base fee (gwei) as a line over gas-used % bars, with a dotted 50% reference line, a hover tooltip (block number, base fee, gas used %), and a 10s auto-refresh. EVM-gated so it stays hidden on Bitcoin and Solana routes.

Related Issue

Closes #359

Type of Change

  • New feature

Changes Made

  • New adapter method NetworkAdapter.getFeeHistory(blockCount, newestBlock) wrapping eth_feeHistory and returning ready-to-plot values (bigint base fees in wei, decimal gas-used ratios). New FeeHistory type.
  • New useFeeHistory hook with the same 10s cadence as useNetworkDashboard, abort on unmount, null on non-EVM networks. Five unit tests.
  • New GasTendencyChart (custom inline SVG, no charting dependency) + GasTendencyChartSection wrapper. Theme variables only, no hardcoded colors.
  • Wired into src/components/pages/evm/network/index.tsx (after <DashboardStats>) and src/components/pages/evm/blocks/index.tsx (before .table-wrapper).
  • gasTendency i18n keys added to the network and block namespaces across all five locales (en, es, ja, pt-BR, zh).
  • Hermetic Playwright spec scaffolded under e2e/tests/shared/mocked/ following the existing nft-safety / rpc-strategy convention (test.skip stubs documenting what to mock and assert until the phase-4 rpcMock helpers land).

Screenshots (if applicable)

To be added by reviewer or follow-up — local screenshots not captured in this iteration.

Checklist

  • I have run npm run format:fix and npm run lint:fix
  • I have run npm run typecheck with no errors (only pre-existing Solana baseline errors on dev remain — not introduced by this PR)
  • I have run tests with npm run test:run (110 passing, including 5 new useFeeHistory tests)
  • I have tested my changes locally — typecheck + unit tests pass; full UI smoke against live mainnet RPC pending reviewer verification
  • I have updated documentation if needed (no doc changes required)
  • My code follows the project's architecture patterns (Client → Adapter → DataService → hook → component)

Additional Notes

  • Why eth_feeHistory instead of fetching N blocks? One RPC call returns ~50 blocks of base fees + gas-used ratios — purpose-built for this and already in the worker's ALLOWED_EVM_METHODS allowlist.
  • The chart is hidden when fee history is empty (no flicker on initial load); shows a skeleton during the first fetch.
  • One pre-existing biome warning in src/components/pages/settings/index.tsx:86 (getAlchemyBtcUrl unused) is unrelated to this PR.

MatiasOS added 5 commits May 13, 2026 13:28
Adds a thin wrapper around eth_feeHistory on the NetworkAdapter base
class that returns base fees (as bigint wei) and gas-used ratios as
ready-to-plot values. Powers the upcoming gas tendency chart on the
Network and Blocks pages.
EVM-gated React hook that fetches the last N blocks of fee history
(default 50) and refreshes on a 10s cadence, matching
useNetworkDashboard. Returns null for Bitcoin and Solana networks and
captures errors without throwing.
Renders a 50-block gas tendency sparkline above the txs/blocks tables
on the Network page and above the blocks table on the Blocks page.
Custom SVG (no charting dependency) shows base fee as a line over
gas-used % bars, with a hover tooltip and a dotted 50% reference
line. Gated on dataService.isEVM() so it stays hidden on Bitcoin and
Solana routes. Adds gasTendency keys to the network and block
namespaces in all five locales (en, es, ja, pt-BR, zh).
Adds a placeholder spec under e2e/tests/shared/mocked/ following the
same convention as nft-safety and rpc-strategy: documents what to
mock (eth_feeHistory + supporting block/tx calls) and what to
assert, with test.skip stubs until the phase 4 rpcMock helpers land.
Removes the chart subtitle JSX, the blockCount prop it relied on,
its CSS class, and the gasTendency.subtitle translation key across
all five locales. The chart's title plus the axis legend convey
enough context.
@github-actions
Copy link
Copy Markdown

🚀 Preview: https://pr-386--openscan.netlify.app
📝 Commit: 1a21a35b0c4d7792cce517db31d672e16fd3ccca

@MatiasOS MatiasOS requested review from AugustoL and josealoha666 and removed request for AugustoL May 13, 2026 17:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant