Web3 - 提供者未设置或无效

Posted 2023-02-18

【中文标题】Web3 - 提供者未设置或无效

【英文标题】：Web3 - Provider not set or invalid

【发布时间】：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。

您应该将逻辑提取到钩子中。您的抽象使推理代码变得更加困难。这是不必要的。

哦，是的，我只是在胡闹试图进入这些东西。

【参考方案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 库的进一步抽象，并且更加用户友好。