Administrando la conexión a Metamask

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

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

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.

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

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

El injected provider me recuerda a context api de react