@rimble/network-indicator

1.2.3 • Public • Published

Rimble Network Indicator - current network

Rimble Network Indicator - wrong network

Rimble Network Indicator - no network

@rimble/network-indicator

React component built with Rimble UI that will display the current Ethereum network name based on a given network ID and optionally display and icon and tooltip indicating whether the user is on the correct network for the application.

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

import NetworkIndicator from '@rimble/network-indicator';

// Default
<NetworkIndicator currentNetwork={3} />;

// Has requiredNetwork prop
<NetworkIndicator currentNetwork={3} requiredNetwork={1} />;

// Custom tooltips for default
<NetworkIndicator currentNetwork={1}>
  {{
    onNetworkMessage: 'Connected to correct network',
    noNetworkMessage: 'Not connected to anything'
  }}
</NetworkIndicator>

// Custom tooltips with requiredNetwork prop
<NetworkIndicator currentNetwork={null} requiredNetwork={1}>
  {{
    onNetworkMessage: 'Connected to correct network',
    noNetworkMessage: 'Not connected to anything',
    onWrongNetworkMessage: 'Wrong network',
  }}
</NetworkIndicator>

Props

Name Type Default Description
currentNetwork integer none The network ID that the user is connected to, if available
requiredNetwork integer none The network ID that the dApp requires to function
onNetworkMessage string none Content of a hover tooltip when there is a currentNetwork prop and when requiredNetwork exists and matches currentNetwork prop
noNetworkMessage string see default messages Content of a hover tooltip when there is a null value for currentNetwork prop even when there is a requiredNetwork prop
onWrongNetworkMessage string see default messages Content of a hover tooltip when values do not match for currentNetwork and requiredNetwork props

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

Issues

Open an issue for any bugs or feature requests

Contributing

We are open source and welcome your contributions !

License

MIT © ConsenSys

Package Sidebar

Install

npm i @rimble/network-indicator

Weekly Downloads

6

Version

1.2.3

License

MIT

Unpacked Size

25.8 kB

Total Files

5

Last publish

Collaborators

  • tobek
  • sruddy
  • gesq
  • mikelockz