How to hide connect button when i am connected and how to connect to user profile | I CLONE RARIBLE IN 24 HOURS

Moralis General
#7

Here is my html code

<html>

<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, shrink-to-fit=no" />

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32" />
    <link rel="apple-touch-icon" href="icon/favicon-32x32.png" />

    <meta name="description" content="MrGrandpa doge, Is the ORIGINAL OG of crypto. He is a smooth talking r&b singing 🎤 playboy, who believes that bitcoin is the most secure investment in the crypto universe, don't get him wrong he's a strong believer of doge coin as well."
    />
    <meta name="keywords" content="MrGrandPaDoge #MRBTC" />
    <meta name="Developer" content="Isaiah Fadakinte" />
    <meta name="Owner" content="Joey Duque" />
    <title>
        MrGrandpadoge NFT Marketplace | No 1 first Multi Network MarketPlace
    </title>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://npmcdn.com/moralis@latest/dist/moralis.js"></script>
</head>

<body>
    <h1>MrGrandPaDoge NFT Marketplace</h1>

    <button id="btn-login">Connect wallet</button>
    <button id="btn-logout">Logout</button>
    <button id="btn-profile">Profile</button>
    <script src="js/main.js"></script>
</body>

</html>
#8

I usually use something like this:

    user = await Moralis.User.current();
    if (!user) {
        document.getElementById("login_button").style.display = "block";
        document.getElementById("logout_button").style.display = "none";

    } else {
        document.getElementById("login_button").style.display = "none";
        document.getElementById("logout_button").style.display = "block";
    }
1 Like
#9

Alright i will try it out now

#10

It works fine now thanks

#11

But after i added the function to the code, when i connect it display the profile and the logout button automatically unless i refresh the page

#12

Hello are you there?

#13

Yes, you also have this code:


let user = Moralis.User.current();
if (!user) {
    btnlogin.style.display = "block";
} else {
    btnlogin.style.display = "none";
}

That doesn’t use await

#14

You can do some debugging to see what it is going on, you can look in browser console to see if there are errors, you can use console log in your code to see if the code is executed after authentication.

#15

You mean i should await to the code below just as like this?

let user =  await Moralis.User.current();
if (!user) {
    btnlogin.style.display = "block";
} else {
    btnlogin.style.display = "none";
}
#16

Yes, on that wait I was referring, you could integrate here in your original code the logic for logout button too

#17

This is what i did and my profile button and logout button is not hidden when i am open the website on my browser and also i am not seeing any console messages anymore in the console tab and my sign in custom messages is not coming up anymore.
Please take a look at my code and see what am doing wrong. Thanks in Advance.

const serverUrl = "https://mzrhanzmogsu.moralishost.com:2053/server";
const appId = "gFnTLmvgt8ZDUYMXF80FIonsCRqosKxXcfzmO2bM";
Moralis.start({ serverUrl, appId });

const btnlogin = document.getElementById("btn-login");

async function current() {
    let user = await Moralis.User.current();
    if (!user) {
        document.getElementById("btn-login").style.display = "block";
        document.getElementById("btn-logout").style.display = "none";
        document.getElementById("btn-UserInfo").style.display = "none";
    } else {
        document.getElementById("btn-login").style.display = "none";
        document.getElementById("btn-logout").style.display = "block";
        document.getElementById("btn-UserInfo").style.display = "block";
    }
}
async function login() {
    if (!user) {
        user = await Moralis.authenticate({
            signingMessage: "Welcome to MrGrandPaDoge NFT MarketPlace | The OG of Bitcoin",
        });
        if (user) {
            btnlogin.style.display = "none";
        }
    }
    console.log("logged in user:", user);
    console.log("logged in");
    const isWeb3Active = Moralis.ensureWeb3IsInstalled();

    Moralis.onAccountsChanged(async(accounts) => {
        console.log("ACCOUNTS CHANGED");
        const confirmed = confirm(
            "Do you want to link this address to your account?"
        );
        if (confirmed) {
            await Moralis.link(accounts[0]);
        }
    });

    if (isWeb3Active) {
        console.log("Activated");
    } else {
        async function enable() {
            await Moralis.enable();
        }
    }
}

async function logOut() {
    await Moralis.User.logOut();
    btnlogin.style.display = "block";

    console.log("logged out");
}

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

document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;
document.getElementById("btn-UserInfo").onclick = Profile;
#18

it doesn’t look like you call this function
you could call it in your main.js file

#19

I did that before check the code again bro

#20

where did you do that, I don’t see it, it may be also confusing that you use current for a function name and there is also Moralis.User.current()

#21

Okay this is actually my main.js code what i want to do is to hide my logout button and my profile button before connecting to my metamask and only show the connect wallet button.

Please how do i do that in this code below. Thanks.

const serverUrl = "https://mzrhanzmogsu.moralishost.com:2053/server";
const appId = "gFnTLmvgt8ZDUYMXF80FIonsCRqosKxXcfzmO2bM";
Moralis.start({ serverUrl, appId });

async function login() {
    let user = Moralis.User.current();
    if (!user) {
        user = await Moralis.authenticate({
            signingMessage: "Welcome to GrandPaDoge",
        });
    }
    console.log("logged in user:", user);

    const isWeb3Active = Moralis.ensureWeb3IsInstalled();

    if (isWeb3Active) {
        console.log("Activated");
    } else {
        async function enable() {
            await Moralis.enable();
        }
    }
}

async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
}

document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;
document.getElementById("btn-userinfo").onclick = profile;
#22

I would add this code

#23

it works by adding this code but when i am connected to my metamask, it doesn’t show the logout and the profile button automatically, until i refresh the page then it will show, Please how can you help me to make it show automatically when i connected my wallet.
This is my new code below.

const serverUrl = "https://mzrhanzmogsu.moralishost.com:2053/server";
const appId = "gFnTLmvgt8ZDUYMXF80FIonsCRqosKxXcfzmO2bM";
Moralis.start({ serverUrl, appId });

async function hide_buttons() {
    let user = await Moralis.User.current();
    if (!user) {
        document.getElementById("btn-login").style.display = "block";
        document.getElementById("btn-logout").style.display = "none";
        document.getElementById("btn-UserInfo").style.display = "none";
    } else {
        document.getElementById("btn-login").style.display = "none";
        document.getElementById("btn-logout").style.display = "block";
        document.getElementById("btn-UserInfo").style.display = "block";
    }
}

hide_buttons();

async function login() {
    let user = Moralis.User.current();
    if (!user) {
        user = await Moralis.authenticate({
            signingMessage: "Welcome to GrandPaDoge NFT MarketPlace",
        });
    }
    console.log("logged in user:", user);

    const isWeb3Active = Moralis.ensureWeb3IsInstalled();

    if (isWeb3Active) {
        console.log("Activated");
    } else {
        async function enable() {
            await Moralis.enable();
        }
    }
}

async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
}
document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;
document.getElementById("btn-userinfo").onclick = profile;
#24

Take a look at the above code bro
it works by adding this code but when i am connected to my metamask, it doesn’t show the logout and the profile button automatically, until i refresh the page then it will show, Please how can you help me to make it show automatically when i connected my wallet.

#25

you can add here
hide_buttons(); after that console.log("logged in user:", user); line.

1 Like
#26

After adding this code, when i click on connect wallet, it will automatically show the logout button and the profile, but when i clicked on the logout button it won’t show the connect button, please how can i do this?