41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
import type { BotState } from '../hooks/useWebSocket';
|
|
|
|
interface MarketTickerProps {
|
|
botState: BotState;
|
|
}
|
|
|
|
export const MarketTicker = ({ botState }: MarketTickerProps) => {
|
|
const symbols = Object.keys(botState.symbols);
|
|
|
|
return (
|
|
<div className="market-ticker-card">
|
|
<div className="ticker-header">
|
|
<h3>💹 Market Ticker</h3>
|
|
<span className="ticker-count">{symbols.length} Assets Active</span>
|
|
</div>
|
|
<div className="ticker-grid">
|
|
{symbols.length === 0 && (
|
|
<div className="ticker-loading">
|
|
📡 Syncing market data for {botState.settings.maxOpenTrades * 3}+ assets...
|
|
</div>
|
|
)}
|
|
{symbols.map(symbol => {
|
|
const data = botState.symbols[symbol];
|
|
const isUp = data.change24h >= 0;
|
|
return (
|
|
<div key={symbol} className="ticker-item">
|
|
<span className="ticker-symbol">{symbol}</span>
|
|
<div className="ticker-values">
|
|
<span className="ticker-price">${data.price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 4 })}</span>
|
|
<span className={`ticker-change ${isUp ? 'positive' : 'negative'}`}>
|
|
{isUp ? '↑' : '↓'}{Math.abs(data.change24h).toFixed(2)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|