# __thirdweb TypeScript SDK Documentation__
> Frontend, Backend, and Onchain tools to build complete web3 apps — on every EVM chain.
---
**UI Components**
---
# Wallets
---
## AccountAddress
### Example
#### Basic usage
```tsx
import { AccountProvider, AccountAddress } from "thirdweb/react";
;
```
Result:
```html
0x12345674b599ce99958242b3D3741e7b01841DF3
```
#### Shorten the address
```tsx
import { AccountProvider, AccountAddress } from "thirdweb/react";
import { shortenAddress } from "thirdweb/utils";
;
```
Result:
```html
0x1234...1DF3
```
```ts
function AccountAddress(
__namedParameters: AccountAddressProps,
): Element;
```
### Parameters
#### Type
```ts
let __namedParameters: {about : string,accessKey : string,aria-activedescendant : string,aria-atomic : Booleanish,aria-autocomplete : "inline" | "list" | "none" | "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" | "date" | "page" | "step" | "location",aria-describedby : string,aria-description : string,aria-details : string,aria-disabled : Booleanish,aria-dropeffect : "link" | "popup" | "execute" | "none" | "copy" | "move",aria-errormessage : string,aria-expanded : Booleanish,aria-flowto : string,aria-grabbed : Booleanish,aria-haspopup : boolean | "false" | "true" | "dialog" | "grid" | "listbox" | "menu" | "tree",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 & ({ })) | "on" | "off" | "none" | "sentences" | "words" | "characters",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),dir : string,draggable : Booleanish,enterKeyHint : "search" | "done" | "next" | "send" | "enter" | "go" | "previous",exportparts : string,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,nonce : string,onAbort : ReactEventHandler,onAbortCapture : ReactEventHandler,onAnimationEnd : AnimationEventHandler,onAnimationEndCapture : AnimationEventHandler,onAnimationIteration : AnimationEventHandler,onAnimationIterationCapture : AnimationEventHandler,onAnimationStart : AnimationEventHandler,onAnimationStartCapture : AnimationEventHandler,onAuxClick : MouseEventHandler,onAuxClickCapture : MouseEventHandler,onBeforeInput : FormEventHandler,onBeforeInputCapture : FormEventHandler,onBeforeToggle : ToggleEventHandler,onBlur : FocusEventHandler,onBlurCapture : FocusEventHandler,onCanPlay : ReactEventHandler,onCanPlayCapture : ReactEventHandler,onCanPlayThrough : ReactEventHandler,onCanPlayThroughCapture : ReactEventHandler,onChange : FormEventHandler,onChangeCapture : FormEventHandler,onClick : MouseEventHandler,onClickCapture : MouseEventHandler,onCompositionEnd : CompositionEventHandler,onCompositionEndCapture : CompositionEventHandler,onCompositionStart : CompositionEventHandler,onCompositionStartCapture : CompositionEventHandler,onCompositionUpdate : CompositionEventHandler,onCompositionUpdateCapture : CompositionEventHandler,onContextMenu : MouseEventHandler,onContextMenuCapture : MouseEventHandler,onCopy : ClipboardEventHandler,onCopyCapture : ClipboardEventHandler,onCut : ClipboardEventHandler,onCutCapture : ClipboardEventHandler,onDoubleClick : MouseEventHandler,onDoubleClickCapture : MouseEventHandler,onDrag : DragEventHandler,onDragCapture : DragEventHandler,onDragEnd : DragEventHandler,onDragEndCapture : DragEventHandler,onDragEnter : DragEventHandler,onDragEnterCapture : DragEventHandler,onDragExit : DragEventHandler,onDragExitCapture : DragEventHandler,onDragLeave : DragEventHandler,onDragLeaveCapture : DragEventHandler,onDragOver : DragEventHandler,onDragOverCapture : DragEventHandler,onDragStart : DragEventHandler,onDragStartCapture : DragEventHandler,onDrop : DragEventHandler,onDropCapture : DragEventHandler,onDurationChange : ReactEventHandler,onDurationChangeCapture : ReactEventHandler,onEmptied : ReactEventHandler,onEmptiedCapture : ReactEventHandler,onEncrypted : ReactEventHandler,onEncryptedCapture : ReactEventHandler,onEnded : ReactEventHandler,onEndedCapture : ReactEventHandler,onError : ReactEventHandler,onErrorCapture : ReactEventHandler,onFocus : FocusEventHandler,onFocusCapture : FocusEventHandler,onGotPointerCapture : PointerEventHandler,onGotPointerCaptureCapture : PointerEventHandler,onInput : FormEventHandler,onInputCapture : FormEventHandler,onInvalid : FormEventHandler,onInvalidCapture : FormEventHandler,onKeyDown : KeyboardEventHandler,onKeyDownCapture : KeyboardEventHandler,onKeyPress : KeyboardEventHandler,onKeyPressCapture : KeyboardEventHandler,onKeyUp : KeyboardEventHandler,onKeyUpCapture : KeyboardEventHandler,onLoad : ReactEventHandler,onLoadCapture : ReactEventHandler,onLoadedData : ReactEventHandler,onLoadedDataCapture : ReactEventHandler,onLoadedMetadata : ReactEventHandler,onLoadedMetadataCapture : ReactEventHandler,onLoadStart : ReactEventHandler,onLoadStartCapture : ReactEventHandler,onLostPointerCapture : PointerEventHandler,onLostPointerCaptureCapture : PointerEventHandler,onMouseDown : MouseEventHandler,onMouseDownCapture : MouseEventHandler,onMouseEnter : MouseEventHandler,onMouseLeave : MouseEventHandler,onMouseMove : MouseEventHandler,onMouseMoveCapture : MouseEventHandler,onMouseOut : MouseEventHandler,onMouseOutCapture : MouseEventHandler,onMouseOver : MouseEventHandler,onMouseOverCapture : MouseEventHandler,onMouseUp : MouseEventHandler,onMouseUpCapture : MouseEventHandler,onPaste : ClipboardEventHandler,onPasteCapture : ClipboardEventHandler,onPause : ReactEventHandler,onPauseCapture : ReactEventHandler,onPlay : ReactEventHandler,onPlayCapture : ReactEventHandler,onPlaying : ReactEventHandler,onPlayingCapture : ReactEventHandler,onPointerCancel : PointerEventHandler,onPointerCancelCapture : PointerEventHandler,onPointerDown : PointerEventHandler,onPointerDownCapture : PointerEventHandler,onPointerEnter : PointerEventHandler,onPointerLeave : PointerEventHandler,onPointerMove : PointerEventHandler,onPointerMoveCapture : PointerEventHandler,onPointerOut : PointerEventHandler,onPointerOutCapture : PointerEventHandler,onPointerOver : PointerEventHandler,onPointerOverCapture : PointerEventHandler,onPointerUp : PointerEventHandler,onPointerUpCapture : PointerEventHandler,onProgress : ReactEventHandler,onProgressCapture : ReactEventHandler,onRateChange : ReactEventHandler,onRateChangeCapture : ReactEventHandler,onReset : FormEventHandler,onResetCapture : FormEventHandler,onResize : ReactEventHandler,onResizeCapture : ReactEventHandler,onScroll : UIEventHandler,onScrollCapture : UIEventHandler,onScrollEnd : UIEventHandler,onScrollEndCapture : UIEventHandler,onSeeked : ReactEventHandler,onSeekedCapture : ReactEventHandler,onSeeking : ReactEventHandler,onSeekingCapture : ReactEventHandler,onSelect : ReactEventHandler,onSelectCapture : ReactEventHandler,onStalled : ReactEventHandler,onStalledCapture : ReactEventHandler,onSubmit : FormEventHandler,onSubmitCapture : FormEventHandler,onSuspend : ReactEventHandler,onSuspendCapture : ReactEventHandler,onTimeUpdate : ReactEventHandler,onTimeUpdateCapture : ReactEventHandler,onToggle : ToggleEventHandler,onTouchCancel : TouchEventHandler,onTouchCancelCapture : TouchEventHandler,onTouchEnd : TouchEventHandler,onTouchEndCapture : TouchEventHandler,onTouchMove : TouchEventHandler,onTouchMoveCapture : TouchEventHandler,onTouchStart : TouchEventHandler,onTouchStartCapture : TouchEventHandler,onTransitionCancel : TransitionEventHandler,onTransitionCancelCapture : TransitionEventHandler,onTransitionEnd : TransitionEventHandler,onTransitionEndCapture : TransitionEventHandler,onTransitionRun : TransitionEventHandler,onTransitionRunCapture : TransitionEventHandler,onTransitionStart : TransitionEventHandler,onTransitionStartCapture : TransitionEventHandler,onVolumeChange : ReactEventHandler,onVolumeChangeCapture : ReactEventHandler,onWaiting : ReactEventHandler,onWaitingCapture : ReactEventHandler,onWheel : WheelEventHandler,onWheelCapture : WheelEventHandler,part : string,popover : "" | "auto" | "manual",popoverTarget : string,popoverTargetAction : "toggle" | "hide" | "show",prefix : string,property : string,radioGroup : string,rel : string,resource : string,results : number,rev : string,role : AriaRole,security : string,slot : string,spellCheck : Booleanish,style : CSSProperties,suppressContentEditableWarning : boolean,suppressHydrationWarning : boolean,tabIndex : number,title : string,translate : "yes" | "no",typeof : string,unselectable : "on" | "off",vocab : string}
```
### Returns
```ts
let returnType: Element;
```
a `` containing the full wallet address of the account
---
## AccountBlobbie
A wrapper for the Blobbie component
```ts
function AccountBlobbie(
props: Omit,
): Element;
```
### Parameters
BlobbieProps
#### Type
```ts
let props: Omit;
```
### Returns
```ts
let returnType: Element;
```
---
## AccountProvider
A React context provider component that supplies Account-related data to its child components.
This component serves as a wrapper around the `AccountProviderContext.Provider` and passes the provided account data down to all of its child components through the context API.
### Example
```tsx
import {
AccountProvider,
AccountAvatar,
AccountName,
AccountAddress,
} from "thirdweb/react";
;
```
```ts
function AccountProvider(
props: PropsWithChildren,
): Element;
```
### Parameters
#### Type
```ts
let props: PropsWithChildren;
```
### Returns
```ts
let returnType: Element;
```
---
## Blobbie
A unique gradient avatar based on the provided address.
### Example
```tsx
import { Blobbie } from "thirdweb/react";
;
```
```ts
function Blobbie(props: BlobbieProps): Element;
```
### Parameters
The component props.
#### Type
```ts
let props: BlobbieProps;
```
### Returns
```ts
let returnType: Element;
```
---
## SocialIcon
Social auth provider icon
### Example
```tsx
import { SocialIcon } from "thirdweb/react";
;
```
Result: An `
` component with the src of the icon
```html
```
```ts
function SocialIcon(__namedParameters: SocialIconProps): Element;
```
### Parameters
#### Type
```ts
let __namedParameters: {about : string,accessKey : string,alt : string,aria-activedescendant : string,aria-atomic : Booleanish,aria-autocomplete : "inline" | "list" | "none" | "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" | "date" | "page" | "step" | "location",aria-describedby : string,aria-description : string,aria-details : string,aria-disabled : Booleanish,aria-dropeffect : "link" | "popup" | "execute" | "none" | "copy" | "move",aria-errormessage : string,aria-expanded : Booleanish,aria-flowto : string,aria-grabbed : Booleanish,aria-haspopup : boolean | "false" | "true" | "dialog" | "grid" | "listbox" | "menu" | "tree",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 & ({ })) | "on" | "off" | "none" | "sentences" | "words" | "characters",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),dir : string,draggable : Booleanish,enterKeyHint : "search" | "done" | "next" | "send" | "enter" | "go" | "previous",exportparts : string,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",nonce : string,onAbort : ReactEventHandler,onAbortCapture : ReactEventHandler,onAnimationEnd : AnimationEventHandler,onAnimationEndCapture : AnimationEventHandler,onAnimationIteration : AnimationEventHandler,onAnimationIterationCapture : AnimationEventHandler,onAnimationStart : AnimationEventHandler,onAnimationStartCapture : AnimationEventHandler,onAuxClick : MouseEventHandler,onAuxClickCapture : MouseEventHandler,onBeforeInput : FormEventHandler,onBeforeInputCapture : FormEventHandler,onBeforeToggle : ToggleEventHandler,onBlur : FocusEventHandler,onBlurCapture : FocusEventHandler,onCanPlay : ReactEventHandler,onCanPlayCapture : ReactEventHandler,onCanPlayThrough : ReactEventHandler,onCanPlayThroughCapture : ReactEventHandler,onChange : FormEventHandler,onChangeCapture : FormEventHandler,onClick : MouseEventHandler,onClickCapture : MouseEventHandler,onCompositionEnd : CompositionEventHandler,onCompositionEndCapture : CompositionEventHandler,onCompositionStart : CompositionEventHandler,onCompositionStartCapture : CompositionEventHandler,onCompositionUpdate : CompositionEventHandler,onCompositionUpdateCapture : CompositionEventHandler,onContextMenu : MouseEventHandler,onContextMenuCapture : MouseEventHandler,onCopy : ClipboardEventHandler,onCopyCapture : ClipboardEventHandler,onCut : ClipboardEventHandler,onCutCapture : ClipboardEventHandler,onDoubleClick : MouseEventHandler,onDoubleClickCapture : MouseEventHandler,onDrag : DragEventHandler,onDragCapture : DragEventHandler,onDragEnd : DragEventHandler,onDragEndCapture : DragEventHandler,onDragEnter : DragEventHandler,onDragEnterCapture : DragEventHandler,onDragExit : DragEventHandler,onDragExitCapture : DragEventHandler,onDragLeave : DragEventHandler,onDragLeaveCapture : DragEventHandler,onDragOver : DragEventHandler,onDragOverCapture : DragEventHandler,onDragStart : DragEventHandler,onDragStartCapture : DragEventHandler,onDrop : DragEventHandler,onDropCapture : DragEventHandler,onDurationChange : ReactEventHandler,onDurationChangeCapture : ReactEventHandler,onEmptied : ReactEventHandler,onEmptiedCapture : ReactEventHandler,onEncrypted : ReactEventHandler,onEncryptedCapture : ReactEventHandler,onEnded : ReactEventHandler,onEndedCapture : ReactEventHandler,onError : ReactEventHandler,onErrorCapture : ReactEventHandler,onFocus : FocusEventHandler,onFocusCapture : FocusEventHandler,onGotPointerCapture : PointerEventHandler,onGotPointerCaptureCapture : PointerEventHandler,onInput : FormEventHandler,onInputCapture : FormEventHandler,onInvalid : FormEventHandler,onInvalidCapture : FormEventHandler,onKeyDown : KeyboardEventHandler,onKeyDownCapture : KeyboardEventHandler,onKeyPress : KeyboardEventHandler,onKeyPressCapture : KeyboardEventHandler,onKeyUp : KeyboardEventHandler,onKeyUpCapture : KeyboardEventHandler,onLoad : ReactEventHandler