[SOLVED] Problem "caught (in promise) ReferenceError: mintNft is not defined at HTMLButtonElement.createItem

Kaisanz · December 26, 2022, 1:36pm

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>FORNTEND</title>

</head>

<body>

   

    <div>

        <Button id="btnConnect">Connect wallet</Button>

        <button id="btnUserInfo">Profile</button>

        <button id="btnOpenCreateItem">Create</button>

    </div>

    <div id="userInfo">

        <h4>User Profile</h4>

        <input type="text" id="txtUsername" required placeholder="Enter username">

        <input type="text" id="txtEmail" placeholder="Enter email">

        <small>optional</small>

        <img width="50" height="50" src="" id="imgAvatar" alt="">

        <label for="fileAvatar">Select Avatar</select></label>

        <input type="file" id="fileAvatar">

        <button id="btnLogout">Log Out</button>  

        <button id="btnCloseUserInfo">Close</button>    

        <button id="btnSaveUserInfo">Save</button>  

    </div>

    <div id="createItem">

        <h4>create Item</h4>

        <input type="text" id="txtCreateItemName" required placeholder="Enter name">

        <textarea id="TextCreateItemDescription" cols="30" rows="5" placeholder="Enter description"></textarea> <!-- item punya description -->

        <input type="Number" min="1" step="1" id="numCreateItemPrice" placeholder="Enter price" required>    <!-- harga item -->

       

        <label for="selectCreateItemStatus">Status</select></label>

        <select name="" id="selectCreateItemStatus">

            <option value="0">Not for sale</option>

            <option value="1">Instant buy</option>

            <option value="2">Accept Offer</option>

        </select>

        <label for="fileCreateItemFile">Select File</select></label>

        <input type="file" id="fileCreateItemFile">

        <button id="btnCloseCreateItem">Close</button>    

        <button id="btnCreateItem">Create!</button>  

    </div>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

    <script src="abi.js"></script>

    <script src="main.js"></script>

</body>

</html>

Kaisanz · October 15, 2021, 4:38am

Moralis.initialize("Bh0MLNPUycz7AV77HPnFFxHtsDnY6nkhz0skZY2k");

Moralis.serverURL = 'https://pof75zn8copb.moralishost.com:2053/server'

const TOKEN_CONTRACT_ADDRESS = "0xe682FbA22B1f939Bec26893a10711570565d1680";

init = async () => {

    hideElement(userInfo);

    hideElement(createItemForm);

    window.web3 = await Moralis.Web3.enable();

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

    initUser();

}

initUser = async () => {

    if (await Moralis.User.current()){

        hideElement(userConnectButton);

        showElement(userProfileButton);

        showElement(openCreateItemButton);

    }else{

        showElement(userConnectButton);

        hideElement(userProfileButton);

        hideElement(openCreateItemButton);

    }

}

login = async () => {

    try {

        await Moralis.Web3.authenticate();

        initUser();

    }catch (error) {

        alert(error)

    }

}

logout = async() => {

    await Moralis.User.logOut();

    hideElement(userInfo);

    initUser();

}

openUserInfo = async () =>{

    user = await Moralis.User.current();

    if (user){

        const email = user.get('email');

        if(email){

            userEmailField.value = email;

        }else {

            userEmailField.value = "";

        }

        userUsernameField.value = user.get('username');

        const userAvatar = user.get('avatar');

        if (userAvatar){

            userAvatarImg.src = userAvatar.url();

            showElement(userAvatarImg);

        }else {

            hideElement(userAvatarImg);

        }

        showElement(userInfo);

    }else {

        login();

    }

}

saveUserInfo = async() => {

    user.set('email', userEmailField.value);

    user.set('username', userUsernameField.value); //belum ada function yang blh cek username ni dh diguna apa blm

    if (userAvatarFile.files.length > 0) {  

       /*  const file = userAvatarFile.files[0];  

        const name = "photo.jpg";

         */

        const avatar = new Moralis.File("avatar.jpg", userAvatarFile.files[0]);

        user.set('avatar', avatar);

    }

    await user.save();

    alert("user info saved successfully");

    openUserInfo();

}

