Profile

Ethereum wallet profile


import { Profile } from '@ensdomains/thorin'

<Card style={{ backgroundColor: 'grey' }}>
  <Profile
    address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
    ensName="frontend.ens.eth"
  />
</Card>

Open in Playroom

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.

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.