// Senti brokerage — shared atoms & micro-components
// Loaded as a Babel script; exports go to window at bottom.
// Hide scrollbars while keeping scroll behavior — applies anywhere that
// uses overflow:auto/scroll inside a senti screen. Injected once.
if (typeof document !== 'undefined' && !document.getElementById('senti-no-scrollbar')) {
const s = document.createElement('style');
s.id = 'senti-no-scrollbar';
s.textContent = `
[data-screen-label] *,
[data-senti-noscrollbar] {
scrollbar-width: none;
-ms-overflow-style: none;
}
[data-screen-label] *::-webkit-scrollbar,
[data-senti-noscrollbar]::-webkit-scrollbar { display: none; width: 0; height: 0; }
@keyframes spin360 { to { transform: rotate(360deg); } }
`;
document.head.appendChild(s);
}
const SC = {
green: '#00B86B',
greenBright: '#00D17A',
greenDeep: '#006B3F',
greenSoft: '#C9F4DB',
greenWash: '#EEFAF2',
lime: '#C8FF4D',
ink1000: '#0E1413',
ink900: '#161D1B',
ink800: '#1F2725',
ink700: '#2A3331',
ink500: '#6B7672',
ink400: '#95A09C',
ink300: '#C7CFCC',
ink200: '#E4E9E6',
ink100: '#F1F4F2',
ink50: '#F7F8F6',
paper: '#FFFFFF',
danger: '#DC3232',
fontDisplay: "'Geist', 'DM Sans', system-ui, sans-serif",
fontMono: "'Geist Mono', 'JetBrains Mono', ui-monospace, monospace",
};
// ──────────────────────────────────────────────────────────────
// i18n — Russian primary, English fallback
// ──────────────────────────────────────────────────────────────
const TR = {
ru: {
hi: 'Доброе утро',
portfolio: 'Портфель',
portfolioTab: 'Портфель',
home: 'Главная',
menu: 'Меню',
orders: 'Приказы',
trades: 'Сделки',
totalBalance: 'Всего на счёте',
todayChange: 'За сегодня',
buy: 'Купить',
sell: 'Продать',
exchange: 'Обмен',
withdraw: 'Вывод',
topUp: 'Пополнить',
withdrawLong: 'Вывести',
assets: 'Активы',
markets: 'Рынки',
ideas: 'Идеи',
investIdeas: 'Инвестиционные идеи',
history: 'История',
profile: 'Профиль',
seeAll: 'Все',
localMarket: 'Кыргызский рынок',
globalCFD: 'Мировые акции · CFD',
crypto: 'Криптовалюта',
forex: 'Валюта',
allocation: 'Структура портфеля',
insight: 'Совет на сегодня',
moversToday: 'Сегодня в движении',
watchlist: 'Список наблюдения',
overview: 'Обзор',
dayPnL: '+4 280 с сегодня',
insightText: 'Ваш портфель растёт третий день подряд. Лидер — NVDA, +2,3%.',
quickTrade: 'Быстрая сделка',
chart7d: '7 дней',
chart1m: '1 мес',
chart1y: '1 год',
welcomeBack: 'С возвращением',
deposits: 'Депозит',
learn: 'Обучение',
education: 'Учиться',
educationCard: 'Узнайте, как работают CFD',
educationSub: '3 минуты на чтение',
news: 'Новости',
soms: 'сом',
commodities: 'Товары',
fx: 'Fx',
chat: 'Чат',
},
en: {
hi: 'Good morning',
portfolio: 'Portfolio',
portfolioTab: 'Portfolio',
home: 'Home',
menu: 'Menu',
orders: 'Orders',
trades: 'Trades',
totalBalance: 'Total balance',
todayChange: 'Today',
buy: 'Buy',
sell: 'Sell',
exchange: 'Exchange',
withdraw: 'Withdraw',
topUp: 'Top up',
withdrawLong: 'Withdraw',
assets: 'Assets',
markets: 'Markets',
ideas: 'Ideas',
investIdeas: 'Investment ideas',
history: 'History',
profile: 'Profile',
seeAll: 'All',
localMarket: 'Kyrgyz market',
globalCFD: 'Global stocks · CFD',
crypto: 'Crypto',
forex: 'Forex',
allocation: 'Portfolio mix',
insight: 'Today',
moversToday: 'Today\u2019s movers',
watchlist: 'Watchlist',
overview: 'Overview',
dayPnL: '+4,280 KGS today',
insightText: 'Your portfolio is up three days running. Top mover — NVDA, +2.3%.',
quickTrade: 'Quick trade',
chart7d: '7d',
chart1m: '1m',
chart1y: '1y',
welcomeBack: 'Welcome back',
deposits: 'Deposit',
learn: 'Learn',
education: 'Learn',
educationCard: 'How CFDs work',
educationSub: '3 min read',
news: 'News',
soms: 'KGS',
commodities: 'Commodities',
fx: 'Fx',
chat: 'Chat',
},
};
const t = (lang, key) => (TR[lang] && TR[lang][key]) || TR.en[key] || key;
// ──────────────────────────────────────────────────────────────
// Money formatter — KGS with thousands separator, tabular figures
// fmtKGS(value, opts?) -> '248 420,50 с'
// ──────────────────────────────────────────────────────────────
function fmtKGS(value, { decimals = 2, sign = false } = {}) {
const negative = value < 0;
const abs = Math.abs(value);
const [whole, dec] = abs.toFixed(decimals).split('.');
const w = whole.replace(/\B(?=(\d{3})+(?!\d))/g, '\u202F'); // thin space
const signStr = sign ? (negative ? '−' : '+') : (negative ? '−' : '');
return decimals ? `${signStr}${w},${dec}` : `${signStr}${w}`;
}
function fmtUSD(value, { decimals = 2, sign = false } = {}) {
const negative = value < 0;
const abs = Math.abs(value);
const [whole, dec] = abs.toFixed(decimals).split('.');
const w = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
const signStr = sign ? (negative ? '−' : '+') : (negative ? '−' : '');
return decimals ? `${signStr}$${w}.${dec}` : `${signStr}$${w}`;
}
// ──────────────────────────────────────────────────────────────
// KGS money display — large number, sub "с" symbol, tabular
// ──────────────────────────────────────────────────────────────
function MoneyKGS({ value, size = 48, weight = 600, color, decimals = 2, suffix = 'с', monoOnly = false }) {
const formatted = fmtKGS(value, { decimals });
return (
{formatted}
{suffix}
);
}
// ──────────────────────────────────────────────────────────────
// Lucide-style icons
// ──────────────────────────────────────────────────────────────
function Icon({ name, size = 24, color = 'currentColor', strokeWidth = 1.75 }) {
const paths = {
home: <>,
chart: <>,
swap: <>,
wallet: <>,
user: <>,
bell: <>,
search: <>,
plus: <>,
minus: <>,
arrUp: <>,
arrDn: <>,
upload: <>,
chat: <>,
commodity:<>,
news: <>,
arrR: <>,
arrRup: <>,
arrRdn: <>,
chevR: <>,
chevL: <>,
chevD: <>,
chevU: <>,
eye: <>,
eyeOff: <>,
sliders: <>,
spark: <>,
info: <>,
book: <>,
btc: <>,
coin: <>,
qr: <>,
download: <>,
flag: <>,
layers: <>,
target: <>,
sparkles: <>,
flame: <>,
grid: <>,
settings: <>,
star: <>,
};
return (
);
}
// ──────────────────────────────────────────────────────────────
// Sparkline — tiny SVG line chart for asset rows
// ──────────────────────────────────────────────────────────────
function Sparkline({ data, width = 64, height = 22, color, strokeWidth = 1.5, fill = false }) {
if (!data || data.length < 2) return null;
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const pad = 1;
const step = (width - pad * 2) / (data.length - 1);
const pts = data.map((v, i) => [pad + i * step, pad + (1 - (v - min) / range) * (height - pad * 2)]);
const d = 'M' + pts.map(p => p.map(n => n.toFixed(2)).join(',')).join(' L');
const last = data[data.length - 1], first = data[0];
const up = last >= first;
const stroke = color || (up ? SC.green : SC.danger);
const gradId = `spg-${Math.random().toString(36).slice(2, 9)}`;
const areaPath = `${d} L${pts[pts.length-1][0]},${height} L${pts[0][0]},${height} Z`;
return (
);
}
// ──────────────────────────────────────────────────────────────
// Big chart — portfolio value over time, with gradient area
// ──────────────────────────────────────────────────────────────
function BigChart({ data, width = 600, height = 200, color = SC.green, fillColor, showDot = true, padX = 0, padY = 18 }) {
if (!data || data.length < 2) return null;
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const step = (width - padX * 2) / (data.length - 1);
const pts = data.map((v, i) => [padX + i * step, padY + (1 - (v - min) / range) * (height - padY * 2)]);
const d = 'M' + pts.map(p => p.map(n => n.toFixed(2)).join(',')).join(' L');
const lastPt = pts[pts.length - 1];
const gradId = `bcg-${Math.random().toString(36).slice(2, 9)}`;
const areaPath = `${d} L${lastPt[0]},${height} L${pts[0][0]},${height} Z`;
return (
);
}
// ──────────────────────────────────────────────────────────────
// CandleChart helpers
// ──────────────────────────────────────────────────────────────
function _niceStep(range, steps) {
const raw = range / (steps || 4);
const exp = Math.floor(Math.log10(raw));
const f = raw / Math.pow(10, exp);
const nice = f < 1.5 ? 1 : f < 3 ? 2 : f < 7 ? 5 : 10;
return nice * Math.pow(10, exp);
}
function _fmtAxisPrice(p) {
if (p >= 100000) return `${(p / 1000).toFixed(0)}k`;
if (p >= 10000) return `${(p / 1000).toFixed(1)}k`;
if (p >= 1000) return p.toFixed(0);
if (p >= 10) return p.toFixed(2);
if (p >= 1) return p.toFixed(3);
return p.toFixed(5);
}
function _fmtCandleDate(ts, iv) {
const d = new Date(ts);
const mo = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
if (iv === '1m' || iv === '5m' || iv === '15m' || iv === '30m' || iv === '1h') {
return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
}
if (iv === '4h') return `${d.getDate()} ${mo[d.getMonth()]}`;
if (iv === '1d') return `${d.getDate()} ${mo[d.getMonth()]}`;
if (iv === '1w') return `${mo[d.getMonth()]} '${String(d.getFullYear()).slice(2)}`;
return `${d.getDate()}/${d.getMonth() + 1}`;
}
// ──────────────────────────────────────────────────────────────
// CandleChart — OHLCV candlestick chart with grid and labels
// data: [{t, o, h, l, c, v}] interval: '1m'|'1h'|'4h'|'1d'|'1w'
// ──────────────────────────────────────────────────────────────
function CandleChart({ data = [], loading = false, height = 200, dark = false, noDataLabel = 'Нет данных', interval = '1d' }) {
const containerRef = React.useRef(null);
const [svgW, setSvgW] = React.useState(360);
React.useEffect(() => {
const el = containerRef.current;
if (!el) return;
const upd = () => setSvgW(el.getBoundingClientRect().width || 360);
upd();
const obs = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(upd) : null;
if (obs) obs.observe(el);
return () => obs && obs.disconnect();
}, []);
const lblColor = dark ? 'rgba(255,255,255,0.38)' : '#9CA3AF';
const gridStroke = dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.07)';
const UP = '#00B86B', DN = '#EF4444';
const spinner = (
);
if (loading) return spinner;
if (!data || data.length < 2) {
return (
{noDataLabel}
);
}
const mR = 44, mT = 8, mB = 22;
const chartW = svgW - mR;
const chartH = height - mT - mB;
const n = data.length;
const slotW = chartW / n;
const cW = Math.max(1.5, Math.min(slotW * 0.65, 14));
// Price scale with padding
const maxP = Math.max(...data.map(d => d.h));
const minP = Math.min(...data.map(d => d.l));
const pr = maxP - minP || maxP * 0.01 || 1;
const pad = pr * 0.07;
const pMax = maxP + pad, pMin = minP - pad;
const pR = pMax - pMin;
const xOf = i => (i + 0.5) * slotW;
const yOf = v => mT + (1 - (v - pMin) / pR) * chartH;
// Horizontal price levels
const step = _niceStep(pR, 4);
const firstLvl = Math.ceil(pMin / step) * step;
const priceLvls = [];
for (let p = firstLvl; p <= pMax; p += step) {
const pv = parseFloat(p.toPrecision(10));
if (yOf(pv) >= mT && yOf(pv) <= mT + chartH) priceLvls.push(pv);
}
// Date marks every 10 candles
const dateMarks = [];
for (let i = 9; i < n; i += 10) dateMarks.push(i);
return (
);
}
// Keep PriceChart as alias for backward-compat (replaced by CandleChart)
const PriceChart = CandleChart;
// ──────────────────────────────────────────────────────────────
// Delta pill — "+1.2%" / "−0.4%" — green / red
// ──────────────────────────────────────────────────────────────
function DeltaPill({ value, size = 'sm', mode = 'soft' }) {
// value as percent number, e.g. 1.2 or -0.4
const up = value >= 0;
const colorFg = up ? SC.greenDeep : '#8E1F1F';
const colorBg = up ? SC.greenSoft : '#FBE0E0';
const sizes = { sm: { fs: 12, py: 3, px: 8, ai: 10 }, md: { fs: 13, py: 4, px: 10, ai: 12 } };
const s = sizes[size];
const styles = mode === 'soft'
? { background: colorBg, color: colorFg }
: mode === 'ghost'
? { background: 'transparent', color: colorFg }
: { background: up ? SC.green : SC.danger, color: '#fff' };
return (
{(up ? '' : '−')}{Math.abs(value).toFixed(value === Math.floor(value) ? 1 : Math.abs(value) < 1 ? 2 : 1)}%
);
}
// ──────────────────────────────────────────────────────────────
// Asset logo URLs — real logos from public CDNs
// ──────────────────────────────────────────────────────────────
const ASSET_IMG_URLS = {
// Crypto — cryptocurrency-icons (open-source, jsdelivr CDN)
BTC: 'https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/btc.svg',
ETH: 'https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/eth.svg',
BNB: 'https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/bnb.svg',
SOL: 'https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/sol.svg',
XRP: 'https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/xrp.svg',
ADA: 'https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/ada.svg',
DOGE: 'https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/doge.svg',
USDT: 'https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/usdt.svg',
USDC: 'https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/usdc.svg',
// CFD Stocks — Financial Modeling Prep (stable CDN)
AAPL: 'https://financialmodelingprep.com/image-stock/AAPL.png',
TSLA: 'https://financialmodelingprep.com/image-stock/TSLA.png',
NVDA: 'https://financialmodelingprep.com/image-stock/NVDA.png',
GOOGL: 'https://financialmodelingprep.com/image-stock/GOOGL.png',
AMZN: 'https://financialmodelingprep.com/image-stock/AMZN.png',
META: 'https://financialmodelingprep.com/image-stock/META.png',
MSFT: 'https://financialmodelingprep.com/image-stock/MSFT.png',
JPM: 'https://financialmodelingprep.com/image-stock/JPM.png',
AMD: 'https://financialmodelingprep.com/image-stock/AMD.png',
WMT: 'https://financialmodelingprep.com/image-stock/WMT.png',
// KG Stocks — official bank/company logos
KICB: 'https://kicb.net/local/templates/kicb/kicb_html/html/images/general/logos/logo-small.svg',
OPTB: 'https://optimabank.kg/images/design/optima24logo.webp',
RSKS: 'https://eldik.kg/images/Logo.png',
// Forex / Currencies — country flags (flagcdn.com)
USD: 'https://flagcdn.com/w40/us.png',
EUR: 'https://flagcdn.com/w40/eu.png',
GBP: 'https://flagcdn.com/w40/gb.png',
JPY: 'https://flagcdn.com/w40/jp.png',
RUB: 'https://flagcdn.com/w40/ru.png',
CNY: 'https://flagcdn.com/w40/cn.png',
KZT: 'https://flagcdn.com/w40/kz.png',
KGS: 'https://flagcdn.com/w40/kg.png',
};
// Commodity inline SVG icons — from capital.com (embedded as data URIs)
const COMMODITY_SVG = {
GOLD: `data:image/svg+xml,`,
SILV: `data:image/svg+xml,`,
XPT: `data:image/svg+xml,`,
XPD: `data:image/svg+xml,`,
OIL: `data:image/svg+xml,`,
BRENT: `data:image/svg+xml,`,
WTI: `data:image/svg+xml,`,
NATGAS:`data:image/svg+xml,`,
COPP: `data:image/svg+xml,`,
};
// KG stock colors (brand-matched)
const KG_PALETTES = {
KCEL: ['#0056A2', '#fff'], // Кыргызтелеком — blue
BKAI: ['#003980', '#fff'], // Банк Кыргызстана — navy
KICB: ['#CC0000', '#fff'], // KICB — red
AKMB: ['#1B7A34', '#fff'], // Айыл Банк — green
OPTB: ['#D4282A', '#fff'], // Оптима Банк — crimson
RSKS: ['#1B3A7A', '#fff'], // РСК Банк — dark navy
ELST: ['#00427A', '#F4C400'], // Электрические станции — blue/yellow
BKKY: ['#1B5E20', '#fff'], // Бакай Банк — forest green
};
// ──────────────────────────────────────────────────────────────
// Ticker logo — real images with letter fallback
// ──────────────────────────────────────────────────────────────
function TickerLogo({ symbol, size = 40, palette }) {
const [imgErr, setImgErr] = React.useState(false);
// Normalize symbol (strip trading pair suffixes)
const sym = symbol ? symbol.replace(/USDT$|USD$/, '') || symbol : '';
const br = Math.round(size * 0.28);
const url = ASSET_IMG_URLS[sym] || ASSET_IMG_URLS[symbol];
const commSvg = COMMODITY_SVG[sym] || COMMODITY_SVG[symbol];
// Real image (crypto, CFD stocks, forex flags)
if (url && !imgErr) {
const isFlag = ['USD','EUR','GBP','JPY','RUB','CNY','KZT','KGS'].includes(sym);
const isCrypto = ['BTC','ETH','BNB','SOL','XRP','ADA','DOGE','USDT','USDC'].includes(sym);
return (
setImgErr(true)}
alt={sym}
style={{
width: isFlag ? '100%' : isCrypto ? '90%' : '80%',
height: isFlag ? '100%' : isCrypto ? '90%' : '80%',
objectFit: isFlag ? 'cover' : 'contain',
display: 'block',
}}
/>
);
}
// Commodity SVG icon
if (commSvg) {
return 
;
}
// KG stocks — styled initials with brand colors
const kgP = KG_PALETTES[sym] || KG_PALETTES[symbol];
const fallbackP = palette || kgP || [SC.ink100, SC.ink1000];
const INITIALS = {
KCEL:'KT', BKAI:'BK', KICB:'KB', AKMB:'АБ', OPTB:'ОБ', RSKS:'РСК', ELST:'ЭС', BKKY:'ББ',
GOLD:'Au', SILV:'Ag', XPT:'Pt', XPD:'Pd', OIL:'Oil', WTI:'WTI', BRENT:'Br', NATGAS:'NG', COPP:'Cu',
};
const initial = INITIALS[sym] || INITIALS[symbol] || (sym || symbol || '?').slice(0, 2);
return (
2 ? size * 0.32 : size * 0.42,
letterSpacing: '-0.03em',
}}>{initial}
);
}
// ──────────────────────────────────────────────────────────────
// Allocation strip — stacked horizontal bar of portfolio segments
// segments: [{ id, label, pct, color }]
// ──────────────────────────────────────────────────────────────
function AllocationStrip({ segments, height = 12, gap = 3, showLabels = true, labelLang = 'ru' }) {
return (
{segments.map((s, i) => (
))}
{showLabels && (
{segments.map((s, i, arr) => (
))}
)}
);
}
// ──────────────────────────────────────────────────────────────
// Asset row — used in holdings lists
// ──────────────────────────────────────────────────────────────
function AssetRow({ symbol, name, price, priceCcy = '$', change, sparkData, qty, dark = false, last = false, onClick, badge }) {
const textCol = dark ? '#fff' : SC.ink1000;
const subCol = dark ? 'rgba(255,255,255,0.5)' : SC.ink500;
const border = dark ? 'rgba(255,255,255,0.07)' : SC.ink200;
return (
{symbol}
{badge && {badge}}
{name}
{sparkData &&
}
{typeof price === 'number' ? `${priceCcy}${price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : price}
{qty != null && qty > 0 && typeof price === 'number' && price > 0 && (
{qty % 1 === 0 ? qty : qty < 0.01 ? qty.toFixed(6) : qty < 1 ? qty.toFixed(4) : qty.toFixed(2)} × {priceCcy}{(qty * price).toLocaleString('en-US', { maximumFractionDigits: 0 })}
)}
);
}
// ──────────────────────────────────────────────────────────────
// Pill button — primary / dark / outline / soft
// ──────────────────────────────────────────────────────────────
function Pill({ children, variant = 'primary', size = 'md', arrow = false, full = false, onClick, style = {}, icon }) {
const sizes = { sm: { h: 36, px: 14, fs: 13 }, md: { h: 48, px: 22, fs: 15 }, lg: { h: 56, px: 28, fs: 17 } };
const s = sizes[size];
const variants = {
primary: { bg: SC.green, color: '#fff' },
dark: { bg: SC.ink1000, color: '#fff' },
outline: { bg: 'transparent', color: SC.ink1000, border: `1.5px solid ${SC.ink1000}` },
outlineLight: { bg: 'transparent', color: '#fff', border: `1.5px solid rgba(255,255,255,0.3)` },
soft: { bg: SC.ink100, color: SC.ink1000 },
softDark: { bg: 'rgba(255,255,255,0.08)', color: '#fff' },
ghost: { bg: 'transparent', color: SC.ink1000 },
};
const v = variants[variant];
return (
);
}
// ──────────────────────────────────────────────────────────────
// Senti S logo glyph — matches design system /assets/logo-s.svg
// ──────────────────────────────────────────────────────────────
function SentiLogo({ size = 32, color = SC.green, fg = '#fff' }) {
return (
);
}
// ──────────────────────────────────────────────────────────────
// Senti horizontal wordmark — S tile + "Senti" — design system lockup
// ──────────────────────────────────────────────────────────────
function SentiWordmark({ height = 28, color = SC.green, textColor }) {
const width = height * 3.4;
const tc = textColor || SC.ink1000;
return (
);
}
Object.assign(window, {
SC, TR, t, fmtKGS, fmtUSD, MoneyKGS, Icon, Sparkline, BigChart, CandleChart, PriceChart,
DeltaPill, TickerLogo, AllocationStrip, AssetRow, Pill, SentiLogo, SentiWordmark,
});