feat: Add trade execution and screenshot gallery to AI analysis
- Create TradeModal component for executing trades with entry, TP, SL - Add ScreenshotGallery component with click-to-enlarge functionality - Integrate trade buttons in both single and multi-timeframe analysis results - Add screenshot gallery that displays captured TradingView charts - Parse analysis data to pre-fill trade modal with AI recommendations - Support trade execution via /api/trading endpoint - Add visual indicators and smooth transitions for better UX Trade button features: - Pre-filled entry, take profit, and stop loss from AI analysis - Configurable position size and leverage - Real-time validation and error handling Screenshot gallery features: - Grid layout with hover effects - Click to enlarge in full-screen modal - Support for both single and multi-timeframe results - Chart information overlay with timeframe labels
This commit is contained in:
mindesbunister
@@ -1,5 +1,8 @@
|
||||
"use client"
|
||||
import React, { useState } from 'react'
|
||||
import Modal from './Modal'
|
||||
import TradeModal from './TradeModal'
|
||||
import ScreenshotGallery from './ScreenshotGallery'
|
||||
|
||||
const layouts = (process.env.NEXT_PUBLIC_TRADINGVIEW_LAYOUTS || 'ai,Diy module').split(',').map(l => l.trim())
|
||||
const timeframes = [
|
||||
@@ -54,6 +57,11 @@ export default function AIAnalysisPanel() {
|
||||
const [result, setResult] = useState<any>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [progress, setProgress] = useState<AnalysisProgress | null>(null)
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [modalData, setModalData] = useState<any>(null)
|
||||
const [enlargedScreenshot, setEnlargedScreenshot] = useState<string | null>(null)
|
||||
const [tradeModalOpen, setTradeModalOpen] = useState(false)
|
||||
const [tradeModalData, setTradeModalData] = useState<any>(null)
|
||||
|
||||
// Helper function to safely render any value
|
||||
const safeRender = (value: any): string => {
|
||||
@@ -390,6 +398,59 @@ export default function AIAnalysisPanel() {
|
||||
await performAnalysis()
|
||||
}
|
||||
|
||||
// Trade initiation handler
|
||||
const handleTradeClick = (tfResult: any) => {
|
||||
const analysis = tfResult?.result?.analysis || tfResult?.analysis || {}
|
||||
|
||||
setTradeModalData({
|
||||
entry: analysis.entry?.price || analysis.entry || '',
|
||||
tp: analysis.takeProfits?.tp1?.price || analysis.takeProfits?.tp1 || analysis.takeProfits || '',
|
||||
sl: analysis.stopLoss?.price || analysis.stopLoss || '',
|
||||
symbol: symbol,
|
||||
timeframe: tfResult?.timeframeLabel || tfResult?.timeframe || '',
|
||||
})
|
||||
setTradeModalOpen(true)
|
||||
}
|
||||
|
||||
// Trade execution API call
|
||||
const executeTrade = async (tradeData: any) => {
|
||||
try {
|
||||
const response = await fetch('/api/trading', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
symbol: tradeData.symbol,
|
||||
side: 'buy', // Could be derived from analysis
|
||||
size: parseFloat(tradeData.size),
|
||||
price: parseFloat(tradeData.entry),
|
||||
stopLoss: parseFloat(tradeData.sl),
|
||||
takeProfit: parseFloat(tradeData.tp),
|
||||
leverage: parseInt(tradeData.leverage),
|
||||
timeframe: tradeData.timeframe
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (response.ok) {
|
||||
// Show success message
|
||||
alert(`Trade executed successfully! Order ID: ${result.orderId || 'N/A'}`)
|
||||
} else {
|
||||
alert(`Trade failed: ${result.error || 'Unknown error'}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Trade execution failed:', error)
|
||||
alert('Trade execution failed. Please check your connection.')
|
||||
}
|
||||
|
||||
setTradeModalOpen(false)
|
||||
}
|
||||
|
||||
// Screenshot gallery modal
|
||||
const handleScreenshotClick = (src: string) => {
|
||||
setEnlargedScreenshot(src)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
@@ -452,34 +513,31 @@ export default function AIAnalysisPanel() {
|
||||
<button
|
||||
key={coin.symbol}
|
||||
onClick={() => quickAnalyze(coin.symbol)}
|
||||
disabled={loading || selectedTimeframes.length === 0}
|
||||
className={`group relative p-4 rounded-xl border transition-all duration-300 ${
|
||||
symbol === coin.symbol
|
||||
? 'border-cyan-500 bg-cyan-500/10 shadow-lg shadow-cyan-500/20'
|
||||
: 'border-gray-700 bg-gray-800/50 hover:border-gray-600 hover:bg-gray-800'
|
||||
} ${loading || selectedTimeframes.length === 0 ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 hover:shadow-lg'}`}
|
||||
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-10 h-10 bg-gradient-to-br ${coin.color} rounded-lg flex items-center justify-center mb-3 mx-auto text-white font-bold`}>
|
||||
{coin.icon}
|
||||
<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-semibold text-white">{coin.name}</div>
|
||||
<div className="text-xs text-gray-400 mt-1">{coin.symbol}</div>
|
||||
{selectedTimeframes.length > 0 && (
|
||||
<div className="text-xs text-cyan-400 mt-1 font-medium">
|
||||
{selectedTimeframes.length} TF{selectedTimeframes.length > 1 ? 's' : ''}
|
||||
</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-2 right-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
||||
<div className="absolute top-1 right-1 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advanced Controls */}
|
||||
<div className="border-t border-gray-700 pt-6">
|
||||
<h3 className="text-sm font-semibold text-gray-300 mb-4 flex items-center">
|
||||
{/* 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>
|
||||
@@ -834,9 +892,19 @@ export default function AIAnalysisPanel() {
|
||||
}`}>
|
||||
{timeframeResult.success ? '✅' : '❌'} {timeframeResult.timeframeLabel} Timeframe
|
||||
</h5>
|
||||
<span className="text-xs text-gray-400">
|
||||
{timeframeResult.success ? 'Analysis Complete' : 'Failed'}
|
||||
</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
{timeframeResult.success && timeframeResult.result.analysis && (
|
||||
<button
|
||||
onClick={() => handleTradeClick(timeframeResult)}
|
||||
className="px-3 py-1 bg-gradient-to-r from-green-500 to-green-600 text-white text-xs font-medium rounded hover:from-green-600 hover:to-green-700 transition-all transform hover:scale-105"
|
||||
>
|
||||
💰 Trade
|
||||
</button>
|
||||
)}
|
||||
<span className="text-xs text-gray-400">
|
||||
{timeframeResult.success ? 'Analysis Complete' : 'Failed'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{timeframeResult.success && timeframeResult.result.analysis && (
|
||||
@@ -927,11 +995,21 @@ export default function AIAnalysisPanel() {
|
||||
</span>
|
||||
Analysis Complete
|
||||
</h3>
|
||||
{result.screenshots && (
|
||||
<div className="text-xs text-gray-400">
|
||||
Screenshots: {result.screenshots.length} captured
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center space-x-3">
|
||||
{result.analysis && (
|
||||
<button
|
||||
onClick={() => handleTradeClick({ result, timeframeLabel: selectedTimeframes.map(tf => timeframes.find(t => t.value === tf)?.label).join(', ') })}
|
||||
className="px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white text-sm font-medium rounded-lg hover:from-green-600 hover:to-green-700 transition-all transform hover:scale-105"
|
||||
>
|
||||
💰 Execute Trade
|
||||
</button>
|
||||
)}
|
||||
{result.screenshots && (
|
||||
<div className="text-xs text-gray-400">
|
||||
Screenshots: {result.screenshots.length} captured
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
@@ -1267,6 +1345,38 @@ export default function AIAnalysisPanel() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Screenshot Gallery */}
|
||||
{result && result.screenshots && (
|
||||
<ScreenshotGallery
|
||||
screenshots={result.screenshots}
|
||||
symbol={symbol}
|
||||
timeframes={selectedTimeframes.map(tf => timeframes.find(t => t.value === tf)?.label || tf)}
|
||||
enlargedImage={enlargedScreenshot}
|
||||
onImageClick={handleScreenshotClick}
|
||||
onClose={() => setEnlargedScreenshot(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Multi-timeframe Screenshot Gallery */}
|
||||
{result && result.type === 'multi_timeframe' && result.results && (
|
||||
<ScreenshotGallery
|
||||
screenshots={result.results.filter((r: any) => r.success && r.result.screenshots).flatMap((r: any) => r.result.screenshots)}
|
||||
symbol={symbol}
|
||||
timeframes={result.results.filter((r: any) => r.success).map((r: any) => r.timeframeLabel)}
|
||||
enlargedImage={enlargedScreenshot}
|
||||
onImageClick={handleScreenshotClick}
|
||||
onClose={() => setEnlargedScreenshot(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Trade Modal */}
|
||||
<TradeModal
|
||||
isOpen={tradeModalOpen}
|
||||
onClose={() => setTradeModalOpen(false)}
|
||||
tradeData={tradeModalData}
|
||||
onExecute={executeTrade}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user