Beginner blunder?

Moralis General
#1

Hi everyone.

I’m trying to follow along with the “Cloning Rarible in 24h” tutorial on the Moralis YouTube. I have very little experience in programming though I know my way around some HTML.

I followed the first episode and when it came to loading up the website on localhost:8000 using Python, I see both the “Connect Wallet” and “Profile” buttons. The buttons do not work in the Brave Browser to invoke the Ethereum wallet.

I’ve triple checked my code and my console in VS Code throws no errors. Am hoping someone can point me in the right direction? Maybe I didn’t install some prerequisite?

Here’s the code I have in my editor. Thanks in advance.

Moralis.initialize("-redacted-");
Moralis.serverURL = '-redacted-'

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

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

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

Hi,
Can you also post the HTML code?

#3

Sure, here it is.

<!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>NFT Shop</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/moralis.js"></script>    
    <script src="main.js"></script>

    <div>
        <button id="btnConnect">Connect Wallet</button>
        <button id="btnUserInfo">Profile</button>
    </div>


</body>
</html>
#4

It looks like you have to move the script part in body at the end of the body.

<!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>NFT Shop</title>
</head>
<body>


    <div>
        <button id="btnConnect">Connect Wallet</button>
        <button id="btnUserInfo">Profile</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/moralis.js"></script>    
    <script src="main.js"></script>
</body>
</html>
#5

Awesome! Thank you. That did the trick and let me invoke the wallet in Brave.

However, both buttons still appear when I try to load the site. The Connect Wallet button disappears after login but without logging in, the Profile button is also there. Should I be worried?

#6

You don’t have yet a logout button, you don’t know if you are logged in or not yet.

#7

Ah alright, thanks. I wasn’t sure because on the tutorial the Connect button disappeared after the login.