set preselected ticks when start position from position details

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<IDepositSelector> = ({
   initialTokenFrom,
   initialTokenTo,
   initialFee,
+  initialLeftRange,
+  initialRightRange,
   tokens,
   setPositionTokens,
   onAddLiquidity,
@@ -131,7 +137,13 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
 
     setTokenAIndex(tokenAIndexFromPath)
     setTokenBIndex(tokenBIndexFromPath)
-    setPositionTokens(tokenAIndexFromPath, tokenBIndexFromPath, feeTierIndexFromPath)
+    setPositionTokens(
+      tokenAIndexFromPath,
+      tokenBIndexFromPath,
+      feeTierIndexFromPath,
+      initialLeftRange,
+      initialRightRange
+    )
 
     setIsLoaded(true)
   }, [tokens])

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<unknown>
   poolAddress: string
   calculatePoolAddress: () => Promise<string>
@@ -112,6 +118,8 @@ export const NewPosition: React.FC<INewPosition> = ({
   initialTokenFrom,
   initialTokenTo,
   initialFee,
+  initialLeftRange,
+  initialRightRange,
   history,
   poolAddress,
   calculatePoolAddress,
@@ -163,11 +171,15 @@ export const NewPosition: React.FC<INewPosition> = ({
   const classes = useStyles()
 
   const [positionOpeningMethod, setPositionOpeningMethod] = useState<PositionOpeningMethod>(
-    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<number | null>(null)
   const [tokenBIndex, setTokenBIndex] = useState<number | null>(null)
@@ -410,10 +422,22 @@ export const NewPosition: React.FC<INewPosition> = ({
     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<INewPosition> = ({
           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<INewPosition> = ({
             concentrationIndex={concentrationIndex}
             minimumSliderIndex={minimumSliderIndex}
             getTicksInsideRange={getTicksInsideRange}
+            initialLeftRange={initialLeftRange}
+            initialRightRange={initialRightRange}
           />
         ) : (
           <PoolInit

src/components/NewPosition/RangeSelector/RangeSelector.tsx

@@ -55,6 +55,8 @@ export interface IRangeSelector {
     leftInRange: number
     rightInRange: number
   }
+  initialLeftRange: string
+  initialRightRange: string
 }
 
 export const RangeSelector: React.FC<IRangeSelector> = ({
@@ -79,6 +81,8 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   hasTicksError,
   reloadHandler,
   volumeRange,
+  initialLeftRange,
+  initialRightRange,
   concentrationArray,
   minimumSliderIndex,
   concentrationIndex,
@@ -87,8 +91,12 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
 }) => {
   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<IRangeSelector> = ({
     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<IRangeSelector> = ({
           : 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<IRangeSelector> = ({
           </Grid>
         ) : (
           <Grid container className={classes.buttons}>
-            <Button className={classes.button} onClick={resetPlot}>
+            <Button className={classes.button} onClick={() => resetPlot(true)}>
               Reset range
             </Button>
             <Button

src/components/PositionDetails/PositionDetails.tsx

@@ -139,7 +139,9 @@ const PositionDetails: React.FC<IProps> = ({
                 const address1 = addressToTicker(tokenXAddress.toString())
                 const address2 = addressToTicker(tokenYAddress.toString())
 
-                history.push(`/newPosition/${address1}/${address2}/${parsedFee}`)
+                history.push(
+                  `/newPosition/${address1}/${address2}/${parsedFee}/${leftRange.index}/${rightRange.index}`
+                )
               }}>
               <span className={classes.buttonText}>+ Add Liquidity</span>
             </Button>

src/containers/NewPositionWrapper/NewPositionWrapper.tsx

@@ -48,13 +48,17 @@ export interface IProps {
   initialTokenFrom: string
   initialTokenTo: string
   initialFee: string
+  initialLeftRange: string
+  initialRightRange: string
   history: History<unknown>
 }
 
 export const NewPositionWrapper: React.FC<IProps> = ({
   initialTokenFrom,
   initialTokenTo,
   initialFee,
+  initialLeftRange,
+  initialRightRange,
   history
 }) => {
   const dispatch = useDispatch()
@@ -441,6 +445,8 @@ export const NewPositionWrapper: React.FC<IProps> = ({
       initialTokenFrom={initialTokenFrom}
       initialTokenTo={initialTokenTo}
       initialFee={initialFee}
+      initialLeftRange={initialLeftRange}
+      initialRightRange={initialRightRange}
       history={history}
       copyPoolAddressHandler={copyPoolAddressHandler}
       poolAddress={poolIndex !== null ? allPools[poolIndex].address.toString() : ''}

src/pages/NewPositionPage/NewPositionPage.tsx

@@ -8,13 +8,17 @@ export interface IProps {
   initialTokenFrom: string
   initialTokenTo: string
   initialFee: string
+  initialLeftRange: string
+  initialRightRange: string
   history: History<unknown>
 }
 
 export const NewPositionPage: React.FC<IProps> = ({
   initialTokenFrom,
   initialTokenTo,
   initialFee,
+  initialLeftRange,
+  initialRightRange,
   history
 }) => {
   const classes = useStyles()
@@ -26,6 +30,8 @@ export const NewPositionPage: React.FC<IProps> = ({
           initialTokenFrom={initialTokenFrom}
           initialTokenTo={initialTokenTo}
           initialFee={initialFee}
+          initialLeftRange={initialLeftRange}
+          initialRightRange={initialRightRange}
           history={history}
         />
       </Grid>

src/pages/PagesRouter.tsx

@@ -45,13 +45,21 @@ export const PagesRouter: React.FC = () => {
         <Switch>
           <Route path='/swap' component={SwapPage} />
           <Route
-            path={'/newPosition/:item1?/:item2?/:item3?'}
+            path={'/newPosition/:item1?/:item2?/:item3?/:item4?/:item5?'}
             render={({ match, history }) => {
               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}
                 />
               )