onchain-uiExamples
Build a portfolio card, wallet header, and pool position list with onchain-ui components.
These examples combine onchain-ui components with shadcn cards and badges. Install the listed components, copy the example, and replace the sample data with your app's data.
Portfolio
A shadcn Card contains an AssetRow for each holding. TokenPrice shows the total and daily change. Each row receives its network, fiat value, and token amount as props.
npx shadcn add card @onchain-ui/asset-row @onchain-ui/token-priceLoading...
example-portfolio.tsxShow code
import { Card, CardContent, CardDescription, CardHeader, CardTitle,} from "@/components/ui/card"import { AssetRow } from "@/components/ui/asset-row"import { TokenPrice } from "@/components/ui/token-price"const holdings = [ { symbol: "ETH", name: "Ethereum", src: "https://assets.coingecko.com/coins/images/279/large/ethereum.png", amount: 1.2845, value: 4163.91, change: 2.41, chainId: 1, networkName: "Ethereum", }, { symbol: "USDC", name: "USD Coin", src: "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png", amount: 1842.2, value: 1842.2, change: 0.01, chainId: 8453, networkName: "Base", }, { symbol: "AERO", name: "Aerodrome", src: "https://assets.coingecko.com/coins/images/31745/large/token.png", amount: 925.348, value: 692.14, change: -4.16, chainId: 8453, networkName: "Base", },]export function Portfolio() { const total = holdings.reduce((sum, asset) => sum + asset.value, 0) return ( <Card className="w-full max-w-md"> <CardHeader className="border-b"> <CardDescription>Total balance</CardDescription> <CardTitle className="flex items-baseline gap-2 text-2xl tabular-nums"> {total.toLocaleString("en-US", { style: "currency", currency: "USD" })} <TokenPrice value={null} fallback={null} change={1.24} /> </CardTitle> </CardHeader> <CardContent className="grid gap-2"> {holdings.map((asset) => ( <AssetRow key={asset.symbol} {...asset} /> ))} </CardContent> </Card> )}Wallet header
AddressIdentity resolves the supplied address to a Basename or ENS name and avatar. TokenBalance shows the supplied gas balance beside it in a horizontal Card. The identity includes copy and explorer buttons.
npx shadcn add card @onchain-ui/address-identity @onchain-ui/token-balanceLoading...
example-wallet-header.tsxShow code
import { Card } from "@/components/ui/card"import { AddressIdentity } from "@/components/ui/address-identity"import { TokenBalance } from "@/components/ui/token-balance"// Resolves live to garlic🧄.base.eth via the Basename L2 resolverconst WALLET = "0x02506c126A8d6dB0FE0CdfFf77f5007822FE7a16"export function WalletHeader() { return ( <Card size="sm" className="w-full max-w-md flex-row items-center justify-between gap-4 px-4" > <AddressIdentity address={WALLET} chainId={8453} /> <TokenBalance amount={1.2845} symbol="ETH" fiatValue={4163.91} src="https://assets.coingecko.com/coins/images/279/large/ethereum.png" /> </Card> )}The preview performs a reverse lookup against Base mainnet. See identity caching for cache behavior and custom RPC endpoints to configure your clients.
Pool positions
TokenStack shows overlapping logos for the pool's tokens, with tooltips on hover. A shadcn Badge names the venue. TokenPrice shows the position value and percentage change.
npx shadcn add card badge @onchain-ui/token-stack @onchain-ui/token-priceLoading...
example-pool-positions.tsxShow code
import { Badge } from "@/components/ui/badge"import { Card } from "@/components/ui/card"import { TokenPrice } from "@/components/ui/token-price"import { TokenStack } from "@/components/ui/token-stack"const pools = [ { name: "ETH / USDC", venue: "Uniswap v3", detail: "0.05% fee tier", value: 12480.55, change: 3.2, tokens: [ { symbol: "ETH", name: "Ethereum", src: "https://assets.coingecko.com/coins/images/279/large/ethereum.png" }, { symbol: "USDC", name: "USD Coin", src: "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png" }, ], }, { name: "AERO / USDC", venue: "Aerodrome", detail: "Volatile pool", value: 3211.08, change: -1.8, tokens: [ { symbol: "AERO", name: "Aerodrome", src: "https://assets.coingecko.com/coins/images/31745/large/token.png" }, { symbol: "USDC", name: "USD Coin", src: "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png" }, ], },]export function PoolPositions() { return ( <div className="grid w-full max-w-md gap-2"> {pools.map((pool) => ( <Card key={pool.name} size="sm" className="flex-row items-center justify-between gap-4 px-3" > <div className="flex min-w-0 items-center gap-3"> <TokenStack tokens={pool.tokens} showTooltip /> <div className="min-w-0"> <div className="flex items-center gap-2"> <p className="truncate text-sm font-medium leading-none">{pool.name}</p> <Badge variant="secondary">{pool.venue}</Badge> </div> <p className="mt-1 truncate text-xs text-muted-foreground">{pool.detail}</p> </div> </div> <TokenPrice value={pool.value} change={pool.change} className="shrink-0 justify-end" /> </Card> ))} </div> )}
