diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx index 0527ba422..3e78ea973 100644 --- a/src/components/NewPosition/DepositSelector/DepositSelector.tsx +++ b/src/components/NewPosition/DepositSelector/DepositSelector.tsx @@ -32,11 +32,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 @@ -68,6 +72,8 @@ export const DepositSelector: React.FC = ({ initialTokenFrom, initialTokenTo, initialFee, + initialLeftRange, + initialRightRange, tokens, setPositionTokens, onAddLiquidity, @@ -131,7 +137,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 273dce226..761207a34 100644 --- a/src/components/NewPosition/NewPosition.tsx +++ b/src/components/NewPosition/NewPosition.tsx @@ -15,7 +15,12 @@ import { calculateConcentrationRange } from '@consts/utils' import { Decimal } from '@invariant-labs/sdk/lib/market' -import { fromFee, getConcentrationArray, getMaxTick } from '@invariant-labs/sdk/lib/utils' +import { + fromFee, + getConcentrationArray, + 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' @@ -33,12 +38,13 @@ import MarketIdLabel from './MarketIdLabel/MarketIdLabel' import PoolInit from './PoolInit/PoolInit' import RangeSelector from './RangeSelector/RangeSelector' import useStyles from './style' -import { getMinTick } from '@invariant-labs/sdk/src/utils' export interface INewPosition { initialTokenFrom: string initialTokenTo: string initialFee: string + initialLeftRange: string + initialRightRange: string history: History poolAddress: string calculatePoolAddress: () => Promise @@ -112,6 +118,8 @@ export const NewPosition: React.FC = ({ initialTokenFrom, initialTokenTo, initialFee, + initialLeftRange, + initialRightRange, history, poolAddress, calculatePoolAddress, @@ -163,11 +171,15 @@ export const NewPosition: React.FC = ({ const classes = useStyles() const [positionOpeningMethod, setPositionOpeningMethod] = useState( - initialOpeningPositionMethod + initialLeftRange.length > 0 && initialLeftRange.length > 0 ? 'range' : 'concentration' ) - const [leftRange, setLeftRange] = useState(getMinTick(tickSpacing)) - const [rightRange, setRightRange] = useState(getMaxTick(tickSpacing)) + 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) @@ -410,10 +422,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}`) @@ -492,14 +516,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) { @@ -653,6 +679,8 @@ export const NewPosition: React.FC = ({ concentrationIndex={concentrationIndex} minimumSliderIndex={minimumSliderIndex} getTicksInsideRange={getTicksInsideRange} + initialLeftRange={initialLeftRange} + initialRightRange={initialRightRange} /> ) : ( = ({ @@ -79,6 +81,8 @@ export const RangeSelector: React.FC = ({ hasTicksError, reloadHandler, volumeRange, + initialLeftRange, + initialRightRange, concentrationArray, minimumSliderIndex, concentrationIndex, @@ -87,8 +91,12 @@ export const RangeSelector: React.FC = ({ }) => { const classes = useStyles() - const [leftRange, setLeftRange] = useState(getMinTick(tickSpacing)) - const [rightRange, setRightRange] = useState(getMaxTick(tickSpacing)) + 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('') @@ -149,29 +157,41 @@ export const RangeSelector: React.FC = ({ setRightInputRounded(val) } - const changeRangeHandler = (left: number, right: number) => { + const changeRangeHandler = (left: number, right: number, isInitialRender: boolean = false) => { let leftRange: number let rightRange: number + const validateLeftRange = + initialLeftRange.length > 0 && isInitialRender ? +initialLeftRange : left + const validateRightRange = + initialRightRange.length > 0 && isInitialRender ? +initialRightRange : right + if (positionOpeningMethod === 'range') { - const { leftInRange, rightInRange } = getTicksInsideRange(left, right, isXtoY) + const { leftInRange, rightInRange } = getTicksInsideRange( + validateLeftRange, + validateRightRange, + isXtoY + ) leftRange = leftInRange rightRange = rightInRange } else { - leftRange = left - rightRange = right + leftRange = validateLeftRange + rightRange = validateRightRange } setLeftRange(leftRange) setRightRange(rightRange) + setLeftInputValues(calcPrice(leftRange, isXtoY, xDecimal, yDecimal).toString()) + setRightInputValues(calcPrice(rightRange, isXtoY, xDecimal, yDecimal).toString()) setLeftInputValues(calcPrice(leftRange, isXtoY, xDecimal, yDecimal).toString()) setRightInputValues(calcPrice(rightRange, isXtoY, xDecimal, yDecimal).toString()) onChangeRange(leftRange, rightRange) + onChangeRange(leftRange, rightRange) } - const resetPlot = () => { + const resetPlot = (userEventCall: boolean = false) => { if (positionOpeningMethod === 'range') { const initSideDist = Math.abs( midPrice.x - @@ -189,10 +209,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( @@ -514,7 +541,7 @@ export const RangeSelector: React.FC = ({ ) : ( - diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx index 26a03b6e0..26e9f0d9c 100644 --- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx +++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx @@ -48,6 +48,8 @@ export interface IProps { initialTokenFrom: string initialTokenTo: string initialFee: string + initialLeftRange: string + initialRightRange: string history: History } @@ -55,6 +57,8 @@ export const NewPositionWrapper: React.FC = ({ initialTokenFrom, initialTokenTo, initialFee, + initialLeftRange, + initialRightRange, history }) => { const dispatch = useDispatch() @@ -441,6 +445,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} /> )