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

• Detect wallet - Check window.midnight

• Connect - Call connector.enable()

• Setup providers - Configure state, indexer, ZK

• Deploy/Connect - Deploy new or connect to existing

• 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