Update TradeModal component and remove package-lock.json
- Modified TradeModal.tsx with latest changes - Removed package-lock.json file (likely for clean dependency management)
This commit is contained in:
mindesbunister
@@ -0,0 +1,183 @@
|
||||
"use client"
|
||||
import React, { useState } from 'react'
|
||||
|
||||
interface TradeModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
tradeData: {
|
||||
symbol: string
|
||||
timeframe: string
|
||||
entry: string
|
||||
tp: string
|
||||
sl: string
|
||||
} | null
|
||||
onExecute: (data: any) => void
|
||||
}
|
||||
|
||||
export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: TradeModalProps) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
entry: tradeData?.entry || '',
|
||||
tp: tradeData?.tp || '',
|
||||
sl: tradeData?.sl || '',
|
||||
size: '0.1',
|
||||
leverage: '1'
|
||||
})
|
||||
|
||||
React.useEffect(() => {
|
||||
if (tradeData) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
entry: tradeData.entry || '',
|
||||
tp: 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
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Trade execution failed:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen || !tradeData) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-6 max-w-md w-full">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-xl font-bold text-white flex items-center">
|
||||
<span className="w-8 h-8 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center mr-3">
|
||||
💰
|
||||
</span>
|
||||
Execute Trade
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
|
||||
<div className="text-sm text-blue-300">
|
||||
<div><strong>Symbol:</strong> {tradeData.symbol}</div>
|
||||
<div><strong>Timeframe:</strong> {tradeData.timeframe}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 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/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-green-500 focus:outline-none"
|
||||
placeholder="0.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-2">Take Profit</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={formData.tp}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, tp: e.target.value }))}
|
||||
className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-green-500 focus:outline-none"
|
||||
placeholder="0.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 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/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-red-500 focus:outline-none"
|
||||
placeholder="0.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-2">Position Size</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={formData.size}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, size: e.target.value }))}
|
||||
className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none"
|
||||
placeholder="0.1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-2">Leverage</label>
|
||||
<select
|
||||
value={formData.leverage}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, leverage: e.target.value }))}
|
||||
className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-cyan-500 focus:outline-none"
|
||||
>
|
||||
<option value="1">1x</option>
|
||||
<option value="2">2x</option>
|
||||
<option value="3">3x</option>
|
||||
<option value="5">5x</option>
|
||||
<option value="10">10x</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 py-2 px-4 bg-gray-700 text-gray-300 rounded-lg hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all ${
|
||||
loading
|
||||
? '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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user