# Crypto wallet

> Wallet balance, portfolio chart, holdings with sparklines and a slide-to-send flow.

Block · Pro · https://lodeui.com/blocks/crypto-wallet

## When to use

- Crypto and fintech apps.

## When not to use

- Trading with order books: use the trading terminal.

## Installation

```bash
npx shadcn@latest add @lode/crypto-wallet
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CryptoWallet } from "@/components/blocks/crypto-wallet";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <CryptoWallet />
    </main>
  );
}
```

Built from: Area chart, Dialog, Number ticker, Segmented control, Slide to confirm, Sparkline

## API reference

### CryptoWallet

A wallet with a hideable balance, quick actions, a portfolio chart with ranges, holdings with sparklines and a slide-to-send dialog. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach actions, ranges and holdings |
| Enter | Confirm send (on the slider handle) |

## Accessibility

- Hide balance is a toggle button; changes are text with ▲ / ▼, not only color.
- Send requires a deliberate slide or Enter.

## Motion

- The balance rolls; the chart morphs between ranges; actions press in.

## Responsive behavior

- Holdings move under the chart below 1024px.

## Performance

- Chart series are computed once per range.

## Notes for AI

- Fetch prices server-side and stream updates; never trust client prices for transfers.

## Related

- [Slide to confirm](https://lodeui.com/components/slide-to-confirm) — Drag the handle to the end to confirm a payment or action; Enter works too.
- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Payment card](https://lodeui.com/components/payment-card) — A wallet card with a holographic sheen that follows the pointer and a number reveal.
- [Trading terminal](https://lodeui.com/blocks/trading-terminal) — Live price, candlesticks, a watchlist with sparklines and an order ticket.