Raraible clone 7 NFT minting errors

hi there, so i have been following the amazing tutorial on how to clone a marketplace like rarible and so far am enjoying it. however i recently came across which was not allowing me to mint an NFT, and was getting an error saying that create item is not defined.

i tried looking for errors in the code and couldn’t find any. so i decided to continue the tutorial coding wile searched for an answer, however i didn’t go far and after reaching part 9 everything stop working and now i get a new error. before everything else was working such as login, save, logout, etc except create item were i mint the NFT, but no everything is completely not working and just a "uncaught SyntaxError: Malformed arrow function parameter list in Main.js line 168 ".

i believe this error is caused by the code not being able to point to any nft since i couldnt mint before.
would really appreacite any help. thank you.

MAIN.JS BELOW

Moralis.initialize("uWfSXXpTSvrqnqz3zzC6fWyoevOefrcyZD24FnkE");

Moralis.serverURL = 'https://n5jzovy11iuu.usemoralis.com:2053/server'

const TOKEN_CONTRACT_ADDRESS = "0xBB3Cb4BB7E902FB2B6ce96F8428291C6064D6EC5";

init = async () => {

     hideElement(userItemsSection);

     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);

        showElement(openUserItemsButton);

        loadUserItems();

    }else{

        showElement(userConnectButton);

        hideElement(userProfileButton);

        hideElement(openCreateItemButton);

        hideElement(openUserItemsButton);

    }

}

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);

    if (userAvatarFile.files.length > 0) {      

         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){

        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,

        image: nftFilePath,

    };

    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);

    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('metadataFilePath', nftFileMetadataFilePath);

    item.set('metadataFileHash', 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.selectedAddress});

    console.log(receipt);

    return receipt.events.Transfer.returnValues.tokenId;

}

openUserItems = async () => {

    user = await Moralis.User.current();

    if (user){

        showElement(userItemsSection);

    }else{

        login();

    }

}

loadUserItems = async () => {

    const ownedItems = await Moralis.Cloud.run("getUserItems");

    ownedItems.forEach(item => {

         getAndRenderItemData(item, renderUserItem);

    });

}

initTemplate = (id) => {

   const template = document.getElementById(id);

   template.id = "";

   template.parentNode.removeChild(template);

   return template;

}

renderUserItem = (item) => {

    const userItem = userItemTemplate.cloneNode(true);

    userItem.getElementsByTagName("img")[0].src = item.image;

    userItem.getElementsByTagName("img")[0].alt = item.name;

    userItem.getElementsByTagName("h5")[0].innerText = item.name;

    userItem.getElementsByTagName("p")[0].src = item.description;

    userItems.appendChild(userItem);

}

getAndRenderItemData (item, renderFunction) => {

    fetch(item.tokenUri)

    .then(response => response.json())

    .then(data => {

         data.symbol = item.symbol;

         data.tokenId = item.tokenId;

         data.tokenAddress = item.tokenAddress;

         renderFunction(data);

    })

}

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

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

// Navbar

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("txtCreateItemDescription");

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

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

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

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

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

// user items

const userItemsSection = document.getElementById("userItems");

const userItems = document.getElementById("userItemsList");

document.getElementById("btnCloseUserItems").onclick = () => hideElement(userItemsSection);

const openUserItemsButton = document.getElementById("btnMyItems");

openUserItemsButton.onclick = openUserItems;

const userItemTemplate = initTemplate("itemTemplate");

init();
HTML  BELOW

<!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>KOZO</title>

</head>

<body>

    <div>

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

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

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

    <button id="btnMyItems">My items</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</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="txtCreateItemDescription" cols="30" rows="5" placeholder="Enter description"></textarea>

        <input type="number" min="1" step="1" id="numCreateItemPrice" placeholder="Enter Price" required>

        

        <label for="selectCreateItemStatus">status</label>

        <select id="selectCreateItemStatus">        

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

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

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

        </select>

        <label for="fileCreateItemFile">select file</label>

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

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

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

    </div>

    <div id="userItems"> 

        <h4>My Items</h4>

        <div id="userItemsList"></div>

        <button> id="btnCloseUserItems">close</button>

    </div>

    <div id="itemTemplate">

        <img src="" alt="">

        <h5></h5>

        <p></p>

    </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>

Hey @magus

Amazing job!

Please take a look at Solving common problems [Rarible Clone]

Hope you will find the solution.
Let me know if you will have any problems :man_mechanic:

1 Like

hi guys managed to get some of the errors fixed. and continued to code but now have 2 main problems.

number 1 is i cannot see my listed items.
number 2 is i cannot see my marketplace items too.