Web3 - 提供者未设置或无效答案

【问题标题】：Web3 - Provider not set or invalidWeb3 - 提供者未设置或无效
【发布时间】：2022-01-05 15:27:27
【问题描述】：

我正在尝试将我的前端 (Nextjs) 与我在 Rinkeby 网络 (token on etherscan) 上的合同连接起来。我是加密领域的新手，所以我不确定它在说什么提供者......我认为连接是通过 useWeb3 钩子建立的，一切都由 Infura 处理。我还想指出，我可以使用此设置连接到以太坊网络，但不能连接到以太坊网络上的令牌。

我的前端有这个设置：

./src/pages/index.tsx:

import type { NextPage } from "next";
import React, { useEffect, useState } from "react";
import { useWeb3 } from "@openzeppelin/network/react";
import { createContract } from "../lib/herbie";

const Index: NextPage<IndexProps> = () => {
  const { networkId, networkName, providerName, accounts, lib } = useWeb3(
    `wss://rinkeby.infura.io/ws/v3/${process.env.INFURA_PROJECT_ID}`
  );

  useEffect(() => {
    const fetchContract = async (): Promise<any> => {
      if (networkId === 4 && accounts.length > 0) {
        const contract = await createContract();

        console.log({ contract });

        console.log(contract.methods.balanceOf(accounts[0]).call()); // ERROR HERE
      }
    };

    fetchContract();
  }, [accounts, networkId]);

  return (
    <div>
      <p>
        {JSON.stringify({
          networkId,
          networkName,
          providerName,
          accounts,
        })}
      </p>
    </div>
  );
};

export default Index;

./src/lib/herbie.ts:

import Web3 from "web3";

const getAbi = async (): Promise<string> => {
  const abi = await (await fetch("/abi.json")).json();

  return abi;
};

const createContract = async (): Promise<any> => {
  const herbieContract = new Web3().eth.Contract;

  return new herbieContract(
    (await getAbi()) as any,
    "0xe71c56d861f90bf96c9f006d25ce91da97ddb238"
  );
};

export { getAbi, createContract };

我收到以下错误：

我的元掩码：

谢谢

【问题讨论】：

你为什么这么抽象？你创建了一堆不必要的函数。只需内联它。看看你为了展示你的问题而不得不发布的代码量......
我知道，因为就像我说的，我是 web3/crypto 领域的新手，我不确定这个错误来自哪里。另外，我是抽象的，因为我是一名前端开发人员，我喜欢让我的逻辑远离我的 UI。
您应该将逻辑提取到钩子中。您的抽象使推理代码变得更加困难。这是不必要的。
哦，是的，我只是在胡闹试图进入这些东西。

标签： reactjs next.js blockchain web3 web3js

【解决方案1】：

您需要按照documentation 中的说明将提供程序传递到合同实例中

const contract = new Web3().eth.Contract(abi, address);
Contract.setProvider(`wss://rinkeby.infura.io/ws/v3/${process.env.INFURA_PROJECT_ID}`);

几乎所有生产代码都使用 ethersjs 而不是 web3js 顺便说一句。

它看起来像这样：

const contract = new Contract(address, abi, library);

【讨论】：

好的，我试一试。什么是图书馆？这和useWeb3钩子返回的一样吗？
没错——库是从 web3 钩子返回的。另外，考虑使用 useDapp 库。它包含来自 useWeb3 库的进一步抽象，并且更加用户友好。