Veamos primero algunas terminologías básicas de la siguiente manera:
- Metamask: Metamask es una billetera de software de criptomonedas que interactúa con la red Ethereum.
- web3.js: web3.js es una colección de bibliotecas que le permiten interactuar con un Node Ethereum local o remoto mediante HTTP, IPC o WebSocket.
- String de bloques: una string de bloques es un libro de contabilidad público, descentralizado y distribuido digitalmente que existe en una red. Casi todas las criptomonedas, dApps, Defi y NFT se basan en la tecnología blockchain.
- Ethereum: Ethereum es la tecnología de string de bloques descentralizada y de código abierto más popular del mundo. Los contratos inteligentes se implementan en la string de bloques de Ethereum.
- dApps: Las aplicaciones descentralizadas o dApps son aplicaciones que se ejecutan en redes peer-to-peer basadas en la naturaleza distribuida de blockchain.
Configuración del proyecto web3: Para configurar un proyecto web3, consulte lo siguiente:
Estructura del proyecto: al final, la estructura de carpetas debería verse así:
El problema: puede suceder que estés trabajando en algún proyecto o siguiendo algún tutorial que esté usando una versión heredada de web3.js. Ahora, dará/puede dar los siguientes errores:
- Metamask dejó de inyectar Web3.
- Web3 no es un constructor.
- El campo enviar transacciones “desde” debe estar definido.
- (valor intermedio).toBigNumber no es una función.
- No se puede leer la propiedad ‘cuentas’ de undefined.
- Está accediendo a MetaMask window.web3.currentProvider shim. Esta propiedad está obsoleta.
Es porque MetaMask dejó de inyectar web3.js, en algún lugar de 2021. En una publicación de blog escribieron:
MetaMask utiliza actualmente Web3@0.20.x; sin embargo, ya no recibe parches ni actualizaciones. También faltaban algunas validaciones de seguridad en 0.20.x, lo que causó problemas a nuestros usuarios.
La eliminación de web3.js es parte de un esfuerzo mayor para simplificar la API de MetaMask y brindar la experiencia más segura y estable posible.
Si los dapps quieren usar una biblioteca de conveniencia a principios de 2021, tendrán que traer la suya propia.
La solución: corregir estos errores incluye una serie de pasos.
Paso 1: actualice el entorno de desarrollo y los marcos de prueba («devDependencies») como truffle, ganache, etc. a la última versión.
Paso 2: Instale e importe web3.js en el lado del cliente de la aplicación.
vía npm
npm instalar web3
a través de CDN
<script src=”https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js”></script>
Nota: importe web3 antes de llamar a cualquier marco de desarrollo (como truffle-contract).
Paso 3: Siga la guía de migración de Metamask y actualice cualquier código heredado. Algunos ejemplos comunes son:
Cargando web3
ventana.addEventListener(‘cargar’, asíncrono() => {
// Navegadores dapp modernos…
si (ventana.ethereum) {
ventana.web3 = nueva Web3(ethereum);
probar {
// Solicitar acceso a la cuenta si es necesario
espera ethereum.enable();
// Cuentas ahora expuestas
web3.eth.sendTransaction({/* … */});
} atrapar (error) {
// Usuario denegado acceso a la cuenta…
}
}
// Navegadores dapp heredados…
si no (ventana.web3) {
ventana.web3 = new Web3(web3.currentProvider);
// Cuentas siempre expuestas
web3.eth.sendTransaction({/* … */});
}
// Navegadores que no son dapp…
más {
console.log(‘Se detectó un navegador que no es Ethereum. ¡Debería considerar probar MetaMask!’);
}
Conexión a un Node Ethereum
const web3 = new Web3(new Web3.providers.HttpProvider(‘http://localhost:8545’));
Obtención de cuentas
const cuentas = await ethereum.request({método: ‘eth_accounts’ });
Envío de una transacción
probar {
const transacciónHash = esperar ethereum.request({
método: ‘eth_sendTransaction’,
parámetros: [
{
dirigirse,
de: window.web3.currentProvider.selectedAddress,
valor: cantidad,
precio del gas: ‘20000000000’
},
],
});
// Manejar el resultado
consola.log(transacciónHash);
} atrapar (error) {
consola.error(error);
}
Después de actualizar el código heredado: después de actualizar el código heredado, implemente su contrato inteligente con truffle y ejecute su servidor web. Verifique los cambios iniciando sesión en su cuenta de metamask o visitando las transacciones en la string de bloques de ganache.
Publicación traducida automáticamente
Artículo escrito por ahampriyanshu y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA