This repository has been archived by the owner on Dec 14, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
nftexplorer.html
136 lines (111 loc) · 5.75 KB
/
nftexplorer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- Moralis SDK code -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<!-- <script src="serverInit.js"></script> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link href="css/hamburgers.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.0/dist/sweetalert2.all.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> -->
<!-- <script src="https://unpkg.com/moralis/dist/moralis.js"></script> -->
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Monda:wght@400;700&family=Monoton&display=swap" rel="stylesheet">
</head>
<body>
<h1>NFT Explorer</h1>
<p>Enter your address and chain and get all nfts owned by this address</p>
<!-- <h5>Example Token and marketplace creator contract</h5>
<p>0x8Ab2A64D0767140ADc2886EAB4ac2e9a48fda03b</p>
<h5>Example Ropsten Musicshares Marketplace Contract</h5>
<p>0x043810700FB24A6b7925F2FF274C3E198827d790</p>
<p> -->
Address: <input type="text" id="address" size="64" maxlength='64' />
<!-- Contract: <input type="text" id="contract" size="64" maxlength='64' /> -->
<!-- Token Id: <input type="text" id="tokenid" size="64" maxlength='64' /> -->
<br />
Chain: <select id="chain">
<option value="">Make choice...</option>
<option value="eth">ETH</option>
<option value="bsc">BSC</option>
<option value="polygon">Polygon</option>
<option value="ropsten">Rospten</option>
<option value="mumbai">Mumbai</option>
<option value="ganache">ganache</option>
</select><br />
<button id="btnUpdate">Update</button>
</p>
<h3>Content</h3>
<div id="content"></div>
<script>
/*********************************************************************************************
.) MORALIS (for loggin and other quickfixes)
**********************************************************************************************/
// 0. Check moralis
const serverUrl = "https://hyorvrgxcdmm.usemoralis.com:2053/server";
const appId = "Lx28OvD1jYsfl8Q52brKgUbJ1yGP9kWgffDg2hrU";
Moralis.start({
serverUrl,
appId
});
// Moralis.initialize("6ijYYFc2YUeFADZCLhzBGav42qM0AiHJPODxY9mB");
// Moralis.serverURL = "https://oxhqnewiq4eg.moralis.io:2053/server";
// const IPFSGATEWAY= 'https://ipfs.moralis.io:2053/ipfs/';
const IPFSGATEWAY= 'https://ipfs.io/ipfs/';
async function getNFTs(chain, address) {
// get polygon NFTs for address
const options = { chain: chain, address: address };
var maxnr = 10;
const nftCount = await Moralis.Web3.getNFTsCount(options);
$("#content").html("<p>Items count: " + nftCount + " (max " + maxnr + " listed)</p>");
if (nftCount > 0) {
const allNFTs = await Moralis.Web3.getNFTs(options);
//console.log(allNFTs);
allNFTs.forEach( (nft) => {
console.log(nft);
if (maxnr > 0) {
fetch(fixURL(nft.token_uri))
.then(response => response.json())
.then(data => {
$("#content").html($("#content").html()
+ "<div><img width='100' align='left' src='" + fixURL(data.image) + "' />"
+ "<h2>" + data.name +"</h2>"
+ "<p>" + nft.name+ "(" + nft.symbol+ ")"+ "</p>"
+ "<p> ID:" + nft.token_id + ", contract: "+nft.token_address +"</p>"
+ "<a href='"+ nft.token_uri +"'>" + nft.token_uri +"</a>"
+ "<p>" + data.description + "</p></div><br clear='all' />");
});
}
maxnr--;
});
}
}
// fix url for browsers that this ipfs:// doesnt work
fixURL = (url) => {
if (url.startsWith("ipfs")) {
return "https://ipfs.moralis.io:2053/ipfs/" + url.split("ipfs://ipfs/")[1];
} else {
return url + "?format=json";
}
}
document.getElementById("btnUpdate").onclick = () => {
console.log("Update!");
let chain = $("#chain").val();
let address = $("#address").val();
// let contract = $("#contract").val();
// let tokenid = $("#tokenid").val();
console.log("Update! chain="+chain+" address="+address);
if (typeof chain !== 'undefined' && typeof address != 'undefined') {
getNFTs(chain, address);
}
}
</script>
</body>
</html>