v0 setup

curl -X GET "https://api.wallbit.io/api/public/v1/balance/checking" \
  -H "X-API-Key: $WALLBIT_API_KEY"

Create a React component that displays a user's checking account balance using the Wallbit API. 
The component should:
- Fetch balance from GET /api/public/v1/balance/checking
- Use X-API-Key header for authentication
- Display currency and balance amount
- Handle loading and error states
- Use Tailwind CSS for styling

Build a transaction history component that:
- Fetches from GET /api/public/v1/transactions
- Supports filtering by status, currency, and date range
- Shows transaction type, amount, and timestamp
- Includes pagination
- Uses the Wallbit API with X-API-Key authentication

Create a form component for executing stock trades via the Wallbit API:
- POST to /api/public/v1/trades
- Fields: symbol, direction (BUY/SELL), currency, order_type, amount
- Include validation and error handling
- Show success/error feedback
- Use X-API-Key header

const response = await fetch('https://api.wallbit.io/api/public/v1/balance/checking', {
  headers: { 'X-API-Key': process.env.NEXT_PUBLIC_WALLBIT_API_KEY }
});
const { data } = await response.json();
// data: [{ currency: "USD", balance: 1000.50 }]

const response = await fetch('https://api.wallbit.io/api/public/v1/trades', {
  method: 'POST',
  headers: {
    'X-API-Key': process.env.NEXT_PUBLIC_WALLBIT_API_KEY,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    symbol: 'AAPL',
    direction: 'BUY',
    currency: 'USD',
    order_type: 'MARKET',
    amount: 100.00
  })
});

const params = new URLSearchParams({
  status: 'COMPLETED',
  currency: 'USD',
  from_date: '2024-01-01',
  limit: '20'
});

const response = await fetch(
  `https://api.wallbit.io/api/public/v1/transactions?${params}`,
  { headers: { 'X-API-Key': process.env.NEXT_PUBLIC_WALLBIT_API_KEY } }
);

'use client';

import { useState, useEffect } from 'react';

export function BalanceDisplay() {
  const [balance, setBalance] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.wallbit.io/api/public/v1/balance/checking', {
      headers: { 'X-API-Key': process.env.NEXT_PUBLIC_WALLBIT_API_KEY }
    })
      .then(res => res.json())
      .then(data => {
        setBalance(data.data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {balance?.map(acc => (
        <div key={acc.currency}>
          {acc.currency}: ${acc.balance}
        </div>
      ))}
    </div>
  );
}

Create a beautiful, modern React dashboard for exploring a Wallbit account. The dashboard should have:

1. Header Section:
   - Total balance across all checking accounts (from GET /api/public/v1/balance/checking)
   - Quick stats: total portfolio value, today's gain/loss

2. Investment Portfolio Card:
   - Fetch from GET /api/public/v1/balance/stocks
   - Display positions in a table: Symbol, Shares, Current Value, Gain/Loss, % Change
   - Show total portfolio value at the top
   - Color-code gains (green) and losses (red)
   - Add a pie chart or bar chart showing asset allocation

3. Recent Transactions Card:
   - Fetch from GET /api/public/v1/transactions with limit=10
   - Show: Type, Amount, Currency, Status, Date
   - Filter buttons: All, Completed, Pending, Failed
   - Click to see more details

4. Quick Trade Card:
   - Form to execute trades (POST /api/public/v1/trades)
   - Symbol search/select dropdown
   - Buy/Sell toggle buttons
   - Amount input with currency selector
   - Order type: Market or Limit
   - Submit button with loading state
   - Success/error toast notifications

5. Account Balances Card:
   - Display all checking account balances
   - Show currency flag/icon
   - Format numbers with commas and decimals

Use the Wallbit API: https://api.wallbit.io
Authentication: Include X-API-Key header from NEXT_PUBLIC_WALLBIT_API_KEY

Design with:
- Tailwind CSS with a clean, professional look
- shadcn/ui components (Card, Table, Button, Input, Select, Toast)
- Dark mode support
- Responsive grid layout
- Loading skeletons
- Error states with retry buttons
- Smooth animations

Make it feel like a premium financial dashboard with proper spacing, typography, and visual hierarchy.