0

So here I an tring to access a token uri on my smart contract but it says that it is undefined

Smart 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://QmXWnjpyS5ea5jwzUrogqZtVdajNkUHBzzfDKgRbEUpgAa";
    uint256 private s_tokenCounter;

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

    function mintNFT() public {
        s_tokenCounter++;
        _safeMint(msg.sender, s_tokenCounter);
    }

    function getCounter() public view returns (uint256) {
        return s_tokenCounter;
    }
   function tokenURI(
        uint256 /*tokenId*/
    ) public pure override returns (string memory) {
        return TOKEN_URI;
    }
}

Frontend:

import { useState, useEffect } from 'react';
import { useWeb3Contract, useMoralis } from 'react-moralis';
import nftMarketplaceAbi from '../constants/NftMarketplace.json';
import nftAbi from '../constants/BasicNft.json';
import Image from 'next/image';
export default function NFTBox({
  price,
  nftAddress,
  tokenId,
  seller,
  nftmarketplace,
  listedNfts,
}) {
  const [tokenURI, setTokenURI] = useState('');
  const { isWeb3Enabled } = useMoralis();
  const { data: nfts, runContractFunction: getTokenURI } = useWeb3Contract({
    abi: nftAbi,
    contractAddress: nftAddress,
    functionName: 'tokenURI',
    params: {
      tokenId: tokenId,
    },
  });
  console.log(nfts);
  async function updateUI() {
    const tokenURI = await getTokenURI();
    setTokenURI(tokenURI);
    console.log(`The Token URI is ${tokenURI}`);

    //get token uri
    //using the image tagnfom the tokrn uri of nextjs
  }

  useEffect(() => {
    if (isWeb3Enabled) {
      updateUI();
    }
  }, [isWeb3Enabled]);
  return <div>{tokenURI}</div>;
}

Thanks in advance!

1 Answer 1

0

Hi make sure your wallet or provider is on the right chain (from your use of enableWeb3() or authenticate()) - where the contract call is run depends on this chain.

You should also use the data state (or nfts as you've named it) from the useWeb3Contract hook for the result instead of const tokenURI = await getTokenURI().

Alternatively for read only functions you can use this hook which only uses the Moralis API.

You can also post on our forum if you still have issues with this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.