mintNFT issues with React-moralis

[raxith]

I’m trying to mintNFT using mintNFT function.

Contract is right and I’ve followed rarible clone video on YT.

Error:

Error in metamask

Warnings in the console:

Code:

import React, {useState,useEffect} from 'react'

import { useMoralis, useMoralisFile,useNewMoralisObject} from 'react-moralis';

import '../Create.css';

import {tokenContractAbi} from '../abi.js';

const TOKEN_CONTRACT_ADDRESS="*********************************************";

function Createcomponent() {
//initialisations

    const{Moralis,enableWeb3, isWeb3Enabled, web3,isAuthenticated}=useMoralis();

    const { save } = useNewMoralisObject('Item');

    const {saveFile} = useMoralisFile();

    const [file, setFile] = useState('');

    const [filename, setFilename] = useState("");

    const [price, setPrice] = useState("0");

    const [nftstatus, setNftstatus] = useState("Not For Sale");

    const [description, setDescription] = useState("");
// const web3 = await Moralis.Web3.enable();

    const tokenContract = new web3.eth.Contract(tokenContractAbi, TOKEN_CONTRACT_ADDRESS);


    useEffect(() => {

        if (isAuthenticated) {

          enableWeb3();

        }

      }, [isAuthenticated]);

    
// This function is triggered when NFT file is selected
    const onFileChange = (event) => {

        if (event.target.files && event.target.files[0]) {

          setFile(event.target.files[0]);

        }

       }

       console.log(isWeb3Enabled);

//This functions is triggered when create NFT button is pressed

    const onCreateItem = async (e) => {

       
        e.preventDefault();

            //console.log(file);

            const fileIpfs= await saveFile("nftFile.png",file,{

             saveIPFS:true

         });

         //console.log(fileIpfs);

             

         const nftFilePath = fileIpfs._ipfs;

        const nftFileHash=fileIpfs._hash;

          

      //console.log(nftFileHash,nftFilePath);

          

    const metadata = {

        name: filename,

        description: description,

        image: nftFilePath,

    };

    const metadataFileIpfs= await saveFile("metadata.json", {base64 : btoa(JSON.stringify(metadata))},{

        saveIPFS:true

    });

    //console.log(metadataFileIpfs);

     const nftFileMetaDataPath = metadataFileIpfs._ipfs;

     const nftFileMetaDataHash = metadataFileIpfs._hash;

     //console.log(nftFileMetaDataHash,nftFileMetaDataPath);

     const mintNft = async (metadataUrl) => {

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


:**Here I get ethereum not found error, when I put my wallet address and run I get the error mentioned above**

        console.log(receipt);

        return receipt.events.Transfer.returnValues.tokenId;

    };

     const nftId = await mintNft(nftFileMetaDataPath);

     

     await save({

         'name':filename,

         'description':description,

         'nftFilePath':nftFilePath,

         'nftFileHash':nftFileHash,

         'nftFileMetaDataPath':nftFileMetaDataPath,

         'nftFileMetaDataHash':nftFileMetaDataHash,

         'nftId':nftId,

         'nftContractAddress':TOKEN_CONTRACT_ADDRESS,

        });

[malik]

@raxith

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

Could you try this instead –

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

[raxith]

@malik
I Tried this.
Still getting the same error.

In VSCode terminal I’m getting
warning: Property ‘ethereum’ does not exist on type ‘Window & typeof globalThis’.

[malik]

So, I tried using your code and found out there were many syntax errors. Moreover, the error seems to be the configuration of your environment setup or in the smart contract and not in the ethereum variable.

So, I would advise you to please follow the steps carefully and then make the changes accordingly. Follow this post for common issues - Solving common problems [Rarible Clone]

And it’s always advisable to follow the tutorial exactly (by using Vanilla JS instead of React) if you’re just starting out.

A similar error from another developer can be found here -

Metamask & Moralis Rarible Tutorial

Apologies, I think this is what your after, forgive me still a novice pragma solidity >=0.4.22 <0.9.0; contract Migrations { address public owner = msg.sender; uint public last_completed_migration; modifier restricted() { require( msg.sender == owner, "This function is restricted to the contract's owner" ); _; } function setCompleted(uint completed) public restricted { last_completed_migration = completed; } } token contract `pragma solidity ^0.8.0;…

[raxith]

@malik

I’ve completed the vanilla Js version it’s working.

Here there are syntax errors because this is just one of the component and there other parts to it.

[malik]

@raxith

Here there are syntax errors because this is just one of the component and there other parts to it.

It’s hard to debug this code that way. Please provide the entire code if possible.

Thanks.