Desarrollo de dApps en Ethereum con Web3-react y React

Probablemente hayas oído hablar de blockchain y Web3 y tal vez quieras crear algunas aplicaciones descentralizadas (dApps) para mostrárselas a tus amigos y comunidad.

Al igual que una aplicación web normal, las dApps también tienen un backend y un frontend.

En este artículo, abordaremos el lado frontend de dApps y principalmente el uso de web3-react.

Web3-react es un framework de web3 creado por Noah Zinsmeister para ayudar a los desarrolladores de blockchain a crear dApps modernas de Ethereum utilizando la arquitectura React.

En 2021, web3-react ganó mucha tracción en la comunidad de blockchain para construir dApps.

Veamos por qué y cómo usarlo.

¿Qué es Web3-react?

Web3-react es un framework web3 fácil de usar, simple y extensible para crear dApps en blockchain de Ethereum.

En pocas palabras, web3-react es una state machine que almacena ciertos bits esenciales de datos actualizados pertinentes a su dApp.

De forma predeterminada, admite proveedores como Meta Mask , Gnosis Safe , Frame y WalletConnect .

Puedes configurarlo fácilmente para usar otras billeteras como Portis , Squarelink y Arkane.

Las billeteras compatibles más populares en web3-react 👇

Como se discutió anteriormente, web3-react usa la arquitectura React para construir la interfaz de dApps.

Web3-react es la elección de muchos desarrolladores por:

• Creación de aplicaciones web modernas.
• Por su respuesta y totalmente personalizable.
• Simple y fácil de usar.
• Desarrollo más rápido.
• Comunidad grande y en crecimiento.

¿Qué hace que Web3-react sea una buena opción?

Web3-react se establece como una opción viable para los desarrolladores de dApp.

La capacidad de crear conectores personalizables con todas las funciones que administran los aspectos de tu dApp en la blockchain de Ethereum y la conectividad de la cuenta de usuario es un gran punto a favor.

También es un entorno amigable para los desarrolladores que contiene una instancia ethers.js o web3.js, la cuenta actual y la identificación de la red, y otra información que está disponible globalmente en sus aplicaciones descentralizadas.

Web3-react también es un framework muy adecuado para el desarrollo de dApp porque:

• Puede escribir complementos mediante programación en blockchain.
• No hay una arquitectura de datos tradicional.
• Puede crear dApps sistemáticas, potentes y extensibles.

Otra característica superimportante que encontrará con es la capacidad de conectarse fácilmente a los nodos en la blockchain.

Los nodos son las piezas de software que se ejecutan en la nube que a su vez están conectadas a otros nodos; a demás que pueden leer desde la blockchain y luego transmitir de vuelta a la blockchain.

Cómo instalar Web3-react

Instalar web3-react es una tarea bastante sencilla. Todo lo que necesitas para comenzar es instalar algunos paquetes y listo.

PASO 1. Instalar Yarn.

Yarn es un administrador de paquetes que Facebook creó como reemplazo del cliente NPM.

Permite a los equipos crear código JavaScript y distribuirlo a través de paquetes de software.

Consulta la guía de instalación de Yarn.

Después de la instalación, verifica la versión del paquete instalado. Asegúrate de que sea el último.

Ejecuta este comando para verificar la versión de Yarn instalada.

yarn --version

Nota: NPM también se puede usar en lugar de Yarn, pero no se recomienda.

PASO 2. Instalación reacty react-dom

Asegúrese de haber instalado las últimas versiones de React y React-dom. Estos paquetes son necesarios para ejecutar Web3-react.

yarn add react@latest react-dom@latest

PASO 3. Instalarethers.js

Ethers.js es una implementación completa de billetera Ethereum y utilidades en JavaScript y TypeScript. Puedes obtener más información sobre Ethers.js en GitHub .

Es un paquete requerido para Web3-react ya que es una dependencia interna de la biblioteca.

yarn add ethers

Opcional. Instalarweb3.js

Web3.js es un conjunto de bibliotecas que te permiten usar HTTP, IPC o Web Socket para comunicarte con un nodo Ethereum local o remoto.

Es un paquete opcional para Web3-react.

yarn add web3

PASO 4. Instalarweb3-react

Finalmente, deberás instalar Web3-react en tu proyecto.

Puedes descargar la última versión de web3-react en tu proyecto ejecutando este comando.

yarn add web3-react@unstable

O puedes instalar la versión principal ejecutando este comando.

yarn add @web3-react/core

¡Listo! Finalmente has instalado web3-react en tu proyecto. Ahora estás listo para hacer la interfaz de tus dApps.

Por ahora, su componente dApp debería verse así.

