Intial Version
This commit is contained in:
303
electron-app/src/renderer/App.tsx
Normal file
303
electron-app/src/renderer/App.tsx
Normal file
@@ -0,0 +1,303 @@
|
||||
import { useState, useEffect, useMemo, useRef } from 'react';
|
||||
import { useWebSocket } from './hooks/useWebSocket';
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
||||
|
||||
const TIME_RANGES = [
|
||||
{ label: '6 Hours', value: '6h' },
|
||||
{ label: '24 Hours', value: '24h' },
|
||||
{ label: '3 Days', value: '3d' },
|
||||
{ label: '7 Days', value: '7d' },
|
||||
{ label: '1 Month', value: '1mo' },
|
||||
{ label: 'YTD', value: 'ytd' },
|
||||
];
|
||||
|
||||
const COLORS = [
|
||||
'#8884d8', '#82ca9d', '#ffc658', '#ff7c7c', '#a28fd0', '#f5a623',
|
||||
'#50e3c2', '#ff6b9d', '#4a90e2', '#7ed321', '#d0021b', '#f8e71c'
|
||||
];
|
||||
|
||||
export function App() {
|
||||
const { status, latestPrice, historyData, requestHistory } = useWebSocket();
|
||||
const [selectedRange, setSelectedRange] = useState('7d');
|
||||
const [zoomLevel, setZoomLevel] = useState(1);
|
||||
const chartContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (status.connected) {
|
||||
requestHistory(selectedRange);
|
||||
}
|
||||
}, [status.connected, selectedRange, requestHistory]);
|
||||
|
||||
const chartData = useMemo(() => {
|
||||
if (!historyData?.prices) return [];
|
||||
|
||||
// Group by timestamp and seller
|
||||
const grouped = new Map<string, any>();
|
||||
|
||||
historyData.prices.forEach(price => {
|
||||
const time = new Date(price.timestamp).getTime();
|
||||
const key = time.toString();
|
||||
|
||||
if (!grouped.has(key)) {
|
||||
grouped.set(key, { timestamp: time, time: new Date(price.timestamp).toLocaleString() });
|
||||
}
|
||||
|
||||
const entry = grouped.get(key);
|
||||
const sellerKey = `${price.sellerName}`;
|
||||
entry[sellerKey] = price.pricePerMillion;
|
||||
});
|
||||
|
||||
return Array.from(grouped.values()).sort((a, b) => a.timestamp - b.timestamp);
|
||||
}, [historyData]);
|
||||
|
||||
const sellers = useMemo(() => {
|
||||
if (!historyData?.prices) return [];
|
||||
const uniqueSellers = new Set(historyData.prices.map(p => p.sellerName));
|
||||
return Array.from(uniqueSellers);
|
||||
}, [historyData]);
|
||||
|
||||
const { minY, maxY } = useMemo(() => {
|
||||
if (!historyData?.prices || historyData.prices.length === 0) {
|
||||
return { minY: 0, maxY: 1 };
|
||||
}
|
||||
|
||||
// Get all prices and sort them
|
||||
const allPrices = historyData.prices.map(p => p.pricePerMillion).sort((a, b) => a - b);
|
||||
|
||||
// Find the 90th percentile to focus on competitive prices
|
||||
const percentile90Index = Math.floor(allPrices.length * 0.90);
|
||||
const percentile90 = allPrices[percentile90Index];
|
||||
|
||||
// Get the minimum price
|
||||
const minPrice = allPrices[0];
|
||||
|
||||
// Base max Y on 90th percentile with padding
|
||||
const baseMaxY = Math.max(percentile90 * 1.1, minPrice * 2);
|
||||
|
||||
// Apply zoom level (higher zoom = smaller range)
|
||||
const zoomedMaxY = baseMaxY / zoomLevel;
|
||||
|
||||
console.log('Y-axis domain:', { minY: 0, maxY: zoomedMaxY, zoom: zoomLevel, base: baseMaxY });
|
||||
|
||||
return { minY: 0, maxY: zoomedMaxY };
|
||||
}, [historyData, zoomLevel]);
|
||||
|
||||
useEffect(() => {
|
||||
const chartContainer = chartContainerRef.current;
|
||||
if (!chartContainer) {
|
||||
console.log('Chart container ref not found');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Setting up wheel event listener on chart container');
|
||||
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
console.log('Wheel event:', e.deltaY);
|
||||
|
||||
// Zoom in when scrolling up (negative deltaY), zoom out when scrolling down
|
||||
const zoomDelta = e.deltaY > 0 ? 0.9 : 1.1;
|
||||
|
||||
setZoomLevel(prev => {
|
||||
const newZoom = prev * zoomDelta;
|
||||
const clampedZoom = Math.max(0.1, Math.min(10, newZoom));
|
||||
console.log('Zoom level:', prev, '->', clampedZoom);
|
||||
return clampedZoom;
|
||||
});
|
||||
};
|
||||
|
||||
chartContainer.addEventListener('wheel', handleWheel, { passive: false });
|
||||
|
||||
return () => {
|
||||
console.log('Removing wheel event listener');
|
||||
chartContainer.removeEventListener('wheel', handleWheel);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleRangeChange = (range: string) => {
|
||||
setSelectedRange(range);
|
||||
};
|
||||
|
||||
const resetZoom = () => {
|
||||
setZoomLevel(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: '20px',
|
||||
fontFamily: 'system-ui',
|
||||
backgroundColor: '#0a0e27',
|
||||
color: '#fff',
|
||||
minHeight: '100%'
|
||||
}}>
|
||||
<h1 style={{ color: '#50e3c2', marginBottom: '10px' }}>rmtPocketWatcher</h1>
|
||||
<p style={{ color: '#888', fontSize: '14px', marginBottom: '20px' }}>Lambda Banking Conglomerate</p>
|
||||
|
||||
<div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
|
||||
<div style={{ flex: 1, backgroundColor: '#1a1f3a', padding: '15px', borderRadius: '8px' }}>
|
||||
<div style={{ fontSize: '12px', color: '#888', marginBottom: '5px' }}>CONNECTION</div>
|
||||
<div style={{ fontSize: '18px', fontWeight: 'bold', color: status.connected ? '#50e3c2' : '#ff6b9d' }}>
|
||||
{status.state}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{latestPrice && (
|
||||
<>
|
||||
<div style={{ flex: 1, backgroundColor: '#1a1f3a', padding: '15px', borderRadius: '8px' }}>
|
||||
<div style={{ fontSize: '12px', color: '#888', marginBottom: '5px' }}>LOWEST PRICE</div>
|
||||
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#50e3c2' }}>
|
||||
${latestPrice.lowestPrice.toFixed(4)}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', color: '#888' }}>per 1M AUEC</div>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, backgroundColor: '#1a1f3a', padding: '15px', borderRadius: '8px' }}>
|
||||
<div style={{ fontSize: '12px', color: '#888', marginBottom: '5px' }}>SELLER</div>
|
||||
<div style={{ fontSize: '18px', fontWeight: 'bold' }}>{latestPrice.sellerName}</div>
|
||||
<div style={{ fontSize: '12px', color: '#888' }}>{latestPrice.platform}</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ backgroundColor: '#1a1f3a', padding: '20px', borderRadius: '8px', marginBottom: '20px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<h2 style={{ margin: 0 }}>Price History</h2>
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
{TIME_RANGES.map(range => (
|
||||
<button
|
||||
key={range.value}
|
||||
onClick={() => handleRangeChange(range.value)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
backgroundColor: selectedRange === range.value ? '#50e3c2' : '#2a2f4a',
|
||||
color: selectedRange === range.value ? '#0a0e27' : '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontWeight: selectedRange === range.value ? 'bold' : 'normal',
|
||||
}}
|
||||
>
|
||||
{range.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{historyData && historyData.prices && historyData.prices.length > 0 ? (
|
||||
chartData.length > 0 ? (
|
||||
<div>
|
||||
<div style={{ marginBottom: '10px', color: '#888', fontSize: '12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span>Scroll on chart to zoom. Extreme outliers may be clipped for better visibility.</span>
|
||||
<button
|
||||
onClick={resetZoom}
|
||||
style={{
|
||||
padding: '4px 12px',
|
||||
backgroundColor: '#2a2f4a',
|
||||
color: '#fff',
|
||||
border: '1px solid #50e3c2',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
>
|
||||
Reset Zoom (×{zoomLevel.toFixed(1)})
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
ref={chartContainerRef}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '500px',
|
||||
minHeight: '400px',
|
||||
cursor: 'ns-resize',
|
||||
border: '1px solid #2a2f4a'
|
||||
}}
|
||||
>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={chartData} key={`chart-${zoomLevel}`}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#2a2f4a" />
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
stroke="#888"
|
||||
tick={{ fill: '#888', fontSize: 10 }}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={80}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="#888"
|
||||
tick={{ fill: '#888', fontSize: 12 }}
|
||||
label={{ value: 'USD per 1M AUEC', angle: -90, position: 'insideLeft', fill: '#888' }}
|
||||
domain={[0, yAxisDomain[1]]}
|
||||
allowDataOverflow={true}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: '#1a1f3a', border: '1px solid #2a2f4a', borderRadius: '4px' }}
|
||||
labelStyle={{ color: '#fff' }}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{ color: '#fff', maxHeight: '100px', overflowY: 'auto' }}
|
||||
iconType="line"
|
||||
/>
|
||||
{sellers.map((seller, index) => (
|
||||
<Line
|
||||
key={seller}
|
||||
type="monotone"
|
||||
dataKey={seller}
|
||||
stroke={COLORS[index % COLORS.length]}
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
connectNulls
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ textAlign: 'center', padding: '40px', color: '#ff6b9d' }}>
|
||||
Data received but chart data is empty. Check console for details.
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div style={{ textAlign: 'center', padding: '40px', color: '#888' }}>
|
||||
{status.connected ? 'Loading historical data...' : 'Connect to view historical data'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{latestPrice && (
|
||||
<div style={{ backgroundColor: '#1a1f3a', padding: '20px', borderRadius: '8px' }}>
|
||||
<h2>Current Listings ({latestPrice.allPrices.length})</h2>
|
||||
<div style={{ overflowX: 'auto', overflowY: 'auto', maxHeight: '400px' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead style={{ position: 'sticky', top: 0, backgroundColor: '#1a1f3a', zIndex: 1 }}>
|
||||
<tr style={{ borderBottom: '2px solid #2a2f4a' }}>
|
||||
<th style={{ textAlign: 'left', padding: '12px', color: '#888', fontWeight: 'normal' }}>Platform</th>
|
||||
<th style={{ textAlign: 'left', padding: '12px', color: '#888', fontWeight: 'normal' }}>Seller</th>
|
||||
<th style={{ textAlign: 'right', padding: '12px', color: '#888', fontWeight: 'normal' }}>Price/1M AUEC</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{latestPrice.allPrices.map((price, index) => (
|
||||
<tr key={price.id} style={{ borderBottom: '1px solid #2a2f4a' }}>
|
||||
<td style={{ padding: '12px' }}>{price.platform}</td>
|
||||
<td style={{ padding: '12px' }}>{price.sellerName}</td>
|
||||
<td style={{ textAlign: 'right', padding: '12px', color: '#50e3c2', fontWeight: 'bold' }}>
|
||||
${price.pricePerMillion.toFixed(4)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
96
electron-app/src/renderer/hooks/useWebSocket.ts
Normal file
96
electron-app/src/renderer/hooks/useWebSocket.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { PriceIndex, HistoricalData } from '../../shared/types';
|
||||
|
||||
interface WebSocketStatus {
|
||||
connected: boolean;
|
||||
state: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function useWebSocket() {
|
||||
const [status, setStatus] = useState<WebSocketStatus>({
|
||||
connected: false,
|
||||
state: 'DISCONNECTED',
|
||||
});
|
||||
const [latestPrice, setLatestPrice] = useState<PriceIndex | null>(null);
|
||||
const [historyData, setHistoryData] = useState<HistoricalData | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Listen for WebSocket events from main process
|
||||
const handleConnected = () => {
|
||||
setStatus({ connected: true, state: 'CONNECTED' });
|
||||
};
|
||||
|
||||
const handleDisconnected = () => {
|
||||
setStatus({ connected: false, state: 'DISCONNECTED' });
|
||||
};
|
||||
|
||||
const handlePriceUpdate = (data: PriceIndex) => {
|
||||
setLatestPrice(data);
|
||||
};
|
||||
|
||||
const handleHistoryData = (data: HistoricalData) => {
|
||||
setHistoryData(data);
|
||||
};
|
||||
|
||||
const handleError = (error: string) => {
|
||||
setStatus((prev: WebSocketStatus) => ({ ...prev, error }));
|
||||
};
|
||||
|
||||
const handleMaxReconnect = () => {
|
||||
setStatus((prev: WebSocketStatus) => ({
|
||||
...prev,
|
||||
error: 'Maximum reconnection attempts reached. Please restart the application.'
|
||||
}));
|
||||
};
|
||||
|
||||
// Register IPC listeners
|
||||
window.electron.ipcRenderer.on('ws:connected', handleConnected);
|
||||
window.electron.ipcRenderer.on('ws:disconnected', handleDisconnected);
|
||||
window.electron.ipcRenderer.on('ws:priceUpdate', handlePriceUpdate);
|
||||
window.electron.ipcRenderer.on('ws:historyData', handleHistoryData);
|
||||
window.electron.ipcRenderer.on('ws:error', handleError);
|
||||
window.electron.ipcRenderer.on('ws:maxReconnectAttemptsReached', handleMaxReconnect);
|
||||
|
||||
// Get initial status
|
||||
window.electron.ipcRenderer.invoke('ws:getStatus').then((initialStatus) => {
|
||||
setStatus(initialStatus);
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
window.electron.ipcRenderer.removeAllListeners('ws:connected');
|
||||
window.electron.ipcRenderer.removeAllListeners('ws:disconnected');
|
||||
window.electron.ipcRenderer.removeAllListeners('ws:priceUpdate');
|
||||
window.electron.ipcRenderer.removeAllListeners('ws:historyData');
|
||||
window.electron.ipcRenderer.removeAllListeners('ws:error');
|
||||
window.electron.ipcRenderer.removeAllListeners('ws:maxReconnectAttemptsReached');
|
||||
};
|
||||
}, []);
|
||||
|
||||
const connect = useCallback(async () => {
|
||||
await window.electron.ipcRenderer.invoke('ws:connect');
|
||||
}, []);
|
||||
|
||||
const disconnect = useCallback(async () => {
|
||||
await window.electron.ipcRenderer.invoke('ws:disconnect');
|
||||
}, []);
|
||||
|
||||
const sendMessage = useCallback(async (message: any) => {
|
||||
await window.electron.ipcRenderer.invoke('ws:send', message);
|
||||
}, []);
|
||||
|
||||
const requestHistory = useCallback(async (range: string) => {
|
||||
await sendMessage({ type: 'get_history', data: { range } });
|
||||
}, [sendMessage]);
|
||||
|
||||
return {
|
||||
status,
|
||||
latestPrice,
|
||||
historyData,
|
||||
connect,
|
||||
disconnect,
|
||||
sendMessage,
|
||||
requestHistory,
|
||||
};
|
||||
}
|
||||
8
electron-app/src/renderer/index.tsx
Normal file
8
electron-app/src/renderer/index.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { App } from './App';
|
||||
|
||||
const container = document.getElementById('root');
|
||||
if (!container) throw new Error('Root element not found');
|
||||
|
||||
const root = createRoot(container);
|
||||
root.render(<App />);
|
||||
Reference in New Issue
Block a user