un.Block 区块链周报 #32：Web3 前端开发 - un.Block - un.Block

👨‍🚀 Glaze & Jasmine：大家元宵节快乐！

如果你喜欢本期内容，不妨在阅读后给我们点个 ❤️ ，并在下方订阅 un.Block Weekly

这一期我们简单的和大家介绍一下 Web3 的前端开发。Web3 前端开发和传统的前端开发不一样的地方在于需要处理钱包连接，调用合约等等问题。

前端库

在前几年，市面上还没有很多解决方案。前端开发者需要自己写钩子函数，或者自己手动维护钱包链接，交易状态等等。往往一个 Provider 和 Signer 需要在多个组件之间共用。

随着区块链开发者的增加，我们看见了更多好用的前端库。例如对于我们以上提到的这些问题，有这样几个前端库可以帮助我们：

这几个前端库实现的钩子函数不太一样，实际的使用体验也会有差异。在 Wagmi 的文档里详细列有这几个前端库的区别。

基本上这几个库的区别在于测试（仅 Wagmi 有详细的测试），更新频率，Typescript 支持，外部依赖，钩子函数，切换网络和钱包后数据自动刷新，支持的钱包，支持 Multicall（仅 useDapp 支持），交易通知（仅 useDapp 支持），UI 组件（仅 Web3Modal 支持）。

Wagmi 目前有 20 个钩子函数，925 Star，65 Fork，2 Issue，3 PR。

Web3-react 没有文档，2.9k Star，689 Fork，23 Issue，6 PR。

useDapp 目前有 23 个钩子函数，863 Star，200 Fork，81 Issue，9 PR。

Web3modal 主要支持各种钱包链接方式。

Wagmi

这一次的开发我使用了 Wagmi。其实 Wagmi 官方给的文档里例子不是很多。例如在文档里我没有看到应该如何使用 Infura 或者 Alchemy 作为 Provider 来解除 Ethers.js 公共 API 的请求限制。得益于新版的 Github Code Search，总能帮助我搜索到我需要的例子。

接下来我会展示一些可能有用的小例子。

这个例子展示了如何使用第三方的 Provider。

// App.js
import './App.css';
import { Provider, chai} from 'wagmi'
import { providers } from 'ethers'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { ethers } from 'ethers';

// Chains for connectors to support
const chains = [chain.rinkeby, chain.mainnet]

// Set up connectors
const connectors = ({ chainId }) => {
  const rpcUrl = chains.rpcUrls
  return [
    new InjectedConnector({
      chains,
      options: { shimDisconnect: true, },
    })
  ]
}

const provider = () => ethers.getDefaultProvider("mainnet", {
  etherscan: "xxxxxxxxxxxxxxxx",
  // infura: {
  //   projectId: "xxxxxxxxxxxxxxxx",
  //   projectSecret: "xxxxxxxxxxxxxxxxxxxx",
  // }
});

function App() {
  return (
    <Provider connectors={connectors} provider={provider}>
    </Provider >
  );
}

当我们需要同时使用两个钩子的时候，我们需要重命名返回值。对于不熟悉 JS 的读者，例子如下：

const [{ data, error }, connect] = useConnect()
const [{ data:network_data, error:network_error, loading }, switchNetwork] = useCustomNetwork()

🔔 订阅 un.Block Weekly 🔔

🚏Find us

💻 Website： unblock256.com

✈️ Telegram： un.Block Weekly

🕊️ Twitter： @unBlock256

📧 Email：[email protected]

视觉设计：Jenny

特别鸣谢：

本文非商业目的转载授权遵循 CC BY-NC 4.0 协议

​前端库

​Wagmi

🚏Find us

前端库

Wagmi