web3-react（metamask）基本用法

背景：web3真会玩，除了web3js，etherjs外，又搞出来一个web3-react，看不懂原来是知识盲区。

什么是 Web3-react？

Web3-react 是一个易于使用、简单、可扩展的 web3 框架，用于在以太坊区块链网络上构建 dApp。

简而言之，web3-react 是一个状态机，它存储与你的 dApp 相关的某些基本数据位是最新的。

默认情况下，它支持注入的提供者，如Meta Mask、Gnosis Safe、Frame和WalletConnect。

您可以轻松地将其配置为使用其他钱包，例如Portis、Squarelink和 Arkane。

开发参考文档：https://github.com/Uniswap/web3-react/blob/v6/example/pages/index.tsx 解决了metamask如何退出。

metamask官方文档：https://docs.metamask.io/wallet/tutorials/react-dapp-local-state/#5-manage-more-metamask-state 解决监听账户/链切换

在一定意义上来说，web3-react 是一种状态机，可确保与您的 dApp 相关的某些关键数据（例如用户的当前帐户）保持最新。为此，web3-react 使用 Context 来有效地存储这些数据，并将其注入到应用程序中任何需要的地方。

web3-react/core，负责管理此上下文的包的代码

连接器

Authereum

Fortmatic

Frame

Injected，重要

Ledger

Magic

Network，重要

Portis，重要

Squarelink

Torus

Trezor

WalletConnect

WalletLink

唤起metamask只需要一个activate方法

const { activate } = useWeb3React();

const option = SUPPORTED_WALLETS["METAMASK"];

onClick={() => {
            activate(option.connector);
            onClose();
          }}

export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = {
  INJECTED: {
    connector: injected,
    name: "Injected",
    iconURL: INJECTED_ICON_URL,
    description: "Injected web3 provider.",
    href: null,
    color: "#010101",
  },
  METAMASK: {
    connector: injected,
    name: "MetaMask",
    iconURL: METAMASK_ICON_URL,
    description: "Easy-to-use browser extension.",
    href: null,
    color: "#E8831D",
  },
};


// 里面的injected
// InjectedConnector是web3-react的方法
const injected = new InjectedConnector({
  supportedChainIds: ALL_SUPPORTED_CHAIN_IDS,
});


// ALL_SUPPORTED_CHAIN_IDS怎么来的

export enum SupportedChainId {
  MAINNET = 1,
  ROPSTEN = 3,
  RINKEBY = 4,
  GOERLI = 5,
  KOVAN = 42,
  BSC = 56,
  OKC = 66,
  OKCTest = 65,
  POLYGON = 137,
  // LOCAL = 31337,
  LOCAL = 67,

  ARBITRUM_ONE = 42161,
  ARBITRUM_RINKEBY = 421611,
  OPTIMISM = 10,
  OPTIMISTIC_KOVAN = 69,
}

export const ALL_SUPPORTED_CHAIN_IDS: SupportedChainId[] = [
  SupportedChainId.MAINNET,
  SupportedChainId.ROPSTEN,
  SupportedChainId.RINKEBY,
  SupportedChainId.GOERLI,
  SupportedChainId.KOVAN,

  SupportedChainId.ARBITRUM_ONE,
  SupportedChainId.ARBITRUM_RINKEBY,
  SupportedChainId.OPTIMISM,
  SupportedChainId.OPTIMISTIC_KOVAN,
  SupportedChainId.BSC,
  SupportedChainId.OKC,
  SupportedChainId.OKCTest,
  SupportedChainId.LOCAL,
  SupportedChainId.POLYGON,
];

原始语法其实更容易看懂

components/wallet/connectors

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

index.js，以下是代码

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

export default function Home() {
  const { active, account: address, library, connector, activate, deactivate, chainId } = 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>
  )
}

1，导入injected 连接器，参考上一段代码

2，使用useWeb3React钩子来获得所有需要的值。

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

想使用钩子的前提是先注入。

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

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

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


// 自己代码中的示例
import { createWeb3ReactRoot, Web3ReactProvider } from "@web3-react/core";
import { getLibrary } from "./utils/getLibrary";
import { NetworkContextName } from "./constants/misc";
import { ChakraProvider } from "@chakra-ui/react";

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

root.render(
  <Provider store={store}>
    <ChakraProvider>
      <Web3ReactProvider getLibrary={getLibrary}>
        <Web3ProviderNetwork getLibrary={getLibrary}>
          <App />
        </Web3ProviderNetwork>
      </Web3ReactProvider>
    </ChakraProvider>
  </Provider>
);


// 获取provider，最终靠的是new Web3Provider()，来自@ethersproject/providers
import { Web3Provider } from "@ethersproject/providers";
// 函数中的provider参数，等着metamask注入？？？
export function getLibrary(provider: any): Web3Provider {
  const library = new Web3Provider(
    provider,
    typeof provider.chainId === "number"
      ? provider.chainId
      : typeof provider.chainId === "string"
      ? parseInt(provider.chainId)
      : "any"
  );
  library.pollingInterval = 15_000;
  return library;
}

import { createWeb3ReactRoot, Web3ReactProvider } from "@web3-react/core";

这行非常重要，学习如下：

1，Web3ReactProvider

查遍资料，也没发现什么有价值的东西。

原来@web3-react/injected-connector是与metamask的组合。

假设您已在项目中安装Web3-react，您现在应该安装允许您连接到 Meta Mask 的依赖项。 yarn add @web3-react/injected-connector

将 Injected-Connector 导入您的connectors.js文件

import { InjectedConnector } from '@web3-react/injected-connector'

export const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42],
})

与Wallet Connect 连接是：yarn add @web3-react/walletconnect-connector

与Portis，可以使用portis-connector连接器连接。yarn add @web3react/portis-connector

不早说，我也不知道啊。搞了半天，终于弄明白了。

2，createWeb3ReactRoot

在某些情况下，您的 dApp 可能希望同时保持 >1 个活动的 web3 连接。这可能有多种原因，包括：

希望“永远在线”访问远程节点，同时允许用户根据需要使用自己的账户
与侧链和主网的协同通信
使用其他连接方式在浏览器中平衡燃烧器钱包

在这种情况下，您可能想要创建第二个（甚至可能是第三个，但可能不是第四个）根，其功能与另一个 Web3ReactProvider 完全一样（实际上，Web3ReactProvider 在幕后使用 createWeb3ReactRoot）。它需要一个关键参数来标识使用 Web3React（或 getWeb3ReactContext）的根。

import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core'
// import your favorite web3 convenience library here

function getLibrary(provider) {
  return new Web3Provider(provider) // this will vary according to whether you use e.g. ethers or web3.js
}

// 原来如此
const Web3ReactProviderReloaded = createWeb3ReactRoot('anotherOne')

// 跟上面一样
function App () {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ReactProviderReloaded getLibrary={getLibrary}>
        {/* <...> */}
      </Web3ReactProviderReloaded>
    </Web3ReactProvider>
  )
}