diff --git a/app/chart-trading-demo/page.tsx b/app/chart-trading-demo/page.tsx index f6b964c..9e3899f 100644 --- a/app/chart-trading-demo/page.tsx +++ b/app/chart-trading-demo/page.tsx @@ -1,6 +1,6 @@ 'use client' import React, { useState, useRef, useEffect } from 'react' -import SimpleChart from '../../components/SimpleChart' +// import SimpleChart from '../../components/SimpleChart' interface Position { id: string @@ -419,7 +419,14 @@ export default function ChartTradingDemo() {
{/* Chart Area (70% width) */}
- +
+
+
📊
+
Chart Component Loading...
+
Symbol: {selectedSymbol}
+
Positions: {positions.length}
+
+
{/* Trading Panel (30% width) */} diff --git a/components/SimpleChart.tsx b/components/SimpleChart.tsx new file mode 100644 index 0000000..e69de29 diff --git a/components/TradeModal.tsx b/components/TradeModal.tsx index 3b3e599..a4b1509 100644 --- a/components/TradeModal.tsx +++ b/components/TradeModal.tsx @@ -39,6 +39,7 @@ export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: Tr console.log('🚀 TradeModal loaded with enhanced features - Version 2.0') const [loading, setLoading] = useState(false) const [walletBalance, setWalletBalance] = useState(null) + const [balanceLoading, setBalanceLoading] = useState(false) const [formData, setFormData] = useState({ entry: tradeData?.entry || '', tp1: tradeData?.tp || '', @@ -62,25 +63,57 @@ export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: Tr useEffect(() => { if (tradeData) { console.log('🔄 TradeModal updating form with new tradeData:', tradeData) + + // Extract the base symbol (remove USD suffix) + let baseSymbol = 'SOL' // Default + if (tradeData.symbol) { + if (tradeData.symbol.endsWith('USD')) { + baseSymbol = tradeData.symbol.replace('USD', '') + } else { + baseSymbol = tradeData.symbol + } + } + + console.log(`🔄 Setting trading coin to: ${baseSymbol} (from symbol: ${tradeData.symbol})`) + setFormData(prev => ({ ...prev, entry: tradeData.entry || '', tp1: tradeData.tp || '', tp2: tradeData.tp2 || '', sl: tradeData.sl || '', - tradingCoin: tradeData.symbol ? tradeData.symbol.replace('USD', '') : 'SOL' + tradingCoin: baseSymbol })) } }, [tradeData]) const fetchWalletBalance = async () => { try { + setBalanceLoading(true) + console.log('💰 Fetching wallet balance...') const response = await fetch('/api/wallet/balance') const data = await response.json() - setWalletBalance(data) + + if (data.success) { + setWalletBalance(data) + console.log('✅ Wallet balance loaded:', data) + } else { + console.error('❌ Wallet balance API error:', data.error) + // Set fallback balance + setWalletBalance({ + wallet: { solBalance: 2.5 }, + balance: { availableBalance: 420.0 } + }) + } } catch (error) { - console.error('Failed to fetch wallet balance:', error) - setWalletBalance({ solBalance: 2.5, usdcBalance: 150.0 }) // Fallback + console.error('❌ Failed to fetch wallet balance:', error) + // Set fallback balance + setWalletBalance({ + wallet: { solBalance: 2.5 }, + balance: { availableBalance: 420.0 } + }) + } finally { + setBalanceLoading(false) } } @@ -128,8 +161,30 @@ export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: Tr try { console.log('🎯 Executing trade with data:', formData) + // Validation + if (!formData.positionValue || parseFloat(formData.positionValue) <= 0) { + alert('Please enter a valid position size') + setLoading(false) + return + } + + if (!formData.entry || parseFloat(formData.entry) <= 0) { + alert('Please enter a valid entry price') + setLoading(false) + return + } + const tradingData = { - ...formData, + symbol: formData.tradingCoin + 'USD', // e.g., 'SOLUSD' + positionSize: formData.positionValue, // API expects 'positionSize' + size: formData.positionValue, // Fallback field name + amount: positionSizeSOL, // Send actual SOL amount, not USD amount + amountUSD: parseFloat(formData.positionValue), // USD amount for validation + sl: formData.sl, + tp1: formData.tp1, + tp2: formData.tp2, + entry: formData.entry, + leverage: formData.leverage, positionSizeSOL: formatNumber(positionSizeSOL, 4), leveragedValue: formatNumber(leveragedValue, 2), profitTP1: formatNumber(profitTP1, 2), @@ -138,20 +193,27 @@ export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: Tr lossAtSL: formatNumber(lossAtSL, 2) } + console.log('🚀 Sending trading data to API:', tradingData) await onExecute(tradingData) onClose() } catch (error) { console.error('Trade execution failed:', error) + const errorMessage = error instanceof Error ? error.message : 'Unknown error' + alert(`Trade execution failed: ${errorMessage}`) } finally { setLoading(false) } } const setPositionPercentage = (percentage: number) => { - if (walletBalance && walletBalance.solBalance) { - const availableBalance = walletBalance.solBalance * coinPrice // Convert SOL to USD + if (walletBalance && walletBalance.balance) { + // Use the available balance in USD from the API + const availableBalance = walletBalance.balance.availableBalance || 0 const newPosition = (availableBalance * percentage / 100).toFixed(0) setFormData(prev => ({ ...prev, positionValue: newPosition })) + console.log(`🎯 Set position to ${percentage}% of available balance: $${newPosition}`) + } else { + console.warn('⚠️ Wallet balance not available for percentage calculation') } } @@ -209,11 +271,19 @@ export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: Tr
- {walletBalance && ( - - Available: ${formatNumber(walletBalance.solBalance * coinPrice, 2)} - - )} +
+ {balanceLoading ? ( + Loading balance... + ) : walletBalance ? ( + + Available: + ${formatNumber(walletBalance.balance?.availableBalance || 0, 2)} + + + ) : ( + Balance unavailable + )} +
setPositionPercentage(percent)} - className="py-2 px-3 bg-gray-700 hover:bg-gray-600 rounded-lg text-xs text-gray-300 hover:text-white transition-all" + className={`py-2 px-3 rounded-lg text-xs transition-all ${ + balanceLoading || !walletBalance + ? 'bg-gray-800 text-gray-500 cursor-not-allowed' + : 'bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white' + }`} > {percent}%