import Decimal from "decimal.js"; import { ControllerRenderProps } from "react-hook-form"; import { selectedSymbolStore } from "../../../../store"; import { useOrderPlacingError } from "../../../useOrderPlacingError"; import { useStepSize } from "../../../useStepSize"; import { useStepValues } from "../../../useStepValues"; import { SellForm, StopLimitOrderValues } from "../types"; const ControllerAmount = ({ render, }: { render: (state: { field: ControllerRenderProps; }) => any; }) => { const { setValue, getValues, trigger } = SellForm.useFormContext(); const { selectedSymbol } = selectedSymbolStore.useState(); const { getAmountError } = useOrderPlacingError(); const { expectedValue, onChangeValue } = useStepValues( "limit", selectedSymbol?.symbol, ); const { toTickSize } = useStepSize(selectedSymbol?.symbol, "limit"); return ( { const { price } = getValues(); if (!Number(value)) { setValue("slider", 0); return undefined; } return getAmountError({ symbol: selectedSymbol?.symbol, side: "Sell", baseQuantity: Number(value), price: Number(price), type: "limit", }); }, }, }} render={({ field: { onChange, value, ...rest } }) => render({ field: { value: expectedValue(value), onChange: (_value) => { onChange(onChangeValue(_value) || _value); const { price } = getValues(); setValue( "total", price && _value ? toTickSize(new Decimal(_value).mul(Number(price))) : "", ); trigger(["amount", "total"]); }, ...rest, }, }) } /> ); }; export { ControllerAmount };