Assignment - Event

Hi Kenn, been researching it 2nd day now and can’t understand what need to be done, please see my post yesterday, not sure if you seen cos didn’t press reply to you but in main thread. I also noticed that note in Index.js
Could not find name 'Web3'. Did you mean 'web3'?ts(2570)
(please see photo attached) maybe that’s causing the issue but not sure what to do with that.

Also re bootstrap error in chrome console I noticed Filip has the same error in his console in the vid and it doesn’t stop him to connect

web3error

Also there is another note in the index.js
Property 'ethereum' does not exist on type 'Window & typeof globalThis'.ts(2339)

web3error2

It have to do with that error in the console
console error2

I did downloaded most up to date web3.min.js file and replaced it but doesn’t work still

Stuck Day 3, feel helpless,
I nstalled Metamask Legacy and changed my code in index.js, and tried to research problem but no resoults and my changes didnt change a thing still same error. Please Help

web3error4

web3error3

1 Like

Hey @Kamil37, hope you are well.

Sorry for the delay, I think the problem is that you are not enabling web3 at the start of your javascript scripts (after the document is ready, it will load all your js functionality):

It should be something like:

$(document).ready(async function(){

  window.ethereum.enable()
  .then(async function(accounts){
   const instance = new web3.eth.Contract(abi, contractAddress, {from: accounts[0]})
   user = accounts[0];
  });

});

Carlos Z

Hi Thecil,
Please look at my previous posts from past days, I did try all that, what you gave me is exactly the same code as Filip in the video. I doesn’t work.

1 Like

hey @Kamil37. Ok you should try a different approach. You dont need to install web 3 as a project dependancy. you can do this if you want to use node. But an easier way you can do this is to use the web3 cdn link in your index.html to connect your browser to web3 that way. use the following code below

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Crypto Doggies </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="https://cdnjs.cloudflare.com/ajax/libs/web3/1.5.0/web3.min.js" integrity="sha512-0/nXBDmnbXRIkGvwIK2UWg4F8xscIFZHGl2sWevr6f0DnFEqZh4uTw78qLQYC16tVxbbHhoaaZLSBoIopZQucg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="./abi.js"></script>
<script type="module" src="./index.js"></script>

  <link rel="stylesheet" href="assets/css/animations.css">
  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/dogs.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">Doggies-Factory</h1>
            <p class="c-white">Create your custom Doggie</p>
        </div>
        <div class="row">
            <div class="col-lg-5 catBox m-2 light-b-shadow">
                <div class = "dog">
                    <div class = "tail"></div>
                    <div class = "fringe">
                        <div class = "fringe_1"></div>
                        <div class = "fringe_2"></div>
                        <div class = "fringe_3"></div>
                        <div class = "fringe_4"></div>
                        <div class = "fringe_5"></div>
                    </div>                    
                    <div class = "cheeks"></div>
                    <div class = "chin"></div>
                    <div class = "mouth"></div>
                    <div class = "mouth_2"></div>
                    <div class = "mouth_3"></div>
                    <!-- <div class = "saliva"></div> -->
                    <div class = "tongue">
                        <div class = "tongue_1"></div>
                        <div class = "tongue_2"></div>
                        
                        <div class = "tongue_4"></div>
                        <div class = "tongue_5"></div>
                       <!-- <div class = "saliva_1"></div>
                        <div class = "saliva_2"></div> 
                        <div class = "saliva_3"></div> -->
                    </div>
                    
                    <div class = "left_cheek"></div>
                    <div class = "right_cheek"></div>
                    <div class = "nose"></div>
                    <div class = "neck"></div>
                    <div class = "body">
                        <div class = "belly"></div>
                    </div>
                    <div class = "left_foot"></div>
                    <div class = "right_foot"></div>
                    <div class = "back_left_foot"></div>
                    <div class = "back_right_foot"></div>
                    <div class = "left_leg"></div>
                    <div class = "right_leg"></div>
    
                    <div class="ears">
                        <div class = "ear left_ear">
                            <div class = "ear left_inner_ear"></div>
                        </div>
                        <div class = "ear left_ear_end"></div>
                        <div class = "ear right_ear">
                            <div class = "ear right_inner_ear"></div>
                        </div>
                        <div class = "ear right_ear_end"></div>
                    </div>

                    <div class = "head">
                        <div class = "eyes">                           
                            <div class = "eye">
                                <div class = "left_inner_eye">
                                    <div class = "left_outer_pupil">
                                        <div class = "pupils">
                                            <div class = "left_inner_pupil"></div>
                                            <div class = "left_inner_pupil_2"></div>
                                            <div class = "left_eye_lid"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class = "eye">
                                <div class = "right_inner_eye">
                                    <div class = "right_outer_pupil">
                                        <div class = "pupils">
                                            <div class = "right_inner_pupil"></div>
                                            <div class = "right_inner_pupil_2"></div>
                                            <div class = "right_eye_lid"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>    
                        </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="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>

            <div class="col-lg-6 cattributes m-2 light-b-shadow">

                <!-- Cat colors -->
                <div id="catColors">
                    <div class="buttons">
                        <div style="display:inline; float:left">
                            <button type="button" class="btn btn-primary colors">Colors</button>
                            <button type="button" class="btn btn-primary dogtributes">Dogributes</button>
                        </div>
                        <div style="vertical-align:top; float: right">
                            <button type="button" class="btn btn-success random">Random</button>
                            <button type="button" class="btn btn-success default">Default</button>
                        </div>
                        <br><br><br>
                    </div>

                    <div class="tab colors">
                        <div class="form-group">
                            <label for="formControlRange"><b>Head, body and ears colour</b><span class="badge badge-light 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>Mouth, belly, inner ears and outer eyes colour</b><span class="badge badge-light ml-2" id="bellycode"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="bellycolor">
                        </div>
        
                        <div class="form-group">
                            <label for="formControlRange"><b>Eye colour</b><span class="badge badge-light ml-2" id="eyescode"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
                        </div>
                        
                        <div class="form-group">
                            <label for="formControlRange"><b>Fringe, paws, tail and eyelids colour</b><span class="badge badge-light ml-2" id="fringecode"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="fringecolor">
                        </div>
                    </div>
                    
                    <div class="tab dogtributes">
                        <div class="form-group">
                            <label for="formControlRange"><b>Mood Types</b><span class="badge badge-light ml-2" id="eyeName"></span></label>
                            <input type="range" min="1" max="9" class="form-control-range" id="eyeshape">
                        </div>
        
                        <div class="form-group">
                            <label for="formControlRange"><b>Fringe Types</b><span class="badge badge-light ml-2" id="decorationName"></span></label>
                            <input type="range" min="1" max="9" class="form-control-range" id="fringeTypes">
                        </div>
        
                        <div class="form-group">
                            <label for="formControlRange"><b>Fringe colour 1</b><span class="badge badge-light ml-2" id="fringecode1"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="fringecolor1">
                        </div>
        
                        <div class="form-group">
                            <label for="formControlRange"><b>Fringe colour 2</b><span class="badge badge-light ml-2" id="fringecode2"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="fringecolor2">
                        </div>
        
                        <div class="form-group">
                            <label for="formControlRange"><b>Animation</b><span class="badge badge-light ml-2" id="animationName"></span></label>
                            <input type="range" min="1" max="9" class="form-control-range" id="animation">
                        </div>
                    </div>
                    <br><br>
                    
                    
                    <button type="button" class="btn btn-danger create"><b>Create</b></button>
                    
                </div>
            </div>

        </div>

    </div>
    
    


    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</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>
  <script src="assets/js/jquery-3.4.1.js"></script>

