428 lines
18 KiB
TypeScript
428 lines
18 KiB
TypeScript
import { useState, useEffect, useMemo } from 'react';
|
||
import { useWebSocket } from '../hooks/useWebSocket';
|
||
import { api } from '../api/client';
|
||
import { formatHashrate } from '../help/fleetFilters';
|
||
import { platformIcon } from '../help/platform';
|
||
import './ROIPage.css';
|
||
|
||
// ── helpers ───────────────────────────────────────────────────────────────
|
||
|
||
function fmt(n: number, decimals = 2) {
|
||
return n.toFixed(decimals);
|
||
}
|
||
|
||
function fmtUSD(n: number): string {
|
||
const sign = n < 0 ? '-' : '';
|
||
const abs = Math.abs(n);
|
||
if (abs >= 1000) return `${sign}$${(abs / 1000).toFixed(2)}k`;
|
||
return `${sign}$${abs.toFixed(2)}`;
|
||
}
|
||
|
||
function effBadge(pct: number): { label: string; cls: string } {
|
||
if (pct >= 75) return { label: 'TOP', cls: 'top' };
|
||
if (pct >= 40) return { label: 'MID', cls: 'mid' };
|
||
if (pct > 0) return { label: 'LOW', cls: 'low' };
|
||
return { label: 'OFF', cls: 'off' };
|
||
}
|
||
|
||
const WATT_PER_CORE_ESTIMATE = 15; // rough W per active CPU core
|
||
const XMR_COINGECKO_FALLBACK = 150; // offline fallback price USD
|
||
|
||
// ── ROI Page ──────────────────────────────────────────────────────────────
|
||
|
||
export default function ROIPage() {
|
||
const { agents } = useWebSocket();
|
||
|
||
const [xmrPrice, setXmrPrice] = useState<number | null>(null);
|
||
const [xmrPriceAt, setXmrPriceAt] = useState<string | null>(null);
|
||
const [priceLoading, setPriceLoading] = useState(true);
|
||
const [estXmrDay, setEstXmrDay] = useState<number | null>(null);
|
||
const [kwh, setKwh] = useState<number>(() => {
|
||
try { return parseFloat(localStorage.getItem('roi-kwh') ?? '0.10'); } catch { return 0.10; }
|
||
});
|
||
const [sparkData, setSparkData] = useState<number[]>([]);
|
||
|
||
// Fetch XMR price on mount, refresh every 10min
|
||
useEffect(() => {
|
||
const fetch = () => {
|
||
setPriceLoading(true);
|
||
api.getXmrPrice()
|
||
.then((r) => { setXmrPrice(r.usd); setXmrPriceAt(r.fetched_at); })
|
||
.catch(() => setXmrPrice(XMR_COINGECKO_FALLBACK))
|
||
.finally(() => setPriceLoading(false));
|
||
};
|
||
fetch();
|
||
const t = setInterval(fetch, 10 * 60 * 1000);
|
||
return () => clearInterval(t);
|
||
}, []);
|
||
|
||
// Earnings estimate from fleet hashrate
|
||
const onlineAgents = useMemo(() => agents.filter((a) => a.status === 'online'), [agents]);
|
||
const totalHashrate = useMemo(() => onlineAgents.reduce((s, a) => s + (a.hashrate_15m ?? 0), 0), [onlineAgents]);
|
||
|
||
useEffect(() => {
|
||
if (totalHashrate <= 0) { setEstXmrDay(null); return; }
|
||
api.getEarningsEstimate(totalHashrate)
|
||
.then((r) => setEstXmrDay(r.xmr_per_day ?? null))
|
||
.catch(() => setEstXmrDay(null));
|
||
}, [totalHashrate]);
|
||
|
||
// Spark history — sample every 4s
|
||
useEffect(() => {
|
||
const id = setInterval(() => {
|
||
setSparkData((prev) => [...prev.slice(-29), totalHashrate]);
|
||
}, 4000);
|
||
return () => clearInterval(id);
|
||
}, [totalHashrate]);
|
||
|
||
// Save kWh preference
|
||
const handleKwh = (v: number) => {
|
||
setKwh(v);
|
||
try { localStorage.setItem('roi-kwh', String(v)); } catch { /* noop */ }
|
||
};
|
||
|
||
// ── Derived numbers ──────────────────────────────────────────────────────
|
||
const price = xmrPrice ?? XMR_COINGECKO_FALLBACK;
|
||
|
||
const xmrPerDay = estXmrDay ?? 0;
|
||
const usdPerDay = xmrPerDay * price;
|
||
const usdPerWeek = usdPerDay * 7;
|
||
const usdPerMonth = usdPerDay * 30;
|
||
|
||
// Electricity cost estimate
|
||
const totalCores = onlineAgents.reduce((s, a) => s + (a.cpu_cores ?? 0), 0);
|
||
const estimatedWatts = totalCores * WATT_PER_CORE_ESTIMATE;
|
||
const kwhPerDay = (estimatedWatts / 1000) * 24;
|
||
const electricityCostDay = kwhPerDay * kwh;
|
||
const netProfitDay = usdPerDay - electricityCostDay;
|
||
|
||
// Per-node profitability — sorted by USD/day desc
|
||
const nodeProfit = useMemo(() => {
|
||
const maxHash = Math.max(...agents.map((a) => a.hashrate_15m ?? 0), 1);
|
||
return agents
|
||
.map((a) => {
|
||
const hr = a.hashrate_15m ?? 0;
|
||
const pct = hr / maxHash;
|
||
// Linear interpolation of fleet earnings by hashrate share
|
||
const nodeXmrDay = xmrPerDay > 0 && totalHashrate > 0
|
||
? (hr / totalHashrate) * xmrPerDay
|
||
: 0;
|
||
const nodeUsdDay = nodeXmrDay * price;
|
||
const nodeCores = a.cpu_cores ?? 0;
|
||
const nodeWatts = nodeCores * WATT_PER_CORE_ESTIMATE;
|
||
const nodeKwhDay = (nodeWatts / 1000) * 24;
|
||
const nodeElecCost = nodeKwhDay * kwh;
|
||
const nodeNet = nodeUsdDay - nodeElecCost;
|
||
return { a, hr, pct, nodeUsdDay, nodeXmrDay, nodeNet };
|
||
})
|
||
.sort((x, y) => y.nodeUsdDay - x.nodeUsdDay);
|
||
}, [agents, xmrPerDay, totalHashrate, price, kwh]);
|
||
|
||
// Platform breakdown
|
||
const platformStats = useMemo(() => {
|
||
const byPlatform: Record<string, { count: number; hashrate: number }> = {};
|
||
for (const a of onlineAgents) {
|
||
const p = a.platform ?? 'unknown';
|
||
if (!byPlatform[p]) byPlatform[p] = { count: 0, hashrate: 0 };
|
||
byPlatform[p].count++;
|
||
byPlatform[p].hashrate += a.hashrate_15m ?? 0;
|
||
}
|
||
const maxHr = Math.max(...Object.values(byPlatform).map((v) => v.hashrate), 1);
|
||
return Object.entries(byPlatform)
|
||
.sort((a, b) => b[1].hashrate - a[1].hashrate)
|
||
.map(([platform, stats]) => ({ platform, ...stats, pct: stats.hashrate / maxHr }));
|
||
}, [onlineAgents]);
|
||
|
||
// Mining method breakdown
|
||
const methodStats = useMemo(() => {
|
||
const counts: Record<string, number> = {};
|
||
for (const a of onlineAgents) {
|
||
const m = a.active_method ?? 'unknown';
|
||
counts[m] = (counts[m] ?? 0) + 1;
|
||
}
|
||
return Object.entries(counts).sort((a, b) => b[1] - a[1]);
|
||
}, [onlineAgents]);
|
||
|
||
const maxSparkVal = Math.max(...sparkData, 1);
|
||
|
||
// ── Empty state ──────────────────────────────────────────────────────────
|
||
if (agents.length === 0) {
|
||
return (
|
||
<div className="page fade-in roi-page">
|
||
<div className="roi-empty">
|
||
<span className="roi-empty-icon">💹</span>
|
||
No nodes online. Deploy agents to start tracking ROI.
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Render ───────────────────────────────────────────────────────────────
|
||
return (
|
||
<div className="page fade-in roi-page">
|
||
|
||
{/* ── Hero ─────────────────────────────────────────────────────────── */}
|
||
<header className="roi-hero">
|
||
<div className="roi-hero-text">
|
||
<p className="roi-eyebrow">FINANCIAL INTELLIGENCE</p>
|
||
<h1>ROI Dashboard</h1>
|
||
<p className="page-subtitle">
|
||
Live earnings · per-node profitability · net profit after electricity
|
||
</p>
|
||
</div>
|
||
|
||
<div className="roi-price-ticker">
|
||
<div className="roi-price-dot" />
|
||
<span className="roi-price-symbol">XMR</span>
|
||
{priceLoading ? (
|
||
<div className="roi-loading">
|
||
<div className="roi-spinner" />
|
||
<span>fetching…</span>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<span className="roi-price-usd">${xmrPrice?.toFixed(2) ?? '—'}</span>
|
||
<span className="roi-price-label">
|
||
USD{xmrPriceAt ? ` · ${new Date(xmrPriceAt).toLocaleTimeString()}` : ''}
|
||
</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
</header>
|
||
|
||
{/* ── KPI Row ──────────────────────────────────────────────────────── */}
|
||
<div className="roi-kpi-row">
|
||
<div className="roi-kpi-card amber">
|
||
<div className="roi-kpi-accent" />
|
||
<div className="roi-kpi-label">XMR / DAY</div>
|
||
<div className="roi-kpi-value">{xmrPerDay > 0 ? fmt(xmrPerDay, 6) : '—'}</div>
|
||
<div className="roi-kpi-sub">at {formatHashrate(totalHashrate)}</div>
|
||
</div>
|
||
<div className="roi-kpi-card green">
|
||
<div className="roi-kpi-accent" />
|
||
<div className="roi-kpi-label">USD / DAY</div>
|
||
<div className="roi-kpi-value">{usdPerDay > 0 ? fmtUSD(usdPerDay) : '—'}</div>
|
||
<div className="roi-kpi-sub">gross revenue</div>
|
||
</div>
|
||
<div className="roi-kpi-card cyan">
|
||
<div className="roi-kpi-accent" />
|
||
<div className="roi-kpi-label">USD / MONTH</div>
|
||
<div className="roi-kpi-value">{usdPerMonth > 0 ? fmtUSD(usdPerMonth) : '—'}</div>
|
||
<div className="roi-kpi-sub">30-day projection</div>
|
||
</div>
|
||
<div className="roi-kpi-card magenta">
|
||
<div className="roi-kpi-accent" />
|
||
<div className="roi-kpi-label">NET PROFIT / DAY</div>
|
||
<div className={`roi-kpi-value ${netProfitDay < 0 ? '' : ''}`}>
|
||
{usdPerDay > 0 ? fmtUSD(netProfitDay) : '—'}
|
||
</div>
|
||
<div className="roi-kpi-sub">after electricity est.</div>
|
||
</div>
|
||
<div className="roi-kpi-card violet">
|
||
<div className="roi-kpi-accent" />
|
||
<div className="roi-kpi-label">ONLINE NODES</div>
|
||
<div className="roi-kpi-value">{onlineAgents.length}</div>
|
||
<div className="roi-kpi-sub">of {agents.length} total</div>
|
||
</div>
|
||
<div className="roi-kpi-card orange">
|
||
<div className="roi-kpi-accent" />
|
||
<div className="roi-kpi-label">EST. POWER DRAW</div>
|
||
<div className="roi-kpi-value">{estimatedWatts > 0 ? `${estimatedWatts}W` : '—'}</div>
|
||
<div className="roi-kpi-sub">{totalCores} cores × {WATT_PER_CORE_ESTIMATE}W est.</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Main grid row 1 ──────────────────────────────────────────────── */}
|
||
<div className="roi-grid">
|
||
|
||
{/* Hashrate sparkline + projections */}
|
||
<div className="roi-section">
|
||
<div className="roi-section-title">
|
||
<span className="roi-section-ornament">◆</span> EARNINGS PROJECTION
|
||
</div>
|
||
|
||
{/* Spark */}
|
||
{sparkData.length > 1 && (
|
||
<div className="roi-spark" style={{ marginBottom: '1rem' }}>
|
||
{sparkData.map((v, i) => (
|
||
<div
|
||
key={i}
|
||
className="roi-spark-bar"
|
||
style={{ height: `${Math.max(4, (v / maxSparkVal) * 100)}%` }}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="roi-projection-grid">
|
||
<div className="roi-proj-item">
|
||
<div className="roi-proj-label">TODAY</div>
|
||
<div className="roi-proj-value green">{usdPerDay > 0 ? fmtUSD(usdPerDay) : '—'}</div>
|
||
</div>
|
||
<div className="roi-proj-item">
|
||
<div className="roi-proj-label">THIS WEEK</div>
|
||
<div className="roi-proj-value amber">{usdPerWeek > 0 ? fmtUSD(usdPerWeek) : '—'}</div>
|
||
</div>
|
||
<div className="roi-proj-item">
|
||
<div className="roi-proj-label">THIS MONTH</div>
|
||
<div className="roi-proj-value cyan">{usdPerMonth > 0 ? fmtUSD(usdPerMonth) : '—'}</div>
|
||
</div>
|
||
<div className="roi-proj-item">
|
||
<div className="roi-proj-label">THIS YEAR</div>
|
||
<div className="roi-proj-value magenta">{usdPerDay > 0 ? fmtUSD(usdPerDay * 365) : '—'}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Net profit calculator */}
|
||
<div style={{ marginTop: '1.25rem', borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: '1rem' }}>
|
||
<div className="roi-cost-row">
|
||
<span className="roi-cost-label">ELECTRICITY RATE</span>
|
||
<div className="roi-cost-input-wrap">
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
max={10}
|
||
step={0.01}
|
||
value={kwh}
|
||
onChange={(e) => handleKwh(parseFloat(e.target.value) || 0)}
|
||
/>
|
||
<span className="roi-cost-unit">$/kWh</span>
|
||
</div>
|
||
<span className="roi-cost-label" style={{ color: 'var(--text-muted)' }}>
|
||
≈ {kwhPerDay.toFixed(1)} kWh/day · {fmtUSD(electricityCostDay)}/day cost
|
||
</span>
|
||
</div>
|
||
<div className="roi-net-banner">
|
||
<span className="roi-net-label">NET DAILY PROFIT</span>
|
||
<span className={`roi-net-value ${netProfitDay < 0 ? 'negative' : ''}`}>
|
||
{usdPerDay > 0 ? fmtUSD(netProfitDay) : '—'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Platform breakdown */}
|
||
<div className="roi-section">
|
||
<div className="roi-section-title">
|
||
<span className="roi-section-ornament">◆</span> PLATFORM BREAKDOWN
|
||
</div>
|
||
{platformStats.length === 0 ? (
|
||
<p style={{ color: 'var(--text-muted)', fontSize: '0.8rem' }}>No online agents.</p>
|
||
) : (
|
||
<div className="roi-platform-list">
|
||
{platformStats.map(({ platform, count, hashrate, pct }) => {
|
||
const colors: Record<string, string> = {
|
||
windows: '#00e8f5', linux: '#39ff14', darwin: '#b24bf3',
|
||
};
|
||
const color = colors[platform.toLowerCase()] ?? '#ffb020';
|
||
return (
|
||
<div key={platform} className="roi-platform-row">
|
||
<span className="roi-platform-icon">{platformIcon(platform)}</span>
|
||
<span className="roi-platform-label">{platform}</span>
|
||
<div className="roi-platform-bar-wrap">
|
||
<div className="roi-platform-bar-track">
|
||
<div
|
||
className="roi-platform-bar-fill"
|
||
style={{ width: `${pct * 100}%`, background: color }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<span className="roi-platform-val">
|
||
{count}n · {formatHashrate(hashrate)}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Mining method chips */}
|
||
{methodStats.length > 0 && (
|
||
<>
|
||
<div className="roi-section-title" style={{ marginTop: '1.25rem', marginBottom: '0.75rem' }}>
|
||
<span className="roi-section-ornament">◆</span> ACTIVE MINING METHODS
|
||
</div>
|
||
<div className="roi-method-chips">
|
||
{methodStats.map(([method, count]) => (
|
||
<span key={method} className={`roi-method-chip ${method.toLowerCase().replace(/[^a-z]/g, '') || 'unknown'}`}>
|
||
{method} · {count}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Node profitability table (full width) ────────────────────────── */}
|
||
<div className="roi-full">
|
||
<div className="roi-section">
|
||
<div className="roi-section-title">
|
||
<span className="roi-section-ornament">◆</span>
|
||
NODE PROFITABILITY RANKING
|
||
<span style={{ marginLeft: 'auto', color: 'var(--text-muted)', fontSize: '0.6rem' }}>
|
||
sorted by USD/day
|
||
</span>
|
||
</div>
|
||
<table className="roi-node-table">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>NODE</th>
|
||
<th>PLATFORM</th>
|
||
<th>HASHRATE</th>
|
||
<th>XMR/DAY</th>
|
||
<th>USD/DAY</th>
|
||
<th>NET/DAY</th>
|
||
<th>SHARE</th>
|
||
<th>EFF</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{nodeProfit.slice(0, 25).map(({ a, hr, pct, nodeUsdDay, nodeXmrDay, nodeNet }, idx) => {
|
||
const isOffline = a.status !== 'online';
|
||
const badge = effBadge(pct * 100);
|
||
return (
|
||
<tr key={a.id} className={isOffline ? 'roi-node-offline' : ''}>
|
||
<td className="roi-node-rank">{idx + 1}</td>
|
||
<td className="roi-node-name">
|
||
{a.name}
|
||
</td>
|
||
<td>
|
||
<span className="roi-node-platform">{platformIcon(a.platform)}</span>
|
||
<span style={{ fontSize: '0.65rem', color: 'var(--text-muted)' }}>{a.platform ?? '—'}</span>
|
||
</td>
|
||
<td className="roi-node-hr">{hr > 0 ? formatHashrate(hr) : <span style={{ color: 'var(--text-muted)' }}>—</span>}</td>
|
||
<td style={{ fontFamily: 'monospace', fontSize: '0.7rem', color: '#ffb020' }}>
|
||
{nodeXmrDay > 0 ? nodeXmrDay.toFixed(6) : '—'}
|
||
</td>
|
||
<td className="roi-node-usd">{nodeUsdDay > 0 ? fmtUSD(nodeUsdDay) : '—'}</td>
|
||
<td style={{ fontFamily: 'monospace', fontSize: '0.72rem', color: nodeNet >= 0 ? '#39ff14' : '#ff6b6b' }}>
|
||
{nodeUsdDay > 0 ? fmtUSD(nodeNet) : '—'}
|
||
</td>
|
||
<td>
|
||
<div className="roi-node-bar-wrap">
|
||
<div className="roi-node-bar-track">
|
||
<div className="roi-node-bar-fill" style={{ width: `${pct * 100}%` }} />
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span className={`roi-eff-badge ${badge.cls}`}>{badge.label}</span>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
{nodeProfit.length > 25 && (
|
||
<p style={{ fontSize: '0.65rem', color: 'var(--text-muted)', marginTop: '0.5rem', fontFamily: 'monospace' }}>
|
||
… {nodeProfit.length - 25} more nodes
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|