thirdwebPlayground
Wallets

Account Components

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

Documentation

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