CursosEmpresasBlogLiveConfPrecios

Contenido del curso

Introducción al desarrollo con Web3.js

  • 1
    Desarrollo Frontend de Apps Descentralizadas con Web3 y React JS

    Desarrollo Frontend de Apps Descentralizadas con Web3 y React JS

    03:20 min
  • 2
    Desarrollo Frontend para Aplicaciones Descentralizadas con Web3JS y MetaMask

    Desarrollo Frontend para Aplicaciones Descentralizadas con Web3JS y MetaMask

    04:30 min

Qué es Web3.js

  • 3
    Comunicación Frontend-Backend en Aplicaciones Blockchain

    Comunicación Frontend-Backend en Aplicaciones Blockchain

    09:43 min
  • 4
    Uso de Web3 para Interactuar con la Blockchain Ethereum

    Uso de Web3 para Interactuar con la Blockchain Ethereum

    09:43 min
  • 5
    Construcción de Aplicaciones Web3 con React y MetaMask

    Construcción de Aplicaciones Web3 con React y MetaMask

    14:08 min
  • 6
    Actualización sobre testnet en Ethereum

    Actualización sobre testnet en Ethereum

    01:52 min

Desarrollo frontend con Web3.js

  • 7
    Administrando la conexión a Metamask

    Administrando la conexión a Metamask

    Viendo ahora
  • 8
    Configurando Web3-React

    Configurando Web3-React

    21:30 min
  • 9
    ¿Qué es un ABI?

    ¿Qué es un ABI?

    05:44 min
  • 10
    Instanciando el contrato de PlatziPunks

    Instanciando el contrato de PlatziPunks

    14:07 min
  • 11
    Previsualizando tu PlatziPunk

    Previsualizando tu PlatziPunk

    11:54 min
  • 12
    Habilitando el mint de PlatziPunks

    Habilitando el mint de PlatziPunks

    15:54 min
  • 13
    Creando la galería de PlatziPunks

    Creando la galería de PlatziPunks

    20:43 min
  • 14
    Detalle de PlatziPunk

    Detalle de PlatziPunk

    12:37 min
  • 15
    Transfiriendo un PlatziPunk a otra cuenta

    Transfiriendo un PlatziPunk a otra cuenta

    15:24 min
  • 16
    Filtrando los PlatziPunks por cuenta

    Filtrando los PlatziPunks por cuenta

    20:38 min

Despliegue de la aplicación

  • 17
    InterPlanetary File System

    InterPlanetary File System

    06:48 min
  • 18
    Usando IPFS e Infura para subir contenido no censurable

    Usando IPFS e Infura para subir contenido no censurable

    11:41 min
  • 19
    Despliegue de PlatziPunks en IPFS

    Despliegue de PlatziPunks en IPFS

    09:55 min
  • 20
    Despliegue de Aplicaciones en Fleek usando IPFS y ENS

    Despliegue de Aplicaciones en Fleek usando IPFS y ENS

    02:29 min
  • 21
    Ethereum Name Service

    Ethereum Name Service

    04:04 min
  • 22
    Registrando nuestro ENS y vinculando a PlatziPunks

    Registrando nuestro ENS y vinculando a PlatziPunks

    11:50 min

Sigue desarrollando

  • 23
    Recapitulación de lo aprendido con el proyecto PlatziPunks

    Recapitulación de lo aprendido con el proyecto PlatziPunks

    03:42 min
Tomar examen

