first commit of refactor

frontend/src/App.jsx

@@ -0,0 +1,62 @@
+import { Routes, Route, Link, Navigate } from "react-router-dom";
+import { useAuth } from "./contexts/AuthContext";
+import Login from "./pages/Login";
+import Signup from "./pages/Signup";
+import Addresses from "./pages/Addresses";
+import Alerts from "./pages/Alerts";
+import AlertHistory from "./pages/AlertHistory";
+
+export default function App() {
+  const { currentUser, logout } = useAuth();
+
+  // 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 (
+    <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

@@ -0,0 +1,113 @@
+// API client for address management
+
+import { getAuthHeaders, getAuthHeadersSimple } from './authHeaders';
+
+const API_BASE = '/api';
+
+/**
+ * Create a new blockchain address to monitor
+ * @param {Object} data - Address data
+ * @param {string} data.address - Blockchain address (0x...)
+ * @param {string} [data.label] - Optional label for the address
+ * @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?');
+    }
+    throw error;
+  }
+}
+
+/**
+ * Get all tracked addresses
+ * @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?');
+    }
+    throw error;
+  }
+}
+
+/**
+ * Delete a tracked address
+ * @param {number} addressId - Address ID to delete
+ * @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;
+  }
+}
+

frontend/src/api/alertEvents.jsx

@@ -0,0 +1,36 @@
+// API client for alert event history
+
+import { getAuthHeadersSimple } from './authHeaders';
+
+const API_BASE = '/api';
+
+/**
+ * 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?');
+    }
+    throw error;
+  }
+}

frontend/src/api/alerts.jsx

@@ -0,0 +1,150 @@
+// API client for alert rule management
+
+import { getAuthHeaders, getAuthHeadersSimple } from './authHeaders';
+
+const API_BASE = '/api';
+
+/**
+ * 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'
+};
+
+/**
+ * Create a new alert rule for an address
+ * @param {number} addressId - Address ID
+ * @param {Object} data - Alert rule data
+ * @param {string} data.type - Alert type (one of ALERT_TYPES)
+ * @param {string} [data.threshold] - Threshold value (required for large_transfer and balance_below)
+ * @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?');
+    }
+    throw error;
+  }
+}
+
+/**
+ * Get all alert rules for an address
+ * @param {number} addressId - Address ID
+ * @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?');
+    }
+    throw error;
+  }
+}
+
+/**
+ * Enable or disable an alert rule
+ * @param {number} alertId - Alert rule ID
+ * @param {boolean} enabled - Whether the alert should be enabled
+ * @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?');
+    }
+    throw error;
+  }
+}
+
+/**
+ * Delete an alert rule
+ * @param {number} alertId - Alert rule ID
+ * @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);
+    }
+  } 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

@@ -0,0 +1,47 @@
+/**
+ * Auth Headers Helper
+ * 
+ * Provides authentication headers for API calls
+ * Includes Firebase ID token in Authorization header
+ */
+
+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');
+  }
+
+  // Get Firebase ID token
+  const token = await currentUser.getIdToken();
+
+  return {
+    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${token}`
+  };
+}
+
+/**
+ * Get headers for non-JSON requests (e.g., DELETE with no body)
+ * @returns {Promise<Object>} Headers object with Authorization
+ */
+export async function getAuthHeadersSimple() {
+  const currentUser = auth.currentUser;
+  
+  if (!currentUser) {
+    throw new Error('No authenticated user');
+  }
+
+  const token = await currentUser.getIdToken();
+
+  return {
+    'Authorization': `Bearer ${token}`
+  };
+}
+

frontend/src/api/notificationConfig.jsx

@@ -0,0 +1,100 @@
+// API client for notification configuration
+
+import { getAuthHeaders } from './authHeaders';
+
+const API_BASE = '/api';
+
+/**
+ * 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);
+    }
+    
+    return response.json();
+  } catch (error) {
+    if (error.message.includes('fetch')) {
+      throw new Error('Cannot connect to server. Is the backend running?');
+    }
+    throw error;
+  }
+}
+
+/**
+ * Update notification configuration
+ * @param {Object} config - Configuration to update
+ * @param {string} [config.discord_webhook_url] - Discord webhook URL
+ * @param {string} [config.telegram_chat_id] - Telegram chat ID
+ * @param {string} [config.email] - Email address
+ * @param {boolean} [config.notification_enabled] - Enable/disable notifications
+ * @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);
+    }
+    
+    return response.json();
+  } catch (error) {
+    if (error.message.includes('fetch')) {
+      throw new Error('Cannot connect to server. Is the backend running?');
+    }
+    throw error;
+  }
+}
+
+/**
+ * Test a Discord webhook URL
+ * Sends a test message to verify the webhook works
+ * @param {string} webhookUrl - Discord webhook URL to test
+ * @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!',
+    };
+
+    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;
+  }
+}
+

frontend/src/api/status.jsx

@@ -0,0 +1,18 @@
+// API client for system status
+
+const API_BASE = '/api';
+
+/**
+ * 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();
+}

frontend/src/components/AddressForm.jsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import Input from "./Input";
+import Button from "./Button";
+
+export default function AddressForm({ onSubmit }) {
+  const [address, setAddress] = useState("");
+  const [label, setLabel] = useState("");
+
+  const canSubmit = address.trim().length > 0;
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!canSubmit) return;
+
+    onSubmit({
+      address: address.trim(),
+      label: label.trim(),
+    });
+
+    setAddress("");
+    setLabel("");
+  }
+
+  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."
+      />
+
+      <Button type="submit" disabled={!canSubmit}>
+        Add Address
+      </Button>
+    </form>
+  );
+}

frontend/src/components/AlertForm.jsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+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" },
+];
+
+export default function AlertForm({ onSubmit }) {
+  const [type, setType] = useState("incoming_tx");
+  const [threshold, setThreshold] = useState("");
+
+  const needsThreshold =
+    type === "large_transfer" || type === "balance_below";
+
+  const canSubmit = needsThreshold
+    ? threshold.trim() !== "" && 
+      !isNaN(Number(threshold)) && 
+      Number(threshold) > 0
+    : true;
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!canSubmit) return;
+
+    onSubmit({
+      type,
+      threshold: needsThreshold ? threshold : undefined,
+    });
+
+    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>
+
+      {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>
+  );
+}

frontend/src/components/Button.jsx

@@ -0,0 +1,23 @@
+export default function Button({
+    children,
+    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>
+    );
+  }
+  

frontend/src/components/Input.jsx

@@ -0,0 +1,33 @@
+export default function Input({
+    label,
+    type = "text",
+    value,
+    onChange,
+    placeholder,
+    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>
+    );
+  }
+  

frontend/src/contexts/AuthContext.jsx

@@ -0,0 +1,107 @@
+/**
+ * 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';
+
+const AuthContext = createContext();
+
+/**
+ * Hook to access auth context
+ * @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;
+}
+
+/**
+ * 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);
+
+  /**
+   * 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 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);
+    });
+
+    // Cleanup subscription
+    return unsubscribe;
+  }, []);
+
+  const value = {
+    currentUser,
+    signup,
+    login,
+    logout,
+    error,
+    loading
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading && children}
+    </AuthContext.Provider>
+  );
+}
+

frontend/src/firebase/config.js

@@ -0,0 +1,30 @@
+
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+import {
+    firebaseApiKey,
+    firebaseAuthDomain,
+    firebaseProjectId,
+    firebaseStorageBucket,
+    firebaseMessagingSenderId,
+    firebaseAppId,
+    firebaseMeasurementId
+} from '../secrets.js';
+
+
+const firebaseConfig = {
+    apiKey: firebaseApiKey,
+    authDomain: firebaseAuthDomain,
+    projectId: firebaseProjectId,
+    storageBucket: firebaseStorageBucket,
+    messagingSenderId: firebaseMessagingSenderId,
+    appId: firebaseAppId,
+    measurementId: firebaseMeasurementId
+  };
+
+const app = initializeApp(firebaseConfig);
+
+export const auth = getAuth(app);
+
+export default app;
+

frontend/src/main.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "./contexts/AuthContext";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);

frontend/src/pages/Addresses.jsx

@@ -0,0 +1,83 @@
+import { useState, useEffect } from "react";
+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);
+
+  // 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);
+    }
+  }
+
+  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>
+  );
+}

frontend/src/pages/AlertHistory.jsx

@@ -0,0 +1,74 @@
+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);
+
+  // 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>;
+  }
+
+  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>
+  );
+}
+
+// Helper to format timestamp for display
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleString();
+}

frontend/src/pages/Alerts.jsx

@@ -0,0 +1,471 @@
+import { useState, useEffect } from "react";
+import AlertForm from "../components/AlertForm";
+import Button from "../components/Button";
+import Input from "../components/Input";
+import { getAddresses } from "../api/addresses";
+import { getAlerts, createAlert, updateAlertStatus, deleteAlert } from "../api/alerts";
+import { getNotificationConfig, updateNotificationConfig, testDiscordWebhook } from "../api/notificationConfig";
+
+export default function Alerts() {
+  const [addresses, setAddresses] = useState([]);
+  const [selectedAddressId, setSelectedAddressId] = useState(null);
+  const [alerts, setAlerts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  
+  // Notification config state
+  const [notificationConfig, setNotificationConfig] = useState(null);
+  const [discordWebhookUrl, setDiscordWebhookUrl] = useState('');
+  const [notificationEnabled, setNotificationEnabled] = useState(true);
+  const [notificationLoading, setNotificationLoading] = useState(false);
+  const [notificationError, setNotificationError] = useState(null);
+  const [notificationSuccess, setNotificationSuccess] = useState(null);
+  const [testingWebhook, setTestingWebhook] = useState(false);
+
+  // Load addresses and notification config on mount
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        
+        // Fetch addresses
+        const addressData = await getAddresses();
+        setAddresses(addressData);
+        if (addressData.length > 0) {
+          setSelectedAddressId(addressData[0].id);
+        }
+        
+        // Fetch notification config
+        const configData = await getNotificationConfig();
+        setNotificationConfig(configData);
+        setDiscordWebhookUrl(configData.discord_webhook_url || '');
+        setNotificationEnabled(configData.notification_enabled !== false);
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch data:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  // Load alerts when address is selected
+  useEffect(() => {
+    if (!selectedAddressId) {
+      setAlerts([]);
+      return;
+    }
+
+    async function fetchAlerts() {
+      try {
+        const data = await getAlerts(selectedAddressId);
+        setAlerts(data);
+        setError(null); // Clear any previous errors
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch alerts:", err);
+      }
+    }
+
+    fetchAlerts();
+  }, [selectedAddressId]);
+
+  // Handle new alert submission
+  async function handleAlertSubmit(data) {
+    if (!selectedAddressId) return;
+
+    try {
+      const newAlert = await createAlert(selectedAddressId, data);
+      setAlerts((prev) => [...prev, newAlert]);
+      setError(null); // Clear any previous errors
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to create alert:", err);
+    }
+  }
+
+  // Toggle alert enabled/disabled
+  async function handleToggleAlert(alertId, currentStatus) {
+    try {
+      const updated = await updateAlertStatus(alertId, !currentStatus);
+      setAlerts((prev) =>
+        prev.map((alert) => (alert.id === alertId ? updated : alert))
+      );
+      setError(null); // Clear any previous errors
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to update alert:", err);
+    }
+  }
+
+  // Delete alert
+  async function handleDeleteAlert(alertId) {
+    try {
+      await deleteAlert(alertId);
+      setAlerts((prev) => prev.filter((alert) => alert.id !== alertId));
+      setError(null); // Clear any previous errors
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to delete alert:", err);
+    }
+  }
+
+  // Save notification config
+  async function handleSaveNotificationConfig() {
+    try {
+      setNotificationLoading(true);
+      setNotificationError(null);
+      setNotificationSuccess(null);
+
+      const config = {
+        discord_webhook_url: discordWebhookUrl || null,
+        notification_enabled: notificationEnabled,
+      };
+
+      const updated = await updateNotificationConfig(config);
+      setNotificationConfig(updated);
+      setNotificationSuccess('Notification settings saved!');
+      
+      // Clear success message after 3 seconds
+      setTimeout(() => setNotificationSuccess(null), 3000);
+    } catch (err) {
+      setNotificationError(err.message);
+      console.error("Failed to save notification config:", err);
+    } finally {
+      setNotificationLoading(false);
+    }
+  }
+
+  // Test Discord webhook
+  async function handleTestWebhook() {
+    if (!discordWebhookUrl) {
+      setNotificationError('Please enter a Discord webhook URL first');
+      return;
+    }
+
+    try {
+      setTestingWebhook(true);
+      setNotificationError(null);
+      setNotificationSuccess(null);
+
+      const success = await testDiscordWebhook(discordWebhookUrl);
+      
+      if (success) {
+        setNotificationSuccess('Test notification sent! Check your Discord channel.');
+        setTimeout(() => setNotificationSuccess(null), 5000);
+      } else {
+        setNotificationError('Test failed. Check your webhook URL.');
+      }
+    } catch (err) {
+      setNotificationError('Test failed: ' + err.message);
+    } finally {
+      setTestingWebhook(false);
+    }
+  }
+
+  const selectedAddress = addresses.find((a) => a.id === selectedAddressId);
+
+  if (loading) {
+    return <div style={{ padding: "2rem" }}>Loading addresses...</div>;
+  }
+
+  if (addresses.length === 0) {
+    return (
+      <div style={{ padding: "2rem" }}>
+        <p>No addresses tracked yet. Add an address first to create alerts.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ maxWidth: "1400px", margin: "0 auto", padding: "2rem" }}>
+      <h1 style={{ marginBottom: "2rem" }}>Alert Rules & Notifications</h1>
+
+      {/* Two-column layout */}
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2rem" }}>
+        
+        {/* LEFT COLUMN: Alert Rules */}
+        <div>
+          <h2 style={{ marginTop: 0 }}>Alert Rules</h2>
+          
+          {/* Address selector */}
+          <div style={{ marginBottom: "2rem" }}>
+            <label style={{ display: "block", marginBottom: "0.5rem" }}>
+              <strong>Select Address:</strong>
+            </label>
+            <select
+              value={selectedAddressId || ""}
+              onChange={(e) => setSelectedAddressId(Number(e.target.value))}
+              style={{
+                width: "100%",
+                padding: "0.5rem",
+                fontSize: "1rem",
+                backgroundColor: "#1a1a1a",
+                border: "1px solid #444",
+                borderRadius: "4px",
+                color: "white"
+              }}
+            >
+              {addresses.map((addr) => (
+                <option key={addr.id} value={addr.id}>
+                  {addr.label || "Unlabeled"} - {addr.address}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {selectedAddress && (
+            <>
+              {/* Current address info */}
+              <div
+                style={{
+                  padding: "1rem",
+                  marginBottom: "2rem",
+                  backgroundColor: "#2a2a2a",
+                  borderRadius: "4px",
+                  border: "1px solid #444"
+                }}
+              >
+                <div style={{ fontSize: "0.9rem", color: "#999" }}>
+                  Managing alerts for:
+                </div>
+                <div style={{ fontWeight: "bold", marginTop: "0.25rem" }}>
+                  {selectedAddress.label || "Unlabeled"}
+                </div>
+                <div style={{ fontFamily: "monospace", fontSize: "0.9rem", color: "#999" }}>
+                  {selectedAddress.address}
+                </div>
+              </div>
+
+              {/* Alert creation form */}
+              <div style={{ marginBottom: "2rem" }}>
+                <h3>Create New Alert</h3>
+                <AlertForm onSubmit={handleAlertSubmit} />
+              </div>
+
+              {/* Existing alerts list */}
+              <div>
+                <h3>Active Alert Rules</h3>
+                {error && <p style={{ color: "red" }}>Error: {error}</p>}
+                {alerts.length === 0 ? (
+                  <p style={{ color: "#666" }}>
+                    No alert rules defined yet. Create one above.
+                  </p>
+                ) : (
+                  <ul style={{ listStyle: "none", padding: 0 }}>
+                    {alerts.map((alert) => (
+                      <li
+                        key={alert.id}
+                        style={{
+                          padding: "1rem",
+                          marginBottom: "0.5rem",
+                          border: "1px solid #444",
+                          borderRadius: "4px",
+                          backgroundColor: "#2a2a2a",
+                          opacity: alert.enabled ? 1 : 0.6,
+                        }}
+                      >
+                        <div
+                          style={{
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "flex-start",
+                          }}
+                        >
+                          <div style={{ flex: 1 }}>
+                            <div style={{ fontWeight: "bold", marginBottom: "0.25rem" }}>
+                              {formatAlertType(alert.type)}
+                            </div>
+                            {alert.threshold && (
+                              <div style={{ fontSize: "0.9rem", color: "#999" }}>
+                                Threshold: {alert.threshold} ETH
+                              </div>
+                            )}
+                            <div style={{ fontSize: "0.85rem", color: "#666", marginTop: "0.25rem" }}>
+                              Status: {alert.enabled ? "Enabled" : "Disabled"}
+                            </div>
+                          </div>
+                          <div style={{ display: "flex", gap: "0.5rem" }}>
+                            <Button
+                              onClick={() => handleToggleAlert(alert.id, alert.enabled)}
+                            >
+                              {alert.enabled ? "Disable" : "Enable"}
+                            </Button>
+                            <Button onClick={() => handleDeleteAlert(alert.id)}>
+                              Delete
+                            </Button>
+                          </div>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* RIGHT COLUMN: Notification Settings */}
+        <div>
+          <h2 style={{ marginTop: 0 }}>Notification Settings</h2>
+          
+          {notificationSuccess && (
+            <div style={{
+              padding: '0.75rem',
+              marginBottom: '1rem',
+              backgroundColor: '#00ff0020',
+              border: '1px solid #00ff00',
+              borderRadius: '4px',
+              color: '#00ff00'
+            }}>
+              {notificationSuccess}
+            </div>
+          )}
+
+          {notificationError && (
+            <div style={{
+              padding: '0.75rem',
+              marginBottom: '1rem',
+              backgroundColor: '#ff000020',
+              border: '1px solid #ff0000',
+              borderRadius: '4px',
+              color: '#ff6666'
+            }}>
+              {notificationError}
+            </div>
+          )}
+
+          {/* Master toggle */}
+          <div style={{ marginBottom: '2rem', padding: '1rem', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
+            <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+              <input
+                type="checkbox"
+                checked={notificationEnabled}
+                onChange={(e) => setNotificationEnabled(e.target.checked)}
+                style={{ marginRight: '0.5rem', width: '18px', height: '18px' }}
+              />
+              <span style={{ fontWeight: 'bold' }}>Enable Notifications</span>
+            </label>
+            <div style={{ fontSize: '0.85rem', color: '#666', marginTop: '0.5rem', marginLeft: '26px' }}>
+              Master switch for all notification channels
+            </div>
+          </div>
+
+          {/* Discord Section */}
+          <div style={{ marginBottom: '2rem' }}>
+            <h3 style={{ marginBottom: '1rem' }}>Discord</h3>
+            
+            <div style={{ marginBottom: '1rem' }}>
+              <label style={{ display: 'block', marginBottom: '0.5rem' }}>
+                Discord Webhook URL
+              </label>
+              <input
+                type="text"
+                value={discordWebhookUrl}
+                onChange={(e) => setDiscordWebhookUrl(e.target.value)}
+                placeholder="https://discord.com/api/webhooks/..."
+                style={{
+                  width: '100%',
+                  padding: '0.5rem',
+                  fontSize: '1rem',
+                  backgroundColor: '#1a1a1a',
+                  border: '1px solid #444',
+                  borderRadius: '4px',
+                  color: 'white',
+                  fontFamily: 'monospace',
+                  fontSize: '0.9rem'
+                }}
+              />
+              <div style={{ fontSize: '0.85rem', color: '#999', marginTop: '0.5rem' }}>
+                <a 
+                  href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  style={{ color: '#0066cc' }}
+                >
+                  How to get a Discord webhook URL
+                </a>
+              </div>
+            </div>
+
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
+              <button
+                onClick={handleSaveNotificationConfig}
+                disabled={notificationLoading}
+                style={{
+                  padding: '0.75rem 1.5rem',
+                  fontSize: '1rem',
+                  backgroundColor: notificationLoading ? '#333' : '#0066cc',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: notificationLoading ? 'not-allowed' : 'pointer'
+                }}
+              >
+                {notificationLoading ? 'Saving...' : 'Save Settings'}
+              </button>
+
+              <button
+                onClick={handleTestWebhook}
+                disabled={testingWebhook || !discordWebhookUrl}
+                style={{
+                  padding: '0.75rem 1.5rem',
+                  fontSize: '1rem',
+                  backgroundColor: testingWebhook || !discordWebhookUrl ? '#333' : '#28a745',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: testingWebhook || !discordWebhookUrl ? 'not-allowed' : 'pointer'
+                }}
+              >
+                {testingWebhook ? 'Testing...' : 'Test Webhook'}
+              </button>
+            </div>
+          </div>
+
+          {/* Telegram Section (Coming Soon) */}
+          <div style={{ marginBottom: '2rem', opacity: 0.5 }}>
+            <h3 style={{ marginBottom: '1rem' }}>Telegram</h3>
+            <div style={{ 
+              padding: '1rem', 
+              backgroundColor: '#333', 
+              borderRadius: '4px',
+              color: '#999',
+              textAlign: 'center'
+            }}>
+              Coming Soon
+            </div>
+          </div>
+
+          {/* Email Section (Coming Soon) */}
+          <div style={{ opacity: 0.5 }}>
+            <h3 style={{ marginBottom: '1rem' }}>Email</h3>
+            <div style={{ 
+              padding: '1rem', 
+              backgroundColor: '#333', 
+              borderRadius: '4px',
+              color: '#999',
+              textAlign: 'center'
+            }}>
+              Coming Soon
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+// Helper to format alert type for display
+function formatAlertType(type) {
+  const labels = {
+    incoming_tx: "Incoming transaction",
+    outgoing_tx: "Outgoing transaction",
+    large_transfer: "Large transfer",
+    balance_below: "Balance below threshold",
+  };
+  return labels[type] || type;
+}

frontend/src/pages/Login.jsx

@@ -0,0 +1,143 @@
+/**
+ * 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';
+
+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();
+
+  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);
+    }
+  }
+
+  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}
+            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

@@ -0,0 +1,185 @@
+/**
+ * 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';
+
+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();
+
+  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);
+    }
+  }
+
+  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}
+            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>
+  );
+}
+