This is a submission for the Midnight Network "Privacy First" Challenge - Enhance the Ecosystem prompt
Enhance the Ecosystem: npm package to initialize react app with midnight lace wallet connection: create-midnight-dapp
What I Built
I built create-midnight-dapp, an open-source CLI tool that scaffolds a ready-to-use Midnight dApp project with one command.
The motivation for this project is that I have participated in a lot of college hackathons, and there were award for "Best Use of Midnight" co-sponsored by MLH (Major League Hacking) and Midnight and college hackers struggled with how to start with Midnight. As a result, college hackers did not use Midnight after trying a little bit, and "Best Use of Midnight" were awarded to college hackers that did not even use Midnight, this happened on multiple occasions.
The goal is to improve the developer onboarding experience: instead of manually configuring Vite, React, TypeScript, Midnight wallet connectors, and boilerplate UI, developers can bootstrap a working project in seconds. I developed this template of react + vite + Midnight Lace wallet connector. Upon connection, the page displays wallet information as below:
Wallet Provider
Wallet
API version
Wallet Address
tDust Balance
Capabilities
Shield Address
Shield CPK
Shield EPK
Legacy Address
Legacy CPK
Legacy EPK
This saves hours of repetitive setup and ensures everyone starts with a consistent, tested, and documented environment. Now, everybody can start with a template to kickstart their journey with Midnight easily and can utilize the wallet info above to make their decentralized applications.
Resulting Project Structure
my-dapp/
├── index.html
├── package.json
├── src/
│ ├── App.tsx
│ ├── main.tsx
│ ├── components/
│ │ └── Navbar.tsx
│ └── midnight-provider.ts
Demo
Our published npm package
running npm command to initialize our react + midnight lace wallet connection starter template
🔗 GitHub Repository: https://github.com/hlee18lee46/midnight_starter
📦 NPM Package: create-midnight-dapp
📦 NPM Package Link: https://www.npmjs.com/package/create-midnight-dapp
How I Used Midnight's Technology
Integrated Midnight Lace Wallet provider discovery (window.midnight, window.cardano.midnight)
Added connect flow with provider.enable() and event dispatch so apps can reactively update state
Display wallet summary and keys: Shield Address, CPK, EPK, Legacy keys, balance, and API capabilities
Built the project to be testnet-ready, so developers can immediately experiment with tDUST transfers and wallet APIs
Developer Experience Improvements
✅ One command setup: no manual Vite/React/TypeScript config
✅ Wallet integration out-of-the-box: working “Connect Midnight Wallet” button + state display
✅ No Tailwind/PostCSS complexity: ships with simple baseline CSS, avoids common errors
✅ Custom hooks ready: reusable provider + event dispatch pattern developers can extend
✅ Documentation included: clear instructions for scaffolding, running, and extending
This removes the friction for newcomers and accelerates prototyping for advanced developers.
Set Up Instructions / Tutorial
-Prerequisites
Install Lace Midnight Preview Browser Extension (Chrome, Brave, etc)
-Install and run the CLI
mkdir my-dapp && cd my-dapp
npm exec create-midnight-dapp@latest -- --in-place
-Move into the folder
cd my-dapp
-Install dependencies
npm install
-Start the dev server
npm run dev
Visit http://localhost:5173
License
This project is open-source under the Apache 2.0 License.
Top comments (0)