ba354c609d
- Added comprehensive PositionCalculator component with real-time PnL calculations - Implemented dynamic leverage adjustment with slider (1x to 100x) - Added investment amount input for position sizing - Integrated liquidation price calculations based on leverage and maintenance margin - Added real-time price fetching from multiple sources (CoinGecko, CoinCap, Binance) - Implemented automatic stop loss and take profit extraction from AI analysis - Added risk/reward ratio calculations and position metrics - Included trading fee calculations and net investment display - Added position type selection (Long/Short) with dynamic PnL calculation - Integrated high leverage warning system for risk management - Added advanced settings for customizable trading fees and maintenance margins - Automatically updates calculations when analysis parameters change - Supports both manual price input and real-time market data - Fully responsive design with gradient styling matching app theme
408 lines
15 KiB
TypeScript
408 lines
15 KiB
TypeScript
// Dynamic Position Calculator Component
|
||
"use client"
|
||
import React, { useState, useEffect } from 'react'
|
||
|
||
interface PositionCalculatorProps {
|
||
analysis?: any // The AI analysis results
|
||
currentPrice?: number
|
||
symbol?: string
|
||
onPositionChange?: (position: PositionCalculation) => void
|
||
}
|
||
|
||
interface PositionCalculation {
|
||
investmentAmount: number
|
||
leverage: number
|
||
positionSize: number
|
||
entryPrice: number
|
||
stopLoss: number
|
||
takeProfit: number
|
||
liquidationPrice: number
|
||
maxLoss: number
|
||
maxProfit: number
|
||
riskRewardRatio: number
|
||
marginRequired: number
|
||
tradingFee: number
|
||
netInvestment: number
|
||
}
|
||
|
||
export default function PositionCalculator({
|
||
analysis,
|
||
currentPrice = 0,
|
||
symbol = 'BTCUSD',
|
||
onPositionChange
|
||
}: PositionCalculatorProps) {
|
||
const [investmentAmount, setInvestmentAmount] = useState<number>(100)
|
||
const [leverage, setLeverage] = useState<number>(10)
|
||
const [positionType, setPositionType] = useState<'long' | 'short'>('long')
|
||
const [calculation, setCalculation] = useState<PositionCalculation | null>(null)
|
||
const [showAdvanced, setShowAdvanced] = useState(false)
|
||
|
||
// Trading parameters
|
||
const [tradingFee, setTradingFee] = useState<number>(0.1) // 0.1% fee
|
||
const [maintenanceMargin, setMaintenanceMargin] = useState<number>(0.5) // 0.5% maintenance margin
|
||
|
||
// Calculate position metrics
|
||
const calculatePosition = () => {
|
||
if (!currentPrice || currentPrice <= 0) return null
|
||
|
||
const positionSize = investmentAmount * leverage
|
||
const marginRequired = investmentAmount
|
||
const fee = positionSize * (tradingFee / 100)
|
||
const netInvestment = investmentAmount + fee
|
||
|
||
// Get AI analysis targets if available
|
||
let entryPrice = currentPrice
|
||
let stopLoss = 0
|
||
let takeProfit = 0
|
||
|
||
if (analysis && analysis.analysis) {
|
||
// Try to extract entry, stop loss, and take profit from AI analysis
|
||
const analysisText = analysis.analysis.toLowerCase()
|
||
|
||
// Look for entry price
|
||
const entryMatch = analysisText.match(/entry[:\s]*[\$]?(\d+\.?\d*)/i)
|
||
if (entryMatch) {
|
||
entryPrice = parseFloat(entryMatch[1])
|
||
}
|
||
|
||
// Look for stop loss
|
||
const stopMatch = analysisText.match(/stop[:\s]*[\$]?(\d+\.?\d*)/i)
|
||
if (stopMatch) {
|
||
stopLoss = parseFloat(stopMatch[1])
|
||
}
|
||
|
||
// Look for take profit
|
||
const profitMatch = analysisText.match(/(?:take profit|target)[:\s]*[\$]?(\d+\.?\d*)/i)
|
||
if (profitMatch) {
|
||
takeProfit = parseFloat(profitMatch[1])
|
||
}
|
||
|
||
// If no specific targets found, use percentage-based defaults
|
||
if (!stopLoss) {
|
||
stopLoss = positionType === 'long'
|
||
? entryPrice * 0.95 // 5% stop loss for long
|
||
: entryPrice * 1.05 // 5% stop loss for short
|
||
}
|
||
|
||
if (!takeProfit) {
|
||
takeProfit = positionType === 'long'
|
||
? entryPrice * 1.10 // 10% take profit for long
|
||
: entryPrice * 0.90 // 10% take profit for short
|
||
}
|
||
} else {
|
||
// Default targets if no analysis
|
||
stopLoss = positionType === 'long'
|
||
? currentPrice * 0.95
|
||
: currentPrice * 1.05
|
||
takeProfit = positionType === 'long'
|
||
? currentPrice * 1.10
|
||
: currentPrice * 0.90
|
||
}
|
||
|
||
// Calculate liquidation price
|
||
const liquidationPrice = positionType === 'long'
|
||
? entryPrice * (1 - (1 / leverage) + (maintenanceMargin / 100))
|
||
: entryPrice * (1 + (1 / leverage) - (maintenanceMargin / 100))
|
||
|
||
// Calculate PnL
|
||
const stopLossChange = positionType === 'long'
|
||
? (stopLoss - entryPrice) / entryPrice
|
||
: (entryPrice - stopLoss) / entryPrice
|
||
const takeProfitChange = positionType === 'long'
|
||
? (takeProfit - entryPrice) / entryPrice
|
||
: (entryPrice - takeProfit) / entryPrice
|
||
|
||
const maxLoss = positionSize * Math.abs(stopLossChange)
|
||
const maxProfit = positionSize * Math.abs(takeProfitChange)
|
||
const riskRewardRatio = maxProfit / maxLoss
|
||
|
||
const result: PositionCalculation = {
|
||
investmentAmount,
|
||
leverage,
|
||
positionSize,
|
||
entryPrice,
|
||
stopLoss,
|
||
takeProfit,
|
||
liquidationPrice,
|
||
maxLoss,
|
||
maxProfit,
|
||
riskRewardRatio,
|
||
marginRequired,
|
||
tradingFee: fee,
|
||
netInvestment
|
||
}
|
||
|
||
setCalculation(result)
|
||
onPositionChange?.(result)
|
||
return result
|
||
}
|
||
|
||
// Recalculate when parameters change
|
||
useEffect(() => {
|
||
calculatePosition()
|
||
}, [investmentAmount, leverage, positionType, currentPrice, analysis, tradingFee, maintenanceMargin])
|
||
|
||
const formatCurrency = (amount: number, decimals: number = 2) => {
|
||
return new Intl.NumberFormat('en-US', {
|
||
style: 'currency',
|
||
currency: 'USD',
|
||
minimumFractionDigits: decimals,
|
||
maximumFractionDigits: decimals
|
||
}).format(amount)
|
||
}
|
||
|
||
const formatPrice = (price: number) => {
|
||
return new Intl.NumberFormat('en-US', {
|
||
style: 'decimal',
|
||
minimumFractionDigits: 2,
|
||
maximumFractionDigits: 2
|
||
}).format(price)
|
||
}
|
||
|
||
return (
|
||
<div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700 rounded-lg p-6">
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h3 className="text-xl font-bold text-white flex items-center">
|
||
<span className="w-6 h-6 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center mr-3 text-sm">
|
||
📊
|
||
</span>
|
||
Position Calculator
|
||
</h3>
|
||
<button
|
||
onClick={() => setShowAdvanced(!showAdvanced)}
|
||
className="text-sm text-gray-400 hover:text-white transition-colors"
|
||
>
|
||
{showAdvanced ? '🔽 Hide Advanced' : '🔼 Show Advanced'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Input Controls */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||
{/* Investment Amount */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Investment Amount ($)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={investmentAmount}
|
||
onChange={(e) => setInvestmentAmount(Number(e.target.value))}
|
||
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
min="1"
|
||
step="1"
|
||
/>
|
||
</div>
|
||
|
||
{/* Position Type */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Position Type
|
||
</label>
|
||
<div className="flex space-x-2">
|
||
<button
|
||
onClick={() => setPositionType('long')}
|
||
className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
|
||
positionType === 'long'
|
||
? 'bg-green-600 text-white'
|
||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
📈 Long
|
||
</button>
|
||
<button
|
||
onClick={() => setPositionType('short')}
|
||
className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
|
||
positionType === 'short'
|
||
? 'bg-red-600 text-white'
|
||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
📉 Short
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Leverage Slider */}
|
||
<div className="md:col-span-2">
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Leverage: {leverage}x
|
||
</label>
|
||
<div className="relative">
|
||
<input
|
||
type="range"
|
||
min="1"
|
||
max="100"
|
||
value={leverage}
|
||
onChange={(e) => setLeverage(Number(e.target.value))}
|
||
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
|
||
style={{
|
||
background: `linear-gradient(to right, #10B981 0%, #10B981 ${leverage}%, #374151 ${leverage}%, #374151 100%)`
|
||
}}
|
||
/>
|
||
<div className="flex justify-between text-xs text-gray-400 mt-1">
|
||
<span>1x</span>
|
||
<span>25x</span>
|
||
<span>50x</span>
|
||
<span>100x</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Advanced Settings */}
|
||
{showAdvanced && (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6 p-4 bg-gray-800/30 rounded-lg border border-gray-600">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Trading Fee (%)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={tradingFee}
|
||
onChange={(e) => setTradingFee(Number(e.target.value))}
|
||
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
min="0"
|
||
max="1"
|
||
step="0.01"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Maintenance Margin (%)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={maintenanceMargin}
|
||
onChange={(e) => setMaintenanceMargin(Number(e.target.value))}
|
||
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
min="0.1"
|
||
max="5"
|
||
step="0.1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Calculation Results */}
|
||
{calculation && (
|
||
<div className="space-y-4">
|
||
{/* Position Summary */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="bg-gray-800/30 rounded-lg p-4 border border-gray-600">
|
||
<div className="text-sm text-gray-400 mb-1">Position Size</div>
|
||
<div className="text-lg font-bold text-white">
|
||
{formatCurrency(calculation.positionSize)}
|
||
</div>
|
||
</div>
|
||
<div className="bg-gray-800/30 rounded-lg p-4 border border-gray-600">
|
||
<div className="text-sm text-gray-400 mb-1">Entry Price</div>
|
||
<div className="text-lg font-bold text-white">
|
||
${formatPrice(calculation.entryPrice)}
|
||
</div>
|
||
</div>
|
||
<div className="bg-gray-800/30 rounded-lg p-4 border border-gray-600">
|
||
<div className="text-sm text-gray-400 mb-1">Margin Required</div>
|
||
<div className="text-lg font-bold text-white">
|
||
{formatCurrency(calculation.marginRequired)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Risk Metrics */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="bg-red-900/20 border border-red-700 rounded-lg p-4">
|
||
<div className="text-sm text-red-400 mb-2">🚨 Risk Metrics</div>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Stop Loss:</span>
|
||
<span className="text-red-400 font-bold">${formatPrice(calculation.stopLoss)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Max Loss:</span>
|
||
<span className="text-red-400 font-bold">{formatCurrency(calculation.maxLoss)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Liquidation:</span>
|
||
<span className="text-red-500 font-bold">${formatPrice(calculation.liquidationPrice)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-green-900/20 border border-green-700 rounded-lg p-4">
|
||
<div className="text-sm text-green-400 mb-2">💰 Profit Potential</div>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Take Profit:</span>
|
||
<span className="text-green-400 font-bold">${formatPrice(calculation.takeProfit)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Max Profit:</span>
|
||
<span className="text-green-400 font-bold">{formatCurrency(calculation.maxProfit)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Risk/Reward:</span>
|
||
<span className="text-green-400 font-bold">1:{calculation.riskRewardRatio.toFixed(2)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Fee Breakdown */}
|
||
<div className="bg-gray-800/30 rounded-lg p-4 border border-gray-600">
|
||
<div className="text-sm text-gray-400 mb-2">💸 Fee Breakdown</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Trading Fee:</span>
|
||
<span className="text-yellow-400">{formatCurrency(calculation.tradingFee)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Net Investment:</span>
|
||
<span className="text-white font-bold">{formatCurrency(calculation.netInvestment)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Leverage:</span>
|
||
<span className="text-blue-400 font-bold">{leverage}x</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Risk Warning */}
|
||
{leverage > 50 && (
|
||
<div className="bg-red-900/30 border border-red-600 rounded-lg p-4">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-red-400 text-lg">⚠️</span>
|
||
<span className="text-red-400 font-bold">High Leverage Warning</span>
|
||
</div>
|
||
<p className="text-red-300 text-sm mt-2">
|
||
Using {leverage}x leverage is extremely risky. A small price movement against your position could result in liquidation.
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<style jsx>{`
|
||
.slider::-webkit-slider-thumb {
|
||
appearance: none;
|
||
height: 20px;
|
||
width: 20px;
|
||
border-radius: 50%;
|
||
background: #10B981;
|
||
cursor: pointer;
|
||
border: 2px solid #065F46;
|
||
box-shadow: 0 0 0 1px #065F46;
|
||
}
|
||
.slider::-moz-range-thumb {
|
||
height: 20px;
|
||
width: 20px;
|
||
border-radius: 50%;
|
||
background: #10B981;
|
||
cursor: pointer;
|
||
border: 2px solid #065F46;
|
||
box-shadow: 0 0 0 1px #065F46;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
)
|
||
}
|