on top of that, when I cllick the “submit kitty” button… the console throws an error (which is what this thread is all about) --> BUT i ALSO noticed that the last couple of digits in the genes stay at a value of 0… They don’t change to their respective numbers like all of the other values
1 Like
UPDATE. THINK ITS WORKING NOW! All had to do is clear my cached files in my chrome brawser as for some reason id read old version of index.js file
Hey Evan, I did accept your pull and merged it but it didin’t update in my VS so i coppied it, than just to be sure I have all same cos didn’t work for me I downloaded zipfile repo and created new project from merged repo and still didn’t work. I’m sure i’m doing something wrong, sorry mate not sure what.
just double checked again the URL is correct in index.js yet the error is the same:
while here in chrome console when I click at index.js link it shows that URL is not changed. Why?
also had this popup in VS 
i tried to increase symbols but didn’t help
Did you happen to take a look at where I could fix this issue i mentioned to you? Thanks for all the help in advance man
Will
YEAH! MADE IT! was struggling a bit for over an hour as was receiving all sorts of errors, but figured it out all eventually! It feels good 
here’s my code
import data from './DoggiesContract.json' assert { type: "json" };
var account
var contractInstance
async function loadWeb3() {
if (window.ethereum) {
window.web3 = new Web3(window.ethereum)
await window.ethereum.enable()
}
else if (window.web3) {
window.web3 = new Web3(window.web3.currentProvider)
}
else {
window.alert('Non-Ethereum browser detected. You should consider trying MetaMask!')
}
}
async function loadBlockchainData() {
const web3 = window.web3
//gets all user accounts and displays the current user on the UI (navbar)
var accounts = await web3.eth.getAccounts()
const networkId = await web3.eth.net.getId()
const networkData = data.networks[networkId]
if(networkData) {
contractInstance = new web3.eth.Contract(data.abi, networkData.address, {from: accounts[0]})
} else {
window.alert('contract not deployed to detected network.')
}
console.log(contractInstance);
}
function CreateDoggie(){
var danStr = getDna();
contractInstance.methods.createDoggieGene0(danStr).send({}, function(error, txHash){
if(error)
console.log(error);
else{
console.log(txHash);
}
})
}
$(".btn.create").click(()=>{
CreateDoggie();
})
loadWeb3();
loadBlockchainData()
2 Likes
brilliant glad to hear it
2 Likes
It works…
Here is my code:
index.js
var web3 = new Web3(Web3.givenProvider);
var instance;
var user;
var contractAddress = "0x0f6429A6bd3E3d498B62Fd9E94C5d8bd9AC89ec8";
$(document).ready(function(){
window.ethereum.enable().then(function(accounts){
// new contract instance
instance = new web3.eth.Contract(abi, contractAddress, {from: accounts[0]});
user = accounts[0];
console.log(instance);
// event listener "Birth"
instance.events.Birth().on('data', function(event){
console.log(event);
alert("MEOW!!! - A new kitty was born");
let owner = event.returnValues.owner;
let kittenId = event.returnValues.kittenId;
let mumId = event.returnValues.mumId;
let dadId = event.returnValues.dadId;
let genes = event.returnValues.genes;
$("#kittyCreation").css("display", "block");
$("#kittyCreation").text("New kitty created: "
+ "owner: " + owner + ""
+ "kittenId: " + kittenId + ""
+ "mumId: " + mumId + ""
+ "dadId: " + dadId + ""
+ "genes: " + genes);
})
.on('error', console.error);
})
})
function createKitty() {
var dnaString = getDna();
console.log(dnaString);
instance.methods.createKittyGen0(dnaString).send({}, function(error, txhash){
if (error) {
console.log(error);
} else {
console.log(txhash);
alert("SUCCESS! - Transaction has been sent");
}
})
}
index.html changes
<!-- Buttons -->
<div id="btnDiv" class="row">
<div class="btn-group" role="group" aria-label="Action Buttons">
<button type="button" class="btn m-1 btn-dark" id="randomBtn">Get Random Kitty</button>
<button type="button" class="btn m-1 btn-dark" id="defaultBtn">Get Default Kitty</button>
<button type="button" class="btn m-1 btn-success" id="createBtn">Create Kitty</button>
</div>
</div>
<!-- Kitty creation alert -->
<div class="alert alert-success" role="alert" id="kittyCreation" style="display: none"></div>
<br>
1 Like
I’ve been stuck on this for literally two weeks and have tried to reach out over the forum on different assignment pages to get someone’s input… but haven’t heard back
Can someone please offer me some help. I cannot get past this certain part.
For some reason, I cannot get the proper ETH account to be the one calling the transaction… as it’s actually using my mainnet MetaMask account. Yet, the dApp is using the ganache network as you can see… Insufficient funds. I’ve trued looking everywhere for a clear answer… but keep coming up with nothing
Thanks a lot Bro! not sure what I would do without your help.
hey @William make sure that you are using a ganache account with funds. Remember that you can also import this accounts using private keys from ganache to metamask.
its working
var web3 = new Web3(Web3.givenProvider);
var instance;
var user;
var contractAddress = "0x512e79fD3E3e52D780Dd722a7967474a743cDe3f";
$(document).ready(function(){
window.ethereum.enable().then(accounts => {
user = accounts[0];
instance = new web3.eth.Contract(abi, contractAddress, { from: user });
console.log(instance);
instance.events.Birth().on('data', function(event){
console.log(event);
});
});
});
function birthKitty(dnaString) {
instance.methods.createKittyGen0(dnaString).send({}, function(error, txHash){
if (error)
console.log(error);
else
console.log(txHash);
})
}
2 Likes
Hi Evan, how are you? Hope you doing well. I have some errors poppin in the console again, stuck again. Could you help please?
index.js
import data from './DoggiesContract.json' assert { type: "json" };
var account
var contractInstance
async function loadWeb3() {
if (window.ethereum) {
window.web3 = new Web3(window.ethereum)
await window.ethereum.enable()
}
else if (window.web3) {
window.web3 = new Web3(window.web3.currentProvider)
}
else {
window.alert('Non-Ethereum browser detected. You should consider trying MetaMask!')
}
}
async function loadBlockchainData() {
const web3 = window.web3
//gets all user accounts and displays the current user on the UI (navbar)
var accounts = await web3.eth.getAccounts()
const networkId = await web3.eth.net.getId()
const networkData = data.networks[networkId]
if(networkData) {
contractInstance = new web3.eth.Contract(data.abi, networkData.address, {from: accounts[0]})
} else {
window.alert('contract not deployed to detected network.')
}
console.log(contractInstance);
contractInstance.events.Birth().on("data", function(event){
console.log(event);
let owner = event.returnValues.ower;
let doggieId = event.returnValues.doggieId;
let mumId = event.returnValues.mumId;
let dadId = event.returnValues.dadId;
let genes = event.returnValues.genes;
$("#doggieCreation").css("display", "block");
$("#doggieCreation").text("owner:" + owner
+"doggieId:" + doggieId
+"mumId:" + mumId
+"dadId:" + dadId
+"genes:" + genes)
})
.on("error", console.error);
}
function CreateDoggie(){
var danStr = getDna();
contractInstance.methods.createDoggieGene0(danStr).send({}, function(error, txHash){
if(error)
console.log(error);
else{
console.log(txHash);
}
})
}
$(".btn.create").click(()=>{
CreateDoggie();
})
loadWeb3();
loadBlockchainData()
1 Like
hey @Kamil37. i think i have seen this eror before im trynna think how i fixed it. i want to say it was to do with ganache but im not sure. Have you redeployed the code. If so make sure you have updated the doggies contract json or else try making a new ganache instance to see if that works.
What changes did you make for this error to appear in the first place?
i just did a quick google search if you look at this form there is good isnight. I think i definitely is an issue with your ganache local dev chain and metamask. I think if you create a new ganache workspace it should be fine but here is the link to the thread with good insight https://ethereum.stackexchange.com/questions/30921/tx-doesnt-have-the-correct-nonce-metamask/92445. Its a weird error i only ever got it once dont know what caused or why
3 Likes
Here is my index.js with the event listener and popup notification:
index.js
var web3 = new Web3(Web3.givenProvider);
var instance;
var user;
var contractAddress = "0xbE711E370edf860bED917a516aa3e928520EB2fd";
$(document).ready(function(){
window.ethereum.enable().then(accounts => {
user = accounts[0];
instance = new web3.eth.Contract(abi, contractAddress, { from: accounts[0] });
console.log(instance);
instance.events.Birth().on('data', function(event){
console.log(event);
let owner = event.returnValues.owner;
let catId = event.returnValues.catId;
let dadId = event.returnValues.dadId;
let mumId = event.returnValues.mumId;
let genes = event.returnValues.genes;
let message1 = "<b>Your cat has been succesfully created!</b>" + "<br/>" + "owner: " + owner + "<br/>" + "catId: " + catId + " dadId: " + dadId + " mumId: " + mumId + " genes: " + genes;
showNotifications(message1);
})
.on('error', console.error);
})
})
//Display notifications for 5s
function showNotifications (message) {
$("#notification").css({visibility: 'visible'});
$("#notification").html(message);
setTimeout(function(){
$("#notification").css({visibility: 'hidden'});
},5000);
}
//Create Cat NFT when the button is clicked
function createCat() {
var dnaStr = getDna();
instance.methods.createCatGen0(dnaStr).send({}, function(error, txHash){
if (error)
console.log(error);
else
console.log(txHash);
})
}
$(".btn.createCatBtn").click(()=>{
createCat();
})
And the index.html changes:
index.html
<div class="row">
<div align="center" class="col-lg-6 catBox m-2 light-b-shadow">
<button type="button" class="btn btn-primary default btn-lg">Default DNA</button>
<button type="button" class="btn btn-warning random btn-lg">Random DNA</button>
</div>
<div align="center" class="col-lg-5 catBox m-2 light-b-shadow">
<button type="button" class="btn btn-success btn-lg btn-block createCatBtn">CREATE</button>
</div>
</div>
@Kamil37 I confirmed what @mcgrane5 said above: it is simply that ganache and metamask aren’t synchronized anymore. Redeploy your contract with truffle migrate --reset (don’t forget to edit your contract address, and your abi if you made any changes) then relaunch browser + metamask + ganache. This should work.
By the way, anyone knows how to get rid of all console warnings due to web3 being deprecated? Is there any better way to deal with smart-contracts from JS now? (I guess we could just use moralis, but we wouldn’t learn anything haha!) Is ether.js library any better?
3 Likes
Hahahaha lol @Pedrojok01 your so on point. I love moralis and its an amazing piece of tech it really is but it is so mich more rewarding doing everything from scratch your right
2 Likes
Haha yeah, at least trying to understand what we’re doing before taking shortcuts! 
3 Likes
Amazing! thanks a lot Evan, it worked when I reset Metamask Acc. By the way i’m using truffle develop and never dealt with ganache in my life 
, but I read somewhere that truffle develop still is using ganache?
1 Like
Ok guys job done! Next please 
my index.js
import data from './DoggiesContract.json' assert { type: "json" };
var account
var contractInstance
async function loadWeb3() {
if (window.ethereum) {
window.web3 = new Web3(window.ethereum)
await window.ethereum.enable()
}
else if (window.web3) {
window.web3 = new Web3(window.web3.currentProvider)
}
else {
window.alert('Non-Ethereum browser detected. You should consider trying MetaMask!')
}
}
async function loadBlockchainData() {
const web3 = window.web3
//gets all user accounts and displays the current user on the UI (navbar)
var accounts = await web3.eth.getAccounts()
const networkId = await web3.eth.net.getId()
const networkData = data.networks[networkId]
if(networkData) {
contractInstance = new web3.eth.Contract(data.abi, networkData.address, {from: accounts[0]})
} else {
window.alert('contract not deployed to detected network.')
}
console.log(contractInstance);
contractInstance.events.Birth().on("data", function(event){
console.log(event);
let owner = event.returnValues.ower;
let doggieId = event.returnValues.doggieId;
let mumId = event.returnValues.mumId;
let dadId = event.returnValues.dadId;
let genes = event.returnValues.genes;
swal("Congrats!", "Your doggie has been created!\n\n Your Doggie details:\n\n Owner: " + owner
+"\nDoggie Id: " + doggieId
+"\nMum Id: " + mumId
+"\nDad Id: " + dadId
+"\nGenes: " + genes, "success");
})
.on("error", console.error);
}
function CreateDoggie(){
var danStr = getDna();
contractInstance.methods.createDoggieGene0(danStr).send({}, function(error, txHash){
if(error)
console.log(error);
else{
console.log(txHash);
}
})
}
$(".btn.create").click(()=>{
CreateDoggie();
})
loadWeb3();
loadBlockchainData()
2 Likes
Nice popup @Kamil37! Your dog is pretty good looking too haha! Got some front-end background?
About Ganache, it simply runs a local blockchain on your computer, makes it easy and fast to develop and test your smart-contracts. Maybe it is automatically installed with the Truffle suite and you’re just not using the gui UI? Cause otherwise, you wouldn’t have any blockchain to deploy your smart-contract on! (unless you’re already on an Ethereum testnet?)
1 Like
Hey! Thanks man! I don’t actually have any background in programming whatsoever, so I’m pleased to hear that. I spend a lot of time creating and learning to create my doggie. I think I can make it better with shades to make it look 3d but wanted to move on to coding the smart contract. The popup I just google how to make it nicer and it was easiest thing.
Yeah I understand that ganache create local blockchain exactly like truffle develop does but I never used it, I thought why should I if I already used and know how to use truffle develop.
1 Like
Wow, well done then! You’re definitely doing a great job. Might take a look at this google thing too haha!
I’ve checked the Truffle doc about Ganache and found this:
Truffle Develop : An interactive console that also spawns a development blockchain
So, while it isn’t Ganache, you do have a running blockchain integrated with Truffle. But…
Reasons to use Truffle Console :
- You have a client you’re already using, such as Ganache or geth
- You want to migrate to a testnet (or the main Ethereum network)
- You want to use a specific mnemonic or account list
Reasons to use Truffle Develop :
- You are testing your project with no intention of immediately deploying
- You don’t need to work with specific accounts (and you’re fine with using default development accounts)
- You don’t want to install and manage a separate blockchain client
So you’ll be a bit limited (dealing with accounts for instance) and will have to install Ganache at some point if you want to deploy on Ethereum/Ethereum testnet.
Here is the doc:
https://www.trufflesuite.com/docs/truffle/getting-started/using-truffle-develop-and-the-console
2 Likes