Dapp Introduction

[kHarsh]

Hi @dan-i I tried hard to see if there is anything wrong but as you said nothing could be found. Finally I did change the Ganache port to 8545, earlier it was running on 7545 and reconnected the Metamask, then I could see the mined blocks displayed. Don’t know why that happens.

[Haysoose]

@filip, console is not logging contract instance and button is not responsive. I can’t figure out what’s wrong.

main.js

var web3 = new Web3(Web3.givenProvider);
var contractInstance;

$(document).ready(function() {
    window.ethereum.enable().then(function(accounts){
      contractInstance = new web3.eth.Contract(abi, "0x26A7cf610624acB6571ca6F7678AB3df05CaaC0B", {from: accounts[0]});
      console.log(contractInstance);
    });
    $("#add_data_button").click(inputData)

});

function inputData(){
  alert("inputdata");
}

I also have many other warnings showing than in the video.

warnings

Can anyone help?

[Haysoose]

Update: Tried Microsoft Edge instead of Google Chrome, and it’s working.

[ZigaP]

Hi,

I already have my own Metamask wallet imported on my Brave browser. I have my main account and now I am wondering - is it safe to just create a new account within this wallet for the purpose of this exercise?

I have checked some online resources, which led me to believe yes, they are separate as long as I don’t share the data of logging in to the Metamask account, but I would love it if someone confirmed as it is better to be safe than sorry.

Thank you

[ArgenFrank]

I am getting quite a few errors in console, and not only with my code, but i tried it with filip’s too. I guess its related to some changes in metamask not injecting web3 anymore ? anyway, im digging into this, if someone can share their 2 cents that would be great. Console:

[dan-i]

@ZigaP

Because you are learning, and because you will use GitHub for your first time I highly suggest you to use a new wallet.
I saw many times beginners push their mnemonic phrase on GitHub by mistake, so just to be 100% safe use a new wallet.
I created an FAQ that explains how not to push the mnemonic on Github: FAQ - How to .gitignore

Happy learning,
Dani

[ArgenFrank]

Still cannot get rid of the errors in console (+ got new ones) nor can i see the objetc. F. Maybe the web3.min.js is an old version ?. I tried not using enable() but rather eth_requestAccounts method, but i guess the main is not the problem here,

[ArgenFrank]

https://unpkg.com/[email protected]/dist/web3.min.js could this be the web3.min.js i need ? if i use this web3.min.js and add it as script and i got fewer errors but still no object:

[ArgenFrank]

Hi kharsh, can you please tell me if everything still works fine for you ? I guess there has been a few changes in metamask this year 2021 and im having trouble making it work, i ve implemented new things but still i cannot see the object from main.js in console. If you could be kind enough to check if your code works i would really appreciate it. Thanks !

[kHarsh]

Hey Argen, yes everything started working, when I started Ganache on 8545, Don’t know why that’s the case, but check your truffle.js, restart Ganache verify again if it doesn’t work then try to restart ganache on port 8545 and try again.

[ArgenFrank]

The thing is that i cannot link my deployed contract with the front end template. I dont understand how the ports thing could help me here :S . It´s the main.js the problem, the ethreum.enable() is no longer working and im stuck with errors trying to implement eth_requestAccounts, guess i need to do more research

[EdwardSantos]

Hey Argen. I’ve been following your thread, and I’ve been having the same issue the past couple days as well.
I tried getting a new copy of web3.js, but that didn’t work either. Voy a segire intentando. Ojala pueda encontrar la solucion.

[ArgenFrank]

Share the solution if you come across it ! Saludos!

[ArgenFrank]

Well, after 3 days of researching and reading documentation i can say i learn a lot. Finally i got this:

The changes i made were to use this web3.min.js as script in the index.html:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

And then the main.js :

 let web3 = new Web3(Web3.givenProvider);
var cinst;

$(document).ready(function(){
	//will start metamask extension
	startApp();	

});


async function startApp() { 
	
	 await ethereum.request({ method: 'eth_requestAccounts'}).then(function (accounts){
		cinst = new web3.eth.Contract(window.abi, "0xe04f65355cC0ec1AB0bC1FE00bE029595748F1f4", {from: accounts[0]});		
		console.log(accounts[0]);
		console.log(cinst);
	});
	
}

@EdwardSantos here man, check if you can make it work!

[dan-i]

Hi @ArgenFrank

Not sure what your error is Would you please clarify?

thanks
Dani

[ArgenFrank]

Hi Dani, sure. There were a few, first the code had deprecated expressions such as ethereum.enable() and wouldnt work, then i had a hard time instantiating the contract on javascript, i dont really know why. But what took me the most was to figure out how to successfully implement ethereum.request until i realised i required an async function. Oh, and i also changed the web3.min.js file cause it threw some errors there in console too.

[dan-i]

Hey @ArgenFrank

I know that ethereum.enable is deprecated, I still expect that to work anyway.
I can suggest to use the new way to get account which is something like

async function connectMetamask() {
  if (typeof window.ethereum !== undefined) { 
    const accounts = await web3.eth.requestAccounts(); 
  }
}

For reference you can check my example here: https://github.com/dani69654/CoinFlip/blob/master/client/main.js

If you still have issues let me know

Cheers,
Dani

[kHarsh]

OK I can’t exactly say where is the problem based on your description but I’ll just write down all the steps here to follow.

1. Launch Ganache you will see All the accounts with default balance of 100Eth.
2. Go to settings -> Workspace and add your truffle project (point to truffle.js file)
3. Open settings -> Server leave the host name as is and you can change the server port to 8545 Press Restart on upper right corner(this is important)
4. Once you have server running, open terminal and navigate to your truffle project
5. if you have a precompiled contract then do truffle deploy, make sure your contract is displayed as deployed in Ganache.
6. After Successful deployment make sure, YOU COPY NEW CONTRACT ADDRESS in to your front end web3, may be you have wrong contract address so check for that.
7. Following is my working react code, Hopefully this will help enjoy let me know how it goes.

const web3 = new Web3(Web3.givenProvider);
const contractAddr = ‘0x75fd53D58b707A5F532a1226849d9D8008aaBD30’;

async componentWillMount() {
accounts = await window.ethereum.enable()
flipCoinContractInstance =new web3.eth.Contract(coinFlipAbi, contractAddr, {from : accounts[0]})
}

Also the truffle.js development block
development: {
host: “127.0.0.1”, // Localhost (default: none)
port: 8545, // Standard Ethereum port (default: none)
network_id: “*”, // Any network (default: none)
}

[Big_Nine]

Hi @filip,

Looks like this video was a victim of breaking changes in metamask. There is a legacy version of the metamask extension now available, but I was not able to get that working either. Will try again tomorrow.

[CaliCrypto22]

Hi . . . I’m having trouble getting set up (Dapp Intro: Project Setup). I have installed MetaMask and Ganache. Per your instructions in the video, I then clicked on “settings” and “add a network” in MetaMask. After that, I entered the network name (ganache) and then the RPC/URL (http://127.0.0.1:7545). In other words, I followed the instructions in the video exactly. But the problem is that I can’t actually add a new network because the “save” button remains greyed out after entering the above info.