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.
This commit is contained in:
parent
3beb23a765
commit
6d0f125536
GPG key ID:
883EDBAA726BD96C
8 changed files with 1490 additions and 1055 deletions
347
frontend/app/exchange/components/BookingStep.tsx
Normal file
347
frontend/app/exchange/components/BookingStep.tsx
Normal file
|
|
@ -0,0 +1,347 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { CSSProperties } from "react";
|
||||||
|
import { SatsDisplay } from "../../components/SatsDisplay";
|
||||||
|
import { components } from "../../generated/api";
|
||||||
|
import { formatDate, formatTime } from "../../utils/date";
|
||||||
|
import { formatEur } from "../../utils/exchange";
|
||||||
|
import { bannerStyles } from "../../styles/shared";
|
||||||
|
|
||||||
|
type BookableSlot = components["schemas"]["BookableSlot"];
|
||||||
|
type ExchangeResponse = components["schemas"]["ExchangeResponse"];
|
||||||
|
type Direction = "buy" | "sell";
|
||||||
|
type BitcoinTransferMethod = "onchain" | "lightning";
|
||||||
|
|
||||||
|
interface BookingStepProps {
|
||||||
|
direction: Direction;
|
||||||
|
bitcoinTransferMethod: BitcoinTransferMethod;
|
||||||
|
eurAmount: number;
|
||||||
|
satsAmount: number;
|
||||||
|
dates: Date[];
|
||||||
|
selectedDate: Date | null;
|
||||||
|
availableSlots: BookableSlot[];
|
||||||
|
selectedSlot: BookableSlot | null;
|
||||||
|
datesWithAvailability: Set<string>;
|
||||||
|
isLoadingSlots: boolean;
|
||||||
|
isLoadingAvailability: boolean;
|
||||||
|
existingTradeOnSelectedDate: ExchangeResponse | null;
|
||||||
|
userTrades: ExchangeResponse[];
|
||||||
|
onDateSelect: (date: Date) => void;
|
||||||
|
onSlotSelect: (slot: BookableSlot) => void;
|
||||||
|
onBackToDetails: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles: Record<string, CSSProperties> = {
|
||||||
|
summaryCard: {
|
||||||
|
background: "rgba(255, 255, 255, 0.03)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||||
|
borderRadius: "12px",
|
||||||
|
padding: "1rem 1.5rem",
|
||||||
|
marginBottom: "1.5rem",
|
||||||
|
},
|
||||||
|
summaryHeader: {
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
marginBottom: "0.5rem",
|
||||||
|
},
|
||||||
|
summaryTitle: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
color: "rgba(255, 255, 255, 0.5)",
|
||||||
|
},
|
||||||
|
editButton: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
color: "#a78bfa",
|
||||||
|
background: "transparent",
|
||||||
|
border: "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
padding: 0,
|
||||||
|
},
|
||||||
|
summaryDetails: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.75rem",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "1rem",
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
summaryDirection: {
|
||||||
|
fontWeight: 600,
|
||||||
|
},
|
||||||
|
summaryDivider: {
|
||||||
|
color: "rgba(255, 255, 255, 0.3)",
|
||||||
|
},
|
||||||
|
summaryPaymentMethod: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
color: "rgba(255, 255, 255, 0.6)",
|
||||||
|
},
|
||||||
|
satsValue: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
color: "#f7931a", // Bitcoin orange
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
marginBottom: "2rem",
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "1.1rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
color: "#fff",
|
||||||
|
marginBottom: "1rem",
|
||||||
|
},
|
||||||
|
dateGrid: {
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
gap: "0.5rem",
|
||||||
|
},
|
||||||
|
dateButton: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
padding: "0.75rem 1rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.03)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||||
|
borderRadius: "10px",
|
||||||
|
cursor: "pointer",
|
||||||
|
minWidth: "90px",
|
||||||
|
textAlign: "center" as const,
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
dateButtonSelected: {
|
||||||
|
background: "rgba(167, 139, 250, 0.15)",
|
||||||
|
border: "1px solid #a78bfa",
|
||||||
|
},
|
||||||
|
dateButtonDisabled: {
|
||||||
|
opacity: 0.4,
|
||||||
|
cursor: "not-allowed",
|
||||||
|
background: "rgba(255, 255, 255, 0.01)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.04)",
|
||||||
|
},
|
||||||
|
dateButtonHasTrade: {
|
||||||
|
border: "1px solid rgba(251, 146, 60, 0.5)",
|
||||||
|
background: "rgba(251, 146, 60, 0.1)",
|
||||||
|
},
|
||||||
|
dateWeekday: {
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
marginBottom: "0.25rem",
|
||||||
|
},
|
||||||
|
dateDay: {
|
||||||
|
color: "rgba(255, 255, 255, 0.5)",
|
||||||
|
fontSize: "0.8rem",
|
||||||
|
},
|
||||||
|
dateWarning: {
|
||||||
|
fontSize: "0.7rem",
|
||||||
|
marginTop: "0.25rem",
|
||||||
|
opacity: 0.8,
|
||||||
|
},
|
||||||
|
errorLink: {
|
||||||
|
marginTop: "0.75rem",
|
||||||
|
paddingTop: "0.75rem",
|
||||||
|
borderTop: "1px solid rgba(255, 255, 255, 0.1)",
|
||||||
|
},
|
||||||
|
errorLinkAnchor: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "#a78bfa",
|
||||||
|
textDecoration: "none",
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
},
|
||||||
|
slotGrid: {
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
gap: "0.5rem",
|
||||||
|
},
|
||||||
|
slotButton: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
padding: "0.6rem 1.25rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.03)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||||
|
borderRadius: "8px",
|
||||||
|
color: "#fff",
|
||||||
|
cursor: "pointer",
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
slotButtonSelected: {
|
||||||
|
background: "rgba(167, 139, 250, 0.15)",
|
||||||
|
border: "1px solid #a78bfa",
|
||||||
|
},
|
||||||
|
emptyState: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "rgba(255, 255, 255, 0.4)",
|
||||||
|
padding: "1rem 0",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if a date has an existing trade (only consider booked trades, not cancelled ones)
|
||||||
|
*/
|
||||||
|
function getExistingTradeOnDate(
|
||||||
|
date: Date,
|
||||||
|
userTrades: ExchangeResponse[]
|
||||||
|
): ExchangeResponse | null {
|
||||||
|
const dateStr = formatDate(date);
|
||||||
|
return (
|
||||||
|
userTrades.find((trade) => {
|
||||||
|
const tradeDate = formatDate(new Date(trade.slot_start));
|
||||||
|
return tradeDate === dateStr && trade.status === "booked";
|
||||||
|
}) || null
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Step 2 of the exchange wizard: Booking
|
||||||
|
* Allows user to select a date and time slot for the exchange.
|
||||||
|
*/
|
||||||
|
export function BookingStep({
|
||||||
|
direction,
|
||||||
|
bitcoinTransferMethod,
|
||||||
|
eurAmount,
|
||||||
|
satsAmount,
|
||||||
|
dates,
|
||||||
|
selectedDate,
|
||||||
|
availableSlots,
|
||||||
|
selectedSlot,
|
||||||
|
datesWithAvailability,
|
||||||
|
isLoadingSlots,
|
||||||
|
isLoadingAvailability,
|
||||||
|
existingTradeOnSelectedDate,
|
||||||
|
userTrades,
|
||||||
|
onDateSelect,
|
||||||
|
onSlotSelect,
|
||||||
|
onBackToDetails,
|
||||||
|
}: BookingStepProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Trade Summary Card */}
|
||||||
|
<div style={styles.summaryCard}>
|
||||||
|
<div style={styles.summaryHeader}>
|
||||||
|
<span style={styles.summaryTitle}>Your Exchange</span>
|
||||||
|
<button onClick={onBackToDetails} style={styles.editButton}>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div style={styles.summaryDetails}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
...styles.summaryDirection,
|
||||||
|
color: direction === "buy" ? "#4ade80" : "#f87171",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{direction === "buy" ? "Buy" : "Sell"} BTC
|
||||||
|
</span>
|
||||||
|
<span style={styles.summaryDivider}>•</span>
|
||||||
|
<span>{formatEur(eurAmount)}</span>
|
||||||
|
<span style={styles.summaryDivider}>↔</span>
|
||||||
|
<span style={styles.satsValue}>
|
||||||
|
<SatsDisplay sats={satsAmount} />
|
||||||
|
</span>
|
||||||
|
<span style={styles.summaryDivider}>•</span>
|
||||||
|
<span style={styles.summaryPaymentMethod}>
|
||||||
|
{direction === "buy" ? "Receive via " : "Send via "}
|
||||||
|
{bitcoinTransferMethod === "onchain" ? "Onchain" : "Lightning"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date Selection */}
|
||||||
|
<div style={styles.section}>
|
||||||
|
<h2 style={styles.sectionTitle}>Select a Date</h2>
|
||||||
|
<div style={styles.dateGrid}>
|
||||||
|
{dates.map((date) => {
|
||||||
|
const dateStr = formatDate(date);
|
||||||
|
const isSelected = selectedDate && formatDate(selectedDate) === dateStr;
|
||||||
|
const hasAvailability = datesWithAvailability.has(dateStr);
|
||||||
|
const isDisabled = !hasAvailability || isLoadingAvailability;
|
||||||
|
const hasExistingTrade = getExistingTradeOnDate(date, userTrades) !== null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={dateStr}
|
||||||
|
data-testid={`date-${dateStr}`}
|
||||||
|
onClick={() => onDateSelect(date)}
|
||||||
|
disabled={isDisabled}
|
||||||
|
style={{
|
||||||
|
...styles.dateButton,
|
||||||
|
...(isSelected ? styles.dateButtonSelected : {}),
|
||||||
|
...(isDisabled ? styles.dateButtonDisabled : {}),
|
||||||
|
...(hasExistingTrade && !isDisabled ? styles.dateButtonHasTrade : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={styles.dateWeekday}>
|
||||||
|
{date.toLocaleDateString("en-US", { weekday: "short" })}
|
||||||
|
</div>
|
||||||
|
<div style={styles.dateDay}>
|
||||||
|
{date.toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
{hasExistingTrade && !isDisabled && <div style={styles.dateWarning}>⚠️</div>}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Warning for existing trade on selected date */}
|
||||||
|
{existingTradeOnSelectedDate && (
|
||||||
|
<div style={bannerStyles.errorBanner}>
|
||||||
|
<div>
|
||||||
|
You already have a trade booked on this day. You can only book one trade per day.
|
||||||
|
</div>
|
||||||
|
<div style={styles.errorLink}>
|
||||||
|
<a
|
||||||
|
href={`/trades/${existingTradeOnSelectedDate.public_id}`}
|
||||||
|
style={styles.errorLinkAnchor}
|
||||||
|
>
|
||||||
|
View your existing trade →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Available Slots */}
|
||||||
|
{selectedDate && !existingTradeOnSelectedDate && (
|
||||||
|
<div style={styles.section}>
|
||||||
|
<h2 style={styles.sectionTitle}>
|
||||||
|
Available Slots for{" "}
|
||||||
|
{selectedDate.toLocaleDateString("en-US", {
|
||||||
|
weekday: "long",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
})}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{isLoadingSlots ? (
|
||||||
|
<div style={styles.emptyState}>Loading slots...</div>
|
||||||
|
) : availableSlots.length === 0 ? (
|
||||||
|
<div style={styles.emptyState}>No available slots for this date</div>
|
||||||
|
) : (
|
||||||
|
<div style={styles.slotGrid}>
|
||||||
|
{availableSlots.map((slot) => {
|
||||||
|
const isSelected = selectedSlot?.start_time === slot.start_time;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={slot.start_time}
|
||||||
|
onClick={() => onSlotSelect(slot)}
|
||||||
|
style={{
|
||||||
|
...styles.slotButton,
|
||||||
|
...(isSelected ? styles.slotButtonSelected : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{formatTime(slot.start_time)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
252
frontend/app/exchange/components/ConfirmationStep.tsx
Normal file
252
frontend/app/exchange/components/ConfirmationStep.tsx
Normal file
|
|
@ -0,0 +1,252 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { CSSProperties } from "react";
|
||||||
|
import { SatsDisplay } from "../../components/SatsDisplay";
|
||||||
|
import { components } from "../../generated/api";
|
||||||
|
import { formatTime } from "../../utils/date";
|
||||||
|
import { formatEur } from "../../utils/exchange";
|
||||||
|
import { buttonStyles } from "../../styles/shared";
|
||||||
|
|
||||||
|
type BookableSlot = components["schemas"]["BookableSlot"];
|
||||||
|
type Direction = "buy" | "sell";
|
||||||
|
type BitcoinTransferMethod = "onchain" | "lightning";
|
||||||
|
|
||||||
|
interface ConfirmationStepProps {
|
||||||
|
selectedSlot: BookableSlot;
|
||||||
|
selectedDate: Date | null;
|
||||||
|
direction: Direction;
|
||||||
|
bitcoinTransferMethod: BitcoinTransferMethod;
|
||||||
|
eurAmount: number;
|
||||||
|
satsAmount: number;
|
||||||
|
agreedPrice: number;
|
||||||
|
isBooking: boolean;
|
||||||
|
isPriceStale: boolean;
|
||||||
|
onConfirm: () => void;
|
||||||
|
onBack: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format price for display
|
||||||
|
*/
|
||||||
|
function formatPrice(price: number): string {
|
||||||
|
return `€${price.toLocaleString("de-DE", { maximumFractionDigits: 0 })}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles: Record<string, CSSProperties> = {
|
||||||
|
confirmCard: {
|
||||||
|
background: "rgba(255, 255, 255, 0.03)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||||
|
borderRadius: "12px",
|
||||||
|
padding: "1.5rem",
|
||||||
|
maxWidth: "400px",
|
||||||
|
},
|
||||||
|
confirmTitle: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "1.1rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
color: "#fff",
|
||||||
|
marginBottom: "1rem",
|
||||||
|
},
|
||||||
|
confirmDetails: {
|
||||||
|
marginBottom: "1.5rem",
|
||||||
|
},
|
||||||
|
confirmRow: {
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
padding: "0.5rem 0",
|
||||||
|
borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
|
||||||
|
},
|
||||||
|
confirmLabel: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "rgba(255, 255, 255, 0.5)",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
},
|
||||||
|
confirmValue: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
},
|
||||||
|
satsValue: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
color: "#f7931a", // Bitcoin orange
|
||||||
|
},
|
||||||
|
buttonRow: {
|
||||||
|
display: "flex",
|
||||||
|
gap: "0.75rem",
|
||||||
|
},
|
||||||
|
bookButton: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
flex: 1,
|
||||||
|
padding: "0.875rem",
|
||||||
|
border: "none",
|
||||||
|
borderRadius: "8px",
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: 600,
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
cancelButton: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
padding: "0.875rem 1.25rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.05)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||||
|
borderRadius: "8px",
|
||||||
|
color: "rgba(255, 255, 255, 0.7)",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
compressedBookingCard: {
|
||||||
|
background: "rgba(255, 255, 255, 0.03)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||||
|
borderRadius: "12px",
|
||||||
|
padding: "1rem 1.5rem",
|
||||||
|
marginBottom: "1.5rem",
|
||||||
|
},
|
||||||
|
compressedBookingHeader: {
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
marginBottom: "0.5rem",
|
||||||
|
},
|
||||||
|
compressedBookingTitle: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
color: "rgba(255, 255, 255, 0.5)",
|
||||||
|
},
|
||||||
|
compressedBookingDetails: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.75rem",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "1rem",
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
summaryDivider: {
|
||||||
|
color: "rgba(255, 255, 255, 0.3)",
|
||||||
|
},
|
||||||
|
editButton: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
color: "#a78bfa",
|
||||||
|
background: "transparent",
|
||||||
|
border: "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
padding: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Step 3 of the exchange wizard: Confirmation
|
||||||
|
* Shows compressed booking summary and final confirmation form.
|
||||||
|
*/
|
||||||
|
export function ConfirmationStep({
|
||||||
|
selectedSlot,
|
||||||
|
selectedDate,
|
||||||
|
direction,
|
||||||
|
bitcoinTransferMethod,
|
||||||
|
eurAmount,
|
||||||
|
satsAmount,
|
||||||
|
agreedPrice,
|
||||||
|
isBooking,
|
||||||
|
isPriceStale,
|
||||||
|
onConfirm,
|
||||||
|
onBack,
|
||||||
|
}: ConfirmationStepProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Compressed Booking Summary */}
|
||||||
|
<div style={styles.compressedBookingCard}>
|
||||||
|
<div style={styles.compressedBookingHeader}>
|
||||||
|
<span style={styles.compressedBookingTitle}>Appointment</span>
|
||||||
|
<button onClick={onBack} style={styles.editButton}>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div style={styles.compressedBookingDetails}>
|
||||||
|
<span>
|
||||||
|
{selectedDate?.toLocaleDateString("en-US", {
|
||||||
|
weekday: "short",
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
<span style={styles.summaryDivider}>•</span>
|
||||||
|
<span>
|
||||||
|
{formatTime(selectedSlot.start_time)} - {formatTime(selectedSlot.end_time)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Confirmation Card */}
|
||||||
|
<div style={styles.confirmCard}>
|
||||||
|
<h3 style={styles.confirmTitle}>Confirm Trade</h3>
|
||||||
|
<div style={styles.confirmDetails}>
|
||||||
|
<div style={styles.confirmRow}>
|
||||||
|
<span style={styles.confirmLabel}>Time:</span>
|
||||||
|
<span style={styles.confirmValue}>
|
||||||
|
{formatTime(selectedSlot.start_time)} - {formatTime(selectedSlot.end_time)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={styles.confirmRow}>
|
||||||
|
<span style={styles.confirmLabel}>Direction:</span>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
...styles.confirmValue,
|
||||||
|
color: direction === "buy" ? "#4ade80" : "#f87171",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{direction === "buy" ? "Buy BTC" : "Sell BTC"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={styles.confirmRow}>
|
||||||
|
<span style={styles.confirmLabel}>EUR:</span>
|
||||||
|
<span style={styles.confirmValue}>{formatEur(eurAmount)}</span>
|
||||||
|
</div>
|
||||||
|
<div style={styles.confirmRow}>
|
||||||
|
<span style={styles.confirmLabel}>BTC:</span>
|
||||||
|
<span style={{ ...styles.confirmValue, ...styles.satsValue }}>
|
||||||
|
<SatsDisplay sats={satsAmount} />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={styles.confirmRow}>
|
||||||
|
<span style={styles.confirmLabel}>Rate:</span>
|
||||||
|
<span style={styles.confirmValue}>{formatPrice(agreedPrice)}/BTC</span>
|
||||||
|
</div>
|
||||||
|
<div style={styles.confirmRow}>
|
||||||
|
<span style={styles.confirmLabel}>Payment:</span>
|
||||||
|
<span style={styles.confirmValue}>
|
||||||
|
{direction === "buy" ? "Receive via " : "Send via "}
|
||||||
|
{bitcoinTransferMethod === "onchain" ? "Onchain" : "Lightning"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={styles.buttonRow}>
|
||||||
|
<button
|
||||||
|
onClick={onConfirm}
|
||||||
|
disabled={isBooking || isPriceStale}
|
||||||
|
style={{
|
||||||
|
...styles.bookButton,
|
||||||
|
background:
|
||||||
|
direction === "buy"
|
||||||
|
? "linear-gradient(135deg, #4ade80 0%, #22c55e 100%)"
|
||||||
|
: "linear-gradient(135deg, #f87171 0%, #ef4444 100%)",
|
||||||
|
...(isBooking || isPriceStale ? buttonStyles.buttonDisabled : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isBooking
|
||||||
|
? "Booking..."
|
||||||
|
: isPriceStale
|
||||||
|
? "Price Stale"
|
||||||
|
: `Confirm ${direction === "buy" ? "Buy" : "Sell"}`}
|
||||||
|
</button>
|
||||||
|
<button onClick={onBack} disabled={isBooking} style={styles.cancelButton}>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
377
frontend/app/exchange/components/ExchangeDetailsStep.tsx
Normal file
377
frontend/app/exchange/components/ExchangeDetailsStep.tsx
Normal file
|
|
@ -0,0 +1,377 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ChangeEvent, CSSProperties } from "react";
|
||||||
|
import { SatsDisplay } from "../../components/SatsDisplay";
|
||||||
|
import { formatEur } from "../../utils/exchange";
|
||||||
|
import { buttonStyles } from "../../styles/shared";
|
||||||
|
import constants from "../../../../shared/constants.json";
|
||||||
|
|
||||||
|
const { lightningMaxEur: LIGHTNING_MAX_EUR } = constants.exchange;
|
||||||
|
|
||||||
|
type Direction = "buy" | "sell";
|
||||||
|
type BitcoinTransferMethod = "onchain" | "lightning";
|
||||||
|
|
||||||
|
interface ExchangeDetailsStepProps {
|
||||||
|
direction: Direction;
|
||||||
|
onDirectionChange: (direction: Direction) => void;
|
||||||
|
bitcoinTransferMethod: BitcoinTransferMethod;
|
||||||
|
onBitcoinTransferMethodChange: (method: BitcoinTransferMethod) => void;
|
||||||
|
eurAmount: number;
|
||||||
|
onEurAmountChange: (amount: number) => void;
|
||||||
|
satsAmount: number;
|
||||||
|
eurMin: number;
|
||||||
|
eurMax: number;
|
||||||
|
eurIncrement: number;
|
||||||
|
isPriceStale: boolean;
|
||||||
|
hasPrice: boolean;
|
||||||
|
onContinue: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles: Record<string, CSSProperties> = {
|
||||||
|
tradeCard: {
|
||||||
|
background: "rgba(255, 255, 255, 0.03)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||||
|
borderRadius: "12px",
|
||||||
|
padding: "1.5rem",
|
||||||
|
marginBottom: "2rem",
|
||||||
|
},
|
||||||
|
directionRow: {
|
||||||
|
display: "flex",
|
||||||
|
gap: "0.5rem",
|
||||||
|
marginBottom: "1.5rem",
|
||||||
|
},
|
||||||
|
directionBtn: {
|
||||||
|
flex: 1,
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "1rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
padding: "0.875rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.05)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||||
|
borderRadius: "8px",
|
||||||
|
color: "rgba(255, 255, 255, 0.6)",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
directionBtnBuyActive: {
|
||||||
|
background: "rgba(74, 222, 128, 0.15)",
|
||||||
|
border: "1px solid #4ade80",
|
||||||
|
color: "#4ade80",
|
||||||
|
},
|
||||||
|
directionBtnSellActive: {
|
||||||
|
background: "rgba(248, 113, 113, 0.15)",
|
||||||
|
border: "1px solid #f87171",
|
||||||
|
color: "#f87171",
|
||||||
|
},
|
||||||
|
paymentMethodSection: {
|
||||||
|
marginBottom: "1.5rem",
|
||||||
|
},
|
||||||
|
paymentMethodLabel: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "rgba(255, 255, 255, 0.7)",
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
marginBottom: "0.75rem",
|
||||||
|
},
|
||||||
|
required: {
|
||||||
|
color: "#f87171",
|
||||||
|
},
|
||||||
|
paymentMethodRow: {
|
||||||
|
display: "flex",
|
||||||
|
gap: "0.5rem",
|
||||||
|
},
|
||||||
|
paymentMethodBtn: {
|
||||||
|
flex: 1,
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.95rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
padding: "0.875rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.05)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||||
|
borderRadius: "8px",
|
||||||
|
color: "rgba(255, 255, 255, 0.6)",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
gap: "0.5rem",
|
||||||
|
},
|
||||||
|
paymentMethodBtnActive: {
|
||||||
|
background: "rgba(167, 139, 250, 0.15)",
|
||||||
|
border: "1px solid #a78bfa",
|
||||||
|
color: "#a78bfa",
|
||||||
|
},
|
||||||
|
paymentMethodBtnDisabled: {
|
||||||
|
opacity: 0.4,
|
||||||
|
cursor: "not-allowed",
|
||||||
|
},
|
||||||
|
paymentMethodIcon: {
|
||||||
|
fontSize: "1.2rem",
|
||||||
|
},
|
||||||
|
thresholdMessage: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
color: "rgba(251, 146, 60, 0.9)",
|
||||||
|
marginTop: "0.5rem",
|
||||||
|
padding: "0.5rem",
|
||||||
|
background: "rgba(251, 146, 60, 0.1)",
|
||||||
|
borderRadius: "6px",
|
||||||
|
border: "1px solid rgba(251, 146, 60, 0.2)",
|
||||||
|
},
|
||||||
|
amountSection: {
|
||||||
|
marginBottom: "1.5rem",
|
||||||
|
},
|
||||||
|
amountHeader: {
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
marginBottom: "0.75rem",
|
||||||
|
},
|
||||||
|
amountLabel: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "rgba(255, 255, 255, 0.7)",
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
},
|
||||||
|
amountInputWrapper: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
background: "rgba(255, 255, 255, 0.05)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||||
|
borderRadius: "8px",
|
||||||
|
padding: "0.5rem 0.75rem",
|
||||||
|
},
|
||||||
|
amountCurrency: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
color: "rgba(255, 255, 255, 0.5)",
|
||||||
|
fontSize: "1rem",
|
||||||
|
marginRight: "0.25rem",
|
||||||
|
},
|
||||||
|
amountInput: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
fontSize: "1.25rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "#fff",
|
||||||
|
background: "transparent",
|
||||||
|
border: "none",
|
||||||
|
outline: "none",
|
||||||
|
width: "80px",
|
||||||
|
textAlign: "right" as const,
|
||||||
|
},
|
||||||
|
slider: {
|
||||||
|
width: "100%",
|
||||||
|
height: "8px",
|
||||||
|
appearance: "none" as const,
|
||||||
|
background: "rgba(255, 255, 255, 0.1)",
|
||||||
|
borderRadius: "4px",
|
||||||
|
outline: "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
},
|
||||||
|
amountRange: {
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
marginTop: "0.5rem",
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
color: "rgba(255, 255, 255, 0.4)",
|
||||||
|
},
|
||||||
|
tradeSummary: {
|
||||||
|
background: "rgba(255, 255, 255, 0.02)",
|
||||||
|
borderRadius: "8px",
|
||||||
|
padding: "1rem",
|
||||||
|
textAlign: "center" as const,
|
||||||
|
marginBottom: "1.5rem",
|
||||||
|
},
|
||||||
|
summaryText: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "rgba(255, 255, 255, 0.8)",
|
||||||
|
fontSize: "0.95rem",
|
||||||
|
margin: 0,
|
||||||
|
},
|
||||||
|
satsValue: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
color: "#f7931a", // Bitcoin orange
|
||||||
|
},
|
||||||
|
continueButton: {
|
||||||
|
width: "100%",
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "1rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
padding: "0.875rem",
|
||||||
|
background: "linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%)",
|
||||||
|
border: "none",
|
||||||
|
borderRadius: "8px",
|
||||||
|
color: "#fff",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Step 1 of the exchange wizard: Exchange Details
|
||||||
|
* Allows user to select direction (buy/sell), payment method, and amount.
|
||||||
|
*/
|
||||||
|
export function ExchangeDetailsStep({
|
||||||
|
direction,
|
||||||
|
onDirectionChange,
|
||||||
|
bitcoinTransferMethod,
|
||||||
|
onBitcoinTransferMethodChange,
|
||||||
|
eurAmount,
|
||||||
|
onEurAmountChange,
|
||||||
|
satsAmount,
|
||||||
|
eurMin,
|
||||||
|
eurMax,
|
||||||
|
eurIncrement,
|
||||||
|
isPriceStale,
|
||||||
|
hasPrice,
|
||||||
|
onContinue,
|
||||||
|
}: ExchangeDetailsStepProps) {
|
||||||
|
const isLightningDisabled = eurAmount > LIGHTNING_MAX_EUR * 100;
|
||||||
|
|
||||||
|
const handleAmountChange = (value: number) => {
|
||||||
|
// Clamp to valid range and snap to increment
|
||||||
|
const minCents = eurMin * 100;
|
||||||
|
const maxCents = eurMax * 100;
|
||||||
|
const incrementCents = eurIncrement * 100;
|
||||||
|
|
||||||
|
// Clamp value
|
||||||
|
let clamped = Math.max(minCents, Math.min(maxCents, value));
|
||||||
|
|
||||||
|
// Snap to nearest increment
|
||||||
|
clamped = Math.round(clamped / incrementCents) * incrementCents;
|
||||||
|
|
||||||
|
onEurAmountChange(clamped);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAmountInputChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const inputValue = e.target.value.replace(/[^0-9]/g, "");
|
||||||
|
if (inputValue === "") {
|
||||||
|
onEurAmountChange(eurMin * 100);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const eurValue = parseInt(inputValue, 10);
|
||||||
|
handleAmountChange(eurValue * 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={styles.tradeCard}>
|
||||||
|
{/* Direction Selector */}
|
||||||
|
<div style={styles.directionRow}>
|
||||||
|
<button
|
||||||
|
onClick={() => onDirectionChange("buy")}
|
||||||
|
style={{
|
||||||
|
...styles.directionBtn,
|
||||||
|
...(direction === "buy" ? styles.directionBtnBuyActive : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Buy BTC
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => onDirectionChange("sell")}
|
||||||
|
style={{
|
||||||
|
...styles.directionBtn,
|
||||||
|
...(direction === "sell" ? styles.directionBtnSellActive : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Sell BTC
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Payment Method Selector */}
|
||||||
|
<div style={styles.paymentMethodSection}>
|
||||||
|
<div style={styles.paymentMethodLabel}>
|
||||||
|
Payment Method <span style={styles.required}>*</span>
|
||||||
|
</div>
|
||||||
|
<div style={styles.paymentMethodRow}>
|
||||||
|
<button
|
||||||
|
onClick={() => onBitcoinTransferMethodChange("onchain")}
|
||||||
|
style={{
|
||||||
|
...styles.paymentMethodBtn,
|
||||||
|
...(bitcoinTransferMethod === "onchain" ? styles.paymentMethodBtnActive : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={styles.paymentMethodIcon}>🔗</span>
|
||||||
|
<span>Onchain</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => onBitcoinTransferMethodChange("lightning")}
|
||||||
|
disabled={isLightningDisabled}
|
||||||
|
style={{
|
||||||
|
...styles.paymentMethodBtn,
|
||||||
|
...(bitcoinTransferMethod === "lightning" ? styles.paymentMethodBtnActive : {}),
|
||||||
|
...(isLightningDisabled ? styles.paymentMethodBtnDisabled : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={styles.paymentMethodIcon}>⚡</span>
|
||||||
|
<span>Lightning</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{isLightningDisabled && (
|
||||||
|
<div style={styles.thresholdMessage}>
|
||||||
|
Lightning payments are only available for amounts up to €{LIGHTNING_MAX_EUR}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Amount Section */}
|
||||||
|
<div style={styles.amountSection}>
|
||||||
|
<div style={styles.amountHeader}>
|
||||||
|
<span style={styles.amountLabel}>Amount (EUR)</span>
|
||||||
|
<div style={styles.amountInputWrapper}>
|
||||||
|
<span style={styles.amountCurrency}>€</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={Math.round(eurAmount / 100)}
|
||||||
|
onChange={handleAmountInputChange}
|
||||||
|
style={styles.amountInput}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min={eurMin * 100}
|
||||||
|
max={eurMax * 100}
|
||||||
|
step={eurIncrement * 100}
|
||||||
|
value={eurAmount}
|
||||||
|
onChange={(e) => onEurAmountChange(Number(e.target.value))}
|
||||||
|
style={styles.slider}
|
||||||
|
/>
|
||||||
|
<div style={styles.amountRange}>
|
||||||
|
<span>{formatEur(eurMin * 100)}</span>
|
||||||
|
<span>{formatEur(eurMax * 100)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trade Summary */}
|
||||||
|
<div style={styles.tradeSummary}>
|
||||||
|
{direction === "buy" ? (
|
||||||
|
<p style={styles.summaryText}>
|
||||||
|
You buy{" "}
|
||||||
|
<strong style={styles.satsValue}>
|
||||||
|
<SatsDisplay sats={satsAmount} />
|
||||||
|
</strong>
|
||||||
|
, you sell <strong>{formatEur(eurAmount)}</strong>
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p style={styles.summaryText}>
|
||||||
|
You buy <strong>{formatEur(eurAmount)}</strong>, you sell{" "}
|
||||||
|
<strong style={styles.satsValue}>
|
||||||
|
<SatsDisplay sats={satsAmount} />
|
||||||
|
</strong>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Continue Button */}
|
||||||
|
<button
|
||||||
|
onClick={onContinue}
|
||||||
|
disabled={isPriceStale || !hasPrice}
|
||||||
|
style={{
|
||||||
|
...styles.continueButton,
|
||||||
|
...(isPriceStale || !hasPrice ? buttonStyles.buttonDisabled : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Continue to Booking
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
130
frontend/app/exchange/components/PriceDisplay.tsx
Normal file
130
frontend/app/exchange/components/PriceDisplay.tsx
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { CSSProperties } from "react";
|
||||||
|
import { components } from "../../generated/api";
|
||||||
|
|
||||||
|
type ExchangePriceResponse = components["schemas"]["ExchangePriceResponse"];
|
||||||
|
|
||||||
|
interface PriceDisplayProps {
|
||||||
|
priceData: ExchangePriceResponse | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
lastUpdate: Date | null;
|
||||||
|
direction: "buy" | "sell";
|
||||||
|
agreedPrice: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format price for display
|
||||||
|
*/
|
||||||
|
function formatPrice(price: number): string {
|
||||||
|
return `€${price.toLocaleString("de-DE", { maximumFractionDigits: 0 })}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles: Record<string, CSSProperties> = {
|
||||||
|
priceCard: {
|
||||||
|
background: "rgba(255, 255, 255, 0.03)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||||
|
borderRadius: "12px",
|
||||||
|
padding: "1rem 1.5rem",
|
||||||
|
marginBottom: "1.5rem",
|
||||||
|
},
|
||||||
|
priceRow: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.75rem",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
},
|
||||||
|
priceLabel: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "rgba(255, 255, 255, 0.5)",
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
},
|
||||||
|
priceValue: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "1.1rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
},
|
||||||
|
priceDivider: {
|
||||||
|
color: "rgba(255, 255, 255, 0.2)",
|
||||||
|
margin: "0 0.25rem",
|
||||||
|
},
|
||||||
|
premiumBadge: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
padding: "0.2rem 0.5rem",
|
||||||
|
borderRadius: "4px",
|
||||||
|
marginLeft: "0.25rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.1)",
|
||||||
|
color: "rgba(255, 255, 255, 0.7)",
|
||||||
|
},
|
||||||
|
priceTimestamp: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
color: "rgba(255, 255, 255, 0.4)",
|
||||||
|
marginTop: "0.5rem",
|
||||||
|
},
|
||||||
|
staleWarning: {
|
||||||
|
color: "#f87171",
|
||||||
|
fontWeight: 600,
|
||||||
|
},
|
||||||
|
priceLoading: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "rgba(255, 255, 255, 0.5)",
|
||||||
|
textAlign: "center" as const,
|
||||||
|
},
|
||||||
|
priceError: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "#f87171",
|
||||||
|
textAlign: "center" as const,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Component that displays exchange price information.
|
||||||
|
* Shows market price, agreed price, premium percentage, and last update time.
|
||||||
|
*/
|
||||||
|
export function PriceDisplay({
|
||||||
|
priceData,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
lastUpdate,
|
||||||
|
direction,
|
||||||
|
agreedPrice,
|
||||||
|
}: PriceDisplayProps) {
|
||||||
|
const marketPrice = priceData?.price?.market_price ?? 0;
|
||||||
|
const premiumPercent = priceData?.price?.premium_percentage ?? 5;
|
||||||
|
const isPriceStale = priceData?.price?.is_stale ?? false;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={styles.priceCard}>
|
||||||
|
{isLoading && !priceData ? (
|
||||||
|
<div style={styles.priceLoading}>Loading price...</div>
|
||||||
|
) : error && !priceData?.price ? (
|
||||||
|
<div style={styles.priceError}>{error}</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div style={styles.priceRow}>
|
||||||
|
<span style={styles.priceLabel}>Market:</span>
|
||||||
|
<span style={styles.priceValue}>{formatPrice(marketPrice)}</span>
|
||||||
|
<span style={styles.priceDivider}>•</span>
|
||||||
|
<span style={styles.priceLabel}>Our price:</span>
|
||||||
|
<span style={styles.priceValue}>{formatPrice(agreedPrice)}</span>
|
||||||
|
<span style={styles.premiumBadge}>
|
||||||
|
{direction === "buy" ? "+" : "-"}
|
||||||
|
{premiumPercent}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{lastUpdate && (
|
||||||
|
<div style={styles.priceTimestamp}>
|
||||||
|
Updated {lastUpdate.toLocaleTimeString()}
|
||||||
|
{isPriceStale && <span style={styles.staleWarning}> (stale)</span>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
98
frontend/app/exchange/components/StepIndicator.tsx
Normal file
98
frontend/app/exchange/components/StepIndicator.tsx
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { CSSProperties } from "react";
|
||||||
|
|
||||||
|
type WizardStep = "details" | "booking" | "confirmation";
|
||||||
|
|
||||||
|
interface StepIndicatorProps {
|
||||||
|
currentStep: WizardStep;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles: Record<string, CSSProperties> = {
|
||||||
|
stepIndicator: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
gap: "1rem",
|
||||||
|
marginBottom: "2rem",
|
||||||
|
},
|
||||||
|
step: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.5rem",
|
||||||
|
opacity: 0.4,
|
||||||
|
},
|
||||||
|
stepActive: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
stepCompleted: {
|
||||||
|
opacity: 0.7,
|
||||||
|
},
|
||||||
|
stepNumber: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
width: "28px",
|
||||||
|
height: "28px",
|
||||||
|
borderRadius: "50%",
|
||||||
|
background: "rgba(255, 255, 255, 0.1)",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
stepLabel: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
stepDivider: {
|
||||||
|
width: "40px",
|
||||||
|
height: "1px",
|
||||||
|
background: "rgba(255, 255, 255, 0.2)",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Component that displays the wizard step indicator.
|
||||||
|
* Shows which step the user is currently on and which steps are completed.
|
||||||
|
*/
|
||||||
|
export function StepIndicator({ currentStep }: StepIndicatorProps) {
|
||||||
|
return (
|
||||||
|
<div style={styles.stepIndicator}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...styles.step,
|
||||||
|
...(currentStep === "details" ? styles.stepActive : styles.stepCompleted),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={styles.stepNumber}>1</span>
|
||||||
|
<span style={styles.stepLabel}>Exchange Details</span>
|
||||||
|
</div>
|
||||||
|
<div style={styles.stepDivider} />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...styles.step,
|
||||||
|
...(currentStep === "booking"
|
||||||
|
? styles.stepActive
|
||||||
|
: currentStep === "confirmation"
|
||||||
|
? styles.stepCompleted
|
||||||
|
: {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={styles.stepNumber}>2</span>
|
||||||
|
<span style={styles.stepLabel}>Book Appointment</span>
|
||||||
|
</div>
|
||||||
|
<div style={styles.stepDivider} />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...styles.step,
|
||||||
|
...(currentStep === "confirmation" ? styles.stepActive : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={styles.stepNumber}>3</span>
|
||||||
|
<span style={styles.stepLabel}>Confirm</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
97
frontend/app/exchange/hooks/useAvailableSlots.ts
Normal file
97
frontend/app/exchange/hooks/useAvailableSlots.ts
Normal file
|
|
@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
73
frontend/app/exchange/hooks/useExchangePrice.ts
Normal file
73
frontend/app/exchange/hooks/useExchangePrice.ts
Normal file
|
|
@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue