web3-react似乎没有公开Ethers.js实例。

Question

我已经在我的项目中配置了web3-react包(使用React设置)，但是我似乎没有在上下文中获得一个ethers.js实例。

根据包页，web3-react上下文提供"library：实例化的ethers.js或web3.js实例(或低级提供程序对象)“。看来我得到的是低级提供者对象。

我设置如下(我在本地配置了networkId 13)：

App.js

export default function App() {
  const { InjectedConnector } = Connectors;
  const MetaMask = new InjectedConnector({ supportedNetworks: [1, 4, 13] });
  const connectors = { MetaMask };
  return (
    <Web3Provider connectors={connectors} libraryName={'ethers.js'}>
      <Router>
        <Switch>
          <Route exact path='/simple-storage' component={SimpleStorage} />
        </Switch>
      </Router>
    </Web3Provider>
  );
}

SimpleStorage.js

import React, { useEffect, useState } from 'react';
import { useWeb3Context } from 'web3-react';
import SimpleStorageContract from './contracts/SimpleStorage.json'; // ABI

export default function SimpleStorage() {
  const context = useWeb3Context();
  const [storageValue, setStorageValue] = useState(0);
  const [contract, setContract] = useState(null);
  useEffect(() => context.setFirstValidConnector(['MetaMask']), [context]);
  const { account, active, error, library, networkId } = context;

  if (!active && !error) return <div>loading</div>;
  if (error) return <div>error</div>;

  const { Contract, providers } = ethers;

  const instantiate = () => {
    const { networks, abi } = SimpleStorageContract;
    const { address } = networks[networkId];
    const provider = new providers.Web3Provider(library.provider);
    const signer = provider.getSigner();
    const instance = new Contract(address, abi, signer);
    setContract(instance);
  };
...

下面是我从上下文中得到的信息，我认为它是元掩码注入的web3提供程序：

react3-web library

{
  "_isProvider": true,
  "_events": [],
  "_emitted": {
    "block": -2
  },
  "formatter": {
    "formats": {
      "transaction": {},
      "transactionRequest": {},
      "receiptLog": {},
      "receipt": {},
      "block": {},
      "blockWithTransactions": {},
      "filter": {},
      "filterLog": {}
    }
  },
  "anyNetwork": false,
  "_networkPromise": {},
  "_maxInternalBlockNumber": -1024,
  "_lastBlockNumber": -2,
  "_pollingInterval": 4000,
  "_fastQueryDate": 0,
  "connection": {
    "url": "metamask"
  },
  "_nextId": 42,
  "provider": {
    "_events": {},
    "_eventsCount": 3,
    "_maxListeners": 100,
    "isMetaMask": true,
    "_state": {
      "sentWarnings": {
        "enable": true,
        "experimentalMethods": false,
        "send": false,
        "events": {
          "chainIdChanged": false,
          "close": false,
          "data": false,
          "networkChanged": true,
          "notification": false
        },
        "autoRefresh": true,
        "publicConfigStore": false
      },
      "isConnected": true,
      "accounts": [
        "0x8cab72aad873e9450b10fa785df981986c3dea18"
      ],
      "isUnlocked": true
    },
    "_metamask": {},
    "selectedAddress": "0x8cab72aad873e9450b10fa785df981986c3dea18",
    "networkVersion": "13",
    "chainId": "0xd",
    "_publicConfigStore": {
      "_events": {
        "update": [
          null,
          null,
          null
        ]
      },
      "_eventsCount": 1,
      "_state": {
        "isUnlocked": true,
        "chainId": "0xd",
        "networkVersion": "13"
      }
    },
    "_rpcEngine": {
      "_events": {},
      "_eventsCount": 0,
      "_middleware": [
        null,
        null,
        null
      ]
    },
    "autoRefreshOnNetworkChange": false
  }
}

如何从上下文中获取实例化的Ethers.js？正如您所看到的，我已经导入了以太来与契约进行交互，但这是否违背了(想必)从上下文中获得它的目的？

Answer 1

事实上，对于web3-反应：

const provider = new providers.Web3Provider(library.provider);

等于：

const context = useWeb3React();
const { library } = context;

然后，您可以使用库完成提供程序所做的一切。