105 lines
3.0 KiB
TypeScript
105 lines
3.0 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
|
|
import type { MoneyManagement, Timeframe } from '../../../generated/ManagingApi'
|
|
import { Slider } from '../../atoms'
|
|
import FormInput from '../../mollecules/FormInput/FormInput'
|
|
|
|
type ICustomMoneyManagement = {
|
|
onCreateMoneyManagement: (moneyManagement: MoneyManagement) => void
|
|
timeframe: Timeframe
|
|
showCustomMoneyManagement: boolean
|
|
}
|
|
|
|
const CustomMoneyManagement: React.FC<ICustomMoneyManagement> = ({
|
|
onCreateMoneyManagement,
|
|
timeframe,
|
|
showCustomMoneyManagement,
|
|
}) => {
|
|
const [balanceAtRisk, setBalanceAtRisk] = useState<number>(1)
|
|
const [leverage, setLeverage] = useState<number>(1)
|
|
const [takeProfit, setTakeProfit] = useState<number>(1)
|
|
const [stopLoss, setStopLoss] = useState<number>(1)
|
|
|
|
const handleCreateMoneyManagement = () => {
|
|
const moneyManagement: MoneyManagement = {
|
|
balanceAtRisk,
|
|
leverage,
|
|
name: 'custom',
|
|
stopLoss,
|
|
takeProfit,
|
|
timeframe,
|
|
}
|
|
onCreateMoneyManagement(moneyManagement)
|
|
}
|
|
|
|
useEffect(() => {
|
|
handleCreateMoneyManagement()
|
|
}, [balanceAtRisk, leverage, takeProfit, stopLoss])
|
|
|
|
return (
|
|
<>
|
|
{showCustomMoneyManagement ? (
|
|
<div className="collapse bg-base-200">
|
|
<input type="checkbox" />
|
|
<div className="collapse-title text-xs font-medium">
|
|
Custom MoneyManagement
|
|
</div>
|
|
<div className="collapse-content">
|
|
<FormInput
|
|
label="Balance at risk"
|
|
htmlFor="balanceAtRisk"
|
|
inline={true}
|
|
>
|
|
<Slider
|
|
id="balanceAtRisk"
|
|
value={balanceAtRisk}
|
|
onChange={(e) => setBalanceAtRisk(parseInt(e.target.value))}
|
|
min="1"
|
|
max="100"
|
|
step="1"
|
|
suffixValue=" %"
|
|
></Slider>
|
|
</FormInput>
|
|
|
|
<FormInput label="Leverage" htmlFor="leverage" inline={true}>
|
|
<Slider
|
|
id="leverage"
|
|
value={leverage}
|
|
max="50"
|
|
min="1"
|
|
step="1"
|
|
onChange={(e: any) => setLeverage(e.target.value)}
|
|
prefixValue="x "
|
|
></Slider>
|
|
</FormInput>
|
|
|
|
<FormInput label="TP %" htmlFor="takeProfit" inline={true}>
|
|
<Slider
|
|
id="takeProfit"
|
|
value={takeProfit}
|
|
onChange={(e: any) => setTakeProfit(e.target.value)}
|
|
step="0.01"
|
|
max="20"
|
|
suffixValue=" %"
|
|
></Slider>
|
|
</FormInput>
|
|
|
|
<FormInput label="SL %" htmlFor="stopLoss" inline={true}>
|
|
<Slider
|
|
id="stopLoss"
|
|
value={stopLoss}
|
|
onChange={(e: any) => setStopLoss(e.target.value)}
|
|
step="0.01"
|
|
max="20"
|
|
suffixValue=" %"
|
|
></Slider>
|
|
</FormInput>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default CustomMoneyManagement
|