web3-react 库介绍: 帮助前端用户连接MetaMask（或任何钱包）

译文出自：登链翻译计划[1] 译者：翻译小组[2] 校对：Tiny 熊[3]

在这篇文章中，我将展示如何使用一个叫做web3-react[4]的库，以便从你的前端用户连接到 MetaMask 或任何钱包。

我会向你展示尽可能简单的实现，它看起来像这样：

一个更复杂的实现将看起来像下面的图片，这样更持久有效，dapp 本身很可能与智能合约交互。

在本教程里，你当然需要连接到 MetaMask 钱包：

资源

• GitHub repo[5]
• 本教程的视频版本[6]

为了开始，我将创建一个简单的 NextJS 应用程序。

注意：你可以使用yarn[7]或npm[8]，两者皆可：

yarn create next-app web3-react-example

我想做的第一件事是准备好视觉效果。

进入index.js，创建一个按钮，写上 连接到MetaMask。我将使用TailwindCSS[9]来使它看起来稍微好一点，但 CSS 对本教程来说并不重要，所以我将跳过这一点。

我们要添加一些文字，当钱包处于这种情况时，写上 Not connected（未连接），当它被连接时，写上 Connected with <address>。现在，在我们实现逻辑之前，让它保持为 未连接。我将在下面展示所有代码。

安装web3-react依赖，它允许你连接到 MetaMask，像这样安装：

yarn add @web3-react/injected-connector

先添加连接器（connector），添加一个components文件夹。在里面添加一个wallet文件夹。新建一个名为Connectors.js的文件。

你可以把连接器用来连接对应的某个钱包。这里是 MetaMask，但还有其他的连接器，比如WalletConnect 连接器[10]和Portis 连接器[11] 。

在代码中导入连接器，并简单地导出一个连接器对象，像这样：

import { InjectedConnector } from '@web3-react/injected-connector'
export const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42],
})

如果你不知道 chainID 是什么，你可以看看以太坊的 ChainId 与 NetworkId[12]，或者谷歌一下 crypto what are chain ids之类的东西。

然后就是index.js，以下是代码：

import { useWeb3React } from "@web3-react/core"
import { injected } from "../components/wallet/Connectors"

export default function Home() {
  const { active, account, library, connector, activate, deactivate } = useWeb3React()

  async function connect() {
    try {
      await activate(injected)
    } catch (ex) {
      console.log(ex)
    }
  }

  async function disconnect() {
    try {
      deactivate()
    } catch (ex) {
      console.log(ex)
    }
  }

  return (
    <div className="flex flex-col items-center justify-center">
      <button onClick={connect} className="py-2 mt-20 mb-4 text-lg font-bold text-white rounded-lg w-56 bg-blue-600 hover:bg-blue-800">Connect to MetaMask</button>
      {active ? <span>Connected with <b>{account}</b></span> : <span>Not connected</span>}
      <button onClick={disconnect} className="py-2 mt-20 mb-4 text-lg font-bold text-white rounded-lg w-56 bg-blue-600 hover:bg-blue-800">Disconnect</button>
    </div>
  )
}

下面我编码的逻辑顺序解释每个部分：

在index.js中导入injected 连接器：

import { injected } from "../components/wallet/Connectors"

在 Home 组件内创建一个函数，并将其称为connect或任何你想要的命名：

function connect() {}

设置按钮，在点击时调用它：

<button onClick={connect} className="py-2 mt-20 mb-4 text-lg font-bold text-white rounded-lg w-56 bg-blue-600 hover:bg-blue-800">Connect to MetaMask</button>

为了连接到钱包，我们需要安装核心依赖：

yarn add @web3-react/core

你还需要 web3[13] 或 ethers[14] ：

yarn add web3

web3-react 相关的文档在这里[15]， 你可以了解更多。

接下来，转到 _app.js ， 我们需要设置提供者：

import '../styles/globals.css'
import 'tailwindcss/tailwind.css'
import { Web3ReactProvider } from '@web3-react/core'
import Web3 from 'web3'

function getLibrary(provider) {
  return new Web3(provider)
}

