0e3a2d7255
- Add 'You're paying' and 'You're receiving' sections with proper token dropdowns - Implement balance display and MAX button functionality - Add automatic receiving amount calculation based on paying amount - Enhance token selector with icons, names, and balance information - Improve leverage position value calculations and risk warnings - Update trade execution to use new paying/receiving token structure - Maintain all existing functionality including stop loss, take profit, and position management This creates a more intuitive and professional trading interface that matches Jupiter's UX patterns.
87 lines
3.6 KiB
JavaScript
87 lines
3.6 KiB
JavaScript
'use client'
|
|
import React, { useState } from 'react'
|
|
import AIAnalysisPanel from '../../components/AIAnalysisPanel.tsx'
|
|
import TradeExecutionPanel from '../../components/TradeExecutionPanel.js'
|
|
|
|
export default function AnalysisPage() {
|
|
const [analysisResult, setAnalysisResult] = useState(null)
|
|
const [currentSymbol, setCurrentSymbol] = useState('SOL')
|
|
|
|
const handleAnalysisComplete = (analysis, symbol) => {
|
|
setAnalysisResult(analysis)
|
|
setCurrentSymbol(symbol || 'SOL')
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-white">AI Analysis & Trading</h1>
|
|
<p className="text-gray-400 mt-2">Get comprehensive market insights powered by AI analysis and execute trades</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
|
|
{/* Left Column - AI Analysis */}
|
|
<div className="space-y-6">
|
|
<div className="bg-gray-900/50 rounded-lg p-6 border border-gray-800">
|
|
<h2 className="text-xl font-semibold text-white mb-4">📊 AI Market Analysis</h2>
|
|
<AIAnalysisPanel onAnalysisComplete={handleAnalysisComplete} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column - Trading Panel */}
|
|
<div className="space-y-6">
|
|
<div className="bg-gray-900/50 rounded-lg p-6 border border-gray-800">
|
|
<h2 className="text-xl font-semibold text-white mb-4">💰 Execute Trade</h2>
|
|
<TradeExecutionPanel
|
|
analysis={analysisResult}
|
|
symbol={currentSymbol}
|
|
/>
|
|
</div>
|
|
|
|
{/* Analysis Summary */}
|
|
{analysisResult && (
|
|
<div className="bg-blue-900/20 rounded-lg p-6 border border-blue-800">
|
|
<h3 className="text-lg font-semibold text-blue-400 mb-3">🎯 Analysis Summary</h3>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Symbol:</span>
|
|
<span className="text-white font-medium">{currentSymbol}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Sentiment:</span>
|
|
<span className={`font-medium ${
|
|
analysisResult.sentiment === 'BULLISH' ? 'text-green-400' :
|
|
analysisResult.sentiment === 'BEARISH' ? 'text-red-400' : 'text-yellow-400'
|
|
}`}>
|
|
{analysisResult.sentiment}
|
|
</span>
|
|
</div>
|
|
{analysisResult.entryPrice && (
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Entry Price:</span>
|
|
<span className="text-white font-medium">${analysisResult.entryPrice}</span>
|
|
</div>
|
|
)}
|
|
{analysisResult.stopLoss && (
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Stop Loss:</span>
|
|
<span className="text-red-400 font-medium">${analysisResult.stopLoss}</span>
|
|
</div>
|
|
)}
|
|
{analysisResult.takeProfit && (
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Take Profit:</span>
|
|
<span className="text-green-400 font-medium">${analysisResult.takeProfit}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|