1

I am experiencing problems with the Truffle React boilerplate code that the front end is unable to read / set state of the contract. Here are the details:

I unboxed the React boilerplate using truffle unbox react. I updated the development host and port details in the truffle-config.js to match the Ganache configurations, while Ganache running in the background. I successfully truffle compile and truffle migrate the SimpleStorage contract to Ganache. I opened another terminal and cd into the client folder, npm install the latest "web3": "^1.0.0-beta.55" and other dependencies in the client folder. I then logged in my MetaMask with the same Mnemonic generated by Ganache, so then I can access all the wallet accounts. I npm start the client and the app appears to be working on the localhost:3000. Everything runs except the front end is unable to read / set state of the contract. The stored value is 0 as opposed to be 5. What has gone wrong?

Screenshot

Github repo: https://github.com/hugo2soo/react

Best, Hugo

  • i think the contract is not deployed, are you sure your compiled and deployed the contract successfully (can you check the trasnactions in Ganache), i cant somehow find the build Folder in your picture – Majd TL May 19 at 20:04
  • @MajdTL Yes, there are transactions for the contract creation and contract call on Ganache – Hugo May 20 at 2:56
  • It was working fine for me. Could you also check in the console tab as well. If there is no error there. Put you full folder on github or somewhere we can take a look. – logeekal May 22 at 10:54
  • @logeekal Really appreciate your help. I've uploaded the project at this Github repo: github.com/hugo2soo/react – Hugo May 23 at 1:04
0

I am not sure if it is the issue with new web3 version but await seems not be working with send function on line 42. Changing below lines makes the code work.

In App.js, change

await contract.methods.set(5).send({ from: accounts[0] });

to

contract.methods.set(51).send({ from: accounts[0] }).then((error, tranasctionHash)=>{alert(tranasctionHash);});

I have just resolved the promises with then. i hope you are aware of promises, if not you can read about it.

You can refer to this link to see multiple ways send function works.

Alternatively, you can pass a callback function and it is working as well as shown below.

contract.methods.set(51).send({ from: accounts[0] }, (error, tranasctionHash)=>{alert(tranasctionHash);});

Second Change Now statement

const response = await contract.methods.get().call();

will return a BigNumber. You will need to convert Solidity BigNumber to normal number so that react/javascript can display that. Hence, below statement changes

this.setState({ storageValue:response});

to

this.setState({ storageValue:this.state.web3.utils.hexToNumber(this.state.web3.utils.toHex(response))});

I have tried it my repo it is working fine.

Check out difference here.

My Repo is here in branch logeekal_so_response . Let me know if you need more help here.

  • 1
    You are absolutely a hero! – Hugo May 23 at 14:18
  • Haha.. trying to learn myself. Cheers. Just in case if you are interested, I have also opened a bug with web3 team to see why await is not working here : github.com/ethereum/web3.js/issues/2837 – logeekal May 24 at 6:07
  • 1
    You are a great man – Hugo May 25 at 4:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.