Mint NFT and Display User Item

MasterJediChris · December 26, 2022, 1:23pm

Hello,
I have been having some issues with minting NFT, when I choose the option on the site and upload a file, it calls my Metamask wallet and puts the transaction through. However I get errors on the console and the item does not appear under “My Items”. I don’t think the item is minted. Here are the errors in the console:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'returnValues')
    at mintNft (main.js:182)
    at async HTMLButtonElement.createItem (main.js:161)

1. {transactionHash: '0x5212ee968a6c12bb8d39bc3cb3a6a18dd39d93d58231518cdc72faaddc309dac', transactionIndex: 0, blockHash: '0xd99a6115b239ce1ea1237bff94998fd9623c031676aa96a572326750bc3841a4', blockNumber: 83, from: '0xbdcf88b50129eb06cab1c218a95f1a7b3d4ecdf3', …}

  1. blockHash: "0xd99a6115b239ce1ea1237bff94998fd9623c031676aa96a572326750bc3841a4"
  2. blockNumber: 83
  3. contractAddress: null
  4. cumulativeGasUsed: 22688
  5. events:

    1. [[Prototype]]: Object

  6. from: "0xbdcf88b50129eb06cab1c218a95f1a7b3d4ecdf3"
  7. gasUsed: 22688
  8. logsBloom: "0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000"
  9. status: true
  10. to: "0x1192b542d1a32ea9c7a1b774314849cce2684144"
  11. transactionHash: "0x5212ee968a6c12bb8d39bc3cb3a6a18dd39d93d58231518cdc72faaddc309dac"
  12. transactionIndex: 0
  13. [[Prototype]]: Object

    1. constructor: ƒ Object()
    2. hasOwnProperty: ƒ hasOwnProperty()
    3. isPrototypeOf: ƒ isPrototypeOf()
    4. propertyIsEnumerable: ƒ propertyIsEnumerable()
    5. toLocaleString: ƒ toLocaleString()
    6. toString: ƒ toString()
    7. valueOf: ƒ valueOf()
    8. __defineGetter__: ƒ __defineGetter__()
    9. __defineSetter__: ƒ __defineSetter__()
    10. __lookupGetter__: ƒ __lookupGetter__()
    11. __lookupSetter__: ƒ __lookupSetter__()
    12. __proto__: (...)
    13. get __proto__: ƒ __proto__()
    14. set __proto__: ƒ __proto__()

The line of code in the first error is this:

mintNft = async (metadataUrl) => {

    const receipt = await tokenContract.methods.createItem(metadataUrl).send({from: ethereum.selectedAddress});

    console.log(receipt);

    return receipt.events.Transfer.returnValues.tokenId;

}

Specifically this:
return receipt.events.Transfer.returnValues.tokenId;

I have not really done much to change the main.js file, it is the one from Github. The abi.js file is also identical to the one on Github. I have had the same problem with this line before, but I still can’t specifically see what is wrong with it. Any help would be appreciated!

cryptokid · October 15, 2021, 12:17pm

what you see in metamask for that transaction, it says that it was successful or that it had errors?
what local devchain are you using?

can you get more info on this events part:

5. events:

    1. [[Prototype]]: Object

?

MasterJediChris · October 15, 2021, 6:39pm

The Metamask part works fine, I get a confirmation and it shows up on my transaction history. It also shows up in the eth balance section of the dashboard for Moralis server. I am using the Ganache Local devchain.
I have expanded some of the trees in the error here:

