IdentityBadge

A component to get the Ethereum Identicon, an image that identifies Ethereum Accounts.

Usage

import { IdentityBadge } from '@aragon/ui'

function App() {
  return (
    <IdentityBadge
      customLabel="Custom Label User"
      entity="0xc41e4c10b37d3397a99d4a90e7d85508a69a5c4c"
      connectedAccount
    />
  )
}

Demonstration

Props

badgeOnly

TYPE	DEFAULT VALUE
Bool	false

Disables the badge as a button and avoids prompting the popover on click.

compact

TYPE	DEFAULT VALUE
Bool	false

Smaller version of the IdentityBadge. Should be used when the IdentityBadge is placed inline with text.

connectedAccount

TYPE	DEFAULT VALUE
Bool	false

If the given, assumes entity is the same as the connected account and renders "you" in the popover.

entity

TYPE	DEFAULT VALUE
String	"" (Empty string)

The Ethereum entity. If the given string is a valid Ethereum address (also based on the checksum, if provided (more info)[https://web3js.readthedocs.io/en/1.0/web3-utils.html#isaddress]), an Identicon will be automatically displayed.

label

TYPE	DEFAULT VALUE
String	None

A label for the entity. If available, label is displayed instead of the entity on the badge.

labelStyle

TYPE	DEFAULT VALUE
String	None

Styles to apply to the label.

networkType

TYPE	DEFAULT VALUE
String	main

Checks the type of network to get an Etherscan URL from the entity.

popoverTitle

TYPE	DEFAULT VALUE
Node	main

The title of the popover. You can pass anything that can be rendered, such as a num, string, DOM element, an array of them, or React fragments that contain them.

popoverAction

TYPE	DEFAULT VALUE
BadgePopoverActionType	None

The action of the popover

popoverAction.label

The node rendered in the popover's action button.

popoverAction.onClick

The onclick handler for the popover's action button.

shorten

TYPE	DEFAULT VALUE
Bool	true

If true and entity is a valid address, reduces entity to only the first and last four characters (excluding the "0x" prefix) for display. i.e: address="0xcafe…5f2C"