Skip to content

Profile

Ethereum wallet profile
import { Profile } from '@ensdomains/thorin'
<Card style={{ backgroundColor: 'grey' }}>
<Profile
address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
ensName="frontend.ens.eth"
/>
</Card>

Props
#

name
type
default
description
address*
Required
string
-
The ethereum address of the profiled user.
alignDropdown
"left" | "right"
left
The alignment of the dropdown menu in relation to the profile button.
avatar
string | Omit<Props, "label">
-
The url of the avatar icon, or the avatar props to passthrough
dropdownItems
DropdownItem[]
-
An array of objects conforming to the DropdownItem interface.
ensName
string
-
The ENS name associated with the address.
indicatorColor
any
-
The colour of the indicator
size
"small" | "medium" | "large"
medium
The size and styling of the profile button.

Dropdown Item Props
#

name
type
default
description
color
"blue" | "green" | "indigo" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "grey" | "accent" | "accentSecondary" | "accentSecondaryHover" | "accentTertiary" | "accentText" | "accentGradient" | "background" | "backgroundHide" | "backgroundSecondary" | "backgroundTertiary" | "border" | "borderSecondary" | "borderTertiary" | "foreground" | "foregroundSecondary" | "foregroundSecondaryHover" | "foregroundTertiary" | "groupBackground" | "groupBorder" | "gradients" | "text" | "textPlaceholder" | "textSecondary" | "textTertiary"
-
The color of the label.
disabled
boolean
-
The disabled attribute of button element.
label
string
-
The text label.
onClick
() => void
-
An event handler for click events.

With Dropdown
#

With Indicator
#

Custom Indicator Colour
#

Variants
#

Sizes
#

Edit on GitHub