web3-react基本用法

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

唤起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,
];

原始语法其实更容易看懂

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