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

Avatar photoByAdil

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 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-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

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.

Similar Posts