;(function () {
/* TradePage — the trading surface for the Leveraged Trade sub-app.
Top of page: a featured-instrument hero (price, TVChart area chart, range
tabs, Sell/Buy CTAs). Below: a category filter row with a sort cycle pill,
then a full-width instrument list. Tapping a list row promotes the
instrument to the hero. Tapping Sell/Buy on the hero opens an order-ticket
sheet that overlays the page. The page renders the scrollable body only —
shell handles the top bar and bottom nav.
Data flow: all symbol prices, sparks and bid/ask come from the TradeStore
via window.useAllSymbols / window.useSymbol — ticking live as the engine
pushes updates. Order placement dispatches through window.useTradeMutators
so the open positions, portfolio totals and home dashboard all stay in
sync with what happens on this page. */
/* Generate N deterministic random OHLC candles for a symbol. Used to
give a recognisable chart shape to instruments that don't have a
live tick feed (everything outside the dummy-feed eight). The seed
is a small string-hash of the symbol id so each instrument has its
own consistent shape across renders, but two non-tick symbols don't
share the same chart. The walk converges to the symbol's current
bid so the rendered candles read as a plausible recent history. */
function hashString(s) {
let h = 2166136261;
for (let i = 0; i < s.length; i++) {
h ^= s.charCodeAt(i);
h = Math.imul(h, 16777619);
}
return h >>> 0;
}
function makeStaticCandles(sym, count) {
const seed0 = hashString(sym.sym || 'x');
let seed = seed0;
/* xorshift32 for a cheap deterministic 0..1 stream. */
const rand = () => {
seed ^= seed << 13;
seed ^= seed >>> 17;
seed ^= seed << 5;
seed >>>= 0;
return seed / 4294967296;
};
const target = sym.bid;
/* Per-candle volatility scaled to the instrument's typical price
scale — 0.4% of price for forex/indices/stocks/crypto, slightly
wider for low-priced silver/oil so wicks are visible. */
const scale = sym.cat === 'commodities' && (sym.sym === 'XAGUSD' || sym.sym === 'WTI') ? 0.006 : 0.004;
/* Start the walk slightly off-target so it can wander toward `bid`. */
let close = target * (1 + (rand() - 0.5) * scale * 4);
const candles = [];
const now = Math.floor(Date.now() / 1000);
for (let i = 0; i < count; i++) {
const open = close;
/* Drift gently toward the target so the last candle lands near
the displayed bid; magnitude grows with i so the convergence
feels organic rather than monotonic. */
const driftToTarget = (target - open) * (i / count) * 0.4;
const noise = (rand() - 0.5) * open * scale;
close = open + driftToTarget + noise;
const wickHigh = open * scale * rand() * 0.6;
const wickLow = open * scale * rand() * 0.6;
const high = Math.max(open, close) + wickHigh;
const low = Math.min(open, close) - wickLow;
candles.push({
time: now - (count - 1 - i) * 60,
open, high, low, close,
});
}
/* Snap the last candle's close to the displayed bid so the chart
terminates exactly where the price label says it does. */
candles[candles.length - 1].close = target;
candles[candles.length - 1].high = Math.max(candles[candles.length - 1].high, target);
candles[candles.length - 1].low = Math.min(candles[candles.length - 1].low, target);
return candles;
}
/* ── Star icon (watchlist toggle) ──────────────────────────────────────────
Outline when off, filled gold when on. Stroke 1.6 to match other glyphs. */
const StarIcon = ({ on }) => (
);
/* Plain X glyph for the order-ticket close button. */
const CloseIcon = () => (
);
/* Tiny chevron used by the sort cycle pill. */
const ChevDown = () => (
);
/* ── Category filter pills + sort cycle ────────────────────────────────── */
const CATEGORIES = [
['all', 'All'],
['forex', 'Forex'],
['indices', 'Indices'],
['commodities', 'Commodities'],
['crypto', 'Crypto'],
['stocks', 'Stocks'],
];
const SORT_LABELS = ['Top', 'Movers', 'A–Z'];
const FilterRow = ({ category, setCategory, sortIdx, cycleSort }) => {
/* Scroll-aware mask: only fade the LEFT edge once the user has
scrolled past the start. When at scrollLeft=0 the "All" pill is
pinned to the left edge and shouldn't be partially faded. The
right edge always fades because the static "Top" sort button
sits there and pills crossing under it would otherwise cut off
mid-letter. */
const scrollRef = React.useRef(null);
const [scrolled, setScrolled] = React.useState(false);
const onScroll = React.useCallback(() => {
const el = scrollRef.current;
if (!el) return;
setScrolled(el.scrollLeft > 4);
}, []);
/* Build mask-image string. Left fade only if scrolled away from start. */
const leftStop = scrolled ? '12px' : '0px';
const rightFadeWidth = '28px';
const mask = `linear-gradient(to right, transparent 0%, black ${leftStop}, black calc(100% - ${rightFadeWidth}), transparent 100%)`;
return (
{/* Sort cycle — visual only; cycles through the three labels. */}
);
};
/* ── Hero card (featured instrument) ──────────────────────────────────── */
/* Range tabs are visual only — the chart renders a fixed 20-candle
window regardless of which one is selected. Compact labels per the
user's spec: 1m / 5m / 1h / 1d. */
const RANGES = ['1m', '5m', '1h', '1d'];
const HeroCard = ({ sym, watched, toggleWatch, range, setRange, openTicket, onExpand }) => {
const positive = sym.change >= 0;
const changeColor = positive ? colors.green : colors.red;
const changeSign = positive ? '+' : '−';
const changeText = `${positive ? '↑' : '↓'} ${changeSign}${Math.abs(sym.change).toFixed(2)}%`;
/* Translate the rolling spark into TVChart's { time, value } shape. The lib
just needs strictly increasing time values; spacing them 5s apart matches
the tick cadence well enough for a smooth area. Memoized on the spark
reference so the chart only re-pushes on actual data change. */
const chartData = React.useMemo(() => {
const arr = sym && sym.spark ? sym.spark : [];
const now = Math.floor(Date.now() / 1000);
return arr.map((v, i) => ({
time: now - (arr.length - 1 - i) * 5,
value: v,
}));
}, [sym && sym.spark]);
/* Static candles for symbols without a live tick feed. The dummy
feed populates `sym.ohlc` for its 8 instruments; for everything
else we synthesise 20 deterministic random candles seeded by the
symbol id so the chart has a stable, recognisable shape across
re-renders even though no price is moving. */
const staticOhlc = React.useMemo(() => {
if (!sym) return null;
if (sym.realFeed === 'dummy') return null; // live feed wins
return makeStaticCandles(sym, 20);
}, [sym && sym.sym, sym && sym.bid]);
return (
{/* Header row: mark + names left, star button right. */}
{sym.sym}
{sym.name}
{/* Big bid + change line. */}
{window.formatPrice(sym.bid, sym)}
{changeText}
{/* TradingView Lightweight Chart. Negative side margin so the area
bleeds slightly past the card padding for a fuller look. */}
{/* Range tabs — visual only. */}
{RANGES.map((r) => {
const active = range === r;
return (
);
})}
{/* Sell / Buy buttons — wide, paired, with price under the action. */}
openTicket('sell')}
/>
openTicket('buy')}
/>
);
};
/* Hero Sell/Buy CTA — height 58, radius 14, two-line label. */
const SideButton = ({ side, price, onClick }) => {
const bg = side === 'buy' ? colors.teal : colors.red;
const label = side === 'buy' ? 'Buy' : 'Sell';
return (
);
};
/* ── Instrument list row ─────────────────────────────────────────────────
Tapping selects the row's symbol as the hero and scrolls to top. */
const InstrumentRow = ({ sym, onSelect, isLast }) => {
const positive = sym.change >= 0;
const pctColor = positive ? colors.green : colors.red;
const pctText = `${positive ? '+' : '−'}${Math.abs(sym.change).toFixed(2)}%`;
return (
);
};
/* ── Order ticket sheet ─────────────────────────────────────────────────
Stepper field — label above; numeric input; +/− buttons at the right
that bump by `step`. The actual value is stored as a string in parent
state so the user can type freely; the steppers parse, bump, and write
back a fixed-decimal string. */
const StepperField = ({ label, value, setValue, step, decimals, placeholder }) => {
/* Bump applies + or − and re-formats. Empty stays empty for sl/tp. */
const bump = (dir) => {
const cur = parseFloat(value);
const base = isNaN(cur) ? 0 : cur;
const next = Math.max(0, base + dir * step);
setValue(next.toFixed(decimals));
};
return (
{/* Numeric fields. */}
{/* Summary — required margin + free margin + spread. The free
margin number shows what the account has left to deploy after
existing open positions; turns red when this trade would
exceed it. */}
{/* CTA — dispatches the position into the trade store, then closes.
Disabled (greyed + non-interactive) when the trade would exceed
free margin. */}
);
};
/* ── TradePage ─────────────────────────────────────────────────────────── */
const TradePage = ({ selectedSym: selectedSymProp, setSelectedSym: setSelectedSymProp }) => {
/* Live symbol data from the TradeStore. allSymbols re-renders when the
tick engine dispatches updateSymbol; sym is the featured row's slice.
The shell now owns selectedSym (so Discover can change it before
navigating). Fall back to a local state if not provided so this
component still works in isolation. */
const allSymbols = window.useAllSymbols();
const [localSelectedSym, setLocalSelectedSym] = React.useState('EURUSD');
const selectedSym = selectedSymProp != null ? selectedSymProp : localSelectedSym;
const setSelectedSym = setSelectedSymProp != null ? setSelectedSymProp : setLocalSelectedSym;
const sym = window.useSymbol(selectedSym);
/* Watchlist seeded from WATCHLIST_IDS — visual only, no store update. */
const [watch, setWatch] = React.useState(() => new Set(WATCHLIST_IDS));
const [range, setRange] = React.useState('1m');
const [category, setCategory] = React.useState('all');
const [sortIdx, setSortIdx] = React.useState(0);
const [orderTicket, setOrderTicket] = React.useState(null);
const [expanded, setExpanded] = React.useState(false);
/* Ref to the scroll container so a row tap can scroll the page to top. */
const scrollRef = React.useRef(null);
/* Programmatic bridge so the voice tool place_trade can pop the order
ticket open before filling in volume + clicking Place. Re-binds on
every render so the closure has the latest sym in scope.
IMPORTANT: this useEffect MUST be declared before the `if (!sym)
return null` early-return below — React's rules-of-hooks require
the same hook count on every render. When `sym` was momentarily
null (e.g. during a tab/route switch triggered by a voice tool),
the early-return path skipped this useEffect, then when sym
became non-null the next render added it back — React crashes
with "Rendered fewer hooks than expected" and the whole page
blanks out. The body of the effect handles sym being null
internally (uses optional chaining on sym?.sym). */
React.useEffect(() => {
window.equiti = window.equiti || {};
window.equiti.openOrderTicket = (args) => {
const side = args && args.side === 'sell' ? 'sell' : 'buy';
const targetSym = (args && args.symbol) || (sym && sym.sym);
if (!targetSym) return false;
setOrderTicket({ side, symId: targetSym });
return true;
};
return () => {
if (window.equiti) delete window.equiti.openOrderTicket;
};
}, [sym]);
/* If the store hasn't seeded yet (rare race during boot) show nothing
rather than throwing on a missing sym. All hooks above this line
run unconditionally; everything below this line is render-only. */
if (!sym) return null;
const watched = watch.has(sym.sym);
const toggleWatch = () => {
setWatch((prev) => {
const next = new Set(prev);
if (next.has(sym.sym)) next.delete(sym.sym);
else next.add(sym.sym);
return next;
});
};
const cycleSort = () => setSortIdx((i) => (i + 1) % SORT_LABELS.length);
/* The ticket only needs the symbol id so it can read the live sym slice
itself — keeps prices fresh while the sheet is open.
Symbols without a live demo feed (`realFeed: 'dummy'`) are gated:
the order ticket never opens and the user sees a notification at
the top of the frame. The notification carries the symbol so its
body copy can name the instrument. US30 has its own variant
('liquidityDown') so its outage reads as a price-feed problem
rather than a closed market. */
const openTicket = (side) => {
if (sym.realFeed !== 'dummy') {
const kind = sym.sym === 'US30' ? 'liquidityDown' : 'marketClosed';
if (window.showCashFlowNotification) {
window.showCashFlowNotification(kind, { sym: sym.sym, name: sym.name });
}
return;
}
setOrderTicket({ side, symId: sym.sym });
};
const onSelectRow = (symId) => {
setSelectedSym(symId);
if (scrollRef.current) scrollRef.current.scrollTo({ top: 0, behavior: 'smooth' });
};
/* Filter the live symbol list by category. "All" passes everything. */
const list = category === 'all' ? allSymbols : allSymbols.filter((s) => s.cat === category);
return (
setExpanded(true)}
/>
{/* List card — zero horizontal padding so rows hit edges. */}
{list.map((s, i) => (
))}
{/* Order ticket overlay — only mounted when a ticket exists. */}
{orderTicket ? (
setOrderTicket(null)}
/>
) : null}
setExpanded(false)} />
);
};
/* Exposed so the expanded-chart sheet can use the same static candle
shape as the inline hero chart. */
Object.assign(window, { TradePage, makeStaticCandles });
})();