H
Han Lee
Guest
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
I built create-midnight-dapp, an open-source CLI tool that scaffolds a ready-to-use Midnight dApp project with one command.
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.
This saves hours of repetitive setup and ensures everyone starts with a consistent, tested, and documented environment.
Resulting Project Structure
my-dapp/
βββ index.html
βββ package.json
βββ src/
β βββ App.tsx
β βββ main.tsx
β βββ components/
β β βββ Navbar.tsx
β βββ midnight-provider.ts
GitHub Repository: g
NPM Package: create-midnight-dapp
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
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.
Install and run the CLI
mkdir my-dapp && cd my-dapp
npm exec create-midnight-dapp@latest -- --in-place
Start the dev server
npm run dev
Visit http://localhost:5173
.
Connect Lace (Midnight Testnet)
Install Lace Wallet
Create/enable a Midnight Testnet profile
Click βConnect Midnight Lace Walletβ in your app
Explore wallet APIs
View Shield/Legacy keys, address, and tDUST balance
Use helper methods to extend into transactions or ZK proofs
Screenshots
Scaffold Command
npm exec create-midnight-dapp@latest -- --in-place
Wallet Connection in Action
How I Used Midnight's Technology
Developer Experience Improvements
Set Up Instructions / Tutorial
License
This project is open-source under the Apache 2.0 License.
Continue reading...
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 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.
This saves hours of repetitive setup and ensures everyone starts with a consistent, tested, and documented environment.
Resulting Project Structure
my-dapp/
βββ index.html
βββ package.json
βββ src/
β βββ App.tsx
β βββ main.tsx
β βββ components/
β β βββ Navbar.tsx
β βββ midnight-provider.ts
Demo
GitHub Repository: g NPM Package: create-midnight-dappHow 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 extendingThis removes the friction for newcomers and accelerates prototyping for advanced developers.
Set Up Instructions / Tutorial
Install and run the CLI
mkdir my-dapp && cd my-dapp
npm exec create-midnight-dapp@latest -- --in-place
Start the dev server
npm run dev
Visit http://localhost:5173
.
Connect Lace (Midnight Testnet)
Install Lace Wallet
Create/enable a Midnight Testnet profile
Click βConnect Midnight Lace Walletβ in your app
Explore wallet APIs
View Shield/Legacy keys, address, and tDUST balance
Use helper methods to extend into transactions or ZK proofs
Screenshots
Scaffold Command
npm exec create-midnight-dapp@latest -- --in-place
Wallet Connection in Action
How I Used Midnight's Technology
Developer Experience Improvements
Set Up Instructions / Tutorial
License
This project is open-source under the Apache 2.0 License.
Continue reading...
