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

La última vez analizamos el panorama general de Solidity (se abre en una pestaña nueva) y ya mencionamos create-eth-app (se abre en una pestaña nueva). 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 (se abre en una pestaña nueva), 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 (se abre en una pestaña nueva) 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 (se abre en una pestaña nueva). 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 (se abre en una pestaña nueva) 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 (se abre en una pestaña nueva), 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 (se abre en una pestaña nueva). 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 (se abre en una pestaña nueva) 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 (se abre en una pestaña nueva) sigue siendo el más utilizado, Ethers.js (se abre en una pestaña nueva) 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 (se abre en una pestaña nueva), que está casi fuera de la fase beta.

The Graph

GraphQL (se abre en una pestaña nueva) es una forma alternativa de manejar datos en comparación con una API RESTful (se abre en una pestaña nueva). 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 (se abre en una pestaña nueva).

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 (se abre en una pestaña nueva), 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 (se abre en una pestaña nueva) 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 (se abre en una pestaña nueva).

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 (se abre en una pestaña nueva), puedes integrar fácilmente The Graph en tu dapp de React. Especialmente al usar hooks de React y Apollo (se abre en una pestaña nueva), 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 (se abre en una pestaña nueva) 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 (se abre en una pestaña nueva) 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 (se abre en una pestaña nueva). Aave utiliza The Graph y ya te proporciona varios subgrafos listos para usar en Ropsten (se abre en una pestaña nueva) y la Red principal (se abre en una pestaña nueva) en formato sin procesar (raw) (se abre en una pestaña nueva) o formateado (se abre en una pestaña nueva).

Compound

Compound (se abre en una pestaña nueva) es similar a Aave. La integración ya incluye el nuevo subgrafo de Compound v2 (se abre en una pestaña nueva). Los tokens que generan intereses aquí se llaman, sorprendentemente, cTokens.

Uniswap

Uniswap (se abre en una pestaña nueva) 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 (se abre en una pestaña nueva).

Sablier

Sablier (se abre en una pestaña nueva) 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 (se abre en una pestaña nueva).

¿Qué sigue?

Si tienes preguntas sobre create-eth-app, ve al servidor de la comunidad de Sablier (se abre en una pestaña nueva), 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 (se abre en una pestaña nueva), escribir consultas GraphQL para los datos que realmente necesitas y configurar el despliegue.