TokenSymbol

This component fetches then shows the symbol of a token. For ERC20 tokens, it calls the symbol function in the ERC20 contract. It inherits all the attributes of a HTML <span> component, hence you can style it just like how you would style a normal <span>

Example

Basic usage


import { TokenProvider, TokenSymbol } from "thirdweb/react";
import { ethereum } from "thirdweb/chains";
 
<TokenProvider {...props}>
  <TokenSymbol />
</TokenProvider>;

Result:


<span>ETH</span>

Custom symbol resolver

By default, TokenSymbol calls the symbol function of your contract, however, if your token as an unconventional way to fetch the symbol, you can pass the custom logic to the symbolResolver prop. It can either be a string or a function (async) that returns or resolves to a string.


async function getSymbol() {
  // your own fetching logic
  return "the symbol";
}
 
<TokenSymbol symbolResolver={getSymbol} />;

Alternatively, you can pass in a string directly:


<TokenSymbol symbolResolver="USDC.e" />;

Format the symbol (capitalize, truncate, etc.)

The TokenSymbol component accepts a formatFn which takes in a string and outputs a string The function is used to modify the symbol of the token


const concatStr = (str: string):string => str + "Token"
 
<TokenSymbol formatFn={concatStr} />

Result:


<span>Ether Token</span>

Show a loading sign when the symbol is being fetched


import { TokenProvider, TokenSymbol } from "thirdweb/react";
 
<TokenProvider address="0x...">
  <TokenSymbol loadingComponent={<Spinner />} />
</TokenProvider>;

Fallback to something when the symbol fails to resolve


<TokenProvider address="0x...">
  <TokenSymbol fallbackComponent={"Failed to load"} />
</TokenProvider>;

Custom query options for useQuery

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


<TokenSymbol
  queryOptions={{
    enabled: isEnabled,
    retry: 4,
  }}
/>;


function TokenSymbol(
  __namedParameters: TokenSymbolProps,
): null | Element;

Parameters

Type


