Phase 1: Infrastructure setup - Install next-intl and create basic i18n structure

- Install next-intl package
- Create LanguageProvider hook with localStorage persistence
- Create IntlProvider component for next-intl integration
- Create Providers wrapper component
- Update layout.tsx to include providers and set default lang to 'es'
- Create initial translation files (common.json) for es, en, ca
- Fix pre-existing TypeScript errors in various pages

All tests passing, build successful.

frontend/app/trades/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CSSProperties } from "react";
+import { CSSProperties, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { Permission } from "../../auth-context";
 import { tradesApi } from "../../api";
@@ -23,6 +23,7 @@ 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 { user, isLoading, isAuthorized } = useRequireAuth({
     requiredPermission: Permission.VIEW_OWN_EXCHANGES,
@@ -78,6 +79,10 @@ export default function TradeDetailPage() {
     );
   }
 
+  if (!trade) {
+    return null;
+  }
+
   const isBuy = trade.direction === "buy";
 
   return (
@@ -97,7 +102,7 @@ export default function TradeDetailPage() {
             <div style={styles.detailGrid}>
               <div style={styles.detailRow}>
                 <span style={styles.detailLabel}>Status:</span>
-                <StatusBadge tradeStatus={trade.status} />
+                <StatusBadge tradeStatus={trade.status}>{""}</StatusBadge>
               </div>
               <div style={styles.detailRow}>
                 <span style={styles.detailLabel}>Time:</span>
@@ -194,6 +199,7 @@ export default function TradeDetailPage() {
             </div>
           </div>
 
+          {cancelError && <div style={bannerStyles.errorBanner}>{cancelError}</div>}
           {trade.status === "booked" && (
             <div style={styles.actionSection}>
               <button
@@ -209,7 +215,7 @@ export default function TradeDetailPage() {
                     await tradesApi.cancelTrade(trade.public_id);
                     router.push("/trades");
                   } catch (err) {
-                    setError(err instanceof Error ? err.message : "Failed to cancel trade");
+                    setCancelError(err instanceof Error ? err.message : "Failed to cancel trade");
                   }
                 }}
                 style={buttonStyles.secondaryButton}

frontend/app/trades/page.tsx

@@ -8,6 +8,7 @@ import { PageLayout } from "../components/PageLayout";
 import { SatsDisplay } from "../components/SatsDisplay";
 import { StatusBadge } from "../components/StatusBadge";
 import { EmptyState } from "../components/EmptyState";
+import { ConfirmationButton } from "../components/ConfirmationButton";
 import { useRequireAuth } from "../hooks/useRequireAuth";
 import { useAsyncData } from "../hooks/useAsyncData";
 import { useMutation } from "../hooks/useMutation";
@@ -54,10 +55,10 @@ export default function TradesPage() {
     }
   };
 
-  const upcomingTrades = trades.filter(
+  const upcomingTrades = (trades ?? []).filter(
     (t) => t.status === "booked" && new Date(t.slot_start) > new Date()
   );
-  const pastOrFinalTrades = trades.filter(
+  const pastOrFinalTrades = (trades ?? []).filter(
     (t) => t.status !== "booked" || new Date(t.slot_start) <= new Date()
   );
 
@@ -74,7 +75,7 @@ export default function TradesPage() {
 
       {isLoadingTrades ? (
         <EmptyState message="Loading trades..." isLoading={true} />
-      ) : trades.length === 0 ? (
+      ) : (trades?.length ?? 0) === 0 ? (
         <EmptyState
           message="You don't have any trades yet."
           action={
@@ -140,7 +141,9 @@ export default function TradesPage() {
                               /BTC
                             </span>
                           </div>
-                          <StatusBadge tradeStatus={trade.status} style={{ marginTop: "0.5rem" }} />
+                          <StatusBadge tradeStatus={trade.status} style={{ marginTop: "0.5rem" }}>
+                            {""}
+                          </StatusBadge>
                         </div>
 
                         <div style={tradeCardStyles.buttonGroup}>
@@ -224,7 +227,7 @@ export default function TradesPage() {
                         </span>
                       </div>
                       <div style={tradeCardStyles.buttonGroup}>
-                        <StatusBadge tradeStatus={trade.status} />
+                        <StatusBadge tradeStatus={trade.status}>{""}</StatusBadge>
                         <button
                           onClick={(e) => {
                             e.stopPropagation();