Network Indicator

Persistently displays a user's current network name based on a given network ID. You can optionally display an icon and tooltip to tell the user if they're on the correct network for the dapp.
Built with Rimble-UI

Installation

Install the package in your project directory with:
// with npm
npm install @rimble/network-indicator
// with yarn
yarn add @rimble/network-indicator

Usage Example

Default
Current Network
Ropsten
Has requiredNetwork prop
Current Network
None
Custom tooltips for default
Current Network
Main
Custom tooltips with requiredNetwork prop
Current Network
None

Props

Prop NameTypeIs RequiredDefault ValueDescription
currentNetworknumberoptional
null
requiredNetworknumberoptional
null
childrenshapeoptional
{
  onNetworkMessage: null,
  noNetworkMessage: null,
  onRequiredNetworkMessage: null,
  onWrongNetworkMessage: null,
}

Default Messages

onNetworkMessage Only when requiredNetwork exists and matches currentNetwork prop
You're on the right network

noNetworkMessage
You're not on an Ethereum network

onWrongNetworkMessage
You're on the wrong network
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute