From bf808561b7fa7d60252e6cc6594b4925556d7323 Mon Sep 17 00:00:00 2001 From: Piotr Matlak Date: Tue, 9 Apr 2024 14:44:16 +0200 Subject: [PATCH] set preselected ticks when start position from position details --- .../DepositSelector/DepositSelector.tsx | 16 ++++++- src/components/NewPosition/NewPosition.tsx | 46 ++++++++++++++----- .../RangeSelector/RangeSelector.tsx | 44 ++++++++++++------ .../PositionDetails/PositionDetails.tsx | 4 +- .../NewPositionWrapper/NewPositionWrapper.tsx | 6 +++ src/pages/NewPositionPage/NewPositionPage.tsx | 6 +++ src/pages/PagesRouter.tsx | 14 +++++- 7 files changed, 106 insertions(+), 30 deletions(-) diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx index c30d7fe8d..2cf0117a8 100644 --- a/src/components/NewPosition/DepositSelector/DepositSelector.tsx +++ b/src/components/NewPosition/DepositSelector/DepositSelector.tsx @@ -31,11 +31,15 @@ export interface IDepositSelector { initialTokenFrom: string initialTokenTo: string initialFee: string + initialLeftRange: string + initialRightRange: string tokens: SwapToken[] setPositionTokens: ( tokenAIndex: number | null, tokenBindex: number | null, - feeTierIndex: number + feeTierIndex: number, + leftRange?: string, + rightRange?: string ) => void onAddLiquidity: () => void tokenAInputState: InputState @@ -63,6 +67,8 @@ export const DepositSelector: React.FC = ({ initialTokenFrom, initialTokenTo, initialFee, + initialLeftRange, + initialRightRange, tokens, setPositionTokens, onAddLiquidity, @@ -122,7 +128,13 @@ export const DepositSelector: React.FC = ({ setTokenAIndex(tokenAIndexFromPath) setTokenBIndex(tokenBIndexFromPath) - setPositionTokens(tokenAIndexFromPath, tokenBIndexFromPath, feeTierIndexFromPath) + setPositionTokens( + tokenAIndexFromPath, + tokenBIndexFromPath, + feeTierIndexFromPath, + initialLeftRange, + initialRightRange + ) setIsLoaded(true) }, [tokens]) diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx index 7c78ebf49..d40568c37 100644 --- a/src/components/NewPosition/NewPosition.tsx +++ b/src/components/NewPosition/NewPosition.tsx @@ -13,10 +13,8 @@ import { printBNtoBN, trimLeadingZeros } from '@consts/utils' -import { MIN_TICK } from '@invariant-labs/sdk' import { Decimal } from '@invariant-labs/sdk/lib/market' -import { fromFee } from '@invariant-labs/sdk/lib/utils' -import { MAX_TICK } from '@invariant-labs/sdk/src' +import { fromFee, getMinTick, getMaxTick } from '@invariant-labs/sdk/lib/utils' import { Button, Grid, Typography } from '@material-ui/core' import { Color } from '@material-ui/lab' import { BN } from '@project-serum/anchor' @@ -39,6 +37,8 @@ export interface INewPosition { initialTokenFrom: string initialTokenTo: string initialFee: string + initialLeftRange: string + initialRightRange: string history: History poolAddress: string calculatePoolAddress: () => Promise @@ -112,6 +112,8 @@ export const NewPosition: React.FC = ({ initialTokenFrom, initialTokenTo, initialFee, + initialLeftRange, + initialRightRange, history, poolAddress, calculatePoolAddress, @@ -162,10 +164,16 @@ export const NewPosition: React.FC = ({ }) => { const classes = useStyles() - const [isConcentrated, setIsConcentrated] = useState(initialIsConcentratedValue) + const [isConcentrated, setIsConcentrated] = useState( + initialLeftRange.length > 0 && initialLeftRange.length > 0 ? false : initialIsConcentratedValue + ) - const [leftRange, setLeftRange] = useState(MIN_TICK) - const [rightRange, setRightRange] = useState(MAX_TICK) + const [leftRange, setLeftRange] = useState( + initialLeftRange.length > 0 ? +initialLeftRange : getMinTick(tickSpacing) + ) + const [rightRange, setRightRange] = useState( + initialRightRange.length > 0 ? +initialRightRange : getMaxTick(tickSpacing) + ) const [tokenAIndex, setTokenAIndex] = useState(null) const [tokenBIndex, setTokenBIndex] = useState(null) @@ -333,10 +341,22 @@ export const NewPosition: React.FC = ({ onSlippageChange(slippage) } - const updatePath = (index1: number | null, index2: number | null, fee: number) => { + const updatePath = ( + index1: number | null, + index2: number | null, + fee: number, + leftRange?: string, + rightRange?: string + ) => { const parsedFee = parseFeeToPathFee(+ALL_FEE_TIERS_DATA[fee].tier.fee) - if (index1 != null && index2 != null) { + if (index1 != null && index2 != null && leftRange && rightRange) { + const address1 = addressToTicker(tokens[index1].assetAddress.toString()) + const address2 = addressToTicker(tokens[index2].assetAddress.toString()) + history.replace( + `/newPosition/${address1}/${address2}/${parsedFee}/${leftRange}/${rightRange}` + ) + } else if (index1 != null && index2 != null) { const address1 = addressToTicker(tokens[index1].assetAddress.toString()) const address2 = addressToTicker(tokens[index2].assetAddress.toString()) history.replace(`/newPosition/${address1}/${address2}/${parsedFee}`) @@ -375,7 +395,7 @@ export const NewPosition: React.FC = ({ setIsConcentrated(val) onIsConcentratedChange(val) }} - initialValue={initialIsConcentratedValue ? 0 : 1} + initialValue={isConcentrated ? 0 : 1} className={classes.switch} style={{ opacity: poolIndex !== null ? 1 : 0 @@ -405,14 +425,16 @@ export const NewPosition: React.FC = ({ initialTokenFrom={initialTokenFrom} initialTokenTo={initialTokenTo} initialFee={initialFee} + initialLeftRange={initialLeftRange} + initialRightRange={initialRightRange} className={classes.deposit} tokens={tokens} - setPositionTokens={(index1, index2, fee) => { + setPositionTokens={(index1, index2, fee, leftRange, rightRange) => { setTokenAIndex(index1) setTokenBIndex(index2) onChangePositionTokens(index1, index2, fee) - updatePath(index1, index2, fee) + updatePath(index1, index2, fee, leftRange, rightRange) }} onAddLiquidity={() => { if (tokenAIndex !== null && tokenBIndex !== null) { @@ -557,6 +579,8 @@ export const NewPosition: React.FC = ({ hasTicksError={hasTicksError} reloadHandler={reloadHandler} volumeRange={plotVolumeRange} + initialLeftRange={initialLeftRange} + initialRightRange={initialRightRange} /> ) : ( = ({ @@ -67,12 +67,18 @@ export const RangeSelector: React.FC = ({ poolIndex, hasTicksError, reloadHandler, - volumeRange + volumeRange, + initialLeftRange, + initialRightRange }) => { const classes = useStyles() - const [leftRange, setLeftRange] = useState(MIN_TICK) - const [rightRange, setRightRange] = useState(MAX_TICK) + const [leftRange, setLeftRange] = useState( + initialLeftRange.length > 0 ? +initialLeftRange : getMinTick(tickSpacing) + ) + const [rightRange, setRightRange] = useState( + initialRightRange.length > 0 ? +initialRightRange : getMaxTick(tickSpacing) + ) const [leftInput, setLeftInput] = useState('') const [rightInput, setRightInput] = useState('') @@ -135,17 +141,20 @@ export const RangeSelector: React.FC = ({ setRightInputRounded(val) } - const changeRangeHandler = (left: number, right: number) => { - setLeftRange(left) - setRightRange(right) + const changeRangeHandler = (left: number, right: number, isInitialRender: boolean = false) => { + const leftRange = initialLeftRange.length > 0 && isInitialRender ? +initialLeftRange : left + const rightRange = initialRightRange.length > 0 && isInitialRender ? +initialRightRange : right + + setLeftRange(leftRange) + setRightRange(rightRange) - setLeftInputValues(calcPrice(left, isXtoY, xDecimal, yDecimal).toString()) - setRightInputValues(calcPrice(right, isXtoY, xDecimal, yDecimal).toString()) + setLeftInputValues(calcPrice(leftRange, isXtoY, xDecimal, yDecimal).toString()) + setRightInputValues(calcPrice(rightRange, isXtoY, xDecimal, yDecimal).toString()) - onChangeRange(left, right) + onChangeRange(leftRange, rightRange) } - const resetPlot = () => { + const resetPlot = (userEventCall: boolean = false) => { if (!isConcentrated) { const initSideDist = Math.abs( midPrice.x - @@ -163,10 +172,17 @@ export const RangeSelector: React.FC = ({ : Math.min(getMaxTick(tickSpacing), midPrice.index + tickSpacing * 10), isXtoY ? Math.min(getMaxTick(tickSpacing), midPrice.index + tickSpacing * 10) - : Math.max(getMinTick(tickSpacing), midPrice.index - tickSpacing * 10) + : Math.max(getMinTick(tickSpacing), midPrice.index - tickSpacing * 10), + !userEventCall ) setPlotMin(midPrice.x - initSideDist) setPlotMax(midPrice.x + initSideDist) + + if (initialLeftRange.length > 0 && initialRightRange.length > 0 && userEventCall) { + autoZoomHandler(leftRange, rightRange) + } else if (initialLeftRange.length > 0 && initialRightRange.length > 0) { + autoZoomHandler(leftRange, rightRange, true) + } } else { setConcentrationIndex(0) const { leftRange, rightRange } = calculateConcentrationRange( @@ -490,7 +506,7 @@ export const RangeSelector: React.FC = ({ ) : ( - diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx index 5841b1a09..49d3947de 100644 --- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx +++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx @@ -43,6 +43,8 @@ export interface IProps { initialTokenFrom: string initialTokenTo: string initialFee: string + initialLeftRange: string + initialRightRange: string history: History } @@ -50,6 +52,8 @@ export const NewPositionWrapper: React.FC = ({ initialTokenFrom, initialTokenTo, initialFee, + initialLeftRange, + initialRightRange, history }) => { const dispatch = useDispatch() @@ -433,6 +437,8 @@ export const NewPositionWrapper: React.FC = ({ initialTokenFrom={initialTokenFrom} initialTokenTo={initialTokenTo} initialFee={initialFee} + initialLeftRange={initialLeftRange} + initialRightRange={initialRightRange} history={history} copyPoolAddressHandler={copyPoolAddressHandler} poolAddress={poolIndex !== null ? allPools[poolIndex].address.toString() : ''} diff --git a/src/pages/NewPositionPage/NewPositionPage.tsx b/src/pages/NewPositionPage/NewPositionPage.tsx index e848e4f3c..b4a0190e9 100644 --- a/src/pages/NewPositionPage/NewPositionPage.tsx +++ b/src/pages/NewPositionPage/NewPositionPage.tsx @@ -8,6 +8,8 @@ export interface IProps { initialTokenFrom: string initialTokenTo: string initialFee: string + initialLeftRange: string + initialRightRange: string history: History } @@ -15,6 +17,8 @@ export const NewPositionPage: React.FC = ({ initialTokenFrom, initialTokenTo, initialFee, + initialLeftRange, + initialRightRange, history }) => { const classes = useStyles() @@ -26,6 +30,8 @@ export const NewPositionPage: React.FC = ({ initialTokenFrom={initialTokenFrom} initialTokenTo={initialTokenTo} initialFee={initialFee} + initialLeftRange={initialLeftRange} + initialRightRange={initialRightRange} history={history} /> diff --git a/src/pages/PagesRouter.tsx b/src/pages/PagesRouter.tsx index 42f89e293..c33d99307 100644 --- a/src/pages/PagesRouter.tsx +++ b/src/pages/PagesRouter.tsx @@ -45,13 +45,21 @@ export const PagesRouter: React.FC = () => { { let initialTokenFrom = '' let initialTokenTo = '' let initialFee = '' + let initialLeftRange = '' + let initialRightRange = '' - if (match.params.item3) { + if (match.params.item5 && match.params.item4) { + initialTokenFrom = match.params.item1 as string + initialTokenTo = match.params.item2 as string + initialFee = match.params.item3 as string + initialLeftRange = match.params.item4 + initialRightRange = match.params.item5 + } else if (match.params.item3) { initialTokenFrom = match.params.item1 as string initialTokenTo = match.params.item2 as string initialFee = match.params.item3 @@ -67,6 +75,8 @@ export const PagesRouter: React.FC = () => { initialTokenFrom={initialTokenFrom} initialTokenTo={initialTokenTo} initialFee={initialFee} + initialLeftRange={initialLeftRange} + initialRightRange={initialRightRange} history={history} /> )