如何ETH以太坊智能合约做一个简单的DAPP

目标：

1、使用etherjs

2、链接MetaMask钱包

3、查询链状态、账号状态、转账、调用合同读函数、调用合同写函数

环境：

1、kovan以太坊测试链上发布合约。合约地址：0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55eb

2、nodejs   lite-server web服务器测试。

3、安装Google chrome metamask钱包

智能合约代码：InfoContract.sol

// SPDX-License-Identifier: MIT
pragma solidity 0.8.7;

contract InfoContract {
    
    string public fName = "azq";
    uint public age= 47;
    
    function setInfo(string memory _fName,uint _age) public returns(bool){
        
        fName = _fName;
        age = _age;
        return true;
    }
    
    function getInfo() public view returns(string memory,uint){
        return(fName,age);
    }
}

代码实例：index.html

    
        
    
    
    
    


区块链查询

网络id:
ens地址:
网络名:
区块数:

    




查询区块链
查询账户余额

区块数：
账户余额：
格式化余额：


    





查询账户

获取当前账号
Account: 
获取当前账号

转账

    地址：
    金额：

确认转账

调用合同写函数

    姓名：
    年龄：

调用

调用kovan合同只读函数getinfo
kovan链合同地址
0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55eb
的getinfo函数返回值：
调用

js代码：myscript.js

function f1(){

    //document.getElementById("demo").innerHTML = "hahaha";

    //检测Metamask钱包
    if (typeof window.ethereum !== 'undefined') {
        console.log('MetaMask is installed!');
        //window.alert("MetaMask is installed!")
    }else{
        //window.alert("Please install MetaMask")
    }

    // if (ethereum.isMetaMask) {
    //     window.alert("MetaMask is installed2!")
    // }



    const ethereumButton = document.querySelector('.enableEthereumButton');
    const showAccount = document.querySelector('.showAccount');
    const showbutton = document.querySelector('.buttonclass');
    //const showbutton = document.querySelector('.buttonclass');

    showbutton.addEventListener('click', () => {
        //showbutton.innerHTML = "已经链接";
    });

    ethereumButton.addEventListener('click', () => {
        getAccount();
    });

    async function getAccount() {
        const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
        //const balance = await ethereum.request({method: 'eth_balance'});
        ethereum.on('accountsChanged', function (accounts) {
            // Time to reload your interface with accounts[0]!
            window.alert("log0");
          });
        const account = accounts[0];
        showAccount.innerHTML = account ;

    }


}