2df6c69b92
- Added FARTCOIN-PERP to SUPPORTED_MARKETS (market index 22) - Updated TradingConfig interface with fartcoin symbol settings - Added default config: 20% portfolio, 10x leverage, disabled by default - Updated normalizeTradingViewSymbol to detect FARTCOIN - Enhanced getPositionSizeForSymbol for FARTCOIN-PERP handling - Enhanced getActualPositionSizeForSymbol for percentage-based sizing - Added FARTCOIN ENV variable loading in getConfigFromEnv - Updated Settings UI with FARTCOIN section and percentage badge - Added FARTCOIN fields to settings API endpoints (GET/POST) - Created comprehensive documentation in docs/markets/FARTCOIN-PERP.md - Build successful: TypeScript compilation and static generation complete Co-authored-by: mindesbunister <32161838+mindesbunister@users.noreply.github.com>
1181 lines
54 KiB
TypeScript
1181 lines
54 KiB
TypeScript
/**
|
||
* Trading Bot Settings UI
|
||
*
|
||
* Beautiful interface for managing trading parameters
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { useState, useEffect } from 'react'
|
||
|
||
interface TradingSettings {
|
||
// Global fallback settings
|
||
MAX_POSITION_SIZE_USD: number
|
||
LEVERAGE: number
|
||
USE_PERCENTAGE_SIZE: boolean
|
||
|
||
// Per-symbol settings
|
||
SOLANA_ENABLED: boolean
|
||
SOLANA_POSITION_SIZE: number
|
||
SOLANA_LEVERAGE: number
|
||
SOLANA_USE_PERCENTAGE_SIZE: boolean
|
||
ETHEREUM_ENABLED: boolean
|
||
ETHEREUM_POSITION_SIZE: number
|
||
ETHEREUM_LEVERAGE: number
|
||
ETHEREUM_USE_PERCENTAGE_SIZE: boolean
|
||
FARTCOIN_ENABLED: boolean
|
||
FARTCOIN_POSITION_SIZE: number
|
||
FARTCOIN_LEVERAGE: number
|
||
|
||
// Risk management
|
||
STOP_LOSS_PERCENT: number
|
||
TAKE_PROFIT_1_PERCENT: number
|
||
TAKE_PROFIT_1_SIZE_PERCENT: number
|
||
TAKE_PROFIT_2_PERCENT: number
|
||
EMERGENCY_STOP_PERCENT: number
|
||
BREAKEVEN_TRIGGER_PERCENT: number
|
||
PROFIT_LOCK_TRIGGER_PERCENT: number
|
||
PROFIT_LOCK_PERCENT: number
|
||
USE_TRAILING_STOP: boolean
|
||
TRAILING_STOP_PERCENT: number
|
||
TRAILING_STOP_ATR_MULTIPLIER: number
|
||
TRAILING_STOP_MIN_PERCENT: number
|
||
TRAILING_STOP_MAX_PERCENT: number
|
||
TRAILING_STOP_ACTIVATION: number
|
||
|
||
// ATR-based Dynamic Targets
|
||
USE_ATR_BASED_TARGETS: boolean
|
||
ATR_MULTIPLIER_FOR_TP2: number
|
||
MIN_TP2_PERCENT: number
|
||
MAX_TP2_PERCENT: number
|
||
|
||
// Position Scaling
|
||
ENABLE_POSITION_SCALING: boolean
|
||
MIN_SCALE_QUALITY_SCORE: number
|
||
MIN_PROFIT_FOR_SCALE: number
|
||
MAX_SCALE_MULTIPLIER: number
|
||
SCALE_SIZE_PERCENT: number
|
||
MIN_ADX_INCREASE: number
|
||
MAX_PRICE_POSITION_FOR_SCALE: number
|
||
|
||
// Adaptive Leverage (Quality-based)
|
||
USE_ADAPTIVE_LEVERAGE: boolean
|
||
HIGH_QUALITY_LEVERAGE: number
|
||
LOW_QUALITY_LEVERAGE: number
|
||
QUALITY_LEVERAGE_THRESHOLD_LONG: number // Quality threshold for LONG signals
|
||
QUALITY_LEVERAGE_THRESHOLD_SHORT: number // Quality threshold for SHORT signals
|
||
|
||
// Safety
|
||
MAX_DAILY_DRAWDOWN: number
|
||
MAX_TRADES_PER_HOUR: number
|
||
MIN_TIME_BETWEEN_TRADES: number
|
||
MIN_SIGNAL_QUALITY_SCORE: number
|
||
MIN_SIGNAL_QUALITY_SCORE_LONG: number
|
||
MIN_SIGNAL_QUALITY_SCORE_SHORT: number
|
||
SLIPPAGE_TOLERANCE: number
|
||
DRY_RUN: boolean
|
||
}
|
||
|
||
export default function SettingsPage() {
|
||
const [settings, setSettings] = useState<TradingSettings | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [saving, setSaving] = useState(false)
|
||
const [restarting, setRestarting] = useState(false)
|
||
const [testing, setTesting] = useState(false)
|
||
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null)
|
||
const [collateral, setCollateral] = useState<number>(560) // Dynamic collateral from Drift account
|
||
|
||
useEffect(() => {
|
||
loadSettings()
|
||
loadCollateral()
|
||
}, [])
|
||
|
||
const loadCollateral = async () => {
|
||
try {
|
||
const response = await fetch('/api/drift/account-health')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setCollateral(data.freeCollateral)
|
||
console.log('✅ Loaded collateral from Drift:', data.freeCollateral)
|
||
} else {
|
||
console.warn('⚠️ Failed to load collateral, using fallback: 560')
|
||
setCollateral(560) // Fallback if API fails
|
||
}
|
||
} catch (error) {
|
||
console.error('❌ Error loading collateral:', error)
|
||
setCollateral(560) // Fallback on error
|
||
}
|
||
}
|
||
|
||
const loadSettings = async () => {
|
||
try {
|
||
const response = await fetch('/api/settings')
|
||
const data = await response.json()
|
||
setSettings(data)
|
||
setLoading(false)
|
||
} catch (error) {
|
||
setMessage({ type: 'error', text: 'Failed to load settings' })
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const saveSettings = async () => {
|
||
setSaving(true)
|
||
setMessage(null)
|
||
try {
|
||
const response = await fetch('/api/settings', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(settings),
|
||
})
|
||
|
||
if (response.ok) {
|
||
setMessage({ type: 'success', text: 'Settings saved! Click "Restart Bot" to apply changes.' })
|
||
} else {
|
||
setMessage({ type: 'error', text: 'Failed to save settings' })
|
||
}
|
||
} catch (error) {
|
||
setMessage({ type: 'error', text: 'Failed to save settings' })
|
||
}
|
||
setSaving(false)
|
||
}
|
||
|
||
const restartBot = async () => {
|
||
setRestarting(true)
|
||
setMessage(null)
|
||
try {
|
||
const response = await fetch('/api/restart', {
|
||
method: 'POST',
|
||
})
|
||
|
||
if (response.ok) {
|
||
setMessage({ type: 'success', text: 'Bot is restarting... Settings will be applied in ~10 seconds.' })
|
||
} else {
|
||
setMessage({ type: 'error', text: 'Failed to restart bot. Please restart manually with: docker restart trading-bot' })
|
||
}
|
||
} catch (error) {
|
||
setMessage({ type: 'error', text: 'Failed to restart bot. Please restart manually with: docker restart trading-bot' })
|
||
}
|
||
setRestarting(false)
|
||
}
|
||
|
||
const syncPositions = async () => {
|
||
setLoading(true)
|
||
setMessage(null)
|
||
try {
|
||
const response = await fetch('/api/trading/sync-positions', {
|
||
method: 'POST',
|
||
})
|
||
|
||
const data = await response.json()
|
||
|
||
if (data.success) {
|
||
const { results } = data
|
||
let msg = '✅ Position sync complete! '
|
||
if (results.added.length > 0) msg += `Added: ${results.added.join(', ')}. `
|
||
if (results.removed.length > 0) msg += `Removed: ${results.removed.join(', ')}. `
|
||
if (results.unchanged.length > 0) msg += `Already tracking: ${results.unchanged.join(', ')}. `
|
||
if (results.errors.length > 0) msg += `⚠️ Errors: ${results.errors.length}`
|
||
setMessage({ type: 'success', text: msg })
|
||
} else {
|
||
setMessage({ type: 'error', text: `Sync failed: ${data.error || data.message}` })
|
||
}
|
||
} catch (error) {
|
||
setMessage({ type: 'error', text: `Sync failed: ${error instanceof Error ? error.message : 'Unknown error'}` })
|
||
}
|
||
setLoading(false)
|
||
}
|
||
|
||
const testTrade = async (direction: 'long' | 'short', symbol: string = 'SOLUSDT') => {
|
||
if (!confirm(`⚠️ This will execute a REAL ${direction.toUpperCase()} trade on ${symbol} with current settings. Continue?`)) {
|
||
return
|
||
}
|
||
|
||
setTesting(true)
|
||
setMessage(null)
|
||
try {
|
||
const response = await fetch('/api/trading/test', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
symbol: symbol,
|
||
direction: direction,
|
||
}),
|
||
})
|
||
|
||
const data = await response.json()
|
||
|
||
if (data.success) {
|
||
const dualStopsMsg = data.useDualStops
|
||
? `Dual stops: Soft $${data.softStopPrice?.toFixed(4)} | Hard $${data.hardStopPrice?.toFixed(4)}`
|
||
: `SL: $${data.stopLoss?.toFixed(4)}`
|
||
setMessage({
|
||
type: 'success',
|
||
text: `✅ ${symbol} ${direction.toUpperCase()} test trade executed! Size: $${data.positionSize?.toFixed(2)} | Entry: $${data.entryPrice?.toFixed(4)} | ${dualStopsMsg} | TX: ${data.positionId?.substring(0, 8)}...`
|
||
})
|
||
} else {
|
||
setMessage({ type: 'error', text: `Failed: ${data.error || data.message}` })
|
||
}
|
||
} catch (error) {
|
||
setMessage({ type: 'error', text: `Test trade failed: ${error instanceof Error ? error.message : 'Unknown error'}` })
|
||
}
|
||
setTesting(false)
|
||
}
|
||
|
||
const updateSetting = (key: keyof TradingSettings, value: any) => {
|
||
if (!settings) return
|
||
setSettings({ ...settings, [key]: value })
|
||
}
|
||
|
||
const calculateRisk = (baseSize?: number, leverage?: number) => {
|
||
if (!settings) return null
|
||
const size = baseSize ?? settings.MAX_POSITION_SIZE_USD
|
||
const lev = leverage ?? settings.LEVERAGE
|
||
const maxLoss = size * lev * (Math.abs(settings.STOP_LOSS_PERCENT) / 100)
|
||
// Calculate gains/losses for risk calculator
|
||
const tp1Gain = size * lev * (settings.TAKE_PROFIT_1_PERCENT / 100) * (settings.TAKE_PROFIT_1_SIZE_PERCENT / 100)
|
||
const tp2RunnerSize = size * (1 - settings.TAKE_PROFIT_1_SIZE_PERCENT / 100) // Remaining % after TP1
|
||
const runnerPercent = 100 - settings.TAKE_PROFIT_1_SIZE_PERCENT // Calculate runner % for display
|
||
|
||
// Use ATR-based TP2 if enabled, otherwise use static
|
||
const tp2Percent = settings.USE_ATR_BASED_TARGETS
|
||
? `${settings.MIN_TP2_PERCENT}-${settings.MAX_TP2_PERCENT}% (ATR-based)`
|
||
: `${settings.TAKE_PROFIT_2_PERCENT}% (static)`
|
||
|
||
// For calculation, use max potential TP2 if ATR-based
|
||
const tp2CalcPercent = settings.USE_ATR_BASED_TARGETS
|
||
? settings.MAX_TP2_PERCENT
|
||
: settings.TAKE_PROFIT_2_PERCENT
|
||
|
||
const runnerValue = tp2RunnerSize * lev * (tp2CalcPercent / 100) // Runner value at TP2
|
||
const fullWin = tp1Gain + runnerValue
|
||
|
||
return { maxLoss, tp1Gain, runnerValue, fullWin, tp2Percent, runnerPercent }
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center">
|
||
<div className="text-white text-xl">Loading settings...</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!settings) return null
|
||
|
||
const risk = calculateRisk()
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 py-8 px-4">
|
||
<div className="max-w-5xl mx-auto">
|
||
{/* Header */}
|
||
<div className="mb-8">
|
||
<div className="flex items-center space-x-4 mb-4">
|
||
<a href="/" className="text-gray-400 hover:text-white transition">
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||
</svg>
|
||
</a>
|
||
<div>
|
||
<h1 className="text-4xl font-bold text-white">⚙️ Trading Bot Settings</h1>
|
||
</div>
|
||
</div>
|
||
<p className="text-slate-400">Configure your automated trading parameters</p>
|
||
</div>
|
||
|
||
{/* Message */}
|
||
{message && (
|
||
<div className={`mb-6 p-4 rounded-lg ${
|
||
message.type === 'success' ? 'bg-green-500/20 text-green-400 border border-green-500/50' : 'bg-red-500/20 text-red-400 border border-red-500/50'
|
||
}`}>
|
||
{message.text}
|
||
</div>
|
||
)}
|
||
|
||
{/* Risk Calculator */}
|
||
{risk && (
|
||
<div className="mb-8 bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6">
|
||
<h2 className="text-xl font-bold text-white mb-4">📊 Risk Calculator</h2>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div className="bg-red-500/10 border border-red-500/50 rounded-lg p-4">
|
||
<div className="text-red-400 text-sm mb-1">Max Loss (SL)</div>
|
||
<div className="text-white text-2xl font-bold">-${risk.maxLoss.toFixed(2)}</div>
|
||
</div>
|
||
<div className="bg-blue-500/10 border border-blue-500/50 rounded-lg p-4">
|
||
<div className="text-blue-400 text-sm mb-1">TP1 Gain ({settings.TAKE_PROFIT_1_SIZE_PERCENT}%)</div>
|
||
<div className="text-white text-2xl font-bold">+${risk.tp1Gain.toFixed(2)}</div>
|
||
</div>
|
||
<div className="bg-green-500/10 border border-green-500/50 rounded-lg p-4">
|
||
<div className="text-green-400 text-sm mb-1">Runner Value ({risk.runnerPercent}%)</div>
|
||
<div className="text-white text-2xl font-bold">+${risk.runnerValue.toFixed(2)}</div>
|
||
<div className="text-xs text-green-300 mt-1">{risk.tp2Percent}</div>
|
||
</div>
|
||
<div className="bg-purple-500/10 border border-purple-500/50 rounded-lg p-4">
|
||
<div className="text-purple-400 text-sm mb-1">Full Win</div>
|
||
<div className="text-white text-2xl font-bold">+${risk.fullWin.toFixed(2)}</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 text-slate-400 text-sm">
|
||
Risk/Reward Ratio: 1:{(risk.fullWin / risk.maxLoss).toFixed(2)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Settings Sections */}
|
||
<div className="space-y-6">
|
||
{/* Per-Symbol Position Sizing */}
|
||
<Section title="<22> Solana (SOL-PERP)" description="Individual settings for Solana perpetual trading">
|
||
<div className="mb-4 p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
|
||
<p className="text-sm text-purple-400">
|
||
Enable/disable Solana trading and set symbol-specific position sizing. When enabled, these settings override global defaults for SOL trades.
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center justify-between p-4 bg-slate-700/30 rounded-lg mb-4">
|
||
<div className="flex-1">
|
||
<div className="text-white font-medium mb-1">🟢 Enable Solana Trading</div>
|
||
<div className="text-slate-400 text-sm">
|
||
Accept SOL-PERP trade signals from TradingView
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => updateSetting('SOLANA_ENABLED', !settings.SOLANA_ENABLED)}
|
||
className={`relative inline-flex h-8 w-14 items-center rounded-full transition-colors ${
|
||
settings.SOLANA_ENABLED ? 'bg-green-500' : 'bg-slate-600'
|
||
}`}
|
||
>
|
||
<span
|
||
className={`inline-block h-6 w-6 transform rounded-full bg-white transition-transform ${
|
||
settings.SOLANA_ENABLED ? 'translate-x-7' : 'translate-x-1'
|
||
}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
<Setting
|
||
label={`SOL Position Size (${settings.SOLANA_USE_PERCENTAGE_SIZE ? '%' : 'USD'})`}
|
||
value={settings.SOLANA_POSITION_SIZE}
|
||
onChange={(v) => updateSetting('SOLANA_POSITION_SIZE', v)}
|
||
min={1}
|
||
max={settings.SOLANA_USE_PERCENTAGE_SIZE ? 100 : 10000}
|
||
step={1}
|
||
description={
|
||
settings.SOLANA_USE_PERCENTAGE_SIZE
|
||
? `Percentage of free collateral for SOL trades. With ${settings.SOLANA_LEVERAGE}x leverage.`
|
||
: `Base capital for SOL trades. With ${settings.SOLANA_LEVERAGE}x leverage = $${(settings.SOLANA_POSITION_SIZE * settings.SOLANA_LEVERAGE).toFixed(0)} notional position.`
|
||
}
|
||
/>
|
||
<Setting
|
||
label="SOL Leverage"
|
||
value={settings.SOLANA_LEVERAGE}
|
||
onChange={(v) => updateSetting('SOLANA_LEVERAGE', v)}
|
||
min={1}
|
||
max={20}
|
||
step={1}
|
||
description="Leverage multiplier for Solana positions only."
|
||
/>
|
||
{(() => {
|
||
const solRisk = calculateRisk(settings.SOLANA_POSITION_SIZE, settings.SOLANA_LEVERAGE)
|
||
return solRisk && (
|
||
<div className="p-4 bg-slate-700/50 rounded-lg">
|
||
<div className="text-sm text-slate-300 mb-2">SOL Risk/Reward</div>
|
||
<div className="flex gap-4 text-xs">
|
||
<div>
|
||
<span className="text-red-400">Max Loss: </span>
|
||
<span className="text-white font-bold">${solRisk.maxLoss.toFixed(2)}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-green-400">Full Win: </span>
|
||
<span className="text-white font-bold">${solRisk.fullWin.toFixed(2)}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-purple-400">R:R </span>
|
||
<span className="text-white font-bold">1:{(solRisk.fullWin / solRisk.maxLoss).toFixed(2)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})()}
|
||
</Section>
|
||
|
||
<Section title="⚡ Ethereum (ETH-PERP)" description="Individual settings for Ethereum perpetual trading">
|
||
<div className="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
|
||
<p className="text-sm text-blue-400">
|
||
Enable/disable Ethereum trading and set symbol-specific position sizing. When enabled, these settings override global defaults for ETH trades.
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center justify-between p-4 bg-slate-700/30 rounded-lg mb-4">
|
||
<div className="flex-1">
|
||
<div className="text-white font-medium mb-1">🟢 Enable Ethereum Trading</div>
|
||
<div className="text-slate-400 text-sm">
|
||
Accept ETH-PERP trade signals from TradingView
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => updateSetting('ETHEREUM_ENABLED', !settings.ETHEREUM_ENABLED)}
|
||
className={`relative inline-flex h-8 w-14 items-center rounded-full transition-colors ${
|
||
settings.ETHEREUM_ENABLED ? 'bg-green-500' : 'bg-slate-600'
|
||
}`}
|
||
>
|
||
<span
|
||
className={`inline-block h-6 w-6 transform rounded-full bg-white transition-transform ${
|
||
settings.ETHEREUM_ENABLED ? 'translate-x-7' : 'translate-x-1'
|
||
}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
<Setting
|
||
label={`ETH Position Size (${settings.ETHEREUM_USE_PERCENTAGE_SIZE ? '%' : 'USD'})`}
|
||
value={settings.ETHEREUM_POSITION_SIZE}
|
||
onChange={(v) => updateSetting('ETHEREUM_POSITION_SIZE', v)}
|
||
min={1}
|
||
max={settings.ETHEREUM_USE_PERCENTAGE_SIZE ? 100 : 10000}
|
||
step={1}
|
||
description={
|
||
settings.ETHEREUM_USE_PERCENTAGE_SIZE
|
||
? `Percentage of free collateral for ETH trades. With ${settings.ETHEREUM_LEVERAGE}x leverage.`
|
||
: `Base capital for ETH trades. With ${settings.ETHEREUM_LEVERAGE}x leverage = $${(settings.ETHEREUM_POSITION_SIZE * settings.ETHEREUM_LEVERAGE).toFixed(0)} notional position. Drift minimum: ~$38-40 (0.01 ETH).`
|
||
}
|
||
/>
|
||
<Setting
|
||
label="ETH Leverage"
|
||
value={settings.ETHEREUM_LEVERAGE}
|
||
onChange={(v) => updateSetting('ETHEREUM_LEVERAGE', v)}
|
||
min={1}
|
||
max={20}
|
||
step={1}
|
||
description="Leverage multiplier for Ethereum positions only."
|
||
/>
|
||
{(() => {
|
||
const ethRisk = calculateRisk(settings.ETHEREUM_POSITION_SIZE, settings.ETHEREUM_LEVERAGE)
|
||
return ethRisk && (
|
||
<div className="p-4 bg-slate-700/50 rounded-lg">
|
||
<div className="text-sm text-slate-300 mb-2">ETH Risk/Reward</div>
|
||
<div className="flex gap-4 text-xs">
|
||
<div>
|
||
<span className="text-red-400">Max Loss: </span>
|
||
<span className="text-white font-bold">${ethRisk.maxLoss.toFixed(2)}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-green-400">Full Win: </span>
|
||
<span className="text-white font-bold">${ethRisk.fullWin.toFixed(2)}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-purple-400">R:R </span>
|
||
<span className="text-white font-bold">1:{(ethRisk.fullWin / ethRisk.maxLoss).toFixed(2)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})()}
|
||
</Section>
|
||
|
||
{/* FARTCOIN Section */}
|
||
<Section title="🎈 Fartcoin (FARTCOIN-PERP)" description="Individual settings for Fartcoin perpetual trading (PROFIT MODE)">
|
||
<div className="mb-4 p-3 bg-pink-500/10 border border-pink-500/30 rounded-lg">
|
||
<p className="text-sm text-pink-400">
|
||
Enable/disable FARTCOIN trading with percentage-based position sizing for profit generation. Uses % of portfolio instead of fixed USD amounts.
|
||
</p>
|
||
<div className="mt-2 inline-flex items-center gap-2 px-3 py-1 bg-purple-500/20 rounded-full">
|
||
<span className="text-xs font-bold text-purple-300">PERCENTAGE-BASED</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-between p-4 bg-slate-700/30 rounded-lg mb-4">
|
||
<div className="flex-1">
|
||
<div className="text-white font-medium mb-1">🟢 Enable Fartcoin Trading</div>
|
||
<div className="text-slate-400 text-sm">
|
||
Accept FARTCOIN-PERP trade signals from TradingView
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => updateSetting('FARTCOIN_ENABLED', !settings.FARTCOIN_ENABLED)}
|
||
className={`relative inline-flex h-8 w-14 items-center rounded-full transition-colors ${
|
||
settings.FARTCOIN_ENABLED ? 'bg-green-500' : 'bg-slate-600'
|
||
}`}
|
||
>
|
||
<span
|
||
className={`inline-block h-6 w-6 transform rounded-full bg-white transition-transform ${
|
||
settings.FARTCOIN_ENABLED ? 'translate-x-7' : 'translate-x-1'
|
||
}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
<Setting
|
||
label="FARTCOIN Position Size (% of Portfolio)"
|
||
value={settings.FARTCOIN_POSITION_SIZE}
|
||
onChange={(v) => updateSetting('FARTCOIN_POSITION_SIZE', v)}
|
||
min={1}
|
||
max={100}
|
||
step={1}
|
||
description={`Percentage of your portfolio to allocate per FARTCOIN trade. With ${settings.FARTCOIN_LEVERAGE}x leverage = ${(settings.FARTCOIN_POSITION_SIZE * settings.FARTCOIN_LEVERAGE).toFixed(0)}% notional exposure. Example: 20% × $${collateral.toFixed(0)} = $${(settings.FARTCOIN_POSITION_SIZE / 100 * collateral).toFixed(2)} base.`}
|
||
/>
|
||
<Setting
|
||
label="FARTCOIN Leverage"
|
||
value={settings.FARTCOIN_LEVERAGE}
|
||
onChange={(v) => updateSetting('FARTCOIN_LEVERAGE', v)}
|
||
min={1}
|
||
max={10}
|
||
step={1}
|
||
description="Leverage multiplier for Fartcoin positions (max 10x based on Drift margin requirements)."
|
||
/>
|
||
{(() => {
|
||
const fartcoinRisk = {
|
||
maxLoss: (settings.FARTCOIN_POSITION_SIZE / 100 * collateral * settings.FARTCOIN_LEVERAGE) * 0.015,
|
||
fullWin: (settings.FARTCOIN_POSITION_SIZE / 100 * collateral * settings.FARTCOIN_LEVERAGE) * 0.018,
|
||
}
|
||
return (
|
||
<div className="p-4 bg-slate-700/50 rounded-lg">
|
||
<div className="text-sm text-slate-300 mb-2">FARTCOIN Risk/Reward (% of Portfolio)</div>
|
||
<div className="flex gap-4 text-xs">
|
||
<div>
|
||
<span className="text-red-400">Max Loss: </span>
|
||
<span className="text-white font-bold">${fartcoinRisk.maxLoss.toFixed(2)}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-green-400">Full Win: </span>
|
||
<span className="text-white font-bold">${fartcoinRisk.fullWin.toFixed(2)}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-purple-400">R:R </span>
|
||
<span className="text-white font-bold">1:{(fartcoinRisk.fullWin / fartcoinRisk.maxLoss).toFixed(2)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})()}
|
||
</Section>
|
||
|
||
{/* Global Position Sizing (Fallback) */}
|
||
<Section title="💰 Global Position Sizing (Fallback)" description="Default settings for symbols without specific config (e.g., BTC)">
|
||
<div className="mb-4 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
|
||
<p className="text-sm text-yellow-400">
|
||
These are fallback values used for any symbol that doesn't have its own specific settings (like BTC-PERP). SOL and ETH ignore these when their own settings are configured above.
|
||
</p>
|
||
</div>
|
||
<Setting
|
||
label="Position Size (USD)"
|
||
value={settings.MAX_POSITION_SIZE_USD}
|
||
onChange={(v) => updateSetting('MAX_POSITION_SIZE_USD', v)}
|
||
min={10}
|
||
max={10000}
|
||
step={10}
|
||
description="Base USD amount per trade for unspecified symbols."
|
||
/>
|
||
<Setting
|
||
label="Leverage"
|
||
value={settings.LEVERAGE}
|
||
onChange={(v) => updateSetting('LEVERAGE', v)}
|
||
min={1}
|
||
max={20}
|
||
step={1}
|
||
description="Leverage multiplier for unspecified symbols."
|
||
/>
|
||
</Section>
|
||
|
||
{/* Adaptive Leverage */}
|
||
<Section title="⚡ Adaptive Leverage" description="Quality-based dynamic leverage adjustment">
|
||
<div className="mb-4 p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
|
||
<p className="text-sm text-purple-400">
|
||
Automatically adjust leverage based on signal quality score. High-quality signals get more leverage for maximum profit, borderline signals use lower leverage for risk management.
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center justify-between p-4 bg-slate-700/30 rounded-lg mb-4">
|
||
<div className="flex-1">
|
||
<div className="text-white font-medium mb-1">🎯 Enable Adaptive Leverage</div>
|
||
<div className="text-slate-400 text-sm">
|
||
Dynamically adjust leverage based on signal quality
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => updateSetting('USE_ADAPTIVE_LEVERAGE', !settings.USE_ADAPTIVE_LEVERAGE)}
|
||
className={`relative inline-flex h-8 w-14 items-center rounded-full transition-colors ${
|
||
settings.USE_ADAPTIVE_LEVERAGE ? 'bg-green-500' : 'bg-slate-600'
|
||
}`}
|
||
>
|
||
<span
|
||
className={`inline-block h-6 w-6 transform rounded-full bg-white transition-transform ${
|
||
settings.USE_ADAPTIVE_LEVERAGE ? 'translate-x-7' : 'translate-x-1'
|
||
}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
<Setting
|
||
label="High Quality Leverage"
|
||
value={settings.HIGH_QUALITY_LEVERAGE}
|
||
onChange={(v) => updateSetting('HIGH_QUALITY_LEVERAGE', v)}
|
||
min={1}
|
||
max={20}
|
||
step={1}
|
||
description={`Leverage for exceptional signals (Quality ${settings.QUALITY_LEVERAGE_THRESHOLD_LONG}+ LONG, ${settings.QUALITY_LEVERAGE_THRESHOLD_SHORT}+ SHORT). Current: ${settings.HIGH_QUALITY_LEVERAGE}x leverage.`}
|
||
/>
|
||
<Setting
|
||
label="Low Quality Leverage"
|
||
value={settings.LOW_QUALITY_LEVERAGE}
|
||
onChange={(v) => updateSetting('LOW_QUALITY_LEVERAGE', v)}
|
||
min={1}
|
||
max={20}
|
||
step={1}
|
||
description={`Leverage for borderline signals (Quality 90-${settings.QUALITY_LEVERAGE_THRESHOLD_LONG-1} LONG, 80-${settings.QUALITY_LEVERAGE_THRESHOLD_SHORT-1} SHORT). Current: ${settings.LOW_QUALITY_LEVERAGE}x leverage.`}
|
||
/>
|
||
<Setting
|
||
label="Quality Threshold (LONG)"
|
||
value={settings.QUALITY_LEVERAGE_THRESHOLD_LONG}
|
||
onChange={(v) => updateSetting('QUALITY_LEVERAGE_THRESHOLD_LONG', v)}
|
||
min={80}
|
||
max={100}
|
||
step={1}
|
||
description="Minimum quality score for high-quality leverage tier on LONG signals."
|
||
/>
|
||
<Setting
|
||
label="Quality Threshold (SHORT)"
|
||
value={settings.QUALITY_LEVERAGE_THRESHOLD_SHORT}
|
||
onChange={(v) => updateSetting('QUALITY_LEVERAGE_THRESHOLD_SHORT', v)}
|
||
min={80}
|
||
max={100}
|
||
step={1}
|
||
description="Minimum quality score for high-quality leverage tier on SHORT signals."
|
||
/>
|
||
<div className="p-4 bg-slate-700/50 rounded-lg">
|
||
<div className="text-sm text-slate-300 mb-2">Leverage Tiers (with ${collateral.toFixed(0)} collateral)</div>
|
||
<div className="space-y-2 text-xs">
|
||
<div className="flex justify-between">
|
||
<span className="text-slate-400">🔥 High Quality (Q{settings.QUALITY_LEVERAGE_THRESHOLD_LONG}+ LONG, Q{settings.QUALITY_LEVERAGE_THRESHOLD_SHORT}+ SHORT):</span>
|
||
<span className="text-green-400 font-bold">{settings.HIGH_QUALITY_LEVERAGE}x = ${(collateral * settings.HIGH_QUALITY_LEVERAGE).toFixed(0)} position</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-slate-400">📊 Low Quality (Q90-{settings.QUALITY_LEVERAGE_THRESHOLD_LONG-1} LONG, Q80-{settings.QUALITY_LEVERAGE_THRESHOLD_SHORT-1} SHORT):</span>
|
||
<span className="text-yellow-400 font-bold">{settings.LOW_QUALITY_LEVERAGE}x = ${(collateral * settings.LOW_QUALITY_LEVERAGE).toFixed(0)} position</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-slate-400">❌ Below Threshold:</span>
|
||
<span className="text-red-400 font-bold">Blocked (no trade)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Risk Management */}
|
||
<Section title="🛡️ Risk Management" description="Stop loss and take profit levels">
|
||
<Setting
|
||
label="Stop Loss (%)"
|
||
value={settings.STOP_LOSS_PERCENT}
|
||
onChange={(v) => updateSetting('STOP_LOSS_PERCENT', v)}
|
||
min={-10}
|
||
max={-0.1}
|
||
step={0.1}
|
||
description="Close 100% of position when price drops this much. Protects from large losses."
|
||
/>
|
||
<Setting
|
||
label="Take Profit 1 Price (%)"
|
||
value={settings.TAKE_PROFIT_1_PERCENT}
|
||
onChange={(v) => updateSetting('TAKE_PROFIT_1_PERCENT', v)}
|
||
min={0.1}
|
||
max={10}
|
||
step={0.1}
|
||
description="Price level for first take profit exit."
|
||
/>
|
||
<Setting
|
||
label="Take Profit 1 Size (%)"
|
||
value={settings.TAKE_PROFIT_1_SIZE_PERCENT}
|
||
onChange={(v) => updateSetting('TAKE_PROFIT_1_SIZE_PERCENT', v)}
|
||
min={1}
|
||
max={100}
|
||
step={1}
|
||
description="What % of position to close at TP1. Example: 50 = close half."
|
||
/>
|
||
<Setting
|
||
label="Take Profit 2 Price (%)"
|
||
value={settings.TAKE_PROFIT_2_PERCENT}
|
||
onChange={(v) => updateSetting('TAKE_PROFIT_2_PERCENT', v)}
|
||
min={0.1}
|
||
max={20}
|
||
step={0.1}
|
||
description="Price level where runner trailing stop activates (no close operation)."
|
||
/>
|
||
<Setting
|
||
label="Emergency Stop (%)"
|
||
value={settings.EMERGENCY_STOP_PERCENT}
|
||
onChange={(v) => updateSetting('EMERGENCY_STOP_PERCENT', v)}
|
||
min={-20}
|
||
max={-0.1}
|
||
step={0.1}
|
||
description="Hard stop for flash crashes. Should be wider than regular SL."
|
||
/>
|
||
</Section>
|
||
|
||
{/* ATR-based Dynamic Targets */}
|
||
<Section title="📈 ATR-Based Dynamic Targets" description="Automatically scale TP2 based on market volatility to capture big moves">
|
||
<div className="mb-4 p-3 bg-green-500/10 border border-green-500/30 rounded-lg">
|
||
<p className="text-sm text-green-400 mb-2">
|
||
<strong>🎯 Capture Big Moves:</strong> When ATR is high (volatile markets), TP2 automatically scales higher to catch 4-5% moves instead of exiting early at 0.7%.
|
||
</p>
|
||
<p className="text-xs text-gray-400">
|
||
Example: If ATR = 1.2% and multiplier = 2.0, then TP2 = 2.4% (instead of fixed 0.7%). Perfect for trending markets!
|
||
</p>
|
||
</div>
|
||
<Setting
|
||
label="Enable ATR-Based Targets"
|
||
value={(settings as any).USE_ATR_BASED_TARGETS ? 1 : 0}
|
||
onChange={(v) => updateSetting('USE_ATR_BASED_TARGETS', v === 1)}
|
||
min={0}
|
||
max={1}
|
||
step={1}
|
||
description="Enable dynamic TP2 based on Average True Range (market volatility). 0 = fixed TP2, 1 = adaptive TP2."
|
||
/>
|
||
<Setting
|
||
label="ATR Multiplier for TP2"
|
||
value={(settings as any).ATR_MULTIPLIER_FOR_TP2 || 2.0}
|
||
onChange={(v) => updateSetting('ATR_MULTIPLIER_FOR_TP2', v)}
|
||
min={1.0}
|
||
max={4.0}
|
||
step={0.1}
|
||
description="Multiply ATR by this value to get TP2 target. Higher = more aggressive targets in volatile markets."
|
||
/>
|
||
<Setting
|
||
label="Minimum TP2 (%)"
|
||
value={(settings as any).MIN_TP2_PERCENT || 0.7}
|
||
onChange={(v) => updateSetting('MIN_TP2_PERCENT', v)}
|
||
min={0.3}
|
||
max={2.0}
|
||
step={0.1}
|
||
description="Safety floor - TP2 will never go below this level even in low-volatility markets."
|
||
/>
|
||
<Setting
|
||
label="Maximum TP2 (%)"
|
||
value={(settings as any).MAX_TP2_PERCENT || 3.0}
|
||
onChange={(v) => updateSetting('MAX_TP2_PERCENT', v)}
|
||
min={1.0}
|
||
max={5.0}
|
||
step={0.1}
|
||
description="Safety cap - TP2 will never exceed this level. Example: 3.0% = 30% account gain at 10x leverage."
|
||
/>
|
||
</Section>
|
||
|
||
{/* Dynamic Adjustments */}
|
||
<Section title="🎯 Dynamic Stop Loss" description="Automatically adjust SL as trade moves in profit">
|
||
<Setting
|
||
label="Breakeven Trigger (%)"
|
||
value={settings.BREAKEVEN_TRIGGER_PERCENT}
|
||
onChange={(v) => updateSetting('BREAKEVEN_TRIGGER_PERCENT', v)}
|
||
min={0}
|
||
max={5}
|
||
step={0.1}
|
||
description="After TP1 closes, move SL to this profit level. Should be between 0% (breakeven) and TP1%. Example: 0.4% = locks in +4% account profit on remaining position."
|
||
/>
|
||
<Setting
|
||
label="Profit Lock Trigger (%)"
|
||
value={settings.PROFIT_LOCK_TRIGGER_PERCENT}
|
||
onChange={(v) => updateSetting('PROFIT_LOCK_TRIGGER_PERCENT', v)}
|
||
min={0}
|
||
max={10}
|
||
step={0.1}
|
||
description="After TP1, if price continues to this level, move SL higher to lock more profit. Must be > TP1 and < TP2."
|
||
/>
|
||
<Setting
|
||
label="Profit Lock Amount (%)"
|
||
value={settings.PROFIT_LOCK_PERCENT}
|
||
onChange={(v) => updateSetting('PROFIT_LOCK_PERCENT', v)}
|
||
min={0}
|
||
max={5}
|
||
step={0.1}
|
||
description="When Profit Lock Trigger hits, move SL to this profit level. Should be > Breakeven Trigger."
|
||
/>
|
||
</Section>
|
||
|
||
{/* Trailing Stop */}
|
||
<Section
|
||
title={`🏃 Trailing Stop (${100 - settings.TAKE_PROFIT_1_SIZE_PERCENT}% Runner)`}
|
||
description={`TP2 activates trailing stop on full ${100 - settings.TAKE_PROFIT_1_SIZE_PERCENT}% remaining`}
|
||
>
|
||
<div className="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
|
||
<p className="text-sm text-blue-400">
|
||
NEW SYSTEM: When TP2 price is hit, no position is closed. Instead, trailing stop activates on the full {100 - settings.TAKE_PROFIT_1_SIZE_PERCENT}% remaining position for maximum runner potential.
|
||
Current split: {settings.TAKE_PROFIT_1_SIZE_PERCENT}% at TP1, {100 - settings.TAKE_PROFIT_1_SIZE_PERCENT}% becomes runner.
|
||
</p>
|
||
</div>
|
||
<Setting
|
||
label="Use Trailing Stop"
|
||
value={settings.USE_TRAILING_STOP ? 1 : 0}
|
||
onChange={(v) => updateSetting('USE_TRAILING_STOP', v === 1)}
|
||
min={0}
|
||
max={1}
|
||
step={1}
|
||
description={`Enable trailing stop for ${100 - settings.TAKE_PROFIT_1_SIZE_PERCENT}% runner position when TP2 triggers. 0 = disabled, 1 = enabled.`}
|
||
/>
|
||
<Setting
|
||
label="Trailing Stop Distance (%) [FALLBACK]"
|
||
value={settings.TRAILING_STOP_PERCENT}
|
||
onChange={(v) => updateSetting('TRAILING_STOP_PERCENT', v)}
|
||
min={0.1}
|
||
max={2}
|
||
step={0.1}
|
||
description="Legacy fallback used only if ATR data is unavailable. Normally, ATR-based trailing is used instead."
|
||
/>
|
||
<Setting
|
||
label="ATR Trailing Multiplier"
|
||
value={settings.TRAILING_STOP_ATR_MULTIPLIER}
|
||
onChange={(v) => updateSetting('TRAILING_STOP_ATR_MULTIPLIER', v)}
|
||
min={1.0}
|
||
max={3.0}
|
||
step={0.1}
|
||
description="🔥 NEW: Trailing distance = (ATR × multiplier). Example: 0.5% ATR × 1.5 = 0.75% trailing. Higher = more room for runner, lower = tighter protection."
|
||
/>
|
||
<Setting
|
||
label="Min Trailing Distance (%)"
|
||
value={settings.TRAILING_STOP_MIN_PERCENT}
|
||
onChange={(v) => updateSetting('TRAILING_STOP_MIN_PERCENT', v)}
|
||
min={0.1}
|
||
max={1.0}
|
||
step={0.05}
|
||
description="Minimum trailing distance cap. Prevents ultra-tight stops in low ATR conditions."
|
||
/>
|
||
<Setting
|
||
label="Max Trailing Distance (%)"
|
||
value={settings.TRAILING_STOP_MAX_PERCENT}
|
||
onChange={(v) => updateSetting('TRAILING_STOP_MAX_PERCENT', v)}
|
||
min={0.5}
|
||
max={2.0}
|
||
step={0.1}
|
||
description="Maximum trailing distance cap. Prevents excessively wide stops in high ATR conditions."
|
||
/>
|
||
<Setting
|
||
label="Trailing Stop Activation (%)"
|
||
value={settings.TRAILING_STOP_ACTIVATION}
|
||
onChange={(v) => updateSetting('TRAILING_STOP_ACTIVATION', v)}
|
||
min={0.1}
|
||
max={5}
|
||
step={0.1}
|
||
description={`${100 - settings.TAKE_PROFIT_1_SIZE_PERCENT}% runner must reach this profit % before trailing stop activates. Prevents premature stops. Example: 0.5% = wait until runner is +0.5% profit.`}
|
||
/>
|
||
</Section>
|
||
|
||
{/* Position Scaling */}
|
||
<Section title="📈 Position Scaling" description="Add to profitable positions with strong confirmation">
|
||
<div className="mb-4 p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
|
||
<p className="text-sm text-purple-400 mb-2">
|
||
<strong>⚠️ Advanced Feature:</strong> Scale into existing profitable positions when high-quality signals confirm trend strength.
|
||
</p>
|
||
<p className="text-xs text-gray-400">
|
||
<strong>When enabled:</strong> Same-direction signals will ADD to position (not rejected) if quality ≥{settings?.MIN_SCALE_QUALITY_SCORE || 75},
|
||
profit ≥{settings?.MIN_PROFIT_FOR_SCALE || 0.4}%, ADX increased ≥{settings?.MIN_ADX_INCREASE || 5}, and price position <{settings?.MAX_PRICE_POSITION_FOR_SCALE || 70}%.
|
||
</p>
|
||
</div>
|
||
<Setting
|
||
label="Enable Position Scaling"
|
||
value={settings.ENABLE_POSITION_SCALING ? 1 : 0}
|
||
onChange={(v) => updateSetting('ENABLE_POSITION_SCALING', v === 1)}
|
||
min={0}
|
||
max={1}
|
||
step={1}
|
||
description="🔴 DISABLED by default. Enable to allow scaling into profitable positions. 0 = block duplicates (safe), 1 = allow scaling (aggressive)."
|
||
/>
|
||
<Setting
|
||
label="Min Quality Score for Scaling"
|
||
value={settings.MIN_SCALE_QUALITY_SCORE}
|
||
onChange={(v) => updateSetting('MIN_SCALE_QUALITY_SCORE', v)}
|
||
min={60}
|
||
max={90}
|
||
step={5}
|
||
description="Scaling signal must score this high (0-100). Higher = more selective. Recommended: 75 (vs 60 for initial entry)."
|
||
/>
|
||
<Setting
|
||
label="Min Profit to Scale (%)"
|
||
value={settings.MIN_PROFIT_FOR_SCALE}
|
||
onChange={(v) => updateSetting('MIN_PROFIT_FOR_SCALE', v)}
|
||
min={0}
|
||
max={2}
|
||
step={0.1}
|
||
description="Position must be this profitable before scaling. Example: 0.4% = must be at/past TP1. NEVER scales into losing positions."
|
||
/>
|
||
<Setting
|
||
label="Scale Size (%)"
|
||
value={settings.SCALE_SIZE_PERCENT}
|
||
onChange={(v) => updateSetting('SCALE_SIZE_PERCENT', v)}
|
||
min={10}
|
||
max={100}
|
||
step={10}
|
||
description="Add this % of original position size. Example: 50% = if original was $2100, scale adds $1050."
|
||
/>
|
||
<Setting
|
||
label="Max Total Position Size (multiplier)"
|
||
value={settings.MAX_SCALE_MULTIPLIER}
|
||
onChange={(v) => updateSetting('MAX_SCALE_MULTIPLIER', v)}
|
||
min={1}
|
||
max={3}
|
||
step={0.5}
|
||
description="Max total position size after scaling. Example: 2.0 = can scale to 200% of original (original + 1 scale of 100%)."
|
||
/>
|
||
<Setting
|
||
label="Min ADX Increase"
|
||
value={settings.MIN_ADX_INCREASE}
|
||
onChange={(v) => updateSetting('MIN_ADX_INCREASE', v)}
|
||
min={0}
|
||
max={15}
|
||
step={1}
|
||
description="ADX must increase by this much since entry. Example: 5 = if entered at ADX 15, scale requires ADX ≥20. Confirms trend strengthening."
|
||
/>
|
||
<Setting
|
||
label="Max Price Position for Scale (%)"
|
||
value={settings.MAX_PRICE_POSITION_FOR_SCALE}
|
||
onChange={(v) => updateSetting('MAX_PRICE_POSITION_FOR_SCALE', v)}
|
||
min={50}
|
||
max={90}
|
||
step={5}
|
||
description="Don't scale if price is above this % of range. Example: 70% = blocks scaling near resistance. Prevents chasing."
|
||
/>
|
||
|
||
{/* Risk Calculator for Scaling */}
|
||
{settings.ENABLE_POSITION_SCALING && (
|
||
<div className="mt-4 p-4 bg-purple-900/20 border border-purple-500/30 rounded-lg">
|
||
<h4 className="text-sm font-semibold text-purple-400 mb-2">📊 Scaling Impact (SOL Example)</h4>
|
||
<div className="space-y-1 text-xs text-gray-300">
|
||
<div className="flex justify-between">
|
||
<span>Original Position:</span>
|
||
<span className="font-mono">${settings.SOLANA_POSITION_SIZE * settings.SOLANA_LEVERAGE}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>Scale Addition ({settings.SCALE_SIZE_PERCENT}%):</span>
|
||
<span className="font-mono text-yellow-400">+${((settings.SOLANA_POSITION_SIZE * settings.SOLANA_LEVERAGE) * (settings.SCALE_SIZE_PERCENT / 100)).toFixed(0)}</span>
|
||
</div>
|
||
<div className="flex justify-between border-t border-purple-500/30 pt-1 mt-1">
|
||
<span className="font-semibold">Total After 1 Scale:</span>
|
||
<span className="font-mono font-semibold text-purple-400">${((settings.SOLANA_POSITION_SIZE * settings.SOLANA_LEVERAGE) * (1 + settings.SCALE_SIZE_PERCENT / 100)).toFixed(0)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="font-semibold">Max Position ({settings.MAX_SCALE_MULTIPLIER}x):</span>
|
||
<span className="font-mono font-semibold text-red-400">${((settings.SOLANA_POSITION_SIZE * settings.SOLANA_LEVERAGE) * settings.MAX_SCALE_MULTIPLIER).toFixed(0)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Section>
|
||
|
||
{/* Trade Limits */}
|
||
<Section title="⚠️ Safety Limits" description="Prevent overtrading and excessive losses">
|
||
<Setting
|
||
label="Max Daily Loss (USD)"
|
||
value={settings.MAX_DAILY_DRAWDOWN}
|
||
onChange={(v) => updateSetting('MAX_DAILY_DRAWDOWN', v)}
|
||
min={-1000}
|
||
max={-10}
|
||
step={10}
|
||
description="Stop trading if daily loss exceeds this amount."
|
||
/>
|
||
<Setting
|
||
label="Max Trades Per Hour"
|
||
value={settings.MAX_TRADES_PER_HOUR}
|
||
onChange={(v) => updateSetting('MAX_TRADES_PER_HOUR', v)}
|
||
min={1}
|
||
max={20}
|
||
step={1}
|
||
description="Maximum number of trades allowed per hour."
|
||
/>
|
||
<Setting
|
||
label="Cooldown Between Trades (minutes)"
|
||
value={settings.MIN_TIME_BETWEEN_TRADES}
|
||
onChange={(v) => updateSetting('MIN_TIME_BETWEEN_TRADES', v)}
|
||
min={0}
|
||
max={60}
|
||
step={1}
|
||
description="Minimum wait time between trades to prevent overtrading."
|
||
/>
|
||
<Setting
|
||
label="Min Quality Score - Global Fallback (0-100)"
|
||
value={settings.MIN_SIGNAL_QUALITY_SCORE}
|
||
onChange={(v) => updateSetting('MIN_SIGNAL_QUALITY_SCORE', v)}
|
||
min={0}
|
||
max={100}
|
||
step={5}
|
||
description="Global fallback minimum quality score (used for BTC and other symbols). Direction-specific thresholds override this for SOL/ETH."
|
||
/>
|
||
<Setting
|
||
label="Min Quality Score - LONG Signals (0-100)"
|
||
value={settings.MIN_SIGNAL_QUALITY_SCORE_LONG}
|
||
onChange={(v) => updateSetting('MIN_SIGNAL_QUALITY_SCORE_LONG', v)}
|
||
min={0}
|
||
max={100}
|
||
step={5}
|
||
description="Minimum quality for LONG signals. Set to 90 based on data: quality 90-94 longs show 71.4% WR (+$44.77 profit)."
|
||
/>
|
||
<Setting
|
||
label="Min Quality Score - SHORT Signals (0-100)"
|
||
value={settings.MIN_SIGNAL_QUALITY_SCORE_SHORT}
|
||
onChange={(v) => updateSetting('MIN_SIGNAL_QUALITY_SCORE_SHORT', v)}
|
||
min={0}
|
||
max={100}
|
||
step={5}
|
||
description="Minimum quality for SHORT signals. Set to 95 based on data: quality 90-94 shorts show 28.6% WR (-$553.76 toxic). Blocks low-quality shorts."
|
||
/>
|
||
</Section>
|
||
|
||
{/* Execution */}
|
||
<Section title="⚡ Execution Settings" description="Order execution parameters">
|
||
<Setting
|
||
label="Slippage Tolerance (%)"
|
||
value={settings.SLIPPAGE_TOLERANCE}
|
||
onChange={(v) => updateSetting('SLIPPAGE_TOLERANCE', v)}
|
||
min={0.1}
|
||
max={5}
|
||
step={0.1}
|
||
description="Maximum acceptable price slippage on market orders."
|
||
/>
|
||
<div className="flex items-center justify-between p-4 bg-slate-700/30 rounded-lg">
|
||
<div className="flex-1">
|
||
<div className="text-white font-medium mb-1">🧪 Dry Run Mode</div>
|
||
<div className="text-slate-400 text-sm">
|
||
Simulate trades without executing. Enable for testing.
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => updateSetting('DRY_RUN', !settings.DRY_RUN)}
|
||
className={`relative inline-flex h-8 w-14 items-center rounded-full transition-colors ${
|
||
settings.DRY_RUN ? 'bg-blue-500' : 'bg-slate-600'
|
||
}`}
|
||
>
|
||
<span
|
||
className={`inline-block h-6 w-6 transform rounded-full bg-white transition-transform ${
|
||
settings.DRY_RUN ? 'translate-x-7' : 'translate-x-1'
|
||
}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="mt-8 space-y-4">
|
||
{/* Primary Actions */}
|
||
<div className="flex gap-4">
|
||
<button
|
||
onClick={saveSettings}
|
||
disabled={saving}
|
||
className="flex-1 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-bold py-4 px-6 rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{saving ? '💾 Saving...' : '💾 Save Settings'}
|
||
</button>
|
||
<button
|
||
onClick={restartBot}
|
||
disabled={restarting}
|
||
className="flex-1 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-bold py-4 px-6 rounded-lg hover:from-green-600 hover:to-emerald-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{restarting ? '🔄 Restarting...' : '🔄 Restart Bot'}
|
||
</button>
|
||
<button
|
||
onClick={syncPositions}
|
||
disabled={loading}
|
||
className="flex-1 bg-gradient-to-r from-orange-500 to-red-500 text-white font-bold py-4 px-6 rounded-lg hover:from-orange-600 hover:to-red-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||
title="Re-sync Position Manager with actual Drift positions"
|
||
>
|
||
{loading ? '🔄 Syncing...' : '🔄 Sync Positions'}
|
||
</button>
|
||
<button
|
||
onClick={loadSettings}
|
||
className="bg-slate-700 text-white font-bold py-4 px-6 rounded-lg hover:bg-slate-600 transition-all"
|
||
>
|
||
↺ Reset
|
||
</button>
|
||
</div>
|
||
|
||
{/* Test Trade Buttons */}
|
||
<div className="space-y-4">
|
||
<div className="text-center text-slate-300 text-sm font-bold">🧪 Test Trades (REAL MONEY)</div>
|
||
<div className="flex gap-4">
|
||
<button
|
||
onClick={() => testTrade('long', 'SOLUSDT')}
|
||
disabled={testing || !settings.SOLANA_ENABLED}
|
||
className="flex-1 bg-gradient-to-r from-purple-500 to-purple-600 text-white font-bold py-4 px-6 rounded-lg hover:from-purple-600 hover:to-purple-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed border-2 border-purple-400"
|
||
>
|
||
{testing ? '🧪 Executing...' : '💎 Test SOL LONG'}
|
||
</button>
|
||
<button
|
||
onClick={() => testTrade('short', 'SOLUSDT')}
|
||
disabled={testing || !settings.SOLANA_ENABLED}
|
||
className="flex-1 bg-gradient-to-r from-purple-600 to-red-500 text-white font-bold py-4 px-6 rounded-lg hover:from-purple-700 hover:to-red-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed border-2 border-purple-400"
|
||
>
|
||
{testing ? '🧪 Executing...' : '💎 Test SOL SHORT'}
|
||
</button>
|
||
</div>
|
||
<div className="flex gap-4">
|
||
<button
|
||
onClick={() => testTrade('long', 'ETHUSDT')}
|
||
disabled={testing || !settings.ETHEREUM_ENABLED}
|
||
className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold py-4 px-6 rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed border-2 border-blue-400"
|
||
>
|
||
{testing ? '🧪 Executing...' : '⚡ Test ETH LONG'}
|
||
</button>
|
||
<button
|
||
onClick={() => testTrade('short', 'ETHUSDT')}
|
||
disabled={testing || !settings.ETHEREUM_ENABLED}
|
||
className="flex-1 bg-gradient-to-r from-blue-600 to-red-500 text-white font-bold py-4 px-6 rounded-lg hover:from-blue-700 hover:to-red-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed border-2 border-blue-400"
|
||
>
|
||
{testing ? '🧪 Executing...' : '⚡ Test ETH SHORT'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 text-center text-slate-400 text-sm">
|
||
💡 Save settings first, then click Restart Bot to apply changes
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function Section({ title, description, children }: { title: string, description: string, children: React.ReactNode }) {
|
||
return (
|
||
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6">
|
||
<h2 className="text-xl font-bold text-white mb-1">{title}</h2>
|
||
<p className="text-slate-400 text-sm mb-6">{description}</p>
|
||
<div className="space-y-4">
|
||
{children}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function Setting({
|
||
label,
|
||
value,
|
||
onChange,
|
||
min,
|
||
max,
|
||
step,
|
||
description
|
||
}: {
|
||
label: string
|
||
value: number
|
||
onChange: (value: number) => void
|
||
min: number
|
||
max: number
|
||
step: number
|
||
description: string
|
||
}) {
|
||
return (
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<label className="text-white font-medium">{label}</label>
|
||
<input
|
||
type="number"
|
||
value={value}
|
||
onChange={(e) => onChange(parseFloat(e.target.value))}
|
||
min={min}
|
||
max={max}
|
||
step={step}
|
||
className="w-24 bg-slate-700 text-white px-3 py-2 rounded-lg border border-slate-600 focus:border-blue-500 focus:outline-none"
|
||
/>
|
||
</div>
|
||
<input
|
||
type="range"
|
||
value={value}
|
||
onChange={(e) => onChange(parseFloat(e.target.value))}
|
||
min={min}
|
||
max={max}
|
||
step={step}
|
||
className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer slider"
|
||
/>
|
||
<p className="text-slate-400 text-sm">{description}</p>
|
||
</div>
|
||
)
|
||
}
|