Configurando Web3-React

Clase 8 de 23 • Curso de Desarrollo Frontend de Aplicaciones Descentralizadas con Web3.Js

Santiago Grangetto

student•

Yendo al github sale en main todo lo referido a la v8 que esta en beta, para usar esa version ya no existe injected-connector, si no que hay un connector especificamente para metamask. El profe esta usando la v6, que en el repo pueden acceder a la docu moviendose a la branch que se llama v6.

Rodrigo Ramos Xochiteotzin

student•

para usarla dentro del proyecto tengo que cambiar la versión en package.json? clonar el repositorio? dónde?

Franklin Gil

student•

Alfredo Toledano

student•

Espectacular informacion!!!

De donde obtuviste dicha informacion? (que no la he encontrado en el repo de web3-react)

Matías Monsalve

student•

El mainLayout debe envolver routes, así quedaría

import { Route, Routes } from "react-router-dom";
import Home from "./views/home";
import MainLayout from "./layouts/main";

function App() {
  return (
    
      <MainLayout>
      <Routes>
       <Route path="/" exact element={<Home/>} />
      </Routes>
     </MainLayout>
  );
}

export default App;

Miguel Santiago Velasquez Ruiz

student•

En /src/config/web3 el import de web3 hay que hacer tal que: import Web3 from ‘web3/dist/web3.min’; Por el problema de la versión de webpack.

Tini Cassi

student•

Sos un genio. gracias!

Ángel David Lerma Carrera

student•

Aqui encontraran la misma version que se instala en el video https://github.com/NoahZinsmeister/web3-react/tree/v6

Leandro Ariel Labiano Ramo

student•

yo en este punto, tuve que ir al github y descargar el código, porque la diferencia de versiones hace muy complicado la continuación del curso ya que se rompe todo.

Rodrigo Ramos Xochiteotzin

student•

Me pasa a cada rato D:

jones palacios

student•

hola tengo este error con "useTruncatedAddress" que puedo hacer?

Manuel Luis Vila

student•

Asegúrate de que también has añadido la carpeta "hooks" de los archivos de la clase a tu carpeta "src".

Jesus Marquez Martini

student•

si alguno tiene problemas despues de conectar su wallet a la app con la consola indicandoles que web3(provider) no es un metodo valido, solo quitenle los {} que envuelven al import de Web3 en el archivo config/web3/index :)

Abraham Calas

student•

Muchas Gracias por el aporte.

Tini Cassi

student•

Excelente! Qué gran comunidad, todos los aportes de este curso me ayudaron a terminar esta clase!! 🚀

Luca Cristian Manea

student•

Si alguien tiene problemas con con la ejecucion del proyecto agregen la carpeta hooks con todo su contenido

Tini Cassi

student•

Muy importante! Gracias!

Edhu Nuñez Alvarado

student•

En este caso cuál seria?

Luca Cristian Manea

student•

Hola conseguiste la documentacion para utilizar alguna de esas 2 extenciones?

Duvan Andrés Villadiego Hoyos

student•

¿Alguien tiene el .svg del nav?

Ernesto García

teacher•

Lo puedes encontrar por acá:

https://platzi.com/clases/2563-frontend-dapps/43006-configurando-web3-react/#:~:text=logo512.png-,favicon.webp,-index.html

Está todo en la sección de recursos

Jairo Rosero

student•

Aquí pueden encontrar el ChainID de diferentes networks https://chainlist.org/

Carlos Dugarte

student•

Muchas gracias

Edmundo Salamanca Villa

student•

Mi solución al reto

const useTruncatedAddress = (address) => {
  const truncateRegex = /^(0x[a-zA-Z0-9]{4})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/;
  const match = address.match(truncateRegex)
  if (!match) return address
  return `${match[1]}...${match[2]}`  
}

export default useTruncatedAddress

José Manuel Piña Rodríguez

student•

++Resolviendo el reto:++

const shortAddress = (account) => {
  const newAddress = useMemo(
    () => `${account?.substr(0, 5)}...${account?.substr(-4)}`,
    [account]
  );

  return newAddress;
};

José Manuel Piña Rodríguez

student•

Ademas de importar:

