Want hide the image

Moralis General
#3 
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Title</title>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

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

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <link rel="stylesheet" href="./style.css">

  </head>

  <body>

    <div class="jumbotron jumbotron-fluid">

      <div class="container">

        <h1 class="display-4">Welcome</h1>

      </div>

    </div>

    <div class="container">

        <button id="login_button">Sign in with MetaMask</button>

        <div id="game">

            <div class row>

                <div class="col-md-8">

                    <img src="pet.png" id="pet_img">

                </div>

                <div class="col-md-4">

                </div>

            </div>

        </div>

    </div> 

    <script type="text/javascript" src="./main.js"></script>

  </body>

</html>

i cannot connect my metamask to website

#4

went i click sign with metamask the metamask wallet like not detect

#5

Try this:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Title</title>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

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

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


  </head>

  <body>

    <div class="jumbotron jumbotron-fluid">

      <div class="container">

        <h1 class="display-4">Welcome</h1>

      </div>

    </div>

    <div class="container">

        <button id="login_button">Sign in with MetaMask</button>

        <div id="game">

            <div class row>

                <div class="col-md-8">

                    <img src="pet.png" id="pet_img">

                </div>

                <div class="col-md-4">

                </div>

            </div>

        </div>

    </div> 

    <script type="text/javascript">
    Moralis.initialize("j5QBLhKESBHccVSawgFX5HiLRxm7BWdIm1gqUwc9"); // Application id from moralis.io

     Moralis.serverURL = "https://odtjjiwqgkj8.moralishost.com:2053/server"; //Server url from moralis.

async function init() {

    try {

        let User = Moralis.User.current();

        if(!User){

            $("#login_button").click( async () => {

                User = await Moralis.Web3.authenticate();

            })

        }   

        renderGame();

    } catch (error) {

        console.log(error);

    }

}

function renderGame(){

    $("#game").show();

    $("#login_button").show();

}

init();
    </script>

  </body>

</html>

The image error is from <img src="pet.png" id="pet_img">

1 Like
#6

already copy but still same!





<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Title</title>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

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

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  </head>

  <body>

    <div class="jumbotron jumbotron-fluid">

      <div class="container">

        <h1 class="display-4">Welcome</h1>

      </div>

    </div>

    <div class="container">

        <button id="login_button">Sign in with MetaMask</button>

        <div id="game">

            <div class row>

                <div class="col-md-8">

                    <img src="pet.png" id="pet_img">

                </div>

                <div class="col-md-4">

                </div>

            </div>

        </div>

    </div> 

    <script type="text/javascript" src="./main.js"></script>

  </body>

</html>
#7 
Moralis.initialize("hfKetq0CybZQpezveB6vqHLaJeexXw6dNx7lIa6l"); // Application id from moralis.io

Moralis.serverURL = "https://opp6jmpbtqas.moralishost.com:2053/server"; //Server url from moralis.io

async function init() {

    try {

        let User = Moralis.User.current();

        if(!User){

            $("#login_button").click( async () => {

                User = await Moralis.Web3.authenticate();

            })

        }   

        renderGame();

    } catch (error) {

        console.log(error);

    }

}

function renderGame(){

    $("#game").show();

    $("#login_button").show();

}

init();

anaka
anaka1920×1280 164 KB

#8

I think that I understand now what you wanted to say, try this:

    if(!User){

        $("#login_button").click( async () => {

            User = await Moralis.Web3.authenticate();

        })

    }   

    renderGame();

=>

    if(!User){

        $("#login_button").click( async () => {

            User = await Moralis.Web3.authenticate();

        })

    } else {  
         renderGame();
    }
#9

just pick one of this or what sorry dont understand

#10

first one is what you have, second one is a modified version of what you have, mainly to renderGame() only when user is defined.

1 Like
#12 
Moralis.initialize("hfKetq0CybZQpezveB6vqHLaJeexXw6dNx7lIa6l"); // Application id from moralis.io

Moralis.serverURL = "https://opp6jmpbtqas.moralishost.com:2053/server"; //Server url from moralis.

async function init() {

    try {

        let User = Moralis.User.current();

        if(!User){

            $("#login_button").click( async () => {

                User = await Moralis.Web3.authenticate();

            })

        } else {  

        renderGame();

    } catch (error) {

        console.log(error);

    }

}    

function renderGame(){

        $("#game").show();

        $("#login_button").hide();

}

init();

seems like my code have problem can u check it

#13

It looks like you forgot a } here before catch:

    } else {  

    renderGame();

} catch (error) {
#14 
Moralis.initialize("hfKetq0CybZQpezveB6vqHLaJeexXw6dNx7lIa6l"); // Application id from moralis.io

Moralis.serverURL = "https://opp6jmpbtqas.moralishost.com:2053/server"; //Server url from moralis.

async function init() {

    try {

        let User = Moralis.User.current();

        if(!User){

            $("#login_button").click( async () => {

                User = await Moralis.Web3.authenticate();

            })

        } else {  

        renderGame();

    } 

    }catch (error) {

        console.log(error);

    }

}    

function renderGame(){

        $("#game").show();

        $("#login_button").hide();

}

init();

still cannot or i have problem with my html?

#15 
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Title</title>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

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

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  </head>

  <body>

    <div class="jumbotron jumbotron-fluid">

      <div class="container">

        <h1 class="display-4">Welcome</h1>

      </div>

    </div>

    <div class="container">

        <button id="login_button">Sign in with MetaMask</button>

        <div id="game">

            <div class row>

                <div class="col-md-8">

                    <img src="pet.png" id="pet_img">

                </div>

                <div class="col-md-4">

                </div>

            </div>

        </div>

    </div> 

    <script type="text/javascript">
#16

Try this:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Title</title>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

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

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


  </head>

  <body>

    <div class="jumbotron jumbotron-fluid">

      <div class="container">

        <h1 class="display-4">Welcome</h1>

      </div>

    </div>

    <div class="container">

        <button id="login_button">Sign in with MetaMask</button>

        <div id="game">

            <div class row>

                <div class="col-md-8">

                    <img src="pet.png" id="pet_img">

                </div>

                <div class="col-md-4">

                </div>

            </div>

        </div>

    </div> 

    <script type="text/javascript">
Moralis.initialize("hfKetq0CybZQpezveB6vqHLaJeexXw6dNx7lIa6l"); // Application id from moralis.io

Moralis.serverURL = "https://opp6jmpbtqas.moralishost.com:2053/server"; //Server url from moralis.

async function init() {

    try {

        let User = Moralis.User.current();

        if(!User){

            $("#login_button").click( async () => {

                User = await Moralis.authenticate();
                console.log("here");
            })

        } else {  

        renderGame();

    } 

    }catch (error) {

        console.log(error);

    }

}    

function renderGame(){

        $("#game").show();

        $("#login_button").hide();

}

init();

    </script>

  </body>

</html>
#17

still same or i need active server first?

#18

sorry because i still blur

#19

What you expect to see and you don’t see?

#20

By active server you mean a local http server? If that is what you mean, then yes, you have to run a local http server and then to open that html page in the browser by using that local http server.

#21

i mean do i need active this first?

Untit1111led
Untit1111led1920×1280 132 KB

#22

No, for what you are doing now it should work fine without activating this.

#23

You ca type in browser console Moralis.User.logOut() in case that you want to see the login button