> ## Documentation Index > Fetch the complete documentation index at: https://developer.wallbit.io/docs/llms.txt > Use this file to discover all available pages before exploring further. # v0 setup > Configure v0 for Wallbit API development Use v0 to generate UI components that integrate with the Wallbit API. This guide shows how to configure v0 for better results when building interfaces for Wallbit API integrations. See [Example prompts](#using-v0-with-wallbit-api) for component-specific prompts. Jump to [Code Examples](#code-examples) for ready-to-use snippets. Copy the [Complete Dashboard Prompt](#complete-dashboard-prompt) to generate a full dashboard. ## Prerequisites * v0 account (Vercel v0) * Wallbit API key from your [dashboard](https://developer.wallbit.io/dashboard) ## Project context When using v0 to generate components that interact with the Wallbit API, include context about the API in your prompts. Here's what v0 should know: ## API Overview Wallbit is a global neobank and the world's first to offer a public API for programmatic account control. We offer US accounts, investments in ETFs, stocks and bonds, and local currency rails. The API allows you to: * Query account balances (checking and investment) * View transaction history * Execute trades (buy/sell stocks, ETFs, bonds) * Get bank account details for deposits (ACH/SEPA) * Retrieve crypto wallet addresses ## Authentication All requests require an `X-API-Key` header: ```bash theme={null} curl -X GET "https://api.wallbit.io/api/public/v1/balance/checking" \ -H "X-API-Key: $WALLBIT_API_KEY" ``` ## Available Endpoints ### Balance * `GET /api/public/v1/balance/checking` - Get checking account balance * `GET /api/public/v1/balance/stocks` - Get investment portfolio ### Transactions * `GET /api/public/v1/transactions` - List transactions with filters ### Trades * `POST /api/public/v1/trades` - Execute a buy/sell trade ### Account Details * `GET /api/public/v1/account-details` - Get bank account details (ACH/SEPA) ### Wallets * `GET /api/public/v1/wallets` - Get crypto wallet addresses ### Assets * `GET /api/public/v1/assets` - List available assets * `GET /api/public/v1/assets/{symbol}` - Get asset details ### Operations * `POST /api/public/v1/operations/internal` - Move funds between accounts ## Using v0 with Wallbit API ### Example prompts When generating components, include API context in your prompts: **Example 1: Balance display component** ``` 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 ``` **Example 2: Transaction list component** ``` 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 ``` **Example 3: Trade execution form** ``` 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 ``` ## Code Examples ### Fetch balance ```javascript theme={null} 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 }] ``` ### Execute a trade ```javascript theme={null} 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, }), }); ``` ### List transactions with filters ```javascript theme={null} 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 } }, ); ``` ## Error Handling Always handle these HTTP status codes: * `401` - Invalid or missing API key * `403` - Insufficient permissions * `412` - KYC incomplete or account locked * `422` - Validation error * `429` - Rate limit exceeded ## Best Practices for v0 Prompts * **Include API endpoint details**: Specify the exact endpoint and method (GET/POST) * **Mention authentication**: Always note that `X-API-Key` header is required * **Specify data structure**: Describe the expected request/response format * **Request error handling**: Ask for proper error state handling * **Use environment variables**: Request that API keys be stored in env vars * **Include loading states**: Ask for loading indicators during API calls ## Example Component Structure When generating components, v0 should create: ```javascript theme={null} "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
Loading...
; if (error) return
Error: {error}
; return (
{balance?.map((acc) => (
{acc.currency}: ${acc.balance}
))}
); } ``` ## Complete Dashboard Prompt Copy and paste this prompt to v0 to generate a complete Wallbit account dashboard: ``` 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. ``` ## Useful Cards Complete documentation for all Wallbit API endpoints. Create your API key in the Wallbit dashboard.