Erreur lors de l'obtention du solde du portefeuille à l'aide de la bibliothèque Ethereum dans React JS
Erreur lors de l'obtention du solde du portefeuille à l'aide de la bibliothèque ether dans ReactJS. Comme je l'ai mentionné dans le titre. Lorsque j'ai essayé d'utiliser la bibliothèque ether dont j'ai effectué une installation NPM, j'ai rencontré une erreur étrange, lors de la vérification de localhost, j'ai eu cette erreur :
Voici mon message d'erreur :
Compiled with problems:X
ERROR in ./node_modules/node-gyp-build/node-gyp-build.js 1:9-22
Module not found: Error: Can't resolve 'fs' in '/Users/gustavopayano/Desktop/navbar/node_modules/node-gyp-build'
ERROR in ./node_modules/node-gyp-build/node-gyp-build.js 2:11-26
Module not found: Error: Can't resolve 'path' in '/Users/gustavopayano/Desktop/navbar/node_modules/node-gyp-build'
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: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
Module not found: Error: Can't resolve 'os' in '/Users/gustavopayano/Desktop/navbar/node_modules/node-gyp-build'
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: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
Voici mon composant ReactJS qui implémente le code de connexion du portefeuille Metamask :
import { React, useState } from "react";
import "./App";
import Navbar from "./Navbar";
import "./css/Metamask.css";
function Metamask() {
const [errorMessage, setErrorMessage] = useState(null);
const [defaultAccount, setDefaultAccount] = useState(null);
const [userBalance, setUserBalance] = useState(null);
const ethers = require("ethers");
const connectWallet = () => {
if (window.ethereum) {
window.ethereum
.request({ method: "eth_requestAccounts" })
.then((result) => {
accountChanged(result[0]);
});
} else {
setErrorMessage("Install MetaMask Please!");
}
};
const accountChanged = (accountName) => {
setDefaultAccount(accountName);
getUserBalance(accountName);
};
const getUserBalance = (accountAddress) => {
window.ethereum
.request({
method: "eth_getBalance",
params: [String(accountAddress), "latest"],
})
.then((balance) => {
setUserBalance(ethers.utils.formatEther(balance));
});
};
return (
<div className="metamask">
<Navbar />
<h1>Metamask Wallet Connection</h1>
<button class="btn btn-secondary btn-md" onClick={connectWallet}>
{" "}
Connect Metamask
</button>
<h3>Address: {defaultAccount}</h3>
<h3>Balance: {userBalance}</h3>
{errorMessage}
</div>
);
}
export default Metamask;
La fonction connectWallet() 函数检查用户浏览器中是否安装了 Metamask 扩展。如果安装了，它会向 Metamask 扩展发送请求以连接用户的钱包。如果连接成功，则调用 accountChanged() 函数，该函数设置 defaultAccount 状态，并调用 getUserBalance() 获取用户钱包余额。如果未安装Metamask扩展，则会调用setErrorMessage() affiche un message d'erreur à l'utilisateur.
