Crypto walletPro
Wallet balance, portfolio chart, holdings with sparklines and a slide-to-send flow.
What's inside
- Hide balance
- Portfolio ranges
- Holdings with sparklines
- Slide to send
When to use
- Crypto and fintech apps.
When not to use
- Trading with order books: use the trading terminal.
Installation
Usage
Import it from @/components/blocks/crypto-wallet after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
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>
);
}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.
This page as Markdown, for assistants and coding agents:
/blocks/crypto-wallet/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt