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.0,
  }),
});

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.