counterweight/arbret
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

lots of stuff

Browse source
This commit is contained in:
counterweight 2025-12-23 17:03:51 +01:00
parent f946fbf7b8
commit 4be45f8f7c
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
9 changed files with 513 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

130
frontend/app/trades/page.tsx
View file

@ -30,8 +30,8 @@ export default function TradesPage() {
const [trades, setTrades] = useState<ExchangeResponse[]>([]);
const [isLoadingTrades, setIsLoadingTrades] = useState(true);
const [cancellingId, setCancellingId] = useState<number | null>(null);
const [confirmCancelId, setConfirmCancelId] = useState<number | null>(null);
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 () => {
@ -52,12 +52,12 @@ export default function TradesPage() {
}
}, [user, isAuthorized, fetchTrades]);
const handleCancel = async (tradeId: number) => {
setCancellingId(tradeId);
const handleCancel = async (publicId: string) => {
setCancellingId(publicId);
setError(null);
try {
await api.post<ExchangeResponse>(`/api/trades/${tradeId}/cancel`, {});
await api.post<ExchangeResponse>(`/api/trades/${publicId}/cancel`, {});
await fetchTrades();
setConfirmCancelId(null);
} catch (err) {
@ -115,14 +115,7 @@ export default function TradesPage() {
const status = getTradeStatusDisplay(trade.status);
const isBuy = trade.direction === "buy";
return (
<div
key={trade.id}
style={{
...tradeCardStyles.tradeCard,
cursor: "pointer",
}}
onClick={() => router.push(`/trades/${trade.id}`)}
>
<div key={trade.id} style={tradeCardStyles.tradeCard}>
<div style={tradeCardStyles.tradeHeader}>
<div style={tradeCardStyles.tradeInfo}>
<div style={tradeCardStyles.tradeTime}>
@ -181,34 +174,54 @@ export default function TradesPage() {
</span>
</div>
{trade.status === "booked" && (
<div style={tradeCardStyles.buttonGroup}>
{confirmCancelId === trade.id ? (
<>
<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={() => handleCancel(trade.id)}
disabled={cancellingId === trade.id}
style={styles.confirmButton}
>
{cancellingId === trade.id ? "..." : "Confirm"}
</button>
<button
onClick={() => setConfirmCancelId(null)}
onClick={(e) => {
e.stopPropagation();
setConfirmCancelId(trade.public_id);
}}
style={buttonStyles.secondaryButton}
>
No
Cancel
</button>
</>
) : (
<button
onClick={() => setConfirmCancelId(trade.id)}
style={buttonStyles.secondaryButton}
>
Cancel
</button>
)}
</div>
)}
)}
</>
)}
<button
onClick={(e) => {
e.stopPropagation();
router.push(`/trades/${trade.public_id}`);
}}
style={styles.viewDetailsButton}
>
View Details
</button>
</div>
</div>
</div>
);
@ -233,9 +246,7 @@ export default function TradesPage() {
style={{
...tradeCardStyles.tradeCard,
...styles.tradeCardPast,
cursor: "pointer",
}}
onClick={() => router.push(`/trades/${trade.id}`)}
>
<div style={tradeCardStyles.tradeTime}>
{formatDateTime(trade.slot_start)}
@ -269,16 +280,26 @@ export default function TradesPage() {
<SatsDisplay sats={trade.sats_amount} />
</span>
</div>
<span
style={{
...badgeStyles.badge,
background: status.bgColor,
color: status.textColor,
marginTop: "0.5rem",
}}
>
{status.text}
</span>
<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>
);
})}
@ -330,4 +351,15 @@ const styles: Record<string, CSSProperties> = {
color: "#a78bfa",
textDecoration: "none",
},
viewDetailsButton: {
fontFamily: "'DM Sans', system-ui, sans-serif",
padding: "0.35rem 0.75rem",
fontSize: "0.75rem",
background: "rgba(167, 139, 250, 0.15)",
border: "1px solid rgba(167, 139, 250, 0.3)",
borderRadius: "6px",
color: "#a78bfa",
cursor: "pointer",
transition: "all 0.2s",
},
};