Get address and blockchain switch

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>Transfer to a wallet</h2> 
        <button id="sendBtn">send</ button> 
        <hr></hr> 
        <h2>Network and address switch trigger event</h2> 
        <h5> current network: <span class="showAccount" id="currentNetwork"></span></h5> 
        < h5> current address: <span class="showAccount" id="currentAddress"></span></h5> 
        <hr> 
        <h2>Get wallet balance</h2> 
        <h5> 
            <button id="balanceBtn"> Get wallet balance</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{ 
                // connect Can be obtained 
               // const accounts = await ethereum.request({method:'eth_requestAccounts'}); 
                //Permission after login 
                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); 
    balanceBtn.onclick = async ()=>{
            })
        }catch (e) {
            console.error(e) 
        } 
    } 

    // Monitor address changes 
    ethereum.on('accountsChanged', function (accounts) { 
        console.info("Address changed"); 
        currentAddress.innerHTML = accounts; 
    }) 
    // Monitor chain changes 
    ethereum.on('chainChanged', function (network) { 
        console.info("Chain changed"); 
        currentNetwork.innerHTML = network; 
    }) 
    // Get wallet balance 
        console.info("Get wallet balance") 
        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>