Repost: Lesson 15 issue. ImageURI not being found

[armontej]

I am trying to display that the listed NFT is found on the front end using the NFTBox.js code following along in the video at 1:03:05:05. Here is my code. The output on my frontend is just "Loading...", Im not sure where this error could be coming from.

import { useEffect, useState } from "react"
import { useWeb3Contract, useMoralis } from "react-moralis"
import nftMarketplaceAbi from "../constants/NftMarketplace.json"
import nftAbi from "../constants/BasicNft.json"

export default function NFTBox({ price, nftAddress, tokenId, marketplaceAddress, seller }) {
    const { isWeb3Enabled } = useMoralis()
    const [imageURI, setImageURI] = useState("")

    const { runContractFunction: getTokenURI } = useWeb3Contract({
        abi: nftAbi,
        contractAddress: nftAddress,
        functionName: "tokenURI",
        params: {
            tokenId: tokenId,
        },
    })

    async function updateUI() {
        const tokenURI = await getTokenURI()
        console.log(`The TokenURI is ${tokenURI}`)

        if (tokenURI) {
            const requestURL = tokenURI.replace("ipfs://", "https://ipfs.io/ipfs/")
            const tokenURIResponse = await (await fetch(requestURL)).json()
            const imageURI = tokenURIResponse.image
            const imageURIURL = imageURI.replace("ipfs://", "https://ipfs.io/ipfs/")
            setImageURI(imageURIURL)
        }
    }
    useEffect(() => {
        if (isWeb3Enabled) {
            updateUI()
        }
    }, [isWeb3Enabled])

    return (
        <div>
            <div>{imageURI ? <div>Found It!</div> : <div>Loading...</div>}</div>
        </div>
    )
}

[PetyrDzhunov]

Check if you did not forget to switch the Metamask to the hardhat-localhost network. At least that is what I was missing and I was getting the same behavior.

[nebelmeerwanderer1]

@armontej

Have a look at the solutions here #908 and here #685

Both need to be in place for the page to load. I ran these two and then it worked

Perhaps this list will be handy to have available while pushing through lesson 15