Rarible Clone - Can't save profile

Moralis General
#1

I can’t save the profile after crating it - the command comes that it is successfully saved, but it does not appear - name and picture don’t

#2

Hey @Jacek

Please share your code :open_hands:

#3

Hi Yomoo,

So I finished the 5th tutorial and and I actually have 2 problems:

  1. It saves my profile but it does not display it
  2. I can’t save the item when I create it, that’s what I get:

::1 - - [25/Jul/2021 17:10:12] “GET /main.js HTTP/1.1” 304 -
::1 - - [25/Jul/2021 17:10:56] “GET / HTTP/1.1” 304 -

HTML:

<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>First Clone</title>

<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</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="" 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">Save</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="main.js"></script>

JS:

Moralis.initialize(“dxrTP9zklFVYetRca6Yqf3N6Y4pswSF0K6aF0eab”);

Moralis.serverURL = ‘https://s7iqmq2thenp.usemoralis.com:2053/server’

init = async () => {

hideElement(userInfo);

hideElement(createItemForm);

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

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

if (userAvatarFile.files.lenght > 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.lenght == 0){

    alert("Please select a file!");

    return;

} else if (createItemNameField.value.lenght == 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: txtCreateItemDescriptionField.value,

    nftFilePath: nftFilePath,

    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 Item = Moralis.Object.extend("Item");

// Create a new instance oof 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);

await item.save();

console.log(item);

}

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 createItemFile = document.getElementById(“fileCreateItemFile”);

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

document.getElementById(“btnCreateItem”).onclick = createItem;

init();

#4

Hey @Jacek

Please make reformatting of your code. I’ve tried to do it by myself but I have a big number of warnings in my code editor.

Just copy and paste your code and then ctrl+shift+c

I will wait for ypur response :wink:

#5

how would i do that?

#6 
<!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>First Clone</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</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="" 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">Save</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="main.js"></script>
</body>
</html>
#7 
Moralis.initialize("dxrTP9zklFVYetRca6Yqf3N6Y4pswSF0K6aF0eab");
Moralis.serverURL = 'https://s7iqmq2thenp.usemoralis.com:2053/server'

init = async () => {
    hideElement(userInfo);
    hideElement(createItemForm);
    window.web3 = await Moralis.Web3.enable();
    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);

    if (userAvatarFile.files.lenght > 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.lenght == 0){
        alert("Please select a file!");
        return;
    } else if (createItemNameField.value.lenght == 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: txtCreateItemDescriptionField.value,
        nftFilePath: nftFilePath,
        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 Item = Moralis.Object.extend("Item");

    // Create a new instance oof 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);
    await item.save();
    console.log(item);
}

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 createItemFile = document.getElementById("fileCreateItemFile");
document.getElementById("btnCloseCreateItem").onclick = () => hideElement(createItemForm);
document.getElementById("btnCreateItem").onclick = createItem;

init();
#8

I think I got it :wink: …

#9

Hey @Jacek

Which server version do you use?

#10

Hey @Yomoo,

I use 0.0.242

#11

Hey @Jacek

There is a typo mistake in the JS code:
userAvatarFile.files.lenght > 0 change it to userAvatarFile.files.length > 0

Let me know how it will work for you :wink:

#12

Legend! Thank you!

This solved half of the problem - I can now save the profile.

I also changed item.set('description', txtCreateItemDescriptionField.value); to item.set('description', createItemDescriptionField.value);

I dont seem to be able to create/save the item

Best
Jacek

#13

Hey @Jacek

Take a look at Rarible Clone Part11 Failed to add an item to `itemsForSale`

#14

Ah yes, my server is disconnected

1 Like
#15

Good to know. Keep up the great work!

Small issues can sometimes go unnoticed. A straw can break a camel’s back :wink:

Happy BUIDLing! :man_mechanic:

#16

i got same error but i’m unable to save profile