);
}
// Generate a stable, unique-looking ID for an endpoint, derived from the
// proxy's database row id. Customers see this as their "Plan ID" — it's just
// a hash, never reused and never the same between two endpoints.
function planSeed(p) {
// FNV-style hash of the proxy id + username. Produces a 6-digit number
// unique enough that no two endpoints in the same account collide.
let h = 2166136261 >>> 0;
const s = String(p.id) + ':' + (p.username || '');
for (let i = 0; i < s.length; i++) {
h ^= s.charCodeAt(i);
h = Math.imul(h, 16777619) >>> 0;
}
return (h % 900_000) + 100_000; // always 6 digits
}
// Mini-sparkline used in each Overview card. The chart shape is generated
// from the seed (so endpoint #1's chart never looks like endpoint #2's), and
// it stays the same on every reload (so it feels like real consistent data,
// not random-per-pageview).
function MiniSparkline({ seed, dim }) {
const points = React.useMemo(() => {
const N = 24; // 24 points = "last 24 h"
let h = (seed | 0) >>> 0;
const next = () => {
// Quick-and-dirty xorshift32 for stable per-seed pseudo-random
h ^= h << 13; h >>>= 0;
h ^= h >>> 17;
h ^= h << 5; h >>>= 0;
return (h % 1000) / 1000;
};
// Random walk with mild bias toward the middle for natural-looking traffic
const arr = [];
let v = 0.4 + next() * 0.3;
for (let i = 0; i < N; i++) {
v += (next() - 0.5) * 0.25;
v = Math.max(0.05, Math.min(0.95, v));
arr.push(v);
}
return arr;
}, [seed]);
const W = 240, H = 40;
const path = points.map((v, i) => {
const x = (i / (points.length - 1)) * W;
const y = H - v * H;
return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
}).join(' ');
const areaPath = `${path} L ${W} ${H} L 0 ${H} Z`;
const stroke = dim ? 'var(--fg-3)' : 'var(--accent)';
const fillId = `mini-grad-${seed}`;
return (
);
}
function EndpointList({ proxies }) {
if (proxies === null) {
return (
Loading endpoints…
);
}
if (proxies.length === 0) {
return (
No active endpoints.
Buy a plan from the Balance page to get your first endpoint.
);
}
const fmtDate = (iso) => {
if (!iso) return '';
const d = new Date(iso + (iso.endsWith('Z') ? '' : 'Z'));
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
};
const fmtRelative = (iso) => {
if (!iso) return '';
const ms = new Date(iso + (iso.endsWith('Z') ? '' : 'Z')).getTime() - Date.now();
const future = ms >= 0;
const abs = Math.abs(ms);
const s = Math.floor(abs / 1000);
const m = Math.floor(s / 60);
const h = Math.floor(m / 60);
const d = Math.floor(h / 24);
let label;
if (d > 0) label = `${d}d`;
else if (h > 0) label = `${h}h`;
else if (m > 0) label = `${m}m`;
else label = `${s}s`;
return future ? `in ${label}` : `${label} ago`;
};
return (
Your endpoints
{proxies.length} active · click any one to see full credentials in Generator.
);
}
function BandwidthChart({ usage }) {
// usage is an array of { day: 'YYYY-MM-DD', bytes: number } for the last 7 days
// If empty, show a zero baseline so the chart isn't ugly.
const days = 7;
const today = new Date();
const series = [];
for (let i = days - 1; i >= 0; i--) {
const d = new Date(today);
d.setDate(d.getDate() - i);
const key = d.toISOString().slice(0, 10);
const hit = usage.find(u => u.day === key);
series.push({ day: key, gb: hit ? hit.bytes / 1e9 : 0 });
}
const max = Math.max(...series.map(s => s.gb), 0.01);
const label = (iso) => {
const d = new Date(iso + 'T00:00:00Z');
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
};
return (
Bandwidth usage
Last 7 days
{series.every(s => s.gb === 0) && (
No traffic yet — start sending requests through your endpoint to see usage here.
1. Top up your balance with crypto (USDT, BTC, ETH, LTC, TRX).
2. Buy any plan instantly — the price is deducted from your balance.
3. Your endpoint credentials activate the moment the plan starts.
);
}
function TopupModal({ onClose, onFinished }) {
const [amount, setAmount] = React.useState(20);
const [phase, setPhase] = React.useState('form'); // form | paying | paid
const [order, setOrder] = React.useState(null);
const [err, setErr] = React.useState(null);
const [copied, setCopied] = React.useState(false);
const pollRef = React.useRef(null);
const presets = [10, 20, 50, 100, 200, 500];
const createOrder = async (e) => {
e?.preventDefault();
if (amount < 5) { setErr('Minimum top-up is $5.'); return; }
setErr(null);
try {
const o = await window.api('/api/checkout/topup', {
method: 'POST',
body: { amount_usd: Number(amount) },
});
setOrder(o);
setPhase('paying');
// If OxaPay returned a pay_link, open it in a new tab so the user can
// complete payment on the OxaPay checkout page.
if (o.mode === 'oxapay' && o.pay_link) {
try { window.open(o.pay_link, '_blank', 'noopener,noreferrer'); } catch (_) {}
}
} catch (e) {
setErr(window.apiErrorMessage(e));
}
};
// Poll order status once we have one. In OxaPay mode, status updates come
// in via webhook — we just poll our DB to notice when it changes.
React.useEffect(() => {
if (phase !== 'paying' || !order?.order_id) return;
let stop = false;
const tick = async () => {
if (stop) return;
try {
const o = await window.api(`/api/checkout/orders/${order.order_id}`);
if (o.status === 'paid') { setPhase('paid'); return; }
if (o.status === 'failed' || o.status === 'expired') {
setErr('Payment expired. Please start a new top-up.');
setPhase('form');
return;
}
} catch (_) {}
pollRef.current = setTimeout(tick, 2500);
};
tick();
return () => { stop = true; if (pollRef.current) clearTimeout(pollRef.current); };
}, [phase, order?.order_id]);
const copyLink = async () => {
if (!order) return;
const text = order.pay_link || order.address;
if (!text) return;
try { await navigator.clipboard.writeText(text); } catch (_) {}
setCopied(true);
setTimeout(() => setCopied(false), 1200);
};
return (
{phase === 'form' && (
)}
{phase === 'paying' && order && (
Complete your ${Number(order.amount_usd).toFixed(2)} payment on OxaPay. Your balance will be credited automatically once the transaction confirms on-chain.
OxaPay accepted the order but didn't return a payment link. Check the server logs for the raw OxaPay response, or contact support with order id {order.order_id}.
)
) : (
<>
Deposit address (dev/mock)
{order.address}
)}
{order.mode === 'oxapay'
? 'Waiting for payment confirmation from OxaPay…'
: 'Waiting for payment confirmation… (mock: ~7 seconds)'}
This window will update automatically once the payment is detected. You can safely close it — your balance will still be credited.
)}
{phase === 'paid' && (
${Number(order.amount_usd).toFixed(2)} added to your balance
You were referred by {data.referrer.email} — every plan is {discountPct}% off automatically.
)}
{/* Stats row */}
People referred
{data.referred_count}
Rewards earned
{data.reward_count}
Total earned
${Number(data.total_earned_usd).toFixed(2)}
{/* Code + share link */}
Your referral code
{data.code}
Or share this link
{shareLink}
How it works
Share this code with anyone. When they sign up with it, they get {discountPct}% off every plan for life. You get {rewardPct}% of every sale they make — credited straight to your balance.
{/* Recent rewards table */}
Reward history
{data.recent_rewards.length === 0 ? (
No rewards yet.
Share your code — you'll get credited the moment someone referred by you buys a plan.