thirdwebDocs
GitHub

AccountAvatar

The component for showing the avatar of the account. If fetches all the social profiles linked to your wallet, including: Farcaster, ENS, Lens (more to be added) You can choose which social profile you want to display. Defaults to the first item in the list.

Example

Basic usage

import { AccountProvider, AccountAvatar } from "thirdweb/react";
 
<AccountProvider address="0x...">
  <AccountAvatar />
</AccountProvider>;

Result: An <img /> component, if the avatar is resolved successfully

<img alt="" src="resolved-url-for-the-avatar" />

Show a loading sign when the avatar is being resolved

import { AccountProvider, AccountAvatar } from "thirdweb/react";
 
<AccountProvider address="0x...">
  <AccountAvatar loadingComponent={<YourLoadingComponent />} />
</AccountProvider>;

Fallback to something when the avatar fails to resolve

import { AccountProvider, AccountAvatar } from "thirdweb/react";
 
<AccountProvider address="0x...">
  <AccountAvatar fallbackComponent={<DummyImage />} />
</AccountProvider>;

Select a social profile to display

If you wallet associates with more than one social profiles (Lens, Farcaster, ENS, etc.) You can specify which service you want to prioritize using the socialType props

import { AccountProvider, AccountAvatar } from "thirdweb/react";
 
<AccountProvider address="0x...">
  <AccountAvatar
    // Choose between: "farcaster" | "lens" | "ens"
    socialType={"ens"}
  />
</AccountProvider>;

Custom ENS resolver chain

This component shares the same props with the ENS extension resolveAvatar

import { AccountProvider, AccountAvatar } from "thirdweb/react";
import { base } from "thirdweb/chains";
 
<AccountProvider address="0x...">
  <AccountAvatar resolverAddress={"0x..."} resolverChain={base} />
</AccountProvider>;

Custom query options for useQuery

This component uses @tanstack-query 's useQuery internally. You can use the queryOptions prop for more fine-grained control

<AccountAvatar
  queryOptions={{
    enabled: isEnabled,
    retry: 3,
  }}
/>;
function AccountAvatar(
  __namedParameters: AccountAvatarProps,
): null | Element;

Parameters

Type

