onchain-ui

TokenBalance formats a token amount beside its symbol. Add fiatValue and change to show the balance's value and percentage change below it.

1.2845ETH

$4,163.91+2.41%

token-balance.tsxShow code

import { TokenBalance } from "@/components/ui/token-balance"export function TokenBalanceDemo() {  return (    <TokenBalance      amount={1.2845}      symbol="ETH"      name="Ethereum"      src="https://assets.coingecko.com/coins/images/279/large/ethereum.png"      fiatValue={4163.91}      change={2.41}    />  )}

Installation

npx shadcn add @onchain-ui/token-balance

Open in

Requirements

This component uses the shadcn tooltip. The install adds components/ui/tooltip.tsx if it is missing, or uses your existing file. Wrap your app with TooltipProvider to enable tooltips.

Usage

import { TokenBalance } from "@/components/ui/token-balance"

<TokenBalance amount={1.2845} symbol="ETH" fiatValue={4163.91} change={2.41} />

TokenBalance uses TokenLogo for the icon and TokenPrice for the fiat value. Pass logoProps or priceProps to customize them.

Examples

List

1.2845ETH

$4,163.91+2.41%

1,842.2USDC

$1,842.20+0.01%

925.348AERO

$692.14-4.16%

token-balance-list.tsxShow code

import { TokenBalance } from "@/components/ui/token-balance"export function TokenBalanceList() {  return (    <div className="grid gap-4">      <TokenBalance amount={1.2845} symbol="ETH" fiatValue={4163.91} change={2.41} />      <TokenBalance amount={1842.2} symbol="USDC" fiatValue={1842.2} change={0.01} />      <TokenBalance amount={925.348} symbol="AERO" fiatValue={692.14} change={-4.16} />    </div>  )}

Compact

0.1289cbBTC

$13.25K

token-balance-compact.tsxShow code

import { TokenBalance } from "@/components/ui/token-balance"export function TokenBalanceCompact() {  return (    <TokenBalance      amount={0.128934}      symbol="cbBTC"      name="Coinbase Wrapped BTC"      fiatValue={13248.12}      logoProps={{ size: "lg" }}      priceProps={{ compact: true, showChangeIcon: false }}    />  )}

Props

Prop	Type	Default	Description
`amount`	`number \| string \| null \| undefined`	-	Token amount
`symbol`	`string \| null`	-	Token symbol shown after the amount
`name`	`string \| null`	-	Token name, used for logo alt text
`src`	`string \| null`	-	Token image URL
`address`	`string \| null`	-	Token contract address, used for icon inference and as a fallback label
`chainId`	`number \| null`	-	EVM chain id, used with `address` to infer a token icon
`isNative`	`boolean`	`false`	Use the chain's native-currency icon instead of the token contract icon
`fiatValue`	`TokenPriceProps["value"]`	-	Fiat value for the balance
`change`	`number \| null`	-	Fiat value percentage change
`showLogo`	`boolean`	`true`	Show the token logo
`showFiatValue`	`boolean`	`true`	Show fiat value when provided
`locale`	`string`	Browser/default locale	Locale passed to `Intl.NumberFormat`
`maximumFractionDigits`	`number`	`4`	Maximum fraction digits for token amount
`minimumFractionDigits`	`number`	-	Minimum fraction digits for token amount
`fallback`	`ReactNode`	`"--"`	Shown when amount is missing or invalid
`logoProps`	`Partial<TokenLogoProps>`	-	Props passed to `TokenLogo`
`priceProps`	`Partial<TokenPriceProps>`	-	Props passed to `TokenPrice`
`className`	`string`	-	Applied to the root wrapper
`amountClassName`	`string`	-	Applied to the amount line
`fiatClassName`	`string`	-	Applied to the fiat value line

Token balance