Web3开发技术更新： 还在用 web3.js 或 ethers.js? 试试 Wagmi 和 Viem!
发布于 1 年前 作者 lyman 2504 次浏览 来自 分享

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

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

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

wagmi 是 We all gona make it 的缩写。

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

  • bs-craft(未开源，仅黑客会员可使用，未来会释放出精简版开源): 基于 nuxt3 layer 的一站式的 Web3 全栈开发解决方案
  • BuidlerProtocol Wallet: 参加波卡黑客松的契机刚刚立项，将实现一个可以让 Twitter 用户发布 NFT 作为付费模式的浏览器插件钱包
    • 此项目开源，欢迎有业余时间同学可以加入参与，未来会根据贡献分配奖励

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

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

开始

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

安装

安装 @wagmi/core 及 viem 并列依赖项。

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 兼容链。

注意：在生产环境的应用中，不建议仅传递 publicProvider 给 configureChains，因为您可能会面临公共 provider 端点的速率限制。建议也提供一个 alchemyProvider 或 infuraProvider。

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

创建 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.

往期回顾

回到顶部