createItem = async() => {

    if (createItemFile.files.length ==0){  //cek ada select tak file

        alert("Please select a file!");

        return;

    } else if (createItemNameField.value.length ==0){

        alert("Please give the item a name!");

        return;

    }

    const nftFile = new Moralis.File("nftFile.jpg",createItemFile.files[0]);

    await nftFile.saveIPFS();

    const nftFilePath = nftFile.ipfs();

    const nftFileHash = nftFile.hash();

    const metadata = {

        name: createItemNameField.value,

        description: createItemDescriptionField.value,

        nftFilePath: nftFilePath, //nftFilepath tukar ke image

        /* nftFileHash: nftFileHash */

    };

    const nftFileMetadataFile = new Moralis.File("metadata.json", {base64 : btoa(JSON.stringify(metadata))});

    await nftFileMetadataFile.saveIPFS();

    const nftFileMetadataFilePath = nftFileMetadataFile.ipfs();

    const nftFileMetadataFileHash = nftFileMetadataFile.hash();

    const nftId = await mintNft(nftFileMetadataFilePath);

    // Simple syntax to create a new subclass of Moralis.Object.

    const Item = Moralis.Object.extend("Item");

    // Create a new instance of that class.

    const item = new Item();

    item.set('name', createItemNameField.value);

    item.set('description', createItemDescriptionField.value);

    item.set(' nftFilePath',  nftFilePath);

    item.set('nftFileHash', nftFileHash);

    item.set('nftFileMetadataFilePath', nftFileMetadataFilePath);

    item.set('nftFileMetadataFileHash', nftFileMetadataFileHash);

    item.set('nftId', nftId);

    item.set('nftContractAddress', TOKEN_CONTRACT_ADDRESS);

    await item.save();

    console.log (item);

}

mintNFT = async (metadataUrl) => {

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

    console.log(receipt);

    return receipt.events.Transfer.returnValues.tokenId;

}

hideElement = (element) => element.style.display = "none";

showElement = (element) => element.style.display = "block";

//Navbar(navigationbar)

const userConnectButton = document.getElementById("btnConnect");

userConnectButton.onclick = login;  

const userProfileButton = document.getElementById("btnUserInfo");

userProfileButton.onclick = openUserInfo;

const openCreateItemButton = document.getElementById("btnOpenCreateItem");

openCreateItemButton.onclick = () => showElement(createItemForm);

//User Profile

const userInfo = document.getElementById("userInfo");

const userUsernameField = document.getElementById("txtUsername");

const userEmailField = document.getElementById("txtEmail");

const userAvatarImg = document.getElementById("imgAvatar");

const userAvatarFile = document.getElementById("fileAvatar");

document.getElementById("btnCloseUserInfo").onclick = () => hideElement(userInfo);

document.getElementById("btnLogout").onclick = logout;

document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;

//Item Creation

const createItemForm = document.getElementById("createItem");

const createItemNameField = document.getElementById("txtCreateItemName");

const createItemDescriptionField = document.getElementById("TextCreateItemDescription");

const createItemPriceField = document.getElementById("numCreateItemPrice");

const createItemStatusField = document.getElementById("selectCreateItemStatus");

const createItemFile = document.getElementById("fileCreateItemFile");

document.getElementById("btnCloseCreateItem").onclick = () => hideElement(createItemForm);

document.getElementById("btnCreateItem").onclick = createItem;

init();

Kaisanz · October 15, 2021, 4:39am

pragma solidity ^0.8.0;

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

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

contract LuqmanToken is ERC721 {

    using Counters for Counters.Counter;

    Counters.Counter private _tokenIds;

    constructor () ERC721("LuqmanToken", "LUQ"){}

    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;

    }

}

Kaisanz · October 15, 2021, 4:39am

can someone help me pls

cryptokid · October 15, 2021, 5:19am

and then you have:

mintNFT = async (metadataUrl) => {

maybe you wanted to use same name in both places, and not mintNft and mintNFT

Kaisanz · October 15, 2021, 6:32am

so i need change one of them or what sorry not too clear

cryptokid · October 15, 2021, 6:34am

I think that you may need to change one of them if that is the function that you would expect to be called.

Kaisanz · October 15, 2021, 6:36am

do you have suggestion where and what i need change that make my coding not have other problem

cryptokid · October 15, 2021, 6:39am

I didn’t look at all your code, you’ll have to understand what that code does.

cryptokid · October 15, 2021, 6:43am

it looks like you will also have to change this:

Moralis.initialize("Bh0MLNPUycz7AV77HPnFFxHtsDnY6nkhz0skZY2k");

Moralis.serverURL = 'https://pof75zn8copb.moralishost.com:2053/server'

to

        serverUrl = "https://pof75zn8copb.moralishost.com:2053/server"
        appId =  "Bh0MLNPUycz7AV77HPnFFxHtsDnY6nkhz0skZY2k" 
        Moralis.start({ serverUrl, appId});

This was a change made 2 days ago in Moralis SDK

Kaisanz · October 15, 2021, 6:59am

serverUrl = "https://pof75zn8copb.moralishost.com:2053/server"

appId =  "Bh0MLNPUycz7AV77HPnFFxHtsDnY6nkhz0skZY2k"

const TOKEN_CONTRACT_ADDRESS = "0xe682FbA22B1f939Bec26893a10711570565d1680";

Moralis.start({ serverUrl, appId});

after i change got new problem

Kaisanz · October 15, 2021, 7:00am

tokenContractAbi is not defined at init

cryptokid · October 15, 2021, 7:19am

I think that you should initialise tokenContractAbi in abi.js

Kaisanz · October 15, 2021, 7:23am

thanks the problem already solved