Here are HTML and JS (CSS is empty for now)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<title>Dan's Dashboard</title>
<script src="https://unpkg.com/@metamask/legacy-web3@latest/dist/metamask.web3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Welcome to Dan's NFT Dashboard!!! :)</h1>
</div>
</div>
<div class="container">
<div>
<button id="btnConnect">Connect Wallet</button>
<button id="btnUserInfo">Profile</button>
</div>
<button class="enableEthereumButton" onclick="login()">Login with Metamask</button>
<h2>Account: <span class="showAccount"></span></h2>
<div class="row" id="app"></div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
main.js
Moralis.initialize("aYYuFkYRdM5AeqaIxxdH0Ir5qRVjAqk0GsYoNsci"); // Application id from moralis.io
Moralis.serverURL = "https://nxg5nmdlyysy.moralishost.com:2053/server"; //Server url from moralis.io
const CONTRACT_ADDRESS = "0x5eaf190b963a4b3f67005c573761392a5186b52a"
init = async () => {
window.web3 = await Moralis.Web3.enable();
initUser();
}
login = async () => {
if (await Moralis.User.current()){
hideElement(userConnectButton);
showElement(userProfileButton);
}else{
showElement(userConnectButton);
hideElement(userProfileButton);
}
} catch (error) {
alert(error)
}
initUser = async () => {
if (await Moralis.User.current()){
hideElement(userConnectButton);
showElement(userProfileButton);
}else{
showElement(userConnectButton);
hideElement(userProfileButton);
}
}
hideElement = (element) => element.style.display = "none";
showElement = (element) => element.style.display = "block";
const userConnectButton = document.getElementById("btnConnect");
userConnectButton.onclick = login;
const userProfileButton = document.getElementById("btnUserInfo");
init();
document.getElementById("login_button").onclick = login;
const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');
async function login(){
console.log("login clicked");
var user = await Moralis.Web3.authenticate();
if(user){
console.log(user);
user.save();
}
}
ethereumButton.addEventListener('click', () => {
getAccount();
});
async function getAccount() {
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
const account = accounts[0];
showAccount.innerHTML = account;
}
function fetchNFTMetadata(NFTs){
let promises = [];
for (let i = 0; i < NFTs.length; i++) { let nft = NFTs[i]; let id = nft.token_id;
let nft = NFTs[i];
let id = nft.token_id;
//Call Moralis Cloud function -> Static JSON file
promises.push(fetch("https://nxg5nmdlyysy.moralishost.com:2053/server/functions/getNFT?_ApplicationId=aYYuFkYRdM5AeqaIxxdH0Ir5qRVjAqk0GsYoNsci=" + id)
.then(res => res.json())
.then(res => JSON.parse(res.result))
.then(res => {nft.metadata = res})
.then(res => {
const options = { address: "", token_id: id, chain: "rinkeby" };
return Moralis.Web3API.token.getTokenIdOwners(options)
})
.then( (res) => {console.log(res)
nft.owners = [];
res.result.forEach(element => {
nft.owners.push(element.ownerOf);
});
return nft;
}))
}
return Promise.all(promises);
}
function renderInventory(NFTs){
const parent = document.getElementById("app");
for (let i = 0; i < NFTs.length; i++) {
const nft = NFTs[i];
let htmlString = `
<div class="app">
<img class="card-img-top" src="${nft.metadata.image}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">${nft.metadata.name}</h5>
<p class="card-text">${nft.metadata.description}.</p>
<p class="card-text">Number of owners: ${nft.owners.length}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
`
let col = document.createElement("div");
col.classname = "col col-md-4"
col.innerHTML = htmlString;
parent.appendChild(col);
}
}
async function initializeApp(){
let currentUser = Moralis.User.current();
if(!currentUser){
currentUser = await Moralis.Web3.authenticate();
}
alert("User is signed in");
const options = { address: CONTRACT_ADDRESS, chain: "rinkeby" };
let NFTs = await Moralis.Web3API.token.getAllTokenIds(options);
renderInventory(NFTWithMetadata);
}
cloud function on admin.moralis.io is as follows:
Moralis.Cloud.define("getNFT", async (request) => {
const logger = Moralis.Cloud.getLogger();
let NFTId = request.params.nftId;
let hexId = parselnt(NFTId).toString(16);
let paddedHex = ("0000000000000000000000000000000000000000000000000000000000000000" + hexId).slice(-64)
logger.info(paddedHex);
return Moralis.Cloud.httpRequest({url: "https://nxg5nmdlyysy.moralishost.com/" + paddedHex + ".json"})
.then(function(httpResponse){
return httpResponse.text;
})
})
-
any tips on how to make it work and how to continue with my goal? am I wrong to assume that with MetaMask updates - some of the tutorials are slightly out of date now? I used solidity to get my test NFTs onto OpenSea rinkeby testnet, that works fineā¦
-
also i have some confusion when I deployā¦ the site itself is:
https://nxg5nmdlyysy.moralishost.com
so should i use this or https://nxg5nmdlyysy.moralishost.com:2053/server
-
eventually have a generative NFT project there too and 1inch integration
-
lastly, how would I go about making this project (when complete) work on a unstoppable domain hosting of my own that I have? have a redirect there, or there a neater way of going about it?
Thanks to whoever is willing to lend a guiding hand to set me straight!
p.s.: sorry I had to split this into two posts and replace āhttpsā with āLINKā instead, otherwise, forum rules are limiting me to ānew users are only allowed to post two links per postā and I canāt post at all
p.s. 2: lol by posting this I can now post multiple links, so I replaced it back with originals, no more LINK instead of https for the sake of clarity
