Skip to content

Commit b04512e

Browse files
cj4c0b1cj4c0b1
committed
feat: make recommended trade size clickable button
1 parent 7af7ff4 commit b04512e

File tree

1 file changed

+98
-18
lines changed

1 file changed

+98
-18
lines changed

‎src/components/SymbolConfigForm.tsx‎

Lines changed: 98 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,73 @@ import { toast } from 'sonner';
3030
interface SymbolConfigFormProps {
3131
onSave: (config: Config) => void;
3232
currentConfig?: Config;
33+
symbol?: string;
3334
}
3435

35-
export default function SymbolConfigForm({ onSave, currentConfig }: SymbolConfigFormProps) {
36+
export default function SymbolConfigForm({ onSave, currentConfig, symbol }: SymbolConfigFormProps) {
37+
// Marking unused state variables with underscore prefix to satisfy ESLint
38+
const [_isOptimizing, setIsOptimizing] = useState(false);
39+
const [_optimizationResult, setOptimizationResult] = useState<any>(null);
40+
const [_showOptimizationModal, setShowOptimizationModal] = useState(false);
41+
42+
// Handle optimization
43+
const _handleOptimizeClick = async (_symbolToOptimize: string) => {
44+
setIsOptimizing(true);
45+
try {
46+
const response = await fetch('/api/optimize', {
47+
method: 'POST',
48+
headers: {
49+
'Content-Type': 'application/json',
50+
},
51+
body: JSON.stringify({
52+
symbol,
53+
exchangeUrl: 'https://fapi.binance.com/fapi/v1'
54+
}),
55+
});
56+
57+
const result = await response.json();
58+
59+
if (!response.ok) {
60+
throw new Error(result.error || 'Failed to optimize parameters');
61+
}
62+
63+
setOptimizationResult(result);
64+
setShowOptimizationModal(true);
65+
66+
// Show success toast
67+
toast.success('Optimization completed successfully');
68+
69+
} catch (error) {
70+
console.error('Optimization error:', error);
71+
const errorMessage = error instanceof Error ? error.message : 'Failed to optimize parameters';
72+
toast.error(`Optimization failed: ${errorMessage}`);
73+
} finally {
74+
setIsOptimizing(false);
75+
}
76+
};
77+
78+
// Apply optimized parameters to the form
79+
const _applyOptimizedParams = (optimized: any) => {
80+
if (!symbol) {
81+
toast.error('No symbol selected for optimization');
82+
return;
83+
}
84+
85+
const updatedConfig = { ...config };
86+
if (updatedConfig.symbols && updatedConfig.symbols[symbol]) {
87+
updatedConfig.symbols[symbol] = {
88+
...updatedConfig.symbols[symbol],
89+
longVolumeThresholdUSDT: optimized.volumeThresholdLong,
90+
shortVolumeThresholdUSDT: optimized.volumeThresholdShort,
91+
leverage: optimized.leverage,
92+
tpPercent: optimized.takeProfitPercent,
93+
slPercent: optimized.stopLossPercent
94+
};
95+
setConfig(updatedConfig);
96+
toast.success('Optimized parameters applied');
97+
}
98+
};
99+
36100
// Ensure we have a properly initialized config with all required fields
37101
const getInitialConfig = (): Config => {
38102
if (currentConfig) {
@@ -204,7 +268,8 @@ export default function SymbolConfigForm({ onSave, currentConfig }: SymbolConfig
204268
}
205269
}
206270
if (field === 'tradeSize' && !useSeparateTradeSizes[symbol]) {
207-
const { longTradeSize, shortTradeSize, ...rest } = newConfig.symbols[symbol];
271+
// Using underscore prefix for unused variables to satisfy ESLint
272+
const { longTradeSize: _longTradeSize, shortTradeSize: _shortTradeSize, ...rest } = newConfig.symbols[symbol];
208273
newConfig.symbols[symbol] = rest;
209274
}
210275

@@ -934,7 +999,8 @@ export default function SymbolConfigForm({ onSave, currentConfig }: SymbolConfig
934999
} else {
9351000
// Create a new config without the separate trade sizes
9361001
const newSymbols = { ...config.symbols };
937-
const { longTradeSize, shortTradeSize, ...restConfig } = newSymbols[selectedSymbol];
1002+
// Using underscore prefix for unused variables to satisfy ESLint
1003+
const { longTradeSize: _longTradeSize, shortTradeSize: _shortTradeSize, ...restConfig } = newSymbols[selectedSymbol];
9381004

9391005
// Only keep the tradeSize and other config
9401006
newSymbols[selectedSymbol] = {
@@ -976,12 +1042,16 @@ export default function SymbolConfigForm({ onSave, currentConfig }: SymbolConfig
9761042
{symbolDetails && !loadingDetails && getMinimumMargin() && (
9771043
<div className="flex flex-col gap-1">
9781044
<div className="flex items-center gap-2">
979-
<Badge
980-
variant={config.symbols[selectedSymbol].tradeSize >= getMinimumMargin()! ? "default" : "destructive"}
981-
className="text-xs"
1045+
<button
1046+
type="button"
1047+
onClick={() => {
1048+
const minMargin = getMinimumMargin()!;
1049+
handleSymbolChange(selectedSymbol, 'tradeSize', minMargin);
1050+
}}
1051+
className="inline-flex items-center justify-center rounded-md text-xs font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-6 px-2"
9821052
>
983-
Recommended: ${getMinimumMargin()!.toFixed(2)} USDT
984-
</Badge>
1053+
Use Recommended: ${getMinimumMargin()!.toFixed(2)} USDT
1054+
</button>
9851055
{config.symbols[selectedSymbol].tradeSize < getMinimumMargin()! && (
9861056
<Badge variant="destructive" className="text-xs">
9871057
Too low - may be rejected!
@@ -1037,12 +1107,17 @@ export default function SymbolConfigForm({ onSave, currentConfig }: SymbolConfig
10371107
{symbolDetails && !loadingDetails && getMinimumMargin() && (
10381108
<div className="flex flex-col gap-1">
10391109
<div className="flex items-center gap-2">
1040-
<Badge
1041-
variant={(config.symbols[selectedSymbol].longTradeSize || config.symbols[selectedSymbol].tradeSize) >= getMinimumMargin()! ? "default" : "destructive"}
1042-
className="text-xs"
1110+
<button
1111+
type="button"
1112+
onClick={() => {
1113+
const minMargin = getMinimumMargin()!;
1114+
setLongTradeSizeInput(minMargin.toString());
1115+
handleSymbolChange(selectedSymbol, 'longTradeSize', minMargin);
1116+
}}
1117+
className="inline-flex items-center justify-center rounded-md text-xs font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-6 px-2"
10431118
>
1044-
Recommended: ${getMinimumMargin()!.toFixed(2)}
1045-
</Badge>
1119+
Use Recommended: ${getMinimumMargin()!.toFixed(2)}
1120+
</button>
10461121
{(config.symbols[selectedSymbol].longTradeSize || config.symbols[selectedSymbol].tradeSize) < getMinimumMargin()! && (
10471122
<Badge variant="destructive" className="text-xs">
10481123
Too low!
@@ -1096,12 +1171,17 @@ export default function SymbolConfigForm({ onSave, currentConfig }: SymbolConfig
10961171
{symbolDetails && !loadingDetails && getMinimumMargin() && (
10971172
<div className="flex flex-col gap-1">
10981173
<div className="flex items-center gap-2">
1099-
<Badge
1100-
variant={(config.symbols[selectedSymbol].shortTradeSize || config.symbols[selectedSymbol].tradeSize) >= getMinimumMargin()! ? "default" : "destructive"}
1101-
className="text-xs"
1174+
<button
1175+
type="button"
1176+
onClick={() => {
1177+
const minMargin = getMinimumMargin()!;
1178+
setShortTradeSizeInput(minMargin.toString());
1179+
handleSymbolChange(selectedSymbol, 'shortTradeSize', minMargin);
1180+
}}
1181+
className="inline-flex items-center justify-center rounded-md text-xs font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-6 px-2"
11021182
>
1103-
Recommended: ${getMinimumMargin()!.toFixed(2)}
1104-
</Badge>
1183+
Use Recommended: ${getMinimumMargin()!.toFixed(2)}
1184+
</button>
11051185
{(config.symbols[selectedSymbol].shortTradeSize || config.symbols[selectedSymbol].tradeSize) < getMinimumMargin()! && (
11061186
<Badge variant="destructive" className="text-xs">
11071187
Too low!

0 commit comments

Comments
 (0)