How to interact with SmartContracts with the ReactJS-Web-Application?

Hi, being completely new to ZeppelinOS I followed this (official) tutorial.

However, when I navigate in terminal into the client-application, and run “npm start” (or “npm run start”), the application that gets rendered in the webbrowser at “localhost:3000” will only offer a block with the title “Good to Go, see your web3 info below”.

There are no elements to interact with the smart contract as mentioned in the tutorial.

I only get this screen in the browser:

What am I missing?

3 Likes

Hey @itinance. Welcome to the forum!
What you see is a barebones version of ZepKit intended to start a new development. I am pretty sure you’ve run npm run start-blank command at some point.
If you want to do tutorial you don’t need to run npm run start-blank command ever.
This tutorial is a bit outdated now but it is still good for learning.
What is changed – please use zos@2.2.0 and run zos init zepkit before running npm run start.
Up to date instruction are always available at https://github.com/zeppelinos/zepkit.
Let me know if you need more help!

3 Likes

Hi @ylv-io! Thanks a lot! You are right. I did “num run start-blank” during my time to try out anything and try to find my mistake.
Starting from scratch made it work!

One notice: with every tutorial (wether its based on ZeppelinOS or OpenZeppelin oder plain Solidity-stuff without any frameworks), I constantly run into “out of gas”-issue.
I don’t know, what others do while developing but at least on my machine (MacOS, latest version of truffle and co), I have always to do 2 things to prevent this out-of-gas-issue:

  1. launching ganache-cli with unlimited gas: --gasLimit 0xfffffffffff
  2. truffle.config needs also unlimited gas settings like this:

networks: {
development: {
host: “127.0.0.1”,
port: 8545,
network_id: “*”,
gas: 0xfffffffffff,
gasPrice: 0x01,
},

Is this a thing that you all guys always do automatically without any further notice or is it me that these settings are necessary in order to deploy any contract of a local test chain? :slight_smile:

2 Likes

I am pretty sure you are using ganache-cli version higher than 6.3.0. Latest versions of ganache-cli have issue with gas estimation and that cause a lot of tools to fail not only ZeppelinOS.
Try to downgrade your ganache-cli to 6.3.0. It should resolve you gas issues.

2 Likes

After starting from scratch with a new project the Web application is not working at all. npm run start ends up in a hanging process that is doing nothing. Has anybody already faced this issue?

I filed an issue: https://github.com/zeppelinos/zepkit/issues/25

1 Like

Hey @itinance. I am feel really sorry for your poor experience with ZepKit.
Regarding your issue. I am pretty sure it is cased by the fact that you are using latest version of zos v2.3. Can you try version 2.2?

PS We are in the process of changing a few bits in the major way. We’ll soon release a new and updated ZepKit. I’ll appreciate if you stick around to see all the new cool features it’ll have!

2 Likes

Yes, you are right :slight_smile: Many thanks. With zos 2.2.0 it is working.

1 Like

Hey @itinance, please check out this issue in zos. TL;DR if you run ganache without the --gasLimit 0xfffffffffff (which is not a good practice, since txs that work locally will then not work when you go to an actual network) you will not experience this issue.

As a curiosity: where did you get the suggestion of running ganache with that flag?

1 Like

Hi @spalladino, thanks for reaching out.

As a curiosity: where did you get the suggestion of running ganache with that flag?

This is (or was? maybe not any more) a “best practise” that I have learned how to deal with Ganache in order to speed up the development of smart contracts, “best practice” at least back then 2 years ago.

When you google the term “gas limit” and “0xffffff…” you’ll find several GitHub issues, where developers are suggesting it, or READMEs or Stackoverflow questions and answers, where this is part of setup instructions. And tutorials mentioning it. I have found this 1 til 2 years ago after looking for a solution of permanent “out of gas”-exceptions with every single function that was added to the smart contract.

I am completely with you, that this is not the best pattern but would close our developer eyes against to real gas consumption on a main network.

But it allows us to develop against any requirement that we’ve got without to spent too much time on gas consumption. I know, that this could be an issue later on deployment on main net.

How do you deal with it? And with raising gas consumption running lots of tests?

1 Like

Running lots of tests does not influence how much gas you need to spend per block. Ganache has instant-seal, meaning that every transaction immediately triggers a new block being mined. So the gas limit setting only ends up affecting how much gas each transaction can spent at a maximum. If you are getting an “out of gas”, it would make sense to increase the limit to that of mainnet (today 8M IIRC), but not beyond that.

1 Like