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 single actioningId state with a Set of IDs to properly
track multiple concurrent actions. This prevents issues when
a user rapidly clicks actions on different trades before the
previous action completes.
- Return errors from fetch functions instead of setting state directly
- Clear error state before starting a new fetch
- Combine errors when both upcoming and past trades fail to load
- Handle fetch errors in handleAction as well
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+).
Move duplicate style definitions from trades/page.tsx and
admin/trades/page.tsx to a new tradeCardStyles export in shared.ts.
Both pages now import and use these shared styles, keeping only
page-specific styles locally. This improves maintainability and
ensures visual consistency.
The exchange page is a two-step wizard:
- Step 1: Direction, amount, price selection
- Step 2: Date and slot selection
Tests were looking for date elements before navigating to step 2.
- 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
The auth tests expected '/' to show user email (old counter page).
Now regular users redirect to '/exchange' after login/signup.
Updated tests to:
- Expect /exchange URL after login/signup
- Check for 'Exchange Bitcoin' heading instead of email
- Update logout tests to verify /exchange access
- Update invite redirect tests for /exchange
New exchange.spec.ts with comprehensive E2E coverage:
- Exchange page access and UI elements (price, buy/sell, slider)
- Slot selection with availability
- Confirmation form with trade details
- Access control (regular user vs admin)
- My Trades page
- Admin Trades page with tabs
- Exchange API permission tests
New /admin/trades page for managing exchange trades:
- Upcoming trades tab with user contact info
- History tab with status/user search filters
- Complete/No-show/Cancel actions for admin
- Trade details: direction, amounts, rates, premium
Update navigation:
- Admin home redirects to /admin/trades
- Regular user home redirects to /exchange
- Header shows 'Trades' for admin
New /trades page for viewing user's Bitcoin trades:
- Upcoming trades with cancel functionality
- Trade history (completed, cancelled, no-show)
- Direction badges (BUY/SELL with colors)
- EUR ↔ BTC amounts in readable format
- Rate and premium display
Update Header navigation:
- Exchange replaces Book for regular users
- My Trades replaces Appointments
Update profile page test for new nav items.
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.
The POST /api/audit/price-history/fetch endpoint now requires
FETCH_PRICE permission instead of VIEW_AUDIT, which is more
semantically correct since it's a write operation.
Issue #7: Profile validation logic was embedded in page component.
Changes:
- Create utils/validation.ts with shared validation functions:
- validateEmail: email format validation
- validateTelegram: handle format with @ prefix
- validateSignal: username length validation
- validateNostrNpub: bech32 format validation
- validateProfileFields: combined validation
- Update profile/page.tsx to use shared validation
- Both frontend and backend now read validation rules from
shared/constants.json for consistency
Issue #3: The frontend Permission enum was manually duplicated from
the backend. While full generation isn't practical, this change
ties the frontend constants to the generated OpenAPI types for
compile-time validation.
Changes:
- Update ConstantsResponse schema to use actual Permission/InviteStatus
enums (enables OpenAPI to include enum values)
- Import enums in schemas.py (no circular dependency issue)
- Update auth-context.tsx to derive PermissionType from generated schema
- Update meta route to return enum instances instead of string values
- Permission values are now type-checked against the OpenAPI schema
If a permission is added to the backend but not to the frontend's
Permission object, TypeScript will fail to compile. This provides
a safety net without requiring a complex build-time generation step.
