Midnight Transactioin Viewer

Han Lee — Fri, 05 Sep 2025 06:26:11 +0000

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.

Set Up Instructions / Tutorial

No need to set up, just visit the deployed website and search your transaction.

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

🌙 Midnight Scan – Transaction Viewer

Submission for the Midnight Network "Privacy First" Challenge — Enhance the Ecosystem prompt.

Enhance the Ecosystem: npm package to initialize react app with midnight lace wallet connection.

Han Lee — Wed, 03 Sep 2025 22:50:05 +0000

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

Enhance the Ecosystem: npm package to initialize react app with midnight lace wallet connection: create-midnight-dapp

What I Built

I built create-midnight-dapp, an open-source CLI tool that scaffolds a ready-to-use Midnight dApp project with one command.

The motivation for this project is that I have participated in a lot of college hackathons, and there were award for "Best Use of Midnight" co-sponsored by MLH (Major League Hacking) and Midnight and college hackers struggled with how to start with Midnight. As a result, college hackers did not use Midnight after trying a little bit, and "Best Use of Midnight" were awarded to college hackers that did not even use Midnight, this happened on multiple occasions.

The goal is to improve the developer onboarding experience: instead of manually configuring Vite, React, TypeScript, Midnight wallet connectors, and boilerplate UI, developers can bootstrap a working project in seconds. I developed this template of react + vite + Midnight Lace wallet connector. Upon connection, the page displays wallet information as below:

Wallet Provider
Wallet
API version
Wallet Address
tDust Balance
Capabilities

Shield Address
Shield CPK
Shield EPK
Legacy Address
Legacy CPK
Legacy EPK

This saves hours of repetitive setup and ensures everyone starts with a consistent, tested, and documented environment. Now, everybody can start with a template to kickstart their journey with Midnight easily and can utilize the wallet info above to make their decentralized applications.

Resulting Project Structure

my-dapp/
├── index.html
├── package.json
├── src/
│ ├── App.tsx
│ ├── main.tsx
│ ├── components/
│ │ └── Navbar.tsx
│ └── midnight-provider.ts

Demo

Our published npm package

running npm command to initialize our react + midnight lace wallet connection starter template

🔗 GitHub Repository: https://github.com/hlee18lee46/midnight_starter

📦 NPM Package: create-midnight-dapp

📦 NPM Package Link: https://www.npmjs.com/package/create-midnight-dapp

How I Used Midnight's Technology

Integrated Midnight Lace Wallet provider discovery (window.midnight, window.cardano.midnight)

Added connect flow with provider.enable() and event dispatch so apps can reactively update state

Display wallet summary and keys: Shield Address, CPK, EPK, Legacy keys, balance, and API capabilities

Built the project to be testnet-ready, so developers can immediately experiment with tDUST transfers and wallet APIs

Developer Experience Improvements

✅ One command setup: no manual Vite/React/TypeScript config
✅ Wallet integration out-of-the-box: working “Connect Midnight Wallet” button + state display
✅ No Tailwind/PostCSS complexity: ships with simple baseline CSS, avoids common errors
✅ Custom hooks ready: reusable provider + event dispatch pattern developers can extend
✅ Documentation included: clear instructions for scaffolding, running, and extending

This removes the friction for newcomers and accelerates prototyping for advanced developers.

Set Up Instructions / Tutorial

-Prerequisites
Install Lace Midnight Preview Browser Extension (Chrome, Brave, etc)

-Install and run the CLI
mkdir my-dapp && cd my-dapp
npm exec create-midnight-dapp@latest -- --in-place

-Move into the folder
cd my-dapp

-Install dependencies
npm install

-Start the dev server
npm run dev

Visit http://localhost:5173

License

This project is open-source under the Apache 2.0 License.

Forem: Han Lee

Midnight Transactioin Viewer

What I Built

Demo

How I Used Midnight's Technology

Developer Experience Improvements

Set Up Instructions / Tutorial

🌙 Midnight Scan – Transaction Viewer

Enhance the Ecosystem: npm package to initialize react app with midnight lace wallet connection.

What I Built

Demo

How I Used Midnight's Technology

Developer Experience Improvements

Set Up Instructions / Tutorial

License