Installing the moralis sdk and web3

#1

please I’d like to be guided on this, I can’t connect properly to the web3 and Metamask authenticate with these index.html codes I have been working on.

<!doctype html>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">

<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<meta name="generator" content="Hugo 0.88.1">

<title>Dashboard Template · Bootstrap v5.1</title>

<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/dashboard/">

<link href="bootstrap-5.1.3-examples/assets/dist/css/bootstrap.min.css" rel="stylesheet">



<!--INSTALL Moralis SDK code and WEB3 -->

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

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

<style>

  .bd-placeholder-img {

    font-size: 1.125rem;

    text-anchor: middle;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;

  }

  @media (min-width: 768px) {

    .bd-placeholder-img-lg {

      font-size: 3.5rem;

    }

  }

</style>



<!-- Custom styles for this template -->

<link href="dashboard.css" rel="stylesheet">

METASEA

<span class="navbar-toggler-icon"></span>

<div class="nav-item text-nowrap">

  <a class="nav-link px-3" href="#" id="btn-logout">Sign out</a>

</div>

<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">

  <div class="position-sticky pt-3">

    <ul class="nav flex-column">

      <li class="nav-item">

        <a class="nav-link active" aria-current="page" href="#">

          <span data-feather="home"></span>

          Dashboard

        </a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">

          <span data-feather="file"></span>

          Orders

        </a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">

          <span data-feather="shopping-cart"></span>

          Products

        </a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">

          <span data-feather="users"></span>

          Customers

        </a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">

          <span data-feather="bar-chart-2"></span>

          Reports

        </a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">

          <span data-feather="layers"></span>

          Integrations

        </a>

      </li>

    </ul>

    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">

      <span>Saved reports</span>

      <a class="link-secondary" href="#" aria-label="Add a new report">

        <span data-feather="plus-circle"></span>

      </a>

    </h6>

    <ul class="nav flex-column mb-2">

      <li class="nav-item">

        <a class="nav-link" href="#">

          <span data-feather="file-text"></span>

          Current month

        </a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">

          <span data-feather="file-text"></span>

          Last quarter

        </a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">

          <span data-feather="file-text"></span>

          Social engagement

        </a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">

          <span data-feather="file-text"></span>

          Year-end sale

        </a>

      </li>

    </ul>

  </div>

</nav>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">

  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">

    <h1 class="h2">Dashboard</h1>

    <div class="btn-toolbar mb-2 mb-md-0">

      <div class="btn-group me-2">

        <button type="button" id="btn-login" class="btn btn-ma

        btn-outline-secondary">Login</button>

   

      </div>

     

    </div>

  </div>

 

  <h2>Section title</h2>

 

</main>

<script src="bootstrap-5.1.3-examples/assets/dist/js/bootstrap.bundle.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>

AND FOR THE DASHBOARD

/ MORALIS CODE

(async function {}{

const serverUrl = “https://ki0eilvvzgea.usemoralis.com:2053/server”

const appId = “i1LmvkGjUZbIMwUGMsGwgH6HZ5GREvH5YRq4yGwT”

await Moralis.start({serverUrl, appId})

})()

async function login() {

await Moralis.authenticate();

}

async function logout() {

await Moralis.user.logout();

}

document.getElementById(“btn-login”).oneclick = login;

document.getElementById(“btn-logout”).oneclick = logout;

// OLD BOOTSTRAP CODE

(function () {

‘use strict’

feather.replace({ ‘aria-hidden’: ‘true’ })

// Graphs

var ctx = document.getElementById(‘myChart’)

// eslint-disable-next-line no-unused-vars

})()