When to use
- The account summary at the top of a wallet, exchange or portfolio app.
- Multi-network balances where switching chain should feel like the same card.
When not to use
- A full portfolio breakdown: pair it with a table or donut.
- Connecting a wallet in the first place: use Connect Wallet.
Installation
pnpm dlx shadcn add @eased-pro/wallet-cardnpx shadcn add @eased-pro/wallet-cardyarn dlx shadcn add @eased-pro/wallet-cardbunx --bun shadcn add @eased-pro/wallet-cardNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
Install the dependencies
pnpm add motionnpm install motionyarn add motionbun add motionAdd the Eased pieces it builds on
Copy each item’s files the same way, or install them with the CLI:
Add the files
- components/eased/wallet-card/wallet-card.tsx
Source is included with Eased Pro. Members download the files with the CLI command above, or through the MCP server.
Keep the folder layout
The files import each other by relative path (
../lib/motion), so keep each one at the path shown, undercomponents/eased/.
Usage
import { WalletCard } from "@/components/eased/wallet-card/wallet-card";<WalletCard address="0x7a3F9c21B4e8D05a6C1f93E2b7D4c8A90e15Bf62" name="mara.eth" chains={[{ id: "ethereum", label: "Ethereum", tone: "info", assets: [{ symbol: "ETH", name: "Ether", amount: 4.2817, price: 3418.27, change: -0.0093 }] }]}/>API reference
WalletCard
| Prop | Type | Default | Description |
|---|---|---|---|
address | string | Shown as head…tail; copied in full. | |
name | string | ENS or display name. | |
chains | WalletChain[] | { id, label, tone, assets }; tone is info, brand, success, warning or neutral. | |
chain / defaultChain / onChainChange | string | first | The network shown. |
hidden / defaultHidden / onHiddenChange | boolean | false | Blurs every amount. Percent changes stay visible: they are market moves and reveal no balance. |
onCopy | (address) => void | After a copy. | |
locale | Intl.LocalesArgument | "en-US" | Number formats. |
className | string | Set --glow-bleed to let the tint reach the container's edges. |
Keyboard
| Key | Action |
|---|---|
Tab | Address, hide toggle, network control. |
| Arrows | Move between networks. |
Enter / Space | Copy, toggle hide. |
Accessibility
- Hidden figures read as "Hidden" to screen readers; the blurred digits are
aria-hidden. - The copy button announces "Address copied" politely.
Motion
Prices roll the balance on the snappy spring. Switching network cross-fades a ≤10% radial tint (400ms in, 300ms out) while the balance rolls to the new total and the holdings rise in with a 35ms stagger. Hide tweens a blur of 8px in 200ms, so nothing reflows. The copy icon morphs to a drawn check and the address swaps to "Copied". Reduced motion: values change in place; tint and rows cross-fade.
Notes for AI
Pick it for the balance header of a crypto app. Pass live prices and it rolls; pass several chains and it handles switching and tinting.
Don't compute totals or blur values yourself, and don't use raw colours for chain tints: tone maps to tokens.