{s.name}
))}
{!rows.length &&
);
}
function Movers({ coins, field, onPick }) {
const arr = coins.filter(c => c[field] != null);
const gain = [...arr].sort((a, b) => b[field] - a[field]).slice(0, 6);
const lose = [...arr].sort((a, b) => a[field] - b[field]).slice(0, 6);
const Col = ({ title, list, up }) => (
= 0 ? "50%" : undefined, right: s.ch24h < 0 ? "50%" : undefined, width: (Math.abs(s.ch24h) / mx * 50) + "%", height: "100%", background: chCol(s.ch24h), borderRadius: 5 }} />
{sgn(s.ch24h, 1)}
Нет данных по секторам.
}
{title}
{list.map((c, i) => (
onPick && onPick({ sym: c.symbol, name: c.name, ch: c[field], price: c.price, mcap: c.market_cap })}
style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 6px", borderRadius: 6, cursor: "pointer", fontSize: 12 }}>
{c.image && 
}
{c.symbol}
{sgn(c[field], 1)}
))}
| # | Монета | Цена | 1ч | 24ч | {embed !== "mobile" &&7д | }Объём 24ч |
|---|---|---|---|---|---|---|
| {c.rank || i + 1} | {c.image && |
{fmtPrice(c.price)} | {sgn(c.ch1h, 1)} | {sgn(c.ch24h, 1)} | {embed !== "mobile" &&{sgn(c.ch7d, 1)} | }{fmtBig(c.volume)} |
{n.source}
{CAT_RU[n.category] || n.category}
{langBadge(n.lang)}
{timeAgo(n.ts_ms)}
{n.title}
{n.summary && {n.summary}
}
);
}
function NewsList({ news, embed }) {
const [lang, setLang] = useState("all");
const list = (news || []).filter(n => lang === "all" || n.lang === lang);
const langs = [["all", "🌐 Все"], ["ru", "🇷🇺 Русские"], ["en", "🇬🇧 English"]];
const mob = embed === "mobile";
const Chip = ({ active, onClick, children }) => (
);
return (
{langs.map(([k, l]) => setLang(k)}>{l} )}
{list.length} новостей
{news ? "По фильтру ничего нет — смени язык/тему." : "Загружаем ленту…"}
) : (
<>
{!mob && list[0] && (
{list.slice(mob ? 0 : 3).map((n, i) =>
)}
{row.map((c, i) =>
{tabs.map(([k, l]) => (
))}
);
}
function Seg({ opts, val, onChange, embed }) {
return (
{opts.map(([k, l]) => (
))}
);
}
// ============================================================
// Главный компонент
// ============================================================
function MarketsView({ embed = "desktop" }) {
useStyleOnce();
const [tab, setTab] = useState("overview"); // overview | crypto | news | stocks
const [view, setView] = useState("bubbles"); // bubbles | heat
const [tf, setTf] = useState("ch24h");
const [sizeBy, setSizeBy] = useState("cap");
const [crypto, setCrypto] = useState(null);
const [stocks, setStocks] = useState(null);
const [glob, setGlob] = useState(null);
const [sectors, setSectors] = useState(null);
const [news, setNews] = useState(null);
const [loading, setLoading] = useState(true);
const [pick, setPick] = useState(null);
const loadAll = async () => {
const A = window.MobileAPI;
try {
if (tab === "stocks") {
const s = await A.loadMarketsStocks(); setStocks((s && s.stocks) || []);
} else if (tab === "news") {
const n = await A.loadMarketsNews().catch(() => null); if (n) setNews(n.news || []);
} else {
const [c, g, se] = await Promise.all([
A.loadMarketsCrypto(),
A.loadMarketsGlobal().catch(() => null),
A.loadMarketsSectors().catch(() => null),
]);
setCrypto((c && c.coins) || []); if (g) setGlob(g); if (se) setSectors(se.sectors || []);
if (tab === "overview") { const n = await A.loadMarketsNews().catch(() => null); if (n) setNews(n.news || []); }
}
} catch (e) { /* stale */ }
setLoading(false);
};
useEffect(() => { setLoading(true); loadAll(); const t = setInterval(loadAll, 60000); return () => clearInterval(t); /* eslint-disable-next-line */ }, [tab]);
const cField = tab === "stocks" ? "ch24h" : tf;
const cRaw = tab === "stocks" ? (stocks || []) : (crypto || []);
const byCap = [...(crypto || [])].filter(c => c[cField] != null).sort((a, b) => (b.market_cap || 0) - (a.market_cap || 0));
const items = [...cRaw].filter(c => c[cField] != null).sort((a, b) => (b.market_cap || Math.abs(b[cField]) || 0) - (a.market_cap || Math.abs(a[cField]) || 0));
const pad = embed === "mobile" ? 12 : 22;
const mob = embed === "mobile";
// производные метрики для «Обзора»
const up24 = (crypto || []).filter(c => c.ch24h >= 0).length;
const tot24 = (crypto || []).filter(c => c.ch24h != null).length || 1;
const avg24 = (crypto || []).reduce((s, c) => s + (c.ch24h || 0), 0) / tot24;
const regime = avg24 > 1.2 ? ["БЫЧИЙ", "var(--long,#16b979)"] : avg24 < -1.2 ? ["МЕДВЕЖИЙ", "var(--short,#ef4444)"] : ["НЕЙТРАЛЬНЫЙ", "#eab308"];
const topSector = [...(sectors || [])].filter(s => s.ch24h != null).sort((a, b) => b.ch24h - a.ch24h)[0];
const topGainer = [...(crypto || [])].filter(c => c.ch24h != null).sort((a, b) => b.ch24h - a.ch24h)[0];
const statRow = glob && (
Загружаем рынок…
}
{/* ---------- ОБЗОР ---------- */}
{tab === "overview" && (
<>
{/* «сегодня» strip — на мобиле горизонтальный скролл, чтобы текст не резался */}
СЕГОДНЯ
= 0.5 ? "var(--long,#16b979)" : "var(--short,#ef4444)"} sub={up24 + "↑ / " + (tot24 - up24) + "↓"} />
{statRow}
{(news || []).slice(0, 7).map((n, i) => (
{n.source}
{n.title}
{timeAgo(n.ts_ms)}
))}
{!news &&
Загружаем новости…
}
Данные фондового рынка временно недоступны. Обновится автоматически.
}
)}
Источники: CoinGecko · alternative.me · Yahoo Finance · RSS (Cointelegraph/CoinDesk/Decrypt). Данные справочные, не инвестрекомендация.
setPick(null)} style={{ position: "fixed", inset: 0, zIndex: 200, background: "rgba(0,0,0,.55)", display: "flex", alignItems: mob ? "flex-end" : "center", justifyContent: "center" }}>
)}
e.stopPropagation()} style={{ width: "100%", maxWidth: 430, background: "var(--bg-1,#111)", borderRadius: mob ? "16px 16px 0 0" : 16, border: "1px solid var(--border,#222)", padding: 18, animation: "mkUp .2s ease" }}>
{pick.name &&
{pick.mcap && }
{pick.sym}
setPick(null)} style={{ cursor: "pointer", color: "var(--text-3)", fontSize: 20 }}>✕
{pick.name}
}
ЦЕНА
{fmtPrice(pick.price)}
ИЗМЕНЕНИЕ
{sgn(pick.ch)}
КАПИТАЛИЗАЦИЯ
{fmtBig(pick.mcap)}
{label}
{value}
{sub && {sub}
}