Network indicator

On this page

Template anatomy
See demo

Network indicator

The network indicator will passively tell the user about the network they're on and whether that's correct. This should be used in conjunction with a Connection banner to provide more context and information.

When a user goes to transact and must be on a certain network to transact successfully, you should also use a Wrong network modal to help explain what they need to do.

Current Network
Rinkeby
// import { Flex, Text, Icon, Tooltip, Box } from 'rimble-ui';

<Box display="inline-block">
  <Flex flexDirection="column">
    <Text fontSize={1} color="silver" caps>
      Current Network
    </Text>
    <Tooltip message="You're on the wrong network – switch to Main network">
      <Flex>
        <Text mr={2}>Rinkeby</Text>
        <Icon name="Error" color="danger" />
      </Flex>
    </Tooltip>
  </Flex>
</Box>// import { Flex, Text, Icon, Tooltip, Box } from 'rimble-ui';
<Box display="inline-block">
  <Flex flexDirection="column">
    <Text fontSize={1} color="silver" caps>
      Current Network
    </Text>
    <Tooltip message="You're on the wrong network – switch to Main network">
      <Flex>
        <Text mr={2}>Rinkeby</Text>
        <Icon name="Error" color="danger" />
      </Flex>
    </Tooltip>
  </Flex>
</Box>

Current Network
Rinkeby
// import { Flex, Text, Icon, Tooltip, Box } from 'rimble-ui';

<Box display="inline-block">
  <Flex flexDirection="column">
    <Text fontSize={1} color="silver" caps>
      Current Network
    </Text>
    <Tooltip message="You're on the right network">
      <Flex>
        <Text mr={2}>Rinkeby</Text>
        <Icon name="CheckCircle" color="success" />
      </Flex>
    </Tooltip>
  </Flex>
</Box>// import { Flex, Text, Icon, Tooltip, Box } from 'rimble-ui';
<Box display="inline-block">
  <Flex flexDirection="column">
    <Text fontSize={1} color="silver" caps>
      Current Network
    </Text>
    <Tooltip message="You're on the right network">
      <Flex>
        <Text mr={2}>Rinkeby</Text>
        <Icon name="CheckCircle" color="success" />
      </Flex>
    </Tooltip>
  </Flex>
</Box>

Template anatomy

An annotated image calling out the different elements of the template

1. Label

Simply explains to the user what they're seeing. This gives context to new users who may not know what Rinkeby or Main Ethereum means.

2. Network

Tells the user the network so that they don't need to check their wallet UI.

3. Tooltip

Supports the correct/incorrect icon to confirm to the user whether the network is correct or not.

See demo

An illustration of Rimble's connecting to a dApp process

dApp connection demo

Our connection demo shows methods for helping a user connect to your dApp and start transacting.

dApp connection demo

Network indicator

Network indicator

Template anatomy

1. Label

2. Network

3. Tooltip

See demo

dApp connection demo

Navigate the guide