midnight-dapp-dev:dapp-connector

What problem does it solve?

This skill removes ambiguity and boilerplate from connecting browser-based DApps to the Lace wallet extension by documenting the connection lifecycle, injected APIs, error handling, and recommended provider assembly patterns so developers can reliably detect wallets, respect user network selection, and perform transactions and proofs from the client.

Core Features & Use Cases

• Wallet Detection & Connection: Guidance for detecting window.midnight.mnLace, calling connect(networkId), and handling user authorization modes.
• ConnectedAPI Usage: How to call getConfiguration, getShieldedAddresses, getShieldedBalances, balanceUnsealedTransaction, submitTransaction, signData, and getProvingProvider for common wallet operations.
• Provider Assembly & Deployment Patterns: Steps to build MidnightProviders in the browser using FetchZkConfigProvider, indexerPublicDataProvider, in-memory or IndexedDB private state providers, and wallet-delegated proving.
• React 19 / Next.js 16 Best Practices: Client-only patterns, dynamic imports to avoid SSR issues, using getConfiguration() for network endpoints, and common error-handling patterns for DAppConnectorAPIError.
• Use Case: Integrate Lace into a Next.js DApp to read balances, create balanced transactions from contract calls, submit transactions, and optionally delegate ZK proving to the wallet, all while respecting user network selection.

Quick Start

Connect a Next.js client component to the Lace wallet on the preview network and assemble browser MidnightProviders for transaction balancing, submission, and wallet-delegated proving.