</html>

Ok so i got this from your drive link. its the exact same as your index.html only i replaced the web3.js cdn with the proper one. i also linked your index.js file in to and changed the type to type=“module”.

Next i changed your index.html file to the following

import data from '../build/contractsDoggiesContract.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: account})
     
  } else {
      window.alert('contract not deployed to detected network.')
      
  }
  
}


loadWeb3();
loadBlockchainData()

So this code initalises your connection to the blockchain through metamask. It essentially does the same thing as what your old code is trying to do but it doesnt use jQuery but rather just regular js. It is also more dynamci as i import directly the json from your contract. Usin the json i can access the ABI and contract address directly. This way if your redeploy your contract and make changes to it the json updates automaticlaly and you dont have to go back in and recopy the abi over. This should work now. Copy both these files to your project and let me know

Hey brother, thanks a lot for that, appreciate, unfortunately still not working, also I had linked index.js file but at the bottom as Filip said should be there after all the buttons are rendered so I did that and inserted it at the bottom with your added type “module” <script type="module" src="./index.js"></script>

this is the errors i’m recieving:

error5

it also give that problem ';' expected.ts(1005) but when I put semi colon it also doesn’t change anything
error6

this is updated link to my code if you need it, I have to go to work soon but will be able to look at it tomorrow.

https://drive.google.com/drive/folders/1zIcw6LYxOt7iWl82-nENyiWu5O_mVCme?usp=sharing

1 Like

@Kamil37 push your code to githb and ill go in and fix it for u its too much effort for me to bring your code to my machine from your drive. push to githib and i can clone it straight away. ill fix your code and issue a pull request for you to merge

if ypu dont knpw how to push to githhub do the following. first open a terminal in your project repo and type

git init

then add all your files to the repo with

git add --all

then commit your changes with a message

git commit -m "imitial commit"

next go onto git hub and create a new repo. when you do you will be taken to a new page which will show the following commands. enter them into your terminal and your code will get pushed to your remote repo so i can clone
Capture
Note that the first line saying

git remote add origin https://github.com/mcgraneder/dd.git

will be different for you. this line represents the url to your remote repo

2 Likes

I got this message from github
Yowza, that’s a lot of files. Try again with fewer than 100 files. :joy:

I think I installed web3 and openzepplin and thats all that files, maybe need to start this project clean from begining and not install openzeplin and web3

