Search…
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"
Copy link
Outline
Usage
Demonstration
Props