From e8d0ee2eca051f4b10b4ee03b942af0d8ca009ac Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Tue, 23 Dec 2025 12:23:32 +0100
Subject: [PATCH] refactor: import React types directly instead of namespace

Replace 'import React from "react"' with direct imports of
CSSProperties and ChangeEvent. This eliminates unused imports
and follows modern React patterns where the namespace import
is not required for JSX (React 17+).
---
 frontend/app/admin/trades/page.tsx      | 5 ++---
 frontend/app/components/SatsDisplay.tsx | 4 ++--
 frontend/app/exchange/page.tsx          | 7 +++----
 frontend/app/styles/shared.ts           | 4 ++--
 frontend/app/trades/page.tsx            | 5 ++---
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/frontend/app/admin/trades/page.tsx b/frontend/app/admin/trades/page.tsx
index d1f4b9f..b75188b 100644
--- a/frontend/app/admin/trades/page.tsx
+++ b/frontend/app/admin/trades/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import React from "react";
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, CSSProperties } from "react";
 import { Permission } from "../../auth-context";
 import { api } from "../../api";
 import { Header } from "../../components/Header";
@@ -341,7 +340,7 @@ export default function AdminTradesPage() {
 }
 
 // Page-specific styles (trade card styles are shared via tradeCardStyles)
-const styles: Record<string, React.CSSProperties> = {
+const styles: Record<string, CSSProperties> = {
   content: {
     flex: 1,
     padding: "2rem",
diff --git a/frontend/app/components/SatsDisplay.tsx b/frontend/app/components/SatsDisplay.tsx
index 8fef594..2a0bfec 100644
--- a/frontend/app/components/SatsDisplay.tsx
+++ b/frontend/app/components/SatsDisplay.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { CSSProperties } from "react";
 
 /**
  * Format satoshi amount with styled components.
@@ -26,7 +26,7 @@ export function SatsDisplay({ sats }: { sats: number }) {
   }
 
   // Build the display with subtle leading zeros and prominent digits
-  const subtleStyle: React.CSSProperties = {
+  const subtleStyle: CSSProperties = {
     opacity: 0.45,
     fontWeight: 400,
   };
diff --git a/frontend/app/exchange/page.tsx b/frontend/app/exchange/page.tsx
index 047644d..1b1fe6e 100644
--- a/frontend/app/exchange/page.tsx
+++ b/frontend/app/exchange/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import React from "react";
-import { useEffect, useState, useCallback, useMemo } from "react";
+import { useEffect, useState, useCallback, useMemo, ChangeEvent, CSSProperties } from "react";
 import { useRouter } from "next/navigation";
 import { Permission } from "../auth-context";
 import { api } from "../api";
@@ -221,7 +220,7 @@ export default function ExchangePage() {
     setEurAmount(clamped);
   };
 
-  const handleAmountInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleAmountInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value.replace(/[^0-9]/g, "");
     if (inputValue === "") {
       setEurAmount(eurMin * 100);
@@ -599,7 +598,7 @@ export default function ExchangePage() {
 }
 
 // Page-specific styles
-const styles: Record<string, React.CSSProperties> = {
+const styles: Record<string, CSSProperties> = {
   content: {
     flex: 1,
     padding: "2rem",
diff --git a/frontend/app/styles/shared.ts b/frontend/app/styles/shared.ts
index cc5fd59..6ad0ccc 100644
--- a/frontend/app/styles/shared.ts
+++ b/frontend/app/styles/shared.ts
@@ -1,4 +1,4 @@
-import React from "react";
+import { CSSProperties } from "react";
 
 /**
  * Design tokens - centralized values for consistency.
@@ -54,7 +54,7 @@ const tokens = {
   radius3xl: "24px",
 } as const;
 
-type StyleRecord = Record<string, React.CSSProperties>;
+type StyleRecord = Record<string, CSSProperties>;
 
 // =============================================================================
 // Layout Styles
diff --git a/frontend/app/trades/page.tsx b/frontend/app/trades/page.tsx
index d311187..68d86cd 100644
--- a/frontend/app/trades/page.tsx
+++ b/frontend/app/trades/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import React from "react";
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, CSSProperties } from "react";
 import { Permission } from "../auth-context";
 import { api } from "../api";
 import { Header } from "../components/Header";
@@ -258,7 +257,7 @@ export default function TradesPage() {
 }
 
 // Page-specific styles (trade card styles are shared via tradeCardStyles)
-const styles: Record<string, React.CSSProperties> = {
+const styles: Record<string, CSSProperties> = {
   content: {
     flex: 1,
     padding: "2rem",