From f1e906812bf4e9eae7eb195af76a29fa140c117d Mon Sep 17 00:00:00 2001 From: Piotr Matlak Date: Thu, 11 Apr 2024 15:04:34 +0200 Subject: [PATCH 1/4] add validation for starting price in pool init --- .../Inputs/SimpleInput/SimpleInput.tsx | 5 +++- .../NewPosition/PoolInit/PoolInit.tsx | 26 ++++++++++++++++++- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/components/Inputs/SimpleInput/SimpleInput.tsx b/src/components/Inputs/SimpleInput/SimpleInput.tsx index 37d03507b..deda619f3 100644 --- a/src/components/Inputs/SimpleInput/SimpleInput.tsx +++ b/src/components/Inputs/SimpleInput/SimpleInput.tsx @@ -12,6 +12,7 @@ interface IProps { placeholder?: string style?: CSSProperties globalPrice?: number + onBlur?: React.FocusEventHandler } export const AmountInput: React.FC = ({ @@ -22,7 +23,8 @@ export const AmountInput: React.FC = ({ decimal, placeholder, style, - globalPrice + globalPrice, + onBlur }) => { const classes = useStyles() @@ -95,6 +97,7 @@ export const AmountInput: React.FC = ({ ) : null } + onBlur={onBlur} /> ) } diff --git a/src/components/NewPosition/PoolInit/PoolInit.tsx b/src/components/NewPosition/PoolInit/PoolInit.tsx index 5d84cc409..97374f4d4 100644 --- a/src/components/NewPosition/PoolInit/PoolInit.tsx +++ b/src/components/NewPosition/PoolInit/PoolInit.tsx @@ -101,9 +101,30 @@ export const PoolInit: React.FC = ({ changeRangeHandler(leftRange, rightRange) }, [midPrice]) + const validateMidPriceInput = (midPriceInput: string) => { + let minMidPriceInput = isXtoY + ? calcPrice(getMinTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() + : calcPrice(getMaxTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() + let maxMidPriceInput = isXtoY + ? calcPrice(getMaxTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() + : calcPrice(getMinTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() + + let validatedMidPriceInput: string = midPriceInput + + if (+midPriceInput < +minMidPriceInput) { + validatedMidPriceInput = minMidPriceInput + } else if (+midPriceInput > +maxMidPriceInput) { + validatedMidPriceInput = maxMidPriceInput + } + + return validatedMidPriceInput + } + useEffect(() => { if (currentPairReversed !== null) { - setMidPriceInput((1 / +midPriceInput).toString()) + const validatedMidPrice = validateMidPriceInput((1 / +midPriceInput).toString()) + + setMidPriceInput(validatedMidPrice) changeRangeHandler(rightRange, leftRange) } }, [currentPairReversed]) @@ -135,6 +156,9 @@ export const PoolInit: React.FC = ({ className={classes.midPrice} placeholder='0.0' globalPrice={globalPrice} + onBlur={e => { + setMidPriceInput(validateMidPriceInput(e.target.value)) + }} /> Date: Mon, 15 Apr 2024 12:46:45 +0200 Subject: [PATCH 2/4] fix lint error, validate to max numeric places --- src/components/NewPosition/PoolInit/PoolInit.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/NewPosition/PoolInit/PoolInit.tsx b/src/components/NewPosition/PoolInit/PoolInit.tsx index 97374f4d4..77264cd18 100644 --- a/src/components/NewPosition/PoolInit/PoolInit.tsx +++ b/src/components/NewPosition/PoolInit/PoolInit.tsx @@ -102,10 +102,10 @@ export const PoolInit: React.FC = ({ }, [midPrice]) const validateMidPriceInput = (midPriceInput: string) => { - let minMidPriceInput = isXtoY + const minMidPriceInput = isXtoY ? calcPrice(getMinTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() : calcPrice(getMaxTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() - let maxMidPriceInput = isXtoY + const maxMidPriceInput = isXtoY ? calcPrice(getMaxTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() : calcPrice(getMinTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() @@ -117,7 +117,7 @@ export const PoolInit: React.FC = ({ validatedMidPriceInput = maxMidPriceInput } - return validatedMidPriceInput + return toMaxNumericPlaces(+validatedMidPriceInput, 5) } useEffect(() => { From 0d9bdc327e3df3c1823eee3b359610879e8b8592 Mon Sep 17 00:00:00 2001 From: Piotr Matlak Date: Tue, 16 Apr 2024 09:31:33 +0200 Subject: [PATCH 3/4] refactor validateMidPriceInput function --- .../NewPosition/PoolInit/PoolInit.tsx | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/NewPosition/PoolInit/PoolInit.tsx b/src/components/NewPosition/PoolInit/PoolInit.tsx index 04aa5d338..419897b15 100644 --- a/src/components/NewPosition/PoolInit/PoolInit.tsx +++ b/src/components/NewPosition/PoolInit/PoolInit.tsx @@ -102,22 +102,20 @@ export const PoolInit: React.FC = ({ }, [midPrice]) const validateMidPriceInput = (midPriceInput: string) => { - const minMidPriceInput = isXtoY - ? calcPrice(getMinTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() - : calcPrice(getMaxTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() - const maxMidPriceInput = isXtoY - ? calcPrice(getMaxTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() - : calcPrice(getMinTick(tickSpacing), isXtoY, xDecimal, yDecimal).toString() + const minTick = getMinTick(tickSpacing) + const maxTick = getMaxTick(tickSpacing) - let validatedMidPriceInput: string = midPriceInput + const minPrice = isXtoY + ? calcPrice(minTick, isXtoY, xDecimal, yDecimal) + : calcPrice(maxTick, isXtoY, xDecimal, yDecimal) + const maxPrice = isXtoY + ? calcPrice(maxTick, isXtoY, xDecimal, yDecimal) + : calcPrice(minTick, isXtoY, xDecimal, yDecimal) - if (+midPriceInput < +minMidPriceInput) { - validatedMidPriceInput = minMidPriceInput - } else if (+midPriceInput > +maxMidPriceInput) { - validatedMidPriceInput = maxMidPriceInput - } + const numericMidPriceInput = parseFloat(midPriceInput) + const validatedMidPrice = Math.min(Math.max(numericMidPriceInput, minPrice), maxPrice) - return toMaxNumericPlaces(+validatedMidPriceInput, 5) + return toMaxNumericPlaces(validatedMidPrice, 5) } useEffect(() => { From 2ab037ad51a428588768801c85a9f84f67fefb90 Mon Sep 17 00:00:00 2001 From: Piotr Matlak Date: Tue, 16 Apr 2024 09:54:06 +0200 Subject: [PATCH 4/4] fix crashing app when changing price on higher fee tier --- src/components/NewPosition/NewPosition.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx index 273dce226..e54294df8 100644 --- a/src/components/NewPosition/NewPosition.tsx +++ b/src/components/NewPosition/NewPosition.tsx @@ -184,6 +184,11 @@ export const NewPosition: React.FC = ({ const [minimumSliderIndex, setMinimumSliderIndex] = useState(0) + const concentrationArray = useMemo( + () => getConcentrationArray(tickSpacing, 2, midPrice.index).sort((a, b) => a - b), + [tickSpacing] + ) + const setRangeBlockerInfo = () => { if (tokenAIndex === null || tokenBIndex === null) { return 'Select tokens to set price range.' @@ -428,11 +433,6 @@ export const NewPosition: React.FC = ({ } } - const concentrationArray = useMemo( - () => getConcentrationArray(tickSpacing, 2, midPrice.index).sort((a, b) => a - b), - [tickSpacing, midPrice.index] - ) - return (