diff --git a/src/views/forms/TradeForm/LeverageSlider.tsx b/src/views/forms/TradeForm/LeverageSlider.tsx index b18a1c0..57b0277 100644 --- a/src/views/forms/TradeForm/LeverageSlider.tsx +++ b/src/views/forms/TradeForm/LeverageSlider.tsx @@ -1,10 +1,10 @@ -import { type Dispatch, type SetStateAction, useCallback, useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import styled, { AnyStyledComponent, css } from 'styled-components'; import { Root, Thumb, Track } from '@radix-ui/react-slider'; import _ from 'lodash'; import { OrderSide } from '@dydxprotocol/v4-client-js'; -import { type Nullable, TradeInputField } from '@/constants/abacus'; +import { TradeInputField } from '@/constants/abacus'; import { PositionSide } from '@/constants/trade'; import { MustBigNumber, type BigNumberish } from '@/lib/numbers'; @@ -12,11 +12,11 @@ import abacusStateManager from '@/lib/abacus'; type ElementProps = { leverage?: BigNumberish | null; - leverageInputValue: Nullable; + leverageInputValue: string; maxLeverage: BigNumberish | null; orderSide: OrderSide; positionSide: PositionSide; - setLeverageInputValue: Dispatch>>; + setLeverageInputValue: (value: string) => void; }; type StyleProps = { className?: string }; @@ -33,6 +33,7 @@ export const LeverageSlider = ({ const leverageBN = MustBigNumber(leverage); const maxLeverageBN = MustBigNumber(maxLeverage); const leverageInputBN = MustBigNumber(leverageInputValue || leverage); + const leverageInputNumber = isNaN(leverageInputBN.toNumber()) ? 0 : leverageInputBN.toNumber(); const sliderConfig = useMemo( () => ({ @@ -79,12 +80,12 @@ export const LeverageSlider = ({ ); const onSliderDrag = ([newLeverage]: number[]) => { - setLeverageInputValue(newLeverage); + setLeverageInputValue(`${newLeverage}`); debouncedSetAbacusLeverage(newLeverage); }; const onValueCommit = ([newLeverage]: number[]) => { - setLeverageInputValue(newLeverage); + setLeverageInputValue(`${newLeverage}`); // Ensure Abacus is updated with the latest, committed value debouncedSetAbacusLeverage.cancel(); @@ -102,7 +103,7 @@ export const LeverageSlider = ({ min={min} max={max} step={0.1} - value={[Math.min(Math.max(leverageInputBN.toNumber(), min), max)]} + value={[Math.min(Math.max(leverageInputNumber, min), max)]} onValueChange={onSliderDrag} onValueCommit={onValueCommit} > diff --git a/src/views/forms/TradeForm/MarketLeverageInput.tsx b/src/views/forms/TradeForm/MarketLeverageInput.tsx index aba36e9..4ca06ee 100644 --- a/src/views/forms/TradeForm/MarketLeverageInput.tsx +++ b/src/views/forms/TradeForm/MarketLeverageInput.tsx @@ -1,9 +1,8 @@ -import type { Dispatch, SetStateAction } from 'react'; import { shallowEqual, useSelector } from 'react-redux'; import styled, { AnyStyledComponent } from 'styled-components'; import { OrderSide } from '@dydxprotocol/v4-client-js'; -import { TradeInputField, Nullable } from '@/constants/abacus'; +import { TradeInputField } from '@/constants/abacus'; import { ButtonShape } from '@/constants/buttons'; import { STRING_KEYS } from '@/constants/localization'; import { LEVERAGE_DECIMALS } from '@/constants/numbers'; @@ -62,21 +61,7 @@ export const MarketLeverageInput = ({ const leveragePosition = postOrderLeverage ? newPositionSide : currentPositionSide; - const onLeverageInput = ({ value, floatValue }: { value: string; floatValue?: number }) => { - const newLeverage = MustBigNumber(floatValue).toFixed(); - - if (value === '' || newLeverage === 'NaN' || !floatValue) { - setLeverageInputValue(''); - abacusStateManager.setTradeValue({ - value: null, - field: TradeInputField.leverage, - }); - } else { - updateLeverage(floatValue); - } - }; - - const updateLeverage = (newLeverage: string | number) => { + const getSignedLeverage = (newLeverage: string | number) => { const newLeverageBN = MustBigNumber(newLeverage); const newLeverageSignedBN = leveragePosition === PositionSide.Short || @@ -84,10 +69,33 @@ export const MarketLeverageInput = ({ ? newLeverageBN.abs().negated() : newLeverageBN.abs(); - setLeverageInputValue(newLeverageSignedBN.toString()); + return newLeverageSignedBN.toFixed(LEVERAGE_DECIMALS); + }; + + const onLeverageInput = ({ + floatValue, + formattedValue, + }: { + floatValue?: number; + formattedValue: string; + }) => { + setLeverageInputValue(formattedValue); + const newLeverage = MustBigNumber(floatValue).toFixed(); abacusStateManager.setTradeValue({ - value: newLeverageSignedBN.toFixed(LEVERAGE_DECIMALS), + value: + formattedValue === '' || newLeverage === 'NaN' ? null : getSignedLeverage(formattedValue), + field: TradeInputField.leverage, + }); + }; + + const updateLeverage = (newLeverage: string | number) => { + const newLeverageSigned = getSignedLeverage(newLeverage); + + setLeverageInputValue(newLeverageSigned); + + abacusStateManager.setTradeValue({ + value: newLeverageSigned, field: TradeInputField.leverage, }); }; @@ -130,7 +138,7 @@ export const MarketLeverageInput = ({ > { floatValue?: number; formattedValue: string; }) => { - dispatch(setTradeFormInputs({ amountInput: MustBigNumber(floatValue).toString() })); + dispatch(setTradeFormInputs({ amountInput: formattedValue })); const newAmount = MustBigNumber(floatValue).toFixed(decimals); abacusStateManager.setTradeValue({ @@ -93,7 +93,7 @@ export const TradeSizeInputs = () => { floatValue?: number; formattedValue: string; }) => { - dispatch(setTradeFormInputs({ usdAmountInput: MustBigNumber(floatValue).toString() })); + dispatch(setTradeFormInputs({ usdAmountInput: formattedValue })); const newUsdcAmount = MustBigNumber(floatValue).toFixed(tickSizeDecimals || USD_DECIMALS); abacusStateManager.setTradeValue({