Impulsa el ecosistema con npm: React y la billetera Midnight Lace

Herramienta CLI open-source create-midnight-dapp para generar rápidamente una dApp Midnight lista para usar con React, Vite y Lace Wallet, con guía y documentación.

4 sept 2025 • 3 min read • Q2BSTUDIO Team

Inteligencia-Artificial-

Envío para el reto Midnight Network Privacy First Challenge en la categoría Enhance the Ecosystem. Más detalles en la página oficial del desafío.

Enhance the Ecosystem: paquete npm para inicializar una app React con conexión al wallet Lace de Midnight: create-midnight-dapp

Qué construí

Desarrollé create-midnight-dapp, una herramienta CLI open-source que genera con un solo comando un proyecto de dApp Midnight listo para usar.

El objetivo es mejorar la incorporación de desarrolladores: en lugar de configurar manualmente Vite, React, TypeScript, conectores de la wallet de Midnight y una interfaz base, los equipos pueden arrancar un proyecto funcional en segundos.

Esto ahorra horas de configuración repetitiva y garantiza que todos partan de un entorno coherente, probado y documentado.

Estructura resultante del proyecto

my-dapp/
+-- index.html
+-- package.json
+-- src/
¦ +-- App.tsx
¦ +-- main.tsx
¦ +-- components/
¦ ¦ +-- Navbar.tsx
¦ +-- midnight-provider.ts

Demo

Repositorio GitHub: próximamente

Paquete NPM: create-midnight-dapp

Cómo utilicé la tecnología de Midnight

Integración de descubrimiento del proveedor de Lace para Midnight mediante window.midnight y window.cardano.midnight

Flujo de conexión con provider.enable() y envío de eventos para que la app actualice su estado de forma reactiva

Visualización del resumen y las claves de la wallet: Shield Address, CPK, EPK, claves Legacy, balance y capacidades del API

Proyecto preparado para testnet, permitiendo experimentar al instante con transferencias tDUST y APIs de la wallet

Mejoras en la experiencia de desarrollador

Un solo comando de inicio, sin configuración manual de Vite, React o TypeScript

Integración de wallet lista para usar, con botón Conectar Midnight Lace Wallet y estado reactivo

Sin complejidad de Tailwind o PostCSS, incluye CSS base simple para evitar errores comunes

Hooks y proveedor reutilizable con patrón de eventos listo para extender

Documentación incluida con instrucciones claras para crear, ejecutar y ampliar

Esto elimina fricción a quienes comienzan y acelera la creación de prototipos para equipos avanzados.

Guía de instalación y puesta en marcha

Instala y ejecuta la CLI

mkdir my-dapp && cd my-dapp

npm exec create-midnight-dapp@latest -- --in-place

Inicia el servidor de desarrollo

npm run dev

Visita https://localhost:5173

Conecta Lace en la testnet de Midnight

Instala Lace Wallet

Crea o habilita un perfil de Midnight Testnet

Pulsa el botón Conectar Midnight Lace Wallet en tu aplicación

Explora los APIs de la wallet

Consulta claves Shield y Legacy, dirección y balance de tDUST

Usa los métodos helper para ampliar hacia transacciones o pruebas ZK

Pantallazos

Comando de scaffolding

npm exec create-midnight-dapp@latest -- --in-place

Conexión de wallet en acción

Cómo utilicé la tecnología de Midnight

Mejoras de experiencia de desarrollador

Guía de instalación y tutorial

Licencia

Este proyecto es open-source bajo licencia Apache 2.0.

Sobre Q2BSTUDIO

En Q2BSTUDIO impulsamos productos digitales con enfoque privacy by design, construyendo aplicaciones a medida y software a medida que integran wallets, conectores y APIs blockchain de forma segura. Nuestra experiencia abarca inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, así como ia para empresas y agentes IA para automatizar procesos complejos.

Si buscas un equipo para crear tu próxima dApp o plataforma multiplataforma con integraciones web3, descubre cómo abordamos proyectos de extremo a extremo en desarrollo de aplicaciones a medida. Y si tu prioridad es proteger claves, transacciones y datos de usuario, reforzamos tu postura de seguridad con auditorías y pruebas de intrusión desde nuestra práctica de ciberseguridad y pentesting.

Con Q2BSTUDIO tendrás desde arquitectura y automatización de procesos hasta despliegues robustos en la nube, integraciones con análisis avanzado y modelos de IA, y una base de código lista para escalar con calidad.

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.