# Wallet Card

> An animated crypto wallet card for React and shadcn, with balance, address copy, network switch and hidden balances.

A crypto wallet's face: the balance rolls as prices move, the truncated address morphs to a check when copied, switching network cross-fades the card's tint while the holdings swap in, and Hide blurs every figure in place.

- Tier: Eased Pro
- Interaction: Press
- Page: https://eased.dev/components/wallet-card
- Installs: motion

## Install

Wallet Card ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/wallet-card
```

A wallet's face: a rolling balance per network, a copyable truncated address, a chain switch that re-tints the card, and a privacy toggle that blurs figures in place.

## 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.

## Usage

```tsx example.tsx
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.

## Related

- [Connect Wallet](/components/connect-wallet): before there's an address.
- [Token Swap](/components/token-swap): spend from it.