kjannette/koin_ping_0.2.0
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

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

Browse Source 
Initial prettier pass with tabWidth=4.
This commit is contained in:
KS Jannette
2026-02-28 20:07:28 -05:00
parent a5d1bc171c
commit da8b45012a
23 changed files with 4590 additions and 4343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/package-lock.json generated
View File

@@ -18,6 +18,7 @@
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.2",
"prettier": "^3.8.1",
"typescript": "^5.9.3",
"vite": "^7.3.0"
}
@@ -2412,6 +2413,22 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/prettier": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
"integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/protobufjs": {
"version": "7.5.4",
"resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",

25
frontend/src/App.jsx
View File

@@ -23,13 +23,28 @@ export default function App() {
// Show main app if authenticated
return (
<div style={{ padding: "1rem" }}>
<nav style={{ marginBottom: "1rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<nav
style={{
marginBottom: "1rem",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<div>
<Link to="/addresses">Addresses</Link>{" | "}
<Link to="/alerts">Alerts</Link>{" | "}
<Link to="/addresses">Addresses</Link>
{" | "}
<Link to="/alerts">Alerts</Link>
{" | "}
<Link to="/history">History</Link>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
<div
style={{
display: "flex",
alignItems: "center",
gap: "1rem",
}}
>
<span style={{ fontSize: "0.9rem", color: "#999" }}>
{currentUser.email}
</span>
@@ -42,7 +57,7 @@ export default function App() {
color: "white",
border: "1px solid #555",
borderRadius: "4px",
cursor: "pointer"
cursor: "pointer",
}}
>
Logout

39
frontend/src/api/addresses.jsx
View File

@@ -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
@@ -14,14 +14,14 @@ export async function createAddress(data) {
try {
const headers = await getAuthHeaders();
const response = await fetch(`${API_BASE}/addresses`, {
method: 'POST',
method: "POST",
headers: headers,
body: JSON.stringify(data)
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';
let errorMessage = "Failed to create address";
try {
const error = await response.json();
errorMessage = error.message || errorMessage;
@@ -35,8 +35,10 @@ export async function createAddress(data) {
return response.json();
} catch (error) {
// Handle network errors
if (error.message.includes('fetch')) {
throw new Error('Cannot connect to server. Is the backend running?');
if (error.message.includes("fetch")) {
throw new Error(
"Cannot connect to server. Is the backend running?",
);
}
throw error;
}
@@ -50,12 +52,12 @@ export async function getAddresses() {
try {
const headers = await getAuthHeadersSimple();
const response = await fetch(`${API_BASE}/addresses`, {
headers: headers
headers: headers,
});
if (!response.ok) {
// Try to parse error response, but handle if it's not JSON
let errorMessage = 'Failed to fetch addresses';
let errorMessage = "Failed to fetch addresses";
try {
const error = await response.json();
errorMessage = error.message || errorMessage;
@@ -69,8 +71,10 @@ export async function getAddresses() {
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?');
if (error.message.includes("fetch")) {
throw new Error(
"Cannot connect to server. Is the backend running?",
);
}
throw error;
}
@@ -85,13 +89,13 @@ export async function deleteAddress(addressId) {
try {
const headers = await getAuthHeadersSimple();
const response = await fetch(`${API_BASE}/addresses/${addressId}`, {
method: 'DELETE',
headers: headers
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';
let errorMessage = "Failed to delete address";
try {
const error = await response.json();
errorMessage = error.message || errorMessage;
@@ -103,10 +107,11 @@ export async function deleteAddress(addressId) {
}
} catch (error) {
// Handle network errors
if (error.message.includes('fetch')) {
throw new Error('Cannot connect to server. Is the backend running?');
if (error.message.includes("fetch")) {
throw new Error(
"Cannot connect to server. Is the backend running?",
);
}
throw error;
}
}

14
frontend/src/api/alertEvents.jsx
View File

@@ -1,7 +1,7 @@
// 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)
@@ -11,11 +11,11 @@ export async function getAlertEvents() {
try {
const headers = await getAuthHeadersSimple();
const response = await fetch(`${API_BASE}/alert-events`, {
headers: headers
headers: headers,
});
if (!response.ok) {
let errorMessage = 'Failed to fetch alert events';
let errorMessage = "Failed to fetch alert events";
try {
const error = await response.json();
errorMessage = error.message || errorMessage;
@@ -27,8 +27,10 @@ export async function getAlertEvents() {
return response.json();
} catch (error) {
if (error.message.includes('fetch')) {
throw new Error('Cannot connect to server. Is the backend running?');
if (error.message.includes("fetch")) {
throw new Error(
"Cannot connect to server. Is the backend running?",
);
}
throw error;
}

72
frontend/src/api/alerts.jsx
View File

@@ -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",
};
/**
@@ -24,14 +24,17 @@ export const ALERT_TYPES = {
export async function createAlert(addressId, data) {
try {
const headers = await getAuthHeaders();
const response = await fetch(`${API_BASE}/addresses/${addressId}/alerts`, {
method: 'POST',
const response = await fetch(
`${API_BASE}/addresses/${addressId}/alerts`,
{
method: "POST",
headers: headers,
body: JSON.stringify(data)
});
body: JSON.stringify(data),
},
);
if (!response.ok) {
let errorMessage = 'Failed to create alert rule';
let errorMessage = "Failed to create alert rule";
try {
const error = await response.json();
errorMessage = error.message || errorMessage;
@@ -43,8 +46,10 @@ export async function createAlert(addressId, data) {
return response.json();
} catch (error) {
if (error.message.includes('fetch')) {
throw new Error('Cannot connect to server. Is the backend running?');
if (error.message.includes("fetch")) {
throw new Error(
"Cannot connect to server. Is the backend running?",
);
}
throw error;
}
@@ -58,12 +63,15 @@ export async function createAlert(addressId, data) {
export async function getAlerts(addressId) {
try {
const headers = await getAuthHeadersSimple();
const response = await fetch(`${API_BASE}/addresses/${addressId}/alerts`, {
headers: headers
});
const response = await fetch(
`${API_BASE}/addresses/${addressId}/alerts`,
{
headers: headers,
},
);
if (!response.ok) {
let errorMessage = 'Failed to fetch alert rules';
let errorMessage = "Failed to fetch alert rules";
try {
const error = await response.json();
errorMessage = error.message || errorMessage;
@@ -75,8 +83,10 @@ export async function getAlerts(addressId) {
return response.json();
} catch (error) {
if (error.message.includes('fetch')) {
throw new Error('Cannot connect to server. Is the backend running?');
if (error.message.includes("fetch")) {
throw new Error(
"Cannot connect to server. Is the backend running?",
);
}
throw error;
}
@@ -92,13 +102,13 @@ export async function updateAlertStatus(alertId, enabled) {
try {
const headers = await getAuthHeaders();
const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
method: 'PATCH',
method: "PATCH",
headers: headers,
body: JSON.stringify({ enabled })
body: JSON.stringify({ enabled }),
});
if (!response.ok) {
let errorMessage = 'Failed to update alert rule';
let errorMessage = "Failed to update alert rule";
try {
const error = await response.json();
errorMessage = error.message || errorMessage;
@@ -110,8 +120,10 @@ export async function updateAlertStatus(alertId, enabled) {
return response.json();
} catch (error) {
if (error.message.includes('fetch')) {
throw new Error('Cannot connect to server. Is the backend running?');
if (error.message.includes("fetch")) {
throw new Error(
"Cannot connect to server. Is the backend running?",
);
}
throw error;
}
@@ -126,12 +138,12 @@ export async function deleteAlert(alertId) {
try {
const headers = await getAuthHeadersSimple();
const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
method: 'DELETE',
headers: headers
method: "DELETE",
headers: headers,
});
if (!response.ok && response.status !== 204) {
let errorMessage = 'Failed to delete alert rule';
let errorMessage = "Failed to delete alert rule";
try {
const error = await response.json();
errorMessage = error.message || errorMessage;
@@ -141,8 +153,10 @@ export async function deleteAlert(alertId) {
throw new Error(errorMessage);
}
} catch (error) {
if (error.message.includes('fetch')) {
throw new Error('Cannot connect to server. Is the backend running?');
if (error.message.includes("fetch")) {
throw new Error(
"Cannot connect to server. Is the backend running?",
);
}
throw error;
}

13
frontend/src/api/authHeaders.js
View File

@@ -5,7 +5,7 @@
* Includes Firebase ID token in Authorization header
*/
import { auth } from '../firebase/config';
import { auth } from "../firebase/config";
/**
* Get headers with authentication token
@@ -15,15 +15,15 @@ export async function getAuthHeaders() {
const currentUser = auth.currentUser;
if (!currentUser) {
throw new Error('No authenticated user');
throw new Error("No authenticated user");
}
// Get Firebase ID token
const token = await currentUser.getIdToken();
return {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
};
}
@@ -35,13 +35,12 @@ export async function getAuthHeadersSimple() {
const currentUser = auth.currentUser;
if (!currentUser) {
throw new Error('No authenticated user');
throw new Error("No authenticated user");
}
const token = await currentUser.getIdToken();
return {
'Authorization': `Bearer ${token}`
Authorization: `Bearer ${token}`,
};
}

2
frontend/src/api/config.js
View File

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

38
frontend/src/api/notificationConfig.jsx
View File

@@ -1,7 +1,7 @@
// 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
@@ -11,11 +11,11 @@ export async function getNotificationConfig() {
try {
const headers = await getAuthHeaders();
const response = await fetch(`${API_BASE}/notification-config`, {
headers: headers
headers: headers,
});
if (!response.ok) {
let errorMessage = 'Failed to fetch notification config';
let errorMessage = "Failed to fetch notification config";
try {
const error = await response.json();
errorMessage = error.message || errorMessage;
@@ -27,8 +27,10 @@ export async function getNotificationConfig() {
return response.json();
} catch (error) {
if (error.message.includes('fetch')) {
throw new Error('Cannot connect to server. Is the backend running?');
if (error.message.includes("fetch")) {
throw new Error(
"Cannot connect to server. Is the backend running?",
);
}
throw error;
}
@@ -47,13 +49,13 @@ export async function updateNotificationConfig(config) {
try {
const headers = await getAuthHeaders();
const response = await fetch(`${API_BASE}/notification-config`, {
method: 'PUT',
method: "PUT",
headers: headers,
body: JSON.stringify(config)
body: JSON.stringify(config),
});
if (!response.ok) {
let errorMessage = 'Failed to update notification config';
let errorMessage = "Failed to update notification config";
try {
const error = await response.json();
errorMessage = error.message || errorMessage;
@@ -65,8 +67,10 @@ export async function updateNotificationConfig(config) {
return response.json();
} catch (error) {
if (error.message.includes('fetch')) {
throw new Error('Cannot connect to server. Is the backend running?');
if (error.message.includes("fetch")) {
throw new Error(
"Cannot connect to server. Is the backend running?",
);
}
throw error;
}
@@ -81,19 +85,19 @@ export async function updateNotificationConfig(config) {
export async function testDiscordWebhook(webhookUrl) {
try {
const payload = {
content: 'Koin Ping test notification - Your Discord webhook is configured correctly!',
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)
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
return response.ok;
} catch (error) {
console.error('Discord webhook test failed:', error);
console.error("Discord webhook test failed:", error);
return false;
}
}

4
frontend/src/api/status.jsx
View File

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

4
frontend/src/components/AlertForm.jsx
View File

@@ -45,8 +45,8 @@ export default function AlertForm({ onSubmit }) {
value={opt.value}
checked={type === opt.value}
onChange={() => setType(opt.value)}
/>
{" "}{opt.label}
/>{" "}
{opt.label}
</label>
))}
</div>

1
frontend/src/components/Button.jsx
View File

@@ -20,4 +20,3 @@ export default function Button({
</button>
);
}

1
frontend/src/components/Input.jsx
View File

@@ -30,4 +30,3 @@ export default function Input({
</label>
);
}

25
frontend/src/contexts/AuthContext.jsx
View File

@@ -4,14 +4,14 @@
* Provides authentication state and methods throughout the app
*/
import { createContext, useContext, useEffect, useState } from 'react';
import { createContext, useContext, useEffect, useState } from "react";
import {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
onAuthStateChanged
} from 'firebase/auth';
import { auth } from '../firebase/config';
onAuthStateChanged,
} from "firebase/auth";
import { auth } from "../firebase/config";
const AuthContext = createContext();
@@ -22,7 +22,7 @@ const AuthContext = createContext();
export function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within AuthProvider');
throw new Error("useAuth must be used within AuthProvider");
}
return context;
}
@@ -41,7 +41,11 @@ export function AuthProvider({ children }) {
async function signup(email, password) {
try {
setError(null);
const result = await createUserWithEmailAndPassword(auth, email, password);
const result = await createUserWithEmailAndPassword(
auth,
email,
password,
);
return result.user;
} catch (err) {
setError(err.message);
@@ -55,7 +59,11 @@ export function AuthProvider({ children }) {
async function login(email, password) {
try {
setError(null);
const result = await signInWithEmailAndPassword(auth, email, password);
const result = await signInWithEmailAndPassword(
auth,
email,
password,
);
return result.user;
} catch (err) {
setError(err.message);
@@ -95,7 +103,7 @@ export function AuthProvider({ children }) {
login,
logout,
error,
loading
loading,
};
return (
@@ -104,4 +112,3 @@ export function AuthProvider({ children }) {
</AuthContext.Provider>
);
}

13
frontend/src/firebase/config.js
View File

@@ -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,7 +17,7 @@ const firebaseConfig = {
storageBucket: firebaseStorageBucket,
messagingSenderId: firebaseMessagingSenderId,
appId: firebaseAppId,
measurementId: firebaseMeasurementId
measurementId: firebaseMeasurementId,
};
const app = initializeApp(firebaseConfig);
@@ -27,4 +25,3 @@ const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export default app;

2
frontend/src/main.jsx
View File

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

14
frontend/src/pages/Addresses.jsx
View File

@@ -67,10 +67,20 @@ export default function Addresses() {
borderRadius: "4px",
}}
>
<div style={{ fontWeight: "bold", marginBottom: "0.25rem" }}>
<div
style={{
fontWeight: "bold",
marginBottom: "0.25rem",
}}
>
{addr.label || "Unlabeled"}
</div>
<div style={{ fontFamily: "monospace", fontSize: "0.9rem" }}>
<div
style={{
fontFamily: "monospace",
fontSize: "0.9rem",
}}
>
{addr.address}
</div>
</li>

16
frontend/src/pages/AlertHistory.jsx
View File

@@ -29,7 +29,9 @@ export default function AlertHistory() {
}
if (error) {
return <div style={{ padding: "2rem", color: "red" }}>Error: {error}</div>;
return (
<div style={{ padding: "2rem", color: "red" }}>Error: {error}</div>
);
}
return (
@@ -50,9 +52,17 @@ export default function AlertHistory() {
borderRadius: "4px",
}}
>
<div style={{ marginBottom: "0.5rem" }}>{event.message}</div>
<div style={{ marginBottom: "0.5rem" }}>
{event.message}
</div>
{event.address_label && (
<div style={{ fontSize: "0.9rem", color: "#666", marginBottom: "0.25rem" }}>
<div
style={{
fontSize: "0.9rem",
color: "#666",
marginBottom: "0.25rem",
}}
>
Address: {event.address_label}
</div>
)}

393
frontend/src/pages/Alerts.jsx
View File

@@ -3,8 +3,17 @@ 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";
import {
getAlerts,
createAlert,
updateAlertStatus,
deleteAlert,
} from "../api/alerts";
import {
getNotificationConfig,
updateNotificationConfig,
testDiscordWebhook,
} from "../api/notificationConfig";
export default function Alerts() {
const [addresses, setAddresses] = useState([]);
@@ -15,7 +24,7 @@ export default function Alerts() {
// Notification config state
const [notificationConfig, setNotificationConfig] = useState(null);
const [discordWebhookUrl, setDiscordWebhookUrl] = useState('');
const [discordWebhookUrl, setDiscordWebhookUrl] = useState("");
const [notificationEnabled, setNotificationEnabled] = useState(true);
const [notificationLoading, setNotificationLoading] = useState(false);
const [notificationError, setNotificationError] = useState(null);
@@ -38,8 +47,10 @@ export default function Alerts() {
// Fetch notification config
const configData = await getNotificationConfig();
setNotificationConfig(configData);
setDiscordWebhookUrl(configData.discord_webhook_url || '');
setNotificationEnabled(configData.notification_enabled !== false);
setDiscordWebhookUrl(configData.discord_webhook_url || "");
setNotificationEnabled(
configData.notification_enabled !== false,
);
} catch (err) {
setError(err.message);
console.error("Failed to fetch data:", err);
@@ -91,7 +102,7 @@ export default function Alerts() {
try {
const updated = await updateAlertStatus(alertId, !currentStatus);
setAlerts((prev) =>
prev.map((alert) => (alert.id === alertId ? updated : alert))
prev.map((alert) => (alert.id === alertId ? updated : alert)),
);
setError(null); // Clear any previous errors
} catch (err) {
@@ -126,7 +137,7 @@ export default function Alerts() {
const updated = await updateNotificationConfig(config);
setNotificationConfig(updated);
setNotificationSuccess('Notification settings saved!');
setNotificationSuccess("Notification settings saved!");
// Clear success message after 3 seconds
setTimeout(() => setNotificationSuccess(null), 3000);
@@ -141,7 +152,7 @@ export default function Alerts() {
// Test Discord webhook
async function handleTestWebhook() {
if (!discordWebhookUrl) {
setNotificationError('Please enter a Discord webhook URL first');
setNotificationError("Please enter a Discord webhook URL first");
return;
}
@@ -153,13 +164,15 @@ export default function Alerts() {
const success = await testDiscordWebhook(discordWebhookUrl);
if (success) {
setNotificationSuccess('Test notification sent! Check your Discord channel.');
setNotificationSuccess(
"Test notification sent! Check your Discord channel.",
);
setTimeout(() => setNotificationSuccess(null), 5000);
} else {
setNotificationError('Test failed. Check your webhook URL.');
setNotificationError("Test failed. Check your webhook URL.");
}
} catch (err) {
setNotificationError('Test failed: ' + err.message);
setNotificationError("Test failed: " + err.message);
} finally {
setTestingWebhook(false);
}
@@ -174,30 +187,44 @@ export default function Alerts() {
if (addresses.length === 0) {
return (
<div style={{ padding: "2rem" }}>
<p>No addresses tracked yet. Add an address first to create alerts.</p>
<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>
<h1 style={{ marginBottom: "2rem" }}>
Alert Rules & Notifications
</h1>
{/* Two-column layout */}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2rem" }}>
<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" }}>
<label
style={{ display: "block", marginBottom: "0.5rem" }}
>
<strong>Select Address:</strong>
</label>
<select
value={selectedAddressId || ""}
onChange={(e) => setSelectedAddressId(Number(e.target.value))}
onChange={(e) =>
setSelectedAddressId(Number(e.target.value))
}
style={{
width: "100%",
padding: "0.5rem",
@@ -205,7 +232,7 @@ export default function Alerts() {
backgroundColor: "#1a1a1a",
border: "1px solid #444",
borderRadius: "4px",
color: "white"
color: "white",
}}
>
{addresses.map((addr) => (
@@ -225,16 +252,32 @@ export default function Alerts() {
marginBottom: "2rem",
backgroundColor: "#2a2a2a",
borderRadius: "4px",
border: "1px solid #444"
border: "1px solid #444",
}}
>
<div
style={{
fontSize: "0.9rem",
color: "#999",
}}
>
<div style={{ fontSize: "0.9rem", color: "#999" }}>
Managing alerts for:
</div>
<div style={{ fontWeight: "bold", marginTop: "0.25rem" }}>
<div
style={{
fontWeight: "bold",
marginTop: "0.25rem",
}}
>
{selectedAddress.label || "Unlabeled"}
</div>
<div style={{ fontFamily: "monospace", fontSize: "0.9rem", color: "#999" }}>
<div
style={{
fontFamily: "monospace",
fontSize: "0.9rem",
color: "#999",
}}
>
{selectedAddress.address}
</div>
</div>
@@ -248,13 +291,23 @@ export default function Alerts() {
{/* Existing alerts list */}
<div>
<h3>Active Alert Rules</h3>
{error && <p style={{ color: "red" }}>Error: {error}</p>}
{error && (
<p style={{ color: "red" }}>
Error: {error}
</p>
)}
{alerts.length === 0 ? (
<p style={{ color: "#666" }}>
No alert rules defined yet. Create one above.
No alert rules defined yet. Create one
above.
</p>
) : (
<ul style={{ listStyle: "none", padding: 0 }}>
<ul
style={{
listStyle: "none",
padding: 0,
}}
>
{alerts.map((alert) => (
<li
key={alert.id}
@@ -264,36 +317,88 @@ export default function Alerts() {
border: "1px solid #444",
borderRadius: "4px",
backgroundColor: "#2a2a2a",
opacity: alert.enabled ? 1 : 0.6,
opacity: alert.enabled
? 1
: 0.6,
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
justifyContent:
"space-between",
alignItems:
"flex-start",
}}
>
<div style={{ flex: 1 }}>
<div style={{ fontWeight: "bold", marginBottom: "0.25rem" }}>
{formatAlertType(alert.type)}
<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
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)}
<div
style={{
fontSize:
"0.85rem",
color: "#666",
marginTop:
"0.25rem",
}}
>
{alert.enabled ? "Disable" : "Enable"}
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)}>
<Button
onClick={() =>
handleDeleteAlert(
alert.id,
)
}
>
Delete
</Button>
</div>
@@ -312,148 +417,208 @@ export default function Alerts() {
<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'
}}>
<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'
}}>
<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' }}>
<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' }}
onChange={(e) =>
setNotificationEnabled(e.target.checked)
}
style={{
marginRight: "0.5rem",
width: "18px",
height: "18px",
}}
/>
<span style={{ fontWeight: 'bold' }}>Enable Notifications</span>
<span style={{ fontWeight: "bold" }}>
Enable Notifications
</span>
</label>
<div style={{ fontSize: '0.85rem', color: '#666', marginTop: '0.5rem', marginLeft: '26px' }}>
<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: "2rem" }}>
<h3 style={{ marginBottom: "1rem" }}>Discord</h3>
<div style={{ marginBottom: '1rem' }}>
<label style={{ display: 'block', marginBottom: '0.5rem' }}>
<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)}
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'
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' }}>
<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' }}
style={{ color: "#0066cc" }}
>
How to get a Discord webhook URL
</a>
</div>
</div>
<div style={{ display: 'flex', gap: '0.5rem' }}>
<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'
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'}
{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'
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'}
{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'
}}>
<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'
}}>
<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>
);

119
frontend/src/pages/Login.jsx
View File

@@ -4,14 +4,14 @@
* 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 [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const { login } = useAuth();
@@ -22,50 +22,54 @@ export default function Login() {
// Validation
if (!email || !password) {
setError('Please fill in all fields');
setError("Please fill in all fields");
return;
}
try {
setError('');
setError("");
setLoading(true);
await login(email, password);
navigate('/addresses'); // Redirect to main app
navigate("/addresses"); // Redirect to main app
} catch (err) {
setError('Failed to log in: ' + err.message);
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' }}>
<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'
}}>
<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' }}>
<div style={{ marginBottom: "1rem" }}>
<label style={{ display: "block", marginBottom: "0.5rem" }}>
Email
</label>
<input
@@ -74,20 +78,20 @@ export default function Login() {
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'
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' }}>
<div style={{ marginBottom: "1.5rem" }}>
<label style={{ display: "block", marginBottom: "0.5rem" }}>
Password
</label>
<input
@@ -96,13 +100,13 @@ export default function Login() {
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'
width: "100%",
padding: "0.5rem",
fontSize: "1rem",
backgroundColor: "#1a1a1a",
border: "1px solid #444",
borderRadius: "4px",
color: "white",
}}
required
/>
@@ -112,26 +116,26 @@ export default function Login() {
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'
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'}
{loading ? "Logging in..." : "Log In"}
</button>
</form>
<div style={{ marginTop: '1.5rem', textAlign: 'center' }}>
<p style={{ color: '#999' }}>
Don't have an account?{' '}
<div style={{ marginTop: "1.5rem", textAlign: "center" }}>
<p style={{ color: "#999" }}>
Don't have an account?{" "}
<Link
to="/signup"
style={{ color: '#0066cc', textDecoration: 'none' }}
style={{ color: "#0066cc", textDecoration: "none" }}
>
Sign up here
</Link>
@@ -140,4 +144,3 @@ export default function Login() {
</div>
);
}

155
frontend/src/pages/Signup.jsx
View File

@@ -4,15 +4,15 @@
* 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 [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const { signup } = useAuth();
@@ -23,35 +23,35 @@ export default function Signup() {
// Validation
if (!email || !password || !confirmPassword) {
setError('Please fill in all fields');
setError("Please fill in all fields");
return;
}
if (password !== confirmPassword) {
setError('Passwords do not match');
setError("Passwords do not match");
return;
}
if (password.length < 6) {
setError('Password must be at least 6 characters');
setError("Password must be at least 6 characters");
return;
}
try {
setError('');
setError("");
setLoading(true);
await signup(email, password);
navigate('/addresses'); // Auto-login and redirect
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');
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);
setError("Failed to create account: " + err.message);
}
} finally {
setLoading(false);
@@ -59,33 +59,37 @@ export default function Signup() {
}
return (
<div style={{
maxWidth: '400px',
margin: '4rem auto',
padding: '2rem',
border: '1px solid #333',
borderRadius: '8px'
}}>
<h1 style={{ marginBottom: '2rem', textAlign: 'center' }}>
<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'
}}>
<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' }}>
<div style={{ marginBottom: "1rem" }}>
<label style={{ display: "block", marginBottom: "0.5rem" }}>
Email
</label>
<input
@@ -94,20 +98,20 @@ export default function Signup() {
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'
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' }}>
<div style={{ marginBottom: "1rem" }}>
<label style={{ display: "block", marginBottom: "0.5rem" }}>
Password
</label>
<input
@@ -116,20 +120,20 @@ export default function Signup() {
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'
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' }}>
<div style={{ marginBottom: "1.5rem" }}>
<label style={{ display: "block", marginBottom: "0.5rem" }}>
Confirm Password
</label>
<input
@@ -138,13 +142,13 @@ export default function Signup() {
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'
width: "100%",
padding: "0.5rem",
fontSize: "1rem",
backgroundColor: "#1a1a1a",
border: "1px solid #444",
borderRadius: "4px",
color: "white",
}}
required
/>
@@ -154,26 +158,26 @@ export default function Signup() {
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'
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'}
{loading ? "Creating account..." : "Sign Up"}
</button>
</form>
<div style={{ marginTop: '1.5rem', textAlign: 'center' }}>
<p style={{ color: '#999' }}>
Already have an account?{' '}
<div style={{ marginTop: "1.5rem", textAlign: "center" }}>
<p style={{ color: "#999" }}>
Already have an account?{" "}
<Link
to="/login"
style={{ color: '#0066cc', textDecoration: 'none' }}
style={{ color: "#0066cc", textDecoration: "none" }}
>
Log in here
</Link>
@@ -182,4 +186,3 @@ export default function Signup() {
</div>
);
}

1
frontend/tsconfig.json
View File

@@ -22,4 +22,3 @@
},
"include": ["src"]
}

11
frontend/vite.config.js
View File

@@ -1,5 +1,5 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
@@ -7,11 +7,10 @@ export default defineConfig({
server: {
port: 3000,
proxy: {
'/v1': {
target: 'http://localhost:3001',
"/v1": {
target: "http://localhost:3001",
changeOrigin: true,
},
},
},
})
});