diff --git a/libs/deal-ticket/src/components/deal-ticket/margin-mode-selector.tsx b/libs/deal-ticket/src/components/deal-ticket/margin-mode-selector.tsx index a90104682..d9360a7d1 100644 --- a/libs/deal-ticket/src/components/deal-ticket/margin-mode-selector.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/margin-mode-selector.tsx @@ -3,6 +3,7 @@ import { TradingButton as Button, TradingInput as Input, FormGroup, + LeverageSlider, } from '@vegaprotocol/ui-toolkit'; import { MarginMode, useVegaWallet } from '@vegaprotocol/wallet'; import * as Types from '@vegaprotocol/types'; @@ -86,13 +87,19 @@ const IsolatedMarginModeDialog = ({ create, }: MarginDialogProps & { marginFactor: string }) => { const [leverage, setLeverage] = useState( - (1 / Number(marginFactor)).toFixed(1) + Number((1 / Number(marginFactor)).toFixed(1)) ); - useEffect(() => { - setLeverage((1 / Number(marginFactor)).toFixed(1)); - }, [marginFactor]); const { data: maxLeverage } = useMaxLeverage(marketId, partyId); - const max = maxLeverage || 1; + const max = Math.floor((maxLeverage || 1) * 10) / 10; + useEffect(() => { + setLeverage(Number((1 / Number(marginFactor)).toFixed(1))); + }, [marginFactor]); + useEffect(() => { + if (maxLeverage && leverage > max) { + setLeverage(max); + } + }, [max, maxLeverage, leverage]); + const t = useT(); return ( +
+ setLeverage(value)} + /> +
setLeverage(e.target.value)} + onChange={(e) => setLeverage(Number(e.target.value))} />