Impulsa el desarrollo del frontend de tu dapp con create-eth-app

La última vez analizamos el panorama general de Solidity (opens in a new tab) y ya mencionamos create-eth-app (opens in a new tab). Ahora descubrirás cómo usarlo, qué características están integradas e ideas adicionales sobre cómo expandirlo. Iniciada por Paul Razvan Berg, el fundador de Sablier (opens in a new tab), esta aplicación impulsará el desarrollo de tu frontend y viene con varias integraciones opcionales para elegir.

Instalación

La instalación requiere Yarn 0.25 o superior (npm install yarn --global). Es tan simple como ejecutar:

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

Utiliza create-react-app (opens in a new tab) internamente. Para ver tu aplicación, abre http://localhost:3000/. Cuando estés listo para desplegar en producción, crea un paquete minificado con yarn build. Una forma sencilla de alojar esto sería Netlify (opens in a new tab). Puedes crear un repositorio en GitHub, añadirlo a Netlify, configurar el comando de compilación y ¡listo! Tu aplicación estará alojada y será utilizable para todos. Y todo ello de forma gratuita.

Características

React y create-react-app

En primer lugar, el corazón de la aplicación: React y todas las características adicionales que vienen con create-react-app. Usar solo esto es una gran opción si no quieres integrar Ethereum. React (opens in a new tab) en sí hace que la construcción de interfaces de usuario interactivas sea realmente fácil. Puede que no sea tan amigable para principiantes como Vue (opens in a new tab), pero sigue siendo el más utilizado, tiene más características y, lo más importante, miles de bibliotecas adicionales para elegir. create-react-app también hace que sea muy fácil empezar a usarlo e incluye:

• Soporte de sintaxis para React, JSX, ES6, TypeScript y Flow.
• Extras del lenguaje más allá de ES6, como el operador de propagación de objetos (object spread operator).
• CSS con prefijos automáticos, por lo que no necesitas -webkit- u otros prefijos.
• Un ejecutor de pruebas unitarias interactivo y rápido con soporte integrado para informes de cobertura.
• Un servidor de desarrollo en vivo que advierte sobre errores comunes.
• Un script de compilación para empaquetar JS, CSS e imágenes para producción, con hashes y mapas de origen (sourcemaps).

create-eth-app en particular hace uso de los nuevos efectos de hooks (opens in a new tab). Un método para escribir componentes funcionales potentes, pero muy pequeños. Consulta la sección a continuación sobre Apollo para ver cómo se utilizan en create-eth-app.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) te permite tener múltiples paquetes, pero pudiendo gestionarlos todos desde la carpeta raíz e instalando dependencias para todos a la vez usando yarn install. Esto tiene especial sentido para paquetes adicionales más pequeños, como la gestión de direcciones/ABI de contratos inteligentes (la información sobre dónde desplegaste qué contratos inteligentes y cómo comunicarte con ellos) o la integración de The Graph, ambos parte de create-eth-app.

ethers.js

Aunque Web3 (opens in a new tab) sigue siendo el más utilizado, Ethers.js (opens in a new tab) ha estado ganando mucha más tracción como alternativa en el último año y es el que está integrado en create-eth-app. Puedes trabajar con este, cambiarlo a Web3 o considerar actualizar a Ethers.js v5 (opens in a new tab), que está casi fuera de la fase beta.

The Graph

GraphQL (opens in a new tab) es una forma alternativa de manejar datos en comparación con una API RESTful (opens in a new tab). Tienen varias ventajas sobre las API RESTful, especialmente para datos descentralizados de la cadena de bloques. Si te interesa el razonamiento detrás de esto, echa un vistazo a GraphQL impulsará la web descentralizada (opens in a new tab).

Por lo general, obtendrías datos de tu contrato inteligente directamente. ¿Quieres leer la hora de la última operación? Simplemente llama a MyContract.methods.latestTradeTime().call(), que obtiene los datos de un nodo de Ethereum en tu aplicación descentralizada (dapp). Pero, ¿qué pasa si necesitas cientos de puntos de datos diferentes? Eso resultaría en cientos de solicitudes de datos al nodo, requiriendo cada vez un RTT (opens in a new tab), lo que haría que tu dapp fuera lenta e ineficiente. Una solución alternativa podría ser una función de llamada de obtención (fetcher) dentro de tu contrato que devuelva múltiples datos a la vez. Sin embargo, esto no siempre es ideal.

