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")
})

完成交易

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

相关推荐
前端拾光者38 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
The_Ticker39 分钟前
CFD平台如何接入实时行情源
java·大数据·数据库·人工智能·算法·区块链·软件工程
程序猿阿伟39 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
TechubNews43 分钟前
Helius:从数据出发,衡量 Solana 的真实去中心化程度
去中心化·区块链
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge