Components
TokenAmount
Displays a formatted token amount. When a USD value is provided, hovering reveals it in a tooltip.
Preview
1,234.5678ETH≈ $3703915.2010,000STRK0.000001ETH
Install
npx shadcn@latest add "https://zapkit.vercel.app/r/token-amount.json"This installs:
token-amount.tsxinto your components directory- shadcn primitives:
tooltip
Usage
import { TokenAmount } from "@/components/token-amount";
{
/* Basic */
}
<TokenAmount amount="1234.5678" symbol="ETH" />;
{
/* With USD tooltip */
}
<TokenAmount amount="1234.5678" symbol="ETH" usdValue="3,703,915.20" />;
{
/* Custom decimals, no symbol */
}
<TokenAmount amount="0.000001" symbol="ETH" decimals={8} hideSymbol />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
amount | string | required | Raw or pre-formatted token amount |
symbol | string | required | Token symbol (e.g. "ETH") |
usdValue | string | null | null | US dollar value string |
decimals | number | 6 | Maximum decimal places to display |
hideSymbol | boolean | false | Hide the symbol suffix |
className | string | — | Additional CSS classes |