A MetaMask inspired component to show users the status of their network connectivity.

Installation

Using npm:
$ npm install --save react-web3-network-status web3@^0.x.x babel-polyfill

Using yarn:
$ yarn add react-web3-network-status web3@^0.x.x babel-polyfill

Usage

import 'babel-polyfill'
import React from 'react'
import NetworkStatus from 'react-web3-network-status'

const MyApp = () => (
  <div>
    <NetworkStatus />
  </div>
)

export default MyApp

If you're already managing state and wish to explicitly pass a network id, try out the stateless version:

import React from 'react'
import NetworkStatus from 'react-web3-network-status/stateless'

const MyApp = () => (
  <div>
    <NetworkStatus
      networkId='1' // 1, 3, 4, 42, null, 'not-listening', or 'account-not-unlocked'
      address='0xe80C8E9ecB8e0F8CF75f4C5D1c15A065575a1cb9' // optional
    />
  </div>
)

export default MyApp

Demo

To run the demo app locally, clone this repo and run:

$ cd ../react-web3-network-status
$ npm install
$ npm run demo

Then visit localhost:3000 in your browser.

Contributing

To contribute effectively, follow these steps:

1. Create a feature branch: git checkout -b my-new-feature
2. Commit your changes: git commit -m 'add some feature'
3. Push to the branch: git push origin my-new-feature
4. Submit a pull request!

Inspiration

• MetaMask - User interface
• react-web3 - User experience
• DAO1901 - State management using Redux Sagas