-
Chart Trading Terminal
+
Live Trading Terminal
{/* Symbol Selector Dropdown */}
@@ -247,9 +400,14 @@ export default function ChartTradingDemo() {
{/* Market Status */}
-
-
Demo Mode
+
+
{isLoading ? 'Processing...' : 'Live Trading'}
+ {tradeStatus && (
+
+ {tradeStatus}
+
+ )}
{new Date().toLocaleTimeString()}
@@ -331,17 +489,17 @@ export default function ChartTradingDemo() {
handleTrade('BUY')}
- disabled={!payingAmount}
+ disabled={!payingAmount || isLoading}
className="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white py-3 px-4 rounded-lg font-medium transition-all"
>
- Long/Buy {leverage > 1 && `(${leverage}x)`}
+ {isLoading ? 'Processing...' : `Long/Buy ${leverage > 1 ? `(${leverage}x)` : ''}`}
handleTrade('SELL')}
- disabled={!payingAmount}
+ disabled={!payingAmount || isLoading}
className="w-full bg-red-600 hover:bg-red-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white py-3 px-4 rounded-lg font-medium transition-all"
>
- Short/Sell {leverage > 1 && `(${leverage}x)`}
+ {isLoading ? 'Processing...' : `Short/Sell ${leverage > 1 ? `(${leverage}x)` : ''}`}
@@ -385,24 +543,23 @@ export default function ChartTradingDemo() {
onClick={() => {
setPayingToken(symbol)
setIsPayingTokenDropdownOpen(false)
- }}
- className={`w-full flex items-center justify-between px-3 py-2 text-left rounded-lg transition-all ${
- payingToken === symbol
- ? 'bg-blue-600/20 border border-blue-500/30'
- : 'hover:bg-gray-700'
- }`}
- >
-
-
- {balance.toLocaleString()}
-
-
+ }} className={`w-full flex items-center justify-between px-3 py-2 text-left rounded-lg transition-all ${
+ payingToken === symbol
+ ? 'bg-blue-600/20 border border-blue-500/30'
+ : 'hover:bg-gray-700'
+ }`}
+ >
+
+
+ {balance.toFixed(balance < 1 ? 6 : 2)}
+
+
))}
@@ -412,14 +569,25 @@ export default function ChartTradingDemo() {
{/* Balance and MAX button */}
- Balance: {getCurrentPayingTokenData().balance.toLocaleString()} {payingToken}
+ Balance: {getCurrentPayingTokenData().balance.toFixed(getCurrentPayingTokenData().balance < 1 ? 6 : 2)} {payingToken}
setPayingAmount(getCurrentPayingTokenData().balance.toString())}
- className="text-blue-400 hover:text-blue-300"
+ disabled={getCurrentPayingTokenData().balance === 0}
+ className="text-blue-400 hover:text-blue-300 disabled:text-gray-500 disabled:cursor-not-allowed"
>
MAX
+ {getCurrentPayingTokenData().balance === 0 && (
+
+ โ ๏ธ No {payingToken} balance available
+
+ )}
+ {payingAmount && parseFloat(payingAmount) > getCurrentPayingTokenData().balance && (
+
+ โ ๏ธ Insufficient balance ({getCurrentPayingTokenData().balance.toFixed(getCurrentPayingTokenData().balance < 1 ? 6 : 2)} {payingToken} available)
+
+ )}
@@ -522,7 +690,13 @@ export default function ChartTradingDemo() {
{/* Positions Table */}
- {positions.length === 0 ? (
+ {isLoading && positions.length === 0 && (
+
+
+ Loading positions...
+
+ )}
+ {!isLoading && positions.length === 0 ? (
No open positions
@@ -577,9 +751,10 @@ export default function ChartTradingDemo() {
handleClosePosition(position.id)}
- className="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700 transition-all"
+ disabled={isLoading}
+ className="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700 disabled:bg-gray-600 disabled:cursor-not-allowed transition-all"
>
- Close
+ {isLoading ? 'Processing...' : 'Close'}
diff --git a/components/TradeModal.tsx b/components/TradeModal.tsx
index fb765c7..3b3e599 100644
--- a/components/TradeModal.tsx
+++ b/components/TradeModal.tsx
@@ -7,10 +7,13 @@ interface TradeModalProps {
tradeData: {
entry: string
tp: string
+ tp2?: string
sl: string
- risk: string
- reward: string
- action: 'BUY' | 'SELL'
+ symbol?: string
+ timeframe?: string
+ risk?: string
+ reward?: string
+ action?: 'BUY' | 'SELL'
} | null
onExecute: (data: any) => void
}
@@ -55,6 +58,21 @@ export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: Tr
}
}, [isOpen])
+ // Update form data when tradeData changes
+ useEffect(() => {
+ if (tradeData) {
+ console.log('๐ TradeModal updating form with new tradeData:', tradeData)
+ setFormData(prev => ({
+ ...prev,
+ entry: tradeData.entry || '',
+ tp1: tradeData.tp || '',
+ tp2: tradeData.tp2 || '',
+ sl: tradeData.sl || '',
+ tradingCoin: tradeData.symbol ? tradeData.symbol.replace('USD', '') : 'SOL'
+ }))
+ }
+ }, [tradeData])
+
const fetchWalletBalance = async () => {
try {
const response = await fetch('/api/wallet/balance')