diff --git a/trahn-trade-frontend/src/App.css b/trahn-trade-frontend/src/App.css index 7b6075e..37e9cd5 100644 --- a/trahn-trade-frontend/src/App.css +++ b/trahn-trade-frontend/src/App.css @@ -52,7 +52,7 @@ header { color: var(--text-primary); text-align: center; letter-spacing: 0.25em; - text-shadow: 0 10 30px rgba(88, 166, 255, 0.3); + text-shadow: 4px 12px 12px rgb(173, 1, 124); } .subtitle { @@ -105,15 +105,16 @@ header { .date-label { font-family: 'Ac437_Rainbow100_re_132'; font-weight: 600; - font-size: 1.45rem; + font-size: 1.65rem; font-weight: 600; + letter-spacing: 2px; color: var(--text-primary); } .date-status { display: block; font-family: 'Ac437_Rainbow100_re_132', monospace; - font-size: 0.75rem; + font-size: 1rem; color: var(--text-secondary); margin-top: 0.25rem; } diff --git a/trahn-trade-frontend/src/App.jsx b/trahn-trade-frontend/src/App.jsx index efc21df..c8c95f4 100644 --- a/trahn-trade-frontend/src/App.jsx +++ b/trahn-trade-frontend/src/App.jsx @@ -8,7 +8,6 @@ import { Login } from './pages/Login'; import { Signup } from './pages/Signup'; import './App.css'; -// Create React Query client const queryClient = new QueryClient({ defaultOptions: { queries: { @@ -20,7 +19,6 @@ const queryClient = new QueryClient({ }, }); -// Redirect authenticated users away from auth pages function PublicRoute({ children }) { const { currentUser } = useAuth(); diff --git a/trahn-trade-frontend/src/api/tradingApi.js b/trahn-trade-frontend/src/api/tradingApi.js index b3fbc6a..31a0ed5 100644 --- a/trahn-trade-frontend/src/api/tradingApi.js +++ b/trahn-trade-frontend/src/api/tradingApi.js @@ -1,81 +1,54 @@ -/** - * Trading API Client - * Communicates with backend REST API - */ - const API_BASE = 'http://localhost:3001/v1'; export const tradingApi = { - /** - * Get current trading day prices - */ - getCurrentPrices: async () => { - const response = await fetch(`${API_BASE}/prices/today`); - if (!response.ok) throw new Error(`HTTP ${response.status}`); - return response.json(); - }, - /** - * Get current trading day trades - */ - getCurrentTrades: async () => { - const response = await fetch(`${API_BASE}/trades/today`); - if (!response.ok) throw new Error(`HTTP ${response.status}`); - return response.json(); - }, + getCurrentPrices: async () => { + const response = await fetch(`${API_BASE}/prices/today`); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + return response.json(); + }, - /** - * Get current grid state - */ - getCurrentGrid: async () => { - const response = await fetch(`${API_BASE}/grid/current`); - if (!response.ok) throw new Error(`HTTP ${response.status}`); - return response.json(); - }, + getCurrentTrades: async () => { + const response = await fetch(`${API_BASE}/trades/today`); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + return response.json(); + }, - /** - * Get latest support/resistance levels - */ - getLatestSR: async () => { - const response = await fetch(`${API_BASE}/support-resistance/latest`); - if (!response.ok) throw new Error(`HTTP ${response.status}`); - return response.json(); - }, + getCurrentGrid: async () => { + const response = await fetch(`${API_BASE}/grid/current`); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + return response.json(); + }, - /** - * Get available trading days - */ - getAvailableDays: async () => { - const response = await fetch(`${API_BASE}/prices/days`); - if (!response.ok) throw new Error(`HTTP ${response.status}`); - return response.json(); - }, - /** - * Get historical prices for a specific day - */ - getPricesByDay: async (date) => { - const response = await fetch(`${API_BASE}/prices/day/${date}`); - if (!response.ok) throw new Error(`HTTP ${response.status}`); - return response.json(); - }, + getLatestSR: async () => { + const response = await fetch(`${API_BASE}/support-resistance/latest`); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + return response.json(); + }, - /** - * Get historical trades for a specific day - */ - getTradesByDay: async (date) => { - const response = await fetch(`${API_BASE}/trades/day/${date}`); - if (!response.ok) throw new Error(`HTTP ${response.status}`); - return response.json(); - }, + getAvailableDays: async () => { + const response = await fetch(`${API_BASE}/prices/days`); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + return response.json(); + }, - /** - * Get trade statistics - */ - getTradeStats: async () => { - const response = await fetch(`${API_BASE}/trades/stats`); - if (!response.ok) throw new Error(`HTTP ${response.status}`); - return response.json(); - }, + getPricesByDay: async (date) => { + const response = await fetch(`${API_BASE}/prices/day/${date}`); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + return response.json(); + }, + + getTradesByDay: async (date) => { + const response = await fetch(`${API_BASE}/trades/day/${date}`); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + return response.json(); + }, + + getTradeStats: async () => { + const response = await fetch(`${API_BASE}/trades/stats`); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + return response.json(); + }, }; diff --git a/trahn-trade-frontend/src/auth/firebase.js b/trahn-trade-frontend/src/auth/firebase.js index 03ee791..37726e9 100644 --- a/trahn-trade-frontend/src/auth/firebase.js +++ b/trahn-trade-frontend/src/auth/firebase.js @@ -7,7 +7,6 @@ const app = initializeApp(firebaseConfig); export const auth = getAuth(app); export const db = getFirestore(app); -// Add email to waitlist collection export async function addToWaitlist(email) { try { await addDoc(collection(db, 'trahn-trade-signups'), { diff --git a/trahn-trade-frontend/src/components/Chart.jsx b/trahn-trade-frontend/src/components/Chart.jsx index 3da40a6..6f4613a 100644 --- a/trahn-trade-frontend/src/components/Chart.jsx +++ b/trahn-trade-frontend/src/components/Chart.jsx @@ -23,7 +23,6 @@ export function Chart({ prices, trades }) { const [tooltip, setTooltip] = useState(null); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); - // Handle resize useEffect(() => { const updateDimensions = () => { if (containerRef.current) { @@ -53,7 +52,6 @@ export function Chart({ prices, trades }) { const chartWidth = width - PADDING.left - PADDING.right; const chartHeight = height - PADDING.top - PADDING.bottom; - // Clear ctx.clearRect(0, 0, width, height); if (!prices || prices.length === 0) { @@ -64,7 +62,6 @@ export function Chart({ prices, trades }) { return; } - // Calculate bounds const priceValues = prices.map(d => d.p || d.price); const times = prices.map(d => d.t || d.timestamp); @@ -79,7 +76,6 @@ export function Chart({ prices, trades }) { const baselinePrice = priceValues[0]; - // Coordinate converters const priceToY = (price) => { const range = maxPrice - minPrice; const normalized = (price - minPrice) / range; @@ -92,7 +88,6 @@ export function Chart({ prices, trades }) { return PADDING.left + chartWidth * normalized; }; - // Draw grid ctx.strokeStyle = COLORS.grid; ctx.lineWidth = 1; @@ -191,13 +186,11 @@ export function Chart({ prices, trades }) { ctx.fillStyle = color + '33'; ctx.fill(); - // Outer ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = color; ctx.fill(); - // Inner ctx.beginPath(); ctx.arc(x, y, radius - 3, 0, Math.PI * 2); ctx.fillStyle = COLORS.bg; diff --git a/trahn-trade-frontend/src/contexts/TradingDataContext.jsx b/trahn-trade-frontend/src/contexts/TradingDataContext.jsx index 155ff6a..50f8f0a 100644 --- a/trahn-trade-frontend/src/contexts/TradingDataContext.jsx +++ b/trahn-trade-frontend/src/contexts/TradingDataContext.jsx @@ -62,7 +62,6 @@ function reducer(state, action) { export function TradingDataProvider({ children }) { const [state, dispatch] = useReducer(reducer, initialState); - // React Query: Poll current day data every 1 minute const { data: currentData, error, isLoading } = useQuery({ queryKey: ['currentDay'], queryFn: async () => { @@ -87,7 +86,6 @@ export function TradingDataProvider({ children }) { retryDelay: 2000, }); - // Update context when live data changes useEffect(() => { if (currentData) { dispatch({ @@ -97,7 +95,6 @@ export function TradingDataProvider({ children }) { } }, [currentData]); - // Handle connection status useEffect(() => { if (error) { dispatch({ type: 'SET_CONNECTION_STATUS', status: 'error' }); diff --git a/trahn-trade-frontend/src/hooks/useChartData.js b/trahn-trade-frontend/src/hooks/useChartData.js index 71a30e7..aeab7d7 100644 --- a/trahn-trade-frontend/src/hooks/useChartData.js +++ b/trahn-trade-frontend/src/hooks/useChartData.js @@ -1,18 +1,3 @@ -/** - * DEPRECATED - Replaced by TradingDataContext + React Query - * - * This file is kept for reference but no longer used. - * The new implementation: - * - Uses React Query for polling - * - Uses Context for state management - * - Calls REST API instead of JSON files - * - * See: - * - contexts/TradingDataContext.jsx - * - hooks/useTradingData.js - * - api/tradingApi.js - */ - export function useChartData() { throw new Error('useChartData is deprecated. Use useTradingData from TradingDataContext instead.'); } diff --git a/trahn-trade-frontend/src/hooks/useTradingData.js b/trahn-trade-frontend/src/hooks/useTradingData.js index c5ca334..a1b5a18 100644 --- a/trahn-trade-frontend/src/hooks/useTradingData.js +++ b/trahn-trade-frontend/src/hooks/useTradingData.js @@ -1,15 +1,7 @@ -/** - * Custom hooks for trading data management - * Handles carousel navigation and historical day loading - */ - import { useQuery } from '@tanstack/react-query'; import { useTradingData } from '../contexts/TradingDataContext'; import { tradingApi } from '../api/tradingApi'; -/** - * Hook for loading historical day data (lazy load) - */ export function useHistoricalDay(date, enabled = false) { return useQuery({ queryKey: ['historicalDay', date], @@ -26,9 +18,6 @@ export function useHistoricalDay(date, enabled = false) { }); } -/** - * Hook for carousel navigation - */ export function useCarousel() { const { state, dispatch } = useTradingData(); @@ -38,12 +27,9 @@ export function useCarousel() { } if (index === state.availableDays.length - 1) { - // Navigate to live (current) day dispatch({ type: 'SWITCH_TO_LIVE' }); } else { - // Load historical day const date = state.availableDays[index]; - // Historical data will be loaded via useHistoricalDay in Dashboard dispatch({ type: 'LOAD_HISTORICAL_DAY', prices: [], diff --git a/trahn-trade-frontend/src/pages/Dashboard.jsx b/trahn-trade-frontend/src/pages/Dashboard.jsx index 11f78af..31d6c09 100644 --- a/trahn-trade-frontend/src/pages/Dashboard.jsx +++ b/trahn-trade-frontend/src/pages/Dashboard.jsx @@ -12,11 +12,9 @@ export function Dashboard() { const { state, dispatch } = useTradingData(); const carousel = useCarousel(); - // Load historical day data when viewing past days const historicalDate = !state.isLive ? state.availableDays[state.currentDayIndex] : null; const { data: historicalData } = useHistoricalDay(historicalDate, !state.isLive); - // Update context with historical data when loaded useEffect(() => { if (historicalData && !state.isLive) { dispatch({ diff --git a/trahn-trade-frontend/src/pages/Signup.jsx b/trahn-trade-frontend/src/pages/Signup.jsx index b795cd6..53beeed 100644 --- a/trahn-trade-frontend/src/pages/Signup.jsx +++ b/trahn-trade-frontend/src/pages/Signup.jsx @@ -1,16 +1,13 @@ import { useState } from 'react'; import { Link } from 'react-router-dom'; import { addToWaitlist } from '../auth/firebase'; -//a comment export function Signup() { const [email, setEmail] = useState(''); const [loading, setLoading] = useState(false); const [submitted, setSubmitted] = useState(false); const [error, setError] = useState(''); -// -// -// + async function handleSubmit(e) { e.preventDefault(); @@ -33,8 +30,7 @@ export function Signup() { } setLoading(false); } -// some spacing -//more + return (