Midnight Transactioin Viewer

#devchallenge #midnightchallenge #web3 #blockchain

Midnight Network Challenge: Enhance the Ecosystem

This is a submission for the Midnight Network "Privacy First" Challenge - Enhance the Ecosystem prompt

What I Built

Midnight Scan is a lightweight, open-source web explorer for the Midnight testnet.

It helps developers quickly verify and debug their transactions by providing an easy-to-use transaction search and recent activity feed.

🔍 Search by Tx ID → fetch transaction details from the Midnight GraphQL indexer
📜 Recent Transactions toggle → shows the 15 most recent indexed transactions
🌐 Zero-install preview → live and deployed on Vercel
🛠 Built with React + Vite + TypeScript + Tailwind CSS

👉 Live site: https://midnight-scan-transaction-viewer.vercel.app/

https://midnight-scan-transaction-viewer.vercel.app/

Demo

github repo: https://github.com/hlee18lee46/midnight_scan_transaction_viewers

The midnight scan web page.
You can visit here: https://midnight-scan-transaction-viewer.vercel.app/

Making a sample transaction, requesting tDust from faucet is a easy transaction to make, we will track this transaction using transaction id.

Copied and pasted the transaction id into midnight_scan, and it will use the graphql to generate info about the transaction.

Also, there is a toggle button to see recent transaction. Currently graphql only allows up to 15 most recent transaction.

The midnight scan transaction viewer web site is now deployed, so you can try by visiting the link (https://midnight-scan-transaction-viewer.vercel.app/
), instead of building this in local.

How I Used Midnight's Technology

Midnight Scan integrates with the Midnight GraphQL Indexer.

The app runs two core queries:

Recent Transactions

query RecentTransactions {
  recentTransactions(limit: 15) {
    id
    timestamp
    status
    fee
    blockHeight
  }
}

Developer Experience Improvements

Before this tool, developers often had to rely on raw curl commands against the GraphQL indexer to look up transaction details. This workflow was not only repetitive but also unfriendly for newcomers, since it required knowing the exact query structure, formatting variables, and parsing JSON manually.

Midnight Scan removes that friction by providing a simple UI where developers can paste a transaction ID or toggle to see recent activity. This makes it possible to explore the Midnight testnet without memorizing GraphQL queries or managing command-line tools.

The result is a much smoother developer experience:
• Faster debugging during dApp development
• Lower learning curve for new developers and hackathon participants
• A foundation that can be extended with more features like pagination, block explorers, or address views

By turning what was once a difficult, curl-driven task into a one-click lookup, Midnight Scan significantly improves the productivity of developers building on Midnight.