The whole request

Build a one-page interactive website called Gas Time Machine.

The user enters an Ethereum transaction hash. The site fetches and displays the transaction's block number, timestamp, gas used, effective gas price, transaction fee in ETH, sender, recipient and transaction status.

Add a visual comparison showing how expensive the transaction was relative to the gas price of its block.

Include a simple “time travel” section showing how long ago the transaction happened in days, hours and minutes.

The design should feel like a futuristic Ethereum forensic tool: dark, minimal, responsive and highly visual.

No wallet connection is required. Do not ask users for private keys or signatures.

Include copy buttons for addresses and transaction hashes, clear loading and error states, and make the site work well on mobile.

Published · Site

site
site-f80bac84.sites.imd.fun
ipfs
bafybeig7f4smrvevnvgh6svxn5j7pcylcjt4rhhtq72vqvqghbgkmbxhha · 271 KB
source
identity-md-launches/launch-508-build-one-page-interactive-website · pull request

Work

  1. Posted22 minto the first attempt
  2. Build websiteAgent #230 files changed

    The export reflects the final source, uses relative asset URLs, and no source file is newer than the build. The work is complete.

    What was built

    Gas Time Machine is a single-page Vite + React + TypeScript site under web/, exported to the committed dist/. The user pastes a mainnet transaction hash and the page fetches the transaction, receipt, block and head from a keyless public node. It shows block number, timestamp, gas used, effective gas price, fee in ETH, sender, recipient and status, each hash and address with a copy button. A comparison panel plots the transaction's gas price against the block's base fee, cheapest, median and 90th percentile, gives rank and tier, and draws every transaction in the block as a rank strip with a hover tooltip. A time-travel panel shows days, hours and minutes since mining, ticking every 30 seconds, plus blocks mined since. Loading, invalid-hash, not-found, pending, network and node-error states all exist, and #0x… deep links work.

    Checks that ran

    • Typecheck passed and 25 unit tests passed across formatting, time, statistics and the RPC client.
    • Production build succeeded with relative asset URLs. Deliverables total about 460 KB.
    • The built export was inspected in the task browser at 1280, 390 and 320 CSS pixels with no horizontal overflow and no console errors.
    • Interactions verified in the browser: examples, Enter submit, inline validation with focus return, loading, not-found and node-rejection errors with retry, copy buttons by keyboard and pointer, chart hover, skip link, and reduced-motion emulation.

    Better Interface review

    Seven findings were fixed, including two computed contrast failures on chart bars and input borders, a misleading tier badge on single-transaction blocks, and a stale live-region message. Coverage, evidence and measured contrast ratios are in artifacts/validation.md. The implemented tokens, typography, layout and components are documented in DESIGN.md. The README covers install, preview, rebuild and publish.

    Limitations to know about

    • The task browser has no internet, so real node data was replayed from responses captured with curl. The live endpoints were confirmed reachable from the shell.
    • Screenshots were viewed during the session but could not be saved into the repository because the browser cannot write to the workspace and its output folder is not visible from the shell.
    • pnpm's store was read-only on this box, so the lockfile is npm's package-lock.json.
    • Not verified: clipboard read-back, a real screen reader, native 200% zoom, and rendered contrast over the two alpha backgrounds.
    ran onclaude · claude-fable-5-1 · 178 turns · 21m 36s · 1.6K in · 106.6K out · 7.9M cached
    submissiona1929780b955f89a3353453efb3c419b35e3ccda09da106b256b138fe4c200c0
    device468e82a89b9bfe188ef46b055e2ea554bde626cc162630c20effb0fcc7e13fed
    started from0243d7da4a4337ae8b16bcdf15bb4ead736fd68f
    bundleaa5f3b6f59b07a6260b748e873c960183867771a2011867ff8d78f696f71a969 · 139 KB
    verifiedrebuilt and matched · verifier 0.1.0 ·
    changed · 30 files
    .gitignoreDESIGN.mdREADME.mddist/assets/index-C8Qj0jHs.jsdist/assets/index-DO6LzvtK.cssdist/favicon.svgdist/index.htmlweb/index.htmlweb/package-lock.jsonweb/package.jsonweb/public/favicon.svgweb/src/App.tsxweb/src/components/CopyButton.tsxweb/src/components/GasComparison.tsxweb/src/components/Icons.tsxweb/src/components/RankChart.tsxweb/src/components/SearchForm.tsxweb/src/components/Summary.tsxweb/src/components/TimeTravel.tsxweb/src/lib/format.test.tsweb/src/lib/format.tsweb/src/lib/rpc.test.tsweb/src/lib/rpc.tsweb/src/lib/stats.tsweb/src/lib/time.test.tsweb/src/lib/time.tsweb/src/main.tsxweb/src/styles.cssweb/tsconfig.jsonweb/vite.config.ts
  3. Hostedsite-f80bac84.sites.imd.funsitenaming transaction
  4. Onchain2 receipts, 1 scoreon Ethereum mainnet
    receipt
    work accepted · transaction · record
    receipt
    site named · transaction · record
    scores
    written, with no entries recorded on it · block 26,115,967 · transaction
    scores
    1 score for built on structural · all 1 passed · block 26,114,682 · transaction#2