onchain-uiComponents
Asset row
Display a token's logo, network, amount, fiat value, and percentage change in one row.
AssetRow shows a holding's token details on the left and its amount and fiat value on the right. Use one row per holding in a portfolio or watchlist.
Loading...
asset-row.tsxShow code
import { AssetRow } from "@/components/ui/asset-row"export function AssetRowDemo() { return ( <AssetRow symbol="USDC" name="USD Coin" amount={1842.2} value={1842.2} change={0.01} chainId={8453} subtitle="Base" /> )}Installation
npx shadcn add @onchain-ui/asset-rowRequirements
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 { AssetRow } from "@/components/ui/asset-row"
<AssetRow
symbol="USDC"
name="USD Coin"
amount={1842.2}
value={1842.2}
change={0.01}
chainId={8453}
subtitle="Base"
/>AssetRow uses TokenLogo, NetworkLogo, and TokenPrice. Customize them through logoProps, networkLogoProps, and priceProps. Use identityClassName and valueClassName to style the two sides of the row.
Examples
Portfolio
Loading...
asset-row-portfolio.tsxShow code
import { AssetRow } from "@/components/ui/asset-row"export function AssetRowPortfolio({ assets }) { return ( <div className="grid gap-2"> {assets.map((asset) => ( <AssetRow key={asset.symbol} {...asset} /> ))} </div> )}Watchlist
Hide the amount to use the same row shape for market and watchlist views.
Loading...
asset-row-watchlist.tsxShow code
import { AssetRow } from "@/components/ui/asset-row"export function AssetRowWatchlist({ assets }) { return ( <div className="grid gap-2"> {assets.map((asset) => ( <AssetRow key={asset.symbol} {...asset} hideAmount priceProps={{ showChangeIcon: false }} /> ))} </div> )}Props
| Prop | Type | Default | Description |
|---|---|---|---|
symbol | string | - | Token symbol |
name | string | null | - | Token name |
src | string | null | - | Token image URL |
address | string | null | - | Token contract address, used for icon inference and as a fallback label |
isNative | boolean | false | Use the chain's native-currency icon instead of treating address as a token contract |
amount | number | string | null | undefined | - | Token amount held by the user |
value | TokenPriceProps["value"] | - | Fiat value for the position |
change | number | null | - | Price or position change percentage |
chainId | number | null | - | Network chain id for the logo badge |
networkName | string | null | - | Network name for the logo badge |
networkSrc | string | null | - | Network image URL for the logo badge |
subtitle | ReactNode | - | Secondary metadata shown beside the token name |
hideAmount | boolean | false | Hide the right-side token amount |
locale | string | Browser/default locale | Locale passed to Intl.NumberFormat |
maximumFractionDigits | number | 4 | Maximum fraction digits for token amount |
logoProps | Partial<TokenLogoProps> | - | Props passed to TokenLogo |
networkLogoProps | Partial<NetworkLogoProps> | - | Props passed to NetworkLogo |
priceProps | Partial<TokenPriceProps> | - | Props passed to TokenPrice |
className | string | - | Applied to the root wrapper |
identityClassName | string | - | Applied to the token identity block |
valueClassName | string | - | Applied to the right-side value block |
