I think these are all the relevant codes in main.js, index.html and cloud functions respectively :
renderItem = (item) => {
const itemForSale = marketplaceItemTemplate.cloneNode(true);
if (item.sellerAvatar){
itemForSale.getElementsByTagName("img")[0].src = item.sellerAvatar.url();
itemForSale.getElementsByTagName("img")[0].alt = item.sellerUsername;
itemForSale.getElementsByTagName("span")[0].innerText = item.sellerUsername;
}
itemForSale.getElementsByTagName("img")[1].src = item.image;
itemForSale.getElementsByTagName("img")[1].alt = item.name;
itemForSale.getElementsByTagName("h5")[0].innerText = item.name;
itemForSale.getElementsByTagName("p")[0].innerText = item.description;
itemForSale.getElementsByTagName("button")[0].innerText = `Te koop voor ${item.askingPrice}`;
itemForSale.getElementsByTagName("button")[0].onclick = () => buyItem(item);
itemForSale.id = `item-${item.uid}`;
itemsForSale.appendChild(itemForSale);
}
getAndRenderItemData = (item, renderFunction) => {
fetch(item.tokenUri)
.then(response => response.json())
.then(data => {
item.name = data.name;
item.description = data.description;
item.image = data.image;
renderFunction(item);
})
}
ensureMarketplaceIsApproved = async (tokenId, tokenAddress) => {
user = await Moralis.User.current();
const userAddress = user.get('ethAddress');
const contract = new web3.eth.Contract(tokenContractAbi, tokenAddress);
const approvedAddress = await contract.methods.getApproved(tokenId).call({from: userAddress});
if (approvedAddress != MARKETPLACE_CONTRACT_ADDRESS);
await contract.methods.approve(MARKETPLACE_CONTRACT_ADDRESS, tokenId).send({from: userAddress});
}
const userItemTemplate = initTemplate("itemTemplate");
const marketplaceItemTemplate = initTemplate("marketplaceItemTemplate");
//items for sale
const itemsForSale = document.getElementById("ItemsForSale");
<div class="col mb-4" id="marketplaceItemTemplate">
<div class="card h-100 border-light bg-transparent text-light">
<nav class="card-header navbar navbar-dark text-light p-1">
<img src="" alt="">
<span></span>
</nav>
<img src="..." class="card-img-top" alt="...">
<div class="card-body c-flex align-items-end">
<div class="w-100">
<h5 class="card-title"></h5>
<p class="card-text"></p>
<button class="btn btn-primary"></button>
</div>
</div>
</div>
</div>
<div class="col mb-4" id="itemTemplate">
<div class="card h-100 border-light bg-transparent text-light">
<img src="..." class="card-img-top" alt="...">
<div class="card-body c-flex align-items-end">
<div class="w-100">
<h5 class="card-title"></h5>
<p class="card-text"></p>
<div class="input-group mb-3">
<input type="number" min="1" step="1" class="form-control" placeholder="price">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">te koop zetten</button>
</div>
</div>
</div>
</div>
</div>
</div>
Moralis.Cloud.define("getItems", async (request) => {
const query = new Moralis.Query("ItemsForSale");
query.notEqualTo("isSold", true);
query.select("uid", "askingPrice", "tokenAddress", "tokenId", "token.token_uri", "token.symbol", "token.owner_of", "token.id", "user.avatar");
const queryResults = await query.find({useMasterKey:true});
const results = [];
for (let i = 0; i < queryResults.length; ++i) {
if (!queryResults[i].attributes.token || !queryResults[i].attributes.user) continue;
results.push({
"uid": queryResults[i].attributes.uid,
"tokenId": queryResults[i].attributes.token_id,
"tokenAddress": queryResults[i].attributes.tokenAddress,
"askingPrice": queryResults[i].attributes.askingPrice,
"symbol": queryResults[i].attributes.token.attributes.symbol,
"tokenUri": queryResults[i].attributes.token.attributes.token_uri,
"ownerOf": queryResults[i].attributes.token.attributes.owner_of,
"tokenObjectId": queryResults[i].attributes.token.id,
"sellerUsername": queryResults[i].attributes.user.attributes.username,
"sellerAvatar": queryResults[i].attributes.user.attributes.avatar,
});
}
return results;
});
Moralis.Cloud.define("getItem", async (request) => {
const query = new Moralis.Query("ItemsForSale");
query.EqualTo("uid", request.params.uid);
query.select("uid", "askingPrice", "tokenAddress", "tokenId", "token.token_uri", "token.symbol", "token.owner_of","token.id", "user.avatar", "user.username");
const queryResult = await query.first({useMasterKey:true});
if (!queryResult) return;
return {
"uid": queryResult.attributes.uid,
"tokenId": queryResult.attributes.token_id,
"tokenAddress": queryResult.attributes.tokenAddress,
"askingPrice": queryResult.attributes.askingPrice,
"symbol": queryResult.attributes.token.attributes.symbol,
"tokenUri": queryResult.attributes.token.attributes.token_uri,
"ownerOf": queryResult.attributes.token.attributes.owner_of,
"tokenObjectId": queryResult.attributes.token.id,
"sellerUsername": queryResult.attributes.user.attributes.username,
"sellerAvatar": queryResult.attributes.user.attributes.avatar,
};
});
