<!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">
<title>Muzium</title>
</head>
<body>
<div>
<button id="btnConnect">Connect Wallet</button>
<button id="btnUserInfo">Profile</button>
<button id="btnOpenCreateItem">Create</button>
<button id="btnMyItems">My item</button>
</div>
<div id="userInfo">
<h4>User Profile</h4>
<input type="text" id="txtUsername" required placeholder="Enter Username">
<input type="text" id="emailUsername" placeholder="Enter Your Email">
<!-- <input type="number" id="passwordUsername" placeholder="Enter Your password"> -->
<small>Optional</small>
<img width="50" height="50" src="" id="imgAvatar" alt="">
<label for="fileAvatar">Select Avatar</label>
<input type="file" id="fileAvatar">
<button id="btnLogOut">Log out</button>
<button id="btnCloseUserInfo">Close</button>
<button id="btnSaveUserInfo">Save</button>
</div>
<div id="createItem">
<h4>Create Item</h4>
<input type="text" id="txtCreateItemname" required placeholder="Enter name">
<textarea id="textCreateItemDescriptiom" cols="30" rows="10" placeholder="Enter Description"></textarea>
<input type="number" min="1" step="1" id="numberCreateItemPrice" placeholder="Enter price" required>
<label for="selectCreateItemStatus">Status</label>
<select id="selectCreateItemStatus">
<option value="0">Not for sale</option>
<option value="1">Instant Buy</option>
<option value="2">Accept Offers</option>
</select>
<label for="filecreateItemFile">Select File</label>
<input type="file" id="filecreateItemFile">
>
<button id="btnCloseCreateItem">Close</button>
<button id="btnCreateItem">Create!</button>
</div>
<div id="userItems">
<h4>My Items</h4>
<div id="userItemsList"></div>
<button id="btnCloseUserItems">Close</button>
</div>
<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 type="text/javascript" src="./main.js"></script>
</body>
</html>
pragma solidity ^0.8.0;
import "../node_modules/@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "../node_modules/@openzeppelin/contracts/utils/Counters.sol";
contract MuziumToken is ERC721 {
using Counters for Counters.Counter;
Counters.Counter private _tokenIds;
constructor () ERC721("MuziumToken", "MUZT"){}
struct Item {
uint256 id;
address creator;
string uri;
}
mapping (uint256 => Item) 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;
}
}
/* Moralis init code */
const serverUrl = "https://pof75zn8copb.moralishost.com:2053/server";
const appId = "Bh0MLNPUycz7AV77HPnFFxHtsDnY6nkhz0skZY2k";
const TOKEN_CONTRACT_ADDRESS = "0x78F2d21adC985183D5B2407aDF208A82459476cA"; //TOKEN ADDRESS
Moralis.start({ serverUrl, appId });
/* TODO: Add Moralis Authentication code */
init = async () => {
hideElement(userItemsSection);
hideElement(createItemForm);
hideElement(userInfo);
window.web3 = await Moralis.Web3.enable();
window.tokenContract = new web3.eth.Contract(tokenContractAbi, TOKEN_CONTRACT_ADDRESS);
initUser();
loadUserItems();
}
initUser = async () => {
if (await Moralis.User.current()){
hideElement(userConnectButton);
showElement(userProfileButton);
showElement(openCreateItemButton);
showElement(openUserItemsButton);
}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 ="";
}
userEmailField.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 info save successfully!");
openUserInfo();
}
createItem = async () => {
if (createItemFile.files.length == 0){
alert("please select file");
return;
} else if (createItemNamefield.value.length == 0){
alert("please give the item name");
return;
}
const nftFile =new Moralis.File("nftFiles.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,
// image : 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 nftId = await mintNft(nftFileMetadataFilePath);
// Simple syntax to create a new subclass of Moralis.Object.
const Item = Moralis.Object.extend("Item");
// Create a new instance of that class.
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;
}
openUserItems = async () => {
user = await Moralis.User.current();
if (user){
showElement(userItemsSection);
}else{
login();
}
}
loadUserItems = async () => {
const ownedItems = await Moralis.Cloud.run("getUserItems");
console.log(ownedItems);
}
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 = () => showElement(createItemForm);
// USER PROFILE
const userInfo = document.getElementById("userInfo");
const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("emailUsername");
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("textCreateItemDescriptiom");
const createItemPricefield = document.getElementById("numberCreateItemPrice");
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;
init();
You say that everything works ok but nothing got synced in your Moralis db in EthNftOwners table?
Did you reuse same Moralis Server instance with multiple Ganache instances? (in case that you are using local devchain)