Web3 开发技术更新: 还在用 web3.js 或 ethers.js? 试试 Wagmi 和 Viem!

2023-05-31 07:49:19 +08:00
 lymanlai

Web3Hacker.World 是一个集合程序员黑客、对新事物好奇的种子用户、及 vc 投资者组合的围绕 万物皆可 Web3 的理念打造的生态体系。 我们将持续分享 Web3 的最新技术发展,并打造一个开放式的黑客社区并产出真正非庞氏的 Web3 产品

目前大部分 Web3 的文章教程都是在介绍一大堆的工具链等,在我们看来,有一些其实已经可以逐步淘汰了,未来非底层架构甚至开发其实都不用去碰的一些工具概念名词。 而 Web3Hacker.World 则目标是打造一站式的 Web3 开发者工具链生态,所以我们本身会一直持续更新我们的技术架构以适应整体技术的发展变化。

本文即我们在开发我们自己的开源应用钱包 BuidlerProtocol Wallet 时,研究新技术方案时碰到的,wagmi 这个项目是 16 个月前开始的,这过程中核心团队就 2 个人, 他们开发非常活跃,到现在 wagmi 项目有 4.5k 的 star ,而官方 Twitter @wagmi_sh 有快 5k 的粉丝了。

wagmiWe all gona make it 的缩写。

我们之前多个项目也一直使用 ethers.js,在综合考虑后,觉得全部逐步替换为 wagmiViem,我们将在这些项目替换:

另外我们还启动了好几个 Web3 及相关技术栈的翻译的开源项目,这些项目在未来也会通过 Web3Hacker.World 的开源基金会分发奖励,欢迎早期参与者加入贡献!

以下为 wagmi coregetting started 翻译,注意,文中链接还未完全翻译,故可能导致访问 404 ,可以替换域名为 wagmi.sh 即可阅读英文原文,后续中文翻译完链接即可恢复。

开始

@wagmi/core 是一个原生 JS 库,包含开始使用以太坊所需的一切。它使“连接钱包”、显示 ENS 和余额信息、签名消息、与合约交互等变得容易。

安装

安装 @wagmi/coreviem 并列依赖项。

pnpm i @wagmi/core viem

配置链

首先,配置 wagmi 使用的你想要的链,以及你想要使用的 providers

import { configureChains, mainnet } from '@wagmi/core'
import { publicProvider } from '@wagmi/core/providers/public'

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
)

此示例使用从 @wagmi/core 导入的以太坊主网链(mainnet) ,当然,您也可以传入任何 EVM 兼容链

注意:在生产环境的应用中,不建议仅传递 publicProviderconfigureChains,因为您可能会面临公共 provider 端点的速率限制。建议也提供一个 alchemyProviderinfuraProvider

阅读有关配置链的更多信息

创建 wagmi 配置

接下来,使用 createConfig 创建一个 wagmi config 实例,并将结果通过 configureChains 传递给它。

import {
  createConfig,
  configureChains,
  mainnet,
} from '@wagmi/core'
import { publicProvider } from '@wagmi/core/providers/public'

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
)

const config = createConfig({
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
})

阅读有关客户端配置的更多信息

你可以开始了

使用 action 吧!您现在可以在整个应用程序中导入和使用 action

import { connect, fetchEnsName } from '@wagmi/core'
import { InjectedConnector } from '@wagmi/core/connectors/injected'

const { address } = await connect({
  connector: new InjectedConnector(),
})
const ensName = await fetchEnsName({ address })

想了解更多?继续阅读文档。

我是来自 Web3Hacker.World的 Bruce ,22 年 5 月 All In Web3 ,后面连续参加了 10 多个黑客松并三个月内拿到 15 个左右的赛道奖及 Grants ,累积产值 70 万 RMB 左右(含后续参与其他团队获得)。 后面又经历休息、搬家到海边(懒散了几个月)、从新学习了大量新技术。现在又开始新的一轮的 Web3 掘金。 这波主要围绕我创建的 BuidlerProtocol 打造 万物皆可 Web3 的跨链的 Web3 App Store 生态平台来制作各种不同的实际应用场景的 DApp 参加各种不同的黑客松比赛并尝试获得 Web3 投资机构的投资。 在这个过程中,我会用 Web3 的技术开发一系列产品,并在过程中实际使用他们。比如使用 Web3 的博客平台来分享我们后续的付费阅读的文章 Web3NFT.Social.


往期回顾

2377 次点击
所在节点    Web3
9 条回复
wagmi
2023-05-31 08:46:11 +08:00
莫名因为昵称被艾特·······
BingoXuan
2023-05-31 09:11:26 +08:00
@wagmi
真的被 @到了?
lovedebug
2023-05-31 09:11:29 +08:00
web3 已经算是过气的割韭菜工具了。。。
xingyuc
2023-05-31 09:39:47 +08:00
@lovedebug 现在都是 AI 了,去不去中心用户不太关心,好不好用才是主要的
wagmi
2023-05-31 11:50:09 +08:00
@BingoXuan 是啊,我当时还纳闷了,进来一看才发现是名字一样
RRRSSS
2023-05-31 14:34:51 +08:00
wagmi 很好用,团队已经在用了!
lymanlai
2023-05-31 15:15:25 +08:00
@wagmi We all gona make it
lymanlai
2023-05-31 15:15:48 +08:00
@RRRSSS 哈哈!可以的,什么团队哦!
lymanlai
2023-05-31 15:16:24 +08:00
@lovedebug 对于割韭菜的人来说是过气啦!现在流行用 AI 来割!

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/944377

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX