AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-08-15 40
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【区块链】JavaScript连接web3钱包，实现测试网络中的 Sepolia ETH余额查询、转账功能

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

目标成果：

实现功能分析：

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

需要准备的事情：

  1. 一个有sepolia ETH余额的web3账户，没有可以找水龙头领取或者某鱼购买
  2. 浏览器插件安装了 MetaMask钱包插件（小狐狸钱包）
  3. 准备一个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>
      //判断浏览器是否具备MetaMask环境
      const initialize = async () => {
        if (!isMetaMaskInstalled()) {
          //如果没安装弹出窗口
          alert("请先安装 MetaMask");
        } else {
          await getNetwork(); //获取网络
          await getChainId(); //获取链
          await getAccount(); //获取账户地址
          await getBalance(); //获取余额
        }
      }
      //判断是否安装
      const isMetaMaskInstalled = () => {
        const { ethereum } = window;
        return Boolean(ethereum && ethereum.isMetaMask);
      }
      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`;
      }
      //获取最新的gas prices
      const getGasPrice = async () => {
        const web3 = new Web3(Web3.givenProvider);
        const gasPrice = await web3.eth.getGasPrice();
        console.log('Current gas prices => ' + gasPrice);
        return gasPrice;
      }
      // 显示和隐藏转账模态窗口
      const sendButton = document.getElementById('sendButton');
      const transferModal = document.getElementById('transferModal');
      const confirmTransferButton = document.getElementById('confirmTransferButton');
      const cancelTransferButton = document.getElementById('cancelTransferButton');
      sendButton.addEventListener('click', () => {
        transferModal.style.display = 'block';
      });
      cancelTransferButton.addEventListener('click', () => {
        transferModal.style.display = 'none';
      });
      // 处理转账逻辑
      confirmTransferButton.addEventListener('click', async () => {
        const recipientAddress = document.getElementById('recipientAddress').value;
        const ethAmount = document.getElementById('ethAmount').value;
        if (!recipientAddress || !ethAmount) {
          alert('请填写所有字段');
          return;
        }
        try {
          const web3 = new Web3(Web3.givenProvider);
          const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
          const senderAddress = accounts[0];
          const transactionParameters = {
            to: recipientAddress,
            from: senderAddress,
            value: web3.utils.toHex(web3.utils.toWei(ethAmount, 'ether')),
            gasPrice: await getGasPrice(),
            gas: '21000', // 默认的gas limit
          };
          await ethereum.request({
            method: 'eth_sendTransaction',
            params: [transactionParameters],
          });
          alert('转账成功');
          transferModal.style.display = 'none';
          await getBalance(); // 更新余额
        } catch (error) {
          console.error(error);
          alert('转账失败');
        }
      });
      // 切换账户的时候触发
      ethereum.on('accountsChanged', function (accounts) {
        console.log('账户已切换');
        window.location.reload();
      });
      // 切换网络的时候触发
      ethereum.on('chainChanged', function (accounts) {
        console.log('网络已切换');
        window.location.reload();
      });
      window.addEventListener('DOMContentLoaded', initialize);
    </script>
  </body>
</html>

结果:

这样就可以完成转账功能了!

美化 二选一 bootstrap or layui.

  • 使用bootstrap 美化一下

code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web3 钱包</title>    
    <link rel="icon" href="http://u5a.cn/uftiP" type="image/x-icon"></link>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.6.0/css/brands.min.css" rel="stylesheet">
    <style>
      body {
        background-color: #f8f9fa;
      }
      .wallet-info {
        margin-top: 20px;
      }
      .wallet-info label {
        font-weight: bold;
      }
      .wallet-info span {
        font-style: italic;
      }
      .navbar-brand {
        font-weight: bold;
      }
      .copy-icon {
        cursor: pointer;
        margin-left: 10px;
        color: #007bff;
      }
      .copy-icon:hover {
        color: #0056b3;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm navbar-light bg-light">
      <div class="container-fluid">
        <span class="navbar-brand">币圈老韭菜</span>
      </div>
    </nav>
    <div class="container wallet-info">
      <div>
        <h3>详情信息</h3>
      </div>
      <div>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label>账户地址：</label>
            <span id="accountSpan"></span>
            <i class="fas fa-copy copy-icon" onclick="copyAddress()"></i>
          </div>
          <div class="col-md-6 mb-3">
            <label>Chain：</label>
            <span id="NetworkSpan"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label>链ID：</label>
            <span id="ChainIdSpan"></span>
          </div>
          <div class="col-md-6 mb-3">
            <label>余额：</label>
            <span id="BalanceSpan"></span>
          </div>
        </div>
      </div>
      <div>
        <button class="btn btn-primary" id="sendButton">转账</button>
      </div>
    </div>
    <!-- 转账表单模态框 -->
    <div class="modal fade" id="transferModal" tabindex="-1" aria-labelledby="transferModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="transferModalLabel">转账</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="transferForm">
              <div class="mb-3">
                <label for="recipientAddress" class="form-label">转账地址</label>
                <input type="text" class="form-control" id="recipientAddress" required>
              </div>
              <div class="mb-3">
                <label for="ethAmount" class="form-label">ETH 数量</label>
                <input type="number" class="form-control" id="ethAmount" required min="0" step="0.0001">
              </div>
              <button type="submit" class="btn btn-primary">确定转账</button>
            </form>
          </div>
        </div>
      </div>
    </div>
   
    <script src="https://cdn.jsdelivr.net/npm/web3@1.6.0/dist/web3.min.js"></script>
    <script>
      let userBalance = 0;
      // 初始化
      const initialize = () => {
        checkMetaMaskClient();
      }
      // 如果安装了小狐狸才可以获取信息
      const checkMetaMaskClient = async () => {
        if (!isMetaMaskInstalled()) {
          alert("请安装 MetaMask");
        } else {
          await getNetworkAndChainId(); // 获取网络ID
          await getAccount(); // 使用 eth_requestAccounts 获取账户
          await getBalance(); // 使用 eth_getBalance 获取余额
        }
      }
      // 验证是不是安装了
      const isMetaMaskInstalled = () => {
        const { ethereum } = window;
        return Boolean(ethereum && ethereum.isMetaMask);
      }
      const getAccount = async () => {
        try {
          const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
          accountSpan.innerHTML = accounts[0]; // 显示第一个账户
        } catch (error) {
          console.error(error);
        }
      }
      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 (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');
        BalanceSpan.innerHTML = `${ethBalance} ETH`;
      }
      const getGasPrice = async () => {
        const web3 = new Web3(Web3.givenProvider);
        const gasPrice = await web3.eth.getGasPrice();
        console.log('Current gas prices =>'+gasPrice);
        return gasPrice;
      }
      // 事件触发
      // 点击转账按钮的时候触发
      document.getElementById('sendButton').onclick = () => {
        // 打开模态框
        new bootstrap.Modal(document.getElementById('transferModal')).show();
      }
      // 提交转账表单
      document.getElementById('transferForm').onsubmit = async (e) => {
        e.preventDefault();
        const recipientAddress = document.getElementById('recipientAddress').value;
        const ethAmount = parseFloat(document.getElementById('ethAmount').value);
        const weiAmount = Web3.utils.toWei(ethAmount.toString(), 'ether');
        if (weiAmount <= 0) {
          alert('ETH 数量必须大于 0');
          return;
        }
        if (weiAmount > userBalance) {
          alert('余额不足');
          return;
        }
        const gasPrice = await getGasPrice();
        const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
        const params = [{
          from: accounts[0],
          to: recipientAddress,
          value: Web3.utils.toHex(weiAmount),
          gas: '0x5208', // 21000 gas 的十六进制
          gasPrice: Web3.utils.toHex(gasPrice), // 当前网络 gas price
        }];
        try {
          await ethereum.request({
            method: 'eth_sendTransaction',
            params: params,
          });
          alert('转账成功');
        } catch (error) {
          console.error(error);
          alert('转账失败');
        }
      }
      // 一键复制地址功能
      const copyAddress = () => {
        const address = document.getElementById('accountSpan').textContent;
        navigator.clipboard.writeText(address).then(() => {
          alert('地址已复制');
        }).catch(err => {
          console.error('无法复制地址', err);
        });
      }
      // 切换账户的时候触发
      ethereum.on('accountsChanged', function (accounts) {
        console.log('账户已切换');
        window.location.reload();
      });
      // 切换网络的时候触发
      ethereum.on('chainChanged', function (accounts) {
        console.log('网络已切换');
        window.location.reload();
      });
      window.addEventListener('DOMContentLoaded', initialize);
    </script>
    <script src="https://cdn.staticfile.net/popper.js/2.11.8/umd/popper.min.js"></script> 
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.net/font-awesome/6.5.1/js/all.min.js"></script>
  </body>
</html>
  • 使用layui美化的效果 (感觉做的还是太丑了)

code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js连接web3钱包</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/layui/2.9.4/css/layui.min.css" rel="stylesheet">
    <style>
      body {
        font-size: 16px;
      }
      .layui-container {
        margin-top: 20px;
      }
      .layui-col-md4 {
        padding: 10px 0;
      }
      #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);
        font-size: 16px;
      }
      .layui-form-label {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="layui-container">
      <div><h3>详情信息</h3></div>
      <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
          <label>账户地址：<span id="accountSpan" class="layui-badge"></span></label>
        </div>
        <div class="layui-col-md6">
          <label>ChainID：<span id="ChainIdSpan" class="layui-badge layui-bg-blue"></span></label>
        </div>
        <div class="layui-col-md6">
          <label>网络ID：<span id="NetworkSpan" class="layui-badge layui-bg-green"></span></label>
        </div>
        <div class="layui-col-md6">
          <label>余额：<span id="BalanceSpan" class="layui-badge layui-bg-orange"></span></label>
        </div>
      </div>
      <div>
        <button id="sendButton" class="layui-btn layui-btn-normal">转账</button>
      </div>
    </div>
    <div id="transferModal" class="layui-card">
      <div class="layui-card-header">转账</div>
      <div class="layui-card-body">
        <div class="layui-form-item">
          <label class="layui-form-label">对手地址</label>
          <div class="layui-input-block">
            <input type="text" id="recipientAddress" class="layui-input" required>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">ETH数量</label>
          <div class="layui-input-block">
            <input type="text" id="ethAmount" class="layui-input" required min="0" step="0.0001">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button id="confirmTransferButton" class="layui-btn" type="submit">确定</button>
            <button id="cancelTransferButton" class="layui-btn layui-btn-primary">取消</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.staticfile.net/layui/2.9.4/layui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/web3@1.6.0/dist/web3.min.js"></script>
    <script>
      layui.use(['layer', 'form'], function(){
        const layer = layui.layer;
        const form = layui.form;
        //判断浏览器是否具备MetaMask环境
        const initialize = async () => {
          if (!isMetaMaskInstalled()) {
            //如果没安装弹出窗口
            layer.alert("请先安装 MetaMask");
          } else {
            await getNetwork(); //获取网络
            await getChainId(); //获取链
            await getAccount(); //获取账户地址
            await getBalance(); //获取余额
          }
        }
        //判断是否安装
        const isMetaMaskInstalled = () => {
          const { ethereum } = window;
          return Boolean(ethereum && ethereum.isMetaMask);
        }
        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`;
        }
        //获取最新的gas prices
        const getGasPrice = async () => {
          const web3 = new Web3(Web3.givenProvider);
          const gasPrice = await web3.eth.getGasPrice();
          console.log('Current gas prices => ' + gasPrice);
          return gasPrice;
        }
        // 显示和隐藏转账模态窗口
        const sendButton = document.getElementById('sendButton');
        const transferModal = document.getElementById('transferModal');
        const confirmTransferButton = document.getElementById('confirmTransferButton');
        const cancelTransferButton = document.getElementById('cancelTransferButton');
        sendButton.addEventListener('click', () => {
          transferModal.style.display = 'block';
        });
        cancelTransferButton.addEventListener('click', () => {
          transferModal.style.display = 'none';
        });
        // 处理转账逻辑
        confirmTransferButton.addEventListener('click', async () => {
          const recipientAddress = document.getElementById('recipientAddress').value;
          const ethAmount = document.getElementById('ethAmount').value;
          if (!recipientAddress || !ethAmount) {
            layer.alert('请填写所有字段');
            return;
          }
          try {
            const web3 = new Web3(Web3.givenProvider);
            const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
            const senderAddress = accounts[0];
            const transactionParameters = {
              to: recipientAddress,
              from: senderAddress,
              value: web3.utils.toHex(web3.utils.toWei(ethAmount, 'ether')),
              gasPrice: await getGasPrice(),
              gas: '21000', // 默认的gas limit
            };
            await ethereum.request({
              method: 'eth_sendTransaction',
              params: [transactionParameters],
            });
            layer.alert('转账成功');
            transferModal.style.display = 'none';
            await getBalance(); // 更新余额
          } catch (error) {
            console.error(error);
            layer.alert('转账失败');
          }
        });
        // 切换账户的时候触发
        ethereum.on('accountsChanged', function (accounts) {
          console.log('账户已切换');
          window.location.reload();
        });
        // 切换网络的时候触发
        ethereum.on('chainChanged', function (accounts) {
          console.log('网络已切换');
          window.location.reload();
        });
        window.addEventListener('DOMContentLoaded', initialize);
      });
    </script>
  </body>
