Phase 6: Translate User Pages - exchange, trades, invites, profile

- Expand exchange.json with all exchange page strings (page, steps, detailsStep, bookingStep, confirmationStep, priceDisplay)
- Create trades.json translation files for es, en, ca
- Create invites.json translation files for es, en, ca
- Create profile.json translation files for es, en, ca
- Translate exchange page and all components (ExchangeDetailsStep, BookingStep, ConfirmationStep, StepIndicator, PriceDisplay)
- Translate trades page (titles, sections, buttons, status labels)
- Translate invites page (titles, sections, status badges, copy button)
- Translate profile page (form labels, hints, placeholders, messages)
- Update IntlProvider to load all new namespaces
- All frontend tests passing

frontend/app/exchange/components/ConfirmationStep.tsx

@@ -6,6 +6,7 @@ import { components } from "../../generated/api";
 import { formatTime } from "../../utils/date";
 import { formatEur } from "../../utils/exchange";
 import { buttonStyles } from "../../styles/shared";
+import { useTranslation } from "../../hooks/useTranslation";
 
 type BookableSlot = components["schemas"]["BookableSlot"];
 type Direction = "buy" | "sell";
@@ -154,14 +155,15 @@ export function ConfirmationStep({
   onConfirm,
   onBack,
 }: ConfirmationStepProps) {
+  const t = useTranslation("exchange");
   return (
     <>
       {/* Compressed Booking Summary */}
       <div style={styles.compressedBookingCard}>
         <div style={styles.compressedBookingHeader}>
-          <span style={styles.compressedBookingTitle}>Appointment</span>
+          <span style={styles.compressedBookingTitle}>{t("confirmationStep.appointment")}</span>
           <button onClick={onBack} style={styles.editButton}>
-            Edit
+            {t("confirmationStep.edit")}
           </button>
         </div>
         <div style={styles.compressedBookingDetails}>
@@ -181,44 +183,48 @@ export function ConfirmationStep({
 
       {/* Confirmation Card */}
       <div style={styles.confirmCard}>
-        <h3 style={styles.confirmTitle}>Confirm Trade</h3>
+        <h3 style={styles.confirmTitle}>{t("confirmationStep.confirmTrade")}</h3>
         <div style={styles.confirmDetails}>
           <div style={styles.confirmRow}>
-            <span style={styles.confirmLabel}>Time:</span>
+            <span style={styles.confirmLabel}>{t("confirmationStep.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.confirmLabel}>{t("confirmationStep.direction")}</span>
             <span
               style={{
                 ...styles.confirmValue,
                 color: direction === "buy" ? "#4ade80" : "#f87171",
               }}
             >
-              {direction === "buy" ? "Buy BTC" : "Sell BTC"}
+              {direction === "buy" ? t("direction.buyShort") : t("direction.sellShort")}
             </span>
           </div>
           <div style={styles.confirmRow}>
-            <span style={styles.confirmLabel}>EUR:</span>
+            <span style={styles.confirmLabel}>{t("confirmationStep.eur")}</span>
             <span style={styles.confirmValue}>{formatEur(eurAmount)}</span>
           </div>
           <div style={styles.confirmRow}>
-            <span style={styles.confirmLabel}>BTC:</span>
+            <span style={styles.confirmLabel}>{t("confirmationStep.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.confirmLabel}>{t("confirmationStep.rate")}</span>
             <span style={styles.confirmValue}>{formatPrice(agreedPrice)}/BTC</span>
           </div>
           <div style={styles.confirmRow}>
-            <span style={styles.confirmLabel}>Payment:</span>
+            <span style={styles.confirmLabel}>{t("confirmationStep.payment")}</span>
             <span style={styles.confirmValue}>
-              {direction === "buy" ? "Receive via " : "Send via "}
-              {bitcoinTransferMethod === "onchain" ? "Onchain" : "Lightning"}
+              {direction === "buy"
+                ? t("confirmationStep.receiveVia")
+                : t("confirmationStep.sendVia")}{" "}
+              {bitcoinTransferMethod === "onchain"
+                ? t("transferMethod.onchain")
+                : t("transferMethod.lightning")}
             </span>
           </div>
         </div>
@@ -237,13 +243,15 @@ export function ConfirmationStep({
             }}
           >
             {isBooking
-              ? "Booking..."
+              ? t("confirmationStep.booking")
               : isPriceStale
-                ? "Price Stale"
-                : `Confirm ${direction === "buy" ? "Buy" : "Sell"}`}
+                ? t("confirmationStep.priceStale")
+                : direction === "buy"
+                  ? t("confirmationStep.confirmBuy")
+                  : t("confirmationStep.confirmSell")}
           </button>
           <button onClick={onBack} disabled={isBooking} style={styles.cancelButton}>
-            Back
+            {t("confirmationStep.back")}
           </button>
         </div>
       </div>