man that was awesome thank you so much. yeah exactly I could not see that since 2 days and as struggling with it. Have a nice night
1 Like
Heyaā¦
Hereās my answer to the assignment. Iām uploading a GIFā¦ there is a thing, Metamask popup is not visible in the video at the click of a button. But yeahā¦ pop-ups are there for the notifications.
index.js
var web3 = new Web3(Web3.givenProvider);
var instance;
var user;
var contractAddress = "0xd7ff0A95481Fe172bb8b925BCaA688f253bDfb4f";
$(document).ready(()=>{
window.ethereum.enable().then((accounts)=>{
instance = new web3.eth.Contract(abi,contractAddress,{from: accounts[0]});
user = accounts[0];
console.log(instance);
}).then(()=>{
listenBirthEvent(instance); //event listener
})
$('#newgen0Kitty').click(()=>{
var dnaStr = getDna();
instance.methods.createKittyGen0(dnaStr).send({},function(error,txHash){
if(error){
console.log('Error occured');
$('.notifyHead').html('Error Notification');
$('.notifyBody').html('Transaction failed');
$('.toast').toast('show');
}
else{
console.log('Txn: ' + txHash);
$('.notifyHead').html('Success Notification');
$('.notifyBody').html('Transaction has been sent');
$('.toast').toast('show');
}
});
});
});
eventListeners.js
function listenBirthEvent(myContract){
myContract.events.Birth({},function(error,event){
if(error){
console.log('Error while listening birth event');
$('.notifyHead2').html('Error Notification');
$('.notifyBody2').html('Error occured while processing transaction.');
$('.toast').toast('show');
}
else{
console.log(event);
var eventReturnVal = event.returnValues;
$('.notifyHead2').html('Success Notification');
$('.notifyBody2').html(`A token has been created successfully.</br>
TokenID: ${eventReturnVal.kittenId}</br>
DadID: ${eventReturnVal.dadId} </br>
MumID: ${eventReturnVal.mumId} </br>
Genes: ${eventReturnVal.genes} `);
$('.toast').toast('show');
}
})
}
index.html - a snippet of Toast
<div aria-live="polite" aria-atomic="true" style="position: absolute;top: 14vh;right: 0; min-height: 200px;min-width: 310px;">
<div class="toast" data-delay="3000" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<strong class="mr-auto notifyHead">""</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body notifyBody">""
</div>
</div>
<div class="toast" data-delay="5000" data-autohide="false" style="position: absolute; top: 87px; right: 0;" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto notifyHead2">""</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body notifyBody2">""
</div>
</div>
</div>
2 Likes
heyā¦
While doing the assignment, I encountered an issueā¦ Kinda need help with this one.
DNA : 98 71 53 13 6 4 58 47 4 1
Error message:
Uncaught Error: invalid number value (arg="_genes", coderType="uint256", value=9871531364584740)
at Object.n [as throwError] (web3.min.js:1)
at t.encode (web3.min.js:1)
at web3.min.js:1
at Array.forEach (<anonymous>)
at N (web3.min.js:1)
at t.encode (web3.min.js:1)
at e.encode (web3.min.js:1)
at i.encodeParameters (web3.min.js:1)
at web3.min.js:1
at Array.map (<anonymous>)
1 Like
hey @tanu_g. You gotta pass the genes value as a string. You can use the javascript function .toString()
for example :
var catGenes = 9871531364584740
catGenes = catGenes.toString();
Then you can use it in your function.
1 Like
@kenn.eth
Hey Kenneth,
Thanks for the reply.
But I have a question here: how can I pass it as a string when this function expects a uint on the other side.
Edit: AND it worked.
Is the reason that for the purpose of accuracy weāre converting it to string as the DNA value is going beyond MAX_SAFE_INTEGER?
Also, I donāt get the idea why thereās a difference between the last digit of actual DNA and the value of the error message.
This is because the number is too big. Should convert to bigint wtih BigInt() JS function.
But this is no need since we pass a string. The web3 library send this variable as a string but the EVM use it as uint
1 Like
Seeming to have trouble when trying to connect to the network when running truffle migrate. The error says could not set up the network? I havenāt touched anything that Filip did not in the videos so I want to make sure I did not miss something. Not sure why the network wonāt run properly. Any thoughts? @thecil below is the error message I get when trying to migrate to the network. I have my metamask and Ganache set up right but not sure whatās going on with the network?
Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.
> Something went wrong while attempting to connect to the network. Check your network configuration.
Could not connect to your Ethereum client with the following parameters:
- host > 127.0.0.1
- port > 7545
- network_id > 5777
Please check that your Ethereum client:
- is running
- is accepting RPC connections (i.e., "--rpc" or "--http" option is used in geth)
- is accessible over the network
- is properly configured in your Truffle configuration file (truffle-config.js)
Truffle v5.4.3 (core: 5.4.3)
Node v16.3.0
michaelmcclimon@Michaels-iMac Kitties-dapp %
1 Like
Hey @Mickey_McClimon, hope you are well man!
Which command are you using to migrate the files? I assume you are using ganache as your local blockchain, also might be good to check your truffle config file, maybe the port for ganache is incorrect 
Now I can also advice to use the truffle local blockchain (truffle develop), which will do the same job as ganache (but without any weird ganache bug).
For this, the process is still the same:
- Run a local blockchain with
truffle develop
This will show you in the console a list of addresses and their private keys, you can use them to import in metamask. - In the same console of truffle develop, run
migrate --resetto migrate your files, also in the console after migration, it will show the data of each contract migrated.
Carlos Z
1 Like
You da MAN!!! exactly what it was, just had to do in the cli truffle develop then do truffle migrate and it worked like a charm, so now i can use the generated accounts and keys from there. Thank you so much!! really helpful 
1 Like
index.js
var web3 = new Web3(Web3.givenProvider);
var instance;
var user;
var contractAddress = "0x8955C96CC19A232eebA34106073E22b917e591D2";
$(document).ready(function(){
window.ethereum.enable().then(function(accounts){
instance = new web3.eth.Contract(abi, contractAddress, {from: accounts[0]})
user = accounts[0];
console.log(instance);
})
})
function createKitty() {
var kittyDna = getDna();
instance.methods.createKittyGen0(kittyDna).send({}, function(err, txHash) {
if(err) {
console.log(err);
} else {
alert("Transaction sent!");
console.log(txHash);
instance.events.Birth().on('connected', function(subscriptionId) {
console.log(subscriptionId);
})
.on('error', function(error){
console.log(error);
alert("Kitty Birth failed");
})
.on('data', function(event) {
alert(`Kitty birth successful! \n
Kitty Owner: ${event.returnValues.owner}\n
Kitty ID: ${event.returnValues.kittenId}\n
Mommy Cat: ${event.returnValues.momId}\n
Daddy Cat: ${event.returnValues.dadId}\n
Kitty Genes: ${event.returnValues.genes}
`)
})
}
})
}
$('#create').click(() => {
createKitty(getDna());
})
Not really sure what my problem is but I was wondering if anyone could help? I cannot seem to have my contract connect to the web3 metamask. It doesnāt seem to connect to my page when I press my create kitty button on the screen. I will post the code for reference but want to get this working properly before I move onā¦ My thoughts are it might be something with the HTML and calling? @thecil
https://github.com/michaelmcclimon/Kitties-Dapp
github repo if you want to take a look
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy Kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/web3.min.js"></script>
<script src="./abi.js"></script>
<link rel="stylesheet" href="assets/css/animations.css">
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Crypto-Kitties-Factory</h1>
<p class="c-white">Create your custom Crypto-Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div id="catEars" class="cat__ear">
<div id="leftEar" class="cat__ear--left">
<div class="cat__ear--left-inside"></div>
</div>
<div id="rightEar" class="cat__ear--right">
<div class="cat__ear--right-inside"></div>
</div>
</div>
<div id="head" class="cat__head">
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div id="catEyes" class="cat__eye">
<div class="cat__eye--left">
<span class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span class="pupil-right"></span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__mouth-left"></div>
<div class="cat__mouth-right"></div>
<div id="whiskLeft" class="cat__whiskers-left"></div>
<div id="whiskRight" class="cat__whiskers-right"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div class="cat__paw-left"></div>
<div class="cat__paw-left_inner"></div>
<div id="pawRIGHT" class="cat__paw-right"></div>
<div id="pawRIGHTINNER" class="cat__paw-right_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<button id="btnColorsTab" type="button" class="btn btn-dark">Colors</button>
<button id="btnAttributesTab" type="button" class="btn btn-dark">Attributes</button>
<div id="headGroup" class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div id="eyesGroup" class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
</div>
<div id="earsGroup" class="form-group">
<label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
<div id="mouthGroup" class="form-group">
<label for="formControlRange"><b>Mouth</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div id="eyeShapeGroup" class="form-group">
<label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
<input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
</div>
<div id="decoGroup" class="form-group">
<label for="formControlRange"><b>Decorative Pattern</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
<input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
</div>
<div id="midDecoGroup" class="form-group">
<label for="formControlRange"><b>Decoration Mid Color</b><span class="badge badge-dark ml-2" id="midcolorcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
</div>
<div id="sideDecoGroup" class="form-group">
<label for="formControlRange"><b>Decoration Sides Color</b><span class="badge badge-dark ml-2" id="sidecolorcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="decorationsides">
</div>
<div id="animGroup" class="form-group">
<label for="formControlRange"><b>Animations</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
<input type="range" min="1" max="6" class="form-control-range" id="animation">
</div>
</div>
<div class="col-lg-7">
<button id="random" type="button" class="btn btn-dark">Randomize</button>
<button id="reset" type="button" class="btn btn-dark">Reset</button>
<button id="create" type="button" class="btn btn-success my-2 my-sm-0" >Create Kitty</button>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Michael McClimon's Defi Project July 2021</p>
</footer>
</body>
<script src="./index.js"></script>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
index.js
var web3 = new Web3(Web3.givenProvider);
var instance;
var user;
var contractAddress = "0x8955C96CC19A232eebA34106073E22b917e591D2";
$(document).ready(function(){
window.ethereum.enable().then(function(accounts){
instance = new web3.eth.Contract(abi, contractAddress, {from: accounts[0]})
user = accounts[0];
console.log(instance);
})
})
function createKitty() {
var kittyDna = getDna();
instance.methods.createKittyGen0(kittyDna).send({}, function(err, txHash) {
if(err) {
console.log(err);
} else {
alert("Transaction sent!");
console.log(txHash);
instance.events.Birth().on('connected', function(subscriptionId) {
console.log(subscriptionId);
})
.on('error', function(error){
console.log(error);
alert("Kitty Birth failed");
})
.on('data', function(event) {
alert(`Kitty birth successful! \n
Kitty Owner: ${event.returnValues.owner}\n
Kitty ID: ${event.returnValues.kittenId}\n
Mommy Cat: ${event.returnValues.momId}\n
Daddy Cat: ${event.returnValues.dadId}\n
Kitty Genes: ${event.returnValues.genes}
`)
})
}
})
}
$('#create').click(() => {
createKitty(getDna());
})
This one took a while hahaā¦
Issues with connecting metamask should be solved if you
- have the metamask legacy extension installed (credit @kenn.eth)
- host frontend with python server (credit @derdis14)
index.js
var web3 = new Web3(Web3.givenProvider);
var instance;
var user;
var contractAddress= "0x793b96e20D6bCbFd6Ea662f360889510880A1d61";
$(document).ready(function() {
window.ethereum.enable().then(function(accounts){
instance = new web3.eth.Contract(abi, contractAddress, {from: accounts[0]});
user = accounts[0];
console.log(instance);
// event listener for "Birth"
instance.events.Birth().on('data', function(event) {
console.log(event);
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;
$("#kittyBirthed").css("display","block");
$("#kittyBirthed").text("G-Kitty successfully born on the blockchain! \n \n Owner:" +owner
+"\n Kitten Id: "+kittenId
+"\n Mum Id: "+mumId
+"\n Dad Id: "+dadId
+"\n Genes: "+genes);
})
.on('connected', function(subscriptionId){
console.log(subscriptionId);
})
.on('error', function(error){
console.log(error);
alert("G-Kitty blockchain birth failed")
})
})
})
$('#createButton').click(()=>{
var dna = getDna();
instance.methods.createKittyGen0(dna).send({}, function(error,txHash){
if(error){
console.log(error);
alert("There was an error with the transaction");
}else{
console.log(txHash);
}})
})
index.html
</div>
<button id="randomButton" type="button" class="btn btn-light">Random kitty</button>
<button id="defaultButton" type="button" class="btn btn-light">Default kitty</button>
<button id="createButton" type="button" class="btn btn-light">Create kitty</button>
<div class="alert alert-success" id="kittyBirthed" role="alert" style="display:none"></div>
</div>
1 Like
hey @Mickey_McClimon ! Can you send a screen from that
lets see whats inside and whats the message. Also post the errors you are getting. Remember that you need the local blockchain always running and the metamask set to connect with it also.
i was able to figure this out but thank you!
1 Like
Got stuck and had to watch the solution 
Here my code:
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/web3.min.js"></script>
<script src="./abi.js"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="ears">
<div class="ear left_ear"></div>
<div class="ear right_ear"></div>
</div>
<div class="inner_ears">
<div class="inner left_iear"></div>
<div class="inner right_iear"></div>
</div>
<div id="catHead">
<div class="eyes">
<div class="eye">
<div class="pupils"></div>
</div>
<div class="eye">
<div class="pupils"></div>
</div>
</div>
<div class="mandible"></div>
<div class="nose_and_mouth"></div>
<div class="cheeks">
<div class="cheek"></div>
<div class="cheek"></div>
</div>
</div>
<div class="torso"></div>
<div class="paws">
<div class="paw"></div>
<div class="paw"></div>
</div>
<div class="tail"></div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnapaws"></span>
<span id="dnacie"></span>
<span id="dnamn"></span>
<span id="dnaanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<ul class="nav nav-tabs" id="ex1" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
id="ex1-tab-1"
data-toggle="tab"
href="#ex1-tabs-1"
role="tab"
aria-controls="ex1-tabs-1"
aria-selected="true">
Colors
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="ex1-tab-2"
data-toggle="tab"
href="#ex1-tabs-2"
role="tab"
aria-controls="ex1-tabs-2"
aria-selected="false">
Cattributes
</a>
</li>
</ul>
<div class="tab-content" id="ex1-content">
<div
class="tab-pane fade show active"
id="ex1-tabs-1"
role="tabpanel"
aria-labelledby="ex1-tab-1"
>
<div class="form-group">
<label for="formControlRange"><b>Color: Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Color: Mandible, paws and tail</b><span class="badge badge-dark ml-2" id="mptcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mptcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Color: Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Color: Ears</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Color: Cheeks and Inner Ears</b><span class="badge badge-dark ml-2" id="ciecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="ciecolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Color: Mouth and Nose</b><span class="badge badge-dark ml-2" id="mncode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mncolor">
</div>
</div>
<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
<div class="form-group">
<label for="formControlRange"><b>Eye shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
<input type="range" min="1" max="3" class="form-control-range" id="eyeshape">
</div>
<div class="form-group">
<label for="formControlRange"><b>Paw height & Tail position</b><span class="badge badge-dark ml-2" id="pawname"></span></label>
<input type="range" min="1" max="3" class="form-control-range" id="pawheight">
</div>
<div class="form-group">
<label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animcode"></span></label>
<input type="range" min="1" max="5" class="form-control-range" id="anim">
</div>
</div>
</div>
<button onclick="randomizeDNA()">Random Cat</button>
<button onclick="renderCat(defaultDNA)">Default Cat</button>
<button onclick="generateKitty()">Generate Kitty</button>
</div>
<div class="alert alert-success" role="alert" id="kittyCreation" style="display:none"> </div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy Bootcamp July 2020</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
index.js
var web3 = new Web3(Web3.givenProvider);
var instance;
var user;
var contractAddress = "0x4280b1431C291650ba292b5365D1EF5D1648B4dd";
$(document).ready(function(){
window.ethereum.enable().then(function(accounts){ //"login" if accepted by user
instance = new web3.eth.Contract(abi, contractAddress, {from: accounts[0]}); //abi defined in abi.js
user = accounts[0];
instance.events.Birth().on('data', function(event){
console.log(event);
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("Cat successfully created! owner: " + owner +
" kittyId: " + kittenId +
" mumId: " + mumId +
" dadId: " + dadId +
" genes: " + genes);
})
.on('error', console.error);
})
})
function generateKitty(){
var dnaStr = getDna();
instance.methods.createKittyGen0(dnaStr).send({}, function(error, txHash){
if(error)
console.log(error);
else{
console.log(txHash); //only for local development, as in prod txHash would take some time.
}
})
}
hey @maxs ! Where did you get stuck? Are you having any error in the console?
You can screen shoot the error and send picture here.
Hey @kenn.eth, got stuck trying to understand the documentation 
but now everything works fine. Thanks for reaching out!
1 Like
Hi guys I am stuck on trying to run my index.js and connecting to metamask, could anyone help me please?
here is the error in chrome console:
this is error from my terminal:
C:\Users\kamil\Documents\Ethereum-201\Crypto Doggies 2>cd client
C:\Users\kamil\Documents\Ethereum-201\Crypto Doggies 2\client>py -3.9 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
::1 - - [13/Sep/2021 18:18:21] "GET / HTTP/1.1" 304 -
::1 - - [13/Sep/2021 18:18:21] "GET /abi.js HTTP/1.1" 304 -
::1 - - [13/Sep/2021 18:19:51] code 404, message File not found
::1 - - [13/Sep/2021 18:19:51] "GET /assets/bootstrap/js/popper.min.js.map HTTP/1.1" 404 -
::1 - - [13/Sep/2021 18:19:51] "GET /assets/bootstrap/css/bootstrap.min.css.map HTTP/1.1" 200 -
::1 - - [13/Sep/2021 18:19:51] "GET /assets/bootstrap/js/bootstrap.min.js.map HTTP/1.1" 200 -
::1 - - [13/Sep/2021 18:22:40] "GET / HTTP/1.1" 304 -
::1 - - [13/Sep/2021 18:22:40] code 404, message File not found
::1 - - [13/Sep/2021 18:22:40] "GET /assets/bootstrap/js/popper.min.js.map HTTP/1.1" 404 -
::1 - - [13/Sep/2021 18:22:40] "GET /assets/bootstrap/js/bootstrap.min.js.map HTTP/1.1" 200 -
::1 - - [13/Sep/2021 18:22:40] "GET /assets/bootstrap/css/bootstrap.min.css.map HTTP/1.1" 200 -
::1 - - [13/Sep/2021 18:42:21] code 404, message File not found
::1 - - [13/Sep/2021 18:42:21] "GET /assets/bootstrap/js/popper.min.js.map HTTP/1.1" 404 -
if you would like to check out my code please follow that link (Iām using truffle develop not Ganache):
https://drive.google.com/drive/folders/1NWoCIRF2ahE0-mVesjwJQMBmfJMdTvog?usp=sharing
Its looks like the warnings come from bootstrap library but nothing about web3 connection errors in the console.
You can also download last web3 version and connect like in the following docs:
https://web3js.readthedocs.io/en/v1.5.2/web3.html#setprovider
1 Like
Thanks Kenn, I followed your link and from there I chose Getting Started and followed those instructions:
First you need to get web3.js into your project. This can be done using the following methods:
- npm:
npm install web3 - yarn:
yarn add web3 - pure js: link the
dist/web3.min.js
so id typed npm install web3 in my cmd and this is what printed:
Microsoft Windows [Version 10.0.19041.1165]
(c) Microsoft Corporation. All rights reserved.
C:\Users\kamil\Documents\Ethereum-201\Crypto Doggies 2>npm install web3
npm WARN deprecated [email protected]: This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: This module has been superseded by the multiformats module
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: This module has been superseded by the multiformats module
npm WARN deprecated [email protected]: This module has been superseded by the multiformats module
npm WARN deprecated [email protected]: This module has been superseded by the multiformats module
npm WARN deprecated [email protected]: This module has been superseded by the multiformats module
added 366 packages, and audited 368 packages in 25s
54 packages are looking for funding
run `npm fund` for details
1 low severity vulnerability
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
C:\Users\kamil\Documents\Ethereum-201\Crypto Doggies 2>npm audit
# npm audit report
web3 *
Insecure Credential Storage - https://npmjs.com/advisories/877
No fix available
node_modules/web3
1 low severity vulnerability
Some issues need review, and may require choosing
a different dependency.
C:\Users\kamil\Documents\Ethereum-201\Crypto Doggies 2>
heres some new errors in the console, as you can see Doggie is not very happy about that 
