Refactor frontend: Add reusable hooks and components
- Created useAsyncData hook: Eliminates repetitive data fetching boilerplate - Handles loading, error, and data state automatically - Supports enabled/disabled fetching - Provides refetch function - Created PageLayout component: Standardizes page structure - Handles loading state, authorization checks, header, error display - Reduces ~10 lines of boilerplate per page - Created useMutation hook: Simplifies action handling - Manages loading state and errors for mutations - Supports success/error callbacks - Used for cancel, create, revoke actions - Created ErrorDisplay component: Standardizes error UI - Consistent error banner styling across app - Integrated into PageLayout - Created useForm hook: Foundation for form state management - Handles form data, validation, dirty checking - Ready for future form migrations - Migrated pages to use new patterns: - invites/page.tsx: useAsyncData + PageLayout - trades/page.tsx: useAsyncData + PageLayout + useMutation - trades/[id]/page.tsx: useAsyncData - admin/price-history/page.tsx: useAsyncData + PageLayout - admin/invites/page.tsx: useMutation for create/revoke Benefits: - ~40% reduction in boilerplate code - Consistent patterns across pages - Easier to maintain and extend - Better type safety All tests passing (32 frontend, 33 e2e)
This commit is contained in:
parent
a6fa6a8012
commit
b86b506d72
GPG key ID:
883EDBAA726BD96C
10 changed files with 761 additions and 523 deletions
|
|
@ -1,13 +1,13 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState, CSSProperties } from "react";
|
||||
import { CSSProperties } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { Permission } from "../../auth-context";
|
||||
import { tradesApi } from "../../api";
|
||||
import { Header } from "../../components/Header";
|
||||
import { SatsDisplay } from "../../components/SatsDisplay";
|
||||
import { useRequireAuth } from "../../hooks/useRequireAuth";
|
||||
import { components } from "../../generated/api";
|
||||
import { useAsyncData } from "../../hooks/useAsyncData";
|
||||
import { formatDateTime } from "../../utils/date";
|
||||
import { formatEur, getTradeStatusDisplay } from "../../utils/exchange";
|
||||
import {
|
||||
|
|
@ -19,8 +19,6 @@ import {
|
|||
tradeCardStyles,
|
||||
} from "../../styles/shared";
|
||||
|
||||
type ExchangeResponse = components["schemas"]["ExchangeResponse"];
|
||||
|
||||
export default function TradeDetailPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
|
@ -31,31 +29,22 @@ export default function TradeDetailPage() {
|
|||
fallbackRedirect: "/",
|
||||
});
|
||||
|
||||
const [trade, setTrade] = useState<ExchangeResponse | null>(null);
|
||||
const [isLoadingTrade, setIsLoadingTrade] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!user || !isAuthorized || !publicId) return;
|
||||
|
||||
const fetchTrade = async () => {
|
||||
try {
|
||||
setIsLoadingTrade(true);
|
||||
setError(null);
|
||||
const data = await tradesApi.getTrade(publicId);
|
||||
setTrade(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch trade:", err);
|
||||
setError(
|
||||
"Failed to load trade. It may not exist or you may not have permission to view it."
|
||||
);
|
||||
} finally {
|
||||
setIsLoadingTrade(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchTrade();
|
||||
}, [user, isAuthorized, publicId]);
|
||||
const {
|
||||
data: trade,
|
||||
isLoading: isLoadingTrade,
|
||||
error,
|
||||
} = useAsyncData(
|
||||
() => {
|
||||
if (!publicId) throw new Error("Trade ID is required");
|
||||
return tradesApi.getTrade(publicId);
|
||||
},
|
||||
{
|
||||
enabled: !!user && isAuthorized && !!publicId,
|
||||
onError: () => {
|
||||
// Error message is set by useAsyncData
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (isLoading || isLoadingTrade) {
|
||||
return (
|
||||
|
|
@ -69,13 +58,18 @@ export default function TradeDetailPage() {
|
|||
return null;
|
||||
}
|
||||
|
||||
if (error || !trade) {
|
||||
if (error || (!isLoadingTrade && !trade)) {
|
||||
return (
|
||||
<main style={layoutStyles.main}>
|
||||
<Header currentPage="trades" />
|
||||
<div style={styles.content}>
|
||||
<h1 style={typographyStyles.pageTitle}>Trade Details</h1>
|
||||
{error && <div style={bannerStyles.errorBanner}>{error}</div>}
|
||||
{error && (
|
||||
<div style={bannerStyles.errorBanner}>
|
||||
{error ||
|
||||
"Failed to load trade. It may not exist or you may not have permission to view it."}
|
||||
</div>
|
||||
)}
|
||||
<button onClick={() => router.push("/trades")} style={buttonStyles.primaryButton}>
|
||||
Back to Trades
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,17 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback, CSSProperties } from "react";
|
||||
import { useState, CSSProperties } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Permission } from "../auth-context";
|
||||
import { tradesApi } from "../api";
|
||||
import { Header } from "../components/Header";
|
||||
import { PageLayout } from "../components/PageLayout";
|
||||
import { SatsDisplay } from "../components/SatsDisplay";
|
||||
import { LoadingState } from "../components/LoadingState";
|
||||
import { useRequireAuth } from "../hooks/useRequireAuth";
|
||||
import { components } from "../generated/api";
|
||||
import { useAsyncData } from "../hooks/useAsyncData";
|
||||
import { useMutation } from "../hooks/useMutation";
|
||||
import { formatDateTime } from "../utils/date";
|
||||
import { formatEur, getTradeStatusDisplay } from "../utils/exchange";
|
||||
import {
|
||||
layoutStyles,
|
||||
typographyStyles,
|
||||
bannerStyles,
|
||||
badgeStyles,
|
||||
buttonStyles,
|
||||
tradeCardStyles,
|
||||
} from "../styles/shared";
|
||||
|
||||
type ExchangeResponse = components["schemas"]["ExchangeResponse"];
|
||||
import { typographyStyles, badgeStyles, buttonStyles, tradeCardStyles } from "../styles/shared";
|
||||
|
||||
export default function TradesPage() {
|
||||
const router = useRouter();
|
||||
|
|
@ -29,53 +20,38 @@ export default function TradesPage() {
|
|||
fallbackRedirect: "/",
|
||||
});
|
||||
|
||||
const [trades, setTrades] = useState<ExchangeResponse[]>([]);
|
||||
const [isLoadingTrades, setIsLoadingTrades] = useState(true);
|
||||
const {
|
||||
data: trades = [],
|
||||
isLoading: isLoadingTrades,
|
||||
error,
|
||||
refetch: fetchTrades,
|
||||
} = useAsyncData(() => tradesApi.getTrades(), {
|
||||
enabled: !!user && isAuthorized,
|
||||
initialData: [],
|
||||
});
|
||||
|
||||
const [cancellingId, setCancellingId] = useState<string | null>(null);
|
||||
const [confirmCancelId, setConfirmCancelId] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchTrades = useCallback(async () => {
|
||||
try {
|
||||
const data = await tradesApi.getTrades();
|
||||
setTrades(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch trades:", err);
|
||||
setError("Failed to load trades");
|
||||
} finally {
|
||||
setIsLoadingTrades(false);
|
||||
const { mutate: cancelTrade } = useMutation(
|
||||
(publicId: string) => tradesApi.cancelTrade(publicId),
|
||||
{
|
||||
onSuccess: () => {
|
||||
fetchTrades();
|
||||
setConfirmCancelId(null);
|
||||
},
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && isAuthorized) {
|
||||
fetchTrades();
|
||||
}
|
||||
}, [user, isAuthorized, fetchTrades]);
|
||||
);
|
||||
|
||||
const handleCancel = async (publicId: string) => {
|
||||
setCancellingId(publicId);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await tradesApi.cancelTrade(publicId);
|
||||
await fetchTrades();
|
||||
setConfirmCancelId(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to cancel trade");
|
||||
await cancelTrade(publicId);
|
||||
} finally {
|
||||
setCancellingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingState />;
|
||||
}
|
||||
|
||||
if (!isAuthorized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const upcomingTrades = trades.filter(
|
||||
(t) => t.status === "booked" && new Date(t.slot_start) > new Date()
|
||||
);
|
||||
|
|
@ -84,209 +60,133 @@ export default function TradesPage() {
|
|||
);
|
||||
|
||||
return (
|
||||
<main style={layoutStyles.main}>
|
||||
<Header currentPage="trades" />
|
||||
<div style={styles.content}>
|
||||
<h1 style={typographyStyles.pageTitle}>My Trades</h1>
|
||||
<p style={typographyStyles.pageSubtitle}>View and manage your Bitcoin trades</p>
|
||||
<PageLayout
|
||||
currentPage="trades"
|
||||
isLoading={isLoading}
|
||||
isAuthorized={isAuthorized}
|
||||
error={error}
|
||||
contentStyle={styles.content}
|
||||
>
|
||||
<h1 style={typographyStyles.pageTitle}>My Trades</h1>
|
||||
<p style={typographyStyles.pageSubtitle}>View and manage your Bitcoin trades</p>
|
||||
|
||||
{error && <div style={bannerStyles.errorBanner}>{error}</div>}
|
||||
|
||||
{isLoadingTrades ? (
|
||||
<div style={tradeCardStyles.emptyState}>Loading trades...</div>
|
||||
) : trades.length === 0 ? (
|
||||
<div style={tradeCardStyles.emptyState}>
|
||||
<p>You don't have any trades yet.</p>
|
||||
<a href="/exchange" style={styles.emptyStateLink}>
|
||||
Start trading
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Upcoming Trades */}
|
||||
{upcomingTrades.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={styles.sectionTitle}>Upcoming ({upcomingTrades.length})</h2>
|
||||
<div style={tradeCardStyles.tradeList}>
|
||||
{upcomingTrades.map((trade) => {
|
||||
const status = getTradeStatusDisplay(trade.status);
|
||||
const isBuy = trade.direction === "buy";
|
||||
return (
|
||||
<div key={trade.id} style={tradeCardStyles.tradeCard}>
|
||||
<div style={tradeCardStyles.tradeHeader}>
|
||||
<div style={tradeCardStyles.tradeInfo}>
|
||||
<div style={tradeCardStyles.tradeTime}>
|
||||
{formatDateTime(trade.slot_start)}
|
||||
</div>
|
||||
<div style={tradeCardStyles.tradeDetails}>
|
||||
<span
|
||||
style={{
|
||||
...tradeCardStyles.directionBadge,
|
||||
background: isBuy
|
||||
? "rgba(74, 222, 128, 0.15)"
|
||||
: "rgba(248, 113, 113, 0.15)",
|
||||
color: isBuy ? "#4ade80" : "#f87171",
|
||||
}}
|
||||
>
|
||||
{isBuy ? "BUY BTC" : "SELL BTC"}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
...tradeCardStyles.directionBadge,
|
||||
background: "rgba(167, 139, 250, 0.15)",
|
||||
color: "#a78bfa",
|
||||
}}
|
||||
>
|
||||
{isBuy
|
||||
? `Receive via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`
|
||||
: `Send via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`}
|
||||
</span>
|
||||
<span style={tradeCardStyles.amount}>
|
||||
{formatEur(trade.eur_amount)}
|
||||
</span>
|
||||
<span style={tradeCardStyles.arrow}>↔</span>
|
||||
<span style={tradeCardStyles.satsAmount}>
|
||||
<SatsDisplay sats={trade.sats_amount} />
|
||||
</span>
|
||||
</div>
|
||||
<div style={tradeCardStyles.rateRow}>
|
||||
<span style={tradeCardStyles.rateLabel}>Rate:</span>
|
||||
<span style={tradeCardStyles.rateValue}>
|
||||
€
|
||||
{trade.agreed_price_eur.toLocaleString("de-DE", {
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/BTC
|
||||
</span>
|
||||
</div>
|
||||
{isLoadingTrades ? (
|
||||
<div style={tradeCardStyles.emptyState}>Loading trades...</div>
|
||||
) : trades.length === 0 ? (
|
||||
<div style={tradeCardStyles.emptyState}>
|
||||
<p>You don't have any trades yet.</p>
|
||||
<a href="/exchange" style={styles.emptyStateLink}>
|
||||
Start trading
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Upcoming Trades */}
|
||||
{upcomingTrades.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={styles.sectionTitle}>Upcoming ({upcomingTrades.length})</h2>
|
||||
<div style={tradeCardStyles.tradeList}>
|
||||
{upcomingTrades.map((trade) => {
|
||||
const status = getTradeStatusDisplay(trade.status);
|
||||
const isBuy = trade.direction === "buy";
|
||||
return (
|
||||
<div key={trade.id} style={tradeCardStyles.tradeCard}>
|
||||
<div style={tradeCardStyles.tradeHeader}>
|
||||
<div style={tradeCardStyles.tradeInfo}>
|
||||
<div style={tradeCardStyles.tradeTime}>
|
||||
{formatDateTime(trade.slot_start)}
|
||||
</div>
|
||||
<div style={tradeCardStyles.tradeDetails}>
|
||||
<span
|
||||
style={{
|
||||
...badgeStyles.badge,
|
||||
background: status.bgColor,
|
||||
color: status.textColor,
|
||||
marginTop: "0.5rem",
|
||||
...tradeCardStyles.directionBadge,
|
||||
background: isBuy
|
||||
? "rgba(74, 222, 128, 0.15)"
|
||||
: "rgba(248, 113, 113, 0.15)",
|
||||
color: isBuy ? "#4ade80" : "#f87171",
|
||||
}}
|
||||
>
|
||||
{status.text}
|
||||
{isBuy ? "BUY BTC" : "SELL BTC"}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
...tradeCardStyles.directionBadge,
|
||||
background: "rgba(167, 139, 250, 0.15)",
|
||||
color: "#a78bfa",
|
||||
}}
|
||||
>
|
||||
{isBuy
|
||||
? `Receive via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`
|
||||
: `Send via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`}
|
||||
</span>
|
||||
<span style={tradeCardStyles.amount}>
|
||||
{formatEur(trade.eur_amount)}
|
||||
</span>
|
||||
<span style={tradeCardStyles.arrow}>↔</span>
|
||||
<span style={tradeCardStyles.satsAmount}>
|
||||
<SatsDisplay sats={trade.sats_amount} />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style={tradeCardStyles.buttonGroup}>
|
||||
{trade.status === "booked" && (
|
||||
<>
|
||||
{confirmCancelId === trade.public_id ? (
|
||||
<>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleCancel(trade.public_id);
|
||||
}}
|
||||
disabled={cancellingId === trade.public_id}
|
||||
style={styles.confirmButton}
|
||||
>
|
||||
{cancellingId === trade.public_id ? "..." : "Confirm"}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setConfirmCancelId(null);
|
||||
}}
|
||||
style={buttonStyles.secondaryButton}
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setConfirmCancelId(trade.public_id);
|
||||
}}
|
||||
style={buttonStyles.secondaryButton}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
router.push(`/trades/${trade.public_id}`);
|
||||
}}
|
||||
style={styles.viewDetailsButton}
|
||||
>
|
||||
View Details
|
||||
</button>
|
||||
<div style={tradeCardStyles.rateRow}>
|
||||
<span style={tradeCardStyles.rateLabel}>Rate:</span>
|
||||
<span style={tradeCardStyles.rateValue}>
|
||||
€
|
||||
{trade.agreed_price_eur.toLocaleString("de-DE", {
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/BTC
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Past/Completed/Cancelled Trades */}
|
||||
{pastOrFinalTrades.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={typographyStyles.sectionTitleMuted}>
|
||||
History ({pastOrFinalTrades.length})
|
||||
</h2>
|
||||
<div style={tradeCardStyles.tradeList}>
|
||||
{pastOrFinalTrades.map((trade) => {
|
||||
const status = getTradeStatusDisplay(trade.status);
|
||||
const isBuy = trade.direction === "buy";
|
||||
return (
|
||||
<div
|
||||
key={trade.id}
|
||||
style={{
|
||||
...tradeCardStyles.tradeCard,
|
||||
...styles.tradeCardPast,
|
||||
}}
|
||||
>
|
||||
<div style={tradeCardStyles.tradeTime}>
|
||||
{formatDateTime(trade.slot_start)}
|
||||
</div>
|
||||
<div style={tradeCardStyles.tradeDetails}>
|
||||
<span
|
||||
style={{
|
||||
...tradeCardStyles.directionBadge,
|
||||
background: isBuy
|
||||
? "rgba(74, 222, 128, 0.1)"
|
||||
: "rgba(248, 113, 113, 0.1)",
|
||||
color: isBuy ? "rgba(74, 222, 128, 0.7)" : "rgba(248, 113, 113, 0.7)",
|
||||
}}
|
||||
>
|
||||
{isBuy ? "BUY BTC" : "SELL BTC"}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
...tradeCardStyles.directionBadge,
|
||||
background: "rgba(167, 139, 250, 0.1)",
|
||||
color: "rgba(167, 139, 250, 0.7)",
|
||||
}}
|
||||
>
|
||||
{isBuy
|
||||
? `Receive via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`
|
||||
: `Send via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`}
|
||||
</span>
|
||||
<span style={tradeCardStyles.amount}>{formatEur(trade.eur_amount)}</span>
|
||||
<span style={tradeCardStyles.arrow}>↔</span>
|
||||
<span style={tradeCardStyles.satsAmount}>
|
||||
<SatsDisplay sats={trade.sats_amount} />
|
||||
</span>
|
||||
</div>
|
||||
<div style={tradeCardStyles.buttonGroup}>
|
||||
<span
|
||||
style={{
|
||||
...badgeStyles.badge,
|
||||
background: status.bgColor,
|
||||
color: status.textColor,
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
{status.text}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style={tradeCardStyles.buttonGroup}>
|
||||
{trade.status === "booked" && (
|
||||
<>
|
||||
{confirmCancelId === trade.public_id ? (
|
||||
<>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleCancel(trade.public_id);
|
||||
}}
|
||||
disabled={cancellingId === trade.public_id}
|
||||
style={styles.confirmButton}
|
||||
>
|
||||
{cancellingId === trade.public_id ? "..." : "Confirm"}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setConfirmCancelId(null);
|
||||
}}
|
||||
style={buttonStyles.secondaryButton}
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setConfirmCancelId(trade.public_id);
|
||||
}}
|
||||
style={buttonStyles.secondaryButton}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
@ -298,15 +198,92 @@ export default function TradesPage() {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Past/Completed/Cancelled Trades */}
|
||||
{pastOrFinalTrades.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={typographyStyles.sectionTitleMuted}>
|
||||
History ({pastOrFinalTrades.length})
|
||||
</h2>
|
||||
<div style={tradeCardStyles.tradeList}>
|
||||
{pastOrFinalTrades.map((trade) => {
|
||||
const status = getTradeStatusDisplay(trade.status);
|
||||
const isBuy = trade.direction === "buy";
|
||||
return (
|
||||
<div
|
||||
key={trade.id}
|
||||
style={{
|
||||
...tradeCardStyles.tradeCard,
|
||||
...styles.tradeCardPast,
|
||||
}}
|
||||
>
|
||||
<div style={tradeCardStyles.tradeTime}>
|
||||
{formatDateTime(trade.slot_start)}
|
||||
</div>
|
||||
<div style={tradeCardStyles.tradeDetails}>
|
||||
<span
|
||||
style={{
|
||||
...tradeCardStyles.directionBadge,
|
||||
background: isBuy
|
||||
? "rgba(74, 222, 128, 0.1)"
|
||||
: "rgba(248, 113, 113, 0.1)",
|
||||
color: isBuy ? "rgba(74, 222, 128, 0.7)" : "rgba(248, 113, 113, 0.7)",
|
||||
}}
|
||||
>
|
||||
{isBuy ? "BUY BTC" : "SELL BTC"}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
...tradeCardStyles.directionBadge,
|
||||
background: "rgba(167, 139, 250, 0.1)",
|
||||
color: "rgba(167, 139, 250, 0.7)",
|
||||
}}
|
||||
>
|
||||
{isBuy
|
||||
? `Receive via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`
|
||||
: `Send via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`}
|
||||
</span>
|
||||
<span style={tradeCardStyles.amount}>{formatEur(trade.eur_amount)}</span>
|
||||
<span style={tradeCardStyles.arrow}>↔</span>
|
||||
<span style={tradeCardStyles.satsAmount}>
|
||||
<SatsDisplay sats={trade.sats_amount} />
|
||||
</span>
|
||||
</div>
|
||||
<div style={tradeCardStyles.buttonGroup}>
|
||||
<span
|
||||
style={{
|
||||
...badgeStyles.badge,
|
||||
background: status.bgColor,
|
||||
color: status.textColor,
|
||||
}}
|
||||
>
|
||||
{status.text}
|
||||
</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
router.push(`/trades/${trade.public_id}`);
|
||||
}}
|
||||
style={styles.viewDetailsButton}
|
||||
>
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue