Lesson15 - TokenURI is undefined

[harendra-shakya]

Hey, I am on 26:59:29 lesson 15, I am trying to console.log token URI but it's showing undefined.

This is how my console looking. It is showing everything except tokenURI

Here is my NFTBox code

import { useState, useEffect } 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,
        },
    });

    console.log("nftAddress", nftAddress)
    console.log("tokenId", tokenId)
    console.log("nftAbi", nftAbi)

    async function updateUI() {
        const tokenURI = await getTokenURI();
        console.log("token uri below");
        console.log(`Token URI is ${tokenURI}`);
        
    }

    console.log("isWeb3Enabled", isWeb3Enabled)


    useEffect(() => {
        if (isWeb3Enabled) {
            console.log("use effect is working");
            updateUI();
        }
    }, [isWeb3Enabled]);
}

Here is my index.js code

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { useMoralisQuery } from "react-moralis";
import NFTBox from "../components/NFTBox";

export default function Home() {
    const { data: listedNfts, isFetching: fetchingListedNfts } = useMoralisQuery(
        "ActiveItem", // tableName
        (query) => query.limit(10).descending("tokenId") // Func. of query
    );

    console.log(listedNfts);
    return (
        <div className={styles.container}>
            {fetchingListedNfts ? (
                <div>Loading...</div>
            ) : (
                listedNfts.map((nft) => {
                    console.log(nft.attributes);
                    const { marketplaceAddress, nftAddress, tokenId, price, seller } =
                        nft.attributes;
                    return (
                        <div>
                            Price: {price}. Nft Address: {nftAddress}. Token Id: {tokenId}. Seller:{" "}
                            {seller}. Marketplace Address{marketplaceAddress}
                            <NFTBox
                                price={price}
                                nftAddress={nftAddress}
                                tokenId={tokenId}
                                marketplaceAddress={marketplaceAddress}
                                seller={seller}
                                key={`${nftAddress}${tokenId}`}
                            />
                        </div>
                    );
                })
            )}

            <footer className={styles.footer}>
                <p className="footer__copyright">
                    <a
                        className="footer__link twitter-link"
                        target="_blank"
                        href="https://twitter.com/harendrashakya_"
                    >
                        © Harendra Shakya
                    </a>
                </p>
            </footer>
        </div>
    );
}

And here is my basic nft contract

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract BasicNft is ERC721 {
    string public constant TOKEN_URI =
        "ipfs://bafybeig37ioir76s7mg5oobetncojcm3c3hxasyd4rvid4jqhy4gkaheg4/?filename=0-PUG.json";
    uint256 private s_tokenCounter;

    event DogMinted(uint256 indexed tokenId);

    constructor() ERC721("Dogie", "DOG") {
        s_tokenCounter = 0;
    }

    function mintNft() public {
        _safeMint(msg.sender, s_tokenCounter);
        emit DogMinted(s_tokenCounter);
        s_tokenCounter = s_tokenCounter + 1;
    }

    function tokenURI(uint256 tokenId) public view override returns (string memory) {
        require(_exists(tokenId), "ERC721Metadata: URI query for nonexistent token");
        return TOKEN_URI;
    }

    function getTokenCounter() public view returns (uint256) {
        return s_tokenCounter;
    }
}

And yes my server is connected to moralis also.

What am I doing wrong?? @PatrickAlphaC

[harendra-shakya]

I have solved the problem, gitpod was causing problem. You can't connect your hardhat node running on gitpod to metamask. It worked when I used vs code.

[PatrickAlphaC]

Ahhh, yes this makes sense... Can you make a PR to https://github.com/smartcontractkit/full-blockchain-solidity-course-js/blob/main/chronological-updates.md with this information for this lesson?

[harendra-shakya]

Done ser!!
But I'm also getting some issues with testnets. If I'm minting with poygon mumbai then I'm unable to buy with mumbai testnet but I can buy it from ropsten or any other network and vice versa. Why is this happening?
Here is the link - #370

And this is happening if I'm using ropsten testnet - #387
But I can buy nft minted in ropsten with polygon mumbai testnet. Please lemme know if u know something about this isuue.

[PatrickAlphaC]

From what I've seen, mumbai testnet has the worst uptime of all time. I'd just use another testnet. I also don't love ropsten.

Rinkeby or Kovan are my suggestion.

[jagdiprupra]

I'm getting the same problem and my code is virtually identical to yours.

I have been using vs code throughout - never used gitpod.

Any ideas on what else could cause this issue?