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

By [un.Block](https://paragraph.com/@un-block) · 2022-02-13

---

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

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

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

​前端库
----

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

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

1.  ​[Wagmi](https://github.com/tmm/wagmi)
    
2.  ​[Web3-react](https://github.com/NoahZinsmeister/web3-react)
    
3.  ​[useDApp](https://github.com/EthWorks/useDApp)
    
4.  ​[Web3modal](https://github.com/Web3Modal/web3modal)
    

这几个前端库实现的钩子函数不太一样，实际的使用体验也会有差异。在 [Wagmi 的文档](https://wagmi-xyz.vercel.app/comparison)里详细列有这几个前端库的区别。

基本上这几个库的区别在于测试（仅 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**](https://unblock256.substack.com/) **🔔**

🚏Find us
---------

💻 **Website**： [unblock256.com](http://unblock256.com/)

​**✈️ Telegram：** [un.Block Weekly](https://t.me/unBlock256)

​**🕊️ Twitter**： [@unBlock256](https://twitter.com/unblock256)

​**📧 Email**：[unblocketh@gmail.com](mailto:unblocketh@gmail.com)

📤 分发渠道：[知乎](https://www.zhihu.com/column/c_1389547907977297920) | [Notion](https://www.notion.so/un-Block-Weekly-39fecdf673e84c4487e76eb4492b60cc) | [Substack](https://unblock256.substack.com/) | [Medium](https://medium.com/@unblock256) | [Mirror](https://mirror.xyz/0x7B076d7BcdE88Ec322B2D01AA1ADc1997b7724f6/mPaC_Fg1HmQogTLdhKvTkq31JTzFNgrPyXNeMvM7juo) | [RSS](https://submirror.xyz/0x7B076d7BcdE88Ec322B2D01AA1ADc1997b7724f6) | [即刻](https://web.okjike.com/u/10425125-69bc-4cbc-addc-e7d7d48810c6) | [微信订阅](https://unblock.zhubai.love/)

视觉设计：Jenny

特别鸣谢：

*   ​[Newlearnerの自留地](https://t.me/NewlearnerChannel)
    
*   ​[Android Weekly Update](https://update.substack.com/)
    

本文非商业目的转载授权遵循 [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/) 协议

版权所有 ©️un.Block 2021

---

*Originally published on [un.Block](https://paragraph.com/@un-block/un-block-32-web3-un-block)*