{days.slice(-30).map((d, i) => {
const v = Number(d.pnl || 0);
const h = Math.max(2, Math.abs(v) / max * 90);
return (
= 0 ? "+" : ""}${fmt(v)} USDT`}
style={{ flex: 1, height: h,
background: v >= 0
? "linear-gradient(180deg, var(--d-success-2), var(--d-success))"
: "linear-gradient(180deg, var(--d-danger-2), var(--d-danger))",
borderRadius: "4px 4px 0 0",
boxShadow: "0 0 8px " + (v >= 0 ? "rgba(0,193,118,0.4)" : "rgba(255,71,89,0.4)"),
cursor: "pointer",
transition: "filter 0.15s",
}}
onMouseEnter={e => e.currentTarget.style.filter = "brightness(1.3)"}
onMouseLeave={e => e.currentTarget.style.filter = "none"}
/>
);
})}
);
};
const ClosedTradesBlock = ({ exchange, exReady, refreshTick }) => {
const [trades, setTrades] = useState([]);
const [showAll, setShowAll] = useState(false);
useEffect(() => {
if (!exReady[exchange]) { setTrades([]); return; }
(async () => {
try {
const r = await window.MobileAPI.loadClosedTrades(exchange, 30);
setTrades(Array.isArray(r) ? r : (r?.trades || []));
} catch {}
})();
}, [exchange, exReady, refreshTick]);
if (!trades || trades.length === 0) return null;
const list = showAll ? trades : trades.slice(0, 8);
return (
Закрытые сделки биржи {trades.length}
Закрыта Символ Сторона
Вход
Выход
Размер
PnL
{list.map((t, i) => {
const pnl = Number(t.pnl || t.realizedPnl || 0);
const side = String(t.side || "").toUpperCase();
return (
{ago(t.closed_at || t.time)}
{String(t.symbol || "").toUpperCase()}
{side} {fmtPx(t.entry_price || t.entryPrice)}
{fmtPx(t.exit_price || t.closePrice)}
{fmt(t.qty || t.size, 4)}
{pnl >= 0 ? "+" : ""}{fmt(pnl)}
);
})}
{trades.length > 8 && (
setShowAll(v => !v)}>
{showAll ? "Свернуть" : `Показать все ${trades.length}`}
)}
);
};
// ═══════════════════════════════════════════════════════════════════════════════
// BOTS SCREEN
// ═══════════════════════════════════════════════════════════════════════════════
const BotsScreen = ({ exchange, exReady, pushToast, refreshTick }) => {
const [topTab, setTopTab] = useState("local"); // local | exchange
const [bots, setBots] = useState([]);
const [tab, setTab] = useState("active");
const [loading, setLoading] = useState(true);
const [createOpen, setCreateOpen] = useState(false);
const [detailsBotId, setDetailsBotId] = useState(null);
// Exchange bots (OKX/etc)
const [exBots, setExBots] = useState({ active: [], history: [] });
const [exLoading, setExLoading] = useState(false);
useEffect(() => {
if (topTab !== "exchange") return;
setExLoading(true);
(async () => {
try {
const [a, h] = await Promise.all([
window.MobileAPI.loadBotsActive(exchange).catch(() => []),
window.MobileAPI.loadBotsHistory(exchange, 30).catch(() => []),
]);
setExBots({ active: Array.isArray(a) ? a : [], history: Array.isArray(h) ? h : [] });
} catch {}
setExLoading(false);
})();
}, [topTab, exchange, refreshTick]);
const load = useCallback(async () => {
setLoading(true);
try {
const r = await window.MobileAPI.listLocalBots();
setBots(r || []);
} catch (e) { console.warn(e); }
setLoading(false);
}, []);
useEffect(() => { load(); }, [load, refreshTick]);
const ACTIVE = ["running", "paused", "starting"];
const active = bots.filter(b => ACTIVE.includes(b.state));
const history = bots.filter(b => !ACTIVE.includes(b.state));
const list = tab === "active" ? active : history;
const totalLivePnl = active.reduce((s, b) => {
const upnl = b.live?.unrealized_pnl || 0;
return s + (Number(b.total_pnl) || 0) + upnl;
}, 0);
const toggleBot = async (b) => {
try {
if (b.state === "running") await window.MobileAPI.stopLocalBot(b.id);
else await window.MobileAPI.startLocalBot(b.id);
await load();
pushToast({ msg: b.state === "running" ? "Бот остановлен" : "Бот запущен", ok: true });
} catch (e) { pushToast({ msg: "Ошибка: " + (e.message || e).slice(0, 80), err: true }); }
};
const removeBot = async (b) => {
if (!confirm("Удалить бота " + b.symbol + "?")) return;
try { await window.MobileAPI.deleteLocalBot(b.id); await load(); pushToast({ msg: "Удалён", ok: true }); }
catch { pushToast({ msg: "Ошибка удаления", err: true }); }
};
return (
{/* Top-level: API4ATKA vs Exchange Bots */}
setTopTab("local")}>
{active.length + history.length}
setTopTab("exchange")}>
{exBots.active.length + exBots.history.length}
{topTab === "exchange" && (
)}
{topTab === "local" && <>
Активных ботов
{active.length}
{active.filter(b => b.bot_type === "grid").length} Grid · {active.filter(b => b.bot_type === "dca").length} DCA · {active.filter(b => b.bot_type === "recurring").length} Basket
Общий PnL
{totalLivePnl >= 0 ? "+" : ""}{fmt(totalLivePnl)}
realized + unrealized
История
{history.length}
остановленных ботов
setCreateOpen(true)}>
Создать бота
Grid · DCA · Basket
setTab("active")}>
Активные {active.length}
setTab("history")}>
История {history.length}
{loading ? (
{Array.from({ length: 3 }).map((_, i) => (
))}
{tab === "active" ? "Нет активных ботов" : "История пуста"}
{tab === "active" ? "Создай Grid или DCA-бота — работает на любой бирже." : "Остановленные боты появятся здесь."}
) : (
Бот Тип Биржа Сторона
Инвестиция
PnL
uPnL
Liq.
Статус
Действия
{list.map(b => {
const upnl = b.live?.unrealized_pnl;
const realized = Number(b.total_pnl) || 0;
const total = (upnl != null ? realized + upnl : realized);
return (
setDetailsBotId(b.id)} style={{ cursor: "pointer" }}>
{b.bot_type.toUpperCase()} {(b.exchange || "").toUpperCase()} {(b.direction || "").toUpperCase()} {fmt(b.investment_usdt, 0)}
{total >= 0 ? "+" : ""}{fmt(total)}
{upnl != null ? ((upnl >= 0 ? "+" : "") + fmt(upnl)) : "—"}
{b.live?.liquidation_price > 0 ? fmtPx(b.live.liquidation_price) : "—"}
{b.state === "running" ? running
: {b.state} }
e.stopPropagation()}>
{ACTIVE.includes(b.state) && (
toggleBot(b)}>
{b.state === "running" ? : }
)}
removeBot(b)}>
);
})}
)}
}
{createOpen && (
setCreateOpen(false)}
onCreated={() => { setCreateOpen(false); load(); pushToast({ msg: "Бот создан", ok: true }); }}
pushToast={pushToast}
/>
)}
{detailsBotId && window.DesktopExtras?.LocalBotDetailsModal && (
setDetailsBotId(null)}
onReload={load}
pushToast={pushToast}
/>
)}
);
};
// ───────────────────── Биржевые боты (OKX и т.д.) ─────────────────────
const ExchangeBotsBlock = ({ exchange, bots, loading }) => {
const [tab, setTab] = useState("active");
const [selected, setSelected] = useState(null);
const list = tab === "active" ? bots.active : bots.history;
if (loading) {
return
;
}
if ((bots.active.length + bots.history.length) === 0) {
return (
Нет биржевых ботов
На бирже {exchange.toUpperCase()} нет встроенных Grid/Recurring/Signal ботов. Создавай ботов прямо в API4ATKA — они работают на любой бирже через API.
);
}
return (
setTab("active")}>
Активные ({bots.active.length})
setTab("history")}>
История ({bots.history.length})
{list.length === 0 ? (
{tab === "active" ? "Нет активных биржевых ботов" : "История пуста"}
) : (
Символ Тип Направление
Инвест.
PnL
APR
Создан
{list.map((b, i) => {
const pnl = Number(b.totalPnl || b.pnl || 0);
const apr = Number(b.totalPnlRatio || b.apr || 0);
return (
setSelected(b)} style={{ cursor: "pointer" }}>
{String(b.instId || b.symbol || "").toUpperCase()}
{(b.botType || b.algoOrdType || "GRID").toUpperCase()}
{b.direction === "long" ? LONG
: b.direction === "short" ? SHORT
: {(b.direction || "neutral").toUpperCase()} }
{fmt(b.investment || 0, 0)} {b.currency || "USDT"}
{pnl >= 0 ? "+" : ""}{fmt(pnl)}
{fmtPct(apr * 100)}
{ago(b.createTime || b.cTime)}
);
})}
)}
{selected && window.DesktopExtras?.ExchangeBotDetailsModal && (
setSelected(null)}
/>
)}
);
};
// ───────────────────────── Bot Create Modal ─────────────────────────
const BotCreateModal = ({ exchange, onClose, onCreated, pushToast }) => {
const [type, setType] = useState("grid");
const [symbol, setSymbol] = useState("");
const [direction, setDirection] = useState("long");
const [invest, setInvest] = useState("100");
const [lev, setLev] = useState("3");
// Recurring Basket
const [basket, setBasket] = useState([
{ symbol: "BTCUSDT", percent: 50 },
{ symbol: "ETHUSDT", percent: 30 },
{ symbol: "SOLUSDT", percent: 20 },
]);
const [basketAmount, setBasketAmount] = useState("100");
const [basketIntervalH, setBasketIntervalH] = useState("168");
const [minPx, setMinPx] = useState("");
const [maxPx, setMaxPx] = useState("");
const [gridNum, setGridNum] = useState("20");
// DCA fields
const [dcaInit, setDcaInit] = useState("10");
const [dcaSafety, setDcaSafety] = useState("10");
const [dcaStep, setDcaStep] = useState("0.5");
const [dcaMargMult, setDcaMargMult] = useState("1.5");
const [dcaMaxSafety, setDcaMaxSafety] = useState("8");
const [dcaTp, setDcaTp] = useState("1.0");
const [markPx, setMarkPx] = useState(0);
const [busy, setBusy] = useState(false);
useEffect(() => {
if (!symbol) { setMarkPx(0); return; }
(async () => {
try {
const p = await window.MobileAPI.loadMarkPrice(exchange, symbol);
setMarkPx(Number(p) || 0);
if (type === "grid" && (!minPx || !maxPx) && p > 0) {
setMinPx((p * 0.95).toPrecision(6));
setMaxPx((p * 1.05).toPrecision(6));
}
} catch {}
})();
}, [symbol, exchange, type]);
const investNum = parseFloat(invest) || 0;
const levNum = parseInt(lev) || 1;
const n = parseInt(gridNum) || 0;
const perLevelMargin = n > 0 ? investNum / n : 0;
const perLevelNotional = perLevelMargin * levNum;
const totalNotional = investNum * levNum;
const isLong = direction === "long";
let bulkLevels = 0;
if (type === "grid" && minPx && maxPx && n > 1 && markPx > 0) {
const lo = parseFloat(minPx), hi = parseFloat(maxPx), step = (hi - lo) / n;
for (let i = 0; i < n; i++) {
const p = lo + i * step;
if (isLong ? p > markPx : p < markPx) bulkLevels++;
}
}
const bulkNotional = bulkLevels * perLevelNotional;
let worstLoss = 0, liq = 0;
if (type === "grid" && investNum > 0 && markPx > 0 && minPx && maxPx) {
const lo = parseFloat(minPx), hi = parseFloat(maxPx);
const avgAccum = isLong ? (lo + markPx) / 2 : (hi + markPx) / 2;
const maxPos = totalNotional / avgAccum;
worstLoss = isLong ? maxPos * Math.max(0, avgAccum - lo) : maxPos * Math.max(0, hi - avgAccum);
const maint = 0.005;
liq = isLong ? avgAccum * (1 - (1 / levNum - maint)) : avgAccum * (1 + (1 / levNum - maint));
}
const submit = async () => {
if (busy) return;
setBusy(true);
try {
const config = { market: "futures" };
if (type === "grid") {
const lo = parseFloat(minPx), hi = parseFloat(maxPx);
if (!(lo > 0 && hi > lo && n >= 2)) throw new Error("Неверный диапазон");
config.min_price = lo; config.max_price = hi; config.grid_num = n;
} else if (type === "dca") {
config.initial_margin = parseFloat(dcaInit);
config.safety_margin = parseFloat(dcaSafety);
config.price_step_pct = parseFloat(dcaStep);
config.margin_multiplier = parseFloat(dcaMargMult) || 1.5;
config.max_safety_orders = parseInt(dcaMaxSafety);
config.tp_per_cycle_pct = parseFloat(dcaTp);
config.direction = direction;
} else if (type === "recurring") {
const total = basket.reduce((s, b) => s + (parseFloat(b.percent) || 0), 0);
if (Math.abs(total - 100) > 0.5) throw new Error("Сумма % в корзине должна быть 100, сейчас " + total.toFixed(1));
if (basket.length === 0) throw new Error("Добавь хотя бы один символ в корзину");
config.basket = basket;
config.amount_per_purchase = parseFloat(basketAmount);
config.interval_hours = parseInt(basketIntervalH);
config.market = "spot";
}
await window.MobileAPI.createLocalBot({
exchange,
symbol: (type === "recurring" ? "BASKET" : symbol.toUpperCase()),
bot_type: type,
direction: type === "recurring" ? "long" : direction,
investment_usdt: investNum,
leverage: type === "recurring" ? 1 : levNum,
config,
});
onCreated();
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e).slice(0, 100), err: true });
setBusy(false);
}
};
return (
e.stopPropagation()}>
Тип бота
{[["grid","Grid"],["dca","Smart-DCA"],["recurring","Basket"]].map(([k,l]) => (
setType(k)}>{l}
))}
Символ
setSymbol(e.target.value.toUpperCase())} placeholder="TONUSDT"/>
{markPx > 0 && (
Текущая цена: {fmtPx(markPx)}
)}
Направление
{["long","short","neutral"].map(d => (
setDirection(d)}>{d}
))}
Плечо
{[1,3,5,10,20,50].map(L => (
setLev(String(L))} style={{ flex: 1 }}>{L}x
))}
{type === "grid" && (
<>
)}
{type === "dca" && (
<>
)}
{type === "recurring" && window.DesktopExtras?.BasketCreateForm && (
)}
{/* Right column — live summary */}
Расчёт
Маржа/уровень
{fmt(perLevelMargin)} USDT
Нотионал/уровень
{fmt(perLevelNotional)} USDT {perLevelNotional < 7.5 ? "⚠" : ""}
Всего нотионал
{fmt(totalNotional)} USDT
{bulkNotional > 0 && (
Bulk-buy при старте
{fmt(bulkNotional, 0)} USDT ({bulkLevels} ур.)
)}
{worstLoss > 0 && (
Макс. убыток (out-of-range)
−{fmt(worstLoss, 0)} USDT
)}
{liq > 0 && (
Цена ликвидации (~)
{fmtPx(liq)}
)}
{(levNum > 5 || worstLoss > investNum) && (
⚠ {levNum > 5
? "Плечо " + levNum + "x высокое для Grid — на OKX рекомендуют 1-3x."
: "Макс. убыток " + fmt(worstLoss, 0) + " > инвестиций " + fmt(investNum, 0) + ". Снизьте плечо."}
)}
Отмена
{busy ?
);
};
// ═══════════════════════════════════════════════════════════════════════════════
// SPOT SCREEN
// ═══════════════════════════════════════════════════════════════════════════════
const SpotScreen = ({ exchange, exReady, pushToast, refreshTick }) => {
const [balances, setBalances] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
(async () => {
setLoading(true);
if (!exReady[exchange]) { setBalances([]); setLoading(false); return; }
try {
const r = await window.MobileAPI.loadSpotBalance(exchange);
// API может вернуть массив, или { balances: [...] }, или { error }, или null.
// Нормализуем строго в массив, чтобы reduce/map не падали.
let arr = [];
if (Array.isArray(r)) arr = r;
else if (r && Array.isArray(r.balances)) arr = r.balances;
else if (r && Array.isArray(r.data)) arr = r.data;
setBalances(arr);
} catch (e) {
console.warn("loadSpotBalance fail", e);
setBalances([]);
}
setLoading(false);
})();
}, [exchange, exReady, refreshTick]);
const total = (Array.isArray(balances) ? balances : []).reduce(
(s, b) => s + Number(b.valueUSDT || 0), 0,
);
if (!exReady[exchange]) {
return (
Нет API-ключа для {exchange.toUpperCase()}
Добавь ключ в «Настройки» чтобы видеть спотовый баланс.
);
}
return (
Спот-баланс ({exchange.toUpperCase()})
{fmt(total)} USDT
{balances.filter(b => Number(b.total) > 0).length} монет с ненулевым балансом
{loading ? (
{Array.from({ length: 5 }).map((_, i) =>
)}
) : balances.length === 0 ? (
) : (
Актив
Свободно
Locked
Total
~USDT
{balances.filter(b => Number(b.total) > 0).map((b, i) => (
{b.asset}
{fmt(b.free, 6)}
{fmt(b.locked, 6)}
{fmt(b.total, 6)}
${fmt(b.valueUSDT)}
))}
)}
);
};
// ═══════════════════════════════════════════════════════════════════════════════
// SIGNALS SCREEN
// ═══════════════════════════════════════════════════════════════════════════════
const SignalsScreen = ({ pushToast, refreshTick }) => {
const [tab, setTab] = useState("channels"); // channels | forwards | lent
const [channels, setChannels] = useState([]);
const [stats, setStats] = useState(null);
const [period, setPeriod] = useState(30);
const [loading, setLoading] = useState(true);
const [editing, setEditing] = useState(null);
const [addOpen, setAddOpen] = useState(false);
const reload = useCallback(async () => {
setLoading(true);
try {
const [c, s] = await Promise.all([
window.MobileAPI.listChannels(),
window.MobileAPI.loadChannelStats(period),
]);
setChannels(c || []);
setStats(s || []);
} catch {}
setLoading(false);
}, [period]);
useEffect(() => { reload(); }, [reload, refreshTick]);
const statsMap = useMemo(() => {
const m = {};
(stats || []).forEach(s => { m[s.channel_ref || s.label || ""] = s; });
return m;
}, [stats]);
return (
setTab("channels")}>
{channels.length}
setTab("lent")}>
setTab("forwards")}>
{tab === "lent" &&
}
{tab === "forwards" && }
{tab === "channels" && <>
Каналы сигналов {channels.length}
{[7, 30, 90].map(d => (
setPeriod(d)}>
{d}д
))}
setAddOpen(true)}>
Добавить канал
{loading ? (
) : channels.length === 0 ? (
Нет подключённых каналов
Открой «Настройки» → «Telegram» → «Подключить аккаунт», затем добавь каналы для парсинга сигналов.
) : (
{channels.map(c => {
const st = statsMap[c.channel_ref] || {};
const winrate = Number(st.winrate || 0);
const pnl = Number(st.total_pnl || 0);
return (
{c.label || c.channel_ref}
{c.channel_ref}
Winrate
= 50 ? "pos" : "neg")} style={{ fontSize: 16, fontWeight: 700 }}>
{winrate ? winrate.toFixed(1) + "%" : "—"}
Avg PnL
{st.avg_pnl != null ? (st.avg_pnl >= 0 ? "+" : "") + fmt(st.avg_pnl, 2) : "—"}
Total PnL
{pnl >= 0 ? "+" : ""}{fmt(pnl, 0)}
setEditing(c)}>
Настройка
);
})}
setEditing(null)}
onSaved={() => { setEditing(null); reload(); pushToast({ msg: "Сохранено", ok: true }); }}
onDeleted={() => { setEditing(null); reload(); pushToast({ msg: "Канал удалён", ok: true }); }}
pushToast={pushToast}
/>
)}
{addOpen && (
setAddOpen(false)}
onAdded={() => { setAddOpen(false); reload(); pushToast({ msg: "Канал добавлен", ok: true }); }}
pushToast={pushToast}
/>
)}
);
};
// ───────────────────── Channel Add Modal ─────────────────────
const ChannelAddModal = ({ onClose, onAdded, pushToast }) => {
const [ref, setRef] = useState("");
const [label, setLabel] = useState("");
const [busy, setBusy] = useState(false);
const save = async () => {
if (!ref.trim()) { pushToast({ msg: "Укажи @username или ID канала", err: true }); return; }
setBusy(true);
try {
await window.MobileAPI.addChannel(ref.trim(), label.trim());
onAdded();
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e).slice(0, 100), err: true });
setBusy(false);
}
};
return (
e.stopPropagation()}>
Канал (@username или -100…)
setRef(e.target.value)}
placeholder="@signals_premium" autoFocus/>
Можно использовать @username приватного/публичного канала или числовой ID вида -1001234567890. Listener бота должен быть подписан на этот канал.
Отмена
{busy ?
);
};
// ───────────────────── Channel Edit (per-channel settings) ─────────────────────
const ChannelEditModal = ({ channel, onClose, onSaved, onDeleted, pushToast }) => {
const [label, setLabel] = useState(channel.label || "");
const [active, setActive] = useState(channel.is_active !== false);
const [entry, setEntry] = useState(channel.default_entry_type || "signal");
const [sl, setSl] = useState(String(channel.default_sl_pct || ""));
const [busy, setBusy] = useState(false);
const save = async () => {
setBusy(true);
try {
const slNum = parseFloat(sl);
await window.MobileAPI.updateChannel(channel.id, {
label: label.trim(),
is_active: active,
default_entry_type: entry,
default_sl_pct: isFinite(slNum) && slNum > 0 ? slNum : null,
});
onSaved();
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e).slice(0, 100), err: true });
setBusy(false);
}
};
const remove = async () => {
if (!confirm(`Удалить канал ${channel.label || channel.channel_ref}? Сигналы из него больше не будут парситься.`)) return;
setBusy(true);
try {
await window.MobileAPI.removeChannel(channel.id);
onDeleted();
} catch (e) {
pushToast({ msg: "Ошибка удаления: " + (e.message || e).slice(0, 80), err: true });
setBusy(false);
}
};
return (
e.stopPropagation()}>
{channel.label || channel.channel_ref}
{channel.channel_ref}
Статус
setActive(true)}>● Активен
setActive(false)}>○ На паузе
Тип входа в сделки
setEntry("signal")}>
Как в сигнале
setEntry("market")}>
Всегда market
setEntry("limit")}>
Всегда лимит
«Как в сигнале» — если канал указал entry price, ставим лимит; иначе market.
«Всегда market» — игнорируем entry, входим по рынку.
«Всегда лимит» — если нет entry в сигнале, используем mark price.
Дефолтный SL для сигналов без стопа, %
setSl(e.target.value)}
placeholder="например 8" inputMode="decimal"/>
Применяется только когда в сигнале нет SL. Пусто = брать дефолт из общих настроек.
Удалить
Отмена
{busy ?
);
};
// ───────────────────── Forwards manager ─────────────────────
const ForwardsManager = ({ pushToast, channels }) => {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
const [dest, setDest] = useState("");
const [sourceId, setSourceId] = useState("");
const [busy, setBusy] = useState(false);
const reload = useCallback(async () => {
setLoading(true);
try {
const r = await window.MobileAPI.listForwards();
setItems(Array.isArray(r) ? r : []);
} catch {}
setLoading(false);
}, []);
useEffect(() => { reload(); }, [reload]);
const add = async () => {
if (!dest.trim()) { pushToast({ msg: "Укажи канал назначения", err: true }); return; }
setBusy(true);
try {
await window.MobileAPI.addForward(dest.trim(), sourceId || null);
setDest(""); setSourceId("");
await reload();
pushToast({ msg: "Перенаправление добавлено", ok: true });
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e).slice(0, 100), err: true });
}
setBusy(false);
};
const toggle = async (f) => {
try {
await window.MobileAPI.updateForward(f.id, !f.enabled);
await reload();
} catch (e) { pushToast({ msg: "Ошибка: " + (e.message || e), err: true }); }
};
const remove = async (f) => {
if (!confirm("Удалить перенаправление в " + (f.dest_channel_ref || "канал") + "?")) return;
try {
await window.MobileAPI.deleteForward(f.id);
await reload();
pushToast({ msg: "Удалено", ok: true });
} catch (e) { pushToast({ msg: "Ошибка: " + (e.message || e), err: true }); }
};
return (
Добавить перенаправление
Каждое распарсенное сообщение из выбранного источника будет автоматически переслано в канал/чат назначения с человеко-читаемой картой сигнала.
Источник
setSourceId(e.target.value)}>
— любой канал —
{(channels || []).map(c => (
{c.label || c.channel_ref}
))}
{busy ?
{loading ?
: items.length === 0 ? (
Нет перенаправлений
Добавь канал-назначение чтобы отслеживать все распарсенные сигналы в отдельном чате.
) : (
Назначение
Источник
Статус
Создан
Действия
{items.map(f => {
const src = (channels || []).find(c => c.id === f.source_channel_id);
return (
{f.dest_channel_ref}
{src ? (src.label || src.channel_ref) : любой }
{f.enabled
? ● включён
: ○ выключен }
{ago(f.created_at)}
toggle(f)}>
{f.enabled ? "Выкл" : "Вкл"}
remove(f)}>
🗑
);
})}
)}
);
};
// ═══════════════════════════════════════════════════════════════════════════════
// JOURNAL SCREEN
// ═══════════════════════════════════════════════════════════════════════════════
const JournalScreen = ({ exchange, exReady, refreshTick, pushToast }) => {
const [trades, setTrades] = useState([]);
const [filter, setFilter] = useState("all");
const [period, setPeriod] = useState("week");
const [search, setSearch] = useState("");
const [sourceFilter, setSourceFilter] = useState("");
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(true);
(async () => {
try {
const r = await window.MobileAPI.loadTrades({ status: filter === "all" ? null : filter, limit: 500 });
setTrades(r || []);
} catch {}
setLoading(false);
})();
}, [filter, period, refreshTick]);
// Фильтрация на клиенте по symbol + source
const filtered = useMemo(() => {
let r = trades;
if (search) r = r.filter(t => (t.symbol || "").toLowerCase().includes(search.toLowerCase()));
if (sourceFilter) r = r.filter(t => (t.source || t.signal_source || "") === sourceFilter);
return r;
}, [trades, search, sourceFilter]);
const sources = useMemo(() => {
const set = new Set();
trades.forEach(t => { const s = t.source || t.signal_source; if (s) set.add(s); });
return Array.from(set);
}, [trades]);
const exportCSV = () => {
const rows = [["id", "symbol", "side", "source", "entry", "exit", "qty", "pnl", "status", "opened", "closed"]];
filtered.forEach(t => {
rows.push([
t.id || "", t.symbol || "", t.side || "", t.source || t.signal_source || "",
t.entry_price || "", t.exit_price || "", t.qty || t.size || "",
t.pnl || "", t.status || "",
t.opened_at ? new Date(t.opened_at).toISOString() : "",
t.closed_at ? new Date(t.closed_at).toISOString() : "",
]);
});
const csv = rows.map(r => r.map(c => `"${String(c).replace(/"/g, '""')}"`).join(",")).join("\n");
const blob = new Blob(["" + csv], { type: "text/csv;charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = `trades_${new Date().toISOString().slice(0,10)}.csv`;
a.click();
setTimeout(() => URL.revokeObjectURL(url), 1000);
pushToast && pushToast({ msg: `Экспортировано ${filtered.length} сделок`, ok: true });
};
// Stats по отфильтрованным
const stats = useMemo(() => {
const closed = filtered.filter(t => t.status === "closed");
const wins = closed.filter(t => Number(t.pnl) > 0);
const totalPnl = closed.reduce((s, t) => s + Number(t.pnl || 0), 0);
return { total: filtered.length, closed: closed.length, wins: wins.length, winrate: closed.length > 0 ? wins.length / closed.length * 100 : 0, totalPnl };
}, [filtered]);
return (
Всего сделок
{stats.total}
{stats.closed} закрытых
Win Rate
= 50 ? "pos" : "neg")}>
{stats.winrate.toFixed(1)}%
{stats.wins} побед
Net PnL
{stats.totalPnl >= 0 ? "+" : ""}{fmt(stats.totalPnl)}
после комиссий
Экспорт CSV
{filtered.length} строк
Журнал сделок {filtered.length}
{loading ?
: filtered.length === 0 ? (
Нет сделок по фильтру
Попробуй убрать фильтр или сменить период.
) : (
Символ Источник Сторона
Вход
Выход
Размер
PnL
Открыта Статус
{filtered.map((t, i) => {
const pnl = Number(t.pnl || 0);
return (
{t.symbol}
{t.source || "-"} {t.side} {fmtPx(t.entry_price)}
{t.exit_price ? fmtPx(t.exit_price) : "—"}
{fmt(t.qty, 4)}
{t.exit_price ? ((pnl >= 0 ? "+" : "") + fmt(pnl)) : "—"}
{ago(t.opened_at)}
{t.status === "closed" && closed }
{t.status === "open" && open }
{t.status === "failed" && failed }
{!["closed","open","failed"].includes(t.status) && {t.status} }
);
})}
)}
);
};
// ═══════════════════════════════════════════════════════════════════════════════
// STATS SCREEN
// ═══════════════════════════════════════════════════════════════════════════════
const StatsScreen = ({ refreshTick }) => {
const [period, setPeriod] = useState(30);
const [tps, setTps] = useState(null);
const [slip, setSlip] = useState(null);
const [channels, setChannels] = useState(null);
const [busy, setBusy] = useState(true);
useEffect(() => {
setBusy(true);
(async () => {
try {
const [t, s, c] = await Promise.all([
window.MobileAPI.loadTpStats(period),
window.MobileAPI.loadSlippageStats(period),
window.MobileAPI.loadChannelStats(period),
]);
setTps(t); setSlip(s); setChannels(c || []);
} catch {}
setBusy(false);
})();
}, [period, refreshTick]);
const t = tps || {};
const total = Number(t.total || 0);
const tpHits = Array.isArray(t.tp_hits) ? t.tp_hits : [0,0,0];
const tpRates = Array.isArray(t.tp_rates) ? t.tp_rates : tpHits.map(h => total > 0 ? Math.round(h/total*1000)/10 : 0);
return (
Статистика
{[7, 30, 90, 365].map(d => (
setPeriod(d)}>
{d === 365 ? "1Y" : d + "д"}
))}
{total > 0 ? `Из ${total} сделок:` : "Нет закрытых сделок с TP/SL — серое для справки"}
{[0,1,2].map(i => (
0 ? "var(--d-success-dim)" : "var(--d-bg-3)",
borderRadius: 8, border: total > 0 ? "1px solid rgba(0,193,118,0.3)" : "1px solid var(--d-line)" }}>
TP{i+1}
0 ? "pos" : "")} style={{ fontSize: 22, fontWeight: 700,
color: total > 0 ? undefined : "var(--d-text-2)" }}>
{tpRates[i] || 0}%
{tpHits[i] || 0} из {total}
))}
0 ? "var(--d-danger-dim)" : "var(--d-bg-3)",
borderRadius: 8, border: total > 0 ? "1px solid rgba(255,71,89,0.3)" : "1px solid var(--d-line)",
display: "flex", justifyContent: "space-between", alignItems: "center" }}>
SL до TP1
стоп раньше первого тейка
0 ? "neg" : "")} style={{ fontSize: 22, fontWeight: 700,
color: total > 0 ? undefined : "var(--d-text-2)" }}>
{Number(t.sl_before_tp1_rate || 0)}%
Slippage анализ
{slip?.samples || 0} сделок
{slip && slip.samples > 0 ? (
<>
Потеряно
−{fmt(slip.total_slip_usdt, 2)}
Среднее
−{fmt(slip.avg_slip_per_trade, 2)}
% от объёма
{Number(slip.pct_of_volume || 0).toFixed(3)}%
{Array.isArray(slip.worst) && slip.worst.length > 0 && (
Худшие сделки:
{slip.worst.slice(0, 3).map((w, i) => (
{w.symbol}
−{fmt(w.slip)} ({Number(w.pct || 0).toFixed(3)}%)
))}
)}
) : (
Нет данных по slippage за период.
)}
{(!channels || channels.length === 0) ? (
Нет данных по каналам за период.
) : (
Канал Сделок Winrate Avg PnL R/R Total PnL
{channels.map((c, i) => (
{c.label || c.channel_ref || "—"}
{c.count || 0}
= 50 ? "pos" : "neg")} style={{ textAlign: "right" }}>{Number(c.winrate || 0).toFixed(1)}%
{Number(c.avg_pnl || 0) >= 0 ? "+" : ""}{fmt(c.avg_pnl, 2)}
{Number(c.rr || 0).toFixed(2)}
{Number(c.total_pnl || 0) >= 0 ? "+" : ""}{fmt(c.total_pnl, 0)}
))}
)}
);
};
// ═══════════════════════════════════════════════════════════════════════════════
// SETTINGS SCREEN
// ═══════════════════════════════════════════════════════════════════════════════
const SettingsScreen = ({ user, pushToast }) => {
const [tab, setTab] = useState("api");
return (
{[["api","API ключи бирж"],["telegram","Telegram"],["push","Push уведомления"],["account","Аккаунт"]].map(([k,l]) => (
setTab(k)}>{l}
))}
{tab === "api" &&
}
{tab === "telegram" && }
{tab === "push" && }
{tab === "account" && }
);
};
const SettingsApiKeys = ({ pushToast }) => {
const [exch, setExch] = useState("weex");
const [key, setKey] = useState("");
const [secret, setSecret] = useState("");
const [pass, setPass] = useState("");
const [ready, setReady] = useState(window.creds.readyMap());
useEffect(() => {
const upd = () => setReady(window.creds.readyMap());
window.addEventListener("creds-updated", upd);
return () => window.removeEventListener("creds-updated", upd);
}, []);
const save = async () => {
try {
await window.creds.save(exch, "default", { key, secret, pass });
pushToast({ msg: "Ключ сохранён", ok: true });
setKey(""); setSecret(""); setPass("");
} catch (e) { pushToast({ msg: "Ошибка: " + (e.message || e), err: true }); }
};
return (
Добавить API-ключ
Биржа
{["weex","okx","binance","bybit"].map(e => (
setExch(e)}>
{e.toUpperCase()} {ready[e] && "✓"}
))}
{(exch === "okx" || exch === "weex") && (
)}
Сохранить ключ
Подключённые биржи
{["weex","okx","binance","bybit"].map(e => (
{ready[e] ? "подключена" : "—"}
))}
{window.DesktopExtras?.MultiAccountManager && }
);
};
const SettingsTelegram = ({ pushToast }) => {
const [tg, setTg] = useState(null);
const [loading, setLoading] = useState(true);
const [wizardOpen, setWizardOpen] = useState(false);
const [disconnecting, setDisconnecting] = useState(false);
const refresh = useCallback(async () => {
setLoading(true);
try {
const r = await fetch("/api/me/telegram/status").then(x => x.json()).catch(() => ({}));
setTg(r || {});
} catch {}
setLoading(false);
}, []);
useEffect(() => { refresh(); }, [refresh]);
const disconnect = async () => {
if (!confirm("Отключить Telegram-аккаунт? Listener остановится и сигналы перестанут приходить.")) return;
setDisconnecting(true);
try {
await window.MobileAPI.tgDisconnect();
pushToast({ msg: "Telegram отключён", ok: true });
await refresh();
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e), err: true });
}
setDisconnecting(false);
};
if (loading) return
;
const connected = !!(tg?.tg_username || tg?.phone_masked);
return (
Telegram аккаунт
{connected ? (
<>
Статус
✓ подключён
Username
{tg.tg_username ? "@" + tg.tg_username : "—"}
Телефон
{tg.phone_masked || "—"}
{tg.is_listener_running != null && (
Listener
{tg.is_listener_running ? "● работает" : "○ не запущен"}
)}
{disconnecting ?
setWizardOpen(true)}>
Переподключить
) : (
<>
⚠ Telegram не подключён — сигналы из каналов не парсятся.
setWizardOpen(true)} style={{ width: "100%", justifyContent: "center", gap: 8 }}>
Подключить Telegram
)}
{wizardOpen && window.DesktopExtras?.TelegramConnectWizard && (
setWizardOpen(false)}
onDone={() => refresh()}
pushToast={pushToast}
/>
)}
Confirm-бот (опционально)
Confirm-бот пишет тебе в личку каждый распарсенный сигнал с inline-кнопками «Войти / Пропустить».
Полезно если хочешь подтверждать сделки руками вместо авто-режима.
Создаётся через
@BotFather , токен вводится в мобильной версии.
);
};
const SettingsPush = ({ pushToast }) => {
const [perm, setPerm] = useState("default");
const [status, setStatus] = useState({ subscriptions: 0, enabled: false });
const [busy, setBusy] = useState(false);
const [supported, setSupported] = useState(true);
const refresh = useCallback(async () => {
if (typeof Notification !== "undefined") setPerm(Notification.permission);
try {
const sup = window.MobileAPI.pushIsSupported ? await window.MobileAPI.pushIsSupported() : true;
setSupported(!!sup);
} catch {}
try {
const s = await window.MobileAPI.pushStatus();
setStatus(s || { subscriptions: 0, enabled: false });
} catch {}
}, []);
useEffect(() => { refresh(); }, [refresh]);
const enable = async () => {
setBusy(true);
try {
await window.MobileAPI.pushEnable();
await refresh();
pushToast({ msg: "Push включён — ты получишь уведомления о сигналах и сделках", ok: true });
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e).slice(0, 120), err: true });
}
setBusy(false);
};
const disable = async () => {
setBusy(true);
try {
await window.MobileAPI.pushDisable();
await refresh();
pushToast({ msg: "Push отключён", ok: true });
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e), err: true });
}
setBusy(false);
};
const test = async () => {
setBusy(true);
try {
await window.MobileAPI.pushTest();
pushToast({ msg: "Тест-уведомление отправлено — проверь центр уведомлений", ok: true });
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e), err: true });
}
setBusy(false);
};
const permPill = perm === "granted"
? { text: "✓ разрешено", color: "var(--d-success)" }
: perm === "denied"
? { text: "✕ запрещено", color: "var(--d-danger)" }
: { text: "не запрошено", color: "var(--d-text-2)" };
return (
Push уведомления
{!supported && (
⚠ Браузер не поддерживает Web Push. Установи как PWA или используй Chrome/Edge/Firefox.
)}
Permission
{permPill.text}
Подписок устройств
{status.subscriptions || 0}
Статус
{status.enabled ? "✓ активны" : "выключены"}
{!status.enabled ? (
{busy ? Включить push}
) : (
Отключить
)}
Отправить тест
Когда приходят пуши
🟢 Новый сигнал распарсен из канала
📊 Сделка открыта (entry price, размер)
🎯 TP / SL сработал — с PnL
🤖 Локальный бот: цикл завершён / ошибка / out-of-range
⚡ Storm mode — кто-то включил аварийную остановку
Подписка действует на это устройство/браузер. Чтобы получать на телефон — открой сайт с PWA на нём и нажми «Включить push» там.
);
};
const SettingsAccount = ({ user, pushToast }) => {
const [sendingVerify, setSendingVerify] = useState(false);
const sendVerify = async () => {
setSendingVerify(true);
try {
const r = await fetch("/api/auth/resend-verify", { method: "POST" });
if (!r.ok) throw new Error("HTTP " + r.status);
const j = await r.json();
if (j.already_verified) {
pushToast({ msg: "Email уже подтверждён ✓", ok: true });
} else if (j.sent === false) {
pushToast({ msg: "Письмо не отправлено (SMTP не настроен)", err: true });
} else {
pushToast({ msg: "Письмо отправлено — проверь почту", ok: true });
}
pushToast({ msg: "Письмо отправлено — проверь почту", ok: true });
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e), err: true });
}
setSendingVerify(false);
};
const logoutAll = async () => {
if (!confirm("Завершить все сессии (выйти везде)?")) return;
try {
await fetch("/api/auth/logout-all", { method: "POST" });
window.location.reload();
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e), err: true });
}
};
return (
Аккаунт
Email
{user?.email || "—"}
Тариф
{user?.plan_tier || "free"}
Email подтверждён
{user?.is_verified ? "✓ да" : "✕ нет"}
Роль
{user?.role || "user"}
{!user?.is_verified && (
{sendingVerify ?
)}
Безопасность
API-ключи бирж хранятся в БД с шифрованием Fernet. Telegram-сессия и push-подписки — изолированы per user.
Если подозреваешь компрометацию аккаунта — завершите все сессии:
Завершить все сессии
⚠ После выхода придётся заново залогиниться на всех устройствах. Telegram-listener останется работать — он не привязан к веб-сессии.
);
};
// ═══════════════════════════════════════════════════════════════════════════════
// ADMIN SCREEN
// ═══════════════════════════════════════════════════════════════════════════════
const AdminScreen = ({ user, pushToast, refreshTick }) => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [filter, setFilter] = useState("");
const [editUser, setEditUser] = useState(null);
const reload = useCallback(async () => {
setLoading(true);
try {
const r = await fetch("/api/admin/users").then(x => x.ok ? x.json() : []);
setUsers(Array.isArray(r) ? r : []);
} catch (e) {
pushToast({ msg: "Ошибка загрузки: " + (e.message || e), err: true });
}
setLoading(false);
}, [pushToast]);
useEffect(() => { reload(); }, [reload, refreshTick]);
if (user?.role !== "admin") {
return (
Доступ запрещён
Этот раздел доступен только администраторам.
);
}
const filtered = filter
? users.filter(u => (u.email || "").toLowerCase().includes(filter.toLowerCase()))
: users;
const stats = {
total: users.length,
verified: users.filter(u => u.is_verified).length,
admin: users.filter(u => u.role === "admin").length,
pro: users.filter(u => u.plan_tier === "pro" || u.plan_tier === "premium").length,
};
return (
Всего юзеров
{stats.total}
Верифицированных
{stats.verified}
{stats.total > 0 ? (stats.verified / stats.total * 100).toFixed(0) : 0}%
Pro / Premium
{stats.pro}
{loading ? (
) : filtered.length === 0 ? (
) : (
ID
Email
Роль
Тариф
Verified
Создан
Последний вход
Действия
{filtered.map(u => (
{u.id}
{(u.email || "?")[0].toUpperCase()}
{u.email}
{u.role === "admin"
? user }
{u.plan_tier || "free"}
{u.is_verified
? ✓
: — }
{ago(u.created_at)}
{u.last_login_at ? ago(u.last_login_at) : "—"}
setEditUser(u)}>
⚙ Изменить
))}
)}
{editUser && (
setEditUser(null)}
onSaved={() => { setEditUser(null); reload(); pushToast({ msg: "Сохранено", ok: true }); }}
onDeleted={() => { setEditUser(null); reload(); pushToast({ msg: "Юзер удалён", ok: true }); }}
pushToast={pushToast}
/>
)}
);
};
const AdminEditUserModal = ({ user, adminUser, onClose, onSaved, onDeleted, pushToast }) => {
const [role, setRole] = useState(user.role || "user");
const [planTier, setPlanTier] = useState(user.plan_tier || "free");
const [busy, setBusy] = useState(false);
const isSelf = user.id === adminUser.id;
const save = async () => {
setBusy(true);
try {
const r = await fetch(`/api/admin/users/${user.id}`, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ role, plan_tier: planTier }),
});
if (!r.ok) throw new Error(await r.text() || "HTTP " + r.status);
onSaved();
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e).slice(0, 120), err: true });
setBusy(false);
}
};
const remove = async () => {
if (isSelf) { pushToast({ msg: "Нельзя удалить себя", err: true }); return; }
if (!confirm(`Удалить юзера ${user.email}? Все его боты и подписки тоже удалятся.`)) return;
setBusy(true);
try {
const r = await fetch(`/api/admin/users/${user.id}`, { method: "DELETE" });
if (!r.ok) throw new Error(await r.text() || "HTTP " + r.status);
onDeleted();
} catch (e) {
pushToast({ msg: "Ошибка: " + (e.message || e).slice(0, 120), err: true });
setBusy(false);
}
};
return (
e.stopPropagation()}>
ID
{user.id}
Email
{user.email}
Verified
{user.is_verified ? "✓ да" : "нет"}
Роль
setRole("user")}>user
setRole("admin")}>admin
{isSelf && role !== "admin" && (
⚠ Нельзя снять у себя роль admin — бэкенд отклонит.
)}
Тариф
{["free", "pro", "premium"].map(t => (
setPlanTier(t)}>
{t}
))}
Удалить юзера
Отмена
{busy ?
);
};
// ───────────────────────── Регистрация ─────────────────────────
window.DesktopScreens = {
dashboard: DashboardScreen,
bots: BotsScreen,
spot: SpotScreen,
signals: SignalsScreen,
journal: JournalScreen,
stats: StatsScreen,
settings: SettingsScreen,
admin: AdminScreen,
};
})(); // конец IIFE-обёртки