fmt: apply prettier to frontend JS/TS/CSS/JSON files

Initial prettier pass with tabWidth=4.

frontend/src/App.jsx

@@ -7,56 +7,71 @@ import Alerts from "./pages/Alerts";
 import AlertHistory from "./pages/AlertHistory";
 
 export default function App() {
-  const { currentUser, logout } = useAuth();
+    const { currentUser, logout } = useAuth();
 
-  // Show login/signup routes if not authenticated
-  if (!currentUser) {
+    // Show login/signup routes if not authenticated
+    if (!currentUser) {
+        return (
+            <Routes>
+                <Route path="/login" element={<Login />} />
+                <Route path="/signup" element={<Signup />} />
+                <Route path="*" element={<Navigate to="/login" />} />
+            </Routes>
+        );
+    }
+
+    // Show main app if authenticated
     return (
-      <Routes>
-        <Route path="/login" element={<Login />} />
-        <Route path="/signup" element={<Signup />} />
-        <Route path="*" element={<Navigate to="/login" />} />
-      </Routes>
+        <div style={{ padding: "1rem" }}>
+            <nav
+                style={{
+                    marginBottom: "1rem",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }}
+            >
+                <div>
+                    <Link to="/addresses">Addresses</Link>
+                    {" | "}
+                    <Link to="/alerts">Alerts</Link>
+                    {" | "}
+                    <Link to="/history">History</Link>
+                </div>
+                <div
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "1rem",
+                    }}
+                >
+                    <span style={{ fontSize: "0.9rem", color: "#999" }}>
+                        {currentUser.email}
+                    </span>
+                    <button
+                        onClick={logout}
+                        style={{
+                            padding: "0.5rem 1rem",
+                            fontSize: "0.9rem",
+                            backgroundColor: "#333",
+                            color: "white",
+                            border: "1px solid #555",
+                            borderRadius: "4px",
+                            cursor: "pointer",
+                        }}
+                    >
+                        Logout
+                    </button>
+                </div>
+            </nav>
+
+            <Routes>
+                <Route path="/" element={<Addresses />} />
+                <Route path="/addresses" element={<Addresses />} />
+                <Route path="/alerts" element={<Alerts />} />
+                <Route path="/history" element={<AlertHistory />} />
+                <Route path="*" element={<Navigate to="/addresses" />} />
+            </Routes>
+        </div>
     );
