Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Administrando la conexión a Metamask

6/22
Recursos

Aportes 10

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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

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

yarn add @types/web3 -D

Mi cabeza:

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

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

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

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

El injected provider me recuerda a context api de react