Midnight dApp Integration

Build privacy-preserving dApps with TypeScript, React/Next.js, and Midnight Network integration.

Quick Start

// Connect to Lace wallet
const connector = window.midnight?.mnLace;
if (connector) {
  const api = await connector.enable();
  const state = await api.state();
  console.log('Connected:', state.address);
}

Core Concepts

Component	Purpose
DApp Connector	Wallet detection & connection
Providers	Contract interaction infrastructure
Contract API	Type-safe circuit calls
Proof Server	ZK proof generation

Reference Files

Topic	Resource
Wallet Connection	references/wallet-connection.md
Provider Setup	references/providers.md
Contract Deployment	references/deployment.md
Next.js Setup	references/nextjs-setup.md

Assets

Asset	Description
assets/wallet-hook.md	React hook for wallet
assets/providers.md	Provider configuration
assets/deploy.md	Deployment template

Installation

npm install @midnight-ntwrk/dapp-connector-api \
  @midnight-ntwrk/midnight-js-contracts \
  @midnight-ntwrk/midnight-js-types \
  @midnight-ntwrk/midnight-js-network-id

Note: The @midnight-ntwrk/dapp-connector-api npm page currently warns that its source repo "hasn't been fully migrated" and points to https://github.com/input-output-hk/midnight-dapp-connector-api. Use the Network Support Matrix for version compatibility.

Wallet Detection

// Check if Lace wallet is installed
function isWalletInstalled(): boolean {
  return typeof window !== 'undefined' && !!window.midnight?.mnLace;
}

// Type definition
import '@midnight-ntwrk/dapp-connector-api';
// Types are augmented on window.midnight.mnLace

Provider Stack

┌─────────────────────────────────────┐
│         Contract Instance           │
├─────────────────────────────────────┤
│      midnightProvider (wallet)      │
├─────────────────────────────────────┤
│    zkConfigProvider (circuit cfg)   │
├─────────────────────────────────────┤
│   publicDataProvider (indexer)      │
├─────────────────────────────────────┤
│  privateStateProvider (local state) │
└─────────────────────────────────────┘

Basic Flow

1. Detect wallet - Check window.midnight
2. Connect - Call connector.enable()
3. Setup providers - Configure state, indexer, ZK
4. Deploy/Connect - Deploy new or connect to existing
5. Call circuits - Type-safe contract interaction

Network Configuration

// Testnet endpoints
const TESTNET = {
  indexer: 'https://indexer.testnet-02.midnight.network/api/v1/graphql',
  indexerWS: 'wss://indexer.testnet-02.midnight.network/api/v1/graphql/ws',
  proofServer: 'http://localhost:6300',
  node: 'https://rpc.testnet-02.midnight.network',
};

Best Practices

• ✅ Always check wallet availability before operations
• ✅ Handle connection errors gracefully
• ✅ Use typed providers for all Midnight APIs
• ✅ Cache provider instances
• ❌ Don't expose private state
• ❌ Don't skip transaction confirmation

Resources

• Midnight.js Docs
• DApp Examples