Configurando Web3-React

Curso de Desarrollo Frontend de Aplicaciones Descentralizadas con Web3.Js

Contenido del curso

Introducción al desarrollo con Web3.js

1
Desarrollo Frontend de Apps Descentralizadas con Web3 y React JS
03:20 min
2
Desarrollo Frontend para Aplicaciones Descentralizadas con Web3JS y MetaMask
04:30 min

Qué es Web3.js

Desarrollo frontend con Web3.js

Despliegue de la aplicación

Sigue desarrollando

23
Recapitulación de lo aprendido con el proyecto PlatziPunks
03:42 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0021:30

Configurando Web3-React

Curso de Desarrollo Frontend de Aplicaciones Descentralizadas con Web3.Js

Clase 8 de 23

Clase 8 / 23

Comentarios (29)29 comentarios

Santiago Grangetto

Hace 5 años

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

Hace 4 años

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

Franklin Gil

Alfredo Toledano

Espectacular informacion!!!

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

Matías Monsalve

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

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

Sos un genio. gracias!

Ángel David Lerma Carrera

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

Leandro Ariel Labiano Ramo

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.

Me pasa a cada rato D:

jones palacios

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

Manuel Luis Vila

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

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

Muchas Gracias por el aporte.

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

Luca Cristian Manea

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

Muy importante! Gracias!

Edhu Nuñez Alvarado

En este caso cuál seria?

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

Duvan Andrés Villadiego Hoyos

¿Alguien tiene el .svg del nav?

Ernesto García

Profesor

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

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

Carlos Dugarte

Muchas gracias

Edmundo Salamanca Villa

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

Ademas de importar:

import { useMemo } from "react";

Luis Berenguer

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

Benjamin Gutierrez

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

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

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

Willy Gonzalez

Hace 3 años

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

Joaquin Jimenez Garcia

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

Devi Chaves Rodriguez

el ID de Goerli es 5

Aitor Zaldua

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

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

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

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

Configurando Web3-React

Progreso del curso

Introducción al desarrollo con Web3.js

Qué es Web3.js

Desarrollo frontend con Web3.js

Despliegue de la aplicación

Sigue desarrollando