/* eslint-disable */ /** * Desktop UI shell — Pro Trading Dark. * Заменяет старый app.jsx App-компонент на широких экранах (>640px). * Mobile продолжает работать через MobileApp. * * Архитектура: * DesktopApp * ├─ DesktopSidebar (навигация + аккаунт) * ├─ DesktopHeader (заголовок + биржевой свитчер + уведомления) * └─ (один из DashboardScreen, BotsScreen, ...) * * Использует существующие window.MobileAPI методы (без переписывания backend * слоя). Тосты, modals, theme — самостоятельные. * * Весь файл обёрнут в IIFE — Babel-standalone компилирует все JSX в одном * scope, и наши const могли бы пересечься с mobile-app.jsx. */ (function () { const { useState, useEffect, useCallback, useMemo, useRef } = React; // ───────────────────────── Icons (минимальный inline set) ───────────────────────── const DIcon = ({ name, size = 18, ...p }) => { const s = size; const stroke = "currentColor"; const sw = 1.6; const paths = { dashboard: <>, bot: <>, chart: <>, signal: <>, journal: <>, settings: <>, bell: <>, moon: <>, sun: <>, logout: <>, plus: <>, x: <>, play: <>, pause: <>, refresh: <>, chevron: <>, wallet: <>, storm: <>, search: <>, futures: <>, spot: <>$, robot: <>, fire: <>, shield: <>, warning: <>, target: <>, download: <>, forward: <>, crown: <>, moonStar: <>, mail: <>, trash: <>, edit: <>, check: <>, money: <>, }; return ( {paths[name] || null} ); }; // ───────────────────────── Toast manager ───────────────────────── const useToasts = () => { const [toasts, setToasts] = useState([]); const push = useCallback((t) => { const id = Math.random().toString(36).slice(2); const kind = t.err ? "error" : t.ok ? "success" : t.warn ? "warn" : "info"; const msg = typeof t === "string" ? t : t.msg || ""; setToasts(prev => [...prev, { id, msg, kind }]); setTimeout(() => setToasts(prev => prev.filter(x => x.id !== id)), 4000); }, []); const ToastStack = () => (
{toasts.map(t => (
{t.msg}
))}
); return { push, ToastStack }; }; // ───────────────────────── Sidebar ───────────────────────── const DesktopSidebar = ({ active, onNavigate, user, onLogout, collapsed, onToggle, counts }) => { const items = [ { id: "dashboard", label: "Главная", icon: "dashboard" }, { id: "bots", label: "Боты", icon: "bot", badge: counts.runningBots, badgeKind: counts.runningBots > 0 ? "live" : null }, { id: "spot", label: "Спот", icon: "wallet" }, { id: "signals", label: "Сигналы", icon: "signal", badge: counts.signals24h, badgeKind: counts.signals24h > 0 ? "live" : null }, { id: "journal", label: "Журнал", icon: "journal" }, { id: "stats", label: "Статистика", icon: "chart" }, ]; const bottom = [ ...(user?.role === "admin" ? [{ id: "admin", label: "🛡 Админка", icon: "settings" }] : []), { id: "settings", label: "Настройки", icon: "settings" }, ]; const initials = (user?.email || "?").slice(0, 1).toUpperCase(); return ( ); }; // ── Profile dropdown в sidebar bottom ── const ProfileFoot = ({ user, initials, onLogout, onNavigate }) => { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; if (open) document.addEventListener("mousedown", onClick); return () => document.removeEventListener("mousedown", onClick); }, [open]); const setTheme = (t) => { document.documentElement.setAttribute("data-theme", t); try { localStorage.setItem("alpha_theme", t); } catch {} setOpen(false); }; const setLang = (l) => { try { localStorage.setItem("alpha_lang", l); } catch {} if (window.setUiLang) window.setUiLang(l); setOpen(false); }; const curTheme = document.documentElement.getAttribute("data-theme") || "dark"; const curLang = (() => { try { return localStorage.getItem("alpha_lang") || "ru"; } catch { return "ru"; } })(); return (
{open && (
{user?.email}
{user?.plan_tier || "free"} plan · {user?.role || "user"}
Тема
Язык
)}
setOpen(o => !o)}>
{initials}
{user?.email || "Гость"}
{user?.plan_tier || "free"} · ⌃ открыть
); }; // ───────────────────────── Header ───────────────────────── const SUPPORTED_EX = ["weex", "okx", "binance", "bybit"]; const RefreshRing = ({ seconds, total = 60 }) => { const r = 7; const c = 2 * Math.PI * r; const offset = c * (1 - Math.max(0, seconds) / total); return ( ); }; const DesktopHeader = ({ title, exchange, onExchangeChange, exReady, theme, onToggleTheme, onOpenStorm, stormActive, onRefresh, refreshing, nextRefreshIn }) => { return (
{title}
{SUPPORTED_EX.map(ex => ( ))}
{nextRefreshIn}s
{window.DesktopExtras?.NotificationsBell && }
); }; // ───────────────────────── Storm modal ───────────────────────── const StormModal = ({ open, onClose, onConfirm, stormActive, untilMs }) => { if (!open) return null; const minsLeft = stormActive && untilMs ? Math.max(0, Math.round((untilMs - Date.now()) / 60000)) : 0; return (
e.stopPropagation()}>
⚡ Storm mode
{stormActive ? ( <>

Storm mode активен. Все боты остановлены, новые ордера блокируются.

До автоматического отключения: {minsLeft} мин

) : ( <>

Включить Storm mode на 60 минут:

  • Остановит ВСЕ активные локальные боты
  • Заблокирует автоматическое исполнение сигналов
  • Не закрывает уже открытые позиции (нужно вручную)

Storm можно отменить досрочно повторным нажатием.

)}
); }; // ───────────────────────── Root DesktopApp ───────────────────────── const DesktopApp = ({ user, setUser, onLogout }) => { // Биржа const [exchange, setExchange] = useState(() => window.creds.active()); const [exReady, setExReady] = useState(() => window.creds.readyMap()); useEffect(() => { const onUpd = () => setExReady(window.creds.readyMap()); window.addEventListener("creds-updated", onUpd); return () => window.removeEventListener("creds-updated", onUpd); }, []); // Тема const [theme, setTheme] = useState(() => { try { return localStorage.getItem("alpha_theme") || "dark"; } catch { return "dark"; } }); useEffect(() => { const eff = theme === "auto" ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") : theme; document.documentElement.setAttribute("data-theme", eff); try { localStorage.setItem("alpha_theme", theme); } catch {} }, [theme]); // Sidebar collapse const [collapsed, setCollapsed] = useState(() => { try { return localStorage.getItem("dapp_sidebar_collapsed") === "1"; } catch { return false; } }); useEffect(() => { try { localStorage.setItem("dapp_sidebar_collapsed", collapsed ? "1" : "0"); } catch {} }, [collapsed]); // Активный экран const [screen, setScreen] = useState("dashboard"); // Тосты const { push: pushToast, ToastStack } = useToasts(); // Storm mode const [stormOpen, setStormOpen] = useState(false); const [stormUntil, setStormUntil] = useState(0); const loadStorm = useCallback(async () => { try { const r = await window.MobileAPI.loadStormStatus(); setStormUntil(Number(r?.storm_until_ms || 0)); } catch {} }, []); useEffect(() => { loadStorm(); const t = setInterval(loadStorm, 30000); return () => clearInterval(t); }, [loadStorm]); const stormActive = stormUntil > Date.now(); const toggleStorm = async () => { try { await window.MobileAPI.setStormMode(stormActive ? 0 : 60); await loadStorm(); pushToast({ msg: stormActive ? "Storm отключён" : "⚡ Storm включён на 60 мин", warn: !stormActive, ok: stormActive }); } catch (e) { pushToast({ msg: "Не удалось переключить Storm: " + (e.message || e), err: true }); } }; // Refresh всех экранов — broadcast event + auto каждые 60с const [refreshTick, setRefreshTick] = useState(0); const [refreshing, setRefreshing] = useState(false); const [nextRefreshIn, setNextRefreshIn] = useState(60); const handleRefresh = async () => { setRefreshing(true); setRefreshTick(t => t + 1); setNextRefreshIn(60); setTimeout(() => setRefreshing(false), 600); }; useEffect(() => { const id = setInterval(() => { setNextRefreshIn(prev => { if (prev <= 1) { setRefreshing(true); setRefreshTick(t => t + 1); setTimeout(() => setRefreshing(false), 500); return 60; } return prev - 1; }); }, 1000); return () => clearInterval(id); }, []); // Счётчики для бейджей в sidebar const [counts, setCounts] = useState({ runningBots: 0, signals24h: 0 }); const refreshCounts = useCallback(async () => { try { const bots = await window.MobileAPI.listLocalBots(); const running = (bots || []).filter(b => ["running", "paused", "starting"].includes(b.state)).length; setCounts(c => ({ ...c, runningBots: running })); } catch {} }, []); useEffect(() => { refreshCounts(); }, [refreshCounts, refreshTick]); // Заголовок страницы const screenTitles = { dashboard: "Главная", bots: "Торговые боты", spot: "Спот", signals: "Сигналы и каналы", journal: "Журнал сделок", stats: "Статистика", settings: "Настройки", admin: "Админ-панель", }; // Контекст для экранов const screenProps = { exchange, exReady, pushToast, refreshTick, user, nextRefreshIn, }; const Screen = (window.DesktopScreens && window.DesktopScreens[screen]) || (() => (
Экран в разработке
Этот раздел ещё переносится с мобильной версии.
)); return ( <>
setCollapsed(c => !c)} counts={counts} /> { setExchange(ex); window.creds.setActive(ex); }} exReady={exReady} theme={theme} onToggleTheme={() => setTheme(t => (t === "dark" ? "light" : "dark"))} onOpenStorm={() => setStormOpen(true)} stormActive={stormActive} onRefresh={handleRefresh} refreshing={refreshing} nextRefreshIn={nextRefreshIn} />
setStormOpen(false)} onConfirm={toggleStorm} stormActive={stormActive} untilMs={stormUntil} /> ); }; // Экспорт для использования в app.jsx window.DesktopApp = DesktopApp; window.DesktopIcons = { DIcon }; window.DesktopShellHelpers = { useToasts }; })(); // конец IIFE-обёртки