92 lines
3.4 KiB
HTML
92 lines
3.4 KiB
HTML
{{define "specific"}}{{$data := .}}
|
|
<h1>NFT Token Detail</h1>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table data-table">
|
|
<tbody>
|
|
<tr>
|
|
<td style="width: 25%;">Token ID</td>
|
|
<td class="data">{{$data.TokenId}}</td>
|
|
</tr>
|
|
<tr id="name" style="display: none;">
|
|
<td>NTF Name</td>
|
|
<td class="data"></td>
|
|
</tr>
|
|
<tr id="description" style="display: none;">
|
|
<td>NTF Description</td>
|
|
<td class="data"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Contract</td>
|
|
<td class="data"><a href="/address/{{$data.ContractInfo.Contract}}">{{$data.ContractInfo.Contract}}</a> {{$data.ContractInfo.Name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Contract type</td>
|
|
<td class="data">{{$data.ContractInfo.Type}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6" id="image"></div>
|
|
</div>
|
|
<div id="metadatablock">
|
|
<h5>Metadata</h5>
|
|
<div class="json">
|
|
<pre id="raw">Loading metadata from <a href="{{$data.URI}}">{{$data.URI}}</a>...</pre>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
function showImage(s) {
|
|
const img = document.createElement("img");
|
|
img.className="border w-100";
|
|
img.src = s;
|
|
const src = document.getElementById("image");
|
|
src.appendChild(img);
|
|
src.style.display="block";
|
|
}
|
|
function nftInfo(id,text) {
|
|
const src = document.getElementById(id);
|
|
src.getElementsByClassName('data')[0].innerText=text;
|
|
src.style.display='';
|
|
}
|
|
async function getMetadata(url) {
|
|
try {
|
|
const uri={{ jsStr $data.URI }};
|
|
if(uri) {
|
|
const response = await fetch(uri);
|
|
const contentType=response.headers.get('content-type');
|
|
if(contentType&&contentType.toString().startsWith("image/")) {
|
|
showImage(uri);
|
|
document.getElementById("metadatablock").style.display='none';
|
|
} else {
|
|
const data = await response.json();
|
|
document.getElementById("raw").innerHTML = syntaxHighlight(data);
|
|
if (data.name) {
|
|
nftInfo('name',data.name)
|
|
}
|
|
if (data.description) {
|
|
nftInfo('description',data.description)
|
|
}
|
|
if (data.image||data.image_url) {
|
|
let s=data.image?.toString();
|
|
if(!s) {
|
|
s=data.image_url;
|
|
}
|
|
if(s.startsWith("ipfs://")) {
|
|
s=s.replace("ipfs://","https://ipfs.io/ipfs/");
|
|
}
|
|
if(s.startsWith("https://")) {
|
|
showImage(s);
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
document.getElementById("raw").innerText = "Error: cannot get metadata link from blockchain";
|
|
}
|
|
} catch(e) {
|
|
document.getElementById("raw").innerText = "Error loading metadata: "+e;
|
|
}
|
|
}
|
|
getMetadata();
|
|
</script>
|
|
{{end}} |