15. DAPP react界面-web3.js库-Metemask调用和显示-调用合约方法
测试Solidity ERC20合约 - web3.js结合Metemask调用合约方法
1. Remix编写、编译、部署、测试Solidity ERC20合约 - 基础篇
2. Remix编写、编译、部署、测试Solidity ERC20合约 - 进阶篇
3. Hardhat编写、编译、部署、测试Solidity ERC20合约 - 基础篇
4. JSON-RPC调用区块链方法
5. JSON-RPC调用合约方法
6. JSON-RPC给合约账户同时转以太币和代币
7. web3.js调用区块链方法
8. web3.js调用合约方法
9. web3.js给合约账户同时转以太币和代币
10. Go-Ethereum调用区块链方法
11. Go-Ethereum调用合约方法
12. sendTransaction和sendRawTransaction区别
13. Metamask导入代币，转账ETH，转账代币 - 界面操作
14. Metamask连接hardhat本地节点
15. DAPP react界面-web3.js库-Metemask调用和显示-调用合约方法
16. web3js结合sepolia测试网
17. 总结
1. 环境配置和合约代码
参考文章12. Hardhat编写、编译、部署、测试Solidity ERC20合约 - 进阶篇 - Metamask导入代币，转账ETH，转账代币
2. 编写调试代码
可连接hardhat node本地网络和sepolia测试网络
vscode创建React项目
npx create-react-app metamask 安装web3.js
npm install web3 导入合约编译后的abi.json
js代码
import ABI from './abi.json'; import Web3 from 'web3'; import { useState } from 'react';functionApp(){ const [account1, setAccount1]=useState(''); const [web3, setWeb3]=useState(null); const [contract, setContract]=useState(null); const [balance1_before, setBalance1_before]=useState(0); const [balance2_before, setBalance2_before]=useState(0); const [balance1_after, setBalance1_after]=useState(0); const [balance2_after, setBalance2_after]=useState(0); const [name, setName]=useState(0); const hardhat_contractAddress ="0x5FbDB2315678afecb367f032d93F642f64180aa3"; const sepolia_contractAddress ='0x451Dc02Cee616361815253C858Df0a3028c42901'; const contractAddress = sepolia_contractAddress; const account2 ="0xE78Ff27498c9a6Fd8BC3ff8170Ecf9a13ECBE49e"; const valueMTK =100*10**18; const loadAccount = async ()=>{// metamask是否已安装if(!window.ethereum)alert("Please install MetaMask to use this dApp!");// metamsk中的账户 const accounts = await window.ethereum.request({ method:'eth_requestAccounts'});setAccount1(accounts[0]);// 连接metamask const web3 =newWeb3(window.ethereum);setWeb3(web3);// 实例化合约 const contract = await newweb3.eth.Contract(ABI, contractAddress);setContract(contract);} const Name = async ()=>{setName(await contract.methods.name().call());} const Balance_Before = async ()=>{setBalance1_before(await contract.methods.balanceOf(account1).call());setBalance2_before(await contract.methods.balanceOf(account2).call());} const Balance_After = async ()=>{setBalance1_after(await contract.methods.balanceOf(account1).call());setBalance2_after(await contract.methods.balanceOf(account2).call());} const Transfer = async ()=>{ await contract.methods.transfer(account2, valueMTK).send({ from: account1 });}return(<div><h1>Your Ethereum Account</h1><button onClick={loadAccount}>Load Account</button><p>{account1}</p><p>{account2}</p><button onClick={Name}>Name</button><p>token:{name}</p><button onClick={Balance_Before}>Balance</button><p>balance:{balance1_before}</p><p>balance:{balance2_before}</p><button onClick={Transfer}>Transfer</button><p></p><button onClick={Balance_After}>Balance</button><p>balance:{balance1_after}</p><p>balance:{balance2_after}</p></div>);} export default App;3. 测试
3.1 MetaMask连接hardhat node
const contractAddress = hardhat_contractAddress;
可以看到Account1账户在合约中的余额是0
3.2 MetaMask连接sepolia
const contractAddress = sepolia_contractAddress;
点击Transfer，Metamask确认
转账100MTK.
可以看到Account1账户在合约中的余额是681，Account2是289
