In another place within my DApp I have separate logic that displays user NFTs, and contract NFTs, market etc just without the user interactivity between their digital asset, and it works fine in chrome as well. for Users from either account the DApp functions as intended, its only from within chrome and when I go to utilize logic from my ‘tamedEnjimon.js’ file does the error present itself.
this logic functions fine. main dapp.js
/* Moralis init code */
const serverUrl = "https://i65nweyr9d9c.usemoralis.com:2053/server";
const appId = "gwhAajNieO72VxG53x8fqELwgKAPzWDB0NSyO3y6";
const CONTRACT_ADDRESS = "0xA98d4f3f8F45C11d1423D122b618Bf6F7C0892AC";
const ADMIN = "0xaf9fa351b47ee3ebfb03907c1319e518f617dc4e";
let currentUser;
displayApusLabs();
init = async () => {
await Moralis.start({serverUrl, appId});
currentUser = await Moralis.User.current();
if(!currentUser){
$('#myEnjimon').hide();
$('#BattleArena').hide();
$('#liveChat').hide();
$('#btn-logout').hide();
$('#apusItems').hide();
$('#apusEnjimon').hide();
$('#ownedItems').hide();
$('#topTrainer').hide();
$('#TrainerShop').hide();
$('#mint').hide();
$('#trainEnjimon').hide();
$('#btn-login').show();
}else{
$('#btn-logout').show();
$('#myEnjimon').show();
$('#BattleArena').show();
$('#liveChat').show();
$('#apusItems').show();
$('#apusEnjimon').show();
$('#ownedItems').show();
$('#topTrainer').show();
$('#TrainerShop').show();
$('#mint').show();
$('#trainEnjimon').show();
$('#btn-login').hide();
//accessing token metadata via uri - only Enjimon
const options = {address: CONTRACT_ADDRESS, chain: 'mumbai'};
let NFTs = await Moralis.Web3API.token.getAllTokenIds(options);
let counter = NFTs.result.length;
let apusEnjimon = [];
let contractNFTs = []
for(let x = 0; x < counter; x++){
if(NFTs.result[x].token_address == 0xA98d4f3f8F45C11d1423D122b618Bf6F7C0892AC && NFTs.result[x].token_id <= 6){
fetch(NFTs.result[x].token_uri)
.then(res => res.json())
.then(out =>{
apusEnjimon.push(out);
contractNFTs.push(NFTs.result[x]);
}).catch(err => err);
}
}
//accessing token metadata via uri
const enjimonOptions = {address: CONTRACT_ADDRESS, chain: "mumbai"};
let enjimonNFTs = await Moralis.Web3API.token.getAllTokenIds(enjimonOptions);
let enjimonCounter = enjimonNFTs.result.length;
let apusEnjimons = [];
let contractEnjimon = []
for(let x = 0; x < enjimonCounter; x++){
if(enjimonNFTs.result[x].token_address == 0xA98d4f3f8F45C11d1423D122b618Bf6F7C0892AC && enjimonNFTs.result[x].token_id >= 7){
fetch(enjimonNFTs.result[x].token_uri)
.then(res => res.json())
.then(out =>{
apusEnjimons.push(out);
contractEnjimon.push(enjimonNFTs.result[x]);
}).catch(err => err);
}
}
//users items
const usersOptions = { chain: 'mumbai', address: currentUser.get('ethAddress'), token_address: CONTRACT_ADDRESS};
const usersNFTs = await Moralis.Web3API.account.getNFTsForContract(usersOptions);
let usersItemCounter = usersNFTs.result.length;
let usersItems = [];
let usersContractItems = [];
if(usersNFTs.total == 0){
renderItemsMsg();
}else{
for(let x = 0; x < usersItemCounter; x++){
if(usersNFTs.result[x].token_address == 0xA98d4f3f8F45C11d1423D122b618Bf6F7C0892AC && usersNFTs.result[x].token_id <= 6){
fetch(usersNFTs.result[x].token_uri)
.then(res => res.json())
.then(out =>{
usersItems.push(out);
usersContractItems.push(usersNFTs.result[x]);
}).catch(err => err);
}
}
await getUserItems(usersItems, usersContractItems);
}
//users enjimon
const userOptions = { chain: 'mumbai', address: currentUser.get('ethAddress'), token_address: CONTRACT_ADDRESS};
const userNFTs = await Moralis.Web3API.account.getNFTsForContract(userOptions);
let userEnjimonCounter = userNFTs.result.length;
let usersEnjimon = [];
let usersContractEnjimon = [];
if(userNFTs.total == 0){
renderEnjimonMsg();
}else{
for(let x = 0; x < userEnjimonCounter; x++){
if(userNFTs.result[x].token_address == 0xA98d4f3f8F45C11d1423D122b618Bf6F7C0892AC && userNFTs.result[x].token_id >= 7){
fetch(userNFTs.result[x].token_uri)
.then(res => res.json())
.then(out =>{
usersEnjimon.push(out);
usersContractEnjimon.push(userNFTs.result[x]);
}).catch(err => err);
}
}
await getUserEnjimon(usersEnjimon, usersContractEnjimon);
}
//Code Executions
await getItems(apusEnjimon, contractNFTs);
await getEnjimon(apusEnjimons, contractEnjimon);
}
}
/* Authentication code */
async function login() {
let user = Moralis.User.current();
if (!user) {
user = await Moralis.authenticate({ signingMessage: "Log in to Access Wallet Monsters Apus" })
.then(function (user) {
alert("Welcome to the Apus Sector Trainer: " + user.get("ethAddress"));
console.log("logged in user:", user);
console.log(user.get("ethAddress"));
location.reload();
})
.catch(function (error) {
console.log(error);
});
}
}
async function logOut() {
await Moralis.User.logOut();
alert("Log out successfull");
console.log("logged out");
location.reload();
}
//Fetching NFT Functions
async function getItems(apusEnjimon, contractNFTs){
let resData = [];
let nftOwners = [];
let nftIds = [];
setTimeout(function(){
for(let count = 0; count < contractNFTs.length; count++){
let targetData = ( contractNFTs[count].amount);
let ownerData = (contractNFTs[count].token_address);
nftOwners.push(ownerData);
nftIds.push(contractNFTs[count].token_id)
resData.push(targetData);
}
//console.log(nftIds);
//console.log(nftOwners);
//console.log(resData);
}, 1000);
await renderInventory(apusEnjimon, resData, nftOwners, nftIds);
};
async function getEnjimon(apusEnjimons, contractEnjimon){
let resData = [];
let nftOwners = [];
let nftIds = [];
setTimeout(function(){
for(let count = 0; count < contractEnjimon.length; count++){
let targetData = ( contractEnjimon[count].amount);
let ownerData = (contractEnjimon[count].token_address);
nftOwners.push(ownerData);
nftIds.push(contractEnjimon[count].token_id)
resData.push(targetData);
}
console.log(nftIds);
console.log(nftOwners);
console.log(resData);
}, 1000);
await renderItems(apusEnjimons, resData, nftOwners, nftIds);
};
async function getUserItems(usersItems, usersContractItems){
let resData = [];
let nftOwners = [];
let nftIds = [];
setTimeout(function(){
for(let count = 0; count < usersContractItems.length; count++){
let targetData = ( usersContractItems[count].amount);
let ownerData = (usersContractItems[count].token_address);
nftOwners.push(ownerData);
nftIds.push(usersContractItems[count].token_id)
resData.push(targetData);
}
console.log(nftIds);
console.log(nftOwners);
console.log(resData);
}, 1000);
await renderUserItems(usersItems, resData, nftOwners, nftIds);
};
async function getUserEnjimon(usersEnjimon, contractEnjimon){
let resData = [];
let nftOwners = [];
let nftIds = [];
setTimeout(function(){
for(let count = 0; count < contractEnjimon.length; count++){
let targetData = ( contractEnjimon[count].amount);
let ownerData = (contractEnjimon[count].token_address);
nftOwners.push(ownerData);
nftIds.push(contractEnjimon[count].token_id)
resData.push(targetData);
}
console.log(nftIds);
console.log(nftOwners);
console.log(resData);
}, 1000);
await renderUserEnjimon(usersEnjimon, resData, nftOwners, nftIds);
};
//Render Data functions
async function renderInventory(apusTokens, resData, nftOwners, nftIds){
//console.log(apusTokens);
const parent = document.getElementById("appManager");
//const stepParent = document.getElementById("knownEnjimon");
setTimeout(function(){
for(let i =0; i < apusTokens.length; i++ ){
const nft = apusTokens[i];
const resdata = resData[i];
// const nftowners = nftOwners[i];
const nftids = nftIds[i];
let htmlString = `
<div class="card cards text-white bg-dark mb-3 sm light-b-shadow" id="enjimon_${nftids}">
<img src="${nft.image}" class="card-img-top" style="height: 450px;" alt="">
<div class="card-body ">
<h5 class="card-title">${nft.name}</h5>
<p class="card-text">${nft.description}</p>
<hr>
<div style="display: flex; justify-content: space-between;">
<p class="card-text"><b>ID: ${nftids}</b></p>
<p class="card-text">In Existence: ${resdata}</p>
</div>
</div>
</div>
`;
let col = document.createElement("div");
col.className = "col col-md-4";
col.style = "margin-bottom: 30px";
col.innerHTML = htmlString;
parent.appendChild(col);
}
}, 1000);
// let countString = `
// <p>$Enjimon Discovered: ${EXISTENCE}<p>
// `;
//stepParent.innerHTML = countString;
}
async function renderItems(apusEnjimons, resData, nftOwners, nftIds){
console.log(apusEnjimons);
const parent = document.getElementById("itemManager");
setTimeout(function(){
for(let i =0; i < apusEnjimons.length; i++ ){
const nft = apusEnjimons[i];
const resdata = resData[i];
// const nftowners = nftOwners[i];
const nftids = nftIds[i];
let htmlString = `
<div class="card cards text-white bg-dark mb-3 sm light-b-shadow" id="enjimon_${nftids}">
<img src="${nft.image}" class="card-img-top" style="height: 450px;" alt="">
<div class="card-body ">
<h5 class="card-title">${nft.name}</h5>
<p class="card-text">${nft.description}</p>
<hr>
<div style="display: flex; justify-content: space-between;">
<p class="card-text"><b>ID: ${nftids}</b></p>
<p class="card-text">In Existence: ${resdata}</p>
</div>
</div>
</div>
`;
let col = document.createElement("div");
col.className = "col col-md-4";
col.style = "margin-bottom: 30px";
col.innerHTML = htmlString;
parent.appendChild(col);
}
}, 1000);
}
async function renderUserItems(usersItems, resData, nftOwners, nftIds){
console.log(usersItems);
const parent = document.getElementById("usersItems");
setTimeout(function(){
for(let i =0; i < usersItems.length; i++ ){
const nft = usersItems[i];
const resdata = resData[i];
// const nftowners = nftOwners[i];
const nftids = nftIds[i];
let htmlString = `
<div class="card cards text-white bg-dark mb-3 sm light-b-shadow" id="enjimon_${nftids}">
<img src="${nft.image}" class="card-img-top" style="height: 450px;" alt="">
<div class="card-body ">
<h5 class="card-title">${nft.name}</h5>
<p class="card-text">${nft.description}</p>
<hr>
<div style="display: flex; justify-content: space-between;">
<p class="card-text"><b>ID: ${nftids}</b></p>
<p class="card-text">amount: ${resdata}</p>
</div>
</div>
</div>
`;
let col = document.createElement("div");
col.className = "col col-md-4";
col.style = "margin-bottom: 30px";
col.innerHTML = htmlString;
parent.appendChild(col);
}
}, 1000);
}
async function renderUserEnjimon(usersEnjimon, resData, nftOwners, nftIds){
console.log(usersEnjimon);
const parent = document.getElementById("usersEnjimon");
setTimeout(function(){
for(let i =0; i < usersEnjimon.length; i++ ){
const nft = usersEnjimon[i];
const resdata = resData[i];
// const nftowners = nftOwners[i];
const nftids = nftIds[i];
let htmlString = `
<div class="card cards text-white bg-dark mb-3 sm light-b-shadow" id="enjimon_${nftids}">
<img src="${nft.image}" class="card-img-top" style="height: 450px;" alt="">
<div class="card-body ">
<h5 class="card-title">${nft.name}</h5>
<p class="card-text">${nft.description}</p>
<hr>
<div style="display: flex; justify-content: space-between;">
<p class="card-text"><b>ID: ${nftids}</b></p>
<p class="card-text">amount: ${resdata}</p>
</div>
</div>
</div>
`;
let col = document.createElement("div");
col.className = "col col-md-4";
col.style = "margin-bottom: 30px";
col.innerHTML = htmlString;
parent.appendChild(col);
}
}, 1000);
}
//Display msg for users with no items/enjimon
function renderItemsMsg(){
const parent = document.getElementById("usersItems");
setTimeout(function(){
let htmlString = `
<div class="card cards text-white bg-dark mb-3 sm light-b-shadow" id="noItems">
<div class="card-body ">
<h5 class="card-title">Trainers</h5>
<p class="card-text">No Items in inventory</p>
</div>
</div>
</div>
`;
let col = document.createElement("div");
col.className = "col col-md-4";
col.style = "margin-bottom: 30px";
col.innerHTML = htmlString;
parent.appendChild(col);
}, 1000);
}
function renderEnjimonMsg(){
const parent = document.getElementById("usersEnjimon");
setTimeout(function(){
let htmlString = `
<div class="card cards text-white bg-dark mb-3 sm light-b-shadow" id="noItems">
<div class="card-body ">
<h5 class="card-title">Trainers</h5>
<p class="card-text">You Do Not own any $Enjimon</p>
</div>
</div>
</div>
`;
let col = document.createElement("div");
col.className = "col col-md-4";
col.style = "margin-bottom: 30px";
col.innerHTML = htmlString;
parent.appendChild(col);
}, 1000);
}
//Mint
mintMonster = async () => {
let user = await Moralis.User.current();
const admin = user.get('ethAddress');
const web3Provider = await Moralis.enableWeb3();
if(admin != ADMIN){
alert("Not authorized to use this function");
}else{
let Name = document.getElementById('name_input').value;
let Health = parseInt(document.getElementById('health_input').value);
let Defense = parseInt(document.getElementById('defense_input').value);
let Attack = parseInt(document.getElementById('attack_input').value);
let Level = parseInt(document.getElementById('level_input').value);
let EnjimonType = document.getElementById('enjimonType_input').value;
const options = {
contractAddress: CONTRACT_ADDRESS,
functionName: "mintMonster",
abi: contractAbi,
params: {
enjimonName: Name,
healthPoints: Health,
defense: Defense,
attack: Attack,
level: Level,
enjimonType: EnjimonType
},
};
const mint = await Moralis.executeFunction(options)
.on("receipt", function(receipt){
alert("Mint Completed");
console.log(receipt);
setTimeout(refreshMint, 3000);
});
}
}
function refreshMint(){
location.reload();
}
//Purchases
buyUuji = async() => {
const web3Provider = await Moralis.enableWeb3();
const options = {
contractAddress: CONTRACT_ADDRESS,
functionName: "buyUUJI",
abi: contractAbi,
msgValue: "5000000000000000000"
};
const receipt = await Moralis.executeFunction(options);
console.log(receipt)
}
buyHP = async()=> {
let amount = parseInt(document.getElementById('hp_input').value);
const total = amount * 250000000000000000;
const web3Provider = await Moralis.enableWeb3();
const options = {
contractAddress: CONTRACT_ADDRESS,
functionName: "buyHP",
abi: contractAbi,
params:{
amount: amount
},
msgValue: total,
};
const receipt = await Moralis.executeFunction(options);
console.log(receipt)
}
buyElixer = async()=> {
let amount = parseInt(document.getElementById('elixer_input').value);
const total = amount * 1300000000000000000;
const web3Provider = await Moralis.enableWeb3();
const options = {
contractAddress: CONTRACT_ADDRESS,
functionName: "buyElixer",
abi: contractAbi,
params:{
amount: amount
},
msgValue: total,
};
const receipt = await Moralis.executeFunction(options);
console.log(receipt)
}
buyWalle = async()=> {
let amount = parseInt(document.getElementById('walle_input').value);
const total = amount * 500000000000000000;
const web3Provider = await Moralis.enableWeb3();
const options = {
contractAddress: CONTRACT_ADDRESS,
functionName: "buyWalle",
abi: contractAbi,
params:{
amount: amount
},
msgValue: total,
};
const receipt = await Moralis.executeFunction(options);
console.log(receipt)
}
buyRevive = async()=> {
let amount = parseInt(document.getElementById('revive_input').value);
const total = amount * 500000000000000000;
const web3Provider = await Moralis.enableWeb3();
const options = {
contractAddress: CONTRACT_ADDRESS,
functionName: "buyRevive",
abi: contractAbi,
params:{
amount: amount
},
msgValue: total,
};
const receipt = await Moralis.executeFunction(options);
console.log(receipt)
}
//BattleMode
battlesPending = async() => {
const web3Provider = await Moralis.enableWeb3();
const battles = document.getElementById("pendingBattles");
const options = {
contractAddress: CONTRACT_ADDRESS,
functionName: "pendingBattleAmount",
abi: contractAbi
};
const receipt = await Moralis.executeFunction(options);
console.log(receipt)
let htmlStringBalance = `
<p> ${receipt}<b style="color:red"> Pending</b></p>
`;
battles.innerHTML = htmlStringBalance;
}
requestBattle = async() => {
const web3Provider = await Moralis.enableWeb3();
const opponent = document.getElementById("Opponent_address").value;
const enjimonId = parseInt(document.getElementById("challenger_enjimon").value);
const options = {
contractAddress: CONTRACT_ADDRESS,
functionName: "initBattle",
abi: contractAbi,
params:{ _opponent: opponent,
challengerEnjimon: enjimonId
}
};
const receipt = await Moralis.executeFunction(options);
console.log(receipt)
}
battleReq = async () => {
let battles = await Moralis.Cloud.run("battles");
const table = document.getElementById('RequestedBattles');
battles.forEach( async (battles) =>{
let row = table.insertRow();
let challenger = row.insertCell(0);
challenger.innerHTML = await battles.attributes.challenger;
let opponent = row.insertCell(1);
opponent.innerHTML = await battles.attributes.opponent;
let date = row.insertCell(2);
date.innerHTML = await battles.attributes.createdAt;
})
}
CancelBattle = async () => {
const web3Provider = await Moralis.enableWeb3();
const battleId = parseInt(document.getElementById("battle_id").value);
const options = {
contractAddress: CONTRACT_ADDRESS,
functionName: "cancelBattle",
abi: contractAbi,
params:{ _battleId: battleId
}
};
const receipt = await Moralis.executeFunction(options);
console.log(receipt)
}
approveBattle = async () => {
const web3Provider = await Moralis.enableWeb3();
const battleId = parseInt(document.getElementById("approve_id").value);
const enjimonId = parseInt(document.getElementById("defender_enjimon").value);
const options = {
contractAddress: CONTRACT_ADDRESS,
functionName: "approveBattle",
abi: contractAbi,
params:{ _battleId: battleId,
defendingEnjimon: enjimonId
}
};
const receipt = await Moralis.executeFunction(options);
console.log(receipt)
}
testUser = async() => {
const params = Moralis.User;
const battle = await Moralis.Cloud.run("cancelbattle", params);
console.log(battle);
}
//Handlers, toggles, and helpers
function displayApusItems(){
$('#appManager').toggle();
$('#itemManager').hide();
$('#usersItems').hide();
$('#usersEnjimon').hide();
$('#apusLab').hide();
$('#mintEnjimon').hide();
$('#trainerShop').hide();
$('#battleArena').hide();
}
function displayApusEnjimon(){
$('#itemManager').toggle();
$('#appManager').hide();
$('#usersItems').hide();
$('#usersEnjimon').hide();
$('#apusLab').hide();
$('#mintEnjimon').hide();
$('#trainerShop').hide();
$('#battleArena').hide();
}
function displayUsersItems(){
$('#usersItems').toggle();
$('#appManager').hide();
$('#itemManager').hide();
$('#usersEnjimon').hide();
$('#apusLab').hide();
$('#mintEnjimon').hide();
$('#trainerShop').hide();
$('#battleArena').hide();
}
function displayUsersEnjimon(){
$('#usersEnjimon').toggle();
$('#appManager').hide();
$('#itemManager').hide();
$('#usersItems').hide();
$('#apusLab').hide();
$('#mintEnjimon').hide();
$('#trainerShop').hide();
$('#battleArena').hide();
}
function displayApusLabs(){
$('#apusLab').toggle();
$('#trainerShop').hide();
$('#appManager').hide();
$('#itemManager').hide();
$('#usersItems').hide();
$('#usersEnjimon').hide();
$('#mintEnjimon').hide();
$('#battleArena').hide();
}
function displayTrainerShop(){
$('#trainerShop').toggle();
$('#appManager').hide();
$('#itemManager').hide();
$('#usersItems').hide();
$('#usersEnjimon').hide();
$('#mintEnjimon').hide();
$('#apusLab').hide();
$('#battleArena').hide();
}
function displayBattleArena(){
$('#battleArena').toggle();
$('#appManager').hide();
$('#itemManager').hide();
$('#usersItems').hide();
$('#usersEnjimon').hide();
$('#mintEnjimon').hide();
$('#apusLab').hide();
$('#trainerShop').hide();
}
displayMintEnjimon = async() =>{
let user = await Moralis.User.current();
const admin = user.get('ethAddress');
if(admin == ADMIN){
$('#mintEnjimon').toggle();
$('#appManager').hide();
$('#itemManager').hide();
$('#usersItems').hide();
$('#usersEnjimon').hide();
$('#apusLab').hide();
$('#trainerShop').hide();
$('#battleArena').hide();
}else{
alert("Admin Only");
}
}
document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;
document.getElementById("apusItems").onclick = displayApusItems; //just items
document.getElementById("apusEnjimon").onclick = displayApusEnjimon;
document.getElementById("ownedItems").onclick = displayUsersItems;
document.getElementById("myEnjimon").onclick = displayUsersEnjimon;
document.getElementById("apusHome").onclick = displayApusLabs;
document.getElementById("mint").onclick = displayMintEnjimon;
document.getElementById("submit_mintMonster").onclick = mintMonster;
document.getElementById("TrainerShop").onclick = displayTrainerShop;
document.getElementById("uujiBuy").onclick = buyUuji;
document.getElementById("hpBuy").onclick = buyHP;
document.getElementById("elixerBuy").onclick = buyElixer;
document.getElementById("walleBuy").onclick = buyWalle;
document.getElementById("reviveBuy").onclick = buyRevive;
document.getElementById("BattleArena").onclick = displayBattleArena;
document.getElementById("pendings").onclick = battlesPending;
document.getElementById("battleSubmit").onclick = requestBattle;
document.getElementById("cancel_battle").onclick = CancelBattle;
document.getElementById("approvalSubmit").onclick = approveBattle;
$(document).ready(function(){
init();
battleReq();
});
