🔭 Nocturne – A Blockchain Explorer for Midnight Network ⛓️

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

What I Built

Nocturne — Midnight Explorer is a privacy-first block explorer for the Midnight Network testnet.

It solves two problems:

1. Visibility – Developers need an easy way to inspect blocks, extrinsics and events on the new privacy chain without spinning up their own node or indexer.
2. Privacy & Security – Traditional explorers embed analytics and permissive CSPs. Nocturne ships with a strict, developer-friendly setup that respects user privacy out-of-the-box.

Key points:

• Live data via @polkadot/api WebSocket, no 3rd-party indexer required.
• Built with Next.js 15 App Router + TypeScript + Tailwind.
• Dark theme, responsive, zero external fonts/analytics.

Demo ✨

• GitHub: https://github.com/longphanquangminh/midnight-explorer
• Live demo: https://midnight-explorer-sand.vercel.app

Screen	Preview
Home – Latest blocks & txs
Block list with paging
Transaction detail

How I Used Midnight's Technology

Midnight Explorer connects directly to the Midnight RPC endpoint.

It uses methods such as:

• chain_getBlockHash → to get block hashes
• chain_getBlock → to fetch full block details
• chain_getHeader → to check block headers and metadata

By calling these RPC endpoints, the explorer can dynamically list new blocks and transactions without needing a centralized backend.

This demonstrates how to integrate with Midnight’s Substrate-based architecture while keeping everything privacy-first and user-friendly.

As I mentioned before, Midnight is Substrate-based, so I connected directly to the public testnet RPC:

import { ApiPromise, WsProvider } from "@polkadot/api";

const api = await ApiPromise.create({
  provider: new WsProvider("wss://rpc.testnet-02.midnight.network")
});

• Blocks: api.rpc.chain.getBlock(hash) and header queries.
• Transactions: Iterated extrinsics + system.events to derive success / failure.
• Tip height: api.rpc.chain.getFinalizedHead() → header.number.

Because the Polkadot API loads WASM crypto that calls WebAssembly.instantiate, I extended the Content-Security-Policy with 'wasm-unsafe-eval' to keep things locked down yet functional.

Developer Experience Improvements

• No need for manual RPC calls: Developers can quickly inspect blocks without using curl or custom scripts.
• Improved debugging: When building dApps on Midnight, seeing live transaction details in the explorer helps troubleshoot faster.
• Open source & extendable: The codebase is kept simple so other developers can fork it and add features like search, account pages, or charts.

Pain Point	Nocturne’s Solution
Hard to explore live data without indexer	Direct node connection, lazy loaded singleton API
CSP errors with WASM	Pre-configured strict CSP allowing only what Polkadot needs
Pagination UX	“Next” and “Previous” buttons with offset cursors
Boilerplate	Scaffolded project with Tailwind, linting, TypeScript, ready-to-deploy

Set Up Instructions / Tutorial

1. Clone & install

git clone https://github.com/YOUR_GH_ORG/midnight-explorer.git
cd midnight-explorer
npm install

2. Configure environment

Create .env.local:

# optional – uses public RPC if omitted
NEXT_PUBLIC_RPC_URL=wss://rpc.testnet-02.midnight.network

# reserved for future indexer
NEXT_PUBLIC_INDEXER_URL=

3. Run locally

npm run dev
# http://localhost:3000

Watch the terminal for:

Connecting to Midnight RPC at wss://...

4. Build for production

npm run build     # Turbopack compile
npm start         # Next.js server on port 3000

5. Deploy to Vercel

1. Import the repo → Framework preset Next.js.
2. Add the env vars above.
3. Click Deploy – done!

Future Improvements

While Midnight Explorer already provides basic block and transaction browsing, there are many directions to expand and improve the user experience:

• Full transaction details: Show event logs, method calls, gas usage, and execution status for every transaction.
• Internal transactions: Support viewing internal calls (similar to RoninChain Explorer), so developers can trace contract-to-contract interactions and hidden flows inside a block.
• Rich search functionality: Enable search by block number, transaction hash, or account address.
• Account pages: Display balances, recent transactions, and contract code for each account.
• Charts and statistics: Add dashboards with real-time metrics like block time, TPS, gas consumption, and transaction volume.
• Better UX for developers: Include copy-to-clipboard buttons for hashes/addresses, human-readable method names, and ABI decoding for contract calls.
• Privacy-first features: Integrate Midnight’s unique privacy tech so that sensitive data can be hidden while still showing useful metadata (e.g., zk-proofs, shielded transactions).

The long-term goal is to evolve Midnight Explorer into a comprehensive block explorer, making it as powerful as established explorers like Etherscan or RoninChain Explorer, but optimized for Midnight’s privacy-first ecosystem.

---

DEV username: @minhlong2605

Thanks for reading & happy hacking on Midnight! 🌑🚀

Comments

[Pravesh Sudha]

Looks really cool!

[Long Phan]

Thanks bro 🔥

[Long Phan]

main resources:

1. docs.midnight.network/blog/query-t...

2. docs.midnight.network/develop/node...

other resources:

1. test faucet tDUST: midnight.network/test-faucet (make sure to use Lace Midnight Preview wallet)
2. connecting wallet: docs.midnight.network/develop/guid... (has necessary URLs for devs)