</html>

展望:

后续还会添加切换账户\网络\加入代币\选择转账的币种\转账的历史记录

小结:

关于gas

  1. Gas Price（Gas 价格）：
  • 表示为 gwei（1 gwei = 10^-9 ETH）,wei是以太坊的最小单位。
  • 用户可以设定他们愿意支付的 gas 价格。Gas 价格越高，交易被矿工处理的速度可能越快，因为矿工更倾向于处理 gas 价格较高的交易以获得更多的报酬。
  1. Gas Limit（Gas 限额）：
  • 用户愿意为一个特定交易支付的最大 gas 数量。
  • 防止意外消耗过多的 gas 资源。
  1. Transaction Fee（交易费用）：
  • 计算方式：Gas Price * Gas Used。
  • 例如，如果 gas 价格是 20 gwei，并且交易消耗了 21,000 gas，那么交易费用将是 20 gwei * 21,000 = 420,000 gwei，大约等于 0.00042 ETH。

Gas 的作用

  1. 防止滥用：
  • 每个操作都需要支付 gas，防止用户随意发起大量计算资源消耗的操作，确保网络的安全性和稳定性。
  1. 奖励矿工：
  • 矿工通过处理交易获得 gas 费用作为奖励，激励他们维护网络。
  1. 确保执行：
  • 确保用户为执行智能合约或其他操作付费，智能合约的复杂度越高，所需的 gas 就越多。

