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

完成交易

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

相关推荐
H***997627 分钟前
Web3在数字身份认证中的方案
web3
o***Z4481 小时前
前端性能优化案例
前端
张拭心1 小时前
前端没有实际的必要了?结合今年工作内容,谈谈我的看法
前端·ai编程
姜太小白1 小时前
【前端】CSS媒体查询响应式设计详解:@media (max-width: 600px) {……}
前端·css·媒体
weixin_411191841 小时前
flutter中WebView的使用及JavaScript桥接的问题记录
javascript·flutter
HIT_Weston1 小时前
39、【Ubuntu】【远程开发】拉出内网 Web 服务:构建静态网页(二)
linux·前端·ubuntu
百***06011 小时前
SpringMVC 请求参数接收
前端·javascript·算法
天外天-亮1 小时前
Vue + excel下载 + 水印
前端·vue.js·excel
起个名字逛街玩1 小时前
前端正在走向“工程系统化”:从页面开发到复杂产品架构的深度进化
前端·架构
用户47949283569152 小时前
React 渲染两次:是 Bug 还是 Feature?聊聊严格模式的“良苦用心”
前端·react.js·前端框架