import { useMemo } from "react";

Luis Berenguer

student•

Yo lo hice igual pero con el método .slice( )

Benjamin Gutierrez

student•

agregando el injected se me rompe la app alguien sabe como solucionarlo?

Jesus Marquez Martini

student•

me salen los siguientes errores en consola despues de conectar la wallet y he estado buscando como resolverlos aunque no he conseguido nada si alguien sabe como hacer que funcione

estos son los errores:

Uncaught TypeError: web3_dist_web3_min__WEBPACK_IMPORTED_MODULE_0__.Web3 is not a constructor at getLibrary (index.js:11:1).

The above error occurred in the <Web3ReactProvider> component:

at Web3ReactProvider

Carlos Daniel Osorio Benavides

student•

Tengo el mismo problema pero aun no encuentro la solución

Carlos Daniel Osorio Benavides

student•

Extrañamente volví a copiar de los archivos en los recursos de la clase config/web3/index.js y el layout de wallet a mi proyecto y funciono, solo cambiando el import en config

import Web3 from ‘web3/dist/web3.min’

Un error de dedo que nunca encontré tal vez, espero te sirva

Willy Gonzalez

student•

Seria bueno que actualizaran los archivos del curso, muchos no funcionan debido a que hay versiones mas nuevas de los componentes

Joaquin Jimenez Garcia

student•

Curso desactualizado... Si lo seguimos al píe de la letra, las cosas no funcionan igual...

Devi Chaves Rodriguez

student•

el ID de Goerli es 5

Aitor Zaldua

student•

Hola a todos,

Al añadir en /src/index.js el import:

import { getLibrary } from "./config/web3";

Me da el siguiente error:

Parece que es un bug de webpack5 pero, pese a que he leído varios aportes, ninguno lo soluciona. ¿Tienen alguna idea para solucionarlo? muchas gracias

Aitor Zaldua

student•

Me respondo yo mismo: En /src/config/web3 el import de web3 hay que hacer tal que: import Web3 from 'web3/dist/web3.min'; Por el problema de la versión de webpack.

Damian Spizzirri

student•

Cualquier cosa sino copiate el package.json que se usa en el curso, así tenes las mismas versiones de todo que use Ernesto.

import { Route, Routes } from "react-router-dom";
import Home from "./views/home";
import MainLayout from "./layouts/main";

function App() {
  return (
    
      <MainLayout>
      <Routes>
       <Route path="/" exact element={<Home/>} />
      </Routes>
     </MainLayout>
  );
}

export default App;

const useTruncatedAddress = (address) => {
  const truncateRegex = /^(0x[a-zA-Z0-9]{4})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/;
  const match = address.match(truncateRegex)
  if (!match) return address
  return `${match[1]}...${match[2]}`  
}

export default useTruncatedAddress

Configurando Web3-React

Introducción al desarrollo con Web3.js

Desarrollo Frontend de Apps Descentralizadas con Web3 y React JS

Desarrollo Frontend para Aplicaciones Descentralizadas con Web3JS y MetaMask

Qué es Web3.js

Comunicación Frontend-Backend en Aplicaciones Blockchain

Uso de Web3 para Interactuar con la Blockchain Ethereum

Construcción de Aplicaciones Web3 con React y MetaMask

Actualización sobre testnet en Ethereum

Desarrollo frontend con Web3.js

Administrando la conexión a Metamask

Configurando Web3-React

¿Qué es un ABI?

Instanciando el contrato de PlatziPunks

Previsualizando tu PlatziPunk

Habilitando el mint de PlatziPunks

Creando la galería de PlatziPunks

Detalle de PlatziPunk

Transfiriendo un PlatziPunk a otra cuenta

Filtrando los PlatziPunks por cuenta

Despliegue de la aplicación

InterPlanetary File System

Usando IPFS e Infura para subir contenido no censurable

Despliegue de PlatziPunks en IPFS

Despliegue de Aplicaciones en Fleek usando IPFS y ENS

Ethereum Name Service

Registrando nuestro ENS y vinculando a PlatziPunks

Sigue desarrollando

Recapitulación de lo aprendido con el proyecto PlatziPunks