Enhance the Ecosystem: npm package to initialize react app with midnight lace wallet connection.

#devchallenge #midnightchallenge #web3 #blockchain

Midnight Network Challenge: Enhance the Ecosystem

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 (4)

Dan Lopez • Sep 8

i've tried the package, i think there should be a way to automatically detect the lace preview wallet instead of refreshing the page first time. btw, very good work!