// onboarding.jsx — 5-step new-user onboarding wizard
const { useState, useEffect, useRef, useCallback } = React;
// ─── STEP PROGRESS BAR ───────────────────────────────────────────────────────
const StepBar = ({ current, total }) => (
{Array.from({ length: total }).map((_, i) => (
))}
{children}
);
// ─── LOGO MARK (uses global pin glyph) ───────────────────────────────────────
const LogoMark = ({ size = 52, glow = true }) => (
);
// ─── RADAR RINGS BG ───────────────────────────────────────────────────────────
const RadarBg = () => (
<>
);
// ─── STEP 1: WELCOME ─────────────────────────────────────────────────────────
const Step1Welcome = ({ username, onNext }) => (
Welcome to RoStealth
Hey, {username}.
Let's get you set up.
In the next 2 minutes you'll add your first Roblox user to track, set your alerts, and go live.
} style={{ minWidth: 200, justifyContent: 'center' }}>
Get started
Takes about 2 minutes
{/* social proof row */}
{['S','X','P','F','V'].map((l, i) => (
0 ? -6 : 0 }}>{l}
))}
2,300+ group owners already tracking
Step 2 of 5
Track your first member
Enter any Roblox username or User ID. We'll resolve it and start monitoring straight away.
{/* input row */}
{/* resolved card */}
{resolvedUser && (
{resolvedUser.username}
ID: {resolvedUser.robloxId}
{resolvedUser.status}
{resolvedUser.game &&
{resolvedUser.game}}
Resolved - ready to track
)}
{/* try example links */}
{!resolvedUser && (
Try:
{['xShadowReaper','Phantom_Wolf','VelocityX99'].map(u => (
))}
)}
}>
{resolvedUser ? `Track ${resolvedUser.username}` : 'Continue'}
);
};
// ─── STEP 3: ALERT PREFS ─────────────────────────────────────────────────────
const Step3Alerts = ({ onNext, prefs, setPrefs }) => {
const options = [
{ id: 'online', label: 'Member comes online', desc: 'Fire when a tracked user goes online', color: 'var(--green)', border: 'rgba(52,211,153,0.22)', bg: 'rgba(52,211,153,0.055)' },
{ id: 'game', label: 'Member joins a game', desc: 'Fire when someone starts a Roblox session', color: 'var(--amber)', border: 'rgba(251,191,36,0.22)', bg: 'rgba(251,191,36,0.055)' },
{ id: 'offline', label: 'Member goes offline', desc: 'Fire when a tracked user disconnects', color: 'var(--t3)', border: 'var(--border)', bg: 'var(--bg3)' },
{ id: 'discord', label: 'Discord notifications', desc: 'Push all alerts into your server via webhook', color: 'var(--blue)', border: 'rgba(96,165,250,0.22)', bg: 'rgba(96,165,250,0.055)' },
];
const optionIcons = {
online: ,
game: ,
offline: ,
discord: ,
};
const toggle = (id) => setPrefs(p => ({ ...p, [id]: !p[id] }));
return (
Step 3 of 5
Choose your alerts
Pick which events fire an alert. You can change these any time in Settings.
{options.map((opt, i) => {
const on = prefs[opt.id];
return (
);
})}
Step 4 of 5
Connect Discord
Paste a webhook URL and alerts will fire straight into your server. Totally optional.
} />
{webhookUrl && (
{testing ? ↻ : tested ? 'Sent' : 'Test'}
)}
{/* Discord message preview */}
R
RoStealth
BOT
Today at 2:04 PM
xShadowReaper is now online · Da Hood
Preview — how alerts appear in your server
}>
{webhookUrl ? 'Save & continue' : 'Continue'}
);
};
// ─── STEP 5: PAYMENT ─────────────────────────────────────────────────────────
const Step5Pay = ({ onPay, paying, resolvedUser, prefs, webhookUrl }) => {
const activePrefs = Object.entries(prefs).filter(([, v]) => v).map(([k]) => k);
const prefLabels = { online: 'Online alerts', game: 'Game join alerts', offline: 'Offline alerts', discord: 'Discord notifications' };
const features = [
'Unlimited users & groups',
'Status refresh every 30 seconds',
'30-day session history',
'Discord webhook alerts',
'Custom alert rules',
'Full REST API access',
];
return (
Step 5 of 5
You're all set up.
Start watching for $5 — one payment, 30 days of full access.
{/* summary card */}
{(resolvedUser || activePrefs.length > 0 || webhookUrl) && (
Your setup
{resolvedUser && (
Tracking {resolvedUser.username}
READY
)}
{activePrefs.map(k => (
{prefLabels[k]}
))}
{webhookUrl && (
Discord connected
)}
)}
{/* pricing card */}
$5
/ 30 days
One payment · no subscription · renew when you want
{features.map(f => (
{f}
))}
{/* pay button */}
Secure payment · access activates instantly · not affiliated with Roblox Corp.
);
};
// ─── ONBOARDING SHELL ─────────────────────────────────────────────────────────
const Onboarding = ({ user, onComplete }) => {
const [step, setStep] = useState(0);
const [trackedInput, setTrackedInput] = useState('');
const [resolvedUser, setResolvedUser] = useState(null);
const [prefs, setPrefs] = useState({ online: true, game: true, offline: false, discord: true });
const [webhookUrl, setWebhookUrl] = useState('');
const [paying, setPaying] = useState(false);
const goNext = useCallback(() => setStep(s => s + 1), []);
const handlePay = async () => {
setPaying(true);
await new Promise(r => setTimeout(r, 1400));
const firstUser = resolvedUser ? {
id: Date.now(), robloxId: resolvedUser.robloxId, username: resolvedUser.username,
status: resolvedUser.status, game: resolvedUser.game, lastSeen: resolvedUser.status !== 'offline' ? 'Now' : 'Never',
sessions: 0, hours: 0, flagged: false, type: 'user',
} : null;
onComplete({ firstUser, prefs, webhookUrl });
};
const steps = [
,
,
,
,
,
];
return (
{/* edge vignette */}
{/* content panel */}
{/* top bar: logo + step bar */}
{step > 0 && step < 4 && (
)}
{/* step content */}
{steps[step]}
);
};
Object.assign(window, { Onboarding });