skills.rest
devrelaicom
devrelaicomOFFICIAL
Explore all skills by this author →
GitHub

midnight-dapp-dev:dapp-connector

Connect browser-based DApps to the Lace wallet extension in React 19 and Next.js 16.

37|9|Updated Feb 25, 2026
Search Tags:#react#nextjs#dapp#wallet-integration#lace#dapp-connector#zk-proving
One-click install
npx skills add https://github.com/devrelaicom/midnight-expert --skill midnight-dapp-dev-dapp-connector
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: midnight-dapp-dev:dapp-connector
Source: https://github.com/devrelaicom/midnight-expert/tree/main/plugins/midnight-dapp-dev/skills/dapp-connector
Command: npx skills add https://github.com/devrelaicom/midnight-expert --skill midnight-dapp-dev-dapp-connector

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about midnight-dapp-dev:dapp-connector

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect a Next.js DApp to the Lace wallet extension?▼

The Lace wallet exposes window.midnight.mnLace for DApp connection. Call connect(networkId) to request user authorization, then use the resulting ConnectedAPI to fetch network configurations and perform wallet operations within your browser application.

What methods are available through the Lace DApp Connector ConnectedAPI?▼

The ConnectedAPI provides methods including getConfiguration, getShieldedAddresses, getShieldedBalances, balanceUnsealedTransaction, submitTransaction, signData, and getProvingProvider for managing wallet operations and transactions.

Can I delegate ZK proving operations to the Lace wallet from a React client?▼

Yes, you can delegate ZK proving to the Lace wallet by calling getProvingProvider. This enables wallet-delegated proof generation during development and testnet deployment directly from your React 19 client-side integration.

Does the Lace DApp connector work with React 19 and Next.js 16?▼

Yes, the Lace DApp connector supports React 19 and Next.js 16. It recommends client-only patterns, dynamic imports to avoid SSR issues, and using getConfiguration() to retrieve network endpoints for browser provider assembly.

How do I assemble MidnightProviders in the browser for transaction submission?▼

Assemble MidnightProviders using FetchZkConfigProvider for HTTP-based ZK asset loading, indexerPublicDataProvider, and in-memory or IndexedDB private state providers to balance and submit transactions from contract calls.

How should I handle errors when connecting a browser DApp to the Lace wallet?▼

Handle connection errors by discriminating against DAppConnectorAPIError. Implement common error-handling patterns in your client-side code to manage issues during wallet detection, network selection, balance fetching, and transaction submission.

Related Skills

Explore More Software Engineering Skills→
aaronbassettaaronbassett

midnight-dapp:wallet-integration

Connect Lace wallet to Midnight DApps via enable() and state() APIs.

Community
Intermediate
katana-networkkatana-network
1

wallet-manager

Prepare unsigned Katana Network wallet transactions for balance checks, transfers, ETH wrapping, and ERC20 approvals.

Official
Intermediate
devrelaicomdevrelaicom
37

core-concepts:protocols

Explain Midnight's Kachina and Zswap protocols for private smart contracts and shielded token transfers.

Official
Advanced
Degens-WorldDegens-World

nautilus-wallet-dapp-connector

Connects to the Nautilus Wallet for Ergo blockchain balance, address, and transaction operations.

Official
Advanced