Reorganize AI Analysis Panel structure
- Remove Quick Actions section with individual timeframe buttons - Update coin selection to only show BTC, ETH, SOL with CoinGecko icons - Move Analysis Timeframes section between presets and coin selection - Change coin grid layout to 3 columns for better visual balance - Replace Unicode coin symbols with proper CoinGecko image URLs
This commit is contained in:
mindesbunister
@@ -24,14 +24,24 @@ const timeframes = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
const popularCoins = [
|
const popularCoins = [
|
||||||
{ name: 'Bitcoin', symbol: 'BTCUSD', icon: '₿', color: 'from-orange-400 to-orange-600' },
|
{
|
||||||
{ name: 'Ethereum', symbol: 'ETHUSD', icon: 'Ξ', color: 'from-blue-400 to-blue-600' },
|
name: 'Bitcoin',
|
||||||
{ name: 'Solana', symbol: 'SOLUSD', icon: '◎', color: 'from-purple-400 to-purple-600' },
|
symbol: 'BTCUSD',
|
||||||
{ name: 'Sui', symbol: 'SUIUSD', icon: '🔷', color: 'from-cyan-400 to-cyan-600' },
|
icon: 'https://assets.coingecko.com/coins/images/1/large/bitcoin.png',
|
||||||
{ name: 'Avalanche', symbol: 'AVAXUSD', icon: '🔺', color: 'from-red-400 to-red-600' },
|
color: 'from-orange-400 to-orange-600'
|
||||||
{ name: 'Cardano', symbol: 'ADAUSD', icon: '♠', color: 'from-indigo-400 to-indigo-600' },
|
},
|
||||||
{ name: 'Polygon', symbol: 'MATICUSD', icon: '🔷', color: 'from-violet-400 to-violet-600' },
|
{
|
||||||
{ name: 'Chainlink', symbol: 'LINKUSD', icon: '🔗', color: 'from-blue-400 to-blue-600' },
|
name: 'Ethereum',
|
||||||
|
symbol: 'ETHUSD',
|
||||||
|
icon: 'https://assets.coingecko.com/coins/images/279/large/ethereum.png',
|
||||||
|
color: 'from-blue-400 to-blue-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Solana',
|
||||||
|
symbol: 'SOLUSD',
|
||||||
|
icon: 'https://assets.coingecko.com/coins/images/4128/large/solana.png',
|
||||||
|
color: 'from-purple-400 to-purple-600'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
// Progress tracking interfaces
|
// Progress tracking interfaces
|
||||||
@@ -606,56 +616,8 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Coin Selection */}
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
||||||
{popularCoins.map(coin => (
|
|
||||||
<button
|
|
||||||
key={coin.symbol}
|
|
||||||
onClick={() => quickAnalyze(coin.symbol)}
|
|
||||||
disabled={loading || selectedLayouts.length === 0}
|
|
||||||
className={`group relative p-3 rounded-lg border transition-all ${
|
|
||||||
loading || selectedLayouts.length === 0
|
|
||||||
? 'border-gray-700 bg-gray-800/30 cursor-not-allowed opacity-50'
|
|
||||||
: symbol === coin.symbol
|
|
||||||
? 'border-cyan-500 bg-cyan-500/10 text-cyan-300'
|
|
||||||
: 'border-gray-700 bg-gray-800/30 text-gray-300 hover:border-gray-600 hover:bg-gray-800/50 hover:text-white transform hover:scale-105'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className={`w-8 h-8 bg-gradient-to-br ${coin.color} rounded-lg flex items-center justify-center mx-auto mb-2`}>
|
|
||||||
<span className="text-white font-bold text-sm">{coin.icon}</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs font-medium">{coin.name}</div>
|
|
||||||
<div className="text-xs text-gray-500">{coin.symbol}</div>
|
|
||||||
{symbol === coin.symbol && (
|
|
||||||
<div className="absolute top-1 right-1 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Advanced Analysis Section */}
|
|
||||||
<div className="mb-8">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-300 flex items-center mb-4">
|
|
||||||
<span className="w-4 h-4 bg-purple-500 rounded-full mr-2"></span>
|
|
||||||
Advanced Analysis
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{/* Symbol Input */}
|
|
||||||
<div className="grid grid-cols-1 gap-4 mb-6">
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-400 mb-2">Trading Pair</label>
|
|
||||||
<input
|
|
||||||
className="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all"
|
|
||||||
value={symbol}
|
|
||||||
onChange={e => setSymbol(e.target.value.toUpperCase())}
|
|
||||||
placeholder="e.g., BTCUSD, ETHUSD"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Timeframe Selection */}
|
{/* Timeframe Selection */}
|
||||||
<div className="mb-6">
|
<div className="mb-4">
|
||||||
<label className="block text-xs font-medium text-gray-400 mb-3">
|
<label className="block text-xs font-medium text-gray-400 mb-3">
|
||||||
Analysis Timeframes
|
Analysis Timeframes
|
||||||
<span className="text-xs text-cyan-400 ml-2">({selectedTimeframes.length} selected)</span>
|
<span className="text-xs text-cyan-400 ml-2">({selectedTimeframes.length} selected)</span>
|
||||||
@@ -696,6 +658,59 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Coin Selection */}
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
{popularCoins.map(coin => (
|
||||||
|
<button
|
||||||
|
key={coin.symbol}
|
||||||
|
onClick={() => quickAnalyze(coin.symbol)}
|
||||||
|
disabled={loading || selectedLayouts.length === 0}
|
||||||
|
className={`group relative p-3 rounded-lg border transition-all ${
|
||||||
|
loading || selectedLayouts.length === 0
|
||||||
|
? 'border-gray-700 bg-gray-800/30 cursor-not-allowed opacity-50'
|
||||||
|
: symbol === coin.symbol
|
||||||
|
? 'border-cyan-500 bg-cyan-500/10 text-cyan-300'
|
||||||
|
: 'border-gray-700 bg-gray-800/30 text-gray-300 hover:border-gray-600 hover:bg-gray-800/50 hover:text-white transform hover:scale-105'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className={`w-8 h-8 bg-gradient-to-br ${coin.color} rounded-lg flex items-center justify-center mx-auto mb-2 p-1`}>
|
||||||
|
<img
|
||||||
|
src={coin.icon}
|
||||||
|
alt={coin.name}
|
||||||
|
className="w-6 h-6 rounded-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs font-medium">{coin.name}</div>
|
||||||
|
<div className="text-xs text-gray-500">{coin.symbol}</div>
|
||||||
|
{symbol === coin.symbol && (
|
||||||
|
<div className="absolute top-1 right-1 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Advanced Analysis Section */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-300 flex items-center mb-4">
|
||||||
|
<span className="w-4 h-4 bg-purple-500 rounded-full mr-2"></span>
|
||||||
|
Advanced Analysis
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* Symbol Input */}
|
||||||
|
<div className="grid grid-cols-1 gap-4 mb-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-400 mb-2">Trading Pair</label>
|
||||||
|
<input
|
||||||
|
className="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all"
|
||||||
|
value={symbol}
|
||||||
|
onChange={e => setSymbol(e.target.value.toUpperCase())}
|
||||||
|
placeholder="e.g., BTCUSD, ETHUSD"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* Layout Selection */}
|
{/* Layout Selection */}
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<label className="block text-xs font-medium text-gray-400 mb-3">Analysis Layouts</label>
|
<label className="block text-xs font-medium text-gray-400 mb-3">Analysis Layouts</label>
|
||||||
@@ -746,53 +761,6 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Quick Timeframe Actions */}
|
|
||||||
<div className="mb-6">
|
|
||||||
<label className="block text-xs font-medium text-gray-400 mb-3">Quick Actions</label>
|
|
||||||
<div className="grid grid-cols-4 gap-2 mb-3">
|
|
||||||
{timeframes.map(tf => (
|
|
||||||
<button
|
|
||||||
key={tf.value}
|
|
||||||
onClick={() => quickTimeframeTest(tf.value)}
|
|
||||||
disabled={loading || selectedLayouts.length === 0}
|
|
||||||
className={`py-2 px-3 rounded-lg text-xs font-medium transition-all ${
|
|
||||||
selectedTimeframes.includes(tf.value)
|
|
||||||
? 'bg-cyan-500 text-white shadow-lg'
|
|
||||||
: loading
|
|
||||||
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
|
|
||||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white transform hover:scale-105'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{tf.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
|
||||||
<button
|
|
||||||
onClick={testAllTimeframes}
|
|
||||||
disabled={loading || selectedLayouts.length === 0 || !symbol}
|
|
||||||
className={`py-2 px-4 rounded-lg text-sm font-medium transition-all ${
|
|
||||||
loading
|
|
||||||
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
|
|
||||||
: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
🔍 Analyze All Timeframes
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedTimeframes([])}
|
|
||||||
disabled={loading || selectedTimeframes.length === 0}
|
|
||||||
className={`py-2 px-4 rounded-lg text-sm font-medium transition-all ${
|
|
||||||
loading || selectedTimeframes.length === 0
|
|
||||||
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
|
|
||||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white transform hover:scale-[1.02] active:scale-[0.98]'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
🗑️ Clear Selection
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Analyze Button */}
|
{/* Analyze Button */}
|
||||||
<button
|
<button
|
||||||
className={`w-full py-3 px-6 rounded-lg font-semibold transition-all duration-300 ${
|
className={`w-full py-3 px-6 rounded-lg font-semibold transition-all duration-300 ${
|
||||||
|
|||||||
Reference in New Issue
Block a user