490 lines
27 KiB
TypeScript
490 lines
27 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useAuth } from '../components/AuthContext';
|
|
import { getStrategyExplanation } from '../lib/StrategyExplanationService';
|
|
import { getUserTier } from '../lib/TierPolicy';
|
|
import {
|
|
Play,
|
|
Pause,
|
|
Trash2,
|
|
Activity,
|
|
TrendingUp,
|
|
Plus,
|
|
Shield,
|
|
Zap,
|
|
Scale,
|
|
Settings,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Lightbulb,
|
|
Cpu,
|
|
Fingerprint,
|
|
Target,
|
|
DollarSign,
|
|
Lock
|
|
} from 'lucide-react';
|
|
import { StrategyWizard } from '../components/StrategyWizard';
|
|
import { BacktestRunnerPanel } from '../backtest/components/BacktestRunnerPanel';
|
|
import { useBacktestFeatureGate } from '../backtest/useBacktestFeatureGate';
|
|
import { deleteTradeProfile, fetchTradeProfiles, setTradeProfileActive } from '../lib/profileApi';
|
|
import { Button, IconButton } from '../components/ui/Primitives';
|
|
|
|
function getStrategyKindLabel(config: any) {
|
|
if (config?.type === 'visual') return 'Visual Builder';
|
|
if (config?.type === 'code') return 'Code Strategy';
|
|
return 'V4.0 Core';
|
|
}
|
|
|
|
const ActiveStrategyCard: React.FC<{
|
|
profile: any;
|
|
botState: any;
|
|
tier: string;
|
|
onToggle: (p: any) => void;
|
|
onEdit: (p: any) => void;
|
|
onBacktest?: (p: any) => void;
|
|
onDelete: (id: string) => void;
|
|
isExpanded: boolean;
|
|
onToggleExpand: (id: string) => void;
|
|
}> = ({ profile, botState, tier, onToggle, onEdit, onBacktest, onDelete, isExpanded, onToggleExpand }) => {
|
|
const config = profile.strategy_config;
|
|
const isAggressive = config?.execution?.minRulePassRatio < 0.9;
|
|
const isSafe = config?.execution?.minRulePassRatio >= 1.0;
|
|
const strategyKindLabel = getStrategyKindLabel(config);
|
|
|
|
const explanation = getStrategyExplanation(profile, botState);
|
|
|
|
return (
|
|
<div style={{
|
|
background: 'var(--card-elevated)',
|
|
borderRadius: '28px',
|
|
border: `1px solid ${profile.is_active ? 'var(--bl-success-muted)' : 'var(--bl-border-subtle)'}`,
|
|
padding: '32px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
|
|
height: '100%',
|
|
minHeight: '620px'
|
|
}} className="strategy-card-hover">
|
|
|
|
{/* 1. Direct Status Strip */}
|
|
<div style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
width: '4px',
|
|
background: profile.is_active ? 'var(--bl-success)' : 'var(--bl-border-subtle)',
|
|
opacity: profile.is_active ? 1 : 0.3
|
|
}} />
|
|
|
|
{/* 2. Header Area */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '28px' }}>
|
|
<div style={{ display: 'flex', gap: '14px', alignItems: 'center' }}>
|
|
<div style={{
|
|
width: '44px',
|
|
height: '44px',
|
|
borderRadius: '14px',
|
|
background: 'var(--bl-surface-highlight)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
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: '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>
|
|
</div>
|
|
</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: '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: '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>
|
|
|
|
{/* 3. Identity */}
|
|
<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: '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: '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>
|
|
</div>
|
|
|
|
{/* 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: '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: '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: '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>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 5. Health Diagnostic (Education Layer) */}
|
|
<div style={{ marginBottom: '32px' }}>
|
|
<Button
|
|
type="button"
|
|
onClick={() => onToggleExpand(profile.id)}
|
|
variant="ghost"
|
|
style={{
|
|
width: '100%',
|
|
padding: '16px',
|
|
borderRadius: '20px',
|
|
background: 'var(--bl-surface-highlight)',
|
|
border: '1px solid var(--bl-border-subtle)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '8px',
|
|
cursor: 'pointer',
|
|
textAlign: 'left'
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<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="var(--bl-text-quiet)" /> : <ChevronDown size={14} color="var(--bl-text-quiet)" />}
|
|
</div>
|
|
<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: 'var(--bl-warning-muted)',
|
|
border: '1px solid var(--bl-warning-muted)',
|
|
borderRadius: '12px'
|
|
}}>
|
|
<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: 'var(--bl-warning)', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
|
|
</div>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 6. Action */}
|
|
<div style={{ marginTop: 'auto' }}>
|
|
<Button
|
|
type="button"
|
|
onClick={() => onToggle(profile)}
|
|
variant={profile.is_active ? 'outline' : 'primary'}
|
|
style={{
|
|
width: '100%',
|
|
height: '56px',
|
|
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 var(--bl-border-subtle)' : 'none',
|
|
fontWeight: 900,
|
|
fontSize: '12px',
|
|
textTransform: 'uppercase',
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '12px',
|
|
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'
|
|
}}
|
|
className="action-btn-hover"
|
|
>
|
|
{profile.is_active ? (
|
|
<><Pause size={18} fill="currentColor" /> PAUSE TRADING</>
|
|
) : (
|
|
<><Play size={18} fill="currentColor" /> START TRADING</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
<style>{`
|
|
.strategy-card-hover:hover {
|
|
border-color: var(--bl-success-muted) !important;
|
|
transform: translateY(-8px);
|
|
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: color-mix(in oklab, var(--card) 88%, var(--foreground)) !important;
|
|
color: white !important;
|
|
}
|
|
.action-btn-hover:hover {
|
|
filter: brightness(1.1);
|
|
transform: scale(1.02);
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewAsCustomer?: boolean }> = ({
|
|
botState,
|
|
alerts = [],
|
|
previewAsCustomer = false
|
|
}) => {
|
|
const { user, profile: userProfile } = useAuth();
|
|
const [profiles, setProfiles] = useState<any[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [showWizard, setShowWizard] = useState(false);
|
|
const [editingProfile, setEditingProfile] = useState<any>(null);
|
|
const [expandedExplanations, setExpandedExplanations] = useState<Record<string, boolean>>({});
|
|
const [backtestProfile, setBacktestProfile] = useState<any>(null);
|
|
|
|
const tier = getUserTier(userProfile);
|
|
const { enabled: backtestEnabled, loading: backtestGateLoading } = useBacktestFeatureGate({ previewAsCustomer });
|
|
|
|
const fetchProfiles = async () => {
|
|
if (!user) return;
|
|
setIsLoading(true);
|
|
const data = await fetchTradeProfiles();
|
|
setProfiles(data || []);
|
|
setIsLoading(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchProfiles();
|
|
window.addEventListener('profiles-updated', fetchProfiles);
|
|
return () => window.removeEventListener('profiles-updated', fetchProfiles);
|
|
}, [user]);
|
|
|
|
const toggleBot = async (profile: any) => {
|
|
try {
|
|
await setTradeProfileActive(profile.id, !profile.is_active);
|
|
fetchProfiles();
|
|
} catch {
|
|
// existing UI remains silent on toggle failure
|
|
}
|
|
};
|
|
|
|
const deleteBot = async (id: string) => {
|
|
if (!confirm('Are you sure you want to delete this strategy?')) return;
|
|
try {
|
|
await deleteTradeProfile(id);
|
|
fetchProfiles();
|
|
} catch {
|
|
// existing UI remains silent on delete failure
|
|
}
|
|
};
|
|
|
|
if (showWizard) {
|
|
return (
|
|
<div style={{ animation: 'fadeIn 0.5s ease-out' }}>
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
setShowWizard(false);
|
|
setEditingProfile(null);
|
|
}}
|
|
variant="ghost"
|
|
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>
|
|
</div>
|
|
<StrategyWizard
|
|
editingProfile={editingProfile}
|
|
profile={userProfile}
|
|
previewAsCustomer={previewAsCustomer}
|
|
onComplete={() => {
|
|
setShowWizard(false);
|
|
setEditingProfile(null);
|
|
fetchProfiles();
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="strategy-workspace">
|
|
<div className="strategy-workspace-header">
|
|
<div>
|
|
<div className="strategy-workspace-eyebrow">
|
|
Strategy operations
|
|
</div>
|
|
<h2>My strategies</h2>
|
|
<p>
|
|
Monitor active profiles, review recent signals, and create new automated trading workflows.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="strategy-workspace-actions">
|
|
<div className="strategy-connection-pill" data-connected={botState?.connected ? 'true' : 'false'}>
|
|
{botState?.connected ? 'Systems online' : 'Systems disconnected'}
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
onClick={() => setShowWizard(true)}
|
|
variant="primary"
|
|
>
|
|
<Plus size={16} /> New strategy
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contextual Intelligence Row: Recent Activity + Symbol Volatility */}
|
|
{(() => {
|
|
const activeSymbols = [...new Set(profiles.flatMap(p => p.symbols?.split(',').map((s: string) => s.trim()) || []))];
|
|
const recentAlerts = [...alerts].reverse().slice(0, 5);
|
|
const symbolVolatility = activeSymbols
|
|
.filter(s => botState?.symbols?.[s])
|
|
.map(s => ({ symbol: s, change: botState.symbols[s].change24h || 0 }))
|
|
.sort((a, b) => Math.abs(b.change) - Math.abs(a.change));
|
|
|
|
return (
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '48px' }}>
|
|
{/* Recent Activity */}
|
|
<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: '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) => {
|
|
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: 'var(--bl-surface-overlay)', borderRadius: '10px' }}>
|
|
<Activity size={13} color="var(--bl-info)" />
|
|
<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: 'var(--bl-text-tertiary)', fontSize: '12px', fontStyle: 'italic' }}>No activity yet...</div>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Symbol-Specific Volatility */}
|
|
<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' }}>
|
|
<TrendingUp size={15} color="var(--bl-info)" />
|
|
<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: '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: '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 ? '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: 'var(--bl-text-tertiary)', fontSize: '12px', fontStyle: 'italic' }}>Deploy a strategy to see its market data</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
|
|
gap: '40px',
|
|
width: '100%'
|
|
}}>
|
|
{!backtestGateLoading && backtestEnabled && backtestProfile && (
|
|
<div style={{ gridColumn: '1 / -1' }}>
|
|
<BacktestRunnerPanel
|
|
profileId={backtestProfile.id}
|
|
strategyConfig={backtestProfile.strategy_config}
|
|
symbols={String(backtestProfile.symbols || '').split(',').map((s: string) => s.trim()).filter(Boolean)}
|
|
initialCapitalUsd={Number(backtestProfile.allocated_capital || 1000)}
|
|
title={`Backtest: ${backtestProfile.name}`}
|
|
onClose={() => setBacktestProfile(null)}
|
|
/>
|
|
</div>
|
|
)}
|
|
{profiles.map(profile => (
|
|
<ActiveStrategyCard
|
|
key={profile.id}
|
|
profile={profile}
|
|
botState={botState}
|
|
tier={tier}
|
|
onToggle={toggleBot}
|
|
onEdit={(p) => {
|
|
setEditingProfile(p);
|
|
setShowWizard(true);
|
|
}}
|
|
onBacktest={!backtestGateLoading && backtestEnabled ? ((p) => setBacktestProfile(p)) : undefined}
|
|
onDelete={deleteBot}
|
|
isExpanded={!!expandedExplanations[profile.id]}
|
|
onToggleExpand={(id) => setExpandedExplanations(prev => ({ ...prev, [id]: !prev[id] }))}
|
|
/>
|
|
))}
|
|
|
|
{profiles.length === 0 && !isLoading && (
|
|
<div style={{
|
|
gridColumn: '1 / -1',
|
|
padding: '100px',
|
|
background: 'var(--bl-surface-highlight)',
|
|
border: '2px dashed var(--bl-border-subtle)',
|
|
borderRadius: '40px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
textAlign: 'center'
|
|
}}>
|
|
<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 strategies yet</h3>
|
|
<p style={{ color: 'var(--bl-text-quiet)', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Create your first strategy to start monitoring markets and testing automated execution.</p>
|
|
<Button
|
|
type="button"
|
|
onClick={() => setShowWizard(true)}
|
|
variant="secondary"
|
|
style={{ marginTop: '32px', background: 'white', border: 'none', color: 'black', padding: '16px 40px', borderRadius: '16px', fontWeight: 900, cursor: 'pointer' }}
|
|
>
|
|
GET STARTED
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<style>{`
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|