import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from "@ethersproject/providers";function getLibrary(provider, connector) {
  return new Web3Provider(provider);
}
const App => () {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <YourAwesomeComponent />
    </Web3ReactProvider>
  )
}

Basado en documentos Web3-react.

En pocas palabras, la idea es importar un proveedor, luego instalarlo y devolverlo en la función**getLibrary**.

Ejemplos de Web3-react

Mira algunas estadísticas recientes de Web3-react

Empresas como Uniswap usan web3-react para crear la interfaz de las dApps . Esto definitivamente muestra la capacidad de este framework.

Ahora veamos algunos tutoriales y ejemplos de web3-react.

Conexión de tu dApp con Meta Mask

Meta Mask es una billetera de criptomonedas que interactúa con la blockchain de Ethereum a través del software. Es una de las billeteras más populares del mundo, con más de 21 millones de usuarios.

Es la billetera principal utilizada para dApps ya que tiene muchos beneficios;

• Muy segura y rápida
• Fácil de usar
• Interactiva con casi cualquier tipo de DApp basada en la blockchain de Ethereum.

Ahora veamos cómo conectar Meta Mask con nuestra interfaz usando Web3-react.

PASO 1. Agrega una carpeta Connectora tu proyecto.

Almacenará todo su código de conexión e interacción con la billetera en esta carpeta. Esto terminará administrando su código a largo plazo.

PASO 2. Dentro de la carpeta Connector, agrega un archivo Connectors.js.

Los desarrolladores usan el archivo conector.js para escribir código que interactúa y configura el protocolo con la billetera deseada.

PASO 3. Asumiendo que hayas instalado Web3-reactdentro de tu proyecto, ahora debes instalar la dependencia que te permite conectarte a Meta Mask.

yarn add @web3-react/injected-connector

PASO 4. Importa Injected-Connector en tu archivo connectors.js.

import { InjectedConnector } from '@web3-react/injected-connector'export const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42],
})

PASO 5. Necesitarás una interfaz para exportar esos datos de Meta Mask.

Este video en Youtube debería ayudarte a exportar datos de Meta Mask usando frontend.

¡Estás listo para usar Meta Mask en tu proyecto!

Conexión de su aplicación con cualquier otra billetera

Web3-react también es compatible con muchas billeteras, como Wallet Connect, etc. Los grandes proyectos dApp brindan más opciones además de Meta Mask para interactuar con la aplicación.

Al igual que instalamos **injected-connector**para Meta Mask. Tendremos que instalar **Walletconnect-connector**para Wallet Connect.

yarn add @web3-react/walletconnect-connector

Hay otras opciones, como Portis, que se pueden conectar mediante portis-connector conector.

yarn add @web3react/portis-connector

Importar y exportar datos de las billeteras a tus dApps es casi lo mismo. Puedes encontrar más información al respecto en la documentación.

Desconectar una billetera

Desactivar y cerrar son las dos opciones para desconectar una billetera en web3-react.

Desactivar:

la información de la billetera y la interacción se destruyen desde la dApp cuando se usa esta función. Es posible que el usuario tenga que volver a autorizar la aplicación para conectarse con la billetera.

Cerrar:

cuando se usa la función Cerrar, el usuario se desconecta de la billetera pero la información aún se almacena en la dApp. El usuario puede volver a conectarlo fácilmente a la billetera con toda la información restante.

Desafortunadamente, saber qué función se está ejecutando puede ser difícil a veces.

Meta Mask y los conectores carecen de una función close, lo que puede causar un error si se usa. Algunas billeteras no se eliminarán del DOM a menos que se use cerrar, lo que implica que desactivarla billetera no sea efectivo.

Como resultado, es posible que desee crear una función general **disconnectWallet**para garantizar que se ejecuten las funciones adecuadas cuando la billetera esté completamente desconectada.

Conclusión

¡Hemos terminado!

Hemos discutido qué es web3-react, por qué web3-react es una buena opción, cómo instalar web3-react en tu proyecto y cómo comenzar con diferentes billeteras.

En conjunto, web3-react es una opción nueva pero valiosa para que desarrolles la interfaz de dApps.

Tiene muchas ventajas que se analizan en el artículo.

Aprender y construir dApps puede ser difícil en las primeras etapas, pero no debes desanimarte por ello.

Aprender blockchain y Web3 ahora es como aprender a usar Internet y el desarrollo web en la década de 2000.

Déjame saber lo que piensas sobre el futuro de Web3 y si crees o no que web3-react es algo que deberías considerar para tu stack tecnológico.

💡 Para mayor referencia, visita el texto original de Chaitanya Prabuddha: What is Web3-React and How to Use it in Your Next Project?