majiayu000 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-apinpm 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