;(function () {
/* TradeTopBar — top chrome for the Leveraged Trade sub-app.
White background, ~108px tall (54 safe-area + 60 row + 14 bottom padding).
Three columns: left = back button + page name; absolute-centered = account
chip showing TRADE_ACCOUNT details; right = bell + user buttons (matching
PageHeader's right cluster). Designed to sit above a cross-fading page
stack inside the LeveragedTradeShell. */
/* Inject the text-swap stylesheet once. Three-phase animation: exit (slide
up + blur + fade), instant jump to below position with no transition,
then settle back to 0 with the default transition. Used by TextSwap
below for the page-name title in the top bar. */
if (typeof document !== 'undefined' && !document.getElementById('text-swap-css')) {
const _s = document.createElement('style');
_s.id = 'text-swap-css';
_s.textContent = [
':root {',
' --text-swap-dur: 200ms;',
' --text-swap-translate-y: 8px;',
' --text-swap-blur: 2px;',
' --text-swap-ease: ease-out;',
'}',
'.t-text-swap {',
' display: inline-block;',
' transform: translateY(0);',
' filter: blur(0);',
' opacity: 1;',
' transition:',
' transform var(--text-swap-dur) var(--text-swap-ease),',
' filter var(--text-swap-dur) var(--text-swap-ease),',
' opacity var(--text-swap-dur) var(--text-swap-ease);',
' will-change: transform, filter, opacity;',
'}',
'.t-text-swap.is-exit {',
' transform: translateY(calc(var(--text-swap-translate-y) * -1));',
' filter: blur(var(--text-swap-blur));',
' opacity: 0;',
'}',
'.t-text-swap.is-enter-start {',
' transform: translateY(var(--text-swap-translate-y));',
' filter: blur(var(--text-swap-blur));',
' opacity: 0;',
' transition: none;',
'}',
'@media (prefers-reduced-motion: reduce) {',
' .t-text-swap { transition: none !important; }',
'}',
].join('\n');
document.head.appendChild(_s);
}
/* TextSwap — three-phase text crossfade. When `value` changes, the current
text slides up + blurs + fades, the text content swaps, the new text
jumps to a below position with transition disabled, then animates back
to rest. Mirrors the user-supplied transitions.dev recipe. */
const TEXT_SWAP_DUR = 200;
const TextSwap = ({ value, style }) => {
const ref = React.useRef(null);
const [displayed, setDisplayed] = React.useState(value);
const prevValueRef = React.useRef(value);
const exitTimerRef = React.useRef(null);
React.useEffect(() => {
if (value === prevValueRef.current) return;
const el = ref.current;
if (!el) return;
if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
el.classList.remove('is-enter-start');
el.classList.add('is-exit');
exitTimerRef.current = setTimeout(() => {
prevValueRef.current = value;
setDisplayed(value);
}, TEXT_SWAP_DUR);
return () => { if (exitTimerRef.current) clearTimeout(exitTimerRef.current); };
}, [value]);
React.useLayoutEffect(() => {
const el = ref.current;
if (!el) return;
if (el.classList.contains('is-exit')) {
el.classList.remove('is-exit');
el.classList.add('is-enter-start');
void el.offsetWidth; /* force reflow so the no-transition jump commits */
el.classList.remove('is-enter-start');
}
}, [displayed]);
return {displayed};
};
/* MT5 — composite TradingView/MetaTrader-style "5" icon. Inlined from
icons/trade/mt5.svg so it can sit inside the AccountChip without a
network request. Multi-coloured fills are baked in (gold/green/blue);
no `color` prop. */
const MT5Icon = ({ width = 16, height = 16 }) => (
);
/* AllIcon — 4-square glyph from icons/trade/all.svg, used as the back affordance.
Stroke is parameterized so the parent can drive color (defaults to teal2). */
const AllIcon = ({ width = 22, height = 22, color = '#006B67' }) => (
);
/* Bell icon — copied verbatim from PageHeader so the right cluster reads
identical to the existing header on Wallet/News/Performance. The red dot
is baked into the SVG (no separate badge overlay needed). */
const PageHeaderBell = ({ width = 40, height = 40, color }) => (
);
/* User icon — copied verbatim from PageHeader. */
const PageHeaderUser = ({ width = 24, height = 24, color }) => (
);
/* Account chip — compact pill with 3 segments: [icon-placeholder] · {id} ·
{mode}. The icon (added later by user) will visually represent the
account type (Standard/Premier), so we don't duplicate that in text.
ID is the most informative at-a-glance value; mode color tells live vs demo. */
const AccountChip = () => {
const acct = window.TRADE_ACCOUNT;
const modeColor = acct.mode === 'Live' ? colors.teal2 : colors.muted2;
const segStyle = {
fontFamily: 'Gilroy',
fontWeight: 600,
fontSize: '12px',
lineHeight: 1,
whiteSpace: 'nowrap',
};
return (
{/* MT5 — TradingView/MetaTrader account-type glyph. Composite multi-
coloured fill conveys the "live trading" feel; replaces the v1
empty placeholder. */}