Tutorial: Building Dapp Frontends with React & Network.js

Tutorials
1

Developing a service or business on Ethereum can be difficult, due to the intricacies of working with a blockchain and the novel UX / UI issues to solve. This series of guides aims to serve as a quickstart to Ethereum dapp development, with a focus on front-end solutions. Thankfully, you don’t need to reinvent the chain. There are many pre-existing tools and services that can be leveraged to get a dapp running quickly, including:

  • Infura as a JSON-RPC connection to the mainnet or testnets;
  • MetaMask to serve as the user’s wallet and web3 provider;
  • OpenZeppelin for contracts and Network JS, a javascript library for web3 (i.e. blockchain development).

Using these products together has the benefit of replacing database setup and user credential management, resulting in a quick-to-start blockchain infrastructure. In this tutorial, we’ll create a React dapp using Network JS that can interact with MetaMask, which uses Infura as its connection to the Ethereum mainnet.

1 Like
2

The code for this can be found here: https://github.com/INFURA/developer-resources/tree/master/guides

3

Straightforward and simple, great tutorial! Thank you very much!

I have a problem though.

The only browser that works fine for me is Brave. Chrome and Firefox cannot display accounts and balances due to this error - “web3Context.requestAuth is not a function”. Network is displayed everywhere and updates perfectly.

4

Hey @porobov, that’s odd because I used Chrome for this (including the gifs) on Mac. However I do see the error on Firefox. Try updating to the latest version of Chrome?

5

Hello,

I am trying to follow the tutorial but I cannot install dependencies under Visual Studio Code in Windows: npm install @openzeppelin/network

It will always crash with something like:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @openzeppelin/network@0.4.2 preinstall: ln -s ./lib/react ./react
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @openzeppelin/network@0.4.2 preinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\FBK\AppData\Roaming\npm-cache_logs\2020-05-05T22_25_29_140Z-debug.log

Is there something that I am missing or the package needs to be updated ?!

Thanks,
Cristian