github.com/trezor/blockbook@v0.4.1-0.20240328132726-e9a08582ee2c/static/templates/tokenDetail.html (about)

     1  {{define "specific"}}{{$data := .}}
     2  <h1>NFT Token Detail</h1>
     3  <div class="row">
     4      <div class="col-md-6">
     5          <table class="table data-table info-table">
     6              <tbody>
     7                  <tr>
     8                      <td style="width: 25%;">Token ID</td>
     9                      <td><span class="copyable">{{$data.TokenId}}</span></td>
    10                  </tr>
    11                  <tr id="name" style="display: none;">
    12                      <td>NTF Name</td>
    13                      <td class="copyable"></td>
    14                  </tr>
    15                  <tr id="description" style="display: none;">
    16                      <td>NTF Description</td>
    17                      <td></td>
    18                  </tr>
    19                  <tr>
    20                      <td>Contract</td>
    21                      <td><a href="/address/{{$data.ContractInfo.Contract}}"><span class="copyable">{{$data.ContractInfo.Contract}}</span></a><br>{{$data.ContractInfo.Name}}</td>
    22                  </tr>
    23                  <tr>
    24                      <td>Contract type</td>
    25                      <td>{{$data.ContractInfo.Type}}</td>
    26                  </tr>
    27              </tbody>
    28          </table>
    29      </div>
    30      <div class="col-md-6 mt-4" id="image"></div>
    31  </div>
    32  <div id="metadatablock">
    33      <h5>Metadata</h5>
    34      <div class="json">
    35          <pre id="raw">Loading metadata from <a href="{{$data.URI}}">{{$data.URI}}</a>...</pre>
    36      </div>
    37  </div>
    38  <script type="text/javascript">
    39      function showImage(s) {
    40          const img = document.createElement("img");
    41          img.className="border w-100 bg-white";
    42          img.src = s;
    43          const src = document.getElementById("image");
    44          src.appendChild(img);
    45          src.style.display="block";
    46      }
    47      function nftInfo(id,text) {
    48          const src = document.getElementById(id);
    49          src.getElementsByTagName("td")[1].innerText=text;
    50          src.style.display='';
    51      }
    52      async function getMetadata(url) {
    53          try {
    54              const uri={{ jsStr $data.URI }};
    55              if(uri) {
    56                  const response = await fetch(uri);
    57                  const contentType=response.headers.get('content-type');
    58                  if(contentType&&contentType.toString().startsWith("image/")) {
    59                      showImage(uri);
    60                      document.getElementById("metadatablock").style.display='none';
    61                  } else {
    62                      const data = await response.json();
    63                      document.getElementById("raw").innerHTML = syntaxHighlight(data);
    64                      if (data.name) {
    65                          nftInfo('name',data.name)
    66                      }
    67                      if (data.description) {
    68                          nftInfo('description',data.description)
    69                      }
    70                      if (data.image||data.image_url) {
    71                          let s=data.image?.toString();
    72                          if(!s) {
    73                              s=data.image_url;
    74                          }
    75                          if(s.startsWith("ipfs://")) {
    76                              s=s.replace("ipfs://","https://ipfs.io/ipfs/");
    77                          }
    78                          if(s.startsWith("https://")) {
    79                              showImage(s);
    80                          }
    81                      }
    82                  }
    83              } else {
    84                  document.getElementById("raw").innerText = "Error: cannot get metadata link from blockchain";
    85              }
    86          } catch(e) {
    87              document.getElementById("raw").innerText = "Error loading metadata: "+e;
    88          }
    89      }
    90      getMetadata();
    91  </script>
    92  {{end}}