DEV Community

George Thoppil
George Thoppil

Posted on

Enhance the ecosystem with CompactSee: Real-Time Contract State Visualization for Midnight Blockchain

#midnightchallenge

Midnight Network Challenge: Enhance the Ecosystem

The Problem: Blockchain Debugging is Hard

When building on emerging blockchain networks like Midnight, developers face a common challenge: how do you actually see what's happening inside your smart contracts? Traditional blockchain explorers show you transaction hashes and raw data, but they don't give you the developer-friendly insights you need during development.

You deploy a contract, make some calls, and then... what? You're left staring at cryptic hex strings and transaction IDs, trying to piece together whether your contract logic is working as expected. It's like debugging with a blindfold on.

The Solution: CompactSee

CompactSee is a real-time contract event monitoring tool built specifically for the Midnight blockchain network. It transforms the opaque world of blockchain contract interactions into a clean, developer-friendly interface.

What Makes CompactSee Special?

🔍 Real-Time State Visualization

  • Connect to any Midnight testnet contract address
  • Watch contract events stream in real-time via WebSocket
  • See state changes formatted in human-readable format

⚡ Built for Developers, by Developers

  • Clean, responsive interface built with Rust and Leptos
  • Automatic 5-minute timeout to prevent resource leaks
  • Event history browsing with detailed state inspection
  • Perfect for development and testing workflows

🎯 Midnight-Native

  • Direct integration with Midnight's testnet indexer
  • Supports contract deployments, calls, and updates
  • Optimized for Midnight's unique architecture

The Tech Stack: Why Rust + Leptos?

When building developer tools, performance and reliability matter. That's why I chose:

  • Rust: Memory safety, performance, and excellent async support
  • Leptos: Modern reactive framework that compiles to WASM
  • Axum: Fast, ergonomic web server
  • Tailwind CSS: Rapid UI development with DaisyUI components

The result? A blazing-fast application that handles real-time WebSocket connections efficiently while providing a smooth user experience.

How It Works

  1. Connect: Enter a Midnight testnet contract address
  2. Monitor: WebSocket connection streams contract events in real-time
  3. Visualize: Events and state changes display in a clean, organized interface
  4. Inspect: Click any event to see detailed state information

Try It Yourself

Want to see CompactSee in action? Use this test contract address which is the basic counter example. You will see a beginning state with the ContractDeploy and for each increment(ContractCall) the state is incremented by 1. I have incremented it 5 times, so you should see a total of 5 contract calls. :

0200cc2f4e37bb554c344c04aff7ad746d8df129a4985d3908b509712b4cd721f163
Enter fullscreen mode Exit fullscreen mode

Visit https://compactsee.fly.dev and paste the address to start monitoring!

The Developer Impact

CompactSee isn't just another blockchain tool—it's a developer experience multiplier. Here's what it enables:

For Individual Developers

  • Faster debugging: See contract behavior in real-time instead of post-mortem analysis
  • Better testing: Verify contract logic as you develop
  • Reduced friction: No more manual blockchain exploration

For the Midnight Ecosystem

  • Essential tooling: Provides monitoring capabilities that every developer needs
  • Network transparency: Makes contract activity visible and accessible
  • Educational value: Helps developers understand Midnight's unique features

Technical Deep Dive

The core of CompactSee is its contract indexer, which:

  1. Establishes WebSocket connection to Midnight's testnet indexer
  2. Subscribes to contract events using GraphQL subscriptions
  3. Deserializes contract state using Midnight's ledger helpers
  4. Streams formatted events to the frontend in real-time 
// Simplified version of the core subscription logic
let subscription_query = format!(
    r#"
        subscription ContractSync {{
            contractActions(address: "{}") {{
                __typename
                ... on ContractDeploy {{ address state chainState }}
                ... on ContractCall {{ address state chainState }}
                ... on ContractUpdate {{ address state chainState }}
            }}
        }}
    "#,
    contract_addr
);
Enter fullscreen mode Exit fullscreen mode

The frontend uses Leptos' reactive signals to update the UI as new events arrive, creating a smooth real-time experience.

What's Next?

CompactSee is just the beginning. Future enhancements could include:

  • Multi-contract monitoring: Track multiple contracts simultaneously
  • Event filtering: Focus on specific event types
  • Historical data: Browse past contract events
  • Integration APIs: Embed monitoring in other developer tools

Try CompactSee Today

Ready to see your Midnight contracts in a whole new way?

🌐 Live Demo: https://compactsee.fly.dev

📚 Source Code: https://github.com/georgethoppil/compactsee

🚀 Built with: Rust, Leptos, Axum, Tailwind CSS

Top comments (0)