16. web3.js结合Metemask调用合约方法

测试Solidity ERC20合约 - web3.js结合Metemask调用合约方法

[1. 环境配置和合约代码](#1. 环境配置和合约代码)
[2. 编写调试代码](#2. 编写调试代码)
[3. 测试](#3. 测试)
- [3.1 MetaMask连接hardhat node](#3.1 MetaMask连接hardhat node)
- [3.2 MetaMask连接sepolia](#3.2 MetaMask连接sepolia)

系列文章

1. Remix编写、编译、部署、测试Solidity ERC20合约 - 基础篇
 2. Remix编写、编译、部署、测试Solidity ERC20合约 - 进阶篇
 3. Hardhat编写、编译、部署、测试Solidity ERC20合约 - 基础篇
 4. web3.js调用合约方法
 5. web3.js调用区块链方法
 6. web3.js给合约账户同时转以太币和代币
 7. JSON-RPC调用合约方法
 8. JSON-RPC调用区块链方法
 9. JSON-RPC给合约账户同时转以太币和代币
 10. sepolia测试网
 11. Hardhat编写、编译、部署、测试Solidity ERC20合约 - 总结
 12. Go-Ethereum调用区块链方法
 13. Go-Ethereum调用合约方法
 14. Metamask导入代币，转账ETH，转账代币 - 界面操作
 15. Metamask导入代币，转账ETH，转账代币 - 界面显示
 16. web3.js结合Metemask调用合约方法

1. 环境配置和合约代码

参考文章12. Hardhat编写、编译、部署、测试Solidity ERC20合约 - 进阶篇 - Metamask导入代币，转账ETH，转账代币

2. 编写调试代码

可连接hardhat node本地网络和sepolia测试网络

vscode创建React项目

clike 复制代码

npx create-react-app metamask

安装web3.js

clike 复制代码

npm install web3

导入合约编译后的abi.json

js代码

clike 复制代码

import ABI from './abi.json';
import Web3 from 'web3';
import { useState } from 'react';

function App() {

    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 = new Web3(window.ethereum);
        setWeb3(web3);

        // 实例化合约
        const contract = await new web3.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

clike 复制代码

const contractAddress = hardhat_contractAddress;

可以看到Account1账户在合约中的余额是0

3.2 MetaMask连接sepolia

clike 复制代码

const contractAddress = sepolia_contractAddress;

点击Transfer，Metamask确认

转账100MTK.

可以看到Account1账户在合约中的余额是681，Account2是289

系列文章

web3.0-以太坊编程基础