Balance
₢{credits.toLocaleString()}
Used Margin
₢{usedMargin.toLocaleString()}
Exposure
₢{totalPositionValue.toLocaleString()}
{/* Margin utilization bar */}
MARGIN UTILIZATION
80 ? 'var(--red)' : marginUtilization > 50 ? 'var(--accent)' : 'var(--green)' }}>
{marginUtilization.toFixed(1)}%
80 ? 'var(--red)' : marginUtilization > 50 ? 'var(--accent)' : 'var(--green)',
transition: 'width 0.3s ease',
}} />
{/* Position rows */}
{positions.length === 0 && (
No open positions
)}
{positions.map((p, i) => {
const c = commodities.find(c => c.symbol === p.symbol);
if (!c) return null;
const currentVal = c.price * p.totalUnits;
const entryVal = p.avgEntry * p.totalUnits;
const pnl = p.direction === 'long' ? currentVal - entryVal : entryVal - currentVal;
const pnlPct = entryVal > 0 ? (pnl / p.margin) * 100 : 0;
const contract = CONTRACTS.find(ct => ct.symbol === p.symbol);
return (
{p.symbol}
{p.direction === 'long' ? 'LONG' : 'SHORT'}
= 0 ? 'var(--green)' : 'var(--red)',
}}>
{pnl >= 0 ? '+' : ''}₢{pnl.toLocaleString()}
{p.lots} lot{p.lots > 1 ? 's' : ''} ({p.totalUnits.toLocaleString()} u.) @ ₢{p.avgEntry}
Margin: ₢{p.margin.toLocaleString()}
= 0 ? 'var(--green)' : 'var(--red)',
opacity: 0.6,
}} />
);
})}
);
}
/* ── Trade Feed ── */
function TradeFeed({ trades }) {
return (
Market Trades
{trades.map((t, i) => (
{t.time}
{t.lots}× {t.symbol}
₢{t.price.toLocaleString()}
{t.side === 'long' ? 'BID' : 'ASK'}
))}
);
}
/* ──────────────────────────────────────────────
Main MarketDemo component
────────────────────────────────────────────── */
function MarketDemo() {
const [credits, setCredits] = useState(250000);
const [selectedSymbol, setSelectedSymbol] = useState('VLD');
const [category, setCategory] = useState('all');
const [notifications, setNotifications] = useState([]);
/* Generate live commodity data */
const [commodities, setCommodities] = useState(() => {
return CONTRACTS.map(ct => {
const history = []; let p = ct.basePrice;
for (let i = 0; i < 60; i++) {
p = Math.max(ct.basePrice * 0.7, Math.min(ct.basePrice * 1.3, p + (Math.random() - 0.48) * ct.basePrice * 0.04));
history.push(Math.round(p * 100) / 100);
}
const price = history[history.length - 1];
const prev = history[history.length - 2];
const settlement = history[Math.floor(history.length / 2)];
const bestBid = Math.round((price - ct.basePrice * 0.005) * 100) / 100;
const bestAsk = Math.round((price + ct.basePrice * 0.005) * 100) / 100;
return {
...ct,
price, prevPrice: prev,
change: price - prev,
changePct: ((price - prev) / prev) * 100,
history, settlement, bestBid, bestAsk,
volume: Math.floor(Math.random() * 80000 + 5000),
openInterest: Math.floor(Math.random() * 200000 + 10000),
open: history[0],
high: Math.max(...history),
low: Math.min(...history),
supply: Math.floor(Math.random() * 50000 + 10000),
demand: Math.floor(Math.random() * 60000 + 8000),
};
});
});
/* Open positions */
const [positions, setPositions] = useState([
{ symbol: 'VLD', direction: 'long', lots: 5, totalUnits: 5000, avgEntry: 13.20, margin: 5280 },
{ symbol: 'TRI', direction: 'long', lots: 3, totalUnits: 15000, avgEntry: 4.80, margin: 2160 },
{ symbol: 'ARK', direction: 'short', lots: 2, totalUnits: 100, avgEntry: 635, margin: 25400 },
]);
/* Order book for selected */
const selected = commodities.find(c => c.symbol === selectedSymbol) || commodities[0];
const selectedContract = CONTRACTS.find(c => c.symbol === selectedSymbol) || CONTRACTS[0];
const orderBook = useMemo(() => {
const p = selected.price;
const bids = []; const asks = [];
let bidCum = 0; let askCum = 0;
for (let i = 0; i < 10; i++) {
const bv = Math.floor(Math.random() * 12000 + 500); bidCum += bv;
bids.push({ price: Math.max(0.01, Math.round((p - (i + 1) * selectedContract.tickSize * 3) * 100) / 100), volume: bv, cumulative: bidCum });
const av = Math.floor(Math.random() * 12000 + 500); askCum += av;
asks.push({ price: Math.round((p + (i + 1) * selectedContract.tickSize * 3) * 100) / 100, volume: av, cumulative: askCum });
}
return { bids, asks };
}, [selected.price, selectedSymbol, selectedContract.tickSize]);
const usedMargin = positions.reduce((s, p) => s + p.margin, 0);
/* Price chart data */
const chartData = useMemo(() => {
return selected.history.map((c, i) => {
const noise = selected.price * 0.01;
return {
open: selected.history[Math.max(0, i - 1)] || c,
high: c + Math.random() * noise * 2,
low: Math.max(0.01, c - Math.random() * noise * 2),
close: c,
volume: Math.floor(Math.random() * 5000 + 500),
};
});
}, [selected]);
/* Trade feed */
const [tradeFeed, setTradeFeed] = useState(() => {
const feed = [];
const syms = CONTRACTS.map(c => c.symbol);
for (let i = 0; i < 20; i++) {
const sym = syms[Math.floor(Math.random() * syms.length)];
const ct = CONTRACTS.find(c => c.symbol === sym);
const c = commodities.find(c => c.symbol === sym);
feed.push({
time: `${14}:${String(22 + i).padStart(2, '0')}`,
symbol: sym,
lots: Math.floor(Math.random() * 10 + 1),
price: c ? Math.round(c.price * 100) / 100 : ct.basePrice,
side: Math.random() > 0.5 ? 'long' : 'short',
});
}
return feed.reverse();
});
/* Live price ticks */
useEffect(() => {
const interval = setInterval(() => {
setCommodities(prev => prev.map(c => {
const ct = CONTRACTS.find(x => x.symbol === c.symbol);
const delta = (Math.random() - 0.48) * c.price * 0.006;
const newPrice = Math.max(0.01, Math.round((c.price + delta) * 100) / 100);
const history = [...c.history.slice(1), newPrice];
const change = newPrice - c.prevPrice;
const spread = ct.basePrice * 0.005;
return {
...c, price: newPrice, history,
volume: c.volume + Math.floor(Math.random() * 300),
change, changePct: c.prevPrice > 0 ? (change / c.prevPrice) * 100 : 0,
high: Math.max(c.high, newPrice), low: Math.min(c.low, newPrice),
bestBid: Math.round((newPrice - spread) * 100) / 100,
bestAsk: Math.round((newPrice + spread) * 100) / 100,
openInterest: c.openInterest + Math.floor(Math.random() * 200 - 80),
supply: c.supply + Math.floor(Math.random() * 200 - 100),
demand: c.demand + Math.floor(Math.random() * 200 - 80),
};
}));
}, 2500);
return () => clearInterval(interval);
}, []);
/* New trades in feed */
useEffect(() => {
const interval = setInterval(() => {
const syms = CONTRACTS.map(c => c.symbol);
const sym = syms[Math.floor(Math.random() * syms.length)];
const c = commodities.find(c => c.symbol === sym);
const ct = CONTRACTS.find(c => c.symbol === sym);
const now = new Date();
setTradeFeed(prev => [{
time: `${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}`,
symbol: sym,
lots: Math.floor(Math.random() * 15 + 1),
price: c ? c.price : ct.basePrice,
side: Math.random() > 0.5 ? 'long' : 'short',
}, ...prev].slice(0, 40));
}, 3000);
return () => clearInterval(interval);
}, [commodities]);
const addNotif = (msg, color) => {
const id = Date.now();
setNotifications(prev => [...prev, { id, msg, color }]);
setTimeout(() => setNotifications(prev => prev.filter(n => n.id !== id)), 3500);
};
const handleTrade = (direction, symbol, price, lots, totalUnits, marginRequired, commission) => {
/* Deduct commission + margin from credits */
setCredits(prev => prev - commission - marginRequired);
setPositions(prev => {
const existing = prev.find(p => p.symbol === symbol && p.direction === direction);
if (existing) {
/* Merge into existing position — weighted average entry */
const newUnits = existing.totalUnits + totalUnits;
const newAvg = Math.round(((existing.avgEntry * existing.totalUnits) + (price * totalUnits)) / newUnits * 100) / 100;
const newMargin = existing.margin + marginRequired;
return prev.map(p => p.symbol === symbol && p.direction === direction
? { ...p, lots: p.lots + lots, totalUnits: newUnits, avgEntry: newAvg, margin: newMargin }
: p);
}
return [...prev, { symbol, direction, lots, totalUnits, avgEntry: price, margin: marginRequired }];
});
addNotif(
`${direction === 'long' ? 'LONG' : 'SHORT'} ${lots}× ${symbol} (${totalUnits.toLocaleString()} u.) @ ₢${price}`,
direction === 'long' ? 'var(--green)' : 'var(--red)'
);
const now = new Date();
setTradeFeed(prev => [{
time: `${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}`,
symbol, lots, price, side: direction,
}, ...prev].slice(0, 40));
};
/* Market stats */
const totalVolume = commodities.reduce((s, c) => s + c.volume, 0);
const totalOI = commodities.reduce((s, c) => s + c.openInterest, 0);
const advancers = commodities.filter(c => c.change >= 0).length;
const decliners = commodities.length - advancers;
const tickerItems = commodities.slice(0, 12).map(c => ({
symbol: c.symbol, price: c.price, change: c.change, changePct: c.changePct,
}));
const spread = selectedContract ? Math.round((selected.bestAsk - selected.bestBid) * 100) / 100 : 0;
const spreadPct = selected.bestBid > 0 ? (spread / selected.bestBid) * 100 : 0;
const midPrice = Math.round(((selected.bestBid + selected.bestAsk) / 2) * 100) / 100;
return (
e.currentTarget.style.color='var(--fg-bright)'} onMouseLeave={e => e.currentTarget.style.color='var(--muted)'}>← Back to Docs
{/* Ticker */}
{/* Header bar */}
COMMODITIES EXCHANGE
SESSION
OPEN
{advancers} ▲
{decliners} ▼
TOTAL VOL
{(totalVolume / 1e6).toFixed(2)}M
OPEN INT.
{(totalOI / 1e6).toFixed(1)}M
ACCOUNT (₢ = ISK)
₢{credits.toLocaleString()}
{/* Category tabs */}
{/* Notifications */}
{notifications.map(n => (
{n.msg}
))}
{/* Main grid: Left (board + chart + feed) | Right (specs + depth + order + positions) */}
{/* Left column */}
{/* Contract board */}
{/* Price chart */}
{selected.symbol}
{selected.name}
O:₢{selected.open} H:₢{selected.high} L:₢{selected.low}
₢{selected.price.toLocaleString()}
= 0 ? 'var(--green)' : 'var(--red)',
}}>
{selected.change >= 0 ? '+' : ''}{selected.change.toFixed(2)} ({selected.changePct >= 0 ? '+' : ''}{selected.changePct.toFixed(2)}%)
{/* Trade feed */}
{/* Right column */}
{/* Contract spec */}
{/* Depth chart */}
{/* Order book */}
{/* Order form */}
{/* Positions */}
);
}
window.GDD.MarketDemo = MarketDemo;