web3js连接测试网并完成交易

ps:有个需求是要等待确认交易。写这篇之后,我发现直接用回调函数要等好久好久好久。找到解决方案在这个链接但是有点麻烦。我已经弃用web3,直接使用ethersjs配合infura了,贼快。

本文将介绍如何使用web3js在Sepolia测试网完成一次交易,本文采用两种方式获得钱包,第一种是使用metamask,第二种使用web3创建。(可跳过第一节直接从第二节阅读)

使用的lib版本如下

"web-vitals": "^2.1.4",

"web3": "^4.11.1"

使用metamask创建钱包

1、安装metamask

打开Chrome浏览器的应用商店,搜索MetaMask并安装(如下图),注意不要安装错误的有害应用。

2、创建钱包

安装好metamask后,接下来使用MetaMask创建钱包,从扩展程序处打开metamask,点击创建新钱包,按照指引执行下一步。创建钱包后会进入钱包页面并且拥有一个账户。

因为完成一笔交易需要两个账户,所以我们点击顶栏中间的账户,点击:添加账户或硬件钱包-添加新账户

3、获取私钥

点击钱包页面中,顶栏右侧的三个点,点击:账户详情-显示私钥。注意,此处的私钥在web3js使用时需要加上0x表示16进制。

使用web3js创建钱包

创建账户

在引入web3js后,使用web3.eth.accounts.create();创建钱包,该方法会返回钱包地址、私钥等信息。通过这个地址可以在以太坊浏览器中搜索到账号情况。说明成功了。

> web3.eth.accounts.create();

return {
  address: '0xc243...78',
  privateKey: '0x3a...e8',
  signTransaction: [Function: signTransaction],
  sign: [Function: sign],
  encrypt: [Function: encrypt]
}

因为需要两个账户,所以再次运行这个方法。获取第二个账户

使用水龙头获取代币

因为使用的是测试网,所以我们可以去水龙头领取免费的代币,链接在这,每24h可以获取0.1ETH。

选择需要的代币,点击下方Continue,输入刚才得到的钱包地址后点击Get tokens。稍作等待,你的代币就发送到钱包中了。

进行交易

导入账户

在发送交易之前,我们必须将发起交易的账户私钥添加到本地钱包中,以便可以使用它交易。为此,需要使用web3.eth.accounts.wallet.add(your private key);,输入私钥将钱包导入。(如果是metemask得到的私钥,需要加上0x的前缀)

发起交易

在参数中,需要添加gasLimit属性,它至少要21000。因为如果不这样写,它会被设置为0,测试网络将拒绝交易,因为验证器节点没法收取处理交易的费用。

web3.eth.sendTransaction({
    from: '0xc22...4', 
    to: '0x32....23', 
    value: web3.utils.toWei(0.01, 'ether'), 
    gasLimit: 21000
}).then(res=>{
    console.log(res)
    navigate("/sendSuccess")
})

完成交易

执行上面的流程之后,就可以去以太坊浏览器查看交易是否完成了。

相关推荐
2401_8827275738 分钟前
低代码配置式组态软件-BY组态
前端·后端·物联网·低代码·前端框架
NoneCoder41 分钟前
CSS系列(36)-- Containment详解
前端·css
anyup_前端梦工厂1 小时前
初始 ShellJS:一个 Node.js 命令行工具集合
前端·javascript·node.js
5hand1 小时前
Element-ui的使用教程 基于HBuilder X
前端·javascript·vue.js·elementui
GDAL1 小时前
vue3入门教程:ref能否完全替代reactive?
前端·javascript·vue.js
六卿1 小时前
react防止页面崩溃
前端·react.js·前端框架
z千鑫2 小时前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js
m0_748256142 小时前
前端 MYTED单篇TED词汇学习功能优化
前端·学习
小马哥编程3 小时前
Function.prototype和Object.prototype 的区别
javascript
小白学前端6663 小时前
React Router 深入指南:从入门到进阶
前端·react.js·react