Y luego, es posible que también te interesen los datos históricos. Quieres saber no solo la hora de la última operación, sino las horas de todas las operaciones que hayas realizado. Usa el paquete de subgrafo de create-eth-app, lee la documentación (opens in a new tab) y adáptalo a tus propios contratos. Si buscas contratos inteligentes populares, es posible que incluso ya exista un subgrafo. Echa un vistazo al explorador de subgrafos (opens in a new tab).

Una vez que tienes un subgrafo, te permite escribir una consulta simple en tu dapp que recupera todos los datos importantes de la cadena de bloques, incluidos los históricos que necesitas, requiriendo solo una solicitud.

Apollo

Gracias a la integración de Apollo Boost (opens in a new tab), puedes integrar fácilmente The Graph en tu dapp de React. Especialmente al usar hooks de React y Apollo (opens in a new tab), obtener datos es tan simple como escribir una sola consulta GraphQL en tu componente:

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

Plantillas

Además, puedes elegir entre varias plantillas diferentes. Hasta ahora puedes usar una integración de Aave, Compound, Uniswap o Sablier. Todas ellas añaden direcciones importantes de contratos inteligentes de servicios junto con integraciones de subgrafos prefabricadas. Simplemente añade la plantilla al comando de creación como yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) es un mercado descentralizado de préstamos de dinero. Los depositantes proporcionan liquidez al mercado para obtener ingresos pasivos, mientras que los prestatarios pueden pedir prestado utilizando colaterales. Una característica única de Aave son esos préstamos relámpago (opens in a new tab) que te permiten pedir dinero prestado sin ningún colateral, siempre y cuando devuelvas el préstamo dentro de una sola transacción. Esto puede ser útil, por ejemplo, para darte dinero extra en operaciones de arbitraje.

Los tokens intercambiados que te generan intereses se llaman aTokens.

Cuando eliges integrar Aave con create-eth-app, obtendrás una integración de subgrafo (opens in a new tab). Aave utiliza The Graph y ya te proporciona varios subgrafos listos para usar en Ropsten (opens in a new tab) y la Red principal (opens in a new tab) en formato sin procesar (raw) (opens in a new tab) o formateado (opens in a new tab).

Compound

Compound (opens in a new tab) es similar a Aave. La integración ya incluye el nuevo subgrafo de Compound v2 (opens in a new tab). Los tokens que generan intereses aquí se llaman, sorprendentemente, cTokens.

Uniswap

Uniswap (opens in a new tab) es un intercambio descentralizado (DEX). Los proveedores de liquidez pueden ganar comisiones al proporcionar los tokens o ether requeridos para ambos lados de una operación. Es ampliamente utilizado y, por lo tanto, tiene una de las mayores liquideces para una gama muy amplia de tokens. Puedes integrarlo fácilmente en tu dapp para, por ejemplo, permitir a los usuarios intercambiar su ETH por DAI.

Desafortunadamente, en el momento de escribir este artículo, la integración es solo para Uniswap v1 y no para la recién lanzada v2 (opens in a new tab).

Sablier

Sablier (opens in a new tab) permite a los usuarios realizar pagos de dinero en flujo continuo (streaming). En lugar de un solo día de pago, en realidad recibes tu dinero constantemente sin más administración después de la configuración inicial. La integración incluye su propio subgrafo (opens in a new tab).

¿Qué sigue?

Si tienes preguntas sobre create-eth-app, ve al servidor de la comunidad de Sablier (opens in a new tab), donde puedes ponerte en contacto con los autores de create-eth-app. Como primeros pasos a seguir, es posible que desees integrar un marco de interfaz de usuario como Material UI (opens in a new tab), escribir consultas GraphQL para los datos que realmente necesitas y configurar el despliegue.