tokenSupply.html

---
layout: default
---

<div class="container">
  <h1>Watch Total Supply</h1>
  <div class="p-5 mb-4 bg-light rounded-3" id="startForm">
    <div class="container-fluid py-5">
      <h2 class="display-5 fw-bold">Start Here</h1>
      <p>Get a free API key from <a href="https://etherscan.io/myapikey">https://etherscan.io/myapikey</a>.</p>
      <label for="apiKey" class="form-label">Etherscan API Key</label>
      <input type="text" class="form-control" id="apiKey" value="" required>
      <hr/>
      <button id="startButton" class="btn btn-primary btn-lg" type="button">Start</button>
    </div>
  </div>

  <div id="addNewContract" class="row"></div>

  <div id="watchedContracts" class="row"></div>

</div>

{% include jquery.html %}

<script>
  $("title").html("Token Supply")

  async function trackTokenMaxTotalSuply(contract, name, supply) {
    $("#watchedContracts").append("<div id=\"" + name.toLowerCase().trim() + "\"><h3>" + name + "</h3>...</div>")
    
    setInterval(function() {
        $.ajax({
          dataType: "json",
          url: "https://api.etherscan.io/api?module=stats&action=tokensupply&contractaddress=" + contract + "&apikey=" + $("#apiKey").val(),
          success: function(result) {

            const maxTotalSupply = result.result;
            console.log("maxTotalSupply:", name.toLowerCase().trim(), maxTotalSupply)

            $("#" + name.toLowerCase().trim()).html(
              "<h3>" + name + "</h3>" +
              "<p>" + maxTotalSupply + " / " + supply + "</p>")
            
            $("title").html(name + ": " + maxTotalSupply + "/" + supply)

          }
        });
      }, 10000)
  }

  $(document).ready(function() {
    $("#startButton").click(function() {  
      $("#startForm").hide()

      $("#addNewContract").html("<div id=\"newContract\" class=\"col\">" +
          "<details class=\"p-5 mb-4 bg-light rounded-3\">" +
            "<summary><strong>Add New Contract</strong></summary>" +
            "<label for=\"caddrEth\" class=\"form-label\">Ethereum Contract</label>" +
            "<input type=\"text\" class=\"form-control\" id=\"caddrEth\" value=\"\" required>" +
            "<label for=\"cnameEth\" class=\"form-label\">NFT Name</label>" +
            "<input type=\"text\" class=\"form-control\" id=\"cnameEth\" value=\"\" required>" +
            "<label for=\"maxSupply\" class=\"form-label\">Max Supply</label>" +
            "<input type=\"text\" class=\"form-control\" id=\"maxSupply\" value=\"\" required>" +
            "<hr/>" +
            "<button id=\"startWatchingContract\" class=\"btn btn-primary btn-lg\" type=\"button\">Start</button>" +
          "</<details>" +
        "</div>")
      
        $("#startWatchingContract").click(function() {
          console.log("call trackTokenMaxTotalSuply:", $("#caddrEth").val());

          trackTokenMaxTotalSuply($("#caddrEth").val(), $("#cnameEth").val(), $("#maxSupply").val())
          $("#caddrEth").val("")
          $("#cnameEth").val("")
          $("#maxSupply").val("")
        })

    })

  })
</script>