Hy everyone,
I am encountering the following problems, following the rarible clone tutorial.
When creating a new user, the console spits out:
When following the link in the error message:
I can add an Avatar though, and it seems to work. But I would like to understand why this error pops up.
Next is, that when trying to mint, I get this error:
Code:
main.js
Moralis.initialize("VyXM3keXqHlBnaH5FUv8rT6Y9DDMCBBreVc2kyJK");
Moralis.serverURL = 'https://m0e24kwy0shp.moralis.io:2053/server';
const TOKEN_CONTRACT_ADDRESS = "0x53d966c9aC5F55419b99EE8719C1C076157AbE6C";
init = async () => {
hideElement(userInfo);
hideElement(createItemForm);
window.web3 = await Moralis.Web3.enable();
window.tokenContract = new web3.eth.Contract(tokenContractAbi, TOKEN_CONTRACT_ADDRESS);
initUser();
}
initUser = async () => {
if(await Moralis.User.current()){
hideElement(userConnectButton);
showElement(userProfileButton);
showElement(openCreateItemButton);
} else {
showElement(userConnectButton);
hideElement(userProfileButton);
hideElement(openCreateItemButton);
}
}
login = async () => {
try {
Moralis.Web3.authenticate();
initUser();
} catch (error) {
alert(error);
}
}
logout = async () => {
await Moralis.User.logOut();
hideElement(userInfo);
init();
}
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); //There is a check behind the scenes for username duplicate in moralis backend, but is not deep dived here in tutorial!
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 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");
//create new Instance of Item 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;
}
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("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("numberCreateItemPrice");
const createItemStatusField = document.getElementById("selectCreateItemStatus");
const createItemFile = document.getElementById("fileCreateItemFile");
document.getElementById('btnCloseCreateItem').onclick = () => hideElement(createItemForm);
document.getElementById('btnCreateItem').onclick = createItem;
init();
token.sol
pragma solidity ^0.8.0;
import "../node_modules/@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "../node_modules/@openzeppelin/contracts/utils/Counters.sol";
contract MyRaribleToken is ERC721 {
using Counters for Counters.Counter;
Counters.Counter private _tokenIds;
constructor () ERC721("MyRarible", "MYRA"){
}
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;
}
}
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">
<title>Morarible</title>
</head>
<body>
<div>
<button id="btnConnect">Connect Wallet</button>
<button id="btnUserInfo">Profile</button>
<button id="btnOpenCreateItem">Create</button>
</div>
<div id="userInfo">
<h4>User Profile</h4>
<input type="text" id="txtUserName" required placeholder="Enter Username">
<input type="text" id="txtEmail" placeholder="Enter Email">
<small>Optional</small>
<img width="50px" height="50px" src="" id="imgAvatar" alt="Avatar Image">
<label for="fileAvatar">Select Avatar</label>
<input type="file" id="fileAvatar">
<button id="btnLogout">Logout</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="txtCreateItemDescription" cols="30" rows="5" 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 a file</label>
<input type="file" id="fileCreateItemFile">
<button id="btnCloseCreateItem">Close</button>
<button id="btnCreateItem">Create!</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 src="main.js"></script>
</body>
</html>
Any help much appreciated. I triple checked with the code in the videos, but can’t find any difference. Ganache is setup correctly, Metamask pops up. FRPC server is running as well and connected to moralis.
Can you check out this thread -