功能描述

1. MetaMask 环境检测
  • 功能：检查浏览器是否安装了 MetaMask 插件。
  • 实现：通过 isMetaMaskInstalled 函数检测 ethereum 对象及其 isMetaMask 属性。
2. 获取网络信息
  • 功能：获取并显示当前网络的 Network ID 和 Chain ID。
  • 实现：通过调用 MetaMask 提供的 ethereum.request({ method: 'net_version' }) 和 ethereum.request({ method: 'eth_chainId' }) 获取 Network ID 和 Chain ID。
3. 获取账户信息
  • 功能：获取并显示连接的以太坊账户地址。
  • 实现：通过调用 MetaMask 提供的 ethereum.request({ method: 'eth_requestAccounts' }) 获取账户地址，并显示在页面上。
4. 获取账户余额
  • 功能：获取并显示当前账户的 ETH 余额。
  • 实现：通过调用 MetaMask 提供的 ethereum.request({ method: 'eth_getBalance', params: [accounts[0], 'latest'] }) 获取余额，并转换为 ETH 后显示在页面上。
5. 转账功能
  • 功能：用户可以通过输入对手地址和 ETH 数量来进行转账操作。
  • 实现：
  • 提供一个按钮用于显示转账模态窗口。
  • 模态窗口中有输入框用于输入对手地址和转账数量。
  • 点击确定按钮后，调用 MetaMask 提供的 ethereum.request({ method: 'eth_sendTransaction', params: [transactionParameters] }) 完成转账。
