使用 web3-react 连接到 metamask

一. 概述

在这篇文章中,我们将展示如何使用名为 web3-react 库将用户连接到 MetaMask 或您前端的任何钱包。

本文中用简单的方法实现该效果,效果图如下:

更复杂的实现如下图所示,它具有持久性,并且 dapp 本身与智能合约交互,这个是 uniswap 开源代码 interface 的效果

对于本教程,您当然需要连接到 MetaMask 钱包。

二. 资源

web3-react 代码库: https://github.com/Shmoji/web3-react-example 该课程的视频地址:https://www.youtube.com/watch?v=DCA53Go5ON8

开始接入

首先,我将创建一个简单的 NextJS 应用程序。 注意:您可以使用yarn或npm,都可以。

yarn create next-app web3-react-example

咱们需要做的第一件事儿就是把连接钱包的 Html 界面写出来,也就是说先做视觉效果

进入index.js 并创建一个按钮,上面写着“Connect MetaMask”。所以它看起来并不太麻烦,可以使用 TailwindCSS 让它看起来稍微好一点,但 CSS 对本教程并不重要,所以我们将跳过它。

我们将要添加一些文本,当钱包是这种情况时显示“未连接”,并在连接时显示“已连接

”。现在只需将其保留为“未连接”,直到我们稍微实现逻辑。我将在下面展示所有这些代码。

现在让我们添加连接器。添加组件文件夹。在里面添加一个钱包文件夹。在里面添加一个名为Connectors.js的文件

这是安装允许您连接到 MetaMask的web3-react依赖项的好方法。所以像这样安装它:

yarn add @web3-react/injected-connector

您可以将连接器视为将您连接到某个钱包的东西。这个是针对 MetaMask 的,但还有其他的,如 WalletConnect 连接器和Portis 连接器。

现在导入它并简单地导出一个注入的连接器对象,如下所示:

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

关于上面支持的 ChainID, 分别是以太坊的主网ID 和 几个测试网的 ID,这里不做过多的解释,你可以自行谷歌搜索了解他们

提供一下完整的代码,然后按照我编码的逻辑顺序解释每个部分。 先解释是 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 中导入注入的连接器:

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 或者其他的 yarn add web3

要了解我是从哪里找到这些东西的,文档链接为:https://github.com/NoahZinsmeister/web3-react/tree/v6/docs#install。

接下来,我们需要设置提供程序。同样,这是所有代码,我将逐条解释:

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

转到_app.js,导入 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,取决于您传入的内容
  • 连接器:当前连接器。因此,当我们连接时,它将是本示例中的注入连接器
  • activate : 连接到钱包的方法
  • 停用:与钱包断开连接的方法

在connect函数中,使用activate函数和注入的连接器作为参数。这就是启动与用户 MetaMask 钱包的连接的原因:

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

但是,目前,它只会连接但不会在视觉上显示用户已连接。为此,让我们做一些简单的条件模板。如果用户的钱包已连接或处于活动状态,则显示他们的地址。否则,未连接: {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>

用户现在可以连接和断开他们的钱包到这个应用程序。在此之后,可以完成各种疯狂的事情,例如发送代币或与智能合约交互,这开启了一个充满可能性的世界。 如果您有任何问题可以转到问我社区的问答模块里面提问。

全部评论(0)
给作者留言