Rarible EP1 Buttons incorrectly displaying

Moralis General
#1

Hello,

I cannot for the life of me find whatever typo I am making when following Episode 1. Is there a github repo of the Rarible project using Moralis that I can check my syntax against?

My problem is that why my page loads on localhost:8000 both buttons fully display. I can’t tell by looking at the Moralis Dashboard Log if anything is getting to the Moralis server but I’ve verified my key and url are correct.

Here are my two files.

index.html:

<!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>Morpolyrari</title>
</head>
<body>
    <div>
      <button id="btnConnect">Connect Wallet</button>
      <button id="btnUserInfo">Profile</button>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
  <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
  <script>src="main.js"</script>
</body>
</html>

main.js

Moralis.initialize("EOTlX4syujXGR4qsiXGNrYpPRPRyMVLtBKOlY8MO");
Moralis.serverURL = 'https://ioroxn6lk5ct.moralis.io:2053/server'
init = async () => {
  window.web3 = await Moralis.Web3.enable();
  initUser();
}

initUser = async () => {
  if (await Moralis.User.current()){
    console.log("user is already logged in")
    hideElement(userConnectButton);
    showElement(userProfileButton);
  }else{
    console.log("user is not logged in")
    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();

I’m convinced it’s something small that I just can’t find… any help would be greatly appreciated!

#2

Found the typo in case anyone needs this in the future

should be

  <script src="main.js"></script>

had the bracket in the wrong spot

#3 
<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>Khashable</title>

<div>

    <button id="btnConnect">Connect wallet</button>

    <button id="btnUserInfo">Profile</button>

</div>

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

<script src="https://unpkg.com/moralis/dist/moralis.js"></script>

<script scr="main.js"></script>
#4 
Moralis.initialize("XkHNLidyFREJQafk50k7WXLEDL52JFbD1V8PaCHy");

Moralis.serverURL = 'https://63cwv6nhbwg3.moralis.io:2053/server'

init = async () => {

    window.web3 = await Moralis.Web3.enable();

    initUser();

}

initUser = async () => {

    if (await Moralis.User.current()){

        showElement(userConnectButton);

        hideElement(userProfileButton);

    }else{

        hideElement(userConnectButton);

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

dfd
dfd1703×992 80.9 KB

Well, the code seems exactly right at the moment

[5:47 PM]

but I think it is something to do with my moralis server I did open.

#6

Hi @Khash,

This should be src instead of scr buddy.

This will solve the issue. :slight_smile: