Account Components

Streamline your Web3 development with our React headless UI components for wallet integration. These unstyled, customizable components handle complex wallet operations while giving you complete control over your dApp's design.

View docs Book a Demo

AccountAddress

Show the wallet address of the account.

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

function App() {
  return (
    <AccountProvider
      address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      client={thirdwebClient}
    >
      <AccountAddress />
    </AccountProvider>
  );
}

0xd8da6bf26964af9d7eed9e03e53415d37aa96045

Shorten the wallet address using the formatFn prop.

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

function App() {
  return (
    <AccountProvider
      address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      client={thirdwebClient}
    >
      <AccountAddress formatFn={shortenAddress} />
    </AccountProvider>
  );
}

0xd8dA...6045

AccountName

Show the social alias associated with the account

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

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

Show account name for a specific social network

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>
  );
}

AccountBalance

Display the current native balance of the wallet.

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>
  );
}

Display the current balance of a custom token

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>
  );
}

Round up the wallet balance using the formatFn prop.

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>
  );
}

Display the USD value of the token balance.

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

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

AccountAvatar

Show the social avatar associated with the account

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>
  );
}

AccountBlobbie

Show the unique blobbie generated from the wallet address

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

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

Rebuild the Connected-Button

Using these headless components, you can easily build your own complex UI, such as our Connected-button.

import {
  AccountProvider,
  AccountAvatar,
  AccountName,
  AccountBalance,
  AccountAddress,
  AccountBlobbie,
} from "thirdweb/react";

function App() {
  return (
    <AccountProvider
      address={vitalikAddress}
      client={THIRDWEB_CLIENT}
    >
      <button
        type="button"
        className="flex min-w-[200px] flex-row items-center gap-2 rounded-md border bg-gray-800 px-4 py-2"
      >
        <AccountAvatar
          className="h-10 w-10 rounded-full"
          loadingComponent={
            <AccountBlobbie className="h-10 w-10 rounded-full" />
          }
          fallbackComponent={
            <AccountBlobbie className="h-10 w-10 rounded-full" />
          }
        />
        <div className="flex flex-col gap-1">
          <AccountName
            className="text-left"
            loadingComponent={
              <AccountAddress
                formatFn={shortenAddress}
                className="text-left"
              />
            }
            fallbackComponent={
              <AccountAddress
                formatFn={shortenAddress}
                className="text-left"
              />
            }
          />
          <div className="flex flex-row items-center gap-2">
            <AccountBalance
              className="text-left text-sm"
              chain={ethereum}
              loadingComponent={
                <span className="text-left text-sm">
                  Loading...
                </span>
              }
              fallbackComponent={
                <span className="text-left text-sm">
                  Loading...
                </span>
              }
            />
            <AccountBalance
              className="text-left text-sm"
              chain={ethereum}
              showBalanceInFiat="USD"
            />
          </div>
        </div>
      </button>
    </AccountProvider>
  );
}