江苏丹阳建设公司网站,生活家装饰公司口碑怎么样,沈阳网站优化公司,wordpress4.8 php7任务#xff1a; 在前端开发一个查询UI#xff0c;查询当前用户账户的ETH余额和指定ERC20合约中的余额
目标#xff1a;
UI框架指定使用 MUI (https://mui.com)需要查询到当前账户的ETH余额并展示在UI界面上需要输入ERC20合约地址后#xff0c;查询到到当前账户在此ERC20…任务 在前端开发一个查询UI查询当前用户账户的ETH余额和指定ERC20合约中的余额
目标
UI框架指定使用 MUI (https://mui.com)需要查询到当前账户的ETH余额并展示在UI界面上需要输入ERC20合约地址后查询到到当前账户在此ERC20合约中的余额并展示在UI界面上
提示
需要安装 Metamask 插件链接到 Sepolia 网络ERC20 合约地址 0x7939C9b7cE8BFFc6cb791eCB129f4c385e05727a
时间要求24小时内给出相应网页可以部署到github或其他托管平台也可以通过腾讯会议运行demo代码演示
参考资料
https://web3camp.us/https://github.com/web3camp-labs
实现
首先确保安装了MUI库和Web3.js库 npm install mui/material emotion/react emotion/styled web3 你可以创建一个JavaScript文件并编写如下代码
import React, { useState } from react;
import Web3 from web3;
import { Container, TextField, Button, Typography } from mui/material;// 创建Web3实例连接到以太坊网络
const web3 new Web3(window.ethereum);// 定义要查询的ERC20合约地址
// const erc20ContractAddress 0x7939C9b7cE8BFFc6cb791eCB129f4c385e05727a;export default function Web3View() {const [ethBalance, setEthBalance] useState(null);const [erc20Balance, setERC20Balance] useState(null);const [erc20Address, setERC20Address] useState();// 检查是否有提供者可用if (typeof window.ethereum ! undefined) {// 使用以太坊提供者进行初始化web3.setProvider(window.ethereum);} else {console.error(无可用的以太坊提供者);}// 查询当前用户账户的ETH余额async function handleGetEthBalance() {try {// 获取当前用户的账户地址const accounts await web3.eth.requestAccounts();const account accounts[0];// 使用web3.eth.getBalance方法查询ETH余额const balanceWei await web3.eth.getBalance(account);// 将余额从Wei转换为ETH单位const balanceEth web3.utils.fromWei(balanceWei, ether);setEthBalance(balanceEth);} catch (error) {console.error(获取ETH余额失败:, error);}}// 查询指定ERC20合约中的余额async function handleGetERC20Balance() {try {// 获取当前用户的账户地址const accounts await web3.eth.requestAccounts();const account accounts[0];// 加载ERC20合约的ABI应用二进制接口const erc20ABI [// 方法1获取代币总供应量{constant: true,inputs: [],name: totalSupply,outputs: [{name: ,type: uint256,},],payable: false,stateMutability: view,type: function,},// 方法2获取指定地址的代币余额{constant: true,inputs: [{name: _owner,type: address,},],name: balanceOf,outputs: [{name: balance,type: uint256,},],payable: false,stateMutability: view,type: function,},// 方法3转账代币到指定地址{constant: false,inputs: [{name: _to,type: address,},{name: _value,type: uint256,},],name: transfer,outputs: [{name: ,type: bool,},],payable: false,stateMutability: nonpayable,type: function,},]; // ERC20合约的ABI定义// 创建ERC20合约实例const erc20Contract new web3.eth.Contract(erc20ABI, erc20Address);// 使用合约实例的balanceOf方法查询余额const balance await erc20Contract.methods.balanceOf(account).call();setERC20Balance(balance.toString());} catch (error) {console.error(获取ERC20合约余额失败:, error);}}return (Container maxWidthsmTypography varianth4 aligncenter gutterBottom查询账户余额/TypographyButton variantcontained onClick{handleGetEthBalance}查询ETH余额/Button{ethBalance (Typography variantbody1 gutterBottom当前ETH余额{ethBalance} ETH/Typography)}TextFieldlabelERC20合约地址value{erc20Address}onChange{(e) setERC20Address(e.target.value)}fullWidthmarginnormal/Button variantcontained onClick{handleGetERC20Balance}查询ERC20余额/Button{erc20Balance ! null (Typography variantbody1 gutterBottom当前ERC20余额{erc20Balance}/Typography)}/Container);
}
效果图
