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/useAvailableSlots.ts

@@ -0,0 +1,97 @@
+import { useState, useEffect, useCallback } from "react";
+import { api } from "../../api";
+import { components } from "../../generated/api";
+import { formatDate } from "../../utils/date";
+
+type BookableSlot = components["schemas"]["BookableSlot"];
+type AvailableSlotsResponse = components["schemas"]["AvailableSlotsResponse"];
+
+interface UseAvailableSlotsOptions {
+  /** Whether the user is authenticated and authorized */
+  enabled?: boolean;
+  /** Dates to check availability for */
+  dates: Date[];
+  /** Current wizard step - only fetch when in booking or confirmation step */
+  wizardStep?: "details" | "booking" | "confirmation";
+}
+
+interface UseAvailableSlotsResult {
+  /** Available slots for the selected date */
+  availableSlots: BookableSlot[];
+  /** Set of date strings that have availability */
+  datesWithAvailability: Set<string>;
+  /** Whether slots are currently being loaded for a specific date */
+  isLoadingSlots: boolean;
+  /** Whether availability is being checked for all dates */
+  isLoadingAvailability: boolean;
+  /** Fetch slots for a specific date */
+  fetchSlots: (date: Date) => Promise<void>;
+}
+
+/**
+ * Hook for managing available slots and date availability.
+ * Fetches availability for all dates when entering booking/confirmation steps.
+ */
+export function useAvailableSlots(options: UseAvailableSlotsOptions): UseAvailableSlotsResult {
+  const { enabled = true, dates, wizardStep } = options;
+  const [availableSlots, setAvailableSlots] = useState<BookableSlot[]>([]);
+  const [datesWithAvailability, setDatesWithAvailability] = useState<Set<string>>(new Set());
+  const [isLoadingSlots, setIsLoadingSlots] = useState(false);
+  const [isLoadingAvailability, setIsLoadingAvailability] = useState(true);
+
+  const fetchSlots = useCallback(
+    async (date: Date) => {
+      if (!enabled) return;
+
+      setIsLoadingSlots(true);
+      setAvailableSlots([]);
+
+      try {
+        const dateStr = formatDate(date);
+        const data = await api.get<AvailableSlotsResponse>(`/api/exchange/slots?date=${dateStr}`);
+        setAvailableSlots(data.slots);
+      } catch (err) {
+        console.error("Failed to fetch slots:", err);
+      } finally {
+        setIsLoadingSlots(false);
+      }
+    },
+    [enabled]
+  );
+
+  // Fetch availability for all dates when entering booking or confirmation step
+  useEffect(() => {
+    if (!enabled || (wizardStep !== "booking" && wizardStep !== "confirmation")) return;
+
+    const fetchAllAvailability = async () => {
+      setIsLoadingAvailability(true);
+      const availabilitySet = new Set<string>();
+
+      const promises = dates.map(async (date) => {
+        try {
+          const dateStr = formatDate(date);
+          const data = await api.get<AvailableSlotsResponse>(`/api/exchange/slots?date=${dateStr}`);
+          if (data.slots.length > 0) {
+            availabilitySet.add(dateStr);
+          }
+        } catch (err) {
+          console.error(`Failed to fetch availability for ${formatDate(date)}:`, err);
+        }
+      });
+
+      await Promise.all(promises);
+      setDatesWithAvailability(availabilitySet);
+      setIsLoadingAvailability(false);
+    };
+
+    fetchAllAvailability();
+  }, [enabled, dates, wizardStep]);
+
+  return {
+    availableSlots,
+    datesWithAvailability,
+    isLoadingSlots,
+    isLoadingAvailability,
+    fetchSlots,
+  };
+}