a few small fixes
This commit is contained in:
parent
f6c552cefd
commit
8503c760dc
GPG key ID:
883EDBAA726BD96C
8 changed files with 157 additions and 55 deletions
|
|
@ -18,12 +18,20 @@ import {
|
|||
buttonStyles,
|
||||
tradeCardStyles,
|
||||
} from "../../styles/shared";
|
||||
import { useTranslation } from "../../hooks/useTranslation";
|
||||
import { useLanguage } from "../../hooks/useLanguage";
|
||||
|
||||
export default function TradeDetailPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const publicId = params?.id as string | undefined;
|
||||
const [cancelError, setCancelError] = useState<string | null>(null);
|
||||
const t = useTranslation("trades");
|
||||
const tExchange = useTranslation("exchange");
|
||||
const { locale } = useLanguage();
|
||||
|
||||
// Map locale codes to Intl locale strings
|
||||
const intlLocale = locale === "es" ? "es-ES" : locale === "ca" ? "ca-ES" : "en-US";
|
||||
|
||||
const { user, isLoading, isAuthorized } = useRequireAuth({
|
||||
requiredPermission: Permission.VIEW_OWN_EXCHANGES,
|
||||
|
|
@ -50,7 +58,7 @@ export default function TradeDetailPage() {
|
|||
if (isLoading || isLoadingTrade) {
|
||||
return (
|
||||
<main style={layoutStyles.main}>
|
||||
<div style={layoutStyles.loader}>Loading...</div>
|
||||
<div style={layoutStyles.loader}>{t("details.loading")}</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -64,15 +72,10 @@ export default function TradeDetailPage() {
|
|||
<main style={layoutStyles.main}>
|
||||
<Header currentPage="trades" />
|
||||
<div style={styles.content}>
|
||||
<h1 style={typographyStyles.pageTitle}>Trade Details</h1>
|
||||
{error && (
|
||||
<div style={bannerStyles.errorBanner}>
|
||||
{error ||
|
||||
"Failed to load trade. It may not exist or you may not have permission to view it."}
|
||||
</div>
|
||||
)}
|
||||
<h1 style={typographyStyles.pageTitle}>{t("details.title")}</h1>
|
||||
{error && <div style={bannerStyles.errorBanner}>{error || t("details.error")}</div>}
|
||||
<button onClick={() => router.push("/trades")} style={buttonStyles.primaryButton}>
|
||||
Back to Trades
|
||||
{t("details.backToTradesShort")}
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -90,26 +93,28 @@ export default function TradeDetailPage() {
|
|||
<Header currentPage="trades" />
|
||||
<div style={styles.content}>
|
||||
<div style={styles.header}>
|
||||
<h1 style={typographyStyles.pageTitle}>Trade Details</h1>
|
||||
<h1 style={typographyStyles.pageTitle}>{t("details.title")}</h1>
|
||||
<button onClick={() => router.push("/trades")} style={buttonStyles.secondaryButton}>
|
||||
← Back to Trades
|
||||
{t("details.backToTrades")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={styles.tradeDetailCard}>
|
||||
<div style={styles.detailSection}>
|
||||
<h2 style={styles.sectionTitle}>Trade Information</h2>
|
||||
<h2 style={styles.sectionTitle}>{t("details.tradeInformation")}</h2>
|
||||
<div style={styles.detailGrid}>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Status:</span>
|
||||
<span style={styles.detailLabel}>{t("details.status")}</span>
|
||||
<StatusBadge tradeStatus={trade.status}>{""}</StatusBadge>
|
||||
</div>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Time:</span>
|
||||
<span style={styles.detailValue}>{formatDateTime(trade.slot_start)}</span>
|
||||
<span style={styles.detailLabel}>{t("details.time")}</span>
|
||||
<span style={styles.detailValue}>
|
||||
{formatDateTime(trade.slot_start, intlLocale)}
|
||||
</span>
|
||||
</div>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Direction:</span>
|
||||
<span style={styles.detailLabel}>{t("details.direction")}</span>
|
||||
<span
|
||||
style={{
|
||||
...styles.detailValue,
|
||||
|
|
@ -117,29 +122,29 @@ export default function TradeDetailPage() {
|
|||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{isBuy ? "BUY BTC" : "SELL BTC"}
|
||||
{isBuy ? t("details.buyBtc") : t("details.sellBtc")}
|
||||
</span>
|
||||
</div>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Payment Method:</span>
|
||||
<span style={styles.detailLabel}>{t("details.paymentMethod")}</span>
|
||||
<span style={styles.detailValue}>
|
||||
{isBuy
|
||||
? `Receive via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`
|
||||
: `Send via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`}
|
||||
? `${t("details.receiveVia")} ${trade.bitcoin_transfer_method === "onchain" ? tExchange("transferMethod.onchain") : tExchange("transferMethod.lightning")}`
|
||||
: `${t("details.sendVia")} ${trade.bitcoin_transfer_method === "onchain" ? tExchange("transferMethod.onchain") : tExchange("transferMethod.lightning")}`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.detailSection}>
|
||||
<h2 style={styles.sectionTitle}>Amounts</h2>
|
||||
<h2 style={styles.sectionTitle}>{t("details.amounts")}</h2>
|
||||
<div style={styles.detailGrid}>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>EUR Amount:</span>
|
||||
<span style={styles.detailLabel}>{t("details.eurAmount")}</span>
|
||||
<span style={styles.detailValue}>{formatEur(trade.eur_amount)}</span>
|
||||
</div>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Bitcoin Amount:</span>
|
||||
<span style={styles.detailLabel}>{t("details.bitcoinAmount")}</span>
|
||||
<span style={{ ...styles.detailValue, ...tradeCardStyles.satsAmount }}>
|
||||
<SatsDisplay sats={trade.sats_amount} />
|
||||
</span>
|
||||
|
|
@ -148,52 +153,58 @@ export default function TradeDetailPage() {
|
|||
</div>
|
||||
|
||||
<div style={styles.detailSection}>
|
||||
<h2 style={styles.sectionTitle}>Pricing</h2>
|
||||
<h2 style={styles.sectionTitle}>{t("details.pricing")}</h2>
|
||||
<div style={styles.detailGrid}>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Market Price:</span>
|
||||
<span style={styles.detailLabel}>{t("details.marketPrice")}</span>
|
||||
<span style={styles.detailValue}>
|
||||
€
|
||||
{trade.market_price_eur.toLocaleString("es-ES", {
|
||||
{trade.market_price_eur.toLocaleString(intlLocale, {
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/BTC
|
||||
</span>
|
||||
</div>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Agreed Price:</span>
|
||||
<span style={styles.detailLabel}>{t("details.agreedPrice")}</span>
|
||||
<span style={styles.detailValue}>
|
||||
€
|
||||
{trade.agreed_price_eur.toLocaleString("es-ES", {
|
||||
{trade.agreed_price_eur.toLocaleString(intlLocale, {
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/BTC
|
||||
</span>
|
||||
</div>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Premium:</span>
|
||||
<span style={styles.detailLabel}>{t("details.premium")}</span>
|
||||
<span style={styles.detailValue}>{trade.premium_percentage}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.detailSection}>
|
||||
<h2 style={styles.sectionTitle}>Timestamps</h2>
|
||||
<h2 style={styles.sectionTitle}>{t("details.timestamps")}</h2>
|
||||
<div style={styles.detailGrid}>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Created:</span>
|
||||
<span style={styles.detailValue}>{formatDateTime(trade.created_at)}</span>
|
||||
<span style={styles.detailLabel}>{t("details.created")}</span>
|
||||
<span style={styles.detailValue}>
|
||||
{formatDateTime(trade.created_at, intlLocale)}
|
||||
</span>
|
||||
</div>
|
||||
{trade.cancelled_at && (
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Cancelled:</span>
|
||||
<span style={styles.detailValue}>{formatDateTime(trade.cancelled_at)}</span>
|
||||
<span style={styles.detailLabel}>{t("details.cancelled")}</span>
|
||||
<span style={styles.detailValue}>
|
||||
{formatDateTime(trade.cancelled_at, intlLocale)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{trade.completed_at && (
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Completed:</span>
|
||||
<span style={styles.detailValue}>{formatDateTime(trade.completed_at)}</span>
|
||||
<span style={styles.detailLabel}>{t("details.completed")}</span>
|
||||
<span style={styles.detailValue}>
|
||||
{formatDateTime(trade.completed_at, intlLocale)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -204,23 +215,19 @@ export default function TradeDetailPage() {
|
|||
<div style={styles.actionSection}>
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (
|
||||
!confirm(
|
||||
"Are you sure you want to cancel this trade? This action cannot be undone."
|
||||
)
|
||||
) {
|
||||
if (!confirm(t("details.cancelConfirm"))) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await tradesApi.cancelTrade(trade.public_id);
|
||||
router.push("/trades");
|
||||
} catch (err) {
|
||||
setCancelError(err instanceof Error ? err.message : "Failed to cancel trade");
|
||||
setCancelError(err instanceof Error ? err.message : t("details.cancelTrade"));
|
||||
}
|
||||
}}
|
||||
style={buttonStyles.secondaryButton}
|
||||
>
|
||||
Cancel Trade
|
||||
{t("details.cancelTrade")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue