refactor(frontend): break down large Exchange page component

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.

frontend/app/exchange/hooks/useExchangePrice.ts

@@ -0,0 +1,73 @@
+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,
+  };
+}