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
<NetworkIndicator currentNetwork={3} />
<NetworkIndicator currentNetwork={3} />
Copy code

Has requiredNetwork prop

Current Network
None
<NetworkIndicator currentNetwork={3} requiredNetwork={1} />
<NetworkIndicator currentNetwork={3} requiredNetwork={1} />
Copy code

Custom tooltips for default

Current Network
Main
<NetworkIndicator currentNetwork={1}>
  {{
    onNetworkMessage: "Connected to correct network",
    noNetworkMessage: "Not connected to anything"
  }}
</NetworkIndicator>
<NetworkIndicator currentNetwork={1}>
  {{
    onNetworkMessage: "Connected to correct network",
    noNetworkMessage: "Not connected to anything"
  }}
</NetworkIndicator>
Copy code

Custom tooltips with requiredNetwork prop

Current Network
None
<NetworkIndicator currentNetwork={null} requiredNetwork={1}>
  {{
    onNetworkMessage: "Connected to correct network",
    noNetworkMessage: "Not connected to anything",
    onWrongNetworkMessage: "Wrong network"
  }}
</NetworkIndicator>
<NetworkIndicator currentNetwork={null} requiredNetwork={1}>
  {{
    onNetworkMessage: "Connected to correct network",
    noNetworkMessage: "Not connected to anything",
    onWrongNetworkMessage: "Wrong network"
  }}
</NetworkIndicator>
Copy code

Props

{
  onNetworkMessage: null,
  noNetworkMessage: null,
  onRequiredNetworkMessage: null,
  onWrongNetworkMessage: null,
}

null

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