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,
@@ -807,11 +809,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,9 @@ export const Primary: Story = {
     getTicksInsideRange: () => ({ leftInRange: 0, rightInRange: 100 }),
     minimumSliderIndex: 0,
     onChangeRange: fn(),
+    initialConcentration: '1100',
+    onPositionOpeningMethodChange: fn(),
+    setPositionOpeningMethod: fn(),
     poolIndex: 0,
     reloadHandler: fn(),
     setConcentrationIndex: fn(),

src/components/NewPosition/RangeSelector/RangeSelector.tsx

@@ -33,12 +33,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,
@@ -77,9 +80,11 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   concentrationArray,
   minimumSliderIndex,
   concentrationIndex,
+  onPositionOpeningMethodChange,
+  setPositionOpeningMethod,
   setConcentrationIndex,
   getTicksInsideRange,
-
+  initialConcentration,
   shouldReversePlot,
   setShouldReversePlot,
   shouldNotUpdatePriceRange,
@@ -110,6 +115,70 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
 
   const isMountedRef = useRef(false)
 
+  // useEffect(() => {
+  //   console.log({
+  //     data,
+  //     midPrice,
+  //     tokenASymbol,
+  //     tokenBSymbol,
+  //     onChangeRange,
+  //     blocked,
+  //     blockerInfo,
+  //     ticksLoading,
+  //     isXtoY,
+  //     xDecimal,
+  //     yDecimal,
+  //     tickSpacing,
+  //     currentPairReversed,
+  //     positionOpeningMethod,
+  //     poolIndex,
+  //     hasTicksError,
+  //     reloadHandler,
+  //     concentrationArray,
+  //     minimumSliderIndex,
+  //     concentrationIndex,
+  //     onPositionOpeningMethodChange,
+  //     setPositionOpeningMethod,
+  //     setConcentrationIndex,
+  //     getTicksInsideRange,
+  //     initialConcentration,
+  //     shouldReversePlot,
+  //     setShouldReversePlot,
+  //     shouldNotUpdatePriceRange,
+  //     unblockUpdatePriceRange
+  //   })
+  // }, [
+  //   data,
+  //   midPrice,
+  //   tokenASymbol,
+  //   tokenBSymbol,
+  //   onChangeRange,
+  //   blocked,
+  //   blockerInfo,
+  //   ticksLoading,
+  //   isXtoY,
+  //   xDecimal,
+  //   yDecimal,
+  //   tickSpacing,
+  //   currentPairReversed,
+  //   positionOpeningMethod,
+  //   poolIndex,
+  //   hasTicksError,
+  //   reloadHandler,
+  //   concentrationArray,
+  //   minimumSliderIndex,
+  //   concentrationIndex,
+  //   onPositionOpeningMethodChange,
+  //   setPositionOpeningMethod,
+  //   setConcentrationIndex,
+  //   getTicksInsideRange,
+  //   initialConcentration,
+  //   shouldReversePlot,
+  //   setShouldReversePlot,
+  //   shouldNotUpdatePriceRange,
+  //   unblockUpdatePriceRange
+  // ])
+
   useEffect(() => {
     isMountedRef.current = true
     return () => {
@@ -393,6 +462,47 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
     autoZoomHandler(leftRange, rightRange, true)
   }, [tokenASymbol, tokenBSymbol])
 
+  useEffect(() => {
+    console.log({
+      // concentrationIndex,
+      // minimumSliderIndex,
+      // concentrationArray,
+      // positionOpeningMethod,
+      tokenASymbol,
+      tokenBSymbol
+
+      // concentrationParam: initialConcentration
+    })
+
+    if (tokenASymbol !== 'ABC' && tokenBSymbol !== 'XYZ') {
+      console.log('dziala')
+      const concentrationValue = parseInt(initialConcentration)
+      console.log(concentrationValue)
+      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}

src/pages/NewPositionPage/NewPositionPage.tsx

@@ -1,40 +1,61 @@
 import { Grid } from '@mui/material'
 import React from 'react'
 import useStyles from './styles'
-import { useParams } from 'react-router-dom'
+import { useParams, useSearchParams } from 'react-router-dom'
 import NewPositionWrapper from '@containers/NewPositionWrapper/NewPositionWrapper'
 
-export interface IProps {}
+type RouteParams = {
+  item1?: string
+  item2?: string
+  item3?: string
+  concentration?: string
+}
 
-const NewPositionPage: React.FC<IProps> = () => {
-  const { classes } = useStyles()
-  const { item1, item2, item3 } = useParams()
-
-  let initialTokenFrom = ''
-  let initialTokenTo = ''
-  let initialFee = ''
-
-  if (item3) {
-    initialTokenFrom = item1 || ''
-    initialTokenTo = item2 || ''
-    initialFee = item3
-  } else if (item2) {
-    initialTokenFrom = item1 || ''
-    initialFee = item2
-  } else if (item1) {
-    initialFee = item1
+interface InitialValues {
+  tokenFrom: string
+  tokenTo: string
+  fee: string
+}
+
+const getInitialValues = (params: RouteParams): InitialValues => {
+  const initialValues: InitialValues = {
+    tokenFrom: '',
+    tokenTo: '',
+    fee: ''
+  }
+
+  if (params.item3) {
+    initialValues.tokenFrom = params.item1 || ''
+    initialValues.tokenTo = params.item2 || ''
+    initialValues.fee = params.item3
+  } else if (params.item2) {
+    initialValues.tokenFrom = params.item1 || ''
+    initialValues.fee = params.item2
+  } else if (params.item1) {
+    initialValues.fee = params.item1
   }
 
+  return initialValues
+}
+
+const NewPositionPage: React.FC = () => {
+  const { classes } = useStyles()
+  const params = useParams<keyof RouteParams>()
+  const { tokenFrom, tokenTo, fee } = getInitialValues(params)
+  const [searchParams] = useSearchParams()
+
   return (
     <Grid container className={classes.container}>
       <Grid item>
         <NewPositionWrapper
-          initialTokenFrom={initialTokenFrom}
-          initialTokenTo={initialTokenTo}
-          initialFee={initialFee}
+          initialTokenFrom={tokenFrom}
+          initialTokenTo={tokenTo}
+          initialFee={fee}
+          initialConcentration={searchParams.get('conc') ?? ''}
         />
       </Grid>
     </Grid>
   )
 }
+
 export default NewPositionPage