【区块链】JavaScript连接web3钱包，实现测试网络中的 Sepolia ETH余额查询、转账功能

百色彭于晏

已于 2024-07-27 18:48:47 修改

阅读量878

点赞数 2

分类专栏：区块链文章标签：区块链 javascript 开发语言 web3 以太坊 ETH

于 2024-07-27 15:59:49 首次发布

本文链接：https://blog.csdn.net/yvge669/article/details/140736590

版权

审核看清楚了！这是以太坊测试网络！用于学习的测试网络！！！有关web3 和区块链的内容为什么要给我审核不通过？别人凭什么可以发！

目标成果：

实现功能分析：

显示账户信息，地址、chainID、网络ID、余额
实现转账功能

需要准备的事情：

一个有sepolia ETH余额的web3账户，没有可以找水龙头领取或者某鱼购买
浏览器插件安装了 MetaMask钱包插件（小狐狸钱包）
准备一个web容器，我这边使用的是nginx

操作环节：

先写出网页大概的内容布局；

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js连接web3钱包</title>
  </head>
  <body>
    <div>
      <div><h3>详情信息</h3></div>

      <div>
          <div>
            <label>账户地址：<span></span></label>
          </div>
          <div>
            <label>ChainID：<span></span></label>
          </div>
          <div>
            <label>网络ID：<span></span></label>
          </div>
          <div>
            <label>余额：<span></span></label>
          </div>
      </div>

      <div>
        <button>转账</button>
      </div>
    </div>


    <div>
      <label>对手地址<input type="text"></label>
      <br>
      <label>ETH数量<input type="text"></label>
      <br>
      <button>确定</button>
      <button>取消</button>
    </div>



  </body>
</html>

接下来是写js部分

把大概的框架都写出来:

//判断浏览器是否具备MetaMask环境
      const initialize = async ()=>{
   
        if(!isMetaMaskInstalled()){
   
          //如果没安装弹出窗口
          alert("请先安装 MetaMask");
        }else{
   
          await getNetwork(); //获取网络
          await getChainId(); //获取链
          await getAccount(); //获取账户地址
          await getBalance(); //获取余额
        }
      }

在上面这个initialize()方法中,里面我们调用了5个方法,每个方法都有其各自的作用.

方法	作用
isMetaMaskInstalled()	用来判断浏览器是否安装了MetaMask钱包
getNetwork()	获取网络号
getChainId()	获取链ID
getAccount()	获取账户地址
getBalance()	获取账户余额

现在开始着手写这几个方法

判断是否安装

      const isMetaMaskInstalled = () => {
        const { ethereum } = window;
        return Boolean(ethereum && ethereum.isMetaMask);
      }

获取网络号然然后渲染到html页面上

html部分要要加上对应的id进行innerHTML

<div>
            <label>账户地址：<span id="accountSpan"></span></label>
          </div>
          <div>
            <label>ChainID：<span id="ChainIdSpan"></span></label>
          </div>
          <div>
            <label>网络ID：<span id="NetworkSpan"></span></label>
          </div>
          <div>
            <label>余额：<span id="BalanceSpan"></span></label>
          </div>

js部分

 const getNetwork = async () => {
        try {
          const networkId = await ethereum.request({ method: 'net_version' });
          NetworkSpan.innerHTML = networkId;
        } catch (error) {
          console.error(error);
        }
      }

      const getChainId = async () => {
        try {
          const chainId = await ethereum.request({ method: 'eth_chainId' });
          ChainIdSpan.innerHTML = chainId;
        } catch (error) {
          console.error(error);
        }
      }


      const getAccount = async () => {
        try {
          const accounts = await ethereum.request({ method: 'eth_requestAccounts' });//调用这个方法会弹出MetaMask的一个授权窗口
          accountSpan.innerHTML = accounts[0]; // 显示连接第一个账户
        } catch (error) {
          console.error(error);
        }
      }

      const getBalance = async () => {
        const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
        const balance = await ethereum.request({
          method: 'eth_getBalance',
          params: [accounts[0], 'latest']
        });
        userBalance = parseInt(balance, 16);
        const ethBalance = Web3.utils.fromWei(balance, 'ether');//这里要引入一个web3.js文件
        BalanceSpan.innerHTML = `${ethBalance} ETH`;
      }
      
      window.addEventListener('DOMContentLoaded', initialize);//进入网页后自动调用initialize方法,不调用就无法查询和渲染页面

还要引入一个web3.js用于单位转换(其实我们也可以自己计算)

    <script src="https://cdn.jsdelivr.net/npm/web3@1.6.0/dist/web3.min.js"></script>

现在已经完成显示账户信息的功能了!

接下来我们要实现我们的转账功能.，代码如下（还没有美化的版本）

     <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js连接web3钱包</title>
    <style>
      #transferModal {
     
        display: none;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <div>
      <div><h3>详情信息</h3></div>
      <div>
        <div>
          <label>账户地址：<span id="accountSpan"></span></label>
        </div>
        <div>
          <label>ChainID：<span id="ChainIdSpan"></span></label>
        </div>
        <div>
          <label>网络ID：<span id="NetworkSpan"></span></label>
        </div>
        <div>
          <label>余额：<span id="BalanceSpan"></span></label>
        </div>
      </div>
      <div>
        <button id="sendButton">转账</button>
      </div>
    </div>

    <div id="transferModal">
      <label>对手地址<input type="text" id="recipientAddress"></label>
      <br>
      <label>ETH数量<input type="text" id="ethAmount" required min="0" step="0.0001"></label>
      <br>
      <button id="confirmTransferButton" type="submit">确定</button>
      <button id="cancelTransferButton">取消</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/web3@1.6.0/dist/web3.min.js"></script>
    <script>