// Senti brokerage — three web dashboard variations // Each renders an 1440×900 surface (the personal cabinet of a newbie investor). // V1: Зелёный/light · V2: Минимализм/light · V3: Тёмная/dark // ────────────────────────────────────────────────────────────── // Shared web-only data (extends PORTFOLIO from mobile-variations) // ────────────────────────────────────────────────────────────── const WEB_NEWS_RU = [ { tag: 'Товары', title: 'Золото удержало $4 514/унц. на фоне переговоров США–Иран', meta: 'Kitco News · 29 мая' }, { tag: 'Акции', title: 'Dell +32,76% — крупнейший однодневный рост за 10 лет', meta: 'Yahoo Finance · 29 мая' }, { tag: 'Крипто', title: 'Stellar XLM взлетел на 50%+ после партнёрства с DTCC', meta: 'CoinTelegraph · 28 мая' }, { tag: 'Акции', title: 'Microsoft +5,45%: рекордный рост Azure AI превзошёл прогнозы', meta: 'Yahoo Finance · 28 мая' }, ]; const WEB_NEWS_EN = WEB_NEWS_RU; const WATCHLIST_RU = [ { symbol: 'GOOGL', name: 'Alphabet', ccy: '$', price: 174.55, change: 0.6, spark: [172,173,174,173,174,174,174.55] }, { symbol: 'USDT', name: 'USDT / KGS', ccy: 'с', price: 88.30, change: 0, spark: [88.2,88.2,88.25,88.3,88.3,88.3,88.3] }, { symbol: 'USD', name: 'USD / KGS', ccy: 'с', price: 88.95, change: -0.1, spark: [89.1,89.05,89.0,88.98,88.96,88.95,88.95] }, { symbol: 'EUR', name: 'EUR / KGS', ccy: 'с', price: 95.20, change: 0.3, spark: [94.7,94.9,95.0,95.1,95.0,95.15,95.2] }, ]; // Sidebar nav items for the personal cabinet const NAV_RU = [ { id: 'home', label: 'Главная', icon: 'home', active: true }, { id: 'portfolio',label: 'Активы', icon: 'wallet' }, { id: 'markets', label: 'Рынки', icon: 'chart' }, { id: 'withdraw', label: 'Вывод', icon: 'upload' }, { id: 'history', label: 'История', icon: 'layers' }, { id: 'learn', label: 'Обучение', icon: 'book' }, { id: 'settings', label: 'Настройки', icon: 'settings' }, ]; const NAV_EN = [ { id: 'home', label: 'Home', icon: 'home', active: true }, { id: 'portfolio',label: 'Assets', icon: 'wallet' }, { id: 'markets', label: 'Markets', icon: 'chart' }, { id: 'withdraw', label: 'Withdraw', icon: 'upload' }, { id: 'history', label: 'History', icon: 'layers' }, { id: 'learn', label: 'Learn', icon: 'book' }, { id: 'settings', label: 'Settings', icon: 'settings' }, ]; // ────────────────────────────────────────────────────────────── // Sidebar — left column, ~240px // ────────────────────────────────────────────────────────────── function WebSidebar({ lang = 'ru', dark = false, active = 'home', onNav, accent = SC.green }) { const items = lang === 'ru' ? NAV_RU : NAV_EN; const bg = dark ? SC.ink1000 : SC.paper; const sectionBg = dark ? 'rgba(255,255,255,0.04)' : SC.ink50; const text = dark ? '#fff' : SC.ink1000; const sub = dark ? 'rgba(255,255,255,0.5)' : SC.ink500; const hover = dark ? 'rgba(255,255,255,0.06)' : SC.ink100; return ( ); } // ────────────────────────────────────────────────────────────── // Web top bar — search + language switch + bell + small avatar // ────────────────────────────────────────────────────────────── function WebTopBar({ lang = 'ru', setLang, dark = false, onChat = () => {}, onNotif = () => {} }) { const bg = dark ? SC.ink1000 : SC.paper; const text = dark ? '#fff' : SC.ink1000; const sub = dark ? 'rgba(255,255,255,0.5)' : SC.ink500; const border = dark ? 'rgba(255,255,255,0.08)' : SC.ink200; const fieldBg = dark ? 'rgba(255,255,255,0.05)' : SC.ink50; return (
{/* Search */}
⌘K
{/* lang switch */}
{['ru', 'en'].map(l => ( ))}
); } // ────────────────────────────────────────────────────────────── // Web chat overlay panel (slides in from right) // ────────────────────────────────────────────────────────────── // ────────────────────────────────────────────────────────────── // Web notifications overlay (slides in from right, like chat) // ────────────────────────────────────────────────────────────── function WebNotifOverlay({ lang = 'ru', dark = false, onClose = () => {} }) { const bg = dark ? '#1a2235' : SC.paper; const text = dark ? '#fff' : SC.ink1000; const sub = dark ? 'rgba(255,255,255,0.5)' : SC.ink500; const border = dark ? 'rgba(255,255,255,0.08)' : SC.ink200; const fieldBg = dark ? 'rgba(255,255,255,0.07)' : SC.ink50; const [tab, setTab] = React.useState('trading'); const [notifs, setNotifs] = React.useState([]); const [loading, setLoading] = React.useState(true); const load = React.useCallback(async () => { try { const r = await fetch(`${BYBIT_WORKER}/notifications`); if (r.ok) { const d = await r.json(); setNotifs(Array.isArray(d) ? d : []); } } catch(_) {} finally { setLoading(false); } }, []); React.useEffect(() => { load(); const iv = setInterval(load, 15000); return () => clearInterval(iv); }, [load]); const markAll = async () => { try { await fetch(`${BYBIT_WORKER}/notifications/read-all`, { method: 'POST' }); setNotifs(prev => prev.map(n => ({ ...n, read: true }))); } catch(_) {} }; const markOne = async (id) => { try { await fetch(`${BYBIT_WORKER}/notifications/${id}/read`, { method: 'POST' }); setNotifs(prev => prev.map(n => String(n.id) === String(id) ? { ...n, read: true } : n)); } catch(_) {} }; const NOTIF_ICONS = { order_fill: '✅', deposit: '💰', withdrawal: '📤', system: '📢' }; const filtered = tab === 'system' ? notifs.filter(n => n.type === 'system') : notifs.filter(n => n.type !== 'system'); const unreadTotal = notifs.filter(n => !n.read).length; const fmtTime = ts => { if (!ts) return ''; const d = new Date(ts), now = new Date(), diff = now - d; if (diff < 3600000) return Math.floor(diff / 60000) + (lang === 'ru' ? ' мин' : 'm'); if (diff < 86400000) return Math.floor(diff / 3600000) + (lang === 'ru' ? ' ч' : 'h'); return d.getDate() + ' ' + ['янв','фев','мар','апр','мая','июн','июл','авг','сен','окт','ноя','дек'][d.getMonth()]; }; const tabBtn = (id, label) => ( ); return (
{/* Header */}
{lang === 'ru' ? 'Уведомления' : 'Notifications'}
{unreadTotal > 0 &&
{unreadTotal} {lang === 'ru' ? 'непрочитанных' : 'unread'}
}
{unreadTotal > 0 && ( )}
{/* Tabs */}
{tabBtn('trading', `📈 ${lang === 'ru' ? 'Торговые' : 'Trading'}`)} {tabBtn('system', `⚙️ ${lang === 'ru' ? 'Системные' : 'System'}`)}
{/* List */}
{loading ? (
) : filtered.length === 0 ? (
{tab === 'system' ? (lang === 'ru' ? 'Нет системных уведомлений' : 'No system notifications') : (lang === 'ru' ? 'Нет торговых уведомлений' : 'No trading notifications')}
) : filtered.map(n => (
!n.read && markOne(n.id)} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '14px 18px', borderBottom: `1px solid ${border}`, cursor: !n.read ? 'pointer' : 'default', background: !n.read ? (dark ? 'rgba(0,184,107,0.05)' : 'rgba(0,184,107,0.04)') : 'transparent', }}>
{NOTIF_ICONS[n.type] || '🔔'}
{n.title} {!n.read && }
{n.message &&
{n.message}
}
{fmtTime(n.created_at)}
))}
); } function WebChatOverlay({ lang = 'ru', dark = false, onClose = () => {} }) { const bg = dark ? '#1a2235' : SC.paper; const text = dark ? '#fff' : SC.ink1000; const sub = dark ? 'rgba(255,255,255,0.5)' : SC.ink500; const fieldBg = dark ? 'rgba(255,255,255,0.07)' : SC.ink50; const border = dark ? 'rgba(255,255,255,0.08)' : SC.ink200; const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(''); const [sending, setSending] = React.useState(false); const [loading, setLoading] = React.useState(true); const bottomRef = React.useRef(null); const scrollBottom = () => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); const load = React.useCallback(async () => { try { const r = await fetch(`${BYBIT_WORKER}/chat`); if (r.ok) { const d = await r.json(); setMessages(Array.isArray(d) ? d : []); } } catch(_) {} finally { setLoading(false); } }, []); React.useEffect(() => { load(); const iv = setInterval(load, 5000); return () => clearInterval(iv); }, [load]); React.useEffect(() => { scrollBottom(); }, [messages]); const send = async () => { const t = input.trim(); if (!t || sending) return; setSending(true); const optimistic = { id: Date.now(), sender: 'user', text: t, ts: Date.now(), read: false }; setMessages(prev => [...prev, optimistic]); setInput(''); try { await fetch(`${BYBIT_WORKER}/chat`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: t, sender: 'user' }), }); await load(); } catch(_) {} finally { setSending(false); } }; const fmtTime = ts => { const d = new Date(ts); return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; }; return (
{/* Header */}
{lang === 'ru' ? 'Поддержка Senti' : 'Senti Support'}
● {lang === 'ru' ? 'Онлайн' : 'Online'}
{/* Messages */}
{loading &&
…
} {!loading && messages.length === 0 && (
💬
{lang === 'ru' ? 'Напишите нам' : 'Write to us'}
{lang === 'ru' ? 'Мы отвечаем в рабочее время.' : 'We reply during business hours.'}
)} {messages.map(m => { const isUser = m.sender === 'user'; return (
{m.text}
{fmtTime(m.ts)} {isUser && ✓✓}
); })}
{/* Input */}
setInput(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); send(); } }} placeholder={lang === 'ru' ? 'Сообщение…' : 'Message…'} style={{ flex: 1, background: fieldBg, border: `1px solid ${border}`, borderRadius: 12, padding: '10px 14px', color: text, fontSize: 13, outline: 'none', fontFamily: SC.fontDisplay, }} />
); } // ────────────────────────────────────────────────────────────── // Donut / pie chart for allocation (SVG) // ────────────────────────────────────────────────────────────── function Donut({ segments, size = 160, thickness = 22, gap = 2, dark = false }) { const total = segments.reduce((s, x) => s + x.pct, 0); const c = size / 2; const r = (size - thickness) / 2; const C = 2 * Math.PI * r; let offset = 0; return ( {segments.map(s => { const len = (s.pct / total) * C; const dashArr = `${len - gap} ${C - len + gap}`; const el = ( ); offset += len; return el; })} ); } // ────────────────────────────────────────────────────────────── // V1 — Web "Зелёный" : green hero card, allocation donut, holdings table // ────────────────────────────────────────────────────────────── function WebV1Green({ lang = 'ru', setLang = () => {}, onNav, active = 'home', onTrade = () => {}, onTopUp = () => {}, onWithdraw = () => {} }) { const [chatOpen, setChatOpen] = React.useState(false); const [notifOpen, setNotifOpen] = React.useState(false); const [tab, setTab] = React.useState('portfolio'); const { holdings: liveHoldings } = usePortfolio(); const { rates: kgsRates } = typeof useKgsRates === 'function' ? useKgsRates() : { rates: {} }; const stats = React.useMemo(() => computePortfolioStats(liveHoldings, kgsRates['USD']), [liveHoldings, kgsRates['USD']]); const { balances: bybitBals } = typeof useBybitAccount === 'function' ? useBybitAccount() : { balances: [] }; const bybitHoldings = React.useMemo(() => bybitBals.filter(b => parseFloat(b.usdValue) > 0.01).map(b => { const qty = parseFloat(b.walletBalance || b.free); const usd = parseFloat(b.usdValue); return { symbol: b.asset, name: b.asset, qty, price: qty > 0 ? usd / qty : 0, ccy: '$', change: 0 }; }), [bybitBals]); const cashHoldings = liveHoldings.filter(h => h.cls === 'cash'); const kgHoldings = liveHoldings.filter(h => h.cls === 'kg'); const cryptoHoldings = liveHoldings.filter(h => h.cls === 'crypto'); const cfdHoldings = liveHoldings.filter(h => h.cls === 'cfd'); const STABLE_COINS = ['USDT','USDC','BUSD','DAI','TUSD']; const stableVarSegs1 = React.useMemo(() => { const stableUsd = liveHoldings.filter(h => h.cls === 'cash').reduce((s, h) => s + (h.qty||0)*(h.price||0), 0) + bybitBals.filter(b => STABLE_COINS.includes(b.asset)).reduce((s, b) => s + parseFloat(b.usdValue||0), 0); const varUsd = liveHoldings.filter(h => h.cls !== 'cash').reduce((s, h) => s + (h.qty||0)*(h.price||0), 0) + bybitBals.filter(b => !STABLE_COINS.includes(b.asset)).reduce((s, b) => s + parseFloat(b.usdValue||0), 0); const total = stableUsd + varUsd || 1; return [ { id: 'stable', label: lang === 'ru' ? 'Стабильная цена' : 'Stable price', usd: stableUsd, pct: Math.round(stableUsd/total*100), color: '#7C8CF8' }, { id: 'var', label: lang === 'ru' ? 'Переменная цена' : 'Variable price', usd: varUsd, pct: Math.round(varUsd/total*100), color: '#00B86B' }, ].filter(s => s.usd > 0); }, [liveHoldings, bybitBals, lang]); const { orders: allRecords1, refetch: refetchHistory1 } = typeof useBybitHistory === 'function' ? useBybitHistory() : { orders: [], refetch: () => {} }; const openOrders1 = React.useMemo(() => allRecords1.filter(r => r.recordType === 'open_order'), [allRecords1]); const closedTrades1 = React.useMemo(() => allRecords1.filter(r => r.recordType === 'order'), [allRecords1]); const [cancellingId1, setCancellingId1] = React.useState(null); const cancelOrder1 = React.useCallback(async (o) => { if (cancellingId1) return; if (!window.confirm(lang === 'ru' ? `Вы хотите отменить ордер?\n${o.side === 'Buy' ? 'Покупка' : 'Продажа'} ${bhSym(o.symbol)} · ${bhQtyPrice(o)}` : `Cancel this order?\n${o.side} ${bhSym(o.symbol)} · ${bhQtyPrice(o)}`)) return; setCancellingId1(o.id); try { const res = await fetch(`${BYBIT_WORKER}/cancel`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ orderId: o.id, symbol: o.symbol, category: o.category || 'spot' }) }); const d = await res.json(); if (!d.ok) throw new Error(d.error || 'Error'); refetchHistory1(); } catch(e) { alert(lang === 'ru' ? `Ошибка отмены: ${e.message}` : `Cancel error: ${e.message}`); } finally { setCancellingId1(null); } }, [cancellingId1, lang, refetchHistory1]); const tabsCfg = [ { id: 'portfolio', label: lang === 'ru' ? 'Портфель' : 'Portfolio' }, { id: 'orders', label: lang === 'ru' ? 'Приказы' : 'Orders' }, { id: 'trades', label: lang === 'ru' ? 'Сделки' : 'Trades' }, ]; return (
{chatOpen && setChatOpen(false)}/>} {notifOpen && setNotifOpen(false)}/>}
setChatOpen(v => !v)} onNotif={() => setNotifOpen(v => !v)}/>
{/* Hero card — green wash */}
{t(lang, 'totalBalance')}
{fmtKGS(stats.dayChangeKgs, { sign: true })} {t(lang, 'soms')} · {t(lang, 'todayChange')}
onTrade('buy')}>{t(lang, 'buy')} onTrade('sell')}>{t(lang, 'sell')} {t(lang, 'withdraw')} {t(lang, 'topUp')}
{/* Portfolio structure — donut */}
{stats.classCount}
{lang === 'ru' ? 'класса' : 'classes'}
{stats.allocation[lang].map(s => (
{s.label} {s.pct}%
))}
{/* Holdings table */}
{/* Tabs */}
{tabsCfg.map(tg => ( ))}
{/* Portfolio tab */} {tab === 'portfolio' && (<>
{lang === 'ru' ? 'Актив' : 'Asset'} {lang === 'ru' ? 'Кол-во' : 'Qty'} {lang === 'ru' ? 'Цена' : 'Price'} {lang === 'ru' ? 'Итого' : 'Total'}
{[ { title: lang === 'ru' ? 'Валюта' : 'Currency', rows: cashHoldings, extra: [] }, { title: 'KG рынок', rows: kgHoldings, extra: [] }, { title: lang === 'ru' ? 'Крипто' : 'Crypto', rows: cryptoHoldings, extra: bybitHoldings }, { title: 'CFD', rows: cfdHoldings, extra: [] }, ].map(group => (group.rows.length + group.extra.length) === 0 ? null : (
{group.title}
{group.rows.map((h, i, arr) => { const total = (h.qty || 0) * (h.price || 0); const isLast = i === arr.length - 1 && group.extra.length === 0; return (
{h.symbol}
{h.name}
{h.qty}
{h.price > 0 ? (h.ccy + h.price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })) : '—'}
{total > 0 ? '$' + total.toLocaleString('en-US', { minimumFractionDigits: total < 1000 ? 2 : 0, maximumFractionDigits: total < 1000 ? 2 : 0 }) : '—'}
); })} {group.extra.map((h, i, arr) => { const total = h.qty * h.price; return (
{h.symbol} bybit live
{h.name}
{h.qty < 0.01 ? h.qty.toFixed(6) : h.qty < 1 ? h.qty.toFixed(4) : h.qty.toFixed(2)}
{h.price > 0 ? ('$' + h.price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })) : '—'}
{total > 0 ? '$' + total.toLocaleString('en-US', { minimumFractionDigits: total < 1000 ? 2 : 0, maximumFractionDigits: total < 1000 ? 2 : 0 }) : '—'}
); })} ))} )} {/* Orders tab */} {tab === 'orders' && (
{lang === 'ru' ? 'Инструмент' : 'Instrument'} {lang === 'ru' ? 'Вид' : 'Type'} {lang === 'ru' ? 'Кол-во × Цена' : 'Qty × Price'} {lang === 'ru' ? 'Дата' : 'Date'}
{openOrders1.length === 0 ?
{lang === 'ru' ? 'Нет активных приказов' : 'No open orders'}
: openOrders1.map((o, i, arr) => (
{bhSym(o.symbol)}
{bhFmtDate(o.time, lang)}
{o.side === 'Buy' ? (lang === 'ru' ? 'Покупка' : 'Buy') : (lang === 'ru' ? 'Продажа' : 'Sell')}
{bhQtyPrice(o)}
{bhTotal(o)}
● {bhStatusLabel(o.status, o.recordType, lang)}
))}
)} {/* Trades tab */} {tab === 'trades' && (
{lang === 'ru' ? 'Инструмент' : 'Instrument'} {lang === 'ru' ? 'Тип' : 'Side'} {lang === 'ru' ? 'Кол-во × Цена' : 'Qty × Price'} {lang === 'ru' ? 'Итого' : 'Total'}
{closedTrades1.length === 0 ?
{lang === 'ru' ? 'Нет исполненных сделок' : 'No trades yet'}
: closedTrades1.map((tr, i, arr) => (
{bhSym(tr.symbol)}
{bhFmtDate(tr.time, lang)}
{tr.side === 'Buy' ? (lang === 'ru' ? 'Купил' : 'Bought') : (lang === 'ru' ? 'Продал' : 'Sold')}
{bhQtyPrice(tr)}
{bhTotal(tr)}
{bhStatusLabel(tr.status, tr.recordType, lang)}
))}
)}
{/* Right rail */}
); } // ────────────────────────────────────────────────────────────── // V2 — Web "Минимализм" : ink only on paper, sparse, generous whitespace // ────────────────────────────────────────────────────────────── function WebV2Minimal({ lang = 'ru', setLang = () => {}, onNav, active = 'home', onTrade = () => {}, onTopUp = () => {}, onWithdraw = () => {} }) { const [chatOpen, setChatOpen] = React.useState(false); const [notifOpen, setNotifOpen] = React.useState(false); const [tab, setTab] = React.useState('portfolio'); const { holdings: liveHoldings } = usePortfolio(); const { rates: kgsRates } = typeof useKgsRates === 'function' ? useKgsRates() : { rates: {} }; const stats = React.useMemo(() => computePortfolioStats(liveHoldings, kgsRates['USD']), [liveHoldings, kgsRates['USD']]); const { balances: bybitBals } = typeof useBybitAccount === 'function' ? useBybitAccount() : { balances: [] }; const bybitHoldings = React.useMemo(() => bybitBals.filter(b => parseFloat(b.usdValue) > 0.01).map(b => { const qty = parseFloat(b.walletBalance || b.free); const usd = parseFloat(b.usdValue); return { symbol: b.asset, name: b.asset, qty, price: qty > 0 ? usd / qty : 0, ccy: '$', change: 0 }; }), [bybitBals]); const cashHoldings = liveHoldings.filter(h => h.cls === 'cash'); const kgHoldings = liveHoldings.filter(h => h.cls === 'kg'); const cryptoHoldings = liveHoldings.filter(h => h.cls === 'crypto'); const cfdHoldings = liveHoldings.filter(h => h.cls === 'cfd'); const { orders: allRecords2, refetch: refetchHistory2 } = typeof useBybitHistory === 'function' ? useBybitHistory() : { orders: [], refetch: () => {} }; const openOrders2 = React.useMemo(() => allRecords2.filter(r => r.recordType === 'open_order'), [allRecords2]); const closedTrades2 = React.useMemo(() => allRecords2.filter(r => r.recordType === 'order'), [allRecords2]); const [cancellingId2, setCancellingId2] = React.useState(null); const cancelOrder2 = React.useCallback(async (o) => { if (cancellingId2) return; if (!window.confirm(lang === 'ru' ? `Вы хотите отменить ордер?\n${o.side === 'Buy' ? 'Покупка' : 'Продажа'} ${bhSym(o.symbol)} · ${bhQtyPrice(o)}` : `Cancel this order?\n${o.side} ${bhSym(o.symbol)} · ${bhQtyPrice(o)}`)) return; setCancellingId2(o.id); try { const res = await fetch(`${BYBIT_WORKER}/cancel`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ orderId: o.id, symbol: o.symbol, category: o.category || 'spot' }) }); const d = await res.json(); if (!d.ok) throw new Error(d.error || 'Error'); refetchHistory2(); } catch(e) { alert(lang === 'ru' ? `Ошибка отмены: ${e.message}` : `Cancel error: ${e.message}`); } finally { setCancellingId2(null); } }, [cancellingId2, lang, refetchHistory2]); const tabsCfg = [ { id: 'portfolio', label: lang === 'ru' ? 'Портфель' : 'Portfolio' }, { id: 'orders', label: lang === 'ru' ? 'Приказы' : 'Orders' }, { id: 'trades', label: lang === 'ru' ? 'Сделки' : 'Trades' }, ]; return (
{chatOpen && setChatOpen(false)}/>} {notifOpen && setNotifOpen(false)}/>}
setChatOpen(v => !v)} onNotif={() => setNotifOpen(v => !v)}/>
{/* Eyebrow */}
{t(lang, 'hi')}, {clientFirstName(lang)}
{lang === 'ru' ? 'Вот ваш портфель сегодня.' : 'Here is your portfolio today.'}
{/* Hero — pure ink */}
{t(lang, 'totalBalance')}
{fmtKGS(stats.dayChangeKgs, { sign: true })} {t(lang, 'soms')} · {t(lang, 'todayChange')}
onTrade('buy')}>{t(lang, 'buy')} onTrade('sell')}>{t(lang, 'sell')} {t(lang, 'withdraw')} {t(lang, 'topUp')}
{/* Portfolio structure — donut */}
{stats.classCount}
{lang === 'ru' ? 'класса' : 'classes'}
{stats.allocation[lang].map(s => (
{s.label} {s.pct}%
))}
{/* Assets — tabs */}
{t(lang, 'assets')}
{tabsCfg.map(tg => ( ))}
{tab === 'portfolio' && [ { title: lang === 'ru' ? 'Валюта' : 'Currency', rows: cashHoldings, extra: [] }, { title: 'KG рынок', rows: kgHoldings, extra: [] }, { title: lang === 'ru' ? 'Крипто' : 'Crypto', rows: cryptoHoldings, extra: bybitHoldings }, { title: 'CFD', rows: cfdHoldings, extra: [] }, ].map(group => (group.rows.length + group.extra.length) === 0 ? null : (
{group.title}
{group.rows.map((h, i, arr) => ( ))} {group.extra.map((h, i, arr) => ( ))} ))} {tab === 'orders' && ( openOrders2.length === 0 ?
{lang === 'ru' ? 'Нет активных приказов' : 'No open orders'}
: openOrders2.map((o, i, arr) => (
{o.side === 'Buy' ? (lang === 'ru' ? 'Покупка' : 'Buy') : (lang === 'ru' ? 'Продажа' : 'Sell')} {bhSym(o.symbol)}
{bhQtyPrice(o)} · {bhFmtDate(o.time, lang)}
{bhTotal(o)}
● {bhStatusLabel(o.status, o.recordType, lang)}
)) )} {tab === 'trades' && ( closedTrades2.length === 0 ?
{lang === 'ru' ? 'Нет исполненных сделок' : 'No trades yet'}
: closedTrades2.map((tr, i, arr) => (
{tr.side === 'Buy' ? (lang === 'ru' ? 'Купил' : 'Bought') : (lang === 'ru' ? 'Продал' : 'Sold')} {bhSym(tr.symbol)}
{bhQtyPrice(tr)} · {bhFmtDate(tr.time, lang)}
{bhTotal(tr)}
{bhStatusLabel(tr.status, tr.recordType, lang)}
)) )}
); } // ────────────────────────────────────────────────────────────── // V3 — Web "Тёмная" : ink-1000 surfaces, green accent, denser // ────────────────────────────────────────────────────────────── function WebV3Dark({ lang = 'ru', setLang = () => {}, onNav, active = 'home', onTrade = () => {}, onTopUp = () => {}, onWithdraw = () => {} }) { const [chatOpen, setChatOpen] = React.useState(false); const [notifOpen, setNotifOpen] = React.useState(false); const [tab, setTab] = React.useState('portfolio'); const { holdings: liveHoldings } = usePortfolio(); const { rates: kgsRates } = typeof useKgsRates === 'function' ? useKgsRates() : { rates: {} }; const stats = React.useMemo(() => computePortfolioStats(liveHoldings, kgsRates['USD']), [liveHoldings, kgsRates['USD']]); const { balances: bybitBals } = typeof useBybitAccount === 'function' ? useBybitAccount() : { balances: [] }; const bybitHoldings = React.useMemo(() => bybitBals.filter(b => parseFloat(b.usdValue) > 0.01).map(b => { const qty = parseFloat(b.walletBalance || b.free); const usd = parseFloat(b.usdValue); return { symbol: b.asset, name: b.asset, qty, price: qty > 0 ? usd / qty : 0, ccy: '$', change: 0 }; }), [bybitBals]); const cashHoldings = liveHoldings.filter(h => h.cls === 'cash'); const kgHoldings = liveHoldings.filter(h => h.cls === 'kg'); const cryptoHoldings = liveHoldings.filter(h => h.cls === 'crypto'); const cfdHoldings = liveHoldings.filter(h => h.cls === 'cfd'); const STABLE_COINS_3 = ['USDT','USDC','BUSD','DAI','TUSD']; const stableVarSegs3 = React.useMemo(() => { const stableUsd = liveHoldings.filter(h => h.cls === 'cash').reduce((s, h) => s + (h.qty||0)*(h.price||0), 0) + bybitBals.filter(b => STABLE_COINS_3.includes(b.asset)).reduce((s, b) => s + parseFloat(b.usdValue||0), 0); const varUsd = liveHoldings.filter(h => h.cls !== 'cash').reduce((s, h) => s + (h.qty||0)*(h.price||0), 0) + bybitBals.filter(b => !STABLE_COINS_3.includes(b.asset)).reduce((s, b) => s + parseFloat(b.usdValue||0), 0); const total = stableUsd + varUsd || 1; return [ { id: 'stable', label: lang === 'ru' ? 'Стабильная цена' : 'Stable price', usd: stableUsd, pct: Math.round(stableUsd/total*100), color: '#7C8CF8' }, { id: 'var', label: lang === 'ru' ? 'Переменная цена' : 'Variable price', usd: varUsd, pct: Math.round(varUsd/total*100), color: '#00B86B' }, ].filter(s => s.usd > 0); }, [liveHoldings, bybitBals, lang]); const { orders: allRecords3, refetch: refetchHistory3 } = typeof useBybitHistory === 'function' ? useBybitHistory() : { orders: [], refetch: () => {} }; const openOrders3 = React.useMemo(() => allRecords3.filter(r => r.recordType === 'open_order'), [allRecords3]); const closedTrades3 = React.useMemo(() => allRecords3.filter(r => r.recordType === 'order'), [allRecords3]); const [cancellingId3, setCancellingId3] = React.useState(null); const cancelOrder3 = React.useCallback(async (o) => { if (cancellingId3) return; if (!window.confirm(lang === 'ru' ? `Вы хотите отменить ордер?\n${o.side === 'Buy' ? 'Покупка' : 'Продажа'} ${bhSym(o.symbol)} · ${bhQtyPrice(o)}` : `Cancel this order?\n${o.side} ${bhSym(o.symbol)} · ${bhQtyPrice(o)}`)) return; setCancellingId3(o.id); try { const res = await fetch(`${BYBIT_WORKER}/cancel`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ orderId: o.id, symbol: o.symbol, category: o.category || 'spot' }) }); const d = await res.json(); if (!d.ok) throw new Error(d.error || 'Error'); refetchHistory3(); } catch(e) { alert(lang === 'ru' ? `Ошибка отмены: ${e.message}` : `Cancel error: ${e.message}`); } finally { setCancellingId3(null); } }, [cancellingId3, lang, refetchHistory3]); const tabsCfg = [ { id: 'portfolio', label: lang === 'ru' ? 'Портфель' : 'Portfolio' }, { id: 'orders', label: lang === 'ru' ? 'Приказы' : 'Orders' }, { id: 'trades', label: lang === 'ru' ? 'Сделки' : 'Trades' }, ]; return (
{chatOpen && setChatOpen(false)}/>} {notifOpen && setNotifOpen(false)}/>}
setChatOpen(v => !v)} onNotif={() => setNotifOpen(v => !v)}/>
{/* Hero — black with subtle gradient */}
{/* subtle green glow */}
{t(lang, 'totalBalance')}
= 0 ? 'rgba(0,184,107,0.22)' : 'rgba(239,68,68,0.22)', color: stats.dayChangePct >= 0 ? SC.greenBright : '#EF4444', fontFamily: SC.fontMono, fontWeight: 600, fontSize: 13, }}> = 0 ? 'arrUp' : 'arrDn'} size={12} color={stats.dayChangePct >= 0 ? SC.greenBright : '#EF4444'} strokeWidth={2.4}/> {stats.dayChangePct >= 0 ? '+' : ''}{stats.dayChangePct.toFixed(2)}% {fmtKGS(stats.dayChangeKgs, { sign: true })} {t(lang, 'soms')} · {t(lang, 'todayChange')}
onTrade('buy')}>{t(lang, 'buy')} onTrade('sell')}>{t(lang, 'sell')} {t(lang, 'withdraw')} {t(lang, 'topUp')}
{/* Portfolio structure — donut */}
{stats.classCount}
{lang === 'ru' ? 'класса' : 'classes'}
{stats.allocation[lang].map(s => (
{s.label} {s.pct}%
))}
{/* Holdings */}
{/* Tabs */}
{tabsCfg.map(tg => ( ))}
{/* Portfolio tab */} {tab === 'portfolio' && (<>
{lang === 'ru' ? 'Актив' : 'Asset'} {lang === 'ru' ? 'Кол-во' : 'Qty'} {lang === 'ru' ? 'Цена' : 'Price'} {lang === 'ru' ? 'Итого' : 'Total'}
{[ { title: lang === 'ru' ? 'Валюта' : 'Currency', rows: cashHoldings, extra: [] }, { title: 'KG рынок', rows: kgHoldings, extra: [] }, { title: lang === 'ru' ? 'Крипто' : 'Crypto', rows: cryptoHoldings, extra: bybitHoldings }, { title: 'CFD', rows: cfdHoldings, extra: [] }, ].map(group => (group.rows.length + group.extra.length) === 0 ? null : (
{group.title}
{group.rows.map((h, i, arr) => { const total = (h.qty || 0) * (h.price || 0); const isLast = i === arr.length - 1 && group.extra.length === 0; return (
{h.symbol}
{h.name}
{h.qty}
{h.price > 0 ? (h.ccy + h.price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })) : '—'}
{total > 0 ? '$' + total.toLocaleString('en-US', { minimumFractionDigits: total < 1000 ? 2 : 0, maximumFractionDigits: total < 1000 ? 2 : 0 }) : '—'}
); })} {group.extra.map((h, i, arr) => { const total = h.qty * h.price; return (
{h.symbol} bybit live
{h.name}
{h.qty < 0.01 ? h.qty.toFixed(6) : h.qty < 1 ? h.qty.toFixed(4) : h.qty.toFixed(2)}
{h.price > 0 ? ('$' + h.price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })) : '—'}
{total > 0 ? '$' + total.toLocaleString('en-US', { minimumFractionDigits: total < 1000 ? 2 : 0, maximumFractionDigits: total < 1000 ? 2 : 0 }) : '—'}
); })} ))} )} {/* Orders tab */} {tab === 'orders' && (
{lang === 'ru' ? 'Инструмент' : 'Instrument'} {lang === 'ru' ? 'Вид' : 'Type'} {lang === 'ru' ? 'Кол-во × Цена' : 'Qty × Price'} {lang === 'ru' ? 'Дата' : 'Date'}
{openOrders3.length === 0 ?
{lang === 'ru' ? 'Нет активных приказов' : 'No open orders'}
: openOrders3.map((o, i, arr) => (
{bhSym(o.symbol)}
{bhFmtDate(o.time, lang)}
{o.side === 'Buy' ? (lang === 'ru' ? 'Покупка' : 'Buy') : (lang === 'ru' ? 'Продажа' : 'Sell')}
{bhQtyPrice(o)}
{bhTotal(o)}
● {bhStatusLabel(o.status, o.recordType, lang)}
))}
)} {/* Trades tab */} {tab === 'trades' && (
{lang === 'ru' ? 'Инструмент' : 'Instrument'} {lang === 'ru' ? 'Тип' : 'Side'} {lang === 'ru' ? 'Кол-во × Цена' : 'Qty × Price'} {lang === 'ru' ? 'Итого' : 'Total'}
{closedTrades3.length === 0 ?
{lang === 'ru' ? 'Нет исполненных сделок' : 'No trades yet'}
: closedTrades3.map((tr, i, arr) => (
{bhSym(tr.symbol)}
{bhFmtDate(tr.time, lang)}
{tr.side === 'Buy' ? (lang === 'ru' ? 'Купил' : 'Bought') : (lang === 'ru' ? 'Продал' : 'Sold')}
{bhQtyPrice(tr)}
{bhTotal(tr)}
{bhStatusLabel(tr.status, tr.recordType, lang)}
))}
)}
{/* Right rail */}
); } Object.assign(window, { WebSidebar, WebTopBar, Donut, WebChatOverlay, WebNotifOverlay, WebV1Green, WebV2Minimal, WebV3Dark });