a few small fixes

2025-12-26 19:00:56 +01:00 · 2025-12-26 19:00:56 +01:00 · 8503c760dc
commit 8503c760dc
parent f6c552cefd
8 changed files with 157 additions and 55 deletions
--- a/frontend/app/components/LanguageSelector.tsx
+++ b/frontend/app/components/LanguageSelector.tsx
@ -4,10 +4,10 @@ import { useState, useRef, useEffect } from "react";
 import { useLanguage, type Locale } from "../hooks/useLanguage";
 import { sharedStyles } from "../styles/shared";

-const LANGUAGES: Array<{ code: Locale; name: string; flag: string }> = [
-  { code: "es", name: "Español", flag: "🇪🇸" },
-  { code: "en", name: "English", flag: "🇬🇧" },
-  { code: "ca", name: "Català", flag: "🇪🇸" },
+const LANGUAGES: Array<{ code: Locale; name: string }> = [
+  { code: "es", name: "Español" },
+  { code: "en", name: "English" },
+  { code: "ca", name: "Català" },
 ];

 export function LanguageSelector() {
@ -45,7 +45,6 @@ export function LanguageSelector() {
          gap: "0.5rem",
        }}
      >
-        <span>{currentLanguage?.flag}</span>
        <span>{currentLanguage?.name}</span>
      </button>

@ -97,7 +96,6 @@ export function LanguageSelector() {
                }
              }}
            >
-              <span>{lang.flag}</span>
              <span>{lang.name}</span>
            </button>
          ))}
--- a/frontend/app/exchange/components/BookingStep.tsx
+++ b/frontend/app/exchange/components/BookingStep.tsx
@ -7,6 +7,7 @@ import { formatDate, formatTime } from "../../utils/date";
 import { formatEur } from "../../utils/exchange";
 import { bannerStyles } from "../../styles/shared";
 import { useTranslation } from "../../hooks/useTranslation";
+import { useLanguage } from "../../hooks/useLanguage";

 type BookableSlot = components["schemas"]["BookableSlot"];
 type ExchangeResponse = components["schemas"]["ExchangeResponse"];
