Cloning rarible Logout, Close, profile and Save button not working and profile photo not display ,,, please any help

cutiesblack2021 · December 26, 2022, 1:36pm

Moralis.initialize("YykBOopEziNqEcaJuyISHV3LbXYBfO1O9CMi6dDm");

Moralis.serverURL = 'https://uz9jpvslyldb.moralishost.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.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();

}

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

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

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

userConnectButton.onclick = login;

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

userProfileButton.onlick = openUserInfo;

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;

const createItemform = document.getElementById("CreateItem");

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

const txtCreateItemDescriptionField = document.getElementById("txtCreateItemDescription");

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

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

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

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

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

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

init();



<!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>inimitable</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" 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>

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

cryptokid · October 8, 2021, 2:06pm

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

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

it looks like you have all elements for logout button to work, what error do you get?

cutiesblack2021 · October 8, 2021, 2:18pm

on my http://localhost:8000/index.html
if i click the save, logout, close and profile button all are not working when click it

cryptokid · October 8, 2021, 2:18pm

if you open your browser console, do you see any error there when you click those buttons or when you load the page?

cutiesblack2021 · October 8, 2021, 2:22pm

it don’t show error , but it don’t work when i try to close or logout

cryptokid · October 8, 2021, 2:26pm

what happens if you run logout directly in browser console, by typing logout() an hitting enter after that?

cutiesblack2021 · October 8, 2021, 2:35pm

this what it say in browser console

logout()
Promise {: TypeError: Cannot read properties of null (reading ‘style’)
at hideElement (http://localhost:80…}
main.js:79 Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘style’)
at hideElement (main.js:79)
at logout (main.js:34)
hideElement @ main.js:79
logout @ main.js:34
async function (async)
logout @ main.js:33
(anonymous) @ VM83:1Preformatted text

cryptokid · October 8, 2021, 2:37pm

ok, so this part doesn’t work: hideElement(userInfo); but you should be logged out if you refresh the page.

cutiesblack2021 · October 8, 2021, 2:40pm

yes when i refresh i get logout

cutiesblack2021 · October 8, 2021, 7:50pm

I keep getting this problem   when i check my browser console 

main.js:82 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'style')
    at hideElement (main.js:82)
    at init (main.js:5)
    at main.js:115
hideElement @ main.js:82
init @ main.js:5
(anonymous) @ main.js:115
inpage.js:1 You are accessing the MetaMask window.web3.currentProvider shim. This property is deprecated; use window.ethereum instead. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3
get @ inpage.js:1
(anonymous) @ moralis.js:4472
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
_getWeb3FromBrowser @ moralis.js:4513
getWeb3FromBrowser @ moralis.js:4458
(anonymous) @ moralis.js:4535
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:4551
(anonymous) @ moralis.js:4991
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5008
(anonymous) @ moralis.js:5129
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5212
login @ main.js:25
Show 8 more frames
inpage.js:1 MetaMask: The event 'close' is deprecated and may be removed in the future. Please use 'disconnect' instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1193#disconnect
_warnOfDeprecation @ inpage.js:1
on @ inpage.js:1
f.setProvider @ index.js:131
t @ index.js:39
packageInit @ index.js:45
c @ index.js:39
(anonymous) @ moralis.js:4488
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
_getWeb3FromBrowser @ moralis.js:4513
getWeb3FromBrowser @ moralis.js:4458
(anonymous) @ moralis.js:4535
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:4551
(anonymous) @ moralis.js:4991
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5008
(anonymous) @ moralis.js:5129
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5212
login @ main.js:25
Show 13 more frames
inpage.js:1 MetaMask: 'ethereum.enable()' is deprecated and may be removed in the future. Please use the 'eth_requestAccounts' RPC method instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1102
enable @ inpage.js:1
(anonymous) @ moralis.js:4490
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
_getWeb3FromBrowser @ moralis.js:4513
getWeb3FromBrowser @ moralis.js:4458
(anonymous) @ moralis.js:4535
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:4551
(anonymous) @ moralis.js:4991
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5008
(anonymous) @ moralis.js:5129
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5212
login @ main.js:25
Show 8 more frames`Preformatted text`
 
when i click create , profile, logout , save Button all are not work, 
.js file

Moralis.initialize("YykBOopEziNqEcaJuyISHV3LbXYBfO1O9CMi6dDm");

Moralis.serverURL = 'https://uz9jpvslyldb.moralishost.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.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 nftFiles.saveIPFS();

    const nftFilePath = nftFile.ipfs();

    const nftFileHash = nftFile.hash();

    const metadata = {

        name: createItemNameField.value,

        description: createItemDescriptionField.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 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);

    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.onlick = 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 txtCreateItemDescriptionField = 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();



.html 

<!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>inimitable</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" 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>

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

cryptokid · October 8, 2021, 7:53pm

It could be related to this line, userInfo may not be initialised, if you comment that line you may not see that error any more

cutiesblack2021 · October 8, 2021, 11:03pm

it not working still the same and it not connecting to wallet again

cryptokid · October 9, 2021, 6:02am

you can take smaller steps in order to fix the problem, you can try to make a html that handles only login, then add logout and so on. that particular this error may be from this function:

init = async () => {
    hideElement(userInfo);
    hideElement(createItemForm);
    window.web3 = await Moralis.Web3.enable();
    initUser();
}

when it looks like it doesn’t find userInfo or createItemForm
and you have:

const userInfo = document.getElementById("UserInfo");
    <div id="userInfo">

const createItemform = document.getElementById("CreateItem");
    <div id="createItem">

It looks like at least you don’t use the same names for ID, in one place is createItem and in one place CreateItem for example.