Intro al desarrollo frontend para DApps en React

LABITCONF | Noviembre 2022

Sitio web hecho en NextJS usado durante la charla para demostrar como interactuar con DAI y CompoundJS desde nuestro browser usando React.

Acá dejamos el link a la presentación.

Pre-requisitos

• Tener instalada una versión de NodeJS >= 16
• Instalar metamask en el browser (link)
• Obtener GoerliEth de faucet (link)
• Convertir un poco de GoerliEth a DAI en Uniswap (usar dirección de DAI para Goerli especificada más abajo)

Como correr el sitio

1. Clonar el repo

   git clone git@github.com:underscopeio/labitconf-workshop-2022-dapps.git 

2. Instalar dependencias

   npm install
   # ó
   yarn

3. Iniciar el servidor

   npm run dev
   # ó
   yarn dev

4. Abrir en el navegador la dirección http://localhost:3000

Pasos

• Paso 0 - componentes mockeados
• Paso 1 - leer contratos
• Paso 2 - verificar si se otorgó acceso a los fondos
• Paso 3 - conectar billetera
• Paso 4 - autorizar a compound a acceder a los fondos
• Paso 5 - obtener info de la TX
• Paso 6 - mintear CDAI

Desafío: retirar fondos

Te desafiamos a que implementes la funcionalidad de retirar el DAI invertido en Compound. Para esto dejamos el archivo challenge.tsx para que lo completes. Acá te dejamos algunos consejos:

• Investigá la documentación de compound para ver como se llama el método que necesitamos llamar y sus parámetros
• No te olvides de conseguir GoerliEth y DAI (que coincida con la dirección de contrato que pusimos más abajo)
• Una vez hecha la transacción, podés actualizar los valores que se ven en pantalla

Direcciones de contratos (Goerli)

• DAI: 0x2899a03ffDab5C90BADc5920b4f53B0884EB13cC
• CDAI: 0x0545a8eaF7ff6bB6F708CbB544EA55DBc2ad7b2a

Links

• Ethers.js (para interactuar con ethereum)
• Wagmi (hooks de react para interactuar con ethereum)
• Goerli Faucet (para obtener Eth de prueba)
• Block Explorer (para ver info de txs)
• Docs de Compound (sección para verificar los contratos que debemos usar para cada network)