Add concentration as query param

src/components/NewPosition/NewPosition.stories.tsx

@@ -83,6 +83,7 @@ export const Primary: Story = {
     isWaitingForNewPool: false,
     onChangePositionTokens: fn(),
     onHideUnknownTokensChange: fn(),
+    initialConcentration: '100',
     onPositionOpeningMethodChange: fn(),
     onSlippageChange: fn(),
     poolIndex: 0,
@@ -128,6 +129,7 @@ export const Primary: Story = {
         onSlippageChange={fn()}
         onHideUnknownTokensChange={fn()}
         copyPoolAddressHandler={fn()}
+        initialConcentration='100'
         reloadHandler={fn()}
         setMidPrice={fn()}
         ticksLoading={false}

src/components/NewPosition/NewPosition.tsx

@@ -50,6 +50,7 @@ import icons from '@static/icons'
 
 export interface INewPosition {
   initialTokenFrom: string
+  initialConcentration: string
   initialTokenTo: string
   initialFee: string
   poolAddress: string
@@ -126,6 +127,7 @@ export interface INewPosition {
 export const NewPosition: React.FC<INewPosition> = ({
   initialTokenFrom,
   initialTokenTo,
+  initialConcentration,
   initialFee,
   poolAddress,
   copyPoolAddressHandler,
@@ -191,6 +193,7 @@ export const NewPosition: React.FC<INewPosition> = ({
 
   const [tokenAIndex, setTokenAIndex] = useState<number | null>(null)
   const [tokenBIndex, setTokenBIndex] = useState<number | null>(null)
+  const [selectedFee, setSelectedFee] = useState<number>(0)
 
   const [tokenADeposit, setTokenADeposit] = useState<string>('')
   const [tokenBDeposit, setTokenBDeposit] = useState<string>('')
@@ -444,13 +447,21 @@ 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,
+    concentration?: number
+  ) => {
     if (canNavigate) {
       const parsedFee = parseFeeToPathFee(+ALL_FEE_TIERS_DATA[fee].tier.fee)
       if (index1 != null && index2 != null) {
         const token1Symbol = addressToTicker(network, tokens[index1].assetAddress.toString())
         const token2Symbol = addressToTicker(network, tokens[index2].assetAddress.toString())
-        navigate(`/newPosition/${token1Symbol}/${token2Symbol}/${parsedFee}`, { replace: true })
+        const concParam = concentration ? `?conc=${concentration}` : ''
+        navigate(`/newPosition/${token1Symbol}/${token2Symbol}/${parsedFee}${concParam}`, {
+          replace: true
+        })
       } else if (index1 != null) {
         const tokenSymbol = addressToTicker(network, tokens[index1].assetAddress.toString())
         navigate(`/newPosition/${tokenSymbol}/${parsedFee}`, { replace: true })
@@ -462,7 +473,6 @@ export const NewPosition: React.FC<INewPosition> = ({
       }
     }
   }
-
   useEffect(() => {
     const timeout = setTimeout(() => {
       if (refresherTime > 0 && isCurrentPoolExisting) {
@@ -625,7 +635,7 @@ export const NewPosition: React.FC<INewPosition> = ({
             setTokenAIndex(index1)
             setTokenBIndex(index2)
             onChangePositionTokens(index1, index2, fee)
-
+            setSelectedFee(fee)
             if (!isLoadingTokens) {
               updatePath(index1, index2, fee)
             }
@@ -721,7 +731,7 @@ export const NewPosition: React.FC<INewPosition> = ({
             setTokenAIndex(tokenBIndex)
             setTokenBIndex(pom)
             onChangePositionTokens(tokenBIndex, tokenAIndex, currentFeeIndex)
-
+            setSelectedFee(currentFeeIndex)
             if (!isLoadingTokens) {
               updatePath(tokenBIndex, tokenAIndex, currentFeeIndex)
             }
@@ -778,6 +788,16 @@ export const NewPosition: React.FC<INewPosition> = ({
         tokenAIndex === tokenBIndex ||
         isWaitingForNewPool ? (
           <RangeSelector
+            updatePath={{
+              update() {
+                updatePath(
+                  tokenAIndex,
+                  tokenBIndex,
+                  selectedFee,
+                  Math.round(concentrationArray[concentrationIndex])
+                )
+              }
+            }}
             poolIndex={poolIndex}
             onChangeRange={onChangeRange}
             blocked={
@@ -807,11 +827,14 @@ export const NewPosition: React.FC<INewPosition> = ({
             yDecimal={yDecimal}
             currentPairReversed={currentPairReversed}
             positionOpeningMethod={positionOpeningMethod}
+            setPositionOpeningMethod={setPositionOpeningMethod}
+            onPositionOpeningMethodChange={onPositionOpeningMethodChange}
             hasTicksError={hasTicksError}
             reloadHandler={reloadHandler}
             concentrationArray={concentrationArray}
             setConcentrationIndex={setConcentrationIndex}
             concentrationIndex={concentrationIndex}
+            initialConcentration={initialConcentration}
             minimumSliderIndex={minimumSliderIndex}
             getTicksInsideRange={getTicksInsideRange}
             shouldReversePlot={shouldReversePlot}

src/components/NewPosition/RangeSelector/RangeSelector.stories.tsx

@@ -53,6 +53,12 @@ export const Primary: Story = {
     getTicksInsideRange: () => ({ leftInRange: 0, rightInRange: 100 }),
     minimumSliderIndex: 0,
     onChangeRange: fn(),
+    updatePath: {
+      update: fn()
+    },
+    initialConcentration: '1100',
+    onPositionOpeningMethodChange: fn(),
+    setPositionOpeningMethod: fn(),
     poolIndex: 0,
     reloadHandler: fn(),
     setConcentrationIndex: fn(),

src/components/NewPosition/RangeSelector/RangeSelector.tsx

@@ -23,6 +23,9 @@ export interface IRangeSelector {
   midPrice: TickPlotPositionData
   tokenASymbol: string
   tokenBSymbol: string
+  updatePath: {
+    update: (param?: any) => void
+  }
   onChangeRange: (leftIndex: number, rightIndex: number) => void
   blocked?: boolean
   blockerInfo?: string
@@ -33,12 +36,15 @@ export interface IRangeSelector {
   tickSpacing: number
   currentPairReversed: boolean | null
   positionOpeningMethod?: PositionOpeningMethod
+  setPositionOpeningMethod: React.Dispatch<React.SetStateAction<PositionOpeningMethod>>
+  onPositionOpeningMethodChange: (val: PositionOpeningMethod) => void
   poolIndex: number | null
   hasTicksError?: boolean
   reloadHandler: () => void
   concentrationArray: number[]
   minimumSliderIndex: number
   concentrationIndex: number
+  initialConcentration: string
   setConcentrationIndex: (val: number) => void
   getTicksInsideRange: (
     left: number,
@@ -49,6 +55,7 @@ export interface IRangeSelector {
     rightInRange: number
   }
   shouldReversePlot: boolean
+
   setShouldReversePlot: (val: boolean) => void
   shouldNotUpdatePriceRange: boolean
   unblockUpdatePriceRange: () => void
@@ -61,6 +68,7 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   midPrice,
   tokenASymbol,
   tokenBSymbol,
+  updatePath,
   onChangeRange,
   blocked = false,
   blockerInfo,
@@ -77,9 +85,11 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   concentrationArray,
   minimumSliderIndex,
   concentrationIndex,
+  onPositionOpeningMethodChange,
+  setPositionOpeningMethod,
   setConcentrationIndex,
   getTicksInsideRange,
-
+  initialConcentration,
   shouldReversePlot,
   setShouldReversePlot,
   shouldNotUpdatePriceRange,
@@ -125,6 +135,10 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
     setPlotMax(newMax)
   }
 
+  useEffect(() => {
+    updatePath.update()
+  }, [concentrationIndex])
+
   const zoomPlus = () => {
     const diff = plotMax - plotMin
     const newMin = plotMin + diff / 6
@@ -393,6 +407,34 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
     autoZoomHandler(leftRange, rightRange, true)
   }, [tokenASymbol, tokenBSymbol])
 
+  useEffect(() => {
+    if (tokenASymbol !== 'ABC' && tokenBSymbol !== 'XYZ') {
+      const concentrationValue = parseInt(initialConcentration)
+      if (!isNaN(concentrationValue) && positionOpeningMethod !== 'concentration') {
+        setPositionOpeningMethod('concentration')
+        onPositionOpeningMethodChange('concentration')
+      }
+      const mappedIndex = findClosestIndexByValue(concentrationArray, concentrationValue)
+
+      const validIndex = Math.max(
+        minimumSliderIndex,
+        Math.min(mappedIndex, concentrationArray.length - 1)
+      )
+      setPreviousConcentration(cachedConcentrationArray[validIndex])
+      setConcentrationIndex(validIndex)
+      const { leftRange, rightRange } = calculateConcentrationRange(
+        tickSpacing,
+        cachedConcentrationArray[validIndex],
+        2,
+        midPrice.index,
+        isXtoY
+      )
+
+      changeRangeHandler(leftRange, rightRange)
+      autoZoomHandler(leftRange, rightRange, true)
+    }
+  }, [tokenASymbol, tokenBSymbol])
+
   return (
     <Grid container className={classes.wrapper} direction='column'>
       <Grid className={classes.topInnerWrapper}>

src/containers/NewPositionWrapper/NewPositionWrapper.tsx

@@ -50,12 +50,14 @@ export interface IProps {
   initialTokenFrom: string
   initialTokenTo: string
   initialFee: string
+  initialConcentration: string
 }
 
 export const NewPositionWrapper: React.FC<IProps> = ({
   initialTokenFrom,
   initialTokenTo,
-  initialFee
+  initialFee,
+  initialConcentration
 }) => {
   const dispatch = useDispatch()
   const connection = getCurrentSolanaConnection()
@@ -136,37 +138,39 @@ export const NewPositionWrapper: React.FC<IProps> = ({
     }
   }, [canNavigate])
 
-  useEffect(() => {
-    if (canNavigate) {
-      const tokenFromAddress = tickerToAddress(currentNetwork, initialTokenFrom)
-      const tokenToAddress = tickerToAddress(currentNetwork, initialTokenTo)
+  const getTokenIndex = (ticker: string) => {
+    const address = tickerToAddress(currentNetwork, ticker)
+    if (!address) return { address: null, index: -1 }
 
-      const tokenFromIndex = tokens.findIndex(
-        token => token.assetAddress.toString() === tokenFromAddress
-      )
+    const index = tokens.findIndex(token => token.assetAddress.toString() === address)
+    return { address, index }
+  }
 
-      const tokenToIndex = tokens.findIndex(
-        token => token.assetAddress.toString() === tokenToAddress
-      )
+  const constructNavigationPath = () => {
+    if (!canNavigate) return null
 
-      if (
-        tokenFromAddress !== null &&
-        tokenFromIndex !== -1 &&
-        (tokenToAddress === null || tokenToIndex === -1)
-      ) {
-        navigate(`/newPosition/${initialTokenFrom}/${initialFee}`)
-      } else if (
-        tokenFromAddress !== null &&
-        tokenFromIndex !== -1 &&
-        tokenToAddress !== null &&
-        tokenToIndex !== -1
-      ) {
-        navigate(`/newPosition/${initialTokenFrom}/${initialTokenTo}/${initialFee}`)
-      } else {
-        navigate(`/newPosition/${initialFee}`)
-      }
+    const { address: fromAddress, index: fromIndex } = getTokenIndex(initialTokenFrom)
+    const { address: toAddress, index: toIndex } = getTokenIndex(initialTokenTo)
+
+    const concentrationParam = initialConcentration ? `?conc=${initialConcentration}` : ''
+
+    if (fromAddress && fromIndex !== -1 && toAddress && toIndex !== -1) {
+      return `/newPosition/${initialTokenFrom}/${initialTokenTo}/${initialFee}${concentrationParam}`
     }
-  }, [tokens])
+
+    if (fromAddress && fromIndex !== -1) {
+      return `/newPosition/${initialTokenFrom}/${initialFee}${concentrationParam}`
+    }
+
+    return `/newPosition/${initialFee}${concentrationParam}`
+  }
+
+  useEffect(() => {
+    const path = constructNavigationPath()
+    if (path) {
+      navigate(path)
+    }
+  }, [tokens, canNavigate])
 
   useEffect(() => {
     isMountedRef.current = true
@@ -579,6 +583,7 @@ export const NewPositionWrapper: React.FC<IProps> = ({
   return (
     <NewPosition
       initialTokenFrom={initialTokenFrom}
+      initialConcentration={initialConcentration}
       initialTokenTo={initialTokenTo}
       initialFee={initialFee}
       copyPoolAddressHandler={copyPoolAddressHandler}