web/display.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>display</title>
    <!-- <link href="style.css" rel="stylesheet" /> -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

  </head>

  <body>
    <div id="main">
      <h1>Moody Brains NFT</h1>

      <div>
        <p>  nft contract: <span id="nft-contract-address"/></p>
        <p>  tokenId: <span id="tokenId"/></p>
      </div>

      <h3>metadata uri: </h3>
      <textarea id="metadata-uri" cols="120" rows="2"></textarea>

      <br/>

      <h3>metadata content: </h3>
      <textarea id="metadata-content" cols="90" rows="8"></textarea>

      <h3>image: </h3>

      <!-- display image hosted on IPFS -->

      <img id="nft-img" src="" alt="" />
    </div>

    <script>
      const web3 = new Web3(
        new Web3.providers.HttpProvider(
          "https://goerli.infura.io/v3/b7c22d73c16e4c0ea3f88dadbdffbe03"
        )
      );
      console.log("web3: ", web3);
      const ipfsGateway = "https://ipfs.nft.gstop-sandbox.com/ipfs/";

      function ipfsUriToHttpUri(ipfsUri) {
        return ipfsGateway + ipfsUri.substring("ipfs://".length);
      }

      // functions:
      function readMetadata(url) {
        fetch(url)
          .then( r => r.text() )
          .then( t => {
            $("#metadata-content").val(t);

            loadImage(t);
          });
      }

      function loadImage( metaData) {
        const meta = JSON.parse(metaData);
        console.log("meta:", meta);

        $("#nft-img").attr("src", ipfsUriToHttpUri(meta.image));
        $("#nft-img").attr("alt", meta.description);
      }

      function fetchNftUri() {
        const abi = [{
          "inputs": [
            {
              "internalType": "uint256",
              "name": "tokenId",
              "type": "uint256"
            }
          ],
          "name": "uri",
          "outputs": [
            {
              "internalType": "string",
              "name": "",
              "type": "string"
            }
          ],
          "stateMutability": "view",
          "type": "function",
          "constant": true
        }];

        const address = "0x677b26373e125d8b68F2f33f23A2027e7881c3B9";
        // tokenID = 4 << 224 + 1
        const tokenID = "107839786668602559178668060348078522694548577690162289924414440996865";

        $("#nft-contract-address").html(address);
        $("#tokenId").html(tokenID);

        const contract = new web3.eth.Contract(abi, address);
        contract.methods.uri(tokenID).call().then(function(res) {
          console.log("res:", res);
          $("#metadata-uri").val(res);
          const metadataUri = ipfsUriToHttpUri(res)
          readMetadata(metadataUri);
        });
      }

      fetchNftUri();
      setInterval(fetchNftUri, 12000);
    </script>
  </body>

</html>