1 Like

@Kamil37 in gitignore you can type in openzeppelin so that it doesnt push to git. just google it youll figure it out.

and actually i just noticed something. in the code i sent above there is a typo in the json.

it should be

import data from '../build/contracts/DoggiesContract.json' assert { type: "json" };

and not

import data from '../build/contractsDoggiesContract.json' assert { type: "json" };

it should recognise it now. not sure though why it isnt recognising the animations.css mabe put that file in the same directory

1 Like

Hiya, got my repository ready please see link below

https://github.com/KamilSzcze/CryptoDoggies4.git

many thanks

@Kamil37. ok so i got it working. There wasnt really anything wrong with it. Firstly the reason your front end wasnt connecting to metamask or anything was because you never linked your index.js file in your index.html file. Also the reason because animations.css wasnt found is because this file doesnt even exist in your project. For some reason when i search two directories out to access the doggies.json it wont work so i copied the json into the same directory as your index.js and it works. Justb be sure to replace this file with the original one in builds/contracts every or any time you redeploy your contracts.

Before moving on i suggest you look a bit into javascript and html to better understand how to link frontend to back end by accessing the relative paths of files in different directories. It really easy VS code does all the work for you. Any time you want to link a file to say your index.html in the src start by typing a dot and a slash “./”, vs code will show you all of the files and folders in the directory all you need to do is move to the file you want with the arrow keys and type tab on the file you want and vs code will automatically fill the path for you. Doing it from scracth by typing the path out yourself will more likely lead to errors of you putting in the wrong path to the file you want

Check your github i have issued a pull request. If you merge it it will update you code

1 Like

can’t we just make this a lot easier and use Moralis to make the call to MetaMask…?

1 Like

You could certainly use moralis if you want. Add your own touch.

1 Like

Ok so when I use my onclick (to submit the kitty NFT to blockchain), this is the error that pops up in my console… Any idea on where to go from here?

web3.min.js:1 Uncaught Error: invalid number value (arg="_genes", coderType="uint256", value=58246053153543350000)
    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>)

Here’s my button…

<button onclick='customKittyClicked()' style="background-color: teal" type="button" class="btn btn-primary light-b-shadow m-2 ">
          Submit Custom Kitty
        </button>

& Here’s the function the onclick calls:

function customKittyClicked(){


  var dnaStr = getDna();

  instance.methods.createKittyGen0(dnaStr).send({}, function(error, txHash){
    if(err){
      console.log('error');
      alert('Oops. There was an error sending your NFT to the blockchain.');
    }
    else{
      console.log(txHash);
      alert('Congratulations! Your NFT successfully created!');
    }
  });

Here are is the createGen0()

function createKittyGen0(uint256 _genes) public onlyOwner returns(uint256) {
    //takes the genes that you send in from front send
    //creates a new kitty for us with those specific genes
    require(gen0Counter < gen0Limit);

    gen0Counter++;
    //use _createKitty()

    return _createKitty(0, 0, 0, _genes, address(this));
  }

  function _createKitty(uint256 _momID, uint256 _dadID, uint256 _generation, uint256 _genes,address _owner) internal returns(uint256){

      Kittys memory _kitty = Kittys({

        momID: uint32(_momID),
        dadID: uint32(_dadID),
        generation: uint16(_generation),
        genes: _genes,
        birthTime: uint64(block.timestamp)
        });

      kittys.push(_kitty);

      uint256 newKittenID = kittys.length - 1;

      _transfer(address(0), _owner, newKittenID);

      emit Birth(_owner, newKittenID, _momID, _dadID, _genes);

      return newKittenID;

  }
1 Like

The value your tylrying to pass into your createKitty() funxtion is too large. Its too big of a number

Hiya thanks for all that, as we spoke previously I linked index.js at the bottom of index.html file as Filip recommended in the course, I moved it now to the top as per yours in github and copied DoggiesContract.json into client folder, also inserted animations.css (not sure how that happened) unfortunately for me still error :sob:
error7
error8

1 Like

any suggestions to make the number smaller/able to be used as input?

1 Like

hey @Kamil37 you should accept my pulll request and merge so that it updates your code you shouldnt have had to do any copying. it works perfectly on my machine. also by the looks of it the error is searching for the file in build/contracts. so you must still be importing that one and not the new json we made in your client directory. change the URL. again you dont have to do any of his just merge with my pull request

hey @william. i need to first say sorry i misread your code this morning lol i just assumed teh second snippet you provided was your javascript code while in fact it was your solidity code thats my bad i should have read it more thoroughly. So there is no issue with the code can you provide the getDNA function that you referance the error is being triggered by something in that function

1 Like

Hi man, thanks for the quick reply –

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnapupils').html()
    dna += $('#dnaears').html()
    dna += $('#dnaeartips').html()
    dna += $('#dnatummy').html()
    dna += $('#dnapaws').html()
    dna += $('#dnashadow').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnaanimation').html()
  

    return parseInt(dna)
}

It’s the same getDNA() that they gave us in the template…