React Wallet Connector Skill

This skill generates a complete, runnable React application that connects to a Midnight wallet extension using the DApp Connector API. It covers every file needed: Vite + React + TypeScript scaffold, wallet selection, connection logic, and a WalletCard UI component.

Primary references:

• docs.midnight.network — React wallet connector guide (DApp Connector API)
• llms.txt — full Midnight documentation index
• @midnight-ntwrk/dapp-connector-api@4.0.1 — latest stable connector package (Feb 2026)

Key architecture notes:

• Wallets inject InitialAPI instances on window.midnight, each keyed by a UUID — never use hardcoded keys like window.midnight.mnLace
• Enumerate wallets with Object.values(window.midnight); when multiple wallets exist, let the user choose
• Import @midnight-ntwrk/dapp-connector-api as a side effect to augment global window.midnight types
• Request the shielded address only when your app actually needs it; the template uses getUnshieldedAddress()
• Network IDs: 'undeployed' (local), 'preview', 'preprod', 'mainnet' — must match the wallet's configured network
• Code examples omit CSS styling by design; add your preferred styling solution after scaffolding