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

Moralis General
#1

This is my HTML file

<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/[email protected]/dist/web3.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>

  </head>

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

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

  </body>


</html>
#3

This is my javascript code


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;
#4

Hi,

Checking the user object can help you or instead of using await, you could use .then in your Moralis authenticate calls.

I tried a simple implementation to give you a direction -

      Moralis.start({ serverUrl, appId });
      const btnlogin = document.getElementById("btn-login");

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

      async function login() {
        if (!user) {
          user = await Moralis.authenticate({
            signingMessage: "Welcome to GrandPaDoge",
          });
          if (user) {
            btnlogin.style.display = "none";
          }
        }
        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();
        btnlogin.style.display = "block";

        console.log("logged out");
      }

      document.getElementById("btn-login").onclick = login;
      document.getElementById("btn-logout").onclick = logOut;
1 Like
#5

it works thanks, but i have another thing to ask before you close the chat,
how can i add a user profile to the my code because i tried using the (I clone rarible in 24 hours ) profile function to the code but it won’t wok

#6

How can i hide logout button and my profile button before connecting to my wallet?
Take a look at my code below.

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

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

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

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);
    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");
}
document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;
#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/[email protected]/dist/web3.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/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;