TokenAmount

For isolated previews, theme switching, and sandbox editing, open the TokenAmount playground on holydocs.com .

When to use

Use this component when blockchain context, addresses, chains, token math, or wallet onboarding must stay precise and scannable.

Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

Native Token

Humanize an 18-decimal native asset balance.

mdx
<TokenAmount value="1000000000000000000" decimals={18} symbol="ETH" />

Stablecoin

6-decimal assets like USDC remain precise without extra formatting work.

mdx
<TokenAmount value="12500000" decimals={6} symbol="USDC" />

Large Treasury Balance

Large raw values still render cleanly for dashboards or treasury docs.

mdx
<TokenAmount value="2504500000000000000000" decimals={18} symbol="MNT" />

Props

Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

mdx
<TokenAmount value="1000000000000000000" decimals={18} symbol="ETH" />

Tips

• Assume readers are one copy action away from using the value in production. Precision matters more than flair on web3 surfaces.
• Always make the target chain explicit when a component can imply a wallet, explorer, or transaction context.
• Use testnet examples unless the page is explicitly about production contracts or addresses you expect people to reuse.

Related Components

More

• Interactive playground: TokenAmount on holydocs.com
• Component library index: /components