Conecta MetaMask a tu dApp con Web3.js

Crear aplicaciones descentralizadas con Web3.js te permite conectar un frontend tradicional con la blockchain de Ethereum sin reinventar tu stack de desarrollo. Esta guía es para programadores Web2 que quieren dar el salto a Web3 aprovechando JavaScript, contratos inteligentes y wallets como MetaMask.

La idea central es simple: tu aplicación sigue siendo una web normal, pero ahora consulta nodos de Ethereum, lee wallets y ejecuta acciones sobre contratos inteligentes. Y aquí viene lo interesante: no necesitas que todo sea 100% descentralizado para construir algo útil.

¿Qué es una aplicación descentralizada y en qué se diferencia de una app tradicional?

Una aplicación tradicional vive en un data center controlado por una sola empresa. Si ese servicio cierra, tu información se pierde. Pasó con Messenger, Fotolog y MySpace: millones de fotos, conversaciones y contactos quedaron en el limbo.

Las aplicaciones descentralizadas cambian esa lógica. La información deja de pertenecer a un intermediario y pasa a ser tuya, controlada con tu wallet y tus llaves. Puedes conectarte a OpenSea o a Instagram con la misma wallet y ver tus NFTs en interfaces distintas, porque los datos viven en la blockchain, no en el servidor de una sola empresa [11:55].

¿Qué es una dApp? Es una aplicación cuyo backend corre sobre una red descentralizada como Ethereum. El usuario controla sus datos a través de su wallet en lugar de depender de un servidor centralizado.

¿Hasta qué punto vale la pena descentralizar?

Óscar Barajas plantea algo importante: no caigas en el absolutismo. Descentralizar todo puede comprometer la usabilidad, la seguridad y la accesibilidad para usuarios comunes. Tu mamá no debería tener que entender qué es una llave privada para usar tu app [13:50].

El equilibrio está en preguntarte quién va a usar tu aplicación y cómo. Esa pregunta debe guiar cada decisión técnica.

¿Qué es Web3.js y cómo se conecta con Ethereum?

Los nodos de Ethereum se comunican mediante JSON-RPC, un protocolo de llamadas a procedimientos remotos. Hablar JSON-RPC directamente es poco amigable, similar a escribir peticiones HTTP crudas en lugar de usar una librería como axios.

Web3.js funciona como un diccionario que traduce instrucciones en JavaScript a JSON-RPC. En vez de escribir una llamada compleja, simplemente le dices "llamar contrato", le pasas la red (Ethereum, Polygon, una testnet) y la dirección del contrato. La librería se encarga del resto [16:30].

¿Para qué sirve Web3.js? Es una librería de JavaScript que te permite leer wallets, consultar contratos inteligentes y firmar transacciones desde un frontend sin escribir JSON-RPC manualmente.

¿Qué alternativas existen a Web3.js?

En el ecosistema vas a encontrar varias librerías que cumplen funciones similares:

• Web3.js: la más conocida, mantenida originalmente por la Ethereum Foundation.
• Ethers.js: alternativa popular, más ligera y modular.
• Hardhat: framework de desarrollo que integra pruebas, despliegue y consola interactiva.

También es muy recomendable aprender TypeScript, porque gran parte del ecosistema Web3 lo usa por defecto [18:45].

¿Cómo se ve un proyecto real con Web3.js y MetaMask?

Óscar mostró un libro digital con zona exclusiva para holders de NFT. El stack incluye Next.js 12, TypeScript, Ethereum, Polygon, Firebase para autenticación, IPFS (Interplanetary File System) para archivos descentralizados, Infura como proveedor de nodos y Vercel para despliegue [20:10].

El flujo es claro: el usuario conecta su MetaMask, la app lee la wallet, valida si posee el NFT específico y desbloquea contenido exclusivo. Nada del otro mundo, pero conecta Web2 con Web3 de forma útil.

¿Cómo se implementa la conexión con MetaMask en código?

En el repositorio base que compartió Óscar, la lógica se concentra en pocos archivos. Lo importante es entender estos elementos:

1. Importar Web3 y Web3-React como librerías de conexión.
2. Definir un connector que soporte las redes deseadas (chainID 1 para Ethereum Mainnet, 137 para Polygon).
3. Crear hooks con useCallback para conectar y desconectar la wallet.
4. Usar useEffect para mantener la sesión activa y escuchar cambios de cuenta.
5. Aplicar una función ellipsis que acorta la dirección mostrando solo los primeros y últimos caracteres.

El proyecto corre con npm install y abre un botón único: conectar wallet. Al pulsarlo, MetaMask pide permiso solo para leer la dirección, nada más. Esa transparencia es clave en seguridad [33:20].

¿Qué consejos seguir para elegir una buena idea de proyecto Web3?

Menos es más. Define el alcance real y enfócate en un solo problema antes de añadir funcionalidades.

• Identifica quién es tu usuario y habla con él antes de escribir código.
• Itera la idea en papel más de una vez antes de programar.
• Arma equipos multidisciplinarios: frontend, backend, diseño y comunicación.
• Evalúa si necesitas una layer 2 por temas de escalabilidad y costo de transacciones.
• Aprovecha herramientas como OpenZeppelin para integrar contratos auditados.

Validar con personas reales es lo que separa un proyecto que vive en un repositorio abandonado de uno que impacta usuarios. Si tu mamá no entiende cómo usarlo, probablemente nadie más lo hará.

¿Qué idea de aplicación descentralizada estás pensando construir? Cuéntanos en los comentarios qué problema quieres resolver y qué stack elegirías.