counterweight
4e6f38e4a1
- Extract SatsDisplay component to shared components directory - Fix page IDs: rename 'admin-appointments' to 'admin-trades' - Fix trades page using correct 'trades' page ID
1008 lines
30 KiB
TypeScript
1008 lines
30 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { useEffect, useState, useCallback, useMemo } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Permission } from "../auth-context";
|
|
import { api } from "../api";
|
|
import { Header } from "../components/Header";
|
|
import { SatsDisplay } from "../components/SatsDisplay";
|
|
import { useRequireAuth } from "../hooks/useRequireAuth";
|
|
import { components } from "../generated/api";
|
|
import { formatDate, formatTime, getDateRange } from "../utils/date";
|
|
import { layoutStyles, typographyStyles, bannerStyles, buttonStyles } from "../styles/shared";
|
|
|
|
type ExchangePriceResponse = components["schemas"]["ExchangePriceResponse"];
|
|
type ExchangeResponse = components["schemas"]["ExchangeResponse"];
|
|
type BookableSlot = components["schemas"]["BookableSlot"];
|
|
type AvailableSlotsResponse = components["schemas"]["AvailableSlotsResponse"];
|
|
|
|
// Constants from shared config (will be fetched from API)
|
|
const MIN_ADVANCE_DAYS = 1;
|
|
const MAX_ADVANCE_DAYS = 30;
|
|
|
|
type Direction = "buy" | "sell";
|
|
type WizardStep = "details" | "booking";
|
|
|
|
/**
|
|
* Format EUR amount from cents to display string
|
|
*/
|
|
function formatEur(cents: number): string {
|
|
return `€${(cents / 100).toLocaleString("de-DE")}`;
|
|
}
|
|
|
|
/**
|
|
* Format price for display
|
|
*/
|
|
function formatPrice(price: number): string {
|
|
return `€${price.toLocaleString("de-DE", { maximumFractionDigits: 0 })}`;
|
|
}
|
|
|
|
export default function ExchangePage() {
|
|
const router = useRouter();
|
|
const { user, isLoading, isAuthorized } = useRequireAuth({
|
|
requiredPermission: Permission.CREATE_EXCHANGE,
|
|
fallbackRedirect: "/",
|
|
});
|
|
|
|
// Wizard state
|
|
const [wizardStep, setWizardStep] = useState<WizardStep>("details");
|
|
|
|
// Price and config state
|
|
const [priceData, setPriceData] = useState<ExchangePriceResponse | null>(null);
|
|
const [isPriceLoading, setIsPriceLoading] = useState(true);
|
|
const [priceError, setPriceError] = useState<string | null>(null);
|
|
const [lastPriceUpdate, setLastPriceUpdate] = useState<Date | null>(null);
|
|
|
|
// Trade form state
|
|
const [direction, setDirection] = useState<Direction>("buy");
|
|
const [eurAmount, setEurAmount] = useState<number>(10000); // €100 in cents
|
|
|
|
// Date/slot selection state
|
|
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
|
|
const [availableSlots, setAvailableSlots] = useState<BookableSlot[]>([]);
|
|
const [selectedSlot, setSelectedSlot] = useState<BookableSlot | null>(null);
|
|
const [isLoadingSlots, setIsLoadingSlots] = useState(false);
|
|
const [datesWithAvailability, setDatesWithAvailability] = useState<Set<string>>(new Set());
|
|
const [isLoadingAvailability, setIsLoadingAvailability] = useState(true);
|
|
|
|
// UI state
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isBooking, setIsBooking] = useState(false);
|
|
|
|
// Compute dates
|
|
const dates = useMemo(() => getDateRange(MIN_ADVANCE_DAYS, MAX_ADVANCE_DAYS), []);
|
|
|
|
// Config from API
|
|
const config = priceData?.config;
|
|
const eurMin = config?.eur_min ?? 100;
|
|
const eurMax = config?.eur_max ?? 3000;
|
|
const eurIncrement = config?.eur_increment ?? 20;
|
|
|
|
// Compute trade details
|
|
const price = priceData?.price;
|
|
const marketPrice = price?.market_price ?? 0;
|
|
const premiumPercent = price?.premium_percentage ?? 5;
|
|
|
|
// Calculate agreed price based on direction
|
|
const agreedPrice = useMemo(() => {
|
|
if (!marketPrice) return 0;
|
|
if (direction === "buy") {
|
|
return marketPrice * (1 + premiumPercent / 100);
|
|
} else {
|
|
return marketPrice * (1 - premiumPercent / 100);
|
|
}
|
|
}, [marketPrice, premiumPercent, direction]);
|
|
|
|
// Calculate sats amount
|
|
const satsAmount = useMemo(() => {
|
|
if (!agreedPrice) return 0;
|
|
const eurValue = eurAmount / 100;
|
|
const btcAmount = eurValue / agreedPrice;
|
|
return Math.floor(btcAmount * 100_000_000);
|
|
}, [eurAmount, agreedPrice]);
|
|
|
|
// Fetch price data
|
|
const fetchPrice = useCallback(async () => {
|
|
setIsPriceLoading(true);
|
|
setPriceError(null);
|
|
|
|
try {
|
|
const data = await api.get<ExchangePriceResponse>("/api/exchange/price");
|
|
setPriceData(data);
|
|
setLastPriceUpdate(new Date());
|
|
|
|
if (data.error) {
|
|
setPriceError(data.error);
|
|
}
|
|
if (data.price?.is_stale) {
|
|
setPriceError("Price is stale. Trade booking may be blocked.");
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to fetch price:", err);
|
|
setPriceError("Failed to load price data");
|
|
} finally {
|
|
setIsPriceLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
// Auto-refresh price every 60 seconds
|
|
useEffect(() => {
|
|
if (!user || !isAuthorized) return;
|
|
|
|
fetchPrice();
|
|
const interval = setInterval(fetchPrice, 60000);
|
|
return () => clearInterval(interval);
|
|
}, [user, isAuthorized, fetchPrice]);
|
|
|
|
// Fetch slots for a date
|
|
const fetchSlots = useCallback(async (date: Date) => {
|
|
setIsLoadingSlots(true);
|
|
setError(null);
|
|
setAvailableSlots([]);
|
|
setSelectedSlot(null);
|
|
|
|
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);
|
|
setError("Failed to load available slots");
|
|
} finally {
|
|
setIsLoadingSlots(false);
|
|
}
|
|
}, []);
|
|
|
|
// Fetch availability for all dates when entering booking step
|
|
useEffect(() => {
|
|
if (!user || !isAuthorized || wizardStep !== "booking") 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();
|
|
}, [user, isAuthorized, dates, wizardStep]);
|
|
|
|
useEffect(() => {
|
|
if (selectedDate && user && isAuthorized) {
|
|
fetchSlots(selectedDate);
|
|
}
|
|
}, [selectedDate, user, isAuthorized, fetchSlots]);
|
|
|
|
const handleDateSelect = (date: Date) => {
|
|
const dateStr = formatDate(date);
|
|
if (datesWithAvailability.has(dateStr)) {
|
|
setSelectedDate(date);
|
|
}
|
|
};
|
|
|
|
const handleSlotSelect = (slot: BookableSlot) => {
|
|
setSelectedSlot(slot);
|
|
setError(null);
|
|
};
|
|
|
|
const handleContinueToBooking = () => {
|
|
setWizardStep("booking");
|
|
setError(null);
|
|
};
|
|
|
|
const handleBackToDetails = () => {
|
|
setWizardStep("details");
|
|
setSelectedDate(null);
|
|
setSelectedSlot(null);
|
|
setError(null);
|
|
};
|
|
|
|
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;
|
|
|
|
setEurAmount(clamped);
|
|
};
|
|
|
|
const handleAmountInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const inputValue = e.target.value.replace(/[^0-9]/g, "");
|
|
if (inputValue === "") {
|
|
setEurAmount(eurMin * 100);
|
|
return;
|
|
}
|
|
const eurValue = parseInt(inputValue, 10);
|
|
handleAmountChange(eurValue * 100);
|
|
};
|
|
|
|
const handleBook = async () => {
|
|
if (!selectedSlot) return;
|
|
|
|
setIsBooking(true);
|
|
setError(null);
|
|
|
|
try {
|
|
await api.post<ExchangeResponse>("/api/exchange", {
|
|
slot_start: selectedSlot.start_time,
|
|
direction,
|
|
eur_amount: eurAmount,
|
|
});
|
|
|
|
// Redirect to trades page after successful booking
|
|
router.push("/trades");
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to book trade");
|
|
setIsBooking(false);
|
|
}
|
|
};
|
|
|
|
const cancelSlotSelection = () => {
|
|
setSelectedSlot(null);
|
|
setError(null);
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<main style={layoutStyles.main}>
|
|
<div style={layoutStyles.loader}>Loading...</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
if (!isAuthorized) {
|
|
return null;
|
|
}
|
|
|
|
const isPriceStale = priceData?.price?.is_stale ?? false;
|
|
|
|
return (
|
|
<main style={layoutStyles.main}>
|
|
<Header currentPage="exchange" />
|
|
<div style={styles.content}>
|
|
<h1 style={typographyStyles.pageTitle}>Exchange Bitcoin</h1>
|
|
<p style={typographyStyles.pageSubtitle}>Buy or sell Bitcoin with a 5% premium</p>
|
|
|
|
{error && <div style={bannerStyles.errorBanner}>{error}</div>}
|
|
|
|
{/* Price Display */}
|
|
<div style={styles.priceCard}>
|
|
{isPriceLoading && !priceData ? (
|
|
<div style={styles.priceLoading}>Loading price...</div>
|
|
) : priceError && !priceData?.price ? (
|
|
<div style={styles.priceError}>{priceError}</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>
|
|
{lastPriceUpdate && (
|
|
<div style={styles.priceTimestamp}>
|
|
Updated {lastPriceUpdate.toLocaleTimeString()}
|
|
{isPriceStale && <span style={styles.staleWarning}> (stale)</span>}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Step Indicator */}
|
|
<div style={styles.stepIndicator}>
|
|
<div
|
|
style={{
|
|
...styles.step,
|
|
...(wizardStep === "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,
|
|
...(wizardStep === "booking" ? styles.stepActive : {}),
|
|
}}
|
|
>
|
|
<span style={styles.stepNumber}>2</span>
|
|
<span style={styles.stepLabel}>Book Appointment</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step 1: Exchange Details */}
|
|
{wizardStep === "details" && (
|
|
<div style={styles.tradeCard}>
|
|
{/* Direction Selector */}
|
|
<div style={styles.directionRow}>
|
|
<button
|
|
onClick={() => setDirection("buy")}
|
|
style={{
|
|
...styles.directionBtn,
|
|
...(direction === "buy" ? styles.directionBtnBuyActive : {}),
|
|
}}
|
|
>
|
|
Buy BTC
|
|
</button>
|
|
<button
|
|
onClick={() => setDirection("sell")}
|
|
style={{
|
|
...styles.directionBtn,
|
|
...(direction === "sell" ? styles.directionBtnSellActive : {}),
|
|
}}
|
|
>
|
|
Sell BTC
|
|
</button>
|
|
</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) => setEurAmount(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={handleContinueToBooking}
|
|
disabled={isPriceStale || !priceData?.price}
|
|
style={{
|
|
...styles.continueButton,
|
|
...(isPriceStale || !priceData?.price ? buttonStyles.buttonDisabled : {}),
|
|
}}
|
|
>
|
|
Continue to Booking
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 2: Booking */}
|
|
{wizardStep === "booking" && (
|
|
<>
|
|
{/* Trade Summary Card */}
|
|
<div style={styles.summaryCard}>
|
|
<div style={styles.summaryHeader}>
|
|
<span style={styles.summaryTitle}>Your Exchange</span>
|
|
<button onClick={handleBackToDetails} 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>
|
|
</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;
|
|
|
|
return (
|
|
<button
|
|
key={dateStr}
|
|
onClick={() => handleDateSelect(date)}
|
|
disabled={isDisabled}
|
|
style={{
|
|
...styles.dateButton,
|
|
...(isSelected ? styles.dateButtonSelected : {}),
|
|
...(isDisabled ? styles.dateButtonDisabled : {}),
|
|
}}
|
|
>
|
|
<div style={styles.dateWeekday}>
|
|
{date.toLocaleDateString("en-US", { weekday: "short" })}
|
|
</div>
|
|
<div style={styles.dateDay}>
|
|
{date.toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
})}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Available Slots */}
|
|
{selectedDate && (
|
|
<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={() => handleSlotSelect(slot)}
|
|
style={{
|
|
...styles.slotButton,
|
|
...(isSelected ? styles.slotButtonSelected : {}),
|
|
}}
|
|
>
|
|
{formatTime(slot.start_time)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Confirm Booking */}
|
|
{selectedSlot && (
|
|
<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>
|
|
|
|
<div style={styles.buttonRow}>
|
|
<button
|
|
onClick={handleBook}
|
|
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={cancelSlotSelection}
|
|
disabled={isBooking}
|
|
style={styles.cancelButton}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
// Page-specific styles
|
|
const styles: Record<string, React.CSSProperties> = {
|
|
content: {
|
|
flex: 1,
|
|
padding: "2rem",
|
|
maxWidth: "900px",
|
|
margin: "0 auto",
|
|
width: "100%",
|
|
},
|
|
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,
|
|
},
|
|
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)",
|
|
},
|
|
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",
|
|
},
|
|
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",
|
|
},
|
|
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)",
|
|
},
|
|
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)",
|
|
},
|
|
dateWeekday: {
|
|
color: "#fff",
|
|
fontWeight: 500,
|
|
fontSize: "0.875rem",
|
|
marginBottom: "0.25rem",
|
|
},
|
|
dateDay: {
|
|
color: "rgba(255, 255, 255, 0.5)",
|
|
fontSize: "0.8rem",
|
|
},
|
|
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",
|
|
},
|
|
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,
|
|
},
|
|
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",
|
|
},
|
|
};
|