Dapp Introduction

Hey @javier_ortiz_mir,

I heard about this one from other members of the forum, if I am not wrong it was related to the browser used.
Which browser are you using, can you let me and try to use another one and see if the console.log pops up?

Have a nice Saturday,
Dani

@W1LL I am trying to use lite-server instead of python to see if I can clear some browser errors I am getting. I have tried steps 1-3 in the Peopleproject folder and the dapp folder. When I try the 3rd step where you Run npm install lite-server --save-dev or based on the reference link I tried running yarn add lite-server --dev it gives me the error in the screenshot below. Is there a URL I can add or a command that recognizes npm install lite-server --save-dev or any work around this error you know of??

@dan-i is it written like this:

window.ethereum.request({ method: ‘eth_requestAccounts’ }).then(function(accounts)
{
//abi string is a template over what the specification of the contract is. file added:abi.js after copying array from build/contract/people.json after Peopleproject compilation
//address arg used of people contract can be found after migration
//accounts[0] will always make sender address the address that iteracts with dapp through metamask
contractInstance = new web3.eth.Contract(abi, “0x4304CCdbB7c077547b7A47C524c7dD55548F8e0d”, {from: accounts[0]});
console.log(contractInstance);
});
//add click handler for button add data button: variable id can be found in index.html (j-query lang)
$("#add_data_button").click(inputData)
//add click handler for get data button: variable id can be found in index.html (j-query lang)
$("#get_data_button").click(fetchAndDisplay)
});

keep getting the following error after confirming the transaction on metamask:

@acf
ahh… I see the problem (thanks for providing the screenshot :smiley:)

after you run npm init, you are supposed to press enter to skip everything or key in the information requested by the package.json accordingly (if you want to. But, this is optional. Normally, I just skip them),
In the screenshot, I see you typed npm install lite-server --save-dev on the line where the project name was asked. Let me record my screen to share it to you.

1 Like

@acf
In the console error message says " the transaction (tx) does not have correct nonce …"
I think this is due to you redeploy new contract (and Metamask failed to sync with your newly deployed contract tx nonce which is back to zero). You can try to reset your Metamask account as follows.

  1. Open Metamask (on your current local ganache development network)
  2. Go to Settings > Advanced
  3. Reset Account
  4. Reload your web page

3 Likes

In case someone’s interested in the Vanilla JS version…

const web3 = new Web3(Web3.givenProvider);
let contractInstance;

window.addEventListener('DOMContentLoaded', () => {
  window.ethereum.enable().then(accounts => {
    const truffleMigratePeopleAddress = '0x97e0f06EF61f0eC93538EFb8811Cb5dD646C66b5';
    contractInstance = new web3.eth.Contract(abi, truffleMigratePeopleAddress, { from: accounts[0] });
  });
  
  document.getElementById('add_data_button').addEventListener('click',  addData);
  document.getElementById('get_data_button').addEventListener('click',  displayData);
});

const addData = () => {
  const name = document.getElementById('name_input').value;
  const age = document.getElementById('age_input').value;
  const height = document.getElementById('height_input').value;
  
  const config = {
    value: web3.utils.toWei('1', 'ether')
  }

  contractInstance.methods.createPerson(name, age, height).send(config)
    .on('transactionHash', hash => console.log('Transaction hash: ', hash))
    .on('confirmation', confirmationNumber => console.log('Confirmations: ', confirmationNumber))
    .on('receipt', receipt => console.log('Receipt: ', receipt));
}

const displayData = () => {
  contractInstance.methods.getPerson().call()
    .then(response => {
      document.getElementById('name_output').textContent = response.name;
      document.getElementById('age_output').textContent = response.age;
      document.getElementById('height_output').textContent = response.height;
    })
}

Also, an alternative way to fire up the server:

  • from Visual Studio Code, right click on index.html and “Open with Live Server”.

Cleared the nonce errors! Thanks @W1LL

Got another question:

When I update main.js it doesn’t update the browser code for example if I change:

$("#name_output").text(res.name);
$("#age_output").text(res.age);
$("#height_output").text(res.height);

to:

console.log(res);

then I reload the page and press the button to get data it still shows up in the browser form instead of in the inspect>console area as a console log…
I have tried restarting ganache, migrate --reset, recompiling, restarting python server and saved all after updating main.js code.
Are there any steps I am missing?

Hello @thecil have you seen this error before?

Also im having to manually set my gas limit when doing this unlike @filip

let me know if you need any other info. I just dont get it

this may be a suggestion for me to do…

1 Like

The contract address error is related to the address you are using when creating a web3 instance.
That address is not the contract address or, if you updated it, python server has not loaded the new contract address.
Make sure the address is correct and retry.

Im usinf Firefox … I tried using brave, but metamask is not available :frowning: … I’ll try using chrome and let you know

1 Like

Hi @acf
Not really sure to be honest why it does not reflect the latest change.
What I can assume with higher certainty is that since the change is on main.js, it should not be the problem with the Ganache or the contract itself. It is only frontend related I think.
Maybe you can try the following.

  1. stop your python server, close the Terminal / Powershell window.
  2. save all the changes, and then reopen Terminal/ Powershell window & restart the python server

I had started this section and finished it a couple days after. was it because i had Ganache running then switched off resulting in a new contract address being created or something?

When Metamask pops up the Tx fails. I’m not sure where the mistake is

Hey @Rob_McCourt

Every time your migrate your contracts you have new contract addresses.

1 Like

The contract address error is related to the address you are using when creating a web3 instance.
If you updated it, python server has not loaded the changes (sometime you can indeed experience some delays).
Make sure the address is correct and retry.

1 Like

So i restarted my computer and its been hours but still same issue and I checked the address is the same as the test address on Ganache

1 Like

Can you please console.log(contractAddress) and a screenshot of the contract address from ganache?