Hey Guys,
So the tutorial has been going pretty well up to know, i’m pulling my hair out trying to figure out what I have done wrong.
My main two issues are;
-
When i click ‘connect wallet’ I get the alert stopping me from logging into Metamask
-
I’m now unable to create NFTs due to an error.
main.js
Moralis.initialize("ieKQ5LzAaxMbtpIJOW2Y1RPz2RED6OYKZMfPxJlG");
Moralis.serverURL = 'https://sps7xqjw24qg.moralis.io:2053/server'
const TOKEN_CONTRACT_ADDRESS = "0x884310446c576eFcA4B551Dbc5628c93285eC5D3";
//initialize moralis using the below
init = async () => {
//needs to be hidden after user loads page as it will shown by default
hideElement(userInfo);
hideElement(createItemForm);
window.Web3 = await Moralis.Web3.enable();
window.tokenContract = new web3.eth.Contract(tokenContractAbi, TOKEN_CONTRACT_ADDRESS);
// call this after the init and it will check it automatically
initUser ();
}
// initialize the user
// if statement to see if user is logged in or not
// if they are logged in show them their Profile else we show them the login
initUser = async () => {
if(await Moralis.User.current()){
//show
hideElement(userConnectButton);
showElement(userProfileButton);
showElement(openCreateItemButton);
}else{
//hide
showElement(userProfileButton);
hideElement(userConnectButton);
hideElement(openCreateItemButton);
}
}
// this will bring up Metamask and ask them to sign in automatically
// if it works we'll initialize the user
// if not, alert
login = async () => {
try {
await Moralis.Web3.authenticate();
initUser();
} catch (error) {
alert(error)
}
}
// removes user profile as logged out
// call init user as it will no longer have a current user
// therefore it will show userconnect button and hide userprofile button
// back to initial log in page
logout = async () => {
await Moralis.User.logOut();
hideElement(userInfo);
initUser();
}
// function to open userinfo when user click profile button
// this will load user, if we arent logged in it will be undefined
// if it logs in we will have a user here
// User cant use this function if they arent logged in
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);
}
showElement(userInfo);
}else{
login();
}
}
saveUserInfo = async () =>{
user.set('email', userEmailField.value);
user.set('username', userUsernameField.value);
if (userAvatarFile.files.length > 0) {
const avatar = new Moralis.File("avatar.jpg", userAvatarFile.files[0]);
user.set('avatar', avatar);
}
await user.save();
alert("User information 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 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();
console.log(item);
}
mintNft = async (metadataUrl) => {
const receipt = await tokenContract.methods.createItem(metadataUrl).send({from:ethereum.selectedAddress});
console.log(receipt);
return receipt.events.Transfer.returnValues.tokenId;
}
//helper methods - this will hide an element from the screen
//we can control what we have on the screen
hideElement = (element) => element.style.display = "none";
//opposite of the above
showElement = (element) => element.style.display = "block";
//buttons
const userConnectButton = document.getElementById("btnConnect");
// trigger for login
userConnectButton.onclick = login;
const userProfileButton = document.getElementById("btnUserInfo");
userProfileButton.onclick = openUserInfo;
const openCreateItemButton = document.getElementById("btnOpenCreateItem");
openCreateItemButton.onclick = () => showElement(createItemForm);
//reference user info
//when user clicks close it will hide the user info
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;
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;
// adding the below makes it initialize automatically when the page loads
init ();```
Any help would be great!
Thanks!