There is meant to be at least one, - according to the database - 5 NFTs displaying under the My Items heading. Completed right up to the end on Episode 9 of the rarible clone.
Hello!
It seems the tokenUri is undefined here. Can you check that by putting a console.log(item); between line 188 and the fetch() on line 189?
Can you also check that the tokenUri is returned by the cloud function?
If you need help with that, please post your cloud functions here.
Hi iām doing the same tutorial but a different issue.
When trying to install frpc.ini in powershell I get the following:
Try the new cross-platform PowerShell https://aka.ms/pscore6
PS C:\Users\dell> frpc.exe -c frpc.ini
frpc.exe : The term āfrpc.exeā is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:2
- frpc.exe -c frpc.ini
-
+ CategoryInfo : ObjectNotFound: (frpc.exe:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
PS C:\Users\dell>
Can anyone help a novice out 
1 Like
Hey @Keith82, hope you are great.
Are you sure to be inside the folder which contains the frpc.exe file?
If not, you should navigate into the folder of frpc and try the same command frpc.exe -c frpc.ini (I assume you already edit your .ini file)
Carlos Z
This is a screenshot including the console log - it displays the items in the console.
I also noticed my cloud function said tokenuri and not tokenUri and it said tokenid not tokenId (Iāve fixed this now)
Moralis.Cloud.define("getUserItems", async (request) => {
const query = new Moralis.Query("EthNFTTokenOwners");
query.equalTo("contract_type", "ERC721");
query.containedIn("owner_of", request.user.attributes.accounts);
const queryResults = await query.find();
const results = [];
for (let i = 0; i < queryResults.length; ++i) {
results.push({
"id": queryResults[i].attributes.objectId,
"tokenId": queryResults[i].attributes.token_id,
"tokenAddress": queryResults[i].attributes.token_address,
"symbol": queryResults[i].attributes.symbol,
"tokenUri": queryResults[i].attributes.token_uri,
});
}
return results;
});
After those fixes it no longer displays an error 404. But non the less It will not display the NFTs and Iāve made sure Iām using the same wallet that I initially created the NFTs with and all the database names are correct .
Update it isnāt displaying the console log either now after I changed the cloud function to aboveā¦weird.
Can you see if any network requests are done for the items in the networks tab in the browser?
I ran into a similar problem and checked the network tab in the browser console to find that it was carrying out the cloud function but was returning an empty array. From the looks of things my problem and solution are slightly different than what youāve got here, but that helped point me toward the solution, so I hope this helps!
upppp solved. syntax error on my end. everything is fully functioning.
Gentlemen, Deus here, with hope of course all is good with everyone - here in the community and at Moralis HQ. I am hoping you guys might help me with an apparent issue, where it seems Im stumped.
I have completed the series of tutorials and truth be told took a great deal of care and caution to proceed slowly through it all.
WIth that said, I managed what seemed like a completely functional NFT platform as envisioned by the videos - everything seemed to be working fine, with all things - with only a few minor issues that were overcome by combing through the forums etc,. tweaked things and wala, seemed there were no problems. I then took the project over to a mainnet server for BSC, added the latest cloud functions, and deployed the project.
It seemed that everything was working fine, authentication working flawlessly, connect metamask, authenticate, saving user data to profile, profile image, close, logout, create functions, NFTs minting and transfering to the user, creating and then to add to marketplace. I even seem to have the IPFS working - metadata accurately saved, I dont see any errors on the server log, I see the NFTs minted on chain with the contract transactions, sent to creator, see them in the database, can add the Nfts minted to the user wallet on metamask etc, however for some reason, the items are not showing up in the My Items Tab. Additionally - no issue creating and minting an NFT and choosing add to marketplace, which does as well get minted and I can see the transaction succeed on the marketplace contract, however these too do not show up in the marketplace for sale field.
I promise that I did not come here immediately - and dove into the documentation and forums posts trying to figure out what might be the issue, if a code typo, diff checking, cloud function tweaks, restart, reset, Ive even rewritten the entire main.js from scratch, ultimately returned to Git to utilize the Main.js version uploaded there, to be honest I have a feeling whenever there might be an opportunity to have a look at this, someone there will laugh at what should be an obvious and simply syntax error, typo or to be honest I think a fresh pair of eyes might be the best thing. I have appended the code for the main files I currently have below
Would you guys please be so kind to have a look at these things and let me know what I might have done wrong, whenever you can of course, knowing that time is always limited - however - I would be very grateful and with certainty more than willing to be of any use to your efforts I can beā¦ moving forward So please know your effort is appreciated and not wasted in any sense of the word. Any help would be greatly appreciated. With many thanks in advance.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>DeusXNFT</title>
</head>
<body class="bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent border-bottom border-light">
<a class="navbar-brand btn btn-outline-moralis" href="https://deusex.me">DeusXNFT</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<form class="mx-2 d-inline flex-md-fill">
<input type="search" class="bg-transparent border-light form-control text-light mr-sm-2 rounded-pill" placeholder="Search by item or creator">
</form>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" id="btnMyItems" href="#">My items</a>
</li>
</ul>
<div class="d-flex">
<button class="btn btn-primary rounded-pill my-2 my-sm-0 mr-md-2" id="btnOpenCreateItem">Create</button>
<button class="btn btn-outline-moralis rounded-pill my-2 my-sm-0 " id="btnConnect">Connect wallet</button>
<button class="btn btn-outline-moralis rounded-pill my-2 my-sm-0" id="btnUserInfo">Profile</button>
</div>
</div>
</nav>
<div class="container">
<div class="row row-cols-1 row-cols-md-4 mt-5" id="itemsForSale">
</div>
</div>
<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 width="30" height="30" class="d-inline-block align-top rounded-circle" src="" alt="">
<span></span>
</nav>
<img src="..." class="card-img-top" alt="...">
<div class="card-body d-flex align-items-end">
<div class="w-100">
<h5 class="card-title"></h5>
<p class="card-text"></p>
<button class="btn btn-primary btn-block"></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 d-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">Put for sale</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="userInfo" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title" >User Profile</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txtUsername">Username</label>
<input type="text" class="form-control" id="txtUsername" required placeholder="Enter username">
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input type="email" class="form-control" id="txtEmail" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">Optional</small>
</div>
<img width="50" height="50" src="" id="imgAvatar" alt="">
<div class="form-group">
<label for="fileAvatar">Select Avatar</label>
<input type="file" class="form-control-file" id="fileAvatar">
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnLogout" class="btn btn-secondary" data-dismiss="modal">Log out</button>
<button type="button" id="btnCloseUserInfo" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="btnSaveUserInfo" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="createItem" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title" >Create Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txtUsername">Name</label>
<input type="text" class="form-control" id="txtCreateItemName" required placeholder="Enter name">
</div>
<div class="form-group">
<label for="txtCreateItemDescription">Description</label>
<textarea class="form-control" id="txtCreateItemDescription" cols="30" rows="5" placeholder="Enter description"></textarea>
</div>
<div class="form-group">
<label for="txtUsername">Price</label>
<input type="number" min="1" step="1" id="numCreateItemPrice" placeholder="Enter price" required class="form-control">
</div>
<div class="form-group">
<label for="selectCreateItemStatus">Status</label>
<select class="form-control" id="selectCreateItemStatus">
<option value="0">Not for sale</option>
<option value="1">Instant buy</option>
<option value="2">Accept Offers</option>
</select>
</div>
<div class="form-group">
<label for="fileCreateItemFile">Select file</label>
<input type="file" class="form-control-file" id="fileCreateItemFile">
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnCloseCreateItem" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="btnCreateItem" class="btn btn-primary">Create!</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="userItems" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title" >My Items</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body row row-cols-1 row-cols-md-4 mt-5" id="userItemsList">
</div>
<div class="modal-footer">
<button type="button" id="btnCloseUserItems" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></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 src="abi.js"></script>
<script src="main.js"></script>
</body>
</html>
Main.js
Moralis.initialize("WUNQzSCAB0yHbYxLHNMAmL9c3zXj4O7LebRVFHoy");
Moralis.serverURL = 'https://fpbra76lvxeo.moralisweb3.com:2053/server'
const TOKEN_CONTRACT_ADDRESS = "0x4debe1f0a68cd304632be592166447b24ee78c0b";
const MARKETPLACE_CONTRACT_ADDRESS = "0xdbb8227d2bdc52c446e142f860270f8277f6c759";
init = async () => {
hideElement(userItemsSection);
window.web3 = await Moralis.Web3.enable();
window.tokenContract = new web3.eth.Contract(tokenContractAbi, TOKEN_CONTRACT_ADDRESS);
window.marketplaceContract = new web3.eth.Contract(marketplaceContractAbi, MARKETPLACE_CONTRACT_ADDRESS);
initUser();
loadItems();
const soldItemsQuery = new Moralis.Query('SoldItems');
const soldItemsSubscription = await soldItemsQuery.subscribe();
soldItemsSubscription.on("create", onItemSold);
const itemsAddedQuery = new Moralis.Query('ItemsForSale');
const itemsAddedSubscription = await itemsAddedQuery.subscribe();
itemsAddedSubscription.on("create", onItemAdded);
}
onItemSold = async (item) => {
const listing = document.getElementById(`item-${item.attributes.uid}`);
if (listing){
listing.parentNode.removeChild(listing);
}
user = await Moralis.User.current();
if (user){
const params = {uid: `${item.attributes.uid}`};
const soldItem = await Moralis.Cloud.run('getItem', params);
if (soldItem){
if (user.get('accounts').includes(item.attributes.buyer)){
getAndRenderItemData(soldItem, renderUserItem);
}
const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
if (userItemListing) userItemListing.parentNode.removeChild(userItemListing);
}
}
}
onItemAdded = async (item) => {
const params = {uid: `${item.attributes.uid}`};
const addedItem = await Moralis.Cloud.run('getItem', params);
if (addedItem){
user = await Moralis.User.current();
if (user){
if (user.get('accounts').includes(addedItem.ownerOf)){
const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
if (userItemListing) userItemListing.parentNode.removeChild(userItemListing);
getAndRenderItemData(addedItem, renderUserItem);
return;
}
}
getAndRenderItemData(addedItem, renderItem);
}
}
initUser = async () => {
if (await Moralis.User.current()){
hideElement(userConnectButton);
showElement(userProfileButton);
showElement(openCreateItemButton);
showElement(openUserItemsButton);
loadUserItems();
}else{
showElement(userConnectButton);
hideElement(userProfileButton);
hideElement(openCreateItemButton);
hideElement(openUserItemsButton);
}
}
login = async () => {
try {
await Moralis.Web3.authenticate();
initUser();
} catch (error) {
alert(error)
}
}
logout = async () => {
await Moralis.User.logOut();
hideElement(userInfo);
initUser();
}
openUserInfo = async () => {
user = await Moralis.User.current();
if (user){
const email = user.get('email');
if(email){
userEmailField.value = email;
}else{
userEmailField.value = "";
}
userUsernameField.value = user.get('username');
const userAvatar = user.get('avatar');
if(userAvatar){
userAvatarImg.src = userAvatar.url();
showElement(userAvatarImg);
}else{
hideElement(userAvatarImg);
}
$('#userInfo').modal('show');
}else{
login();
}
}
saveUserInfo = async () => {
user.set('email', userEmailField.value);
user.set('username', userUsernameField.value);
if (userAvatarFile.files.length > 0) {
const avatar = new Moralis.File("avatar1.jpg", userAvatarFile.files[0]);
user.set('avatar', avatar);
}
await user.save();
alert("User info saved successfully!");
openUserInfo();
}
createItem = async () => {
if (createItemFile.files.length == 0){
alert("Please select a file!");
return;
} else if (createItemNameField.value.length == 0){
alert("Please give the item a name!");
return;
}
const nftFile = new Moralis.File("nftFile.jpg",createItemFile.files[0]);
await nftFile.saveIPFS();
const nftFilePath = nftFile.ipfs();
const metadata = {
name: createItemNameField.value,
description: createItemDescriptionField.value,
image: nftFilePath,
};
const nftFileMetadataFile = new Moralis.File("metadata.json", {base64 : btoa(JSON.stringify(metadata))});
await nftFileMetadataFile.saveIPFS();
const nftFileMetadataFilePath = nftFileMetadataFile.ipfs();
const nftId = await mintNft(nftFileMetadataFilePath);
user = await Moralis.User.current();
const userAddress = user.get('ethAddress');
switch(createItemStatusField.value){
case "0":
return;
case "1":
await ensureMarketplaceIsApproved(nftId, TOKEN_CONTRACT_ADDRESS);
await marketplaceContract.methods.addItemToMarket(nftId, TOKEN_CONTRACT_ADDRESS, web3.utils.toWei(createItemPriceField.value, "ether")).send({from: userAddress });
break;
case "2":
alert("Not yet supported!");
return;
}
}
mintNft = async (metadataUrl) => {
const receipt = await tokenContract.methods.createItem(metadataUrl).send({from: ethereum.selectedAddress});
console.log(receipt);
return receipt.events.Transfer.returnValues.tokenId;
}
openUserItems = async () => {
user = await Moralis.User.current();
if (user){
$('#userItems').modal('show');
}else{
login();
}
}
loadUserItems = async () => {
const ownedItems = await Moralis.Cloud.run("getUserItems");
ownedItems.forEach(item => {
const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
if (userItemListing) return;
getAndRenderItemData(item, renderUserItem);
});
}
loadItems = async () => {
const items = await Moralis.Cloud.run("getItems");
user = await Moralis.User.current();
items.forEach(item => {
if (user){
if (user.attributes.accounts.includes(item.ownerOf)){
const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
if (userItemListing) userItemListing.parentNode.removeChild(userItemListing);
getAndRenderItemData(item, renderUserItem);
return;
}
}
getAndRenderItemData(item, renderItem);
});
}
initTemplate = (id) => {
const template = document.getElementById(id);
template.id = "";
template.parentNode.removeChild(template);
return template;
}
renderUserItem = (item) => {
const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
if (userItemListing) return;
const userItem = userItemTemplate.cloneNode(true);
userItem.getElementsByTagName("img")[0].src = item.image;
userItem.getElementsByTagName("img")[0].alt = item.name;
userItem.getElementsByTagName("h5")[0].innerText = item.name;
userItem.getElementsByTagName("p")[0].innerText = item.description;
userItem.getElementsByTagName("input")[0].value = item.askingPrice ?? 1;
userItem.getElementsByTagName("input")[0].disabled = item.askingPrice > 0;
userItem.getElementsByTagName("button")[0].disabled = item.askingPrice > 0;
userItem.getElementsByTagName("button")[0].onclick = async () => {
user = await Moralis.User.current();
if (!user){
login();
return;
}
await ensureMarketplaceIsApproved(item.tokenId, item.tokenAddress);
await marketplaceContract.methods.addItemToMarket(item.tokenId, item.tokenAddress, userItem.getElementsByTagName("input")[0].value).send({from: user.get('ethAddress') });
};
userItem.id = `user-item-${item.tokenObjectId}`
userItems.appendChild(userItem);
}
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("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 = `Buy for ${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});
}
}
buyItem = async (item) => {
user = await Moralis.User.current();
if (!user){
login();
return;
}
await marketplaceContract.methods.buyItem(item.uid).send({from: user.get('ethAddress'), value: item.askingPrice});
}
hideElement = (element) => element.style.display = "none";
showElement = (element) => element.style.display = "block";
// Navbar
const userConnectButton = document.getElementById("btnConnect");
userConnectButton.onclick = login;
const userProfileButton = document.getElementById("btnUserInfo");
userProfileButton.onclick = openUserInfo;
const openCreateItemButton = document.getElementById("btnOpenCreateItem");
openCreateItemButton.onclick = () => $('#createItem').modal('show');
// User profile
const userInfo = document.getElementById("userInfo");
const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("txtEmail");
const userAvatarImg = document.getElementById("imgAvatar");
const userAvatarFile = document.getElementById("fileAvatar");
document.getElementById("btnCloseUserInfo").onclick = () => hideElement(userInfo);
document.getElementById("btnLogout").onclick = logout;
document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;
// Item creation
const createItemForm = document.getElementById("createItem");
const createItemNameField = document.getElementById("txtCreateItemName");
const createItemDescriptionField = document.getElementById("txtCreateItemDescription");
const createItemPriceField = document.getElementById("numCreateItemPrice");
const createItemStatusField = document.getElementById("selectCreateItemStatus");
const createItemFile = document.getElementById("fileCreateItemFile");
document.getElementById("btnCloseCreateItem").onclick = () => hideElement(createItemForm);
document.getElementById("btnCreateItem").onclick = createItem;
// User items
const userItemsSection = document.getElementById("userItems");
const userItems = document.getElementById("userItemsList");
document.getElementById("btnCloseUserItems").onclick = () => hideElement(userItemsSection);
const openUserItemsButton = document.getElementById("btnMyItems");
openUserItemsButton.onclick = openUserItems;
const userItemTemplate = initTemplate("itemTemplate");
const marketplaceItemTemplate = initTemplate("marketplaceItemTemplate");
// Items for sale
const itemsForSale = document.getElementById("itemsForSale");
init();
1 Like
Abi.js
var tokenContractAbi = [
{
"inputs": [],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "approved",
"type": "address"
},
{
"indexed": true,
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "Approval",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "operator",
"type": "address"
},
{
"indexed": false,
"internalType": "bool",
"name": "approved",
"type": "bool"
}
],
"name": "ApprovalForAll",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "from",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "to",
"type": "address"
},
{
"indexed": true,
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "Transfer",
"type": "event"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"name": "Items",
"outputs": [
{
"internalType": "uint256",
"name": "id",
"type": "uint256"
},
{
"internalType": "address",
"name": "creator",
"type": "address"
},
{
"internalType": "string",
"name": "uri",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "to",
"type": "address"
},
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "approve",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "owner",
"type": "address"
}
],
"name": "balanceOf",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "string",
"name": "uri",
"type": "string"
}
],
"name": "createItem",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "getApproved",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"internalType": "address",
"name": "operator",
"type": "address"
}
],
"name": "isApprovedForAll",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "name",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "ownerOf",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "from",
"type": "address"
},
{
"internalType": "address",
"name": "to",
"type": "address"
},
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "safeTransferFrom",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "from",
"type": "address"
},
{
"internalType": "address",
"name": "to",
"type": "address"
},
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
},
{
"internalType": "bytes",
"name": "_data",
"type": "bytes"
}
],
"name": "safeTransferFrom",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "operator",
"type": "address"
},
{
"internalType": "bool",
"name": "approved",
"type": "bool"
}
],
"name": "setApprovalForAll",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "bytes4",
"name": "interfaceId",
"type": "bytes4"
}
],
"name": "supportsInterface",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "symbol",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "tokenURI",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "from",
"type": "address"
},
{
"internalType": "address",
"name": "to",
"type": "address"
},
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "transferFrom",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
];
var marketplaceContractAbi = [
{
"anonymous": false,
"inputs": [
{
"indexed": false,
"internalType": "uint256",
"name": "id",
"type": "uint256"
},
{
"indexed": false,
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
},
{
"indexed": false,
"internalType": "address",
"name": "tokenAddress",
"type": "address"
},
{
"indexed": false,
"internalType": "uint256",
"name": "askingPrice",
"type": "uint256"
}
],
"name": "itemAdded",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": false,
"internalType": "uint256",
"name": "id",
"type": "uint256"
},
{
"indexed": false,
"internalType": "address",
"name": "buyer",
"type": "address"
},
{
"indexed": false,
"internalType": "uint256",
"name": "askingPrice",
"type": "uint256"
}
],
"name": "itemSold",
"type": "event"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
},
{
"internalType": "address",
"name": "tokenAddress",
"type": "address"
},
{
"internalType": "uint256",
"name": "askingPrice",
"type": "uint256"
}
],
"name": "addItemToMarket",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "id",
"type": "uint256"
}
],
"name": "buyItem",
"outputs": [],
"stateMutability": "payable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"name": "itemsForSale",
"outputs": [
{
"internalType": "uint256",
"name": "id",
"type": "uint256"
},
{
"internalType": "address",
"name": "tokenAddress",
"type": "address"
},
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
},
{
"internalType": "address payable",
"name": "seller",
"type": "address"
},
{
"internalType": "uint256",
"name": "askingPrice",
"type": "uint256"
},
{
"internalType": "bool",
"name": "isSold",
"type": "bool"
}
],
"stateMutability": "view",
"type": "function"
}
];
SotheNFTs.sol (token contract)
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
contract SotheNFTs is ERC721 {
using Counters for Counters.Counter;
Counters.Counter private _tokenIds;
constructor () ERC721("SotheNFTs", "SONFT"){}
struct Item {
uint256 id;
address creator;
string uri;
}
mapping (uint256 => Item) public Items;
function createItem(string memory uri) public returns (uint256){
_tokenIds.increment();
uint256 newItemId = _tokenIds.current();
_safeMint(msg.sender, newItemId);
Items[newItemId] = Item(newItemId, msg.sender, uri);
return newItemId;
}
function tokenURI(uint256 tokenId) public view override returns (string memory) {
require(_exists(tokenId), "ERC721Metadata: URI query for nonexistent token");
return Items[tokenId].uri;
}
}
Marketplace.sol (Marketplace contract)
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import "@openzeppelin/contracts/token/ERC721/IERC721.sol";
contract SotheNFTsMarketContract {
struct AuctionItem {
uint256 id;
address tokenAddress;
uint256 tokenId;
address payable seller;
uint256 askingPrice;
bool isSold;
}
AuctionItem[] public itemsForSale;
mapping (address => mapping (uint256 => bool)) activeItems;
event itemAdded(uint256 id, uint256 tokenId, address tokenAddress, uint256 askingPrice);
event itemSold(uint256 id, address buyer, uint256 askingPrice);
modifier OnlyItemOwner(address tokenAddress, uint256 tokenId){
IERC721 tokenContract = IERC721(tokenAddress);
require(tokenContract.ownerOf(tokenId) == msg.sender);
_;
}
modifier HasTransferApproval(address tokenAddress, uint256 tokenId){
IERC721 tokenContract = IERC721(tokenAddress);
require(tokenContract.getApproved(tokenId) == address(this));
_;
}
modifier ItemExists(uint256 id){
require(id < itemsForSale.length && itemsForSale[id].id == id, "Could not find item");
_;
}
modifier IsForSale(uint256 id){
require(itemsForSale[id].isSold == false, "Item is already sold!");
_;
}
function addItemToMarket(uint256 tokenId, address tokenAddress, uint256 askingPrice) OnlyItemOwner(tokenAddress,tokenId) HasTransferApproval(tokenAddress,tokenId) external returns (uint256){
require(activeItems[tokenAddress][tokenId] == false, "Item is already up for sale!");
uint256 newItemId = itemsForSale.length;
itemsForSale.push(AuctionItem(newItemId, tokenAddress, tokenId, payable(msg.sender), askingPrice, false));
activeItems[tokenAddress][tokenId] = true;
assert(itemsForSale[newItemId].id == newItemId);
emit itemAdded(newItemId, tokenId, tokenAddress, askingPrice);
return newItemId;
}
function buyItem(uint256 id) payable external ItemExists(id) IsForSale(id) HasTransferApproval(itemsForSale[id].tokenAddress,itemsForSale[id].tokenId){
require(msg.value >= itemsForSale[id].askingPrice, "Not enough funds sent");
require(msg.sender != itemsForSale[id].seller);
itemsForSale[id].isSold = true;
activeItems[itemsForSale[id].tokenAddress][itemsForSale[id].tokenId] = false;
IERC721(itemsForSale[id].tokenAddress).safeTransferFrom(itemsForSale[id].seller, msg.sender, itemsForSale[id].tokenId);
itemsForSale[id].seller.transfer(msg.value);
emit itemSold(id, msg.sender,itemsForSale[id].askingPrice);
}
}
Here finally a link to the live deployment:
Cloud Functions
Moralis.Cloud.define("getUserItems", async (request) => {
const query = new Moralis.Query("EthNFTOwners");
query.equalTo("contract_type", "ERC721");
query.containedIn("owner_of", request.user.attributes.accounts);
const queryResults = await query.find();
const results = [];
for (let i = 0; i < queryResults.length; ++i) {
results.push({
"tokenObjectId": queryResults[i].id,
"tokenId": queryResults[i].attributes.token_id,
"tokenAddress": queryResults[i].attributes.token_address,
"symbol": queryResults[i].attributes.symbol,
"tokenUri": queryResults[i].attributes.token_uri,
});
}
return results;
});
Moralis.Cloud.beforeSave("ItemsForSale", async (request) => {
const query = new Moralis.Query("EthNFTOwners");
query.equalTo("token_address", request.object.get('tokenAddress'));
query.equalTo("token_id", request.object.get('tokenId'));
const object = await query.first();
if (object){
const owner = object.attributes.owner_of;
const userQuery = new Moralis.Query(Moralis.User);
userQuery.equalTo("accounts", owner);
const userObject = await userQuery.first({useMasterKey:true});
if (userObject){
request.object.set('user', userObject);
}
request.object.set('token', object);
}
});
Moralis.Cloud.beforeSave("SoldItems", async (request) => {
const query = new Moralis.Query("ItemsForSale");
query.equalTo("uid", request.object.get('uid'));
const item = await query.first();
if (item){
request.object.set('item', item);
item.set('isSold', true);
await item.save();
const userQuery = new Moralis.Query(Moralis.User);
userQuery.equalTo("accounts", request.object.get('buyer'));
const userObject = await userQuery.first({useMasterKey:true});
if (userObject){
request.object.set('user', userObject);
}
}
});
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","user.username");
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.tokenId,
"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.tokenId,
"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,
};
});
Hi, @iamdeus,
I found a difference between your code and the one we provide in our tutorial repo.
Line 227 of main.js in your code -
renderUserItem = async (item) => {
Line 227 of main.js in tutorial code
renderUserItem = (item) => {
Also, Line171 of yours
await marketplaceContract.methods.addItemToMarket(nftId, TOKEN_CONTRACT_ADDRESS, web3.utils.toWei(createItemPriceField.value, "ether")).send({from: userAddress });
Do let me know this was intended. I was comparing your main.js with our styledfrontend main.js.
Also, are there errors in the google chrome console that can help? Because other than this, the entire code looks exactly the same.
Did I also tell you you have great writing skills! 
Haha.
Let me know if these small changes make any difference in the application. Or is there something big we are missing out?
Thanks.
1 Like
Malik thank you very much for having a look. Your time very much appreciated.
As to the two corrections you point out thank you. I have now fixed the line 227 to make the call Asynchronous. Now implemented as:
Line 227 to 229:
renderUserItem = async (item) => {
const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
if (userItemListing) return;
As to the correction noted in line 171 - this was intentional - tweaked this as a result of a discussion thread here in the forum where this code implimentation seemed to prove relevent with relation to the price input. Conversion to ETH or in my case BNB. In any case was yet to be seen as I have nbot seen any of the NFTs minted and listed for sale in the marketplace contract - actually display.
In any case, I corrected now to reflect exactly what - both you and the github indicate should be the final working code., which I have now:
Line 171:
await marketplaceContract.methods.addItemToMarket(nftId, TOKEN_CONTRACT_ADDRESS, createItemPriceField.value).send({from: userAddress });
Save, hard reset in the brower. CNTRL-F5 - and 
Sill nothing. Delete all cookies, refresh, reload, connect again Metamask, andā¦ same. No change. A look on the Chrome console: Nothing.
Im wondering. Is it possible that there is an added construct / setting or tweak not shown in the tutorials - given this is now a live BSC Mainet instance?
Hi,
There could be multiple problems, from a query not working to an error on displaying the data.
You can try to debug it from the first part to the last one, first time check if data should be available where you look, after that to check if the query returns the expected data, after that to check if it is properly displayed in the interface.
2 Likes
Ok looks like I have resolved the issue, Items showing up in the my items list, given the deployment being on the Binance Smart Chain rather than the Ethereum Network, seemed to be a simple tweak to reference the right Moralis database tables. Given the names of the database tables are generated differently on the BSC.
I changed my Cloud Functions to:
Moralis.Cloud.define("getUserItems", async (request) => {
const query = new Moralis.Query("BscNFTOwners");
query.equalTo("contract_type", "ERC721");
query.containedIn("owner_of", request.user.attributes.accounts);
const queryResults = await query.find();
const results = [];
for (let i = 0; i < queryResults.length; ++i) {
results.push({
"tokenObjectId": queryResults[i].id,
"tokenId": queryResults[i].attributes.token_id,
"tokenAddress": queryResults[i].attributes.token_address,
"symbol": queryResults[i].attributes.symbol,
"tokenUri": queryResults[i].attributes.token_uri,
});
}
return results;
});
Moralis.Cloud.beforeSave("ItemsForSale", async (request) => {
const query = new Moralis.Query("BscNFTOwners");
query.equalTo("token_address", request.object.get('tokenAddress'));
query.equalTo("token_id", request.object.get('tokenId'));
const object = await query.first();
if (object){
const owner = object.attributes.owner_of;
const userQuery = new Moralis.Query(Moralis.User);
userQuery.equalTo("accounts", owner);
const userObject = await userQuery.first({useMasterKey:true});
if (userObject){
request.object.set('user', userObject);
}
request.object.set('token', object);
}
});
Moralis.Cloud.beforeSave("SoldItems", async (request) => {
const query = new Moralis.Query("ItemsForSale");
query.equalTo("uid", request.object.get('uid'));
const item = await query.first();
if (item){
request.object.set('item', item);
item.set('isSold', true);
await item.save();
const userQuery = new Moralis.Query(Moralis.User);
userQuery.equalTo("accounts", request.object.get('buyer'));
const userObject = await userQuery.first({useMasterKey:true});
if (userObject){
request.object.set('user', userObject);
}
}
});
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","user.username");
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.tokenId,
"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.tokenId,
"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,
};
});
And wala, the items show on click.
The last issue I seem to be facing is to figure out why the items listed for sale in the marketplace are not displayed. Ill be diving into this now, and to see what might be amiss if anything at all, Im hoping its as simple as the tweak I just figured out.
If you guys have any sense of what it might be, would be greatly appreciated. In the meantime, Ill keep trying from hereā¦
Many thanks again, and in advance of any help you guys might have to share.
Deus
1 Like
Progress
Looks like im getting items for sale, on the client side. Looking pretty sweet.
Only a few minor things to work out and this baby looks like its good to go.
What do you think of the name Ive given this projectā¦ āSotheNFTsāā¦ The Sothebys of NFTsā¦ I think Im on to something hereā¦
Only thing now to is resolve what seems like an unfortunate - Instant buy situationā¦ having to display, the instant buy price in massive numbersā¦ in Gwei - and implementing a working search function to the bill pill search bar 
Wonderingā¦ Isnt there some standardized javascript snippet by now, somewhere that can just calculate on the backend and repopulate the displayed price in ETH or BNB on the frontend? Even if the seller needs to input the original sell price in Gweiā¦ from the outset it seems a fairly simple mathematical operation that could be used to display a buy priceā¦ asking for a friend
1 Like
You mean something like web3.utils.fromWei(balance, 'ether')?
1 Like
Yesā¦
I tried to impliment this below and was under the impression that it broke the code Obviously was not sure either way, especially given it didnt throw any errors, but at the same time didnt generate the result i wanted - and so I removed it.
switch(createItemStatusField.value){
case "0":
return;
case "1":
await ensureMarketplaceIsApproved(nftId, TOKEN_CONTRACT_ADDRESS);
await marketplaceContract.methods.addItemToMarket(nftId, TOKEN_CONTRACT_ADDRESS, web3.utils.toWei(createItemPriceField.value, "ether")).send({from: userAddress });
break;
case "2":
alert("Not yet supported!");
return;
Is it possible that you might indicate where to add the code you provided.
Many thanks in advance Crypto.
Best
hope this helps:
window.web3 = await Moralis.Web3.enable();
web3.utils.toWei("10", "ether")
=> "10000000000000000000"
web3.utils.toWei("0.01", "ether")
=> "10000000000000000"
web3.utils.fromWei("10000000000000000", 'ether')
=> "0.01"
you donāt need to change the format on backend, you can show on frontend whatever format is needed
Hi everyone, I am having the same issue. Items get minted and appears on user items list but not on marketplace. and from visiting deusex.me this hasnt worked for u still. Please where do we put the code cryptokid. I am using bsc testnet too.