diff --git a/app/api/trading/execute-perp/route.js b/app/api/trading/execute-perp/route.js index c8369c7..ff7f074 100644 --- a/app/api/trading/execute-perp/route.js +++ b/app/api/trading/execute-perp/route.js @@ -66,7 +66,23 @@ export async function POST(request) { ) } - // For now, simulate perpetual trades until Jupiter Perpetuals integration is complete + // Check if we should use real DEX or simulation + if (useRealDEX) { + console.log('🚀 Executing REAL perpetual trade via Jupiter Perpetuals') + + // TODO: Implement actual Jupiter Perpetuals integration here + // For now, return an error indicating real trading is not yet implemented + return NextResponse.json( + { + success: false, + error: 'Real Jupiter Perpetuals trading not yet implemented. Set useRealDEX: false for simulation mode.', + feature: 'JUPITER_PERPS_REAL_TRADING', + status: 'IN_DEVELOPMENT' + }, + { status: 501 } // Not Implemented + ) + } + console.log('🎮 Executing SIMULATED perpetual trade (Jupiter Perps integration in development)') // Normalize side for perps diff --git a/app/chart-test/page.tsx b/app/chart-test/page.tsx new file mode 100644 index 0000000..d310e2e --- /dev/null +++ b/app/chart-test/page.tsx @@ -0,0 +1,14 @@ +'use client' +import React from 'react' +import TradingChart from '../../components/TradingChart.tsx' + +export default function SimpleChartTest() { + return ( +
+
+

Chart Test

