refactor(ui): tokenize strategy fleet surfaces
This commit is contained in:
root
parent
309e9cc399
commit
5fc123e41d
@ -55,9 +55,9 @@ const ActiveStrategyCard: React.FC<{
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
background: '#14151a',
|
||||
background: 'var(--card-elevated)',
|
||||
borderRadius: '28px',
|
||||
border: `1px solid ${profile.is_active ? 'rgba(0, 255, 136, 0.1)' : 'rgba(255, 255, 255, 0.05)'}`,
|
||||
border: `1px solid ${profile.is_active ? 'var(--bl-success-muted)' : 'var(--bl-border-subtle)'}`,
|
||||
padding: '32px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@ -75,7 +75,7 @@ const ActiveStrategyCard: React.FC<{
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
width: '4px',
|
||||
background: profile.is_active ? '#00ff88' : '#222',
|
||||
background: profile.is_active ? 'var(--bl-success)' : 'var(--bl-border-subtle)',
|
||||
opacity: profile.is_active ? 1 : 0.3
|
||||
}} />
|
||||
|
||||
@ -86,17 +86,17 @@ const ActiveStrategyCard: React.FC<{
|
||||
width: '44px',
|
||||
height: '44px',
|
||||
borderRadius: '14px',
|
||||
background: 'rgba(255,255,255,0.03)',
|
||||
background: 'var(--bl-surface-highlight)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px solid rgba(255, 255, 255, 0.05)',
|
||||
color: isSafe ? '#3498db' : isAggressive ? '#ff3366' : '#00ff88'
|
||||
border: '1px solid var(--bl-border-subtle)',
|
||||
color: isSafe ? 'var(--bl-info-strong)' : isAggressive ? 'var(--bl-danger)' : 'var(--bl-success)'
|
||||
}}>
|
||||
{isSafe ? <Shield size={20} /> : isAggressive ? <Zap size={20} /> : <Scale size={20} />}
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
|
||||
<span style={{ fontSize: '10px', fontWeight: 900, color: '#444', textTransform: 'uppercase', letterSpacing: '2px' }}>Active Strategy</span>
|
||||
<span style={{ fontSize: '10px', fontWeight: 900, color: 'var(--bl-text-quiet)', textTransform: 'uppercase', letterSpacing: '2px' }}>Active Strategy</span>
|
||||
<span style={{ fontSize: '13px', fontWeight: 800, color: 'white', textTransform: 'uppercase' }}>
|
||||
{profile.is_active ? 'Running' : 'Paused'}
|
||||
</span>
|
||||
@ -104,10 +104,10 @@ const ActiveStrategyCard: React.FC<{
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
{onBacktest && (
|
||||
<IconButton type="button" label={`Backtest ${profile.name}`} icon={<Activity size={18} />} onClick={() => onBacktest(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover" />
|
||||
<IconButton type="button" label={`Backtest ${profile.name}`} icon={<Activity size={18} />} onClick={() => onBacktest(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bl-text-quiet)', cursor: 'pointer' }} className="icon-btn-hover" />
|
||||
)}
|
||||
<IconButton type="button" label={`Edit ${profile.name}`} icon={<Settings size={18} />} onClick={() => onEdit(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover" />
|
||||
<IconButton type="button" label={`Delete ${profile.name}`} icon={<Trash2 size={18} />} onClick={() => onDelete(profile.id)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover" />
|
||||
<IconButton type="button" label={`Edit ${profile.name}`} icon={<Settings size={18} />} onClick={() => onEdit(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bl-text-quiet)', cursor: 'pointer' }} className="icon-btn-hover" />
|
||||
<IconButton type="button" label={`Delete ${profile.name}`} icon={<Trash2 size={18} />} onClick={() => onDelete(profile.id)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bl-text-quiet)', cursor: 'pointer' }} className="icon-btn-hover" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -115,10 +115,10 @@ const ActiveStrategyCard: React.FC<{
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<h3 style={{ fontSize: '24px', fontWeight: 950, color: 'white', letterSpacing: '-0.02em' }}>{profile.name}</h3>
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginTop: '12px' }}>
|
||||
<span style={{ background: 'rgba(0,255,136,0.05)', color: '#00ff88', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid rgba(0,255,136,0.1)', textTransform: 'uppercase' }}>
|
||||
<span style={{ background: 'var(--bl-success-muted)', color: 'var(--bl-success)', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid var(--bl-success-muted)', textTransform: 'uppercase' }}>
|
||||
{profile.symbols}
|
||||
</span>
|
||||
<span style={{ background: 'rgba(255,255,255,0.03)', color: '#666', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.05)', textTransform: 'uppercase' }}>
|
||||
<span style={{ background: 'var(--bl-surface-highlight)', color: 'var(--bl-text-quiet)', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid var(--bl-border-subtle)', textTransform: 'uppercase' }}>
|
||||
{strategyKindLabel}
|
||||
</span>
|
||||
</div>
|
||||
@ -127,21 +127,21 @@ const ActiveStrategyCard: React.FC<{
|
||||
{/* 4. Operational DNA (Specs) */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px', marginBottom: '28px' }}>
|
||||
{[
|
||||
{ label: 'Allocation', value: `$${profile.allocated_capital.toLocaleString()}`, icon: <DollarSign size={14} />, color: '#00ff88' },
|
||||
{ label: 'PnL (Global)', value: '$0.00', icon: <TrendingUp size={14} />, color: '#3498db' },
|
||||
{ label: 'Target', value: `$${config?.riskLimits?.dailyProfitTargetUsd || 0}`, icon: <Target size={14} />, color: '#ffaa00' },
|
||||
{ label: 'Latency', value: '5ms', icon: <Cpu size={14} />, color: '#ff3366' }
|
||||
{ label: 'Allocation', value: `$${profile.allocated_capital.toLocaleString()}`, icon: <DollarSign size={14} />, color: 'var(--bl-success)' },
|
||||
{ label: 'PnL (Global)', value: '$0.00', icon: <TrendingUp size={14} />, color: 'var(--bl-info-strong)' },
|
||||
{ label: 'Target', value: `$${config?.riskLimits?.dailyProfitTargetUsd || 0}`, icon: <Target size={14} />, color: 'var(--bl-warning)' },
|
||||
{ label: 'Latency', value: '5ms', icon: <Cpu size={14} />, color: 'var(--bl-danger)' }
|
||||
].map((spec, i) => (
|
||||
<div key={i} style={{
|
||||
background: 'rgba(0,0,0,0.2)',
|
||||
border: '1px solid rgba(255,255,255,0.03)',
|
||||
background: 'var(--bl-surface-overlay)',
|
||||
border: '1px solid var(--bl-border-subtle)',
|
||||
padding: '16px',
|
||||
borderRadius: '20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '6px'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#555', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--bl-text-quiet)', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
|
||||
{spec.icon} {spec.label}
|
||||
</div>
|
||||
<div style={{ color: 'white', fontWeight: 900, fontSize: '16px' }}>{spec.value}</div>
|
||||
@ -159,8 +159,8 @@ const ActiveStrategyCard: React.FC<{
|
||||
width: '100%',
|
||||
padding: '16px',
|
||||
borderRadius: '20px',
|
||||
background: 'rgba(255,255,255,0.02)',
|
||||
border: '1px solid rgba(255,255,255,0.05)',
|
||||
background: 'var(--bl-surface-highlight)',
|
||||
border: '1px solid var(--bl-border-subtle)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
@ -169,26 +169,26 @@ const ActiveStrategyCard: React.FC<{
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#00ff88', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--bl-success)', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
|
||||
<Fingerprint size={14} /> Diagnostic Intelligence {tier === 'free' && <Lock size={12} style={{ marginLeft: '4px', opacity: 0.5 }} />}
|
||||
</div>
|
||||
{isExpanded ? <ChevronUp size={14} color="#555" /> : <ChevronDown size={14} color="#555" />}
|
||||
{isExpanded ? <ChevronUp size={14} color="var(--bl-text-quiet)" /> : <ChevronDown size={14} color="var(--bl-text-quiet)" />}
|
||||
</div>
|
||||
<p style={{ fontSize: '12px', color: '#929292', margin: 0, fontWeight: 500 }}>
|
||||
<p style={{ fontSize: '12px', color: 'var(--bl-text-secondary)', margin: 0, fontWeight: 500 }}>
|
||||
{explanation.reason}
|
||||
</p>
|
||||
{isExpanded && explanation.recommendation && (
|
||||
<div style={{
|
||||
marginTop: '12px',
|
||||
padding: '12px',
|
||||
background: 'rgba(251, 191, 36, 0.05)',
|
||||
border: '1px solid rgba(251, 191, 36, 0.1)',
|
||||
background: 'var(--bl-warning-muted)',
|
||||
border: '1px solid var(--bl-warning-muted)',
|
||||
borderRadius: '12px'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: '#fbbf24', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', marginBottom: '4px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--bl-warning)', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', marginBottom: '4px' }}>
|
||||
<Lightbulb size={12} /> Optimization
|
||||
</div>
|
||||
<p style={{ fontSize: '11px', color: '#fbbf24', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
|
||||
<p style={{ fontSize: '11px', color: 'var(--bl-warning)', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
@ -203,10 +203,10 @@ const ActiveStrategyCard: React.FC<{
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '56px',
|
||||
background: profile.is_active ? 'rgba(255,255,255,0.03)' : '#00ff88',
|
||||
color: profile.is_active ? '#929292' : 'black',
|
||||
background: profile.is_active ? 'var(--bl-surface-highlight)' : 'var(--bl-success)',
|
||||
color: profile.is_active ? 'var(--bl-text-secondary)' : 'black',
|
||||
borderRadius: '18px',
|
||||
border: profile.is_active ? '1px solid rgba(255,255,255,0.05)' : 'none',
|
||||
border: profile.is_active ? '1px solid var(--bl-border-subtle)' : 'none',
|
||||
fontWeight: 900,
|
||||
fontSize: '12px',
|
||||
textTransform: 'uppercase',
|
||||
@ -215,7 +215,7 @@ const ActiveStrategyCard: React.FC<{
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '12px',
|
||||
boxShadow: profile.is_active ? 'none' : '0 12px 36px -12px rgba(0, 255, 136, 0.4)',
|
||||
boxShadow: profile.is_active ? 'none' : '0 12px 36px -12px color-mix(in oklab, var(--bl-success) 40%, transparent)',
|
||||
transition: 'all 0.2s',
|
||||
letterSpacing: '1.5px'
|
||||
}}
|
||||
@ -231,13 +231,13 @@ const ActiveStrategyCard: React.FC<{
|
||||
|
||||
<style>{`
|
||||
.strategy-card-hover:hover {
|
||||
border-color: rgba(0, 255, 136, 0.2) !important;
|
||||
border-color: var(--bl-success-muted) !important;
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8) !important;
|
||||
background: #1a1b21 !important;
|
||||
box-shadow: 0 40px 80px -20px color-mix(in oklab, var(--background) 80%, black) !important;
|
||||
background: var(--bl-surface-strong) !important;
|
||||
}
|
||||
.icon-btn-hover:hover {
|
||||
background: rgba(255,255,255,0.08) !important;
|
||||
background: color-mix(in oklab, var(--card) 88%, var(--foreground)) !important;
|
||||
color: white !important;
|
||||
}
|
||||
.action-btn-hover:hover {
|
||||
@ -309,7 +309,7 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
setEditingProfile(null);
|
||||
}}
|
||||
variant="ghost"
|
||||
style={{ background: 'none', border: 'none', color: '#666', fontWeight: 900, fontSize: '12px', textTransform: 'uppercase', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
|
||||
style={{ background: 'none', border: 'none', color: 'var(--bl-text-quiet)', fontWeight: 900, fontSize: '12px', textTransform: 'uppercase', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
|
||||
>
|
||||
← Back to My Strategies
|
||||
</Button>
|
||||
@ -341,7 +341,7 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
flexDirection: 'column',
|
||||
marginBottom: '60px',
|
||||
padding: '60px 0',
|
||||
borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
|
||||
borderBottom: '1px solid var(--bl-border-subtle)',
|
||||
position: 'relative',
|
||||
alignItems: 'flex-start'
|
||||
}}>
|
||||
@ -360,7 +360,7 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
color: '#00ff88',
|
||||
color: 'var(--bl-success)',
|
||||
fontSize: '11px',
|
||||
fontWeight: 900,
|
||||
textTransform: 'uppercase',
|
||||
@ -368,7 +368,7 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
marginBottom: '24px'
|
||||
}}>
|
||||
DEPLOYED FLEET
|
||||
<div style={{ width: '30px', height: '1px', background: '#00ff88', opacity: 0.2 }} />
|
||||
<div style={{ width: '30px', height: '1px', background: 'var(--bl-success)', opacity: 0.2 }} />
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', width: '100%', flexWrap: 'wrap', gap: '32px' }}>
|
||||
@ -383,20 +383,20 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
textTransform: 'uppercase'
|
||||
}}>
|
||||
My<br />
|
||||
<span style={{ color: '#00ff88' }}>Strategies</span>
|
||||
<span style={{ color: 'var(--bl-success)' }}>Strategies</span>
|
||||
</h2>
|
||||
<p style={{ fontSize: '20px', color: '#666', marginTop: '24px', maxWidth: '600px', fontWeight: 500, margin: '24px 0 0 0', textAlign: 'left' }}>
|
||||
<p style={{ fontSize: '20px', color: 'var(--bl-text-quiet)', marginTop: '24px', maxWidth: '600px', fontWeight: 500, margin: '24px 0 0 0', textAlign: 'left' }}>
|
||||
Monitor and manage your proprietary trading nodes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
||||
<div style={{
|
||||
background: 'rgba(0, 255, 136, 0.05)',
|
||||
border: '1px solid rgba(0, 255, 136, 0.1)',
|
||||
background: 'var(--bl-success-muted)',
|
||||
border: '1px solid var(--bl-success-muted)',
|
||||
padding: '12px 24px',
|
||||
borderRadius: '16px',
|
||||
color: '#00ff88',
|
||||
color: 'var(--bl-success)',
|
||||
fontSize: '11px',
|
||||
fontWeight: 900,
|
||||
textTransform: 'uppercase',
|
||||
@ -443,10 +443,10 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
return (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '48px' }}>
|
||||
{/* Recent Activity */}
|
||||
<div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: '24px', padding: '24px 28px' }}>
|
||||
<div style={{ background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', borderRadius: '24px', padding: '24px 28px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
|
||||
<div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#00ff88', boxShadow: '0 0 8px #00ff88' }} />
|
||||
<span style={{ fontSize: '11px', fontWeight: 900, color: '#555', textTransform: 'uppercase', letterSpacing: '2px' }}>Recent Activity</span>
|
||||
<div style={{ width: '8px', height: '8px', borderRadius: '50%', background: 'var(--bl-success)', boxShadow: '0 0 8px var(--bl-success)' }} />
|
||||
<span style={{ fontSize: '11px', fontWeight: 900, color: 'var(--bl-text-quiet)', textTransform: 'uppercase', letterSpacing: '2px' }}>Recent Activity</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||
{recentAlerts.map((alert, i) => {
|
||||
@ -454,39 +454,39 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
const mins = Math.floor((Date.now() - alert.timestamp) / 60000);
|
||||
const timeAgo = mins < 1 ? 'just now' : mins < 60 ? `${mins}m ago` : `${Math.floor(mins / 60)}h ago`;
|
||||
return (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px 12px', background: 'rgba(0,0,0,0.2)', borderRadius: '10px' }}>
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px 12px', background: 'var(--bl-surface-overlay)', borderRadius: '10px' }}>
|
||||
<span>{icons[alert.type] || 'ℹ️'}</span>
|
||||
<span style={{ fontSize: '12px', color: '#666', fontWeight: 700, minWidth: '60px' }}>{alert.symbol}</span>
|
||||
<span style={{ fontSize: '11px', color: '#444', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{alert.message}</span>
|
||||
<span style={{ fontSize: '10px', color: '#333', fontWeight: 700, whiteSpace: 'nowrap' }}>{timeAgo}</span>
|
||||
<span style={{ fontSize: '12px', color: 'var(--bl-text-quiet)', fontWeight: 700, minWidth: '60px' }}>{alert.symbol}</span>
|
||||
<span style={{ fontSize: '11px', color: 'var(--bl-text-quiet)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{alert.message}</span>
|
||||
<span style={{ fontSize: '10px', color: 'var(--bl-text-tertiary)', fontWeight: 700, whiteSpace: 'nowrap' }}>{timeAgo}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{recentAlerts.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: '#2a2a2a', fontSize: '12px', fontStyle: 'italic' }}>No activity yet...</div>}
|
||||
{recentAlerts.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: 'var(--bl-text-tertiary)', fontSize: '12px', fontStyle: 'italic' }}>No activity yet...</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Symbol-Specific Volatility */}
|
||||
<div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: '24px', padding: '24px 28px' }}>
|
||||
<div style={{ background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', borderRadius: '24px', padding: '24px 28px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
|
||||
<span style={{ fontSize: '16px' }}>📊</span>
|
||||
<span style={{ fontSize: '11px', fontWeight: 900, color: '#555', textTransform: 'uppercase', letterSpacing: '2px' }}>Your Markets (24h)</span>
|
||||
<span style={{ fontSize: '11px', fontWeight: 900, color: 'var(--bl-text-quiet)', textTransform: 'uppercase', letterSpacing: '2px' }}>Your Markets (24h)</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||
{symbolVolatility.map(({ symbol, change }) => (
|
||||
<div key={symbol} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'rgba(0,0,0,0.2)', borderRadius: '12px' }}>
|
||||
<div key={symbol} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--bl-surface-overlay)', borderRadius: '12px' }}>
|
||||
<span style={{ fontWeight: 800, fontSize: '13px', color: 'white' }}>{symbol}</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<div style={{ width: '60px', height: '3px', background: 'rgba(255,255,255,0.05)', borderRadius: '99px', overflow: 'hidden' }}>
|
||||
<div style={{ width: `${Math.min(Math.abs(change) * 5, 60)}px`, height: '100%', background: change >= 0 ? '#00ff88' : '#ff3366', borderRadius: '99px' }} />
|
||||
<div style={{ width: '60px', height: '3px', background: 'var(--bl-border-subtle)', borderRadius: '99px', overflow: 'hidden' }}>
|
||||
<div style={{ width: `${Math.min(Math.abs(change) * 5, 60)}px`, height: '100%', background: change >= 0 ? 'var(--bl-success)' : 'var(--bl-danger)', borderRadius: '99px' }} />
|
||||
</div>
|
||||
<span style={{ fontSize: '12px', fontWeight: 900, fontFamily: 'monospace', color: change >= 0 ? '#00ff88' : '#ff3366', minWidth: '55px', textAlign: 'right' }}>
|
||||
<span style={{ fontSize: '12px', fontWeight: 900, fontFamily: 'monospace', color: change >= 0 ? 'var(--bl-success)' : 'var(--bl-danger)', minWidth: '55px', textAlign: 'right' }}>
|
||||
{change >= 0 ? '+' : ''}{change.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{symbolVolatility.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: '#2a2a2a', fontSize: '12px', fontStyle: 'italic' }}>Deploy a strategy to see its market data</div>}
|
||||
{symbolVolatility.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: 'var(--bl-text-tertiary)', fontSize: '12px', fontStyle: 'italic' }}>Deploy a strategy to see its market data</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -532,8 +532,8 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
<div style={{
|
||||
gridColumn: '1 / -1',
|
||||
padding: '100px',
|
||||
background: 'rgba(255,255,255,0.01)',
|
||||
border: '2px dashed rgba(255,255,255,0.03)',
|
||||
background: 'var(--bl-surface-highlight)',
|
||||
border: '2px dashed var(--bl-border-subtle)',
|
||||
borderRadius: '40px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@ -541,9 +541,9 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<Activity size={60} color="#222" style={{ marginBottom: '24px' }} />
|
||||
<h3 style={{ color: '#444', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '4px' }}>No Engines Deployed</h3>
|
||||
<p style={{ color: '#222', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Your fleet is currently dormant. Deploy your first engine to begin automated dominance.</p>
|
||||
<Activity size={60} color="var(--bl-text-quiet)" style={{ marginBottom: '24px' }} />
|
||||
<h3 style={{ color: 'var(--bl-text-quiet)', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '4px' }}>No Engines Deployed</h3>
|
||||
<p style={{ color: 'var(--bl-text-quiet)', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Your fleet is currently dormant. Deploy your first engine to begin automated dominance.</p>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setShowWizard(true)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user