let __namedParameters: {about : string,accessKey : string,alt : string,aria-activedescendant : string,aria-atomic : Booleanish,aria-autocomplete : "inline" | "none" | "list" | "both",aria-braillelabel : string,aria-brailleroledescription : string,aria-busy : Booleanish,aria-checked : boolean | "false" | "true" | "mixed",aria-colcount : number,aria-colindex : number,aria-colindextext : string,aria-colspan : number,aria-controls : string,aria-current : boolean | "false" | "true" | "time" | "step" | "page" | "location" | "date",aria-describedby : string,aria-description : string,aria-details : string,aria-disabled : Booleanish,aria-dropeffect : "link" | "popup" | "none" | "execute" | "copy" | "move",aria-errormessage : string,aria-expanded : Booleanish,aria-flowto : string,aria-grabbed : Booleanish,aria-haspopup : boolean | "false" | "true" | "dialog" | "menu" | "grid" | "tree" | "listbox",aria-hidden : Booleanish,aria-invalid : boolean | "false" | "true" | "grammar" | "spelling",aria-keyshortcuts : string,aria-label : string,aria-labelledby : string,aria-level : number,aria-live : "off" | "polite" | "assertive",aria-modal : Booleanish,aria-multiline : Booleanish,aria-multiselectable : Booleanish,aria-orientation : "horizontal" | "vertical",aria-owns : string,aria-placeholder : string,aria-posinset : number,aria-pressed : boolean | "false" | "true" | "mixed",aria-readonly : Booleanish,aria-relevant : "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals",aria-required : Booleanish,aria-roledescription : string,aria-rowcount : number,aria-rowindex : number,aria-rowindextext : string,aria-rowspan : number,aria-selected : Booleanish,aria-setsize : number,aria-sort : "none" | "ascending" | "descending" | "other",aria-valuemax : number,aria-valuemin : number,aria-valuenow : number,aria-valuetext : string,autoCapitalize : string,autoCorrect : string,autoFocus : boolean,autoSave : string,children : ReactNode,className : string,color : string,content : string,contentEditable : "inherit" | (Booleanish) | "plaintext-only",contextMenu : string,crossOrigin : CrossOrigin,dangerouslySetInnerHTML : { __html: string | (TrustedHTML) },datatype : string,decoding : "auto" | "async" | "sync",defaultChecked : boolean,defaultValue : string | number | (readonly Array<string>),dir : string,draggable : Booleanish,fallbackComponent : Element,fetchPriority : "auto" | "high" | "low",height : string | number,hidden : boolean,id : string,inert : boolean,inlist : any,inputMode : "search" | "email" | "url" | "text" | "none" | "tel" | "numeric" | "decimal",is : string,itemID : string,itemProp : string,itemRef : string,itemScope : boolean,itemType : string,lang : string,loading : "eager" | "lazy",loadingComponent : Element,nonce : string,onAbort : ReactEventHandler<HTMLImageElement>,onAbortCapture : ReactEventHandler<HTMLImageElement>,onAnimationEnd : AnimationEventHandler<HTMLImageElement>,onAnimationEndCapture : AnimationEventHandler<HTMLImageElement>,onAnimationIteration : AnimationEventHandler<HTMLImageElement>,onAnimationIterationCapture : AnimationEventHandler<HTMLImageElement>,onAnimationStart : AnimationEventHandler<HTMLImageElement>,onAnimationStartCapture : AnimationEventHandler<HTMLImageElement>,onAuxClick : MouseEventHandler<HTMLImageElement>,onAuxClickCapture : MouseEventHandler<HTMLImageElement>,onBeforeInput : FormEventHandler<HTMLImageElement>,onBeforeInputCapture : FormEventHandler<HTMLImageElement>,onBeforeToggle : ToggleEventHandler<HTMLImageElement>,onBlur : FocusEventHandler<HTMLImageElement>,onBlurCapture : FocusEventHandler<HTMLImageElement>,onCanPlay : ReactEventHandler<HTMLImageElement>,onCanPlayCapture : ReactEventHandler<HTMLImageElement>,onCanPlayThrough : ReactEventHandler<HTMLImageElement>,onCanPlayThroughCapture : ReactEventHandler<HTMLImageElement>,onChange : FormEventHandler<HTMLImageElement>,onChangeCapture : FormEventHandler<HTMLImageElement>,onClick : MouseEventHandler<HTMLImageElement>,onClickCapture : MouseEventHandler<HTMLImageElement>,onCompositionEnd : CompositionEventHandler<HTMLImageElement>,onCompositionEndCapture : CompositionEventHandler<HTMLImageElement>,onCompositionStart : CompositionEventHandler<HTMLImageElement>,onCompositionStartCapture : CompositionEventHandler<HTMLImageElement>,onCompositionUpdate : CompositionEventHandler<HTMLImageElement>,onCompositionUpdateCapture : CompositionEventHandler<HTMLImageElement>,onContextMenu : MouseEventHandler<HTMLImageElement>,onContextMenuCapture : MouseEventHandler<HTMLImageElement>,onCopy : ClipboardEventHandler<HTMLImageElement>,onCopyCapture : ClipboardEventHandler<HTMLImageElement>,onCut : ClipboardEventHandler<HTMLImageElement>,onCutCapture : ClipboardEventHandler<HTMLImageElement>,onDoubleClick : MouseEventHandler<HTMLImageElement>,onDoubleClickCapture : MouseEventHandler<HTMLImageElement>,onDrag : DragEventHandler<HTMLImageElement>,onDragCapture : DragEventHandler<HTMLImageElement>,onDragEnd : DragEventHandler<HTMLImageElement>,onDragEndCapture : DragEventHandler<HTMLImageElement>,onDragEnter : DragEventHandler<HTMLImageElement>,onDragEnterCapture : DragEventHandler<HTMLImageElement>,onDragExit : DragEventHandler<HTMLImageElement>,onDragExitCapture : DragEventHandler<HTMLImageElement>,onDragLeave : DragEventHandler<HTMLImageElement>,onDragLeaveCapture : DragEventHandler<HTMLImageElement>,onDragOver : DragEventHandler<HTMLImageElement>,onDragOverCapture : DragEventHandler<HTMLImageElement>,onDragStart : DragEventHandler<HTMLImageElement>,onDragStartCapture : DragEventHandler<HTMLImageElement>,onDrop : DragEventHandler<HTMLImageElement>,onDropCapture : DragEventHandler<HTMLImageElement>,onDurationChange : ReactEventHandler<HTMLImageElement>,onDurationChangeCapture : ReactEventHandler<HTMLImageElement>,onEmptied : ReactEventHandler<HTMLImageElement>,onEmptiedCapture : ReactEventHandler<HTMLImageElement>,onEncrypted : ReactEventHandler<HTMLImageElement>,onEncryptedCapture : ReactEventHandler<HTMLImageElement>,onEnded : ReactEventHandler<HTMLImageElement>,onEndedCapture : ReactEventHandler<HTMLImageElement>,onError : ReactEventHandler<HTMLImageElement>,onErrorCapture : ReactEventHandler<HTMLImageElement>,onFocus : FocusEventHandler<HTMLImageElement>,onFocusCapture : FocusEventHandler<HTMLImageElement>,onGotPointerCapture : PointerEventHandler<HTMLImageElement>,onGotPointerCaptureCapture : PointerEventHandler<HTMLImageElement>,onInput : FormEventHandler<HTMLImageElement>,onInputCapture : FormEventHandler<HTMLImageElement>,onInvalid : FormEventHandler<HTMLImageElement>,onInvalidCapture : FormEventHandler<HTMLImageElement>,onKeyDown : KeyboardEventHandler<HTMLImageElement>,onKeyDownCapture : KeyboardEventHandler<HTMLImageElement>,onKeyPress : KeyboardEventHandler<HTMLImageElement>,onKeyPressCapture : KeyboardEventHandler<HTMLImageElement>,onKeyUp : KeyboardEventHandler<HTMLImageElement>,onKeyUpCapture : KeyboardEventHandler<HTMLImageElement>,onLoad : ReactEventHandler<HTMLImageElement>,onLoadCapture : ReactEventHandler<HTMLImageElement>,onLoadedData : ReactEventHandler<HTMLImageElement>,onLoadedDataCapture : ReactEventHandler<HTMLImageElement>,onLoadedMetadata : ReactEventHandler<HTMLImageElement>,onLoadedMetadataCapture : ReactEventHandler<HTMLImageElement>,onLoadStart : ReactEventHandler<HTMLImageElement>,onLoadStartCapture : ReactEventHandler<HTMLImageElement>,onLostPointerCapture : PointerEventHandler<HTMLImageElement>,onLostPointerCaptureCapture : PointerEventHandler<HTMLImageElement>,onMouseDown : MouseEventHandler<HTMLImageElement>,onMouseDownCapture : MouseEventHandler<HTMLImageElement>,onMouseEnter : MouseEventHandler<HTMLImageElement>,onMouseLeave : MouseEventHandler<HTMLImageElement>,onMouseMove : MouseEventHandler<HTMLImageElement>,onMouseMoveCapture : MouseEventHandler<HTMLImageElement>,onMouseOut : MouseEventHandler<HTMLImageElement>,onMouseOutCapture : MouseEventHandler<HTMLImageElement>,onMouseOver : MouseEventHandler<HTMLImageElement>,onMouseOverCapture : MouseEventHandler<HTMLImageElement>,onMouseUp : MouseEventHandler<HTMLImageElement>,onMouseUpCapture : MouseEventHandler<HTMLImageElement>,onPaste : ClipboardEventHandler<HTMLImageElement>,onPasteCapture : ClipboardEventHandler<HTMLImageElement>,onPause : ReactEventHandler<HTMLImageElement>,onPauseCapture : ReactEventHandler<HTMLImageElement>,onPlay : ReactEventHandler<HTMLImageElement>,onPlayCapture : ReactEventHandler<HTMLImageElement>,onPlaying : ReactEventHandler<HTMLImageElement>,onPlayingCapture : ReactEventHandler<HTMLImageElement>,onPointerCancel : PointerEventHandler<HTMLImageElement>,onPointerCancelCapture : PointerEventHandler<HTMLImageElement>,onPointerDown : PointerEventHandler<HTMLImageElement>,onPointerDownCapture : PointerEventHandler<HTMLImageElement>,onPointerEnter : PointerEventHandler<HTMLImageElement>,onPointerLeave : PointerEventHandler<HTMLImageElement>,onPointerMove : PointerEventHandler<HTMLImageElement>,onPointerMoveCapture : PointerEventHandler<HTMLImageElement>,onPointerOut : PointerEventHandler<HTMLImageElement>,onPointerOutCapture : PointerEventHandler<HTMLImageElement>,onPointerOver : PointerEventHandler<HTMLImageElement>,onPointerOverCapture : PointerEventHandler<HTMLImageElement>,onPointerUp : PointerEventHandler<HTMLImageElement>,onPointerUpCapture : PointerEventHandler<HTMLImageElement>,onProgress : ReactEventHandler<HTMLImageElement>,onProgressCapture : ReactEventHandler<HTMLImageElement>,onRateChange : ReactEventHandler<HTMLImageElement>,onRateChangeCapture : ReactEventHandler<HTMLImageElement>,onReset : FormEventHandler<HTMLImageElement>,onResetCapture : FormEventHandler<HTMLImageElement>,onResize : ReactEventHandler<HTMLImageElement>,onResizeCapture : ReactEventHandler<HTMLImageElement>,onScroll : UIEventHandler<HTMLImageElement>,onScrollCapture : UIEventHandler<HTMLImageElement>,onSeeked : ReactEventHandler<HTMLImageElement>,onSeekedCapture : ReactEventHandler<HTMLImageElement>,onSeeking : ReactEventHandler<HTMLImageElement>,onSeekingCapture : ReactEventHandler<HTMLImageElement>,onSelect : ReactEventHandler<HTMLImageElement>,onSelectCapture : ReactEventHandler<HTMLImageElement>,onStalled : ReactEventHandler<HTMLImageElement>,onStalledCapture : ReactEventHandler<HTMLImageElement>,onSubmit : FormEventHandler<HTMLImageElement>,onSubmitCapture : FormEventHandler<HTMLImageElement>,onSuspend : ReactEventHandler<HTMLImageElement>,onSuspendCapture : ReactEventHandler<HTMLImageElement>,onTimeUpdate : ReactEventHandler<HTMLImageElement>,onTimeUpdateCapture : ReactEventHandler<HTMLImageElement>,onToggle : ToggleEventHandler<HTMLImageElement>,onTouchCancel : TouchEventHandler<HTMLImageElement>,onTouchCancelCapture : TouchEventHandler<HTMLImageElement>,onTouchEnd : TouchEventHandler<HTMLImageElement>,onTouchEndCapture : TouchEventHandler<HTMLImageElement>,onTouchMove : TouchEventHandler<HTMLImageElement>,onTouchMoveCapture : TouchEventHandler<HTMLImageElement>,onTouchStart : TouchEventHandler<HTMLImageElement>,onTouchStartCapture : TouchEventHandler<HTMLImageElement>,onTransitionCancel : TransitionEventHandler<HTMLImageElement>,onTransitionCancelCapture : TransitionEventHandler<HTMLImageElement>,onTransitionEnd : TransitionEventHandler<HTMLImageElement>,onTransitionEndCapture : TransitionEventHandler<HTMLImageElement>,onTransitionRun : TransitionEventHandler<HTMLImageElement>,onTransitionRunCapture : TransitionEventHandler<HTMLImageElement>,onTransitionStart : TransitionEventHandler<HTMLImageElement>,onTransitionStartCapture : TransitionEventHandler<HTMLImageElement>,onVolumeChange : ReactEventHandler<HTMLImageElement>,onVolumeChangeCapture : ReactEventHandler<HTMLImageElement>,onWaiting : ReactEventHandler<HTMLImageElement>,onWaitingCapture : ReactEventHandler<HTMLImageElement>,onWheel : WheelEventHandler<HTMLImageElement>,onWheelCapture : WheelEventHandler<HTMLImageElement>,popover : "" | "auto" | "manual",popoverTarget : string,popoverTargetAction : "toggle" | "hide" | "show",prefix : string,property : string,queryOptions : Omit<UseQueryOptions<string, Error, string, QueryKey>, "queryKey" | "queryFn">,radioGroup : string,referrerPolicy : HTMLAttributeReferrerPolicy,rel : string,resolverAddress : string,resolverChain : Readonly<(ChainOptions) & ({ rpc: string })>,resource : string,results : number,rev : string,role : AriaRole,security : string,sizes : string,slot : string,socialType : "farcaster" | "ens" | "lens",spellCheck : Booleanish,srcSet : string,style : CSSProperties,suppressContentEditableWarning : boolean,suppressHydrationWarning : boolean,tabIndex : number,title : string,translate : "yes" | "no",typeof : string,unselectable : "on" | "off",useMap : string,vocab : string,width : string | number}

Returns

let returnType: null | Element;

An <img /> if the avatar is resolved successfully