6. 实时更新
  • 功能：当账户或网络发生变化时，页面会自动刷新。
  • 实现：通过 ethereum.on('accountsChanged') 和 ethereum.on('chainChanged') 事件监听账户和网络变化，并刷新页面以更新显示的信息。
文章标签：
CDN
JavaScript
前端开发
区块链
应用服务中间件
nginx
关键词：
web测试
JavaScript连接
web网络
网络功能
JavaScript Web
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
百色彭于晏
目录
相关文章
奔跑的数据
|
16天前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法：如何在Node.js中实现复杂的Web Scraping
随着互联网的发展，网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具，可在Node.js环境中模拟用户行为，高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能，通过设置代理IP、User-Agent和Cookies等技术，实现复杂的Web Scraping任务，并提供示例代码，展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数，开发者可以有效规避目标网站的反爬机制，提升数据抓取效率。
奔跑的数据
59 4
Puppeteer的高级用法：如何在Node.js中实现复杂的Web Scraping
1288912195458132
|
20天前
HDFS web Interfaces功能解读
HDFS web Interfaces功能解读
1288912195458132
30 2
土木林森
|
19天前
|
JavaScript 前端开发 开发者
哇塞！Vue.js 与 Web Components 携手，掀起前端组件复用风暴，震撼你的开发世界！
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发，单个组件包含模板、脚本和样式，方便构建复杂用户界面。Web Components作为新兴技术标准，利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素，实现跨框架复用。结合二者，不仅增强了Web Components的逻辑和交互功能，还实现了Vue.js组件在不同框架中的复用，提高了开发效率和可维护性。未来前端开发中，这种结合将大有可为。
土木林森
61 0
请看我回答~
|
19天前
|
存储 JavaScript NoSQL
构建高效Web应用：使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例，我们将展示如何创建一个简单的API服务，并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者，这篇文章都将为你提供有价值的见解。
请看我回答~
29 0
顾翔
|
6天前
|
JSON 移动开发 监控
快速上手｜HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口，通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接，包括请求与响应模式。请求由请求行、消息报头和请求正文组成，响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等，而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口，并通过断言机制比对实际与预期结果，确保功能正确性。
顾翔
27 3
快速上手｜HTTP 接口功能自动化测试
游客zi3qmblbcdexu
|
7天前
|
SQL JavaScript 数据库
sqlite在Windows环境下安装、使用、node.js连接
sqlite在Windows环境下安装、使用、node.js连接
游客zi3qmblbcdexu
35 12
请看我回答~
|
18天前
|
测试技术 API 开发者
Python 魔法：打造你的第一个天气查询小工具自动化测试框架的构建与实践
【8月更文挑战第31天】在这篇文章中，我们将一起踏上编程的奇妙旅程。想象一下，只需几行代码，就能让计算机告诉你明天是否要带伞。是的，你没有听错，我们将用Python这把钥匙，解锁天气预报的秘密。不论你是编程新手还是想拓展技能的老手，这篇文章都会为你带来新的视角和灵感。所以，拿起你的键盘，让我们一起创造属于自己的天气小工具吧！
请看我回答~
25 1
请看我回答~
|
19天前
|
敏捷开发 测试技术 持续交付
软件测试中的自动化策略与实践云计算时代的网络安全挑战与对策
【8月更文挑战第30天】在软件开发的海洋中，自动化测试是一艘能够带领团队高效航行的帆船。本文将探讨如何搭建这艘帆船，从选择适合的自动化测试框架开始，到编写有效的测试脚本，再到持续集成的实施和测试结果的分析，我们将一步步揭开自动化测试的神秘面纱。你将学习到如何通过自动化测试来提升软件质量和开发效率，以及如何克服实施过程中的挑战。让我们一起启航，探索自动化测试的世界。
请看我回答~
16 0
土木林森
|
18天前
|
Java 数据库连接 数据库
从零到精通：揭秘 Hibernate 构建持久层服务的全过程，你离数据持久化大师还有多远？
【8月更文挑战第31天】本文详细介绍了如何从零开始使用 Hibernate 构建一个持久层服务。首先，通过在 Maven 项目中添加必要的依赖，确保项目具备使用 Hibernate 的条件。接着，配置 `hibernate.cfg.xml` 文件以连接 MySQL 数据库，并设置了基本属性。然后定义了一个简单的 `User` 实体类及其映射关系。此外，还创建了一个 `HibernateUtil` 工具类来管理 `SessionFactory`。
土木林森
28 0
土木林森
|
18天前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器！揭秘你绝不能错过的插件和工具，让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架，让开发者通过单一共享代码库构建跨平台移动应用，支持 iOS、Android 和 Windows。使用 C# 和 XAML，它简化了多平台开发流程，保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境，然后创建并运行一个包含标题、按钮和消息标签的示例应用，展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms，提高跨平台应用开发效率。
土木林森
30 0

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    node.js16.13.0版本 对应node-sass sass-loader 可行版本号
  • 3
    【译】适用于Node.js和TypeScript的完整ORM —— Prisma
  • 4
    带你读《实用Bot开发指南：基于Node.js与Bot框架设计并构建聊天机器人》之三：语言理解智能服务
  • 5
    JavaScript的几种循环方式
  • 6
    javascript级联菜单，数据从数据库中获取
  • 7
    Js~对Boxy弹出框进行封装，提供弹出后自动隐藏与自动跳转功能
  • 8
    JavaScript arguments对象
  • 9
    Android与Javascript交互
  • 10
    读javascript高级程序设计14-错误处理与调试
  • 1
    这10款性能测试工具，收藏起来，测试人的工具箱！
    305
  • 2
    如何实现对iframe的自动化测试，一篇文章告诉你
    40
  • 3
    视觉智能平台常见问题之体验产品的美颜测试关掉如何解决
    54
  • 4
    Apache Flink官方网站提供了关于如何使用Docker进行Flink CDC测试的文档
    637
  • 5
    Kafka【付诸实践 03】Offset Explorer Kafka 的终极 UI 工具安装+简单上手+关键特性测试（一篇学会使用 Offset Explorer）
    688
  • 6
    P2P网络下分布式文件共享场景的测试
    267
  • 7
    Jest测试核心
    34
  • 8
    探索自动化测试在持续集成环境中的关键角色
    48
  • 9
    软件质量测试笔记-合工大
    148
  • 10
    模拟试错（STE）法让7B大模型测试超GPT-4
    109

    • 相关课程

    更多
  • Java Web开发系列课程 - Spring框架入门
  • 网络管理者必知-2分钟了解新出台的《网络安全法》
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来

    • 相关实验场景

    更多
  • Internet Information Services（IIS）部署Web项目
  • 快速上手并跑通AnalyticDB PostgreSQL版TPC-H测试
  • 云上Web及FTP
  • WEB网页编程实战
  • 灵活弹性的PolarDB Serverless确保数据业务持续在线
  • 使用阿里云容器服务和容器网络文件系统搭建WordPress网站
    • 下一篇
    基于LNMP搭建WordPress