Administrando la conexión a Metamask

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

Santiago Grangetto

student•

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";

Juan José Vargas Fletes

student•

Thanks! esto me funcionó!

Jesus Marquez Martini

student•

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

Oscar Guadalupe Pérez Ayuso

student•

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

Alejandro Sánchez Yalí

student•

Excelente!

Emilio Oberto

student•

Me salvaste con ésto JAJAJA

Anibal Español

student•

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

yarn add @types/web3 -D

Jimmy Buriticá Londoño

student•

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)

Anibal Español

student•

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}`)
      })()
    }
  }, [])

Rodrigo Ramos Xochiteotzin

student•

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

Art Michel

student•

Mi cabeza:

Franklin Gil

student•

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

W Society

student•

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.

Beatriz Martin

student•

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.

W Society

student•

De nada saludos!.

Benjamin Gutierrez

student•

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>
);

Gabriel Hernández Valdez

student•

(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.

Alejandro Ibarra Rodriguez

student•

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

Santiago Grangetto

student•

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

W Society

student•

¿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?.

Juan Sebastián Fernández Sáez

student•

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.

Jesus M Cocaño Diaz

student•

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

Jesus M Cocaño Diaz

student•

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.

Eulalio Cruz

student•

Alguien sabe porque me sale este error ?

Jesus Marquez Martini

student•

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

Luca Cristian Manea

student•

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>
);

Miguel Maidana

student•

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

Willy Gonzalez

student•

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');
}

};

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

export default App;

Tini Cassi

student•

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

Marcelo Haro

student•

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.

Sergio Bryan Madrid Nuñez

student•

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);

Administrando la conexión a Metamask

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