Enhanced trading modal UI with professional layout
- Added coin selection cards with price display - Integrated wallet balance and percentage-based position sizing - Added leverage slider with real-time calculations - Improved take profit allocation and risk/reward summary - Refactored to match advanced trading modal layout - Fixed TypeScript errors and build issues
This commit is contained in:
mindesbunister
31
cleanup-local-install.sh
Normal file
31
cleanup-local-install.sh
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# Cleanup script to remove local development setup
|
||||||
|
|
||||||
|
echo "🧹 Cleaning up local development environment..."
|
||||||
|
|
||||||
|
# Remove node_modules (this is the biggest folder)
|
||||||
|
if [ -d "node_modules" ]; then
|
||||||
|
echo "Removing node_modules..."
|
||||||
|
rm -rf node_modules
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Remove Next.js build cache
|
||||||
|
if [ -d ".next" ]; then
|
||||||
|
echo "Removing .next build cache..."
|
||||||
|
rm -rf .next
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Remove package-lock.json (can be regenerated)
|
||||||
|
if [ -f "package-lock.json" ]; then
|
||||||
|
echo "Removing package-lock.json..."
|
||||||
|
rm package-lock.json
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Optional: Remove Node.js itself (uncomment if you want to remove Node.js entirely)
|
||||||
|
# echo "To remove Node.js completely, run:"
|
||||||
|
# echo "sudo apt remove nodejs npm -y"
|
||||||
|
# echo "sudo apt autoremove -y"
|
||||||
|
|
||||||
|
echo "✅ Cleanup complete!"
|
||||||
|
echo "💡 To remove Node.js entirely, run: sudo apt remove nodejs npm -y"
|
||||||
|
echo "🌐 Note: The app was configured to run on port 9000 (same as Docker)"
|
||||||
@@ -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<any>(null)
|
||||||
|
const [formData, setFormData] = useState<FormData>({
|
||||||
|
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 (
|
||||||
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-gray-900 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[95vh] overflow-hidden border border-gray-700">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-center p-6 border-b border-gray-700 bg-gradient-to-r from-blue-600/20 to-purple-600/20">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-white">Execute Trade</h2>
|
||||||
|
<p className="text-gray-400 text-sm">Configure your position details</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-white text-2xl font-bold w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-700 transition-all"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="p-6 overflow-y-auto max-h-[calc(95vh-120px)]">
|
||||||
|
{/* Coin Selection */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-3">Trading Coin</label>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{supportedCoins.map((coin) => (
|
||||||
|
<button
|
||||||
|
key={coin.symbol}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setFormData(prev => ({ ...prev, tradingCoin: coin.symbol }))}
|
||||||
|
className={`p-4 rounded-xl border-2 transition-all duration-200 ${
|
||||||
|
formData.tradingCoin === coin.symbol
|
||||||
|
? 'border-blue-500 bg-blue-500/20 text-white'
|
||||||
|
: 'border-gray-600 bg-gray-800 text-gray-300 hover:border-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-2xl">{coin.icon}</span>
|
||||||
|
<div className="text-left">
|
||||||
|
<div className="font-semibold">{coin.symbol}</div>
|
||||||
|
<div className="text-xs text-gray-400">{coin.name}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-mono text-sm">${formatNumber(coin.price)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Position Size */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<label className="text-sm font-medium text-gray-300">Position Size (USD)</label>
|
||||||
|
{walletBalance && (
|
||||||
|
<span className="text-xs text-gray-400">
|
||||||
|
Available: ${formatNumber(walletBalance.solBalance * coinPrice, 2)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={formData.positionValue}
|
||||||
|
onChange={(e) => 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 */}
|
||||||
|
<div className="grid grid-cols-4 gap-2">
|
||||||
|
{[25, 50, 75, 100].map((percent) => (
|
||||||
|
<button
|
||||||
|
key={percent}
|
||||||
|
type="button"
|
||||||
|
onClick={() => 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"
|
||||||
|
>
|
||||||
|
{percent}%
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Position info */}
|
||||||
|
<div className="text-xs text-gray-400 space-y-1">
|
||||||
|
<div>Position Size: {formatNumber(positionSizeSOL, 4)} {formData.tradingCoin}</div>
|
||||||
|
<div>USD Value: ${formatNumber(positionValueUSD, 2)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Leverage */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<label className="text-sm font-medium text-gray-300">Leverage</label>
|
||||||
|
<span className="text-sm text-blue-400 font-mono">{formData.leverage}x</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="10"
|
||||||
|
value={formData.leverage}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, leverage: parseInt(e.target.value) }))}
|
||||||
|
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer range-slider"
|
||||||
|
/>
|
||||||
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
|
<span>1x</span>
|
||||||
|
<span>5x</span>
|
||||||
|
<span>10x</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-400 mt-2">
|
||||||
|
Leveraged Value: ${formatNumber(leveragedValue, 2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price Inputs Grid */}
|
||||||
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-2">Entry Price</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.entry}
|
||||||
|
onChange={(e) => 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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-2">Stop Loss</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.sl}
|
||||||
|
onChange={(e) => 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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Take Profit 1 */}
|
||||||
|
<div className="mb-6 p-4 bg-gray-800/50 rounded-xl border border-gray-700">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h3 className="text-sm font-medium text-gray-300">Take Profit 1</h3>
|
||||||
|
<span className="text-xs text-green-400">+${formatNumber(profitTP1, 2)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.tp1}
|
||||||
|
onChange={(e) => 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"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<span className="text-xs text-gray-400 min-w-[60px]">Allocation:</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="10"
|
||||||
|
max="100"
|
||||||
|
step="10"
|
||||||
|
value={formData.tp1Percentage}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, tp1Percentage: parseInt(e.target.value) }))}
|
||||||
|
className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-green-400 min-w-[35px] font-mono">{formData.tp1Percentage}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Take Profit 2 */}
|
||||||
|
<div className="mb-6 p-4 bg-gray-800/50 rounded-xl border border-gray-700">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h3 className="text-sm font-medium text-gray-300">Take Profit 2</h3>
|
||||||
|
<span className="text-xs text-green-400">+${formatNumber(profitTP2, 2)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.tp2}
|
||||||
|
onChange={(e) => 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"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<span className="text-xs text-gray-400 min-w-[60px]">Allocation:</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="10"
|
||||||
|
max="100"
|
||||||
|
step="10"
|
||||||
|
value={formData.tp2Percentage}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, tp2Percentage: parseInt(e.target.value) }))}
|
||||||
|
className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-green-400 min-w-[35px] font-mono">{formData.tp2Percentage}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profit Summary */}
|
||||||
|
<div className="mb-6 p-4 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-xl border border-green-500/20">
|
||||||
|
<h3 className="text-sm font-medium text-gray-300 mb-3">Profit Summary</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-4 text-xs">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-400">TP1 Profit:</span>
|
||||||
|
<span className="text-green-400">+${formatNumber(profitTP1, 2)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-400">TP2 Profit:</span>
|
||||||
|
<span className="text-green-400">+${formatNumber(profitTP2, 2)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-400">Total Profit:</span>
|
||||||
|
<span className="text-green-400 font-semibold">+${formatNumber(totalPotentialProfit, 2)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-400">Max Loss:</span>
|
||||||
|
<span className="text-red-400">${formatNumber(Math.abs(lossAtSL), 2)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Execute Button */}
|
||||||
|
<div className="flex space-x-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="flex-1 py-3 px-6 bg-gray-700 text-gray-300 rounded-xl hover:bg-gray-600 transition-all duration-200"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading || !formData.entry || !formData.tp1 || !formData.sl}
|
||||||
|
className={`flex-1 py-3 px-6 rounded-xl font-semibold transition-all duration-200 ${
|
||||||
|
loading || !formData.entry || !formData.tp1 || !formData.sl
|
||||||
|
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||||
|
: 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transform hover:scale-[1.02]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center space-x-2">
|
||||||
|
<div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"></div>
|
||||||
|
<span>Executing...</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
'Execute Trade'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|||||||
0
components/TradeModal_corrupted.tsx
Normal file
0
components/TradeModal_corrupted.tsx
Normal file
Reference in New Issue
Block a user