Web3 - 提供者未设置或无效

Question

I'm trying to connect my frontend (Nextjs) with my contract on the Rinkeby Network ( token on etherscan ). I'm new to the crypto space, so I'm not sure what provider it's talking about... I thought the connection was made with the useWeb3 hook, and everything was handled by Infura. I also want to note that I can connect to the Ethereum network with this setup, but not to my token on the Ethereum network.

I have this setup on my frontend:

./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 };

I get the following error:

My metamask:

Thanks

Answer 1

You need to pass the provider into the contract instance as it says in thedocumentation

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

Almost all production code uses ethersjs instead of web3js btw.

It looks like this instead:

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

Answer 2

You are getting abi and address to create the contract but to be able to interact with the blockchain, you need a provider. provider is kinda a bridge that connects your contract to the blockchain.

to load the provider you could use @metamask/detect-provider , you can get the provider in one line:

import detectEthereumProvider from '@metamask/detect-provider'

const provider = await detectEthereumProvider()

I manually load the provider to show what happens behind the scene:

const [web3Api, setWeb3Api] = useState({
    provider: null,
    web3: null,
    contract:contract
  })


useEffect(() => {
    const loadProvider = async () => {
      // I assume your code to load contract is working
      const contract=  await createContract()
      let provider = null;
      // early metamask injects ethereum
      if (window.ethereum) {
        provider = window.ethereum;
        try {
          await provider.enable();
        } catch {
          console.error("User denied accounts access!")
        }
      }
      // new version metamask injects web3
      else if (window.web3) {
        provider = window.web3.currentProvider
      }
      else if (!process.env.production) {
        // this is ganache provider in development
        provider = new Web3.providers.HttpProvider("http://localhost:7545")
      }
    if (provider) {
        setWeb3Api({
           web3: new Web3(provider),
           provider,
           contract
    })
  } else {
    console.error("Please, install Metamask.")
  }
   }
    loadProvider()
  }, [])