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

已于 2024-07-27 18:48:47 修改
阅读量55 收藏 1
点赞数
分类专栏： 区块链 文章标签： 区块链 javascript 开发语言 web3 以太坊 ETH
于 2024-07-27 15:59:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yvge669/article/details/140736590
版权

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

目标成果：

实现功能分析：

  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 价格较高的交易以获得更多的报酬。
  2. Gas Limit（Gas 限额）：
    • 用户愿意为一个特定交易支付的最大 gas 数量。
    • 防止意外消耗过多的 gas 资源。
  3. 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，防止用户随意发起大量计算资源消耗的操作，确保网络的安全性和稳定性。
  2. 奖励矿工：
    • 矿工通过处理交易获得 gas 费用作为奖励，激励他们维护网络。
  3. 确保执行：
    • 确保用户为执行智能合约或其他操作付费，智能合约的复杂度越高，所需的 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') 事件监听账户和网络变化，并刷新页面以更新显示的信息。
百色彭于晏
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Web3.js与以太坊交互
Mzxy_1的博客
05-06 754
Web3.js是以太坊官方提供的JavaScript库，用于与以太坊网络进行交互。通过Web3.js，我们可以轻松地在JavaScript中编写智能合约的交互逻辑，如创建新的合约实例、调用合约方法、监听合约事件等。本文将介绍如何使用Web3.js与以太坊进行交互。
【2】web3.js与合约交互
dwjpeng2的专栏
08-02 365
web3.js是以太坊提供的一个Javascript库，它封装了以太坊的JSON RPC API，提供了一系列与区块链交互的Javascript对象和函数，包括查看网络状态，查看本地账户、查看交易和区块、发送交易、编译/部署智能合约、调用智能合约等，其中最重要的就是与智能合约交互的API。 下面就介绍如何使用web3.js提供的接口调用智能合约。 系统和软件   Ubuntu 16...
了解区块链技术(Patrick Collins)(三)
weixin_62587318的博客
01-17 2264
data feed(喂价)：Chainlink节点通过去中心化网络从不同的交易所或者数据提供商获取数据，Chainlink节点使用中位数来计算资产的价格，然后在单个交易中将其传递给参考合约、喂价合约或者链上数据合约，这些合约上的数据能被其他只能合约使用。功能二：VRF，区块链是确定性系统，不具备随机性，我们需要通过区块链外部获取可验证的随机数，Chainlink可验证随机性函数是一种能将可证明的随机数放入智能合约中的方法，以保证公平性和应用程序的随机性。//使用Chainlink喂价获取定价信息。
【hardhat框架使用与常见编译部署的问题】
weixin_43773210的博客
07-29 3297
hardhat框架使用与常见编译部署问题
Solidity基础（详细易懂！！！）
m0_73094011的博客
02-21 2414
不拘泥于死板的语法基础知识，从实用性出发，通过多个实用性的智能合约的编写，由浅入深的介绍了有关于Solidity相关基础知识的用法，同时也是博主的区块链学习系列之一，感谢大家阅读！
Solidity一篇就够了
weixin_63443072的博客
05-30 685
ERC全称是 “”，表示以太坊的意见征求稿，ERC中包含技术和组织等注意事项及标准。这套标准其实不光由以太坊官方提出，还有一些以太坊爱好者提出。是以太坊生态系统中被广泛使用的关键标准。什么叫做代币？彩票卷像美元一样的法定货币在线平台中的信誉积分游戏中一个角色的技能一盎司黄金及更多…ERC-20 提出了一个同质化代币的标准，换句话说，它们具有一种属性，使得每个代币都与另一个代币（在类型和价值上）完全相同。
智能合约随想——一些简单的Solidity智能合约漏洞/攻击
weixin_73794026的博客
04-25 877
一个没啥干货的Solidity智能合约审计随想，外加一些杂七杂八的知识，大佬们轻点喷QAQ
基于Hardhat开发的web3公平抽奖系统
07-24
【作品名称】：基于Hardhat开发的web3公平抽奖系统 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：ock Chainlink VRF...
区块链革命：探索Web3如何重塑数字世界
dd8989089的博客
07-19 1281
Web3作为区块链技术的重要应用范式，以其去中心化、安全和可编程性质，正在深刻地改变着我们的数字世界。通过本文的介绍，希望读者能够深入理解Web3技术在重塑数字世界中的作用和潜力，为未来的技术创新和社会进步贡献智慧和力量。
2024第八届全国职工职业技能大赛“网络与信息安全管理员”赛项技术文件及任务书
最新发布
Aluxian_的博客
07-27 516
全国职工职业技能大赛网络与信息安全管理员赛项参赛对象为从事网络安全工作的职工。鉴于参赛选手日常工作的主要职责是保障信息系统安全稳定运行，大赛将从政策法规标准和网络安全风险评估、安全应急响应技术、数据安全、人工智能、国产信创等全方位考核从业职工的网络安全综合能力。
金融无风险套利：逆回购
financeppl的博客
07-23 456
在当今金融创新不断涌现的时代，逆回购作为一种无风险套利工具，逐渐走进了大众的视野。它不仅为投资者提供了一种新的理财方式，也为金融专业人士提供了一个研究和应用的新领域。本文将带领读者深入了解逆回购的基本概念、操作方式以及其在现代金融市场中的作用。逆回购，简单来说，是一种短期的借贷行为。投资者（逆回购方）将资金借给债券经纪人（正回购方），并在约定的时间内以稍高的价格卖回给经纪人，从而获得一定的利息收益。这种操作与支付宝推出的“余额宝”有异曲同工之妙，都提供了相对较高的年化收益率，且操作简便，风险较低。逆回购可以
区块链媒体：5种区块链媒体发布推广方法
li15929946878的博客
07-26 289
这种跨文化的交流不仅促进了社会的进步，还为各国合作提供了更多的机会。本文介绍的5种区块链媒体发布推广方法，包括发布新闻稿、撰写专栏或博客文章、参与线上社区讨论、举办线上/线下活动以及寻求合作或公关报道，可以帮助区块链项目吸引更多的关注和用户，提升项目的。加入各大区块链社交平台或论坛，如Reddit、Bitcointalk等，积极回答用户关于项目的问题，解答疑惑，与用户进行交流，可以建立起项目与用户之间的信任和亲近感。通过与合作伙伴和媒体的合作，将项目引入更广泛的视野，从而有机会获得更多的关注和认可。
数据隐私保护与区块链技术的结合：新兴趋势分析
weixin_44672358的博客
07-23 538
数据隐私保护指的是在数据收集、存储、处理和传输过程中，保护个人数据免受未经授权的访问和滥用。随着互联网的普及和数据驱动的发展，个人数据的泄露和滥用成为了一个严峻的挑战。传统的数据存储和管理方式往往依赖于集中式的数据中心，存在单点故障和数据被攻击的风险。数据隐私保护与区块链技术的结合，不仅仅是技术革新的体现，更是保护用户权益和数据安全的重要手段。随着区块链技术的不断发展和应用场景的拓展，相信在不久的将来，区块链将在数据隐私保护领域发挥越来越重要的作用。
【区块链+绿色低碳】雄韬智慧锂电储能管理系统 | FISCO BCOS应用案例
FISCO_BCOS的博客
07-26 142
系统采用了 FISCO BCOS 联盟链，融合了物联网、智能锂电、云计算、AI 等技术，一方面可以作为储能系统独立运营， 通过自动匹配与执行相关地区、区域的峰谷电价，智能执行分时策略，通过峰谷差价直接为用户创造经济效益； 另一方面，系统也可以作为新能源聚合商接入虚拟电厂，向上提供对聚合区域设备的调度和管理，参与电网需求响应市场。
以太坊的可扩展性危机：探索执行层的瓶颈
FeelTouch Labs
07-23 251
以太坊执行层承担着交易处理、智能合约执行以及保持一致和安全状态的维护等工作。Fuel Labs 撰文解析了以太坊执行层的工作原理，及其在可扩展性方面的发展瓶颈和影响。当全节点更新其账本副本以反映新的代币转移、智能合约代码更新和数据存储更改时，就会发生状态更改。执行层的主要功能包括：交易处理、智能合约执行以及状态管理。这可能是比单纯优化智能合约更大的障碍。：吞吐量直接指的是网络在给定时间内高效处理和管理大量交易的能力。：延迟是从提交交易到交易被确认并包含在区块链中所经过的时间。
ETH现货ETF流入量估算：会重演BTC现货ETF走势吗？
Lovely_xwys的博客
07-27 272
ETH流入ETH ETF → ETH价格上涨 → 对ETH的兴趣上升 → DeFi/链使用率上升 → DeFi基本指标改善 → EIP-1559销毁增加 → ETH供应量下降 → ETH价格上涨 → 更多ETH流入ETH ETF → 对ETH的兴趣上升。这种循环在BTC ETF中缺乏，ETH作为“去中心化的应用商店”，拥有完整的生态系统，将受益于基础资产的持续流入。ETH DeFi协议中有2000万ETH（630亿美元）的TVL，随着ETH交易的走高，ETH DeFi的投资吸引力也越来越大。
【区块链+绿色低碳】数字碳链 | FISCO BCOS应用案例
FISCO_BCOS的博客
07-26 291
深圳职业技术大学采用 FISCO BCOS 联盟链开源技术，推出数字碳链。
区块链技术如何重塑医疗健康行业未来？
北桥源木
07-27 350
总之，区块链技术在医疗领域的应用前景广阔，为医疗行业的数字化转型和高质量发展提供了有力支持。随着技术的不断发展和完善，相信区块链将在医疗领域发挥更大的作用。
智能合约在能源行业中的应用：促进可再生能源的发展与利用
Roun3的博客
07-26 251
智能合约作为区块链技术的重要应用之一，在能源行业中展现了广泛的应用前景和潜力。通过智能合约的自动化执行和区块链技术的安全保障，我们可以期待未来能源行业更加智能化、高效化和可持续发展的新局面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值