Hi,
I have made a few other threads about this topic, but i am having alot of trouble with it. I seem to not be getting anywhere with all the suggestions.
The issue i am having is related to part 7 and 8 of the Rarible Clone Tutorial. I cannot seem to get my NFTs to display on the My Items tab. This would relate to the Cloud functions and calling them in JS. I dont know where exactly to place the code to call the cloud function as everything ive tried comes back as an error.
I just want to make sure i am doing this properly and accurately.
Everything is provided below. Thank you for any assistance.
JS.
const serverUrl = "https://#########.usemoralis.com:2053/server";
const appId = "#######################################";
const TOKEN_CONTRACT_ADDRESS = "0x904fE54f1b5Eaa1621B31B05642EDd1fb43555F5"
Moralis.start({ serverUrl, appId, TOKEN_CONTRACT_ADDRESS });
init = async () => {
hideElement(userItemsSection);
hideElement(userInfo);
hideElement(createItemForm);
await Moralis.enableWeb3();
web3 = new Web3(window.ethereum);
window.tokenContract = new web3.eth.Contract(tokenContractAbi, TOKEN_CONTRACT_ADDRESS);
initUser();
};
initUser = async () => {
if (await Moralis.User.current()){
hideElement(firstTip);
showElement(secondTip);
hideElement(userConnectButton);
showElement(userProfileButton);
showElement(openCreateItemButton);
showElement(openUserItemsButton);
loadUserItems();
}else{
showElement(firstTip);
hideElement(secondTip);
showElement(userConnectButton);
hideElement(userProfileButton);
hideElement(openCreateItemButton);
hideElement(createItemForm);
hideElement(openUserItemsButton);
}
}
login = async () => {
try {
await Moralis.authenticate();
initUser();
} catch (error) {
if (error.code == '4001'){
alert(error.code + ": To connect your wallet to this site, you must confirm sign.");
}
}
}
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 = "";
}
userNameField.value = user.get('username');
const userAvatar = user.get('avatar');
if(userAvatar){
userAvatarImg.src = userAvatar.url();
showElement(userAvatarImg);
}else{
hideElement(userAvatarImg);
}
showElement(userInfo);
}else{
login();
}
}
checkSaveUserInfo = async () => {
if (userNameField.value.length ==0 && userEmailField.value.length ==0){
alert("Please supply a name and email.");
return;
}else if (userEmailField.value.length ==0){
alert("Please supply an email.");
return;
}else if (userNameField.value.length ==0){
alert("Please supply a name.");
return;
}
else{
user.set('email', userEmailField.value);
user.set('username', userNameField.value);
}
if (userAvatarFile.files.length > 0) {
const avatar = new Moralis.File("avatar1.jpg", userAvatarFile.files[0]);
user.set('avatar', avatar);
}
try{
await user.save();
}
catch(error) {
console.log(error);
alert("That email already exists. Please choose another.");
document.getElementById('txtEmail').value = '';
return;
}
alert("User info saved successfully!");
openUserInfo();
}
openUserItems = async () => {
let data = await Moralis.Cloud.run("getUserItems")
user = await Moralis.User.current();
if(user){
showElement(userItemsSection);
}else{
login();
}
}
loadUserItems = async () => {
const ownedItems = await Moralis.Cloud.run("getUserItems");
console.log(ownedItems);
ownedItems.forEach(item => {
getAndRenderItemData(item, renderUserItem);
})
}
initTemplate = (id) => {
const template = document.getElementById(id);
template.id = "";
template.parentNode.removeChild(template);
return template;
}
renderUserItem = (item) => {
const userItem = userItemTemplate.cloneNode(true);
userItem.getElementsByTagName("img")[0].src = item.image;
userItem.getElementsByTagName("img")[0].src = item.name;
userItem.getElementsByTagName("h5")[0].innerText = item.name;
userItem.getElementsByTagName("p")[0].innerText = item.description;
userItems.appendChild(userItem);
}
getAndRenderItemData = (item, renderFunction) =>{
fetch(item.tokenUri)
.then(response => response.json())
.then(data =>{
data.symbol = item.symbol;
data.tokenId = item.tokenId;
data.tokenAddress = item.tokenAddress;
renderFunction(data);
})
}
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;
}
mintNft = async (metadataUrl) => {
const receipt = await tokenContract.methods.createItem(metadataUrl).send({from: ethereum.selectedAddress});
console.log(receipt);
return receipt.events.Transfer.returnValues.tokenId;
}
const nftFile = new Moralis.File("nftFile.webp", createItemFile.files[0]);
await nftFile.saveIPFS();
const nftFilePath = nftFile.ipfs();
const nftFileHash= nftFile.hash();
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 nftFileMetadataFileHash = nftFileMetadataFile.hash();
const nftId = await mintNft(nftFileMetadataFilePath);
const Item = Moralis.Object.extend("Item");
const item = new Item();
item.set('name', createItemNameField.value);
item.set('description', createItemDescriptionField.value);
item.set('nftFilePath', nftFilePath);
item.set('nftFileHash', nftFileHash);
item.set('metadataFilePath', nftFileMetadataFilePath);
item.set('metadataFileHash', nftFileMetadataFileHash);
item.set('nftId', nftId);
item.set('nftContractAddress', TOKEN_CONTRACT_ADDRESS);
await item.save();
alert("Item uploaded successfully!");
console.log(item);
}
hideElement = (element) => element.style.display = "none";
showElement = (element) => element.style.display = "block";
const firstTip = document.getElementById("tipConnect1");
const secondTip = document.getElementById("tipConnect2");
const userConnectButton = document.getElementById("btnConnect");
userConnectButton.onclick = login;
const userProfileButton = document.getElementById("btnUserInfo");
userProfileButton.onclick = openUserInfo;
const userInfo = document.getElementById("userInfo");
const userNameField = 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 = checkSaveUserInfo;
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");
// createItems
const openCreateItemButton = document.getElementById("btnOpenCreateItem");
openCreateItemButton.onclick = () => showElement(createItemForm);
document.getElementById("btnCloseCreateItem").onclick = () => hideElement(createItemForm);
document.getElementById("btnCreateItem").onclick = createItem;
// userItems
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");
init();
Cloud Function.
Moralis.Cloud.define("getUserItems", async (request) => {
const options = {
chain: "eth",
address: request.user.attributes.ethAddress,
};
const balances = await Moralis.Web3API.account.getTokenBalances(options);
const results = [];
let sum = 0;
for (let i = 0; i < balances.length; ++i) {
results.push({
"name": balances[i].name,
"symbol": balances[i].symbol,
"tokenAddress": balances[i].token_address,
"balance": balances[i].balance,
});
}
return results;
});
Console after item is created.
