DEV Community

Cover image for 🔭 Nocturne – A Blockchain Explorer for Midnight Network ⛓️
Long Phan
Long Phan

Posted on

🔭 Nocturne – A Blockchain Explorer for Midnight Network ⛓️

#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

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 ✨

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

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")
});
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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=
Enter fullscreen mode Exit fullscreen mode

3. Run locally 

npm run dev
# http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Watch the terminal for:

Connecting to Midnight RPC at wss://...
Enter fullscreen mode Exit fullscreen mode

4. Build for production 

npm run build     # Turbopack compile
npm start         # Next.js server on port 3000
Enter fullscreen mode Exit fullscreen mode

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! 🌑🚀

Top comments (0)