获取地址和区块链切换

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<div class="container">
    <nav class="navbar navbar-expand-sm bg-light">

    </nav>

    <div class="container-fluid mt-3">
        <H2>获取钱包地址信息</H2>
        <h5> Account: <span class="showAccount" id="accountsSpan"></span></h5>
        <h5> Network: <span class="showAccount" id="networkSpan"></span></h5>
        <h5> ChainId: <span class="showAccount" id="chainIdSpan"></span></h5>
        <hr></hr>
        <h2>给某个钱包进行转帐</h2>
        <button id="sendBtn">send</button>
        <hr></hr>
        <h2>网络 和 地址切换 触发事件</h2>
        <h5> current network: <span class="showAccount" id="currentNetwork"></span></h5>
        <h5> current address: <span class="showAccount" id="currentAddress"></span></h5>
        <hr>
        <h2>获取钱包余额</h2>
        <h5>
            <button id="balanceBtn">获取钱包余额</button>
            <span class="showAccount" id="balanceSpan"></span>
        </h5>

    </div>
</div>
<script>

    const initialize = async ()=>{

        const isMetaMaskInstalled = ()=>{
            const { ethereum } = window;

            if (typeof ethereum === 'undefined'){
                return false;
            }
            return Boolean(ethereum && ethereum.isMetaMask);
        }

        const getAccount = async ()=>{
            try{
                // 连接就可以获取
               // const accounts = await ethereum.request({method:'eth_requestAccounts'});
                // 登陆之后的权限
                const accounts = await ethereum.request({method:'eth_accounts'});

                accountsSpan.innerHTML = accounts;
            }catch (e) {
                console.error(e)
            }
        }

        const getNetworkAndChainId = async ()=>{
            try {
                const chainId = await  ethereum.request({method:'eth_chainId'});
                chainIdSpan.innerHTML =  chainId;
                const networkId = await  ethereum.request({method:'net_version'});
                networkSpan.innerHTML = networkId;
            }catch (e) {
                console.error(e);
            }
        }
        const checkMetaMaskClient = async ()=>{
            if (!isMetaMaskInstalled()){
                alert("please install metaMask");
            }else {
                getNetworkAndChainId();
                getAccount();
            }
        }
        checkMetaMaskClient();

    }

    sendBtn.onclick = async () => {
        try {
            const  accounts = await  ethereum.request({method:'eth_requestAccounts'});

            // 初始化 web3
            web3 = new Web3(web3.currentProvider);
            if (web3.currentProvider.isMetaMask == true) {
                console.info("MetaMask可用")
            } else {
                console.info("非MetaMask环境")
            }

            web3.eth.sendTransaction({
                from:accounts[0],
                to:'0x4CCbD5D055fAd49d9278a6c43F1d27b9537737b5',
                value: 100000000000000000,
                gas: 21000,
                gasPrice: 20000000000
            },(result) =>{
                console.log(result);
            })
        }catch (e) {
            console.error(e)
        }
    }

    // 监听 地址变化
    ethereum.on('accountsChanged',function (accounts) {
        console.info("地址发生变化");
        currentAddress.innerHTML = accounts;
    })
    // 监听 链变化
    ethereum.on('chainChanged',function (network) {
        console.info("链 发生变化");
        currentNetwork.innerHTML = network;
    })
    //  获取钱包余额
    balanceBtn.onclick = async ()=>{
        console.info("获取钱包余额")
        ethereum.request({
            method:'eth_getBalance',
            params:['0xA07843c563544941ACA9a2c0BB3361cdAB6601Fd','latest']
        }).then((result) =>{
            console.info("result:",result)
            console.info("result1:",parseInt(result, 16)/1000000000000000000)
            balanceSpan.innerHTML = parseInt(result, 16)/1000000000000000000 + "eth";
        }).catch(e =>{
            console.error(e)
        })
    }
    window.addEventListener("DOMContentLoaded",initialize);

</script>