D'App MetaMask connection

#1

Hello!

I would like to connect my Metamask to the Kitty contract but I do not know how to do it. I followed Phil’s video about it and if I delete my localhost, it still does not want to pop up to connect metamask. I see that Metamask looks different now than in Phil’s video, did it change? Can someone help me out with it?

Thank you!

var web3 = new Web3(Web3.givenProvider);

var instance;
var user;
var contractAddress = "0x97EA105166C012051969E2f18dcF3b7750429c8c";

$(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);
    })
})
1 Like
#2

There is a semicolon missing after the instance initialization.

Do you have a local server up an running? Check out the console to! open it with Ctrl + Shift + I or Cmd + option + J for mac and let me know if you have any errors inside there. If so, please share screenshot.
Also, check out the sources tab inside the developer tools (CTRL + Shift + I => look for Sources) and see if your local server serves the correct files. This is something that happens to me quite frequently, that it is still serving the old files. In this case you have to clear your browser cache!

If you find a solution to this, maybe you want to post it here with a short explanation?

#3

Hi @Bhujanga!

I will try to answer everything and I hope I will not miss a thing.

Do I have a local server up and running? I think the answer is yes but I am leaving a screenshot here:

local server

There is a semicolon missing after the instance initialization. => this has been fixed, the semicolon now is there:

var web3 = new Web3(Web3.givenProvider);

var instance;
var user;
var contractAddress = "0x32737333C3AA9EC83a205016FC5fC4c5FE65ACb4";

$(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);
    })
})

I have opened the console, and I am having two errors, one of them may be related with this issue. So the first one is this:
Uncaught ReferenceError: earsColor is not defined
at renderCat (catSettings.js:61)
at HTMLDocument. (catSettings.js:32)
at e (jquery-3.4.1.js:1165)
at t (jquery-3.4.1.js:1171)

Not sure what this means actually because my earsColor is working in every button and also in the span.

The second I think is the one what is not letting metamask to connect:

jquery-3.4.1.js:1219 Uncaught TypeError: Cannot read property ‘enable’ of undefined
at HTMLDocument. (index.js:8)
at e (jquery-3.4.1.js:1165)
at t (jquery-3.4.1.js:1171)

also I am leaving the screenshot of the console error as well just in case.

console errors

Also I have deleted transaction history in metamask, it changed nothing.

Also, how do I check the sources? First time for me looking into it what I will need to look in. If I open I see the html.index file coming up but nothing is really popping up or given as error.

Thank you for the assistance!

1 Like
#4

You can find the sources tab here: SourcesTab
And check if the files that are being serves contain the latest code. If not, empty the browser cache.

Check if you are importing web3.min.js into your .HTML file:
HtmlWeb3Import

Also, regarding the earsColor, go to the respective lines of code stated in the error message and figure out why it is complaining.

Good luck!

#5

Okay this took me a while but I think I have checked everything you requested.

So what I am doing is:

I am opening up powershell and do this:

Python

Then I succesfully found the issue for earColors, hurray! Picture to confirm:

Console error

Also I have checked the sources and it contains the same thing as I am having the files. But still not metamask popping up for connection.

And I am having the things imported as you mentioned.

minjs

1 Like
#6

Hi @Riki,
sorry for the late reply. Please provide your repository through git. This will give me a better change to look for errors.

Also, have a look at my code here and compare

#7

Hi @Bhujanga,

First time doing this, hope it’s right. https://github.com/Riki0923/Cryptokitti/tree/main/academy-kitties-template

Looking at your code now and try to connect meta.

1 Like
#8

Nice! keep me updated on your progress.

One advice regarding importing js files into HTML. From my experience, it is best to import all js files at the end of an HTML markup. I guess in this case, it will work as it is, because you use document.ready, but for sake of best-practice-approach, try the following: import all js files as last thing inside the HTML body in this order:
popper
bootstrap
web3
abi
index
colors
catsettings
catfactory

#9

Success!

It finally connected. I am just leaving a screenshot here because I am getting an error I have never seen before:

success

The error name is: GET http://localhost:8000/favicon.ico 404 (File not found)

Is this error compromise my file going on with the course?

1 Like
#10

This error is okay.
It means that favicon (icon next to website title in the tab bar) is missing.
You can create on your own if you want:
https://www.lcn.com/blog/beginners-guide-favicons/

1 Like