feat: add BalanceBreakdown component with per-chain breakdown, Gateway tooltip, and in-motion indicator

[consumeobeydie]

Closes #8

Summary

This PR addresses the UX improvements requested in issue #8 by adding a new BalanceBreakdown component that replaces the plain balance display in wallet-dashboard.tsx.

Changes

New: components/balance-breakdown.tsx

A self-contained component that renders:

1. Per-chain USDC breakdown — visual bar chart showing each chain's wallet balance as a proportion of total wallet holdings, with chain-specific colors (Arc Testnet: blue, Base Sepolia: indigo, Avalanche Fuji: red)

2. Gateway tooltip — an Info icon next to "Unified USDC Balance" that explains how Gateway abstracts liquidity across chains, distinguishing between spendable (Gateway) and per-chain (wallet) balances

3. Unified balance bar — a horizontal bar showing the Gateway vs wallet proportion at a glance

4. Funds-in-motion indicator — an animated pulse indicator when a cross-chain transfer is in progress (burn submitted, mint pending), with a tooltip explaining the attestation flow. Accepts an optional pendingBalance prop.

Modified: components/wallet-dashboard.tsx

• Replaced the plain Gateway balance + wallet balance display with <BalanceBreakdown />
• Added import for the new component

Design decisions

• pendingBalance prop is optional (defaults to 0) — existing usage is unaffected
• No new dependencies; uses only existing shadcn/ui primitives (Tooltip, Info, Zap, Wallet from lucide-react)
• TypeScript strict — no new type errors introduced

Screenshots

Before: two plain text balance fields with a flat chain list
After: unified visual breakdown with tooltips, bar charts, and in-motion state