Cloning Rarible: Pt1. Profile Btn Keeps Showing

jonkani · December 26, 2022, 1:23pm

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.

cryptokid · October 27, 2021, 5:58am

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.

jonkani · October 27, 2021, 12:17pm

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

cryptokid · October 27, 2021, 12:30pm

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/web3@latest/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>

jonkani · October 27, 2021, 1:37pm

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.

cryptokid · October 27, 2021, 1:42pm

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.

jonkani · October 27, 2021, 1:45pm

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

jonkani · October 27, 2021, 2:02pm

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.