refactor: extract shared formatEur and getTradeStatusDisplay utilities

- Create frontend/app/utils/exchange.ts with shared formatting functions
- Update exchange/page.tsx to use shared formatEur
- Update trades/page.tsx to use shared formatEur and getTradeStatusDisplay
- Update admin/trades/page.tsx to use shared formatEur and getTradeStatusDisplay
- SatsDisplay was already extracted (confirmed it's in components/SatsDisplay.tsx)

frontend/app/admin/trades/page.tsx

@@ -9,6 +9,7 @@ import { SatsDisplay } from "../../components/SatsDisplay";
 import { useRequireAuth } from "../../hooks/useRequireAuth";
 import { components } from "../../generated/api";
 import { formatDateTime } from "../../utils/date";
+import { formatEur, getTradeStatusDisplay } from "../../utils/exchange";
 import {
   layoutStyles,
   typographyStyles,
@@ -19,61 +20,6 @@ import {
 
 type AdminExchangeResponse = components["schemas"]["AdminExchangeResponse"];
 
-/**
- * Format EUR amount from cents to display string
- */
-function formatEur(cents: number): string {
-  return `€${(cents / 100).toLocaleString("de-DE")}`;
-}
-
-/**
- * Get status display properties
- */
-function getTradeStatusDisplay(status: string): {
-  text: string;
-  bgColor: string;
-  textColor: string;
-} {
-  switch (status) {
-    case "booked":
-      return {
-        text: "Pending",
-        bgColor: "rgba(99, 102, 241, 0.2)",
-        textColor: "rgba(129, 140, 248, 0.9)",
-      };
-    case "completed":
-      return {
-        text: "Completed",
-        bgColor: "rgba(34, 197, 94, 0.2)",
-        textColor: "rgba(34, 197, 94, 0.9)",
-      };
-    case "cancelled_by_user":
-      return {
-        text: "User Cancelled",
-        bgColor: "rgba(239, 68, 68, 0.2)",
-        textColor: "rgba(239, 68, 68, 0.9)",
-      };
-    case "cancelled_by_admin":
-      return {
-        text: "Admin Cancelled",
-        bgColor: "rgba(239, 68, 68, 0.2)",
-        textColor: "rgba(239, 68, 68, 0.9)",
-      };
-    case "no_show":
-      return {
-        text: "No Show",
-        bgColor: "rgba(251, 146, 60, 0.2)",
-        textColor: "rgba(251, 146, 60, 0.9)",
-      };
-    default:
-      return {
-        text: status,
-        bgColor: "rgba(255, 255, 255, 0.1)",
-        textColor: "rgba(255, 255, 255, 0.6)",
-      };
-  }
-}
-
 type Tab = "upcoming" | "past";
 
 export default function AdminTradesPage() {

frontend/app/exchange/page.tsx

@@ -10,6 +10,7 @@ import { SatsDisplay } from "../components/SatsDisplay";
 import { useRequireAuth } from "../hooks/useRequireAuth";
 import { components } from "../generated/api";
 import { formatDate, formatTime, getDateRange } from "../utils/date";
+import { formatEur } from "../utils/exchange";
 import { layoutStyles, typographyStyles, bannerStyles, buttonStyles } from "../styles/shared";
 
 type ExchangePriceResponse = components["schemas"]["ExchangePriceResponse"];
@@ -24,13 +25,6 @@ const MAX_ADVANCE_DAYS = 30;
 type Direction = "buy" | "sell";
 type WizardStep = "details" | "booking";
 
-/**
- * Format EUR amount from cents to display string
- */
-function formatEur(cents: number): string {
-  return `€${(cents / 100).toLocaleString("de-DE")}`;
-}
-
 /**
  * Format price for display
  */

frontend/app/trades/page.tsx

@@ -9,6 +9,7 @@ import { SatsDisplay } from "../components/SatsDisplay";
 import { useRequireAuth } from "../hooks/useRequireAuth";
 import { components } from "../generated/api";
 import { formatDateTime } from "../utils/date";
+import { formatEur, getTradeStatusDisplay } from "../utils/exchange";
 import {
   layoutStyles,
   typographyStyles,
@@ -19,61 +20,6 @@ import {
 
 type ExchangeResponse = components["schemas"]["ExchangeResponse"];
 
-/**
- * Format EUR amount from cents to display string
- */
-function formatEur(cents: number): string {
-  return `€${(cents / 100).toLocaleString("de-DE")}`;
-}
-
-/**
- * Get status display properties
- */
-function getTradeStatusDisplay(status: string): {
-  text: string;
-  bgColor: string;
-  textColor: string;
-} {
-  switch (status) {
-    case "booked":
-      return {
-        text: "Pending",
-        bgColor: "rgba(99, 102, 241, 0.2)",
-        textColor: "rgba(129, 140, 248, 0.9)",
-      };
-    case "completed":
-      return {
-        text: "Completed",
-        bgColor: "rgba(34, 197, 94, 0.2)",
-        textColor: "rgba(34, 197, 94, 0.9)",
-      };
-    case "cancelled_by_user":
-      return {
-        text: "Cancelled",
-        bgColor: "rgba(239, 68, 68, 0.2)",
-        textColor: "rgba(239, 68, 68, 0.9)",
-      };
-    case "cancelled_by_admin":
-      return {
-        text: "Cancelled by Admin",
-        bgColor: "rgba(239, 68, 68, 0.2)",
-        textColor: "rgba(239, 68, 68, 0.9)",
-      };
-    case "no_show":
-      return {
-        text: "No Show",
-        bgColor: "rgba(251, 146, 60, 0.2)",
-        textColor: "rgba(251, 146, 60, 0.9)",
-      };
-    default:
-      return {
-        text: status,
-        bgColor: "rgba(255, 255, 255, 0.1)",
-        textColor: "rgba(255, 255, 255, 0.6)",
-      };
-  }
-}
-
 export default function TradesPage() {
   const { user, isLoading, isAuthorized } = useRequireAuth({
     requiredPermission: Permission.VIEW_OWN_EXCHANGES,

frontend/app/utils/exchange.ts

@@ -0,0 +1,59 @@
+/**
+ * Exchange-related utility functions for formatting and display.
+ */
+
+/**
+ * Format EUR amount from cents to display string.
+ * e.g., 10000 -> "€100"
+ */
+export function formatEur(cents: number): string {
+  return `€${(cents / 100).toLocaleString("de-DE")}`;
+}
+
+/**
+ * Get status display properties for trade status badges.
+ */
+export function getTradeStatusDisplay(status: string): {
+  text: string;
+  bgColor: string;
+  textColor: string;
+} {
+  switch (status) {
+    case "booked":
+      return {
+        text: "Pending",
+        bgColor: "rgba(99, 102, 241, 0.2)",
+        textColor: "rgba(129, 140, 248, 0.9)",
+      };
+    case "completed":
+      return {
+        text: "Completed",
+        bgColor: "rgba(34, 197, 94, 0.2)",
+        textColor: "rgba(34, 197, 94, 0.9)",
+      };
+    case "cancelled_by_user":
+      return {
+        text: "User Cancelled",
+        bgColor: "rgba(239, 68, 68, 0.2)",
+        textColor: "rgba(239, 68, 68, 0.9)",
+      };
+    case "cancelled_by_admin":
+      return {
+        text: "Admin Cancelled",
+        bgColor: "rgba(239, 68, 68, 0.2)",
+        textColor: "rgba(239, 68, 68, 0.9)",
+      };
+    case "no_show":
+      return {
+        text: "No Show",
+        bgColor: "rgba(251, 146, 60, 0.2)",
+        textColor: "rgba(251, 146, 60, 0.9)",
+      };
+    default:
+      return {
+        text: status,
+        bgColor: "rgba(255, 255, 255, 0.1)",
+        textColor: "rgba(255, 255, 255, 0.6)",
+      };
+  }
+}