+ +
+
+ ) +} diff --git a/app/chart-trading-demo/page.tsx b/app/chart-trading-demo/page.tsx new file mode 100644 index 0000000..b15f7ee --- /dev/null +++ b/app/chart-trading-demo/page.tsx @@ -0,0 +1,220 @@ +'use client' +import React, { useState, useEffect } from 'react' +import TradingChart from '../../components/TradingChart' +import CompactTradingPanel from '../../components/CompactTradingPanel' + +export default function ChartTradingPageSimple() { + const [currentPrice, setCurrentPrice] = useState(166.21) + const [positions, setPositions] = useState([ + // Mock position data for demo + { + id: 'demo_pos_1', + symbol: 'SOL/USDC', + side: 'BUY' as 'BUY' | 'SELL', + amount: 0.5, + entryPrice: 165.50, + stopLoss: 160.00, + takeProfit: 170.00, + currentPrice: 166.21, + unrealizedPnl: 0.355, + } + ]) + const [selectedSymbol, setSelectedSymbol] = useState('SOL') + + const handleTrade = async (tradeData: any) => { + try { + console.log('Trade executed (demo):', tradeData) + + // Create a mock position for demo + const newPosition = { + id: `demo_${Date.now()}`, + symbol: `${tradeData.symbol}/USDC`, + side: tradeData.side, + amount: tradeData.amount, + entryPrice: tradeData.price, + stopLoss: tradeData.stopLoss, + takeProfit: tradeData.takeProfit, + currentPrice: currentPrice, + unrealizedPnl: 0, + } + + setPositions(prev => [...prev, newPosition]) + alert(`Demo trade executed: ${tradeData.side} ${tradeData.amount} ${tradeData.symbol}`) + } catch (error) { + console.error('Trade execution error:', error) + } + } + + const handlePriceUpdate = (price: number) => { + setCurrentPrice(price) + + // Update position P&L based on new price + setPositions(prev => prev.map(pos => ({ + ...pos, + currentPrice: price, + unrealizedPnl: pos.side === 'BUY' + ? (price - pos.entryPrice) * pos.amount + : (pos.entryPrice - price) * pos.amount + }))) + } + + const handleClosePosition = (positionId: string) => { + setPositions(prev => prev.filter(pos => pos.id !== positionId)) + alert('Position closed (demo)') + } + + return ( +
+ {/* Top Bar */} +
+
+
+

Chart Trading Terminal

+ + {/* Symbol Selector */} +
+ {['SOL', 'BTC', 'ETH'].map(symbol => ( + + ))} +
+
+ + {/* Market Status */} +
+
+
+ Demo Mode +
+
+ {new Date().toLocaleTimeString()} +
+
+
+
+ + {/* Main Trading Interface */} +
+ {/* Chart Area (70% width) */} +
+ +
+ + {/* Trading Panel (30% width) */} +
+ +
+
+ + {/* Bottom Panel - Positions */} +
+
+
+
+ + + +
+ + {positions.length > 0 && ( +
+ Total P&L: sum + (pos.unrealizedPnl || 0), 0) >= 0 + ? 'text-green-400' : 'text-red-400' + }`}> + {positions.reduce((sum, pos) => sum + (pos.unrealizedPnl || 0), 0) >= 0 ? '+' : ''}$ + {positions.reduce((sum, pos) => sum + (pos.unrealizedPnl || 0), 0).toFixed(2)} + +
+ )} +
+ + {/* Positions Table */} +
+ {positions.length === 0 ? ( +
+ No open positions +
+ ) : ( +
+ {positions.map((position: any) => ( +
+
+
+
+
+ {position.symbol} • {position.side} +
+
+ Size: {position.amount} • Entry: ${position.entryPrice?.toFixed(2)} +
+ {position.stopLoss && ( +
+ SL: ${position.stopLoss.toFixed(2)} +
+ )} + {position.takeProfit && ( +
+ TP: ${position.takeProfit.toFixed(2)} +
+ )} +
+
+ +
+
+ ${(position.amount * position.currentPrice).toFixed(2)} +
+
= 0 ? 'text-green-400' : 'text-red-400' + }`}> + {(position.unrealizedPnl || 0) >= 0 ? '+' : ''}${(position.unrealizedPnl || 0).toFixed(2)} +
+
+ +
+ +
+
+ ))} +
+ )} +
+
+
+
+ ) +} diff --git a/app/chart-trading/page.tsx b/app/chart-trading/page.tsx new file mode 100644 index 0000000..8c91d17 --- /dev/null +++ b/app/chart-trading/page.tsx @@ -0,0 +1,198 @@ +'use client' +import React, { useState, useEffect } from 'react' +import TradingChart from '../../components/TradingChart' +import CompactTradingPanel from '../../components/CompactTradingPanel' +import PositionsPanel from '../../components/PositionsPanel' + +export default function ChartTradingPage() { + const [currentPrice, setCurrentPrice] = useState(166.21) + const [positions, setPositions] = useState([]) + const [selectedSymbol, setSelectedSymbol] = useState('SOL') + + useEffect(() => { + fetchPositions() + const interval = setInterval(fetchPositions, 10000) // Update every 10 seconds + return () => clearInterval(interval) + }, []) + + const fetchPositions = async () => { + try { + const response = await fetch('/api/trading/positions') + const data = await response.json() + + if (data.success) { + setPositions(data.positions || []) + } + } catch (error) { + console.error('Failed to fetch positions:', error) + } + } + + const handleTrade = async (tradeData: any) => { + try { + console.log('Executing trade:', tradeData) + + // For perpetual trades, use the execute-perp endpoint + const response = await fetch('/api/trading/execute-perp', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(tradeData) + }) + + const result = await response.json() + + if (result.success) { + alert(`Trade executed successfully! ${result.message}`) + fetchPositions() // Refresh positions + } else { + alert(`Trade failed: ${result.error || result.message}`) + } + } catch (error) { + console.error('Trade execution error:', error) + alert('Trade execution failed. Please try again.') + } + } + + const handlePriceUpdate = (price: number) => { + setCurrentPrice(price) + } + + return ( +
+ {/* Top Bar */} +
+
+
+

Trading Terminal

+ + {/* Symbol Selector */} +
+ {['SOL', 'BTC', 'ETH'].map(symbol => ( + + ))} +
+
+ + {/* Market Status */} +
+
+
+ Market Open +
+
+ Server Time: {new Date().toLocaleTimeString()} +
+
+
+
+ + {/* Main Trading Interface */} +
+ {/* Chart Area (70% width) */} +
+ +
+ + {/* Trading Panel (30% width) */} +
+ +
+
+ + {/* Bottom Panel - Positions */} +
+
+
+
+ + + +
+ + {positions.length > 0 && ( +
+ Total P&L: +$0.00 +
+ )} +
+ + {/* Positions Table */} +
+ {positions.length === 0 ? ( +
+ No open positions +
+ ) : ( +
+ {positions.map((position: any) => ( +
+
+
+
+
+ {position.symbol} • {position.side} +
+
+ Size: {position.amount} • Entry: ${position.entryPrice?.toFixed(2)} +
+
+
+ +
+
+ ${position.totalValue?.toFixed(2) || '0.00'} +
+
= 0 ? 'text-green-400' : 'text-red-400' + }`}> + {(position.unrealizedPnl || 0) >= 0 ? '+' : ''}${(position.unrealizedPnl || 0).toFixed(2)} +
+
+ +
+ + +
+
+ ))} +
+ )} +
+
+
+
+ ) +} diff --git a/app/globals.css b/app/globals.css index 6450dbb..a51cd7d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -93,3 +93,99 @@ input[type="range"]:focus::-webkit-slider-thumb { input[type="range"]:focus::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); } + +/* Trading Chart Slider Styles */ +.slider::-webkit-slider-thumb { + appearance: none; + width: 20px; + height: 20px; + border-radius: 50%; + background: #3b82f6; + cursor: pointer; + border: 2px solid #1f2937; + box-shadow: 0 0 0 1px #3b82f6; +} + +.slider::-webkit-slider-thumb:hover { + background: #2563eb; + box-shadow: 0 0 0 2px #2563eb; +} + +.slider::-moz-range-thumb { + width: 20px; + height: 20px; + border-radius: 50%; + background: #3b82f6; + cursor: pointer; + border: 2px solid #1f2937; + box-shadow: 0 0 0 1px #3b82f6; +} + +/* Chart container styling */ +.trading-chart-container { + position: relative; + background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); +} + +/* Position indicator styles */ +.position-indicator { + position: absolute; + top: 10px; + right: 10px; + background: rgba(0, 0, 0, 0.8); + border-radius: 8px; + padding: 8px 12px; + color: white; + font-size: 12px; + z-index: 10; +} + +/* Trading panel animations */ +.trade-button { + transition: all 0.2s ease-in-out; +} + +.trade-button:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.trade-button:active { + transform: translateY(0); +} + +/* Chart loading animation */ +.chart-loading { + display: flex; + align-items: center; + justify-content: center; + height: 600px; + background: #1a1a1a; + border-radius: 8px; +} + +.loading-spinner { + border: 2px solid #374151; + border-top: 2px solid #3b82f6; + border-radius: 50%; + width: 32px; + height: 32px; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Responsive chart adjustments */ +@media (max-width: 1024px) { + .trading-interface { + flex-direction: column; + } + + .trading-panel { + width: 100%; + max-width: none; + } +} diff --git a/components/CompactTradingPanel.tsx b/components/CompactTradingPanel.tsx new file mode 100644 index 0000000..f28b1e1 --- /dev/null +++ b/components/CompactTradingPanel.tsx @@ -0,0 +1,270 @@ +'use client' +import React, { useState } from 'react' + +interface CompactTradingPanelProps { + symbol: string + currentPrice: number + onTrade?: (tradeData: any) => void +} + +export default function CompactTradingPanel({ + symbol = 'SOL', + currentPrice = 166.21, + onTrade +}: CompactTradingPanelProps) { + const [side, setSide] = useState<'LONG' | 'SHORT'>('LONG') + const [orderType, setOrderType] = useState<'MARKET' | 'LIMIT'>('MARKET') + const [amount, setAmount] = useState('') + const [price, setPrice] = useState(currentPrice.toString()) + const [leverage, setLeverage] = useState(1) + const [stopLoss, setStopLoss] = useState('') + const [takeProfit, setTakeProfit] = useState('') + const [loading, setLoading] = useState(false) + + // Update price when currentPrice changes + React.useEffect(() => { + if (orderType === 'MARKET') { + setPrice(currentPrice.toString()) + } + }, [currentPrice, orderType]) + + const calculateLiquidationPrice = () => { + const entryPrice = parseFloat(price) || currentPrice + const leverage_ratio = leverage || 1 + if (side === 'LONG') { + return entryPrice * (1 - 1 / leverage_ratio) + } else { + return entryPrice * (1 + 1 / leverage_ratio) + } + } + + const calculatePositionSize = () => { + const amt = parseFloat(amount) || 0 + const entryPrice = parseFloat(price) || currentPrice + return amt * entryPrice + } + + const handleTrade = async () => { + if (!amount || parseFloat(amount) <= 0) { + alert('Please enter a valid amount') + return + } + + setLoading(true) + try { + const tradeData = { + symbol, + side: side === 'LONG' ? 'BUY' : 'SELL', + amount: parseFloat(amount), + price: orderType === 'MARKET' ? currentPrice : parseFloat(price), + type: orderType.toLowerCase(), + leverage, + stopLoss: stopLoss ? parseFloat(stopLoss) : undefined, + takeProfit: takeProfit ? parseFloat(takeProfit) : undefined, + tradingMode: 'PERP' + } + + onTrade?.(tradeData) + } catch (error) { + console.error('Trade execution failed:', error) + } finally { + setLoading(false) + } + } + + const leverageOptions = [1, 2, 3, 5, 10, 20, 25, 50, 100] + + return ( +
+ {/* Header */} +
+

{symbol}/USDC

+
+ ${currentPrice.toFixed(2)} +
+
+ + {/* Long/Short Toggle */} +
+ + +
+ + {/* Order Type */} +
+ + +
+ + {/* Leverage Slider */} +
+
+ + {leverage}x +
+
+ setLeverage(parseInt(e.target.value))} + className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider" + /> +
+ {leverageOptions.map(lev => ( + {lev}x + ))} +
+
+
+ + {/* Amount Input */} +
+ +
+ setAmount(e.target.value)} + placeholder="0.00" + className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none" + /> +
+ + + +
+
+
+ + {/* Price Input (for limit orders) */} + {orderType === 'LIMIT' && ( +
+ + setPrice(e.target.value)} + placeholder="0.00" + className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none" + /> +
+ )} + + {/* Stop Loss & Take Profit */} +
+
+ + setStopLoss(e.target.value)} + placeholder="Optional" + className="w-full p-2 bg-gray-800 border border-gray-700 rounded text-white placeholder-gray-400 text-sm focus:border-red-500 focus:outline-none" + /> +
+
+ + setTakeProfit(e.target.value)} + placeholder="Optional" + className="w-full p-2 bg-gray-800 border border-gray-700 rounded text-white placeholder-gray-400 text-sm focus:border-green-500 focus:outline-none" + /> +
+
+ + {/* Position Info */} +
+
+ Position Size: + ${calculatePositionSize().toFixed(2)} +
+
+ Liquidation Price: + ${calculateLiquidationPrice().toFixed(2)} +
+
+ Available: + $5,000.00 +
+
+ + {/* Trade Button */} + + + {/* Quick Actions */} +
+ + +
+
+ ) +} diff --git a/components/Navigation.tsx b/components/Navigation.tsx index a5057d5..9fe8404 100644 --- a/components/Navigation.tsx +++ b/components/Navigation.tsx @@ -22,6 +22,12 @@ const navItems = [ icon: '💰', description: 'Execute trades' }, + { + name: 'Chart Trading', + href: '/chart-trading-demo', + icon: '📈', + description: 'Advanced chart trading' + }, { name: 'Automation', href: '/automation', diff --git a/components/TradeModal_backup.tsx b/components/TradeModal_backup.tsx new file mode 100644 index 0000000..fb765c7 --- /dev/null +++ b/components/TradeModal_backup.tsx @@ -0,0 +1,402 @@ +"use client" +import React, { useState, useEffect, ChangeEvent } from 'react' + +interface TradeModalProps { + isOpen: boolean + onClose: () => void + tradeData: { + entry: string + tp: string + sl: string + risk: string + reward: string + action: 'BUY' | 'SELL' + } | null + onExecute: (data: any) => void +} + +interface FormData { + entry: string + tp1: string + tp2: string + sl: string + positionValue: string + leverage: number + tradingCoin: string + tp1Percentage: number + tp2Percentage: number +} + +const supportedCoins = [ + { symbol: 'SOL', name: 'Solana', icon: '◎', price: 159.5 }, + { symbol: 'USDC', name: 'USD Coin', icon: '$', price: 1.0 } +] + +export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: TradeModalProps) { + console.log('🚀 TradeModal loaded with enhanced features - Version 2.0') + const [loading, setLoading] = useState(false) + const [walletBalance, setWalletBalance] = useState(null) + const [formData, setFormData] = useState({ + entry: tradeData?.entry || '', + tp1: tradeData?.tp || '', + tp2: '', + sl: tradeData?.sl || '', + positionValue: '64', // USD amount for position size + leverage: 3, + tradingCoin: 'SOL', + tp1Percentage: 50, // % of position to close at TP1 + tp2Percentage: 50 // % of position to close at TP2 + }) + + // Fetch wallet balance when modal opens + useEffect(() => { + if (isOpen) { + fetchWalletBalance() + } + }, [isOpen]) + + const fetchWalletBalance = async () => { + try { + const response = await fetch('/api/wallet/balance') + const data = await response.json() + setWalletBalance(data) + } catch (error) { + console.error('Failed to fetch wallet balance:', error) + setWalletBalance({ solBalance: 2.5, usdcBalance: 150.0 }) // Fallback + } + } + + // Helper function to safely format numbers + const formatNumber = (value: number, decimals: number = 2): string => { + return isNaN(value) ? '0.00' : value.toFixed(decimals) + } + + // Calculate various metrics + const currentCoin = supportedCoins.find(coin => coin.symbol === formData.tradingCoin) + const coinPrice = currentCoin?.price || 159.5 // Default to SOL price + + // Position calculations + const positionValueUSD = parseFloat(formData.positionValue) || 0 + const positionSizeSOL = positionValueUSD / coinPrice // Calculate SOL amount from USD + const leverageNum = formData.leverage || 1 + const entryPrice = parseFloat(formData.entry) || 0 + const tp1Price = parseFloat(formData.tp1) || 0 + const tp2Price = parseFloat(formData.tp2) || 0 + const slPrice = parseFloat(formData.sl) || 0 + + // Profit calculations + const leveragedValue = positionValueUSD * leverageNum + + // TP1 Profit calculation (percentage-based) + const profitTP1 = (entryPrice > 0 && tp1Price > 0 && leveragedValue > 0) ? + ((tp1Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp1Percentage / 100) : 0 + + // TP2 Profit calculation (percentage-based) + const profitTP2 = (entryPrice > 0 && tp2Price > 0 && leveragedValue > 0) ? + ((tp2Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp2Percentage / 100) : 0 + + // Stop Loss calculation + const lossAtSL = (entryPrice > 0 && slPrice > 0 && leveragedValue > 0) ? + ((slPrice - entryPrice) / entryPrice) * leveragedValue : 0 + + const totalPotentialProfit = profitTP1 + profitTP2 + + if (!isOpen) return null + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + setLoading(true) + + try { + console.log('🎯 Executing trade with data:', formData) + + const tradingData = { + ...formData, + positionSizeSOL: formatNumber(positionSizeSOL, 4), + leveragedValue: formatNumber(leveragedValue, 2), + profitTP1: formatNumber(profitTP1, 2), + profitTP2: formatNumber(profitTP2, 2), + totalProfit: formatNumber(totalPotentialProfit, 2), + lossAtSL: formatNumber(lossAtSL, 2) + } + + await onExecute(tradingData) + onClose() + } catch (error) { + console.error('Trade execution failed:', error) + } finally { + setLoading(false) + } + } + + const setPositionPercentage = (percentage: number) => { + if (walletBalance && walletBalance.solBalance) { + const availableBalance = walletBalance.solBalance * coinPrice // Convert SOL to USD + const newPosition = (availableBalance * percentage / 100).toFixed(0) + setFormData(prev => ({ ...prev, positionValue: newPosition })) + } + } + + return ( +
+
+ {/* Header */} +
+
+

Execute Trade

+

Configure your position details

+
+ +
+ +
+ {/* Coin Selection */} +
+ +
+ {supportedCoins.map((coin) => ( + + ))} +
+
+ + {/* Position Size */} +
+
+ + {walletBalance && ( + + Available: ${formatNumber(walletBalance.solBalance * coinPrice, 2)} + + )} +
+
+ setFormData(prev => ({ ...prev, positionValue: e.target.value }))} + className="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 transition-colors" + placeholder="Enter USD amount" + /> + + {/* Quick percentage buttons */} +
+ {[25, 50, 75, 100].map((percent) => ( + + ))} +
+ + {/* Position info */} +
+
Position Size: {formatNumber(positionSizeSOL, 4)} {formData.tradingCoin}
+
USD Value: ${formatNumber(positionValueUSD, 2)}
+
+
+
+ + {/* Leverage */} +
+
+ + {formData.leverage}x +
+ setFormData(prev => ({ ...prev, leverage: parseInt(e.target.value) }))} + className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer range-slider" + /> +
+ 1x + 5x + 10x +
+
+ Leveraged Value: ${formatNumber(leveragedValue, 2)} +
+
+ + {/* Price Inputs Grid */} +
+
+ + setFormData(prev => ({ ...prev, entry: e.target.value }))} + className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500" + placeholder="0.00" + /> +
+
+ + setFormData(prev => ({ ...prev, sl: e.target.value }))} + className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500" + placeholder="0.00" + /> +
+
+ + {/* Take Profit 1 */} +
+
+

Take Profit 1

+ +${formatNumber(profitTP1, 2)} +
+
+ setFormData(prev => ({ ...prev, tp1: e.target.value }))} + className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-green-500" + placeholder="TP1 Price" + /> +
+ Allocation: + setFormData(prev => ({ ...prev, tp1Percentage: parseInt(e.target.value) }))} + className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" + /> + {formData.tp1Percentage}% +
+
+
+ + {/* Take Profit 2 */} +
+
+

Take Profit 2

+ +${formatNumber(profitTP2, 2)} +
+
+ setFormData(prev => ({ ...prev, tp2: e.target.value }))} + className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-green-500" + placeholder="TP2 Price" + /> +
+ Allocation: + setFormData(prev => ({ ...prev, tp2Percentage: parseInt(e.target.value) }))} + className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" + /> + {formData.tp2Percentage}% +
+
+
+ + {/* Profit Summary */} +
+

Profit Summary

+
+
+
+ TP1 Profit: + +${formatNumber(profitTP1, 2)} +
+
+ TP2 Profit: + +${formatNumber(profitTP2, 2)} +
+
+
+
+ Total Profit: + +${formatNumber(totalPotentialProfit, 2)} +
+
+ Max Loss: + ${formatNumber(Math.abs(lossAtSL), 2)} +
+
+
+
+ + {/* Execute Button */} +
+ + +
+
+
+
+ ) +} diff --git a/components/TradeModal_new.tsx b/components/TradeModal_new.tsx new file mode 100644 index 0000000..21465d7 --- /dev/null +++ b/components/TradeModal_new.tsx @@ -0,0 +1,382 @@ +"use client" +import React, { useState, useEffect } from 'react' + +interface TradeModalProps { + isOpen: boolean + onClose: () => void + tradeData: { + symbol: string + timeframe: string + entry: string + tp: string + sl: string + } | null + onExecute: (data: any) => void +} + +interface FormData { + entry: string + tp1: string + tp2: string + sl: string + positionValue: string + leverage: number + tradingCoin: string + tp1Percentage: number + tp2Percentage: number +} + +const supportedCoins = [ + { symbol: 'SOL', name: 'Solana', icon: '◎', price: 159.5 }, + { symbol: 'USDC', name: 'USD Coin', icon: '$', price: 1.0 } +] + +export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: TradeModalProps) { + console.log('🚀 TradeModal loaded with enhanced features - Version 2.0') + const [loading, setLoading] = useState(false) + const [walletBalance, setWalletBalance] = useState(null) + const [formData, setFormData] = useState({ + entry: tradeData?.entry || '', + tp1: tradeData?.tp || '', + tp2: '', + sl: tradeData?.sl || '', + positionValue: '1000', // Position size in chosen coin + leverage: 3, + tradingCoin: 'SOL', + tp1Percentage: 50, // % of position to close at TP1 + tp2Percentage: 50 // % of position to close at TP2 + }) + + // Fetch wallet balance when modal opens + useEffect(() => { + if (isOpen) { + fetchWalletBalance() + } + }, [isOpen]) + + const fetchWalletBalance = async () => { + try { + const response = await fetch('/api/wallet/balance') + const data = await response.json() + if (data.success) { + setWalletBalance(data.balance) + } + } catch (error) { + console.error('Failed to fetch wallet balance:', error) + } + } + + // Helper function to safely format numbers + const formatNumber = (value: number, decimals: number = 2): string => { + if (isNaN(value) || !isFinite(value)) return '0.00' + return value.toFixed(decimals) + } + + // Calculate derived values with proper error handling + const currentCoin = supportedCoins.find(coin => coin.symbol === formData.tradingCoin) + const coinPrice = currentCoin?.price || 159.5 // Default to SOL price + + // Safe number parsing - position size in chosen coin + const positionSize = parseFloat(formData.positionValue) || 0 + const positionValueUSD = positionSize * coinPrice + const leverageNum = formData.leverage || 1 + const entryPrice = parseFloat(formData.entry) || 0 + const tp1Price = parseFloat(formData.tp1) || 0 + const tp2Price = parseFloat(formData.tp2) || 0 + const slPrice = parseFloat(formData.sl) || 0 + + // Calculations with fallbacks + const leveragedValue = positionValueUSD * leverageNum + + // P&L calculations with proper validation + const profitTP1 = (entryPrice > 0 && tp1Price > 0 && leveragedValue > 0) ? + ((tp1Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp1Percentage / 100) : 0 + const profitTP2 = (entryPrice > 0 && tp2Price > 0 && leveragedValue > 0) ? + ((tp2Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp2Percentage / 100) : 0 + const lossAtSL = (entryPrice > 0 && slPrice > 0 && leveragedValue > 0) ? + ((slPrice - entryPrice) / entryPrice) * leveragedValue : 0 + + useEffect(() => { + if (tradeData) { + setFormData((prev: FormData) => ({ + ...prev, + entry: tradeData.entry || '', + tp1: tradeData.tp || '', + sl: tradeData.sl || '' + })) + } + }, [tradeData]) + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + setLoading(true) + + try { + await onExecute({ + symbol: tradeData?.symbol, + timeframe: tradeData?.timeframe, + ...formData, + positionSize, + leveragedValue + }) + } catch (error) { + console.error('Trade execution failed:', error) + } finally { + setLoading(false) + } + } + + if (!isOpen || !tradeData) return null + + return ( +
+
+
+

+ + 💰 + + Execute Trade +

+ +
+ +
+ {/* Trade Details Section */} +
+

+ 📊 Trade Setup +

+
+
+ +
{tradeData?.symbol}
+
+
+ +
{tradeData?.timeframe}
+
+
+
+ + {/* Trading Coin Selection - Enhanced Visual Cards */} +
+ +
+ {supportedCoins.map(coin => ( + + ))} +
+
+ + {/* Enhanced Position Size Section */} +
+

+ 💵 Position Size ({formData.tradingCoin}) +

+ + {/* Position Size Input */} +
+ + setFormData(prev => ({...prev, positionValue: e.target.value}))} + className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white focus:border-blue-500 focus:outline-none" + placeholder="1,000" + /> +
+ ≈ ${formatNumber(positionValueUSD)} USD +
+
+ + {/* Percentage Buttons */} +
+ {[25, 50, 75, 100].map(percentage => ( + + ))} +
+ + {/* Leverage Section */} +
+ +
+ setFormData(prev => ({...prev, leverage: parseInt(e.target.value)}))} + className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider" + /> +
+ 1x + 5x + 10x +
+
+
+ Leveraged Value: ${formatNumber(leveragedValue)} +
+
+
+ + {/* Enhanced Price Levels */} +
+ + setFormData(prev => ({...prev, entry: e.target.value}))} + className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-blue-500 focus:outline-none mb-4" + placeholder="159.5" + /> +
+ + {/* Take Profit 1 with Profit Display */} +
+ + setFormData(prev => ({...prev, tp1: e.target.value}))} + className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-green-500 focus:outline-none" + placeholder="160.5" + /> + + {/* Profit Percentage Slider for TP1 */} +
+
+ Profit % + + Profit: $1.50 + +
+
+ setFormData(prev => ({...prev, tp1Percentage: parseInt(e.target.value)}))} + className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" + style={{ + background: `linear-gradient(to right, #10b981 0%, #10b981 ${formData.tp1Percentage}%, #374151 ${formData.tp1Percentage}%, #374151 100%)` + }} + /> +
+ 10% + 90% +
+
+
+
+ + {/* Take Profit 2 */} +
+ + setFormData(prev => ({...prev, tp2: e.target.value}))} + className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-green-500 focus:outline-none" + placeholder="162" + /> +
+ + {/* Stop Loss */} +
+ + setFormData(prev => ({...prev, sl: e.target.value}))} + className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-red-500 focus:outline-none" + placeholder="158.5" + /> +
+ + {/* Submit Buttons */} +
+ + +
+
+
+
+ ) +} diff --git a/components/TradingChart.tsx b/components/TradingChart.tsx new file mode 100644 index 0000000..e69de29 diff --git a/package-lock.json b/package-lock.json index 6ff1854..cfa5c7b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@solana/web3.js": "^1.98.2", "bs58": "^6.0.0", "dotenv": "^17.2.0", + "lightweight-charts": "^5.0.8", "next": "15.3.5", "node-fetch": "^3.3.2", "openai": "^5.8.3", @@ -5744,6 +5745,12 @@ "node": "> 0.1.90" } }, + "node_modules/fancy-canvas": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz", + "integrity": "sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==", + "license": "MIT" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -7397,6 +7404,15 @@ "node": ">= 0.8.0" } }, + "node_modules/lightweight-charts": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-5.0.8.tgz", + "integrity": "sha512-dNBK5TlNcG78RUnxYRAZP4XpY5bkp3EE0PPjFFPkdIZ8RvnvL2JLgTb1BLh40trHhgJl51b1bCz8678GpnKvIw==", + "license": "Apache-2.0", + "dependencies": { + "fancy-canvas": "2.1.0" + } + }, "node_modules/lilconfig": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", diff --git a/package.json b/package.json index 829f052..eba69ad 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "@solana/web3.js": "^1.98.2", "bs58": "^6.0.0", "dotenv": "^17.2.0", + "lightweight-charts": "^5.0.8", "next": "15.3.5", "node-fetch": "^3.3.2", "openai": "^5.8.3",