1. events:

  1. [[Prototype]]: Object

    1. constructor: ƒ Object()

      1. arguments: (...)
      2. assign: ƒ assign()
      3. caller: (...)
      4. create: ƒ create()
      5. defineProperties: ƒ defineProperties()
      6. defineProperty: ƒ defineProperty()
      7. entries: ƒ entries()
      8. freeze: ƒ freeze()
      9. fromEntries: ƒ fromEntries()
      10. getOwnPropertyDescriptor: ƒ getOwnPropertyDescriptor()
      11. getOwnPropertyDescriptors: ƒ getOwnPropertyDescriptors()
      12. getOwnPropertyNames: ƒ getOwnPropertyNames()
      13. getOwnPropertySymbols: ƒ getOwnPropertySymbols()
      14. getPrototypeOf: ƒ getPrototypeOf()
      15. hasOwn: ƒ hasOwn()
      16. is: ƒ is()
      17. isExtensible: ƒ isExtensible()
      18. isFrozen: ƒ isFrozen()
      19. isSealed: ƒ isSealed()
      20. keys: ƒ keys()
      21. length: 1
      22. name: "Object"
      23. preventExtensions: ƒ preventExtensions()
      24. prototype: {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
      25. seal: ƒ seal()
      26. setPrototypeOf: ƒ setPrototypeOf()
      27. values: ƒ values()
      28. [[Prototype]]: ƒ ()
      29. [[Scopes]]: Scopes[0]

    2. hasOwnProperty: ƒ hasOwnProperty()

      1. arguments: (...)
      2. caller: (...)
      3. length: 1
      4. name: "hasOwnProperty"
      5. [[Prototype]]: ƒ ()

        1. apply: ƒ apply()
        2. arguments: (...)
        3. bind: ƒ bind()
        4. call: ƒ call()
        5. caller: (...)
        6. constructor: ƒ Function()
        7. length: 0
        8. name: ""
        9. toString: ƒ toString()
        10. Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
        11. get arguments: ƒ ()
        12. set arguments: ƒ ()
        13. get caller: ƒ ()
        14. set caller: ƒ ()
        15. [[FunctionLocation]]: 
        16. [[Prototype]]: Object

          1. constructor: ƒ Object()

            1. arguments: (...)
            2. assign: ƒ assign()

              1. arguments: (...)
              2. caller: (...)
              3. length: 2
              4. name: "assign"
              5. [[Prototype]]: ƒ ()

                1. apply: ƒ apply()
                2. arguments: (...)
                3. bind: ƒ bind()
                4. call: ƒ call()
                5. caller: (...)
                6. constructor: ƒ Function()
                7. length: 0
                8. name: ""
                9. toString: ƒ toString()
                10. Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
                11. get arguments: ƒ ()
                12. set arguments: ƒ ()
                13. get caller: ƒ ()
                14. set caller: ƒ ()
                15. [[FunctionLocation]]: 
                16. [[Prototype]]: Object
                17. [[Scopes]]: Scopes[0]

              6. [[Scopes]]: Scopes[0]

            3. caller: (...)
            4. create: ƒ create()
            5. defineProperties: ƒ defineProperties()
            6. defineProperty: ƒ defineProperty()
            7. entries: ƒ entries()
            8. freeze: ƒ freeze()
            9. fromEntries: ƒ fromEntries()
            10. getOwnPropertyDescriptor: ƒ getOwnPropertyDescriptor()
            11. getOwnPropertyDescriptors: ƒ getOwnPropertyDescriptors()
            12. getOwnPropertyNames: ƒ getOwnPropertyNames()
            13. getOwnPropertySymbols: ƒ getOwnPropertySymbols()
            14. getPrototypeOf: ƒ getPrototypeOf()
            15. hasOwn: ƒ hasOwn()
            16. is: ƒ is()
            17. isExtensible: ƒ isExtensible()
            18. isFrozen: ƒ isFrozen()
            19. isSealed: ƒ isSealed()
            20. keys: ƒ keys()

              1. arguments: (...)
              2. caller: (...)
              3. length: 1
              4. name: "keys"
              5. [[Prototype]]: ƒ ()
              6. [[Scopes]]: Scopes[0]

            21. length: 1
            22. name: "Object"
            23. preventExtensions: ƒ preventExtensions()
            24. prototype: {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
            25. seal: ƒ seal()
            26. setPrototypeOf: ƒ setPrototypeOf()
            27. values: ƒ values()
            28. [[Prototype]]: ƒ ()
            29. [[Scopes]]: Scopes[0]

          2. hasOwnProperty: ƒ hasOwnProperty()
          3. isPrototypeOf: ƒ isPrototypeOf()
          4. propertyIsEnumerable: ƒ propertyIsEnumerable()
          5. toLocaleString: ƒ toLocaleString()
          6. toString: ƒ toString()
          7. valueOf: ƒ valueOf()
          8. __defineGetter__: ƒ __defineGetter__()
          9. __defineSetter__: ƒ __defineSetter__()
          10. __lookupGetter__: ƒ __lookupGetter__()
          11. __lookupSetter__: ƒ __lookupSetter__()
          12. __proto__: (...)
          13. get __proto__: ƒ __proto__()
          14. set __proto__: ƒ __proto__()

        17. [[Scopes]]: Scopes[0]

          1. No properties

      6. [[Scopes]]: Scopes[0]

    3. isPrototypeOf: ƒ isPrototypeOf()
    4. propertyIsEnumerable: ƒ propertyIsEnumerable()
    5. toLocaleString: ƒ toLocaleString()
    6. toString: ƒ toString()
    7. valueOf: ƒ valueOf()
    8. __defineGetter__: ƒ __defineGetter__()
    9. __defineSetter__: ƒ __defineSetter__()
    10. __lookupGetter__: ƒ __lookupGetter__()
    11. __lookupSetter__: ƒ __lookupSetter__()
    12. __proto__: (...)
    13. get __proto__: ƒ __proto__()
    14. set __proto__: ƒ __proto__()

2. from: "0xbdcf88b50129eb06cab1c218a95f1a7b3d4ecdf3"
3. gasUsed: 22688
4. logsBloom: "0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000"
5. status: true
6. to: "0x1192b542d1a32ea9c7a1b774314849cce2684144"
7. transactionHash: "0x35481a00fbb4f9f8c8fb92b4af175228074e0690eca66cbda59904b1163156d9"
8. transactionIndex: 0
9. [[Prototype]]: Object

  1. constructor: ƒ Object()
  2. hasOwnProperty: ƒ hasOwnProperty()
  3. isPrototypeOf: ƒ isPrototypeOf()
  4. propertyIsEnumerable: ƒ propertyIsEnumerable()
  5. toLocaleString: ƒ toLocaleString()
  6. toString: ƒ toString()
  7. valueOf: ƒ valueOf()
  8. __defineGetter__: ƒ __defineGetter__()
  9. __defineSetter__: ƒ __defineSetter__()
  10. __lookupGetter__: ƒ __lookupGetter__()
  11. __lookupSetter__: ƒ __lookupSetter__()
  12. __proto__: (...)
  13. get __proto__: ƒ __proto__()
  14. set __proto__: ƒ __proto__()

cryptokid · October 15, 2021, 7:19pm

How does that createItem function look in the smart contract?
I don’t see the event there, maybe it is not emitted from that function.
Do you see the event in your local ganache associated with that transaction?

MasterJediChris · October 18, 2021, 11:38pm

The function in the smart contract looks like this:

function createItem(string memory uri) public returns (uint256){
        _tokenIds.increment();
        uint256 newItemId = _tokenIds.current();
        _safeMint(msg.sender, newItemId);

        Items[newItemId] = Item(newItemId, msg.sender, uri);

        return newItemId;
    }

I did not change it from the one in the YouTube tutorial.
However, there are no events/transactions listed in Ganache. I did deploy the contract within Ganache and it shows there. But the transaction does not go through in Ganache.

cryptokid · October 19, 2021, 7:33am

    _safeMint(msg.sender, newItemId);

the above line will emit an event when the transaction is successfully executed.

How is that the transaction doesn’t go through in Ganache after you deployed the contract.

One other thing to note is that you’ll have to use a new Moralis dev server if you used same Moralis dev server with a previous Ganache instance and you already had some mined transactions from that previous Ganache instance, but you should still be able to execute transactions in your local Ganache.

Maybe you deployed the smart contract in local Ganache but you didn’t change the smart contract address in your code, or maybe you didn’t set the local ganache network in your Metamask.

You can also test by using remix and deploying the smart contract on a testnet.

MasterJediChris · October 20, 2021, 7:18pm

I compiled and deployed the smart contract on Remix, it compiles but gives many warnings. Once the contract is deployed, I really don’t know what to do. This is the smart contract, again I just did what the tutorials said to do:

pragma solidity ^0.8.9;

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

import "../node_modules/@openzeppelin/contracts/utils/Counters.sol";

contract CCCToken is ERC721 {

    using Counters for Counters.Counter;

    Counters.Counter private _tokenIds;

    constructor () ERC721("CCCToken", "CCCT"){}

    struct Item {

        uint256 id;

        address creator;

        string uri;

    }

    mapping (uint256 => Item) public Items;

    function createItem(string memory uri) public returns (uint256){

        _tokenIds.increment();

        uint256 newItemId = _tokenIds.current();

        _safeMint(msg.sender, newItemId);

        Items[newItemId] = Item(newItemId, msg.sender, uri);

        return newItemId;

    }

    function tokenURI(uint256 tokenId) public view override returns (string memory) {

        require(_exists(tokenId), "ERC721Metadata: URI query for nonexistent token");

       return Items[tokenId].uri;

    }

}

cryptokid · October 20, 2021, 7:26pm

can you deploy the smart contract on testnet and execute there that createItem function?

MasterJediChris · October 20, 2021, 7:29pm

I am able to call that function from Remix and it works, but it looks like there are other functions that do not work in the contract, if I am understanding Remix correctly.

cryptokid · October 20, 2021, 7:35pm

you have to also set some parameters for some functions, not only to press on those buttons with the function name.

MasterJediChris · October 21, 2021, 7:14am

I am at my wits end here, I follow the tutorial exactly, even using the code on github that he makes in the video, and I still cannot get this to work. This is frustrating. You can see my smart contract almost exactly matches the one in the video. I go through the process in the video to set up ganache, truffle migrate, and then try to test and I have just been going in circles with this step. Is there any other light you can shed on the topic? I used remix and the functions work individually.

cryptokid · October 21, 2021, 7:23am

maybe you are not using the smart contract address for the smart contract that was deployed. If you deploy to a testnet then it would be easier to identify what it is the problem as I could see the smart contract and the transactions there.

MasterJediChris · October 21, 2021, 8:49am

This is what it says when I first deploy the contract:

When I check the txn hash on Etherscan, it does not show any results. I have Ganache connected to the testnet on Remix.
This is when I test the CreateItem function:

When I test the safeTransferFrom function, it does not execute probably because there is no NFT there.

cryptokid · October 21, 2021, 9:14am

by default remix will deploy the smart contract in a local dev environment and not on a testnet network (probably that is why you don’t see any results on Etherscan).
But safeTranseferFrom should work even in that remix environment with the right parameters. You can debug that function call directly in remix and see why it is not working, you have that debug button in top right of your screen.

MasterJediChris · October 26, 2021, 2:45am

Is there a way for me to share the remix testnet so that maybe new eyes can catch what I might be missing here? Also I don’t think the safeTransferFrom function will work because there are no NFTs in either of my wallets to transfer.

cryptokid · October 26, 2021, 7:01am

You can deploy from Remix on a testnet network like BSC testnet for BSC or Mumbai for polygon network, or one of the 4 testnet networks on eth (Ropsten, Rinkeby, Goerli, Kovan) and after that anyone can access your smart contract.