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.