@ -217,6 +218,10 @@ export function BookingStep({
  onBackToDetails,
 }: BookingStepProps) {
  const t = useTranslation("exchange");
+  const { locale } = useLanguage();
+
+  // Map locale codes to Intl locale strings
+  const intlLocale = locale === "es" ? "es-ES" : locale === "ca" ? "ca-ES" : "en-US";
  return (
    <>
      {/* Trade Summary Card */}
@ -277,10 +282,10 @@ export function BookingStep({
                }}
              >
                <div style={styles.dateWeekday}>
-                  {date.toLocaleDateString("es-ES", { weekday: "short" })}
+                  {date.toLocaleDateString(intlLocale, { weekday: "short" })}
                </div>
                <div style={styles.dateDay}>
-                  {date.toLocaleDateString("es-ES", {
+                  {date.toLocaleDateString(intlLocale, {
                    month: "short",
                    day: "numeric",
                  })}
@ -312,7 +317,7 @@ export function BookingStep({
        <div style={styles.section}>
          <h2 style={styles.sectionTitle}>
            {t("bookingStep.availableSlots")}{" "}
-            {selectedDate.toLocaleDateString("es-ES", {
+            {selectedDate.toLocaleDateString(intlLocale, {
              weekday: "long",
              month: "long",
              day: "numeric",
--- a/frontend/app/exchange/components/ConfirmationStep.tsx
+++ b/frontend/app/exchange/components/ConfirmationStep.tsx
@ -7,6 +7,7 @@ import { formatTime } from "../../utils/date";
 import { formatEur } from "../../utils/exchange";
 import { buttonStyles } from "../../styles/shared";
 import { useTranslation } from "../../hooks/useTranslation";
+import { useLanguage } from "../../hooks/useLanguage";

 type BookableSlot = components["schemas"]["BookableSlot"];
 type Direction = "buy" | "sell";
@ -156,6 +157,10 @@ export function ConfirmationStep({
  onBack,
 }: ConfirmationStepProps) {
  const t = useTranslation("exchange");
+  const { locale } = useLanguage();
+
+  // Map locale codes to Intl locale strings
+  const intlLocale = locale === "es" ? "es-ES" : locale === "ca" ? "ca-ES" : "en-US";
  return (
    <>
      {/* Compressed Booking Summary */}
@ -168,7 +173,7 @@ export function ConfirmationStep({
        </div>
        <div style={styles.compressedBookingDetails}>
          <span>
-            {selectedDate?.toLocaleDateString("es-ES", {
+            {selectedDate?.toLocaleDateString(intlLocale, {
              weekday: "short",
              month: "short",
              day: "numeric",
--- a/frontend/app/trades/[id]/page.tsx
+++ b/frontend/app/trades/[id]/page.tsx
@ -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>
          )}
--- a/frontend/app/utils/date.ts
+++ b/frontend/app/utils/date.ts
@ -27,9 +27,9 @@ export function formatTime(isoString: string): string {
 /**
 * Format datetime from ISO string to a readable format in local timezone.
 */
-export function formatDateTime(isoString: string): string {
+export function formatDateTime(isoString: string, locale: string = "es-ES"): string {
  const d = new Date(isoString);
-  return d.toLocaleString("es-ES", {
+  return d.toLocaleString(locale, {
    weekday: "short",
    month: "short",
    day: "numeric",
--- a/frontend/locales/ca/trades.json
+++ b/frontend/locales/ca/trades.json
@ -12,5 +12,34 @@
    "rate": "Taxa:",
    "cancel": "Cancel·lar",
    "viewDetails": "Veure Detalls"
+  },
+  "details": {
+    "title": "Detalls de l'Operació",
+    "loading": "Carregant...",
+    "backToTrades": "← Tornar a Operacions",
+    "backToTradesShort": "Tornar a Operacions",
+    "error": "Error en carregar l'operació. Pot ser que no existeixi o no tenguis permís per veure-la.",
+    "tradeInformation": "Informació de l'Operació",
+    "amounts": "Quantitats",
+    "pricing": "Preus",
+    "timestamps": "Dates",
+    "status": "Estat:",
+    "time": "Hora:",
+    "direction": "Direcció:",
+    "paymentMethod": "Mètode de Pagament:",
+    "eurAmount": "Quantitat EUR:",
+    "bitcoinAmount": "Quantitat Bitcoin:",
+    "marketPrice": "Preu de Mercat:",
+    "agreedPrice": "Preu Acordat:",
+    "premium": "Prima:",
+    "created": "Creada:",
+    "cancelled": "Cancel·lada:",
+    "completed": "Completada:",
+    "buyBtc": "COMPRAR BTC",
+    "sellBtc": "VENDRE BTC",
+    "receiveVia": "Rebre via",
+    "sendVia": "Enviar via",
+    "cancelTrade": "Cancel·lar Operació",
+    "cancelConfirm": "Estàs segur que vols cancel·lar aquesta operació? Aquesta acció no es pot desfer."
  }
 }
--- a/frontend/locales/en/trades.json
+++ b/frontend/locales/en/trades.json
@ -12,5 +12,34 @@
    "rate": "Rate:",
    "cancel": "Cancel",
    "viewDetails": "View Details"
+  },
+  "details": {
+    "title": "Trade Details",
+    "loading": "Loading...",
+    "backToTrades": "← Back to Trades",
+    "backToTradesShort": "Back to Trades",
+    "error": "Failed to load trade. It may not exist or you may not have permission to view it.",
+    "tradeInformation": "Trade Information",
+    "amounts": "Amounts",
+    "pricing": "Pricing",
+    "timestamps": "Timestamps",
+    "status": "Status:",
+    "time": "Time:",
+    "direction": "Direction:",
+    "paymentMethod": "Payment Method:",
+    "eurAmount": "EUR Amount:",
+    "bitcoinAmount": "Bitcoin Amount:",
+    "marketPrice": "Market Price:",
+    "agreedPrice": "Agreed Price:",
+    "premium": "Premium:",
+    "created": "Created:",
+    "cancelled": "Cancelled:",
+    "completed": "Completed:",
+    "buyBtc": "BUY BTC",
+    "sellBtc": "SELL BTC",
+    "receiveVia": "Receive via",
+    "sendVia": "Send via",
+    "cancelTrade": "Cancel Trade",
+    "cancelConfirm": "Are you sure you want to cancel this trade? This action cannot be undone."
  }
 }
--- a/frontend/locales/es/trades.json
+++ b/frontend/locales/es/trades.json
@ -12,5 +12,34 @@
    "rate": "Tasa:",
    "cancel": "Cancelar",
    "viewDetails": "Ver Detalles"
+  },
+  "details": {
+    "title": "Detalles de la Operación",
+    "loading": "Cargando...",
+    "backToTrades": "← Volver a Operaciones",
+    "backToTradesShort": "Volver a Operaciones",
+    "error": "Error al cargar la operación. Puede que no exista o no tengas permiso para verla.",
+    "tradeInformation": "Información de la Operación",
+    "amounts": "Cantidades",
+    "pricing": "Precios",
+    "timestamps": "Fechas",
+    "status": "Estado:",
+    "time": "Hora:",
+    "direction": "Dirección:",
+    "paymentMethod": "Método de Pago:",
+    "eurAmount": "Cantidad EUR:",
+    "bitcoinAmount": "Cantidad Bitcoin:",
+    "marketPrice": "Precio de Mercado:",
+    "agreedPrice": "Precio Acordado:",
+    "premium": "Prima:",
+    "created": "Creada:",
+    "cancelled": "Cancelada:",
+    "completed": "Completada:",
+    "buyBtc": "COMPRAR BTC",
+    "sellBtc": "VENDER BTC",
+    "receiveVia": "Recibir vía",
+    "sendVia": "Enviar vía",
+    "cancelTrade": "Cancelar Operación",
+    "cancelConfirm": "¿Estás seguro de que quieres cancelar esta operación? Esta acción no se puede deshacer."
  }
 }