Web3 provider in the Ethereum Boilerplate

Hello, I donโ€™t really understand how to use the web3 provider in the ethereum boilerplate.
From what I understood, the ethereum boilerplate has his own context provider, so I should not use

const web3 = await Moralis.enableWeb3();
const contract = new web3.eth.Contract(contractAbi, contractAddress);

So how do I load web3 and the data in the contract ?
I am trying to recreate the following code in the Ethereum Boilerplate with Moralis:

async componentWillMount() {

  await this.loadWeb3()

  await this.loadBlockchainData()

}

async loadWeb3() {

if (window.ethereum) {

  window.web3 = new Web3(window.ethereum)

  await window.ethereum.enable()

}

else if (window.web3) {

  window.web3 = new Web3(window.web3.currentProvider)

}

else {

  window.alert('Non-Ethereum browser detected. You should consider trying MetaMask!')

}

}

async loadBlockchainData() {

const web3 = window.web3

//Load account

const accounts = await web3.eth.getAccounts()

this.setState({account: accounts[0]})


const networkData = await TipMyMeme.networks[networkId]

if(networkData){

  const tipMyMeme = new web3.eth.Contract(TipMyMeme.abi, networkData.address)

  this.setState({tipMyMeme: tipMyMeme})

  const imagesCount = await tipMyMeme.methods.imageCount().call()

  this.setState({imagesCount})

  // Load images

  for (var i = 1; i <= imagesCount; i++) {

    const image = await tipMyMeme.methods.images(i).call()

    this.setState({

      images: [...this.state.images, image]

    })

  }

  // Sort images. Show highest tipped images first

  this.setState({

    images: this.state.images.sort((a,b) => b.tipAmount - a.tipAmount )

  })

  this.setState({ loading: false})

} else {

  window.alert("The TipMyMeme contract was not deployed on the network")

}

this.setState({loading: false})

}

got this from somewhere else:

const {web3, isWeb3Enabled, enableWeb3, isWeb3EnableLoading, web3EnableError} = useMoralis()

// call enableWeb3 somewhere

// Then check for isWeb3Enabled, show an error message if web3EnableError is defined, and use web3

Thank you for your answer. I transformed my Class in a functional component to be able to use the Moralis hook but I have now the following error:

Unhandled Rejection (Error): Provider not set or invalid

:arrow_forward: 5 stack frames were collapsed.

loadBlockChainData

D:/DAPP/ethereum-boilerplate-main/tipmymemeboilerplate/src/components/Main.jsx:31

  28 | tipMyMeme.setProvider(web3.currentProvider);  29 |   30 | setTipMyMemeContract(tipMyMeme);> 31 | const imagesCount = await tipMyMeme.methods.imageCount().call()     | ^  32 |   33 | // Load images  34 | let arr = [];

My code is the following:

const { isWeb3Enabled, enableWeb3, isAuthenticated, isWeb3EnableLoading, web3, user, chainId } = useMoralis();

const [images, setImages] = useState([])

const [tipMyMemeContract, setTipMyMemeContract] = useState({})

const [loading, setLoading] = useState(true)
useEffect(() => {

    const loadBlockChainData = async() =>{

        const networkData = await TipMyMeme.networks[56]
        if(networkData){
            const tipMyMeme = new web3.eth.Contract(TipMyMeme.abi, networkData.address)
            tipMyMeme.setProvider(web3.currentProvider);
            setTipMyMemeContract(tipMyMeme);

            const imagesCount = await tipMyMeme.methods.imageCount().call()
            // Load images
            for (var i = 1; i <= imagesCount; i++) {

              const image = await tipMyMeme.methods.images(i).call()
              setImages([...images, image]);

            }
            console.log("images:",images)
            // setLoading(false)
          } else {

            window.alert("The TipMyMeme contract was not deployed on the network")

          }

        //   setLoading(false)
    }

    loadBlockChainData()

    return () => {

        setImages([]); // This worked for me

    };

  },[])
1 Like

You need to enable web3 provider before using it.

useEffect(()=> {
   if (!isWeb3Enabled) enableWeb3()
}, [isWeb3Enabled])

Hello. I just added what you said but I have the exact same error.

const { isWeb3Enabled, enableWeb3, isAuthenticated, isWeb3EnableLoading, web3, user, chainId } = useMoralis();

    const [images, setImages] = useState([])

    const [tipMyMemeContract, setTipMyMemeContract] = useState({})

    const [loading, setLoading] = useState(true)

    useEffect(()=> {

        if (!isWeb3Enabled) enableWeb3()

        const loadBlockChainData = async() =>{

            const networkData = await TipMyMeme.networks[56]

            if(networkData){

                const tipMyMeme = new web3.eth.Contract(TipMyMeme.abi, networkData.address)

                tipMyMeme.setProvider(web3.currentProvider);

                setTipMyMemeContract(tipMyMeme);

                const imagesCount = await tipMyMeme.methods.imageCount().call()

                // Load images

                for (var i = 1; i <= imagesCount; i++) {

                  const image = await tipMyMeme.methods.images(i).call()

                  setImages([...images, image]);

                }

                console.log("images:",images)

                // setLoading(false)

              } else {

                window.alert("The TipMyMeme contract was not deployed on the network")

              }

            //   setLoading(false)     
        }
        loadBlockChainData()

        return () => {

            setImages([]); 

        };

     }, [isWeb3Enabled])

maybe you could use this to check if web3 was loaded