-  }
-
-  // Show main app if authenticated
-  return (
-    <div style={{ padding: "1rem" }}>
-      <nav style={{ marginBottom: "1rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <div>
-          <Link to="/addresses">Addresses</Link>{" | "}
-          <Link to="/alerts">Alerts</Link>{" | "}
-          <Link to="/history">History</Link>
-        </div>
-        <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
-          <span style={{ fontSize: "0.9rem", color: "#999" }}>
-            {currentUser.email}
-          </span>
-          <button
-            onClick={logout}
-            style={{
-              padding: "0.5rem 1rem",
-              fontSize: "0.9rem",
-              backgroundColor: "#333",
-              color: "white",
-              border: "1px solid #555",
-              borderRadius: "4px",
-              cursor: "pointer"
-            }}
-          >
-            Logout
-          </button>
-        </div>
-      </nav>
-
-      <Routes>
-        <Route path="/" element={<Addresses />} />
-        <Route path="/addresses" element={<Addresses />} />
-        <Route path="/alerts" element={<Alerts />} />
-        <Route path="/history" element={<AlertHistory />} />
-        <Route path="*" element={<Navigate to="/addresses" />} />
-      </Routes>
-    </div>
-  );
 }

frontend/src/api/addresses.jsx

@@ -1,7 +1,7 @@
 // API client for address management
 
-import { getAuthHeaders, getAuthHeadersSimple } from './authHeaders';
-import { API_BASE } from './config';
+import { getAuthHeaders, getAuthHeadersSimple } from "./authHeaders";
+import { API_BASE } from "./config";
 
 /**
  * Create a new blockchain address to monitor
@@ -11,35 +11,37 @@ import { API_BASE } from './config';
  * @returns {Promise<Object>} Created address with id and metadata
  */
 export async function createAddress(data) {
-  try {
-  const headers = await getAuthHeaders();
-  const response = await fetch(`${API_BASE}/addresses`, {
-    method: 'POST',
-    headers: headers,
-    body: JSON.stringify(data)
-  });
-  
-  if (!response.ok) {
-      // Try to parse error response, but handle if it's not JSON
-      let errorMessage = 'Failed to create address';
-      try {
-    const error = await response.json();
-        errorMessage = error.message || errorMessage;
-      } catch {
-        // If JSON parse fails, use status text
-        errorMessage = `Server error: ${response.status} ${response.statusText}`;
-      }
-      throw new Error(errorMessage);
-  }
-  
-  return response.json();
-  } catch (error) {
-    // Handle network errors
-    if (error.message.includes('fetch')) {
-      throw new Error('Cannot connect to server. Is the backend running?');
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/addresses`, {
+            method: "POST",
+            headers: headers,
+            body: JSON.stringify(data),
+        });
+
+        if (!response.ok) {
+            // Try to parse error response, but handle if it's not JSON
+            let errorMessage = "Failed to create address";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                // If JSON parse fails, use status text
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        // Handle network errors
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
     }
-    throw error;
-  }
 }
 
 /**
@@ -47,33 +49,35 @@ export async function createAddress(data) {
  * @returns {Promise<Array>} List of all addresses
  */
 export async function getAddresses() {
-  try {
-  const headers = await getAuthHeadersSimple();
-  const response = await fetch(`${API_BASE}/addresses`, {
-    headers: headers
-  });
-  
-  if (!response.ok) {
-      // Try to parse error response, but handle if it's not JSON
-      let errorMessage = 'Failed to fetch addresses';
-      try {
-    const error = await response.json();
-        errorMessage = error.message || errorMessage;
-      } catch {
-        // If JSON parse fails, use status text
-        errorMessage = `Server error: ${response.status} ${response.statusText}`;
-      }
-      throw new Error(errorMessage);
-  }
-  
-  return response.json();
-  } catch (error) {
-    // Handle network errors or JSON parse errors
-    if (error.message.includes('fetch')) {
-      throw new Error('Cannot connect to server. Is the backend running?');
+    try {
+        const headers = await getAuthHeadersSimple();
+        const response = await fetch(`${API_BASE}/addresses`, {
+            headers: headers,
+        });
+
+        if (!response.ok) {
+            // Try to parse error response, but handle if it's not JSON
+            let errorMessage = "Failed to fetch addresses";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                // If JSON parse fails, use status text
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        // Handle network errors or JSON parse errors
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
     }
-    throw error;
-  }
 }
 
 /**
@@ -82,31 +86,32 @@ export async function getAddresses() {
  * @returns {Promise<void>}
  */
 export async function deleteAddress(addressId) {
-  try {
-  const headers = await getAuthHeadersSimple();
-  const response = await fetch(`${API_BASE}/addresses/${addressId}`, {
-    method: 'DELETE',
-    headers: headers
-  });
-  
-  if (!response.ok && response.status !== 204) {
-      // Try to parse error response, but handle if it's not JSON
-      let errorMessage = 'Failed to delete address';
-      try {
-    const error = await response.json();
-        errorMessage = error.message || errorMessage;
-      } catch {
-        // If JSON parse fails, use status text
-        errorMessage = `Server error: ${response.status} ${response.statusText}`;
-      }
-      throw new Error(errorMessage);
-    }
-  } catch (error) {
-    // Handle network errors
-    if (error.message.includes('fetch')) {
-      throw new Error('Cannot connect to server. Is the backend running?');
-    }
-    throw error;
-  }
-}
+    try {
+        const headers = await getAuthHeadersSimple();
+        const response = await fetch(`${API_BASE}/addresses/${addressId}`, {
+            method: "DELETE",
+            headers: headers,
+        });
 
+        if (!response.ok && response.status !== 204) {
+            // Try to parse error response, but handle if it's not JSON
+            let errorMessage = "Failed to delete address";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                // If JSON parse fails, use status text
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+    } catch (error) {
+        // Handle network errors
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}

frontend/src/api/alertEvents.jsx

@@ -1,35 +1,37 @@
 // API client for alert event history
 
-import { getAuthHeadersSimple } from './authHeaders';
-import { API_BASE } from './config';
+import { getAuthHeadersSimple } from "./authHeaders";
+import { API_BASE } from "./config";
 
 /**
  * Get all alert events (history)
  * @returns {Promise<Array>} List of alert events, sorted by most recent first
  */
 export async function getAlertEvents() {
-  try {
-  const headers = await getAuthHeadersSimple();
-  const response = await fetch(`${API_BASE}/alert-events`, {
-    headers: headers
-  });
-  
-  if (!response.ok) {
-      let errorMessage = 'Failed to fetch alert events';
-      try {
-    const error = await response.json();
-        errorMessage = error.message || errorMessage;
-      } catch {
-        errorMessage = `Server error: ${response.status} ${response.statusText}`;
-      }
-      throw new Error(errorMessage);
-  }
-  
-  return response.json();
-  } catch (error) {
-    if (error.message.includes('fetch')) {
-      throw new Error('Cannot connect to server. Is the backend running?');
+    try {
+        const headers = await getAuthHeadersSimple();
+        const response = await fetch(`${API_BASE}/alert-events`, {
+            headers: headers,
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to fetch alert events";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
     }
-    throw error;
-  }
 }

frontend/src/api/alerts.jsx

@@ -1,16 +1,16 @@
 // API client for alert rule management
 
-import { getAuthHeaders, getAuthHeadersSimple } from './authHeaders';
-import { API_BASE } from './config';
+import { getAuthHeaders, getAuthHeadersSimple } from "./authHeaders";
+import { API_BASE } from "./config";
 
 /**
  * Alert types supported by the system
  */
 export const ALERT_TYPES = {
-  INCOMING_TX: 'incoming_tx',
-  OUTGOING_TX: 'outgoing_tx',
-  LARGE_TRANSFER: 'large_transfer',
-  BALANCE_BELOW: 'balance_below'
+    INCOMING_TX: "incoming_tx",
+    OUTGOING_TX: "outgoing_tx",
+    LARGE_TRANSFER: "large_transfer",
+    BALANCE_BELOW: "balance_below",
 };
 
 /**
@@ -22,32 +22,37 @@ export const ALERT_TYPES = {
  * @returns {Promise<Object>} Created alert rule
  */
 export async function createAlert(addressId, data) {
-  try {
-  const headers = await getAuthHeaders();
-  const response = await fetch(`${API_BASE}/addresses/${addressId}/alerts`, {
-    method: 'POST',
-    headers: headers,
-    body: JSON.stringify(data)
-  });
-  
-  if (!response.ok) {
-      let errorMessage = 'Failed to create alert rule';
-      try {
-    const error = await response.json();
-        errorMessage = error.message || errorMessage;
-      } catch {
-        errorMessage = `Server error: ${response.status} ${response.statusText}`;
-      }
-      throw new Error(errorMessage);
-  }
-  
-  return response.json();
-  } catch (error) {
-    if (error.message.includes('fetch')) {
-      throw new Error('Cannot connect to server. Is the backend running?');
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(
+            `${API_BASE}/addresses/${addressId}/alerts`,
+            {
+                method: "POST",
+                headers: headers,
+                body: JSON.stringify(data),
+            },
+        );
+
+        if (!response.ok) {
+            let errorMessage = "Failed to create alert rule";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
     }
-    throw error;
-  }
 }
 
 /**
@@ -56,30 +61,35 @@ export async function createAlert(addressId, data) {
  * @returns {Promise<Array>} List of alert rules
  */
 export async function getAlerts(addressId) {
-  try {
-  const headers = await getAuthHeadersSimple();
-  const response = await fetch(`${API_BASE}/addresses/${addressId}/alerts`, {
-    headers: headers
-  });
-  
-  if (!response.ok) {
-      let errorMessage = 'Failed to fetch alert rules';
-      try {
-    const error = await response.json();
-        errorMessage = error.message || errorMessage;
-      } catch {
-        errorMessage = `Server error: ${response.status} ${response.statusText}`;
-      }
-      throw new Error(errorMessage);
-  }
-  
-  return response.json();
-  } catch (error) {
-    if (error.message.includes('fetch')) {
-      throw new Error('Cannot connect to server. Is the backend running?');
+    try {
+        const headers = await getAuthHeadersSimple();
+        const response = await fetch(
+            `${API_BASE}/addresses/${addressId}/alerts`,
+            {
+                headers: headers,
+            },
+        );
+
+        if (!response.ok) {
+            let errorMessage = "Failed to fetch alert rules";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
     }
-    throw error;
-  }
 }
 
 /**
@@ -89,32 +99,34 @@ export async function getAlerts(addressId) {
  * @returns {Promise<Object>} Updated alert rule
  */
 export async function updateAlertStatus(alertId, enabled) {
-  try {
-  const headers = await getAuthHeaders();
-  const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
-    method: 'PATCH',
-    headers: headers,
-    body: JSON.stringify({ enabled })
-  });
-  
-  if (!response.ok) {
-      let errorMessage = 'Failed to update alert rule';
-      try {
-    const error = await response.json();
-        errorMessage = error.message || errorMessage;
-      } catch {
-        errorMessage = `Server error: ${response.status} ${response.statusText}`;
-      }
-      throw new Error(errorMessage);
-  }
-  
-  return response.json();
-  } catch (error) {
-    if (error.message.includes('fetch')) {
-      throw new Error('Cannot connect to server. Is the backend running?');
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
+            method: "PATCH",
+            headers: headers,
+            body: JSON.stringify({ enabled }),
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to update alert rule";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
     }
-    throw error;
-  }
 }
 
 /**
@@ -123,27 +135,29 @@ export async function updateAlertStatus(alertId, enabled) {
  * @returns {Promise<void>}
  */
 export async function deleteAlert(alertId) {
-  try {
-  const headers = await getAuthHeadersSimple();
-  const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
-    method: 'DELETE',
-    headers: headers
-  });
-  
-  if (!response.ok && response.status !== 204) {
-      let errorMessage = 'Failed to delete alert rule';
-      try {
-    const error = await response.json();
-        errorMessage = error.message || errorMessage;
-      } catch {
-        errorMessage = `Server error: ${response.status} ${response.statusText}`;
-      }
-      throw new Error(errorMessage);
+    try {
+        const headers = await getAuthHeadersSimple();
+        const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
+            method: "DELETE",
+            headers: headers,
+        });
+
+        if (!response.ok && response.status !== 204) {
+            let errorMessage = "Failed to delete alert rule";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
     }
-  } catch (error) {
-    if (error.message.includes('fetch')) {
-      throw new Error('Cannot connect to server. Is the backend running?');
-    }
-    throw error;
-  }
 }

frontend/src/api/authHeaders.js

@@ -1,30 +1,30 @@
 /**
  * Auth Headers Helper
- * 
+ *
  * Provides authentication headers for API calls
  * Includes Firebase ID token in Authorization header
  */
 
-import { auth } from '../firebase/config';
+import { auth } from "../firebase/config";
 
 /**
  * Get headers with authentication token
  * @returns {Promise<Object>} Headers object with Authorization
  */
 export async function getAuthHeaders() {
-  const currentUser = auth.currentUser;
-  
-  if (!currentUser) {
-    throw new Error('No authenticated user');
-  }
+    const currentUser = auth.currentUser;
 
-  // Get Firebase ID token
-  const token = await currentUser.getIdToken();
+    if (!currentUser) {
+        throw new Error("No authenticated user");
+    }
 
-  return {
-    'Content-Type': 'application/json',
-    'Authorization': `Bearer ${token}`
-  };
+    // Get Firebase ID token
+    const token = await currentUser.getIdToken();
+
+    return {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+    };
 }
 
 /**
@@ -32,16 +32,15 @@ export async function getAuthHeaders() {
  * @returns {Promise<Object>} Headers object with Authorization
  */
 export async function getAuthHeadersSimple() {
-  const currentUser = auth.currentUser;
-  
-  if (!currentUser) {
-    throw new Error('No authenticated user');
-  }
+    const currentUser = auth.currentUser;
 
-  const token = await currentUser.getIdToken();
+    if (!currentUser) {
+        throw new Error("No authenticated user");
+    }
 
-  return {
-    'Authorization': `Bearer ${token}`
-  };
+    const token = await currentUser.getIdToken();
+
+    return {
+        Authorization: `Bearer ${token}`,
+    };
 }
-

frontend/src/api/config.js

@@ -1 +1 @@
-export const API_BASE = import.meta.env.VITE_API_BASE || '/v1';
+export const API_BASE = import.meta.env.VITE_API_BASE || "/v1";

frontend/src/api/notificationConfig.jsx

@@ -1,37 +1,39 @@
 // API client for notification configuration
 
-import { getAuthHeaders } from './authHeaders';
-import { API_BASE } from './config';
+import { getAuthHeaders } from "./authHeaders";
+import { API_BASE } from "./config";
 
 /**
  * Get notification configuration for current user
  * @returns {Promise<Object>} Notification config
  */
 export async function getNotificationConfig() {
-  try {
-    const headers = await getAuthHeaders();
-    const response = await fetch(`${API_BASE}/notification-config`, {
-      headers: headers
-    });
-    
-    if (!response.ok) {
-      let errorMessage = 'Failed to fetch notification config';
-      try {
-        const error = await response.json();
-        errorMessage = error.message || errorMessage;
-      } catch {
-        errorMessage = `Server error: ${response.status} ${response.statusText}`;
-      }
-      throw new Error(errorMessage);
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/notification-config`, {
+            headers: headers,
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to fetch notification config";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
     }
-    
-    return response.json();
-  } catch (error) {
-    if (error.message.includes('fetch')) {
-      throw new Error('Cannot connect to server. Is the backend running?');
-    }
-    throw error;
-  }
 }
 
 /**
@@ -44,32 +46,34 @@ export async function getNotificationConfig() {
  * @returns {Promise<Object>} Updated config
  */
 export async function updateNotificationConfig(config) {
-  try {
-    const headers = await getAuthHeaders();
-    const response = await fetch(`${API_BASE}/notification-config`, {
-      method: 'PUT',
-      headers: headers,
-      body: JSON.stringify(config)
-    });
-    
-    if (!response.ok) {
-      let errorMessage = 'Failed to update notification config';
-      try {
-        const error = await response.json();
-        errorMessage = error.message || errorMessage;
-      } catch {
-        errorMessage = `Server error: ${response.status} ${response.statusText}`;
-      }
-      throw new Error(errorMessage);
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/notification-config`, {
+            method: "PUT",
+            headers: headers,
+            body: JSON.stringify(config),
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to update notification config";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
     }
-    
-    return response.json();
-  } catch (error) {
-    if (error.message.includes('fetch')) {
-      throw new Error('Cannot connect to server. Is the backend running?');
-    }
-    throw error;
-  }
 }
 
 /**
@@ -79,21 +83,21 @@ export async function updateNotificationConfig(config) {
  * @returns {Promise<boolean>} True if test successful
  */
 export async function testDiscordWebhook(webhookUrl) {
-  try {
-    const payload = {
-      content: 'Koin Ping test notification - Your Discord webhook is configured correctly!',
-    };
+    try {
+        const payload = {
+            content:
+                "Koin Ping test notification - Your Discord webhook is configured correctly!",
+        };
 
-    const response = await fetch(webhookUrl, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload)
-    });
+        const response = await fetch(webhookUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+        });
 
-    return response.ok;
-  } catch (error) {
-    console.error('Discord webhook test failed:', error);
-    return false;
-  }
+        return response.ok;
+    } catch (error) {
+        console.error("Discord webhook test failed:", error);
+        return false;
+    }
 }
-

frontend/src/api/status.jsx

@@ -1,18 +1,18 @@
 // API client for system status
 
-import { API_BASE } from './config';
+import { API_BASE } from "./config";
 
 /**
  * Get system status including latest processed block and health
  * @returns {Promise<Object>} System status
  */
 export async function getSystemStatus() {
-  const response = await fetch(`${API_BASE}/status`);
-  
-  if (!response.ok) {
-    const error = await response.json();
-    throw new Error(error.message || 'Failed to fetch system status');
-  }
-  
-  return response.json();
+    const response = await fetch(`${API_BASE}/status`);
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.message || "Failed to fetch system status");
+    }
+
+    return response.json();
 }

frontend/src/components/AddressForm.jsx

@@ -3,43 +3,43 @@ import Input from "./Input";
 import Button from "./Button";
 
 export default function AddressForm({ onSubmit }) {
-  const [address, setAddress] = useState("");
-  const [label, setLabel] = useState("");
+    const [address, setAddress] = useState("");
+    const [label, setLabel] = useState("");
 
-  const canSubmit = address.trim().length > 0;
+    const canSubmit = address.trim().length > 0;
 
-  function handleSubmit(e) {
-    e.preventDefault();
-    if (!canSubmit) return;
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (!canSubmit) return;
 
-    onSubmit({
-      address: address.trim(),
-      label: label.trim(),
-    });
+        onSubmit({
+            address: address.trim(),
+            label: label.trim(),
+        });
 
-    setAddress("");
-    setLabel("");
-  }
+        setAddress("");
+        setLabel("");
+    }
 
-  return (
-    <form onSubmit={handleSubmit}>
-      <Input
-        label="Blockchain Address"
-        value={address}
-        onChange={setAddress}
-        placeholder="0x..."
-      />
+    return (
+        <form onSubmit={handleSubmit}>
+            <Input
+                label="Blockchain Address"
+                value={address}
+                onChange={setAddress}
+                placeholder="0x..."
+            />
 
-      <Input
-        label="Label (optional)"
-        value={label}
-        onChange={setLabel}
-        placeholder="Treasury, Cold Wallet, etc."
-      />
+            <Input
+                label="Label (optional)"
+                value={label}
+                onChange={setLabel}
+                placeholder="Treasury, Cold Wallet, etc."
+            />
 
-      <Button type="submit" disabled={!canSubmit}>
-        Add Address
-      </Button>
-    </form>
-  );
+            <Button type="submit" disabled={!canSubmit}>
+                Add Address
+            </Button>
+        </form>
+    );
 }

frontend/src/components/AlertForm.jsx

@@ -3,69 +3,69 @@ import Input from "./Input";
 import Button from "./Button";
 
 const ALERT_TYPES = [
-  { value: "incoming_tx", label: "Incoming transaction" },
-  { value: "outgoing_tx", label: "Outgoing transaction" },
-  { value: "large_transfer", label: "Large transfer" },
-  { value: "balance_below", label: "Balance below threshold" },
+    { value: "incoming_tx", label: "Incoming transaction" },
+    { value: "outgoing_tx", label: "Outgoing transaction" },
+    { value: "large_transfer", label: "Large transfer" },
+    { value: "balance_below", label: "Balance below threshold" },
 ];
 
 export default function AlertForm({ onSubmit }) {
-  const [type, setType] = useState("incoming_tx");
-  const [threshold, setThreshold] = useState("");
+    const [type, setType] = useState("incoming_tx");
+    const [threshold, setThreshold] = useState("");
 
-  const needsThreshold =
-    type === "large_transfer" || type === "balance_below";
+    const needsThreshold =
+        type === "large_transfer" || type === "balance_below";
 
-  const canSubmit = needsThreshold
-    ? threshold.trim() !== "" && 
-      !isNaN(Number(threshold)) && 
-      Number(threshold) > 0
-    : true;
+    const canSubmit = needsThreshold
+        ? threshold.trim() !== "" &&
+          !isNaN(Number(threshold)) &&
+          Number(threshold) > 0
+        : true;
 
-  function handleSubmit(e) {
-    e.preventDefault();
-    if (!canSubmit) return;
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (!canSubmit) return;
 
-    onSubmit({
-      type,
-      threshold: needsThreshold ? Number(threshold) : undefined,
-    });
+        onSubmit({
+            type,
+            threshold: needsThreshold ? Number(threshold) : undefined,
+        });
 
-    setThreshold("");
-  }
+        setThreshold("");
+    }
 
-  return (
-    <form onSubmit={handleSubmit}>
-      <div style={{ marginBottom: "1rem" }}>
-        {ALERT_TYPES.map((opt) => (
-          <label key={opt.value} style={{ display: "block" }}>
-            <input
-              type="radio"
-              name="alertType"
-              value={opt.value}
-              checked={type === opt.value}
-              onChange={() => setType(opt.value)}
-            />
-            {" "}{opt.label}
-          </label>
-        ))}
-      </div>
+    return (
+        <form onSubmit={handleSubmit}>
+            <div style={{ marginBottom: "1rem" }}>
+                {ALERT_TYPES.map((opt) => (
+                    <label key={opt.value} style={{ display: "block" }}>
+                        <input
+                            type="radio"
+                            name="alertType"
+                            value={opt.value}
+                            checked={type === opt.value}
+                            onChange={() => setType(opt.value)}
+                        />{" "}
+                        {opt.label}
+                    </label>
+                ))}
+            </div>
 
-      {needsThreshold && (
-        <Input
-          label="Amount (ETH)"
-          type="number"
-          step="0.000001"
-          min="0"
-          value={threshold}
-          onChange={setThreshold}
-          placeholder="e.g. 10"
-        />
-      )}
+            {needsThreshold && (
+                <Input
+                    label="Amount (ETH)"
+                    type="number"
+                    step="0.000001"
+                    min="0"
+                    value={threshold}
+                    onChange={setThreshold}
+                    placeholder="e.g. 10"
+                />
+            )}
 
-      <Button type="submit" disabled={!canSubmit}>
-        Create Alert
-      </Button>
-    </form>
-  );
+            <Button type="submit" disabled={!canSubmit}>
+                Create Alert
+            </Button>
+        </form>
+    );
 }

frontend/src/components/Button.jsx

@@ -3,21 +3,20 @@ export default function Button({
     onClick,
     disabled = false,
     type = "button",
-  }) {
+}) {
     return (
-      <button
-        type={type}
-        onClick={onClick}
-        disabled={disabled}
-        style={{
-          padding: "0.5rem 1rem",
-          fontSize: "1rem",
-          cursor: disabled ? "not-allowed" : "pointer",
-          opacity: disabled ? 0.6 : 1,
-        }}
-      >
-        {children}
-      </button>
+        <button
+            type={type}
+            onClick={onClick}
+            disabled={disabled}
+            style={{
+                padding: "0.5rem 1rem",
+                fontSize: "1rem",
+                cursor: disabled ? "not-allowed" : "pointer",
+                opacity: disabled ? 0.6 : 1,
+            }}
+        >
+            {children}
+        </button>
     );
-  }
-  
+}

frontend/src/components/Input.jsx

@@ -7,27 +7,26 @@ export default function Input({
     step,
     min,
     disabled = false,
-  }) {
+}) {
     return (
-      <label style={{ display: "block", marginBottom: "1rem" }}>
-        <div style={{ marginBottom: "0.25rem", fontSize: "0.9rem" }}>
-          {label}
-        </div>
-        <input
-          type={type}
-          value={value}
-          placeholder={placeholder}
-          step={step}
-          min={min}
-          disabled={disabled}
-          onChange={(e) => onChange(e.target.value)}
-          style={{
-            width: "100%",
-            padding: "0.5rem",
-            fontSize: "1rem",
-          }}
-        />
-      </label>
+        <label style={{ display: "block", marginBottom: "1rem" }}>
+            <div style={{ marginBottom: "0.25rem", fontSize: "0.9rem" }}>
+                {label}
+            </div>
+            <input
+                type={type}
+                value={value}
+                placeholder={placeholder}
+                step={step}
+                min={min}
+                disabled={disabled}
+                onChange={(e) => onChange(e.target.value)}
+                style={{
+                    width: "100%",
+                    padding: "0.5rem",
+                    fontSize: "1rem",
+                }}
+            />
+        </label>
     );
-  }
-  
+}

frontend/src/contexts/AuthContext.jsx

@@ -1,17 +1,17 @@
 /**
  * AuthContext - Firebase Authentication State Management
- * 
+ *
  * Provides authentication state and methods throughout the app
  */
 
-import { createContext, useContext, useEffect, useState } from 'react';
-import { 
-  createUserWithEmailAndPassword,
-  signInWithEmailAndPassword,
-  signOut,
-  onAuthStateChanged
-} from 'firebase/auth';
-import { auth } from '../firebase/config';
+import { createContext, useContext, useEffect, useState } from "react";
+import {
+    createUserWithEmailAndPassword,
+    signInWithEmailAndPassword,
+    signOut,
+    onAuthStateChanged,
+} from "firebase/auth";
+import { auth } from "../firebase/config";
 
 const AuthContext = createContext();
 
@@ -20,88 +20,95 @@ const AuthContext = createContext();
  * @returns {Object} Auth context value
  */
 export function useAuth() {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth must be used within AuthProvider');
-  }
-  return context;
+    const context = useContext(AuthContext);
+    if (!context) {
+        throw new Error("useAuth must be used within AuthProvider");
+    }
+    return context;
 }
 
 /**
  * AuthProvider - Wraps app and provides auth state
  */
 export function AuthProvider({ children }) {
-  const [currentUser, setCurrentUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+    const [currentUser, setCurrentUser] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
 
-  /**
-   * Sign up with email and password
-   */
-  async function signup(email, password) {
-    try {
-      setError(null);
-      const result = await createUserWithEmailAndPassword(auth, email, password);
-      return result.user;
-    } catch (err) {
-      setError(err.message);
-      throw err;
+    /**
+     * Sign up with email and password
+     */
+    async function signup(email, password) {
+        try {
+            setError(null);
+            const result = await createUserWithEmailAndPassword(
+                auth,
+                email,
+                password,
+            );
+            return result.user;
+        } catch (err) {
+            setError(err.message);
+            throw err;
+        }
     }
-  }
 
-  /**
-   * Log in with email and password
-   */
-  async function login(email, password) {
-    try {
-      setError(null);
-      const result = await signInWithEmailAndPassword(auth, email, password);
-      return result.user;
-    } catch (err) {
-      setError(err.message);
-      throw err;
+    /**
+     * Log in with email and password
+     */
+    async function login(email, password) {
+        try {
+            setError(null);
+            const result = await signInWithEmailAndPassword(
+                auth,
+                email,
+                password,
+            );
+            return result.user;
+        } catch (err) {
+            setError(err.message);
+            throw err;
+        }
     }
-  }
 
-  /**
-   * Log out current user
-   */
-  async function logout() {
-    try {
-      setError(null);
-      await signOut(auth);
-    } catch (err) {
-      setError(err.message);
-      throw err;
+    /**
+     * Log out current user
+     */
+    async function logout() {
+        try {
+            setError(null);
+            await signOut(auth);
+        } catch (err) {
+            setError(err.message);
+            throw err;
+        }
     }
-  }
 
-  /**
-   * Listen for auth state changes
-   */
-  useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, (user) => {
-      setCurrentUser(user);
-      setLoading(false);
-    });
+    /**
+     * Listen for auth state changes
+     */
+    useEffect(() => {
+        const unsubscribe = onAuthStateChanged(auth, (user) => {
+            setCurrentUser(user);
+            setLoading(false);
+        });
 
-    // Cleanup subscription
-    return unsubscribe;
-  }, []);
+        // Cleanup subscription
+        return unsubscribe;
+    }, []);
 
-  const value = {
-    currentUser,
-    signup,
-    login,
-    logout,
-    error,
-    loading
-  };
+    const value = {
+        currentUser,
+        signup,
+        login,
+        logout,
+        error,
+        loading,
+    };
 
-  return (
-    <AuthContext.Provider value={value}>
-      {!loading && children}
-    </AuthContext.Provider>
-  );
+    return (
+        <AuthContext.Provider value={value}>
+            {!loading && children}
+        </AuthContext.Provider>
+    );
 }
-

frontend/src/firebase/config.js

@@ -1,6 +1,5 @@
-
-import { initializeApp } from 'firebase/app';
-import { getAuth } from 'firebase/auth';
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
 import {
     firebaseApiKey,
     firebaseAuthDomain,
@@ -8,9 +7,8 @@ import {
     firebaseStorageBucket,
     firebaseMessagingSenderId,
     firebaseAppId,
-    firebaseMeasurementId
-} from '../secrets.js';
-
+    firebaseMeasurementId,
+} from "../secrets.js";
 
 const firebaseConfig = {
     apiKey: firebaseApiKey,
@@ -19,12 +17,11 @@ const firebaseConfig = {
     storageBucket: firebaseStorageBucket,
     messagingSenderId: firebaseMessagingSenderId,
     appId: firebaseAppId,
-    measurementId: firebaseMeasurementId
-  };
+    measurementId: firebaseMeasurementId,
+};
 
 const app = initializeApp(firebaseConfig);
 
 export const auth = getAuth(app);
 
 export default app;
-

frontend/src/main.jsx

@@ -5,11 +5,11 @@ import { AuthProvider } from "./contexts/AuthContext";
 import App from "./App";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <AuthProvider>
-        <App />
-      </AuthProvider>
-    </BrowserRouter>
-  </React.StrictMode>
+    <React.StrictMode>
+        <BrowserRouter>
+            <AuthProvider>
+                <App />
+            </AuthProvider>
+        </BrowserRouter>
+    </React.StrictMode>,
 );

frontend/src/pages/Addresses.jsx

@@ -3,81 +3,91 @@ import AddressForm from "../components/AddressForm";
 import { getAddresses, createAddress } from "../api/addresses";
 
 export default function Addresses() {
-  const [addresses, setAddresses] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+    const [addresses, setAddresses] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
 
-  // Load addresses on mount
-  useEffect(() => {
-    async function fetchAddresses() {
-      try {
-        setLoading(true);
-        const data = await getAddresses();
-        setAddresses(data);
-      } catch (err) {
-        setError(err.message);
-        console.error("Failed to fetch addresses:", err);
-      } finally {
-        setLoading(false);
-      }
+    // Load addresses on mount
+    useEffect(() => {
+        async function fetchAddresses() {
+            try {
+                setLoading(true);
+                const data = await getAddresses();
+                setAddresses(data);
+            } catch (err) {
+                setError(err.message);
+                console.error("Failed to fetch addresses:", err);
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        fetchAddresses();
+    }, []);
+
+    // Handle new address submission
+    async function handleAddressSubmit(data) {
+        try {
+            const newAddress = await createAddress(data);
+            // Append new address to state
+            setAddresses((prev) => [...prev, newAddress]);
+            setError(null); // Clear any previous errors
+        } catch (err) {
+            setError(err.message);
+            console.error("Failed to create address:", err);
+        }
     }
 
-    fetchAddresses();
-  }, []);
+    return (
+        <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
+            <h1>Tracked Addresses</h1>
 
-  // Handle new address submission
-  async function handleAddressSubmit(data) {
-    try {
-      const newAddress = await createAddress(data);
-      // Append new address to state
-      setAddresses((prev) => [...prev, newAddress]);
-      setError(null); // Clear any previous errors
-    } catch (err) {
-      setError(err.message);
-      console.error("Failed to create address:", err);
-    }
-  }
+            <div style={{ marginBottom: "2rem" }}>
+                <AddressForm onSubmit={handleAddressSubmit} />
+            </div>
 
-  return (
-    <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
-      <h1>Tracked Addresses</h1>
-
-      <div style={{ marginBottom: "2rem" }}>
-        <AddressForm onSubmit={handleAddressSubmit} />
-      </div>
-
-      <div>
-        <h2>Existing Addresses</h2>
-        {loading && <p>Loading addresses...</p>}
-        {error && <p style={{ color: "red" }}>Error: {error}</p>}
-        {!loading && !error && addresses.length === 0 && (
-          <p style={{ color: "#666" }}>
-            No addresses tracked yet. Add one above to get started.
-          </p>
-        )}
-        {addresses.length > 0 && (
-          <ul style={{ listStyle: "none", padding: 0 }}>
-            {addresses.map((addr, index) => (
-              <li
-                key={addr.id || index}
-                style={{
-                  padding: "1rem",
-                  marginBottom: "0.5rem",
-                  border: "1px solid #ddd",
-                  borderRadius: "4px",
-                }}
-              >
-                <div style={{ fontWeight: "bold", marginBottom: "0.25rem" }}>
-                  {addr.label || "Unlabeled"}
-                </div>
-                <div style={{ fontFamily: "monospace", fontSize: "0.9rem" }}>
-                  {addr.address}
-                </div>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-  );
+            <div>
+                <h2>Existing Addresses</h2>
+                {loading && <p>Loading addresses...</p>}
+                {error && <p style={{ color: "red" }}>Error: {error}</p>}
+                {!loading && !error && addresses.length === 0 && (
+                    <p style={{ color: "#666" }}>
+                        No addresses tracked yet. Add one above to get started.
+                    </p>
+                )}
+                {addresses.length > 0 && (
+                    <ul style={{ listStyle: "none", padding: 0 }}>
+                        {addresses.map((addr, index) => (
+                            <li
+                                key={addr.id || index}
+                                style={{
+                                    padding: "1rem",
+                                    marginBottom: "0.5rem",
+                                    border: "1px solid #ddd",
+                                    borderRadius: "4px",
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        fontWeight: "bold",
+                                        marginBottom: "0.25rem",
+                                    }}
+                                >
+                                    {addr.label || "Unlabeled"}
+                                </div>
+                                <div
+                                    style={{
+                                        fontFamily: "monospace",
+                                        fontSize: "0.9rem",
+                                    }}
+                                >
+                                    {addr.address}
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+        </div>
+    );
 }

frontend/src/pages/AlertHistory.jsx

@@ -2,73 +2,83 @@ import { useState, useEffect } from "react";
 import { getAlertEvents } from "../api/alertEvents";
 
 export default function AlertHistory() {
-  const [alertEvents, setAlertEvents] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+    const [alertEvents, setAlertEvents] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
 
-  // Fetch alert events on mount
-  useEffect(() => {
-    async function fetchAlertEvents() {
-      try {
-        setLoading(true);
-        const data = await getAlertEvents();
-        setAlertEvents(data);
-      } catch (err) {
-        setError(err.message);
-        console.error("Failed to fetch alert events:", err);
-      } finally {
-        setLoading(false);
-      }
+    // Fetch alert events on mount
+    useEffect(() => {
+        async function fetchAlertEvents() {
+            try {
+                setLoading(true);
+                const data = await getAlertEvents();
+                setAlertEvents(data);
+            } catch (err) {
+                setError(err.message);
+                console.error("Failed to fetch alert events:", err);
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        fetchAlertEvents();
+    }, []);
+
+    if (loading) {
+        return <div style={{ padding: "2rem" }}>Loading...</div>;
     }
 
-    fetchAlertEvents();
-  }, []);
+    if (error) {
+        return (
+            <div style={{ padding: "2rem", color: "red" }}>Error: {error}</div>
+        );
+    }
 
-  if (loading) {
-    return <div style={{ padding: "2rem" }}>Loading...</div>;
-  }
+    return (
+        <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
+            <h1>Recent Alerts</h1>
 
-  if (error) {
-    return <div style={{ padding: "2rem", color: "red" }}>Error: {error}</div>;
-  }
-
-  return (
-    <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
-      <h1>Recent Alerts</h1>
-
-      {alertEvents.length === 0 ? (
-        <p style={{ color: "#666" }}>No alerts yet</p>
-      ) : (
-        <ul style={{ listStyle: "none", padding: 0 }}>
-          {alertEvents.map((event) => (
-            <li
-              key={event.id}
-              style={{
-                padding: "1rem",
-                marginBottom: "0.75rem",
-                border: "1px solid #ddd",
-                borderRadius: "4px",
-              }}
-            >
-              <div style={{ marginBottom: "0.5rem" }}>{event.message}</div>
-              {event.address_label && (
-                <div style={{ fontSize: "0.9rem", color: "#666", marginBottom: "0.25rem" }}>
-                  Address: {event.address_label}
-                </div>
-              )}
-              <small style={{ color: "#999" }}>
-                {formatTimestamp(event.timestamp)}
-              </small>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
+            {alertEvents.length === 0 ? (
+                <p style={{ color: "#666" }}>No alerts yet</p>
+            ) : (
+                <ul style={{ listStyle: "none", padding: 0 }}>
+                    {alertEvents.map((event) => (
+                        <li
+                            key={event.id}
+                            style={{
+                                padding: "1rem",
+                                marginBottom: "0.75rem",
+                                border: "1px solid #ddd",
+                                borderRadius: "4px",
+                            }}
+                        >
+                            <div style={{ marginBottom: "0.5rem" }}>
+                                {event.message}
+                            </div>
+                            {event.address_label && (
+                                <div
+                                    style={{
+                                        fontSize: "0.9rem",
+                                        color: "#666",
+                                        marginBottom: "0.25rem",
+                                    }}
+                                >
+                                    Address: {event.address_label}
+                                </div>
+                            )}
+                            <small style={{ color: "#999" }}>
+                                {formatTimestamp(event.timestamp)}
+                            </small>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
 }
 
 // Helper to format timestamp for display
 function formatTimestamp(timestamp) {
-  const date = new Date(timestamp);
-  return date.toLocaleString();
+    const date = new Date(timestamp);
+    return date.toLocaleString();
 }

frontend/src/pages/Login.jsx

@@ -1,143 +1,146 @@
 /**
  * Login Page
- * 
+ *
  * Allows existing users to sign in with email and password
  */
 
-import { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext';
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext";
 
 export default function Login() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  
-  const { login } = useAuth();
-  const navigate = useNavigate();
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+    const [loading, setLoading] = useState(false);
 
-  async function handleSubmit(e) {
-    e.preventDefault();
+    const { login } = useAuth();
+    const navigate = useNavigate();
 
-    // Validation
-    if (!email || !password) {
-      setError('Please fill in all fields');
-      return;
+    async function handleSubmit(e) {
+        e.preventDefault();
+
+        // Validation
+        if (!email || !password) {
+            setError("Please fill in all fields");
+            return;
+        }
+
+        try {
+            setError("");
+            setLoading(true);
+            await login(email, password);
+            navigate("/addresses"); // Redirect to main app
+        } catch (err) {
+            setError("Failed to log in: " + err.message);
+        } finally {
+            setLoading(false);
+        }
     }
 
-    try {
-      setError('');
-      setLoading(true);
-      await login(email, password);
-      navigate('/addresses'); // Redirect to main app
-    } catch (err) {
-      setError('Failed to log in: ' + err.message);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div style={{ 
-      maxWidth: '400px', 
-      margin: '4rem auto', 
-      padding: '2rem',
-      border: '1px solid #333',
-      borderRadius: '8px'
-    }}>
-      <h1 style={{ marginBottom: '2rem', textAlign: 'center' }}>
-        Koin Ping - Login
-      </h1>
-
-      {error && (
-        <div style={{ 
-          padding: '0.75rem', 
-          marginBottom: '1rem', 
-          backgroundColor: '#ff000020',
-          border: '1px solid #ff0000',
-          borderRadius: '4px',
-          color: '#ff6666'
-        }}>
-          {error}
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit}>
-        <div style={{ marginBottom: '1rem' }}>
-          <label style={{ display: 'block', marginBottom: '0.5rem' }}>
-            Email
-          </label>
-          <input
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            disabled={loading}
+    return (
+        <div
             style={{
-              width: '100%',
-              padding: '0.5rem',
-              fontSize: '1rem',
-              backgroundColor: '#1a1a1a',
-              border: '1px solid #444',
-              borderRadius: '4px',
-              color: 'white'
+                maxWidth: "400px",
+                margin: "4rem auto",
+                padding: "2rem",
+                border: "1px solid #333",
+                borderRadius: "8px",
             }}
-            required
-          />
-        </div>
-
-        <div style={{ marginBottom: '1.5rem' }}>
-          <label style={{ display: 'block', marginBottom: '0.5rem' }}>
-            Password
-          </label>
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            disabled={loading}
-            style={{
-              width: '100%',
-              padding: '0.5rem',
-              fontSize: '1rem',
-              backgroundColor: '#1a1a1a',
-              border: '1px solid #444',
-              borderRadius: '4px',
-              color: 'white'
-            }}
-            required
-          />
-        </div>
-
-        <button
-          type="submit"
-          disabled={loading}
-          style={{
-            width: '100%',
-            padding: '0.75rem',
-            fontSize: '1rem',
-            backgroundColor: loading ? '#333' : '#0066cc',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: loading ? 'not-allowed' : 'pointer'
-          }}
         >
-          {loading ? 'Logging in...' : 'Log In'}
-        </button>
-      </form>
+            <h1 style={{ marginBottom: "2rem", textAlign: "center" }}>
+                Koin Ping - Login
+            </h1>
 
-      <div style={{ marginTop: '1.5rem', textAlign: 'center' }}>
-        <p style={{ color: '#999' }}>
-          Don't have an account?{' '}
-          <Link 
-            to="/signup" 
-            style={{ color: '#0066cc', textDecoration: 'none' }}
-          >
-            Sign up here
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
+            {error && (
+                <div
+                    style={{
+                        padding: "0.75rem",
+                        marginBottom: "1rem",
+                        backgroundColor: "#ff000020",
+                        border: "1px solid #ff0000",
+                        borderRadius: "4px",
+                        color: "#ff6666",
+                    }}
+                >
+                    {error}
+                </div>
+            )}
+
+            <form onSubmit={handleSubmit}>
+                <div style={{ marginBottom: "1rem" }}>
+                    <label style={{ display: "block", marginBottom: "0.5rem" }}>
+                        Email
+                    </label>
+                    <input
+                        type="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        disabled={loading}
+                        style={{
+                            width: "100%",
+                            padding: "0.5rem",
+                            fontSize: "1rem",
+                            backgroundColor: "#1a1a1a",
+                            border: "1px solid #444",
+                            borderRadius: "4px",
+                            color: "white",
+                        }}
+                        required
+                    />
+                </div>
+
+                <div style={{ marginBottom: "1.5rem" }}>
+                    <label style={{ display: "block", marginBottom: "0.5rem" }}>
+                        Password
+                    </label>
+                    <input
+                        type="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        disabled={loading}
+                        style={{
+                            width: "100%",
+                            padding: "0.5rem",
+                            fontSize: "1rem",
+                            backgroundColor: "#1a1a1a",
+                            border: "1px solid #444",
+                            borderRadius: "4px",
+                            color: "white",
+                        }}
+                        required
+                    />
+                </div>
+
+                <button
+                    type="submit"
+                    disabled={loading}
+                    style={{
+                        width: "100%",
+                        padding: "0.75rem",
+                        fontSize: "1rem",
+                        backgroundColor: loading ? "#333" : "#0066cc",
+                        color: "white",
+                        border: "none",
+                        borderRadius: "4px",
+                        cursor: loading ? "not-allowed" : "pointer",
+                    }}
+                >
+                    {loading ? "Logging in..." : "Log In"}
+                </button>
+            </form>
+
+            <div style={{ marginTop: "1.5rem", textAlign: "center" }}>
+                <p style={{ color: "#999" }}>
+                    Don't have an account?{" "}
+                    <Link
+                        to="/signup"
+                        style={{ color: "#0066cc", textDecoration: "none" }}
+                    >
+                        Sign up here
+                    </Link>
+                </p>
+            </div>
+        </div>
+    );
 }
-

frontend/src/pages/Signup.jsx

@@ -1,185 +1,188 @@
 /**
  * Signup Page
- * 
+ *
  * Allows new users to create an account with email and password
  */
 
-import { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext';
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext";
 
 export default function Signup() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  
-  const { signup } = useAuth();
-  const navigate = useNavigate();
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [error, setError] = useState("");
+    const [loading, setLoading] = useState(false);
 
-  async function handleSubmit(e) {
-    e.preventDefault();
+    const { signup } = useAuth();
+    const navigate = useNavigate();
 
-    // Validation
-    if (!email || !password || !confirmPassword) {
-      setError('Please fill in all fields');
-      return;
+    async function handleSubmit(e) {
+        e.preventDefault();
+
+        // Validation
+        if (!email || !password || !confirmPassword) {
+            setError("Please fill in all fields");
+            return;
+        }
+
+        if (password !== confirmPassword) {
+            setError("Passwords do not match");
+            return;
+        }
+
+        if (password.length < 6) {
+            setError("Password must be at least 6 characters");
+            return;
+        }
+
+        try {
+            setError("");
+            setLoading(true);
+            await signup(email, password);
+            navigate("/addresses"); // Auto-login and redirect
+        } catch (err) {
+            // Firebase-specific error messages
+            if (err.code === "auth/email-already-in-use") {
+                setError("Email already in use. Try logging in instead.");
+            } else if (err.code === "auth/invalid-email") {
+                setError("Invalid email address");
+            } else if (err.code === "auth/weak-password") {
+                setError("Password is too weak");
+            } else {
+                setError("Failed to create account: " + err.message);
+            }
+        } finally {
+            setLoading(false);
+        }
     }
 
-    if (password !== confirmPassword) {
-      setError('Passwords do not match');
-      return;
-    }
-
-    if (password.length < 6) {
-      setError('Password must be at least 6 characters');
-      return;
-    }
-
-    try {
-      setError('');
-      setLoading(true);
-      await signup(email, password);
-      navigate('/addresses'); // Auto-login and redirect
-    } catch (err) {
-      // Firebase-specific error messages
-      if (err.code === 'auth/email-already-in-use') {
-        setError('Email already in use. Try logging in instead.');
-      } else if (err.code === 'auth/invalid-email') {
-        setError('Invalid email address');
-      } else if (err.code === 'auth/weak-password') {
-        setError('Password is too weak');
-      } else {
-        setError('Failed to create account: ' + err.message);
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div style={{ 
-      maxWidth: '400px', 
-      margin: '4rem auto', 
-      padding: '2rem',
-      border: '1px solid #333',
-      borderRadius: '8px'
-    }}>
-      <h1 style={{ marginBottom: '2rem', textAlign: 'center' }}>
-        Koin Ping - Sign Up
-      </h1>
-
-      {error && (
-        <div style={{ 
-          padding: '0.75rem', 
-          marginBottom: '1rem', 
-          backgroundColor: '#ff000020',
-          border: '1px solid #ff0000',
-          borderRadius: '4px',
-          color: '#ff6666'
-        }}>
-          {error}
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit}>
-        <div style={{ marginBottom: '1rem' }}>
-          <label style={{ display: 'block', marginBottom: '0.5rem' }}>
-            Email
-          </label>
-          <input
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            disabled={loading}
+    return (
+        <div
             style={{
-              width: '100%',
-              padding: '0.5rem',
-              fontSize: '1rem',
-              backgroundColor: '#1a1a1a',
-              border: '1px solid #444',
-              borderRadius: '4px',
-              color: 'white'
+                maxWidth: "400px",
+                margin: "4rem auto",
+                padding: "2rem",
+                border: "1px solid #333",
+                borderRadius: "8px",
             }}
-            required
-          />
-        </div>
-
-        <div style={{ marginBottom: '1rem' }}>
-          <label style={{ display: 'block', marginBottom: '0.5rem' }}>
-            Password
-          </label>
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            disabled={loading}
-            style={{
-              width: '100%',
-              padding: '0.5rem',
-              fontSize: '1rem',
-              backgroundColor: '#1a1a1a',
-              border: '1px solid #444',
-              borderRadius: '4px',
-              color: 'white'
-            }}
-            required
-          />
-        </div>
-
-        <div style={{ marginBottom: '1.5rem' }}>
-          <label style={{ display: 'block', marginBottom: '0.5rem' }}>
-            Confirm Password
-          </label>
-          <input
-            type="password"
-            value={confirmPassword}
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            disabled={loading}
-            style={{
-              width: '100%',
-              padding: '0.5rem',
-              fontSize: '1rem',
-              backgroundColor: '#1a1a1a',
-              border: '1px solid #444',
-              borderRadius: '4px',
-              color: 'white'
-            }}
-            required
-          />
-        </div>
-
-        <button
-          type="submit"
-          disabled={loading}
-          style={{
-            width: '100%',
-            padding: '0.75rem',
-            fontSize: '1rem',
-            backgroundColor: loading ? '#333' : '#0066cc',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: loading ? 'not-allowed' : 'pointer'
-          }}
         >
-          {loading ? 'Creating account...' : 'Sign Up'}
-        </button>
-      </form>
+            <h1 style={{ marginBottom: "2rem", textAlign: "center" }}>
+                Koin Ping - Sign Up
+            </h1>
 
-      <div style={{ marginTop: '1.5rem', textAlign: 'center' }}>
-        <p style={{ color: '#999' }}>
-          Already have an account?{' '}
-          <Link 
-            to="/login" 
-            style={{ color: '#0066cc', textDecoration: 'none' }}
-          >
-            Log in here
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
+            {error && (
+                <div
+                    style={{
+                        padding: "0.75rem",
+                        marginBottom: "1rem",
+                        backgroundColor: "#ff000020",
+                        border: "1px solid #ff0000",
+                        borderRadius: "4px",
+                        color: "#ff6666",
+                    }}
+                >
+                    {error}
+                </div>
+            )}
+
+            <form onSubmit={handleSubmit}>
+                <div style={{ marginBottom: "1rem" }}>
+                    <label style={{ display: "block", marginBottom: "0.5rem" }}>
+                        Email
+                    </label>
+                    <input
+                        type="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        disabled={loading}
+                        style={{
+                            width: "100%",
+                            padding: "0.5rem",
+                            fontSize: "1rem",
+                            backgroundColor: "#1a1a1a",
+                            border: "1px solid #444",
+                            borderRadius: "4px",
+                            color: "white",
+                        }}
+                        required
+                    />
+                </div>
+
+                <div style={{ marginBottom: "1rem" }}>
+                    <label style={{ display: "block", marginBottom: "0.5rem" }}>
+                        Password
+                    </label>
+                    <input
+                        type="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        disabled={loading}
+                        style={{
+                            width: "100%",
+                            padding: "0.5rem",
+                            fontSize: "1rem",
+                            backgroundColor: "#1a1a1a",
+                            border: "1px solid #444",
+                            borderRadius: "4px",
+                            color: "white",
+                        }}
+                        required
+                    />
+                </div>
+
+                <div style={{ marginBottom: "1.5rem" }}>
+                    <label style={{ display: "block", marginBottom: "0.5rem" }}>
+                        Confirm Password
+                    </label>
+                    <input
+                        type="password"
+                        value={confirmPassword}
+                        onChange={(e) => setConfirmPassword(e.target.value)}
+                        disabled={loading}
+                        style={{
+                            width: "100%",
+                            padding: "0.5rem",
+                            fontSize: "1rem",
+                            backgroundColor: "#1a1a1a",
+                            border: "1px solid #444",
+                            borderRadius: "4px",
+                            color: "white",
+                        }}
+                        required
+                    />
+                </div>
+
+                <button
+                    type="submit"
+                    disabled={loading}
+                    style={{
+                        width: "100%",
+                        padding: "0.75rem",
+                        fontSize: "1rem",
+                        backgroundColor: loading ? "#333" : "#0066cc",
+                        color: "white",
+                        border: "none",
+                        borderRadius: "4px",
+                        cursor: loading ? "not-allowed" : "pointer",
+                    }}
+                >
+                    {loading ? "Creating account..." : "Sign Up"}
+                </button>
+            </form>
+
+            <div style={{ marginTop: "1.5rem", textAlign: "center" }}>
+                <p style={{ color: "#999" }}>
+                    Already have an account?{" "}
+                    <Link
+                        to="/login"
+                        style={{ color: "#0066cc", textDecoration: "none" }}
+                    >
+                        Log in here
+                    </Link>
+                </p>
+            </div>
+        </div>
+    );
 }
-