Main.js:
MoralisWeb3 = serverUrl = âhttps://w6j9c9lnnoio.usemoralis.com:2053/serverâ; //Server url from moralis.io
MoralisWeb3 = appId = âwZsf07rYLfsPudepzTdjvrAsYfgWAQb0BFbnTFJIâ; // Application id from moralis.io
async function initializeApp() {
hideElement(userInfo);
hideElement(createItemForm);
await Moralis.start({ serverUrl, appId });
await Moralis.enableWeb3();
currentUser = Moralis.User.current();
if (!currentUser){
currentUser = await Moralis.Web3.authenticate(); }
}
initUser = async () => {
const user = await Moralis.User.current();
if (await Moralis.User.current()) {hideElement(userConnectButton); showElement(userProfileButton); showElement(openCreateItemButton); }else { showElement(userConnectButton); hideElement(userProfileButton); showElement(openCreateItemButton); }
}
login = async () => {
try { await Moralis.Web3.authenticate(); initUser(); } catch (error) { alert(error) }
}
logout = async () => {
await Moralis.User.logOut();
hideElement(userInfo)
initUser();
}
openUserInfo = async (email, username) => {
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(âChanges saved successfully!â);
openUserInfo();
}
createItem = async () => {
if (createItemFile.files.length == 0) {
alert(âPlease Select A Fileâ);
return;
} else if (createItemNameField.value.length == 0) {
alert(âPlease Name Your Itemâ);
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,
nftFilePath: nftFilePath,
nftFileHash: nftFileHash
}const nftFileMetadataFile = new Moralis.File(âmetadata.jsonâ, {base64 : btoa(JSON.stringify(metadata))});
await nftFileMetadataFile.saveIPFS();const nftFileMetadataFilePath = nftFileMetadataFile.ipfs();
const nftFileMetadataFileHash = nftFileMetadataFile.hash();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);await item.save();
console.log(item);}
hideElement = (element) => element.style.display = ânoneâ;
showElement = (element) => element.style.display = âblockâ;
const userConnectButton = document.getElementById(âbtn-loginâ);
userConnectButton.onclick = login;
const userProfileButton = document.getElementById(âbtn-profileâ);
userProfileButton.onclick = openUserInfo;
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(âbtn-CloseUserInfoâ).onclick = () => hideElement(userInfo);
document.getElementById(âbtn-logoutâ).onclick = logout;
document.getElementById(âbtn-SaveUserInfoâ).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â);const openCreateItemButton = document.getElementById(âbtn-openCreateItemâ);
openCreateItemButton.onclick = () => showElement(createItemForm);
document.getElementById(âbtn-CloseCreateItemâ).onclick = () => hideElement(createItemForm);document.getElementById(âbtn-CreateItemâ).onclick = createItem;
initializeApp();