Tx Hash Explainer

Tx Hash Explainer is a Base mini app and web app for turning raw transaction hashes into clean, receipt-style transaction summaries.

Live app: https://tx-hash-explainer.vercel.app

---

Overview

Tx Hash Explainer is built for one simple flow: paste a Base transaction hash and get a readable breakdown of what happened in the transaction.

The app fetches transaction data from Base, validates the hash format, and shows the result in a clean receipt-style interface with status, value, sender, receiver, gas details, block number, timestamp, and a quick human-readable summary.

It is designed to work both as a regular web app and inside Farcaster/Base mini app environments, so users can inspect transactions without leaving the mini app experience.

Features

• Base transaction hash lookup by pasting a valid 0x transaction ID
• Receipt-style transaction summary with status, value, sender, receiver, and hash
• Gas details including gas limit, gas used, gas price, and estimated transaction fee
• Block number and transaction timestamp display when available
• Human-readable explanation for successful, reverted, and pending transactions
• URL prefill support through ?hash= or ?h= query parameters
• Copy buttons for transaction hash, sender, receiver, and full report
• Open transaction directly on BaseScan
• Share the app through Farcaster compose actions
• Add the mini app through supported Farcaster/Base app clients
• Farcaster mini app and frame metadata support
• Mobile-friendly responsive receipt layout

Supported chain

• Base

Transaction behavior

Hash validation

The app only accepts valid transaction hashes in the 0x + 64 hexadecimal character format.

If the pasted value is not a valid transaction hash, the UI shows a clear validation message before making a request.

Transaction lookup

Transaction data is fetched from Base mainnet through the app API route.

The app returns core transaction details such as sender, receiver, ETH value, gas limit, receipt status, gas used, effective gas price, fee estimate, block number, and timestamp.

Status handling

• Success: Shows the transaction as completed and summarizes the ETH value and receiver.
• Reverted: Shows the transaction as failed and explains that network fees may still apply.
• Pending: Shows the transaction as pending when receipt data is not available yet.

Tech stack

• Next.js 14
• React 18
• TypeScript
• viem
• Farcaster Mini App SDK
• Farcaster Frame SDK
• Base mainnet RPC
• CSS

---

Getting started

1. Install dependencies

npm install

2. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

3. Build for production

npm run build
npm run start

License

This project is licensed under the MIT License.