Lesson 15: Issue (and fix) while calling tokenURI via Moralis.

[Mirthis]

All, while developing the front-end for lesson 15 (Moralis version) I have an issue retrieving the tokenURI using the useWeb3Contract hook.
The call is returning null and the error from the hook just says Undefined is required.
The piece of code I'm referring to in the file '''NftBox.js''' is the following.

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

The BasicNFT contract compiles correctly and test calling toeknURI also works ok, so I suspect is something about how the call is initiated from the front-end.

[krakxn]

I'd recommend formatting it well for others to refer to in the future clearly (as you mentioned):

First, copy the solution part and in the main blob just leave out the issue; then, in the replies paste the solution part and mark it as answer. Cheers!

[Mirthis]

Done, I hope it's better now :)

[Mirthis]

Ok, It took me quite some time to figure this out but the problem was actually related to the function declaration in the contract.
My function was declared as follow, where the argument name is commented as it's not used in the function body.

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

Still for the call to work from the front-end I had to remove the comment as follow:

function tokenURI(uint256 tokenId)
  public
  view
  override
  returns (string memory)
{
  return TOKEN_URI;
}

The two versions of the functions produce a different ABI and I assume this is what's creating the problem.

With parameter commented:

{
    "type": "function",
    "name": "tokenURI",
    "constant": true,
    "stateMutability": "view",
    "payable": false,
    "inputs": [{ "type": "uint256" }],
    "outputs": [{ "type": "string" }]
  }

Without the comment:

  {
    "type": "function",
    "name": "tokenURI",
    "constant": true,
    "stateMutability": "view",
    "payable": false,
    "inputs": [{ "type": "uint256", "name": "tokenId" }],
    "outputs": [{ "type": "string" }]
  },

Note that the contract code in the repo is without the commented variable so if using that there should be no problem.

[benjbright]

Thanks so much for taking the time to post this solution, I also had this error and was completely stuck, not sure I would have located this as being the problem either!

Cheers,

Ben