counterweight
6d0f125536
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.
73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
import { api } from "../../api";
|
|
import { components } from "../../generated/api";
|
|
|
|
type ExchangePriceResponse = components["schemas"]["ExchangePriceResponse"];
|
|
|
|
interface UseExchangePriceOptions {
|
|
/** Whether the user is authenticated and authorized */
|
|
enabled?: boolean;
|
|
/** Auto-refresh interval in milliseconds (default: 60000) */
|
|
refreshInterval?: number;
|
|
}
|
|
|
|
interface UseExchangePriceResult {
|
|
priceData: ExchangePriceResponse | null;
|
|
isLoading: boolean;
|
|
error: string | null;
|
|
lastUpdate: Date | null;
|
|
refetch: () => Promise<void>;
|
|
}
|
|
|
|
/**
|
|
* Hook for fetching and managing exchange price data.
|
|
* Automatically refreshes price data at specified intervals.
|
|
*/
|
|
export function useExchangePrice(options: UseExchangePriceOptions = {}): UseExchangePriceResult {
|
|
const { enabled = true, refreshInterval = 60000 } = options;
|
|
const [priceData, setPriceData] = useState<ExchangePriceResponse | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
|
|
|
|
const fetchPrice = useCallback(async () => {
|
|
if (!enabled) return;
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const data = await api.get<ExchangePriceResponse>("/api/exchange/price");
|
|
setPriceData(data);
|
|
setLastUpdate(new Date());
|
|
|
|
if (data.error) {
|
|
setError(data.error);
|
|
}
|
|
if (data.price?.is_stale) {
|
|
setError("Price is stale. Trade booking may be blocked.");
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to fetch price:", err);
|
|
setError("Failed to load price data");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [enabled]);
|
|
|
|
useEffect(() => {
|
|
if (!enabled) return;
|
|
|
|
fetchPrice();
|
|
const interval = setInterval(fetchPrice, refreshInterval);
|
|
return () => clearInterval(interval);
|
|
}, [enabled, fetchPrice, refreshInterval]);
|
|
|
|
return {
|
|
priceData,
|
|
isLoading,
|
|
error,
|
|
lastUpdate,
|
|
refetch: fetchPrice,
|
|
};
|
|
}
|