- Update all date/time formatting functions to use 'es-ES' locale instead of 'en-US' or 'de-DE'
- Update utility functions in utils/date.ts and utils/exchange.ts
- Update all component files that use date formatting
- Update e2e test helper to match new Spanish date format
- All formatting now uses Spanish locale regardless of selected language as per PR requirements
- Created new api/ directory with domain-specific API modules:
- api/client.ts: Base API client with error handling
- api/auth.ts: Authentication endpoints
- api/exchange.ts: Exchange/price endpoints
- api/trades.ts: User trade endpoints
- api/profile.ts: Profile management endpoints
- api/invites.ts: Invite endpoints
- api/admin.ts: Admin endpoints
- api/index.ts: Centralized exports
- Migrated all API calls from ad-hoc api.get/post/put to typed domain APIs
- Updated all imports across codebase
- Fixed test mocks to use new API structure
- Fixed type issues in validation utilities
- Removed old api.ts file
Benefits:
- Type-safe endpoints (no more string typos)
- Centralized API surface (easy to discover endpoints)
- Better organization (domain-specific modules)
- Uses generated OpenAPI types automatically
Break down the 1300+ line Exchange page into smaller, focused components:
- Create useExchangePrice hook
- Handles price fetching and auto-refresh logic
- Manages price loading and error states
- Centralizes price-related state management
- Create useAvailableSlots hook
- Manages slot fetching and availability checking
- Handles date availability state
- Fetches availability when entering booking/confirmation steps
- Create PriceDisplay component
- Displays market price, agreed price, and premium
- Shows price update timestamp and stale warnings
- Handles loading and error states
- Create ExchangeDetailsStep component
- Step 1 of wizard: direction, payment method, amount selection
- Contains all form logic for trade details
- Validates and displays trade summary
- Create BookingStep component
- Step 2 of wizard: date and slot selection
- Shows trade summary card
- Handles date availability and existing trade warnings
- Create ConfirmationStep component
- Step 3 of wizard: final confirmation
- Shows compressed booking summary
- Displays all trade details for review
- Create StepIndicator component
- Visual indicator of current wizard step
- Shows completed and active steps
- Refactor ExchangePage
- Reduced from 1300+ lines to ~350 lines
- Uses new hooks and components
- Maintains all existing functionality
- Improved maintainability and testability
All frontend tests pass. Linting passes.
Replace 'import React from "react"' with direct imports of
CSSProperties and ChangeEvent. This eliminates unused imports
and follows modern React patterns where the namespace import
is not required for JSX (React 17+).
- Fix E2E test assertion for buy/sell direction change
- Add data-testid to date buttons for reliable e2e selection
- Update e2e tests to use data-testid instead of fragile weekday matching
- Add tests for regular user cannot complete/no-show trades (COMPLETE_EXCHANGE permission)
- Create frontend/app/utils/exchange.ts with shared formatting functions
- Update exchange/page.tsx to use shared formatEur
- Update trades/page.tsx to use shared formatEur and getTradeStatusDisplay
- Update admin/trades/page.tsx to use shared formatEur and getTradeStatusDisplay
- SatsDisplay was already extracted (confirmed it's in components/SatsDisplay.tsx)
The agreed_price depends on trade direction (buy/sell) and must be
calculated on the frontend. Returning a buy-side-only agreed_price
from the API was misleading and unused.
Frontend already calculates the direction-aware price correctly.
- Updated auth-context.tsx to use new exchange permissions
(CREATE_EXCHANGE, VIEW_OWN_EXCHANGES, etc.) instead of old
appointment permissions (BOOK_APPOINTMENT, etc.)
- Updated exchange/page.tsx, trades/page.tsx, admin/trades/page.tsx
to use correct permission constants
- Updated profile/page.test.tsx mock permissions
- Updated admin/availability/page.tsx to use constants.exchange
instead of constants.booking
- Added /api/exchange/slots endpoint to return available slots
for a date, filtering out already booked slots
- Fixed E2E tests:
- exchange.spec.ts: Wait for button to be enabled before clicking
- permissions.spec.ts: Use more specific heading selector
- price-history.spec.ts: Expect /exchange redirect for regular users
New /exchange page for Bitcoin trading:
- Buy/Sell direction toggle with visual feedback
- Amount slider (€100-€3000 in €20 increments)
- Live price display with auto-refresh every 60s
- Direction-specific pricing (buy +5%, sell -5%)
- Sats amount displayed in BTC format (0.XX XXX XXX)
- Date selection with availability indicators
- Time slot selection grid
- Confirmation panel with trade summary
Regenerate frontend types from updated OpenAPI schema.
