Account Components

Headless components for rendering account information like ENS name, ENS avatar, account balance and more

AccountName

Show the social alias associated with the account.

Code

import { AccountProvider, AccountName } from "thirdweb/react";

function App() {
  return (
    <AccountProvider
      address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      client={thirdwebClient}
    >
      <AccountName loadingComponent={<span>Loading...</span>} />
    </AccountProvider>
  );
}

Preview

Show account name for a specific social network

Code

import { AccountProvider, AccountName } from "thirdweb/react";

function App() {
  return (
    <AccountProvider
      address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      client={thirdwebClient}
    >
      {/* You can choose between "ens", "lens" and "farcaster" */}
      <AccountName
        socialType="lens"
        loadingComponent={<span>Loading...</span>}
      />
    </AccountProvider>
  );
}

Preview

AccountBalance

Display the current native balance of the wallet.

Code

import { AccountProvider, AccountAddress } from "thirdweb/react";
import { shortenAddress } from "thirdweb/utils";

function App() {
  return (
    <AccountProvider
      address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      client={thirdwebClient}
    >
      <AccountBalance
        chain={ethereum}
        loadingComponent={<span>Loading...</span>}
      />
    </AccountProvider>
  );
}

Preview

Display the balance of a custom token

Code

import { AccountProvider, AccountAddress } from "thirdweb/react";
import { shortenAddress } from "thirdweb/utils";

const USDC_ETHEREUM = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";

function App() {
  return (
    <AccountProvider
      address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      client={thirdwebClient}
    >
      <AccountBalance
        chain={ethereum}
        tokenAddress={USDC_ETHEREUM}
        loadingComponent={<span>Loading...</span>}
      />
    </AccountProvider>
  );
}

Preview

Round up the wallet balance using the formatFn prop.

Code

import {
  AccountProvider,
  AccountAddress,
  type AccountBalanceFormatParams,
} from "thirdweb/react";

function App() {
  return (
    <AccountProvider
      address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      client={thirdwebClient}
    >
      <AccountBalance
        chain={ethereum}
        loadingComponent={<span>Loading...</span>}
        formatFn={(props: AccountBalanceInfo) =>
          `${Math.ceil(props.balance * 1000) / 1000} ${props.symbol}`
        }
      />
    </AccountProvider>
  );
}

Preview

Show the balance in USD using the showBalanceInFiat prop.

Code

import { AccountProvider, AccountAddress } from "thirdweb/react";

function App() {
  return (
    <AccountProvider
      address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      client={thirdwebClient}
    >
      <AccountBalance
        chain={ethereum}
        showBalanceInFiat="USD"
        loadingComponent={<span>Loading...</span>}
      />
    </AccountProvider>
  );
}

Preview

AccountAvatar

Show the social avatar associated with the account

Code

import { AccountProvider, AccountAvatar } from "thirdweb/react";

function App() {
  return (
    <AccountProvider
      address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      client={thirdwebClient}
    >
      <AccountAvatar
        className="w-20 h-20 rounded-full"
        loadingComponent={<span>Loading...</span>}
      />
    </AccountProvider>
  );
}

Preview

AccountBlobbie

Show the unique blobbie generated from the wallet address

Code

import { AccountProvider, AccountBlobbie } from "thirdweb/react";

function App() {
  return (
    <AccountProvider
      address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      client={thirdwebClient}
    >
      <AccountBlobbie className="h-20 w-20 rounded-full" />
    </AccountProvider>
  );
}

Preview