Cloning Rarible: Pt1. Profile Btn Keeps Showing

I finished the video and when starting Live Server it automatically opened metamask to login but the profile button was visible. Once I login the Connect wallet disappears and the Profile button stays.


Im not sure but I think initUser isnt going through upon running the site because if i mess with

initUser = async () => {
    if (await Moralis.User.current()){
        hideElement(userConnectButton);
        showElement(userProfileButton);
    }else{
        showElement(userConnectButton);
        hideElement(userProfileButton);
    }

the hide/showElement for either userConnectButton or ProfileButton it doesnt have an affect upon initial run. Even if i change both to hide under }else{ when i run it both buttons are visible. Once I log into MetaMask and i change any of the hide/show do the buttons disappear or appear. Im also am having this pop up when i use the command python -m http.server


Just wondering if that will be an issue. My main issue though is the buttons being persistent upon running the page when the wallet isnt connected.

in init function you could try to add await initUser() instead of initUser() without await.
You can also share what you have in your main.js file if you still have problems.

i put the await. heres my main.js code still not working

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

initUser = async () => {
    if (await Moralis.User.current()){
        hideElement(userConnectButton);
        showElement(userProfileButton);
    }else{
        showElement(userConnectButton);
        hideElement(userProfileButton);
        //document.getElementById("btnConnect").style.display("none");
        //document.getElementById("btnUserInfo").style.display("none");
    }
}

login = async () => {
    try {
        await Moralis.Web3.authenticate();
        initUser();
    }catch(error){
        alert(error)
    }
}

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

init();
1 Like

This works as expected for me:
a.js:

        serverUrl = "SERVER_URL"
        appId =  "APP_ID" 
        Moralis.start({ serverUrl, appId});

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

initUser = async () => {
    if (await Moralis.User.current()){
        hideElement(userConnectButton);
        showElement(userProfileButton);
    }else{
        showElement(userConnectButton);
        hideElement(userProfileButton);
        //document.getElementById("btnConnect").style.display("none");
        //document.getElementById("btnUserInfo").style.display("none");
    }
}

login = async () => {
    try {
        await Moralis.Web3.authenticate();
        initUser();
    }catch(error){
        alert(error)
    }
}

logout = async () => {
    try {
        await Moralis.User.logOut();
        console.log("logout done");
        await initUser();
    } catch (error) {
        console.log(error);
    }
}

document.getElementById("login_button").onclick = login;
document.getElementById("logout_button").onclick = logout;


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

init();

index.html:

<html>
    <head>
        <title>Vanilla Boilerpate</title>
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js" ></script>
            <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    </head>
    <body>
        <button id="btnConnect">NotProfile</button>
        <button id="btnUserInfo">Profile</button>

        <button id="login_button">Login with MetaMask</button>
        <button id="logout_button">Logout</button>

        <br><br>
    <script src="./a.js"></script>
    </body>

</html>

i pasted it right into it. heres what it showed

For me i dont mind if the profile stays visible when initially running it, but would that probably be an issue later on? Im only wondering if the reason it isnt showing up is bc the tutorial might be out of date if it isnt then at least i know its something on my end and i can at least figure that out with time.

It looks like the page that you see on the left does not correspond to the code on the right, I had 4 buttons added in my html and I don’t see them on the left.

im creating a new folder to try out the code you wrote and running it from there

ok i can see the buttons.


when i connect the wallet it changes to this.

when i login with metamask i sign in and the Not profile button changes to profile. if i logout it changes back.