Administrando la conexión a Metamask

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

      Comentarios

      Santiago Grangetto

      Santiago Grangetto

      student•
      hace 4 años
        Juan José Vargas Fletes

        Juan José Vargas Fletes

        student•
        hace 4 años
        Jesus Marquez Martini

        Jesus Marquez Martini

        student•
        hace 4 años
      Oscar Guadalupe Pérez Ayuso

      Oscar Guadalupe Pérez Ayuso

      student•
      hace 4 años
        Alejandro Sánchez Yalí

        Alejandro Sánchez Yalí

        student•
        hace 4 años
        Emilio Oberto

        Emilio Oberto

        student•
        hace 4 años
      Anibal Español

      Anibal Español

      student•
      hace 4 años
      Jimmy Buriticá Londoño

      Jimmy Buriticá Londoño

      student•
      hace 4 años
      Anibal Español

      Anibal Español

      student•
      hace 4 años
        Rodrigo Ramos Xochiteotzin

        Rodrigo Ramos Xochiteotzin

        student•
        hace 4 años
      Art Michel

      Art Michel

      student•
      hace 4 años
      Franklin Gil

      Franklin Gil

      student•
      hace 4 años
      W Society

      W Society

      student•
      hace 4 años
        Beatriz Martin

        Beatriz Martin

        student•
        hace 4 años
        W Society

        W Society

        student•
        hace 3 años
      Benjamin Gutierrez

      Benjamin Gutierrez

      student•
      hace 4 años
      Gabriel Hernández Valdez

      Gabriel Hernández Valdez

      student•
      hace 4 años
      Alejandro Ibarra Rodriguez

      Alejandro Ibarra Rodriguez

      student•
      hace 4 años
      Santiago Grangetto

      Santiago Grangetto

      student•
      hace 4 años
      W Society

      W Society

      student•
      hace 4 años
      Juan Sebastián Fernández Sáez

      Juan Sebastián Fernández Sáez

      student•
      hace 4 años
        Jesus M Cocaño Diaz

        Jesus M Cocaño Diaz

        student•
        hace 4 años
        Jesus M Cocaño Diaz

        Jesus M Cocaño Diaz

        student•
        hace 4 años
      Eulalio Cruz

      Eulalio Cruz

      student•
      hace 3 años
      Jesus Marquez Martini

      Jesus Marquez Martini

      student•
      hace 4 años
        Luca Cristian Manea

        Luca Cristian Manea

        student•
        hace 4 años
        Miguel Maidana

        Miguel Maidana

        student•
        hace 4 años
      Willy Gonzalez

      Willy Gonzalez

      student•
      hace 3 años
      Tini Cassi

      Tini Cassi

      student•
      hace 3 años
      Marcelo Haro

      Marcelo Haro

      student•
      hace 3 años
      Sergio Bryan Madrid Nuñez

      Sergio Bryan Madrid Nuñez

      student•
      hace 4 años

      el modulo de web3 da error con webpack >= 5, para usarlo como en la clase se puede importar de la siguiente forma

      import Web3 from "web3/dist/web3.min";

      Thanks! esto me funcionó!

      si me funcionoooo gracias aaa eres lo maximo en serio habia probado los otros y no me habian funcionado

      Para los que tiene problemas utilizando Web3 con la versión 5 de create-react-app tienen que hacer lo siguiente:

      • Instalar los siguientes paquetes:
      yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer
      • Crear un archivo config-overrides.js en la raíz del proyecto con lo siguiente:
      const webpack = require('webpack'); module.exports = function override(config) { const fallback = config.resolve.fallback || {}; Object.assign(fallback, { "crypto": require.resolve("crypto-browserify"), "stream": require.resolve("stream-browserify"), "assert": require.resolve("assert"), "http": require.resolve("stream-http"), "https": require.resolve("https-browserify"), "os": require.resolve("os-browserify"), "url": require.resolve("url") }) config.resolve.fallback = fallback; config.plugins = (config.plugins || []).concat([ new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }) ]); config.ignoreWarnings = [/Failed to parse source map/]; return config; }
      • Por último actualizar la sección de scripts en el package.json:
      "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" },

      Link a la solución original: https://github.com/ChainSafe/web3.js#web3-and-create-react-app

      Excelente!

      Me salvaste con ésto JAJAJA

      Si te da el error web3.eth.requestAccounts is not a function, se soluciona instalando el siguiente paquete:

      yarn add @types/web3 -D

      Trabajando desde la consola del navegador, con el siguiente comando te conectas a Metamask

      window.ethereum

      Con el siguiente puedes ver tu número de cuenta.

      window.ethereum.request({ method: 'eth_requestAccounts' }).then(console.log)

      Usando async y await:

      useEffect(() => { if (window.ethereum) { // (async () => { // const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }) // console.log(`Accounts: ${accounts}`) // })() (async () => { const web3 = new Web3(window.ethereum); const accounts = await web3.eth.requestAccounts(); console.log(`Accounts: ${accounts}`) })() } }, [])

      Me gusta esta implementación. Le agregué un useState antes para poder llenarlo con la respuesta de accounts y renderizarlo dentro del body de la página y no tener que ir a la consola

      Mi cabeza:

      el EIP-1193 es la api para lograr coherencia entre clientes y aplicaciones.

      Una sugerencia, si quieren hacer el curso tal como el instructor, sin errores de versiones ni cambios en el código, les sugiero que copien el package.json del instructor en la zona de recursos y hagan lo siguiente:

      Borren la carpeta node_modules.

      Después el comando yarn install.

      Y en seguida yarn start . Listo todo funcionará tal cual el curso.

      Fuente de la información aqui.

      Después de probar muchas cosas, he hecho esto para seguir el curso. Más adelante ya veré las opciones para actualizar versiones. Buena idea y gracias por el aporte.

      De nada saludos!.

      Asi tiene que quedar el main

      import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import { ChakraProvider } from "@chakra-ui/react"; ReactDOM.createRoot(document.getElementById("root")).render( <BrowserRouter> <ChakraProvider> <Routes> <Route path="/" element={<App />} /> </Routes> </ChakraProvider> </BrowserRouter> );

      (30/08/22) Hola compañeros, estoy haciendo el curso con las siguientes versiones de dependencias

      "dependencies": { "@chakra-ui/react": "2.3.1", "@emotion/react": "11.10.0", "@emotion/styled": "11.10.0", "@testing-library/jest-dom": "5.16.5", "@testing-library/react": "13.3.0", "@testing-library/user-event": "13.5.0", "@web3-react/core": "6.1.9", "framer-motion": "7.2.1", "react": "18.2.0", "react-dom": "18.2.0", "react-router-dom": "6.3.0", "react-scripts": "5.0.1", "web-vitals": "2.1.4", "web3-react": "5.0.5" },

      Sera por alguna actualización pero como estaban colocando a traves de la instancia de web3 , requestAccounts me aparece como que el método no existe.

      Al final por internet encontre que se tenia que hacer de la siguiente manera:

      const web3 = new Web3(window.ethereum); const requestAccounts = async () => { try { // Request account access if needed await window.ethereum.enable(); // Acccounts now exposed web3.eth.getAccounts(console.log); } catch (error) { // User denied account access... } } useEffect(() => { requestAccounts(); }, []);

      No necesariamente con el useEffect pero los métodos serian esos.

      si estan usando vite y les arroja un problema, aqui les dejo una solucion: agregan esto en el index.html , hasta arriba en el body

      <script> window.global = window; </script> <script type="module"> import process from 'process'; import { Buffer } from 'buffer'; import EventEmitter from 'events'; window.Buffer = Buffer; window.process = process; window.EventEmitter = EventEmitter; </script>

      y el archivo vite.config.js debe quedar asi

      import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], resolve: { alias: { process: "process/browser", stream: "stream-browserify", zlib: "browserify-zlib", util: 'util' } }, })

      y listo, con eso deberia de funcionar

      Solucion completa para poder usar web3 con create-react-app https://github.com/ChainSafe/web3.js#web3-and-create-react-app

      ¿Que se ocuparía para construir tu propio cliente de conexión y validador como meta mask y no usarlo, sino conectar tu propio cliente?.

      Tengo un problema con la librería web3, al cargar el proyecto en el servidor me arroja estos errores:

      Compiled with problems:

      ERROR in ./node_modules/cipher-base/index.js 3:16-43

      Module not found: Error: Can't resolve 'stream' in 'D:\AAACURSOS\proyecto_platzipunks\platzi-punks-interface\node_modules\cipher-base'

      BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

      If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

      ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

      Module not found: Error: Can't resolve 'crypto' in 'D:\AAACURSOS\proyecto_platzipunks\platzi-punks-interface\node_modules\eth-lib\lib'

      BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

      If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false } y los errores siguen....

      A pesar de que solamente tenga instalada esta librería, igual me aparecen cada vez que la importo con:

      import Web3 from 'web3'; en App.js

      también probé descargar los archivos de la clase, pero igual me siguen apareciendo estos errores. Se agradece cualquier ayuda.

      El dia de hoy llegue a esta clase, estoy exactamente igual :( ¿haz podido encontrar el error?

      Parece ser un error de las versiones nuevas de react y react-scripts, yo para efectos de seguir el curso, solucione copiando el package.json del profesor y despues ejecute un yarn install para que me quedaran las versiones que esta usando el profesor. Despues leere mas del tema.

      error.PNG

      Alguien sabe porque me sale este error ?

      me aparecen los siguientes errores alguien sabria solucionarlos?

      Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot printWarning @ react-dom.development.js:86 bootstrap:27 Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function at Module../src/index.js (index.js:7:1) at Module.options.factory (react refresh:6:1) at webpack_require (bootstrap:24:1) at startup:7:1 at startup:7:1

      hace pocos dias salio una nueva version de react (react18) y tiene problemas de compatibilidad entre otras cosas cambiaron la sintaxis de como realizar varios de los comandos para que funcione lo de esta clase el import de app.js deberia quedarte asi

      import { Route, Routes } from "react-router-dom"; import Home from "./views/home"; import { useEffect } from "react"; //Importamos de esta manera para evitar problemas de compatibilidad con webpack>=5 import Web3 from "web3/dist/web3.min";

      y el index.js si cambia un poco mas lo primero es que el import de ReactDOM cambia a import ReactDOM from 'react-dom/client'; y esto no se si es totalmente necesario pero en la documentacion recomiendan importar StrictMode y createRoot te dejo como quedaria el archivo

      import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import {HashRouter} from 'react-router-dom'; import {ChakraProvider} from "@chakra-ui/react"; import {StrictMode} from 'react'; import {createRoot} from 'react-dom/client'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); root.render( <StrictMode> <HashRouter> <ChakraProvider> <App /> </ChakraProvider> </HashRouter> </StrictMode> );

      La solucion de Lucas me funciono !! muchas gracias por tu aporte !!! Genio Total

      Creo que la tarea falla porque el curso tiene mas de dos años y al actualizar las versiones de react cambian algunas cosas, les dejo aquí un Código básico para conectar la billetera de Metamask (espero sea de utilidad):


      import { useEffect, useState } from 'react'; import { Route, Routes } from 'react-router-dom'; import Home from './views/home/index.js'; import './App.css'; import Web3 from 'web3';

      function App() { const [userAddress, setUserAddress] = useState('');

      useEffect(() => { connectWeb3(); }, []);

      const connectWeb3 = async () => { if (window.ethereum) { // Crear una instancia de Web3 usando MetaMask const web3 = new Web3(window.ethereum);

      try { // Solicitar acceso a la cuenta del usuario en MetaMask await window.ethereum.enable(); // Obtener la dirección de la cuenta del usuario const accounts = await web3.eth.getAccounts(); const address = accounts[0]; // Actualizar el estado con la dirección de la cuenta del usuario setUserAddress(address); } catch (error) { console.error('Error al conectar con MetaMask:', error); } } else { console.error('MetaMask no está instalado'); }

      };

      const renderMessage = () => { if (!window.ethereum) { // Mensaje si MetaMask no está instalado return ( <div> <p> MetaMask no está instalado en tu navegador. Por favor, <a href="https://metamask.io/" target="_blank" rel="noopener noreferrer" > instálalo aquí </a> . </p> </div> ); } else if (userAddress) { // Mensaje si MetaMask está instalado y conectado const truncatedAddress = userAddress.substring(0, 8); return ( <div> <p> Conectado con MetaMask. Dirección de la cuenta: {truncatedAddress}... </p> </div> ); } else { // Mensaje mientras se está conectando con MetaMask return ( <div> <p>Conectando con MetaMask...</p> </div> ); } };

      return ( <> {renderMessage()} <Routes> <Route path="/" element={<Home />} /> </Routes> </> ); }

      export default App;

      Siempre vuelvo a esta clase cuando necesito integrar Metamask a un proyecto :) Una clase clara y didáctica. Genio total Ernesto!

      Los proveedores se rigen por el stándar eip 1193.

      Injected provider, se inyecta dentro del navegador.

      El eip 1102, los usuarios primero deben aceptar el conectar su aplicación con el proveedor.

      El stándar eip 2255 ( Wallet permissions system ) reemplaza al standar 1102.

      Si están usando typescript, window.ethereum les va a dar error, pueden usar lo siguiente:

      Web3.givenProvider

      Te devuelve null si no existe un proveedor y en el caso de existir sirve para hacer:

      const web3 = new Web3(Web3.givenProvider);