let __namedParameters: {about : string,accessKey : 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,className : string,color : string,content : string,contentEditable : "inherit" | (Booleanish) | "plaintext-only",contextMenu : string,dangerouslySetInnerHTML : { __html: string | (TrustedHTML) },datatype : string,defaultChecked : boolean,defaultValue : string | number | (readonly Array<string>),dir : string,draggable : Booleanish,fallbackComponent : Element,formatFn : (str: string) => string,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,loadingComponent : Element,nonce : string,onAbort : ReactEventHandler<HTMLSpanElement>,onAbortCapture : ReactEventHandler<HTMLSpanElement>,onAnimationEnd : AnimationEventHandler<HTMLSpanElement>,onAnimationEndCapture : AnimationEventHandler<HTMLSpanElement>,onAnimationIteration : AnimationEventHandler<HTMLSpanElement>,onAnimationIterationCapture : AnimationEventHandler<HTMLSpanElement>,onAnimationStart : AnimationEventHandler<HTMLSpanElement>,onAnimationStartCapture : AnimationEventHandler<HTMLSpanElement>,onAuxClick : MouseEventHandler<HTMLSpanElement>,onAuxClickCapture : MouseEventHandler<HTMLSpanElement>,onBeforeInput : FormEventHandler<HTMLSpanElement>,onBeforeInputCapture : FormEventHandler<HTMLSpanElement>,onBeforeToggle : ToggleEventHandler<HTMLSpanElement>,onBlur : FocusEventHandler<HTMLSpanElement>,onBlurCapture : FocusEventHandler<HTMLSpanElement>,onCanPlay : ReactEventHandler<HTMLSpanElement>,onCanPlayCapture : ReactEventHandler<HTMLSpanElement>,onCanPlayThrough : ReactEventHandler<HTMLSpanElement>,onCanPlayThroughCapture : ReactEventHandler<HTMLSpanElement>,onChange : FormEventHandler<HTMLSpanElement>,onChangeCapture : FormEventHandler<HTMLSpanElement>,onClick : MouseEventHandler<HTMLSpanElement>,onClickCapture : MouseEventHandler<HTMLSpanElement>,onCompositionEnd : CompositionEventHandler<HTMLSpanElement>,onCompositionEndCapture : CompositionEventHandler<HTMLSpanElement>,onCompositionStart : CompositionEventHandler<HTMLSpanElement>,onCompositionStartCapture : CompositionEventHandler<HTMLSpanElement>,onCompositionUpdate : CompositionEventHandler<HTMLSpanElement>,onCompositionUpdateCapture : CompositionEventHandler<HTMLSpanElement>,onContextMenu : MouseEventHandler<HTMLSpanElement>,onContextMenuCapture : MouseEventHandler<HTMLSpanElement>,onCopy : ClipboardEventHandler<HTMLSpanElement>,onCopyCapture : ClipboardEventHandler<HTMLSpanElement>,onCut : ClipboardEventHandler<HTMLSpanElement>,onCutCapture : ClipboardEventHandler<HTMLSpanElement>,onDoubleClick : MouseEventHandler<HTMLSpanElement>,onDoubleClickCapture : MouseEventHandler<HTMLSpanElement>,onDrag : DragEventHandler<HTMLSpanElement>,onDragCapture : DragEventHandler<HTMLSpanElement>,onDragEnd : DragEventHandler<HTMLSpanElement>,onDragEndCapture : DragEventHandler<HTMLSpanElement>,onDragEnter : DragEventHandler<HTMLSpanElement>,onDragEnterCapture : DragEventHandler<HTMLSpanElement>,onDragExit : DragEventHandler<HTMLSpanElement>,onDragExitCapture : DragEventHandler<HTMLSpanElement>,onDragLeave : DragEventHandler<HTMLSpanElement>,onDragLeaveCapture : DragEventHandler<HTMLSpanElement>,onDragOver : DragEventHandler<HTMLSpanElement>,onDragOverCapture : DragEventHandler<HTMLSpanElement>,onDragStart : DragEventHandler<HTMLSpanElement>,onDragStartCapture : DragEventHandler<HTMLSpanElement>,onDrop : DragEventHandler<HTMLSpanElement>,onDropCapture : DragEventHandler<HTMLSpanElement>,onDurationChange : ReactEventHandler<HTMLSpanElement>,onDurationChangeCapture : ReactEventHandler<HTMLSpanElement>,onEmptied : ReactEventHandler<HTMLSpanElement>,onEmptiedCapture : ReactEventHandler<HTMLSpanElement>,onEncrypted : ReactEventHandler<HTMLSpanElement>,onEncryptedCapture : ReactEventHandler<HTMLSpanElement>,onEnded : ReactEventHandler<HTMLSpanElement>,onEndedCapture : ReactEventHandler<HTMLSpanElement>,onError : ReactEventHandler<HTMLSpanElement>,onErrorCapture : ReactEventHandler<HTMLSpanElement>,onFocus : FocusEventHandler<HTMLSpanElement>,onFocusCapture : FocusEventHandler<HTMLSpanElement>,onGotPointerCapture : PointerEventHandler<HTMLSpanElement>,onGotPointerCaptureCapture : PointerEventHandler<HTMLSpanElement>,onInput : FormEventHandler<HTMLSpanElement>,onInputCapture : FormEventHandler<HTMLSpanElement>,onInvalid : FormEventHandler<HTMLSpanElement>,onInvalidCapture : FormEventHandler<HTMLSpanElement>,onKeyDown : KeyboardEventHandler<HTMLSpanElement>,onKeyDownCapture : KeyboardEventHandler<HTMLSpanElement>,onKeyPress : KeyboardEventHandler<HTMLSpanElement>,onKeyPressCapture : KeyboardEventHandler<HTMLSpanElement>,onKeyUp : KeyboardEventHandler<HTMLSpanElement>,onKeyUpCapture : KeyboardEventHandler<HTMLSpanElement>,onLoad : ReactEventHandler<HTMLSpanElement>,onLoadCapture : ReactEventHandler<HTMLSpanElement>,onLoadedData : ReactEventHandler<HTMLSpanElement>,onLoadedDataCapture : ReactEventHandler<HTMLSpanElement>,onLoadedMetadata : ReactEventHandler<HTMLSpanElement>,onLoadedMetadataCapture : ReactEventHandler<HTMLSpanElement>,onLoadStart : ReactEventHandler<HTMLSpanElement>,onLoadStartCapture : ReactEventHandler<HTMLSpanElement>,onLostPointerCapture : PointerEventHandler<HTMLSpanElement>,onLostPointerCaptureCapture : PointerEventHandler<HTMLSpanElement>,onMouseDown : MouseEventHandler<HTMLSpanElement>,onMouseDownCapture : MouseEventHandler<HTMLSpanElement>,onMouseEnter : MouseEventHandler<HTMLSpanElement>,onMouseLeave : MouseEventHandler<HTMLSpanElement>,onMouseMove : MouseEventHandler<HTMLSpanElement>,onMouseMoveCapture : MouseEventHandler<HTMLSpanElement>,onMouseOut : MouseEventHandler<HTMLSpanElement>,onMouseOutCapture : MouseEventHandler<HTMLSpanElement>,onMouseOver : MouseEventHandler<HTMLSpanElement>,onMouseOverCapture : MouseEventHandler<HTMLSpanElement>,onMouseUp : MouseEventHandler<HTMLSpanElement>,onMouseUpCapture : MouseEventHandler<HTMLSpanElement>,onPaste : ClipboardEventHandler<HTMLSpanElement>,onPasteCapture : ClipboardEventHandler<HTMLSpanElement>,onPause : ReactEventHandler<HTMLSpanElement>,onPauseCapture : ReactEventHandler<HTMLSpanElement>,onPlay : ReactEventHandler<HTMLSpanElement>,onPlayCapture : ReactEventHandler<HTMLSpanElement>,onPlaying : ReactEventHandler<HTMLSpanElement>,onPlayingCapture : ReactEventHandler<HTMLSpanElement>,onPointerCancel : PointerEventHandler<HTMLSpanElement>,onPointerCancelCapture : PointerEventHandler<HTMLSpanElement>,onPointerDown : PointerEventHandler<HTMLSpanElement>,onPointerDownCapture : PointerEventHandler<HTMLSpanElement>,onPointerEnter : PointerEventHandler<HTMLSpanElement>,onPointerLeave : PointerEventHandler<HTMLSpanElement>,onPointerMove : PointerEventHandler<HTMLSpanElement>,onPointerMoveCapture : PointerEventHandler<HTMLSpanElement>,onPointerOut : PointerEventHandler<HTMLSpanElement>,onPointerOutCapture : PointerEventHandler<HTMLSpanElement>,onPointerOver : PointerEventHandler<HTMLSpanElement>,onPointerOverCapture : PointerEventHandler<HTMLSpanElement>,onPointerUp : PointerEventHandler<HTMLSpanElement>,onPointerUpCapture : PointerEventHandler<HTMLSpanElement>,onProgress : ReactEventHandler<HTMLSpanElement>,onProgressCapture : ReactEventHandler<HTMLSpanElement>,onRateChange : ReactEventHandler<HTMLSpanElement>,onRateChangeCapture : ReactEventHandler<HTMLSpanElement>,onReset : FormEventHandler<HTMLSpanElement>,onResetCapture : FormEventHandler<HTMLSpanElement>,onResize : ReactEventHandler<HTMLSpanElement>,onResizeCapture : ReactEventHandler<HTMLSpanElement>,onScroll : UIEventHandler<HTMLSpanElement>,onScrollCapture : UIEventHandler<HTMLSpanElement>,onSeeked : ReactEventHandler<HTMLSpanElement>,onSeekedCapture : ReactEventHandler<HTMLSpanElement>,onSeeking : ReactEventHandler<HTMLSpanElement>,onSeekingCapture : ReactEventHandler<HTMLSpanElement>,onSelect : ReactEventHandler<HTMLSpanElement>,onSelectCapture : ReactEventHandler<HTMLSpanElement>,onStalled : ReactEventHandler<HTMLSpanElement>,onStalledCapture : ReactEventHandler<HTMLSpanElement>,onSubmit : FormEventHandler<HTMLSpanElement>,onSubmitCapture : FormEventHandler<HTMLSpanElement>,onSuspend : ReactEventHandler<HTMLSpanElement>,onSuspendCapture : ReactEventHandler<HTMLSpanElement>,onTimeUpdate : ReactEventHandler<HTMLSpanElement>,onTimeUpdateCapture : ReactEventHandler<HTMLSpanElement>,onToggle : ToggleEventHandler<HTMLSpanElement>,onTouchCancel : TouchEventHandler<HTMLSpanElement>,onTouchCancelCapture : TouchEventHandler<HTMLSpanElement>,onTouchEnd : TouchEventHandler<HTMLSpanElement>,onTouchEndCapture : TouchEventHandler<HTMLSpanElement>,onTouchMove : TouchEventHandler<HTMLSpanElement>,onTouchMoveCapture : TouchEventHandler<HTMLSpanElement>,onTouchStart : TouchEventHandler<HTMLSpanElement>,onTouchStartCapture : TouchEventHandler<HTMLSpanElement>,onTransitionCancel : TransitionEventHandler<HTMLSpanElement>,onTransitionCancelCapture : TransitionEventHandler<HTMLSpanElement>,onTransitionEnd : TransitionEventHandler<HTMLSpanElement>,onTransitionEndCapture : TransitionEventHandler<HTMLSpanElement>,onTransitionRun : TransitionEventHandler<HTMLSpanElement>,onTransitionRunCapture : TransitionEventHandler<HTMLSpanElement>,onTransitionStart : TransitionEventHandler<HTMLSpanElement>,onTransitionStartCapture : TransitionEventHandler<HTMLSpanElement>,onVolumeChange : ReactEventHandler<HTMLSpanElement>,onVolumeChangeCapture : ReactEventHandler<HTMLSpanElement>,onWaiting : ReactEventHandler<HTMLSpanElement>,onWaitingCapture : ReactEventHandler<HTMLSpanElement>,onWheel : WheelEventHandler<HTMLSpanElement>,onWheelCapture : WheelEventHandler<HTMLSpanElement>,popover : "" | "auto" | "manual",popoverTarget : string,popoverTargetAction : "toggle" | "hide" | "show",prefix : string,property : string,queryOptions : Omit<UseQueryOptions<string, Error, string, QueryKey>, "queryKey" | "queryFn">,radioGroup : string,rel : string,resource : string,results : number,rev : string,role : AriaRole,security : string,slot : string,spellCheck : Booleanish,style : CSSProperties,suppressContentEditableWarning : boolean,suppressHydrationWarning : boolean,symbolResolver : string | (() => string) | (() => Promise<string>),tabIndex : number,title : string,translate : "yes" | "no",typeof : string,unselectable : "on" | "off",vocab : string}

Returns


let returnType: null | Element;