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"

Last updated

Was this helpful?