function MyApp({ Component, pageProps }) {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Component {...pageProps} />
    </Web3ReactProvider>
  )
}

export default MyApp

同样，我将逐条解释这里的代码。

导入 Web3ReactProvider 和 Web3:

import { Web3ReactProvider } from '@web3-react/core'
import Web3 from 'web3'

创建getLibrary函数:

function getLibrary(provider) {
  return new Web3(provider)
}

把 Web3ReactProvider 包起来作为最顶层的元素，并把getLibrary作为一个属性传进去。

<Web3ReactProvider getLibrary={getLibrary}>
  <Component {...pageProps} />
</Web3ReactProvider>

再次进入index.js，使用useWeb3React钩子来获得所有需要的值。

const { active, account, library, connector, activate, deactivate } = useWeb3React()

我们不会使用所有这些值，但我想我应该展示它们，以便你了解它们。下面他们的含义：

• active：一个钱包现在是否正在连接状态？
• account：已连接的区块链账户地址。
• library：它是 web3 或 ethers，取决于你传入的内容。
• connector：当前的连接器。因此，当我们连接时，本例中是injected连接器。
• activate：连接到一个钱包的方法。
• deactivate: 从一个钱包断开连接的方法

在connect函数中，使用activate函数，将injected连接器作为一个参数。这就是启动与用户的 MetaMask 钱包的连接:

async function connect() {
  try {
    await activate(injected)
  } catch (ex) {
    console.log(ex)
  }
}

目前，它只是连接，不显示用户已连接的视觉效果。要做到这一点，让我们做一些简单的条件模板。如果用户的钱包已经连接或激活，那么就显示他们的地址。否则显示Not connected:

{active ? <span>Connected with <b>{account}</b></span> : <span>Not connected</span>}

这里还准备添加一个断开连接的按钮和函数：

async function disconnect() {
  try {
    deactivate()
  } catch (ex) {
    console.log(ex)
  }
}
...
<button onClick={disconnect} className="py-2 mt-20 mb-4 text-lg font-bold text-white rounded-lg w-56 bg-blue-600 hover:bg-blue-800">Disconnect</button>

用户现在可以连接和断开他们的钱包到这个应用程序。在这之后，可以做各种疯狂的事情，如发送代币或与智能合约交互，现在才只是打开了一个世界的可能性。

如果你有任何问题，请随时提出。关注我的社交媒体，以保持最新的信息。

YouTube[16], Twitch[17], Twitter[18]

本翻译由 Duet Protocol[19] 赞助支持。

原文：https://medium.com/coinmonks/web3-react-connect-users-to-metamask-or-any-wallet-from-your-frontend-241fd538ed39

参考资料

[1]

登链翻译计划: https://github.com/lbc-team/Pioneer

[2]

翻译小组: https://learnblockchain.cn/people/412

[3]

Tiny 熊: https://learnblockchain.cn/people/15

[4]

web3-react: https://github.com/NoahZinsmeister/web3-react

[5]

GitHub repo: https://github.com/Shmoji/web3-react-example

[6]

本教程的视频版本: https://www.youtube.com/watch?v=DCA53Go5ON8

[7]

yarn: https://classic.yarnpkg.com/en/

[8]

npm: https://www.npmjs.com/

[9]

TailwindCSS: https://tailwindcss.com/

[10]

WalletConnect连接器: https://www.npmjs.com/package/@web3-react/walletconnect-connector/v/latest

[11]

Portis连接器: https://www.npmjs.com/package/@web3-react/portis-connector/v/latest

[12]

以太坊的 ChainId 与 NetworkId: https://learnblockchain.cn/article/578

[13]

web3: https://web3js.readthedocs.io/en/v1.4.0/

[14]

ethers: https://www.npmjs.com/package/ethers

[15]

这里: https://github.com/NoahZinsmeister/web3-react/tree/v6/docs#install

[16]

YouTube: https://www.youtube.com/channel/UCc4s4Ad6i-a40dDmjs82odA

[17]

Twitch: https://twitch.tv/shmojicodes

[18]

Twitter: https://twitter.com/Shmojii

[19]

Duet Protocol: https://duet.finance/?utm_souce=learnblockchain