Do you have functional component version of App.js?

[jeff0723]

Do you have functional component version of App.js?

[rafael-abuawad]

I have reimplemented a version of this repo, using functional components and NextJS, brownie-next-mix you can give it a try if you like, let me know if you have any issues.

[PatrickAlphaC]

I will 100% be trying this

[Sevamove]

I have reimplemented a version of this repo, using functional components and NextJS, brownie-next-mix you can give it a try if you like, let me know if you have any issues.

@rafael-abuawad I tried those out. It worked perfectly except on kovan network. Does it already support other chain IDs?

[rafael-abuawad]

I tried those out. It worked perfectly except on kovan network. Does it already support other chain IDs?

@vsevdrob That's strange, It should work on the kovan network. Maybe is one of these problems:

• Are you setting up correct and infura o alchemy project id as an .env variable?

• If you are loading the account with a private key from .env file maybe change this line on the deploy script:

owner = accounts.load("main")

to

# Import config from browine
from brownie import config

def main():
  if network.show_active() == 'kovan':
    owner = accounts.add(config['wallets']['from_key'])
    # ...

I you tried both of those and still doesn't work, post the complete error message here, maybe is a gas issue 😕 while reading the contract. I will commit an updated version of the repo. Let me know if it solves the problem for you.

[Sevamove]

@rafael-abuawad Thanks for the replies. I deployed the contracts by adding an account from_key as I usually do on the testnets. I think that the issue is more on the frontend side. The web interface is displayed without errors until I insert an integer value as the input and then submit:

• Vyper contract:

Unhandled Runtime Error

TypeError: vyperStorage is null
Source

pages/index.js (77:28) @ _changeVyper

  75 |   }
  76 | 
> 77 |   async function changeVyper(e) {
     |                            ^
  78 |     e.preventDefault();
  79 | 
  80 |     const input = Number(vyper.input);

Call Stack
changeVyper
pages/index.js (77:28)

• Solidity contract:

Unhandled Runtime Error

TypeError: solidityStorage is null
Source

pages/index.js (64:31) @ _changeSolidity

  62 |   }
  63 | 
> 64 |   async function changeSolidity(e) {
     |                               ^
  65 |     e.preventDefault();
  66 | 
  67 |     const input = Number(solidity.input);

Call Stack
changeSolidity
pages/index.js (64:31)

So both functions don't want to run if it is concern of kovan network. Besides that, there are no values provied of the current storedData in the line The stored value is: . I assume that the return value from the get() function of the contracts does not render on the frontend.

Steps what I did for trasparency:

1. git clone https://github.com/rafael-abuawad/next-mix.git
2. cd ./client && yarn install
3. setted the environments variables in order to deploy to Kovan:

export WEB3_INFURA_PROJECT_ID=<PROJECT_ID>
export PRIVATE_KEY=<PRIVATE_KEY>

4. created brownie account and imported to metamask
5. brownie run scripts/deploy.py --network kovan
6. in another terminal window run cd client && yarn dev

[rafael-abuawad]

@vsevdrob I'm not able to reproduce the issue on my machine, did you add the deployed addresses to the utils/contracts.js file. Maybe isn't fetching the addresses, although I have made some modification to the repo because I did get some issues on the Kovan testnet.

Please, re-clone the repo, and try it on kovan. I've deployed both contracts to the Kovan network and until this afternoon was working properly.

Just run npm install on the client folder and run npm run dev, try it on Kovan it should work out of the box.

Please, let me know if you can make it work, and thank you for the feed back. 🙌🏻

[Sevamove]

@rafael-abuawad I re-cloned it just right now and ran everything again. It works now! 👍

[rafael-abuawad]

@vsevdrob thats great!! I think the problem was that ehters.js couldn't load the deployed smart-contract from Kovan.

Remember to update the utils/contracts.js file after you deployed a smart-contract.

If you have any other issues let me know, I'm glad to help! 🙏🏻

[Sevamove]

@rafael-abuawad I tried to run 1 more time on development network for certainty. From this console.log(network) turns out that instead of development it has to be unknown now as the key in utils/contracts.js. PR