From a0d786255c66e1147d9ee9a2aab957ebfce3f034 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Mon, 23 Dec 2024 23:36:04 +0100
Subject: [PATCH 01/16] implement concentration queryparams

---
 src/components/NewPosition/NewPosition.tsx    | 56 ++++++++++++++++
 .../NewPositionWrapper/NewPositionWrapper.tsx | 61 +++++++++--------
 src/pages/NewPositionPage/NewPositionPage.tsx | 65 ++++++++++++-------
 3 files changed, 132 insertions(+), 50 deletions(-)

diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
index 1007c914..e31f2fb1 100644
--- a/src/components/NewPosition/NewPosition.tsx
+++ b/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,
@@ -212,6 +214,60 @@ export const NewPosition: React.FC<INewPosition> = ({
     return getConcentrationArray(tickSpacing, 2, validatedMidPrice).sort((a, b) => a - b)
   }, [tickSpacing, midPrice.index])
 
+  const mapConcentrationValueToIndex = (
+    concentrationValue: number,
+    concentrationArray: number[]
+  ): number => {
+    if (concentrationValue <= concentrationArray[0]) return 0
+    if (concentrationValue >= concentrationArray[concentrationArray.length - 1])
+      return concentrationArray.length - 1
+
+    let closestIndex = 0
+    let smallestDifference = Math.abs(concentrationArray[0] - concentrationValue)
+
+    for (let i = 1; i < concentrationArray.length; i++) {
+      const difference = Math.abs(concentrationArray[i] - concentrationValue)
+      if (difference < smallestDifference) {
+        smallestDifference = difference
+        closestIndex = i
+      }
+    }
+
+    return closestIndex
+  }
+
+  useEffect(() => {
+    console.log({
+      concentrationIndex,
+      minimumSliderIndex,
+      concentrationArray,
+      positionOpeningMethod,
+      concentrationParam: initialConcentration
+    })
+
+    if (initialConcentration) {
+      const concentrationValue = parseFloat(initialConcentration)
+      console.log(
+        concentrationValue,
+        positionOpeningMethod !== 'concentration',
+        !isNaN(concentrationValue)
+      )
+      if (!isNaN(concentrationValue) && positionOpeningMethod !== 'concentration') {
+        setPositionOpeningMethod('concentration')
+        onPositionOpeningMethodChange('concentration')
+      }
+      const mappedIndex = mapConcentrationValueToIndex(concentrationValue, concentrationArray)
+
+      const validIndex = Math.max(
+        minimumSliderIndex,
+        Math.min(mappedIndex, concentrationArray.length - 1)
+      )
+      setTimeout(() => {
+        setConcentrationIndex(validIndex)
+      }, 2000)
+    }
+  }, [])
+
   const setRangeBlockerInfo = () => {
     if (tokenAIndex === null || tokenBIndex === null) {
       return 'Select tokens to set price range.'
diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
index 2a0bd12f..11a2cada 100644
--- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
+++ b/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 ? `?concentration=${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}
diff --git a/src/pages/NewPositionPage/NewPositionPage.tsx b/src/pages/NewPositionPage/NewPositionPage.tsx
index 9e04cef5..a695db02 100644
--- a/src/pages/NewPositionPage/NewPositionPage.tsx
+++ b/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('concentration') ?? ''}
         />
       </Grid>
     </Grid>
   )
 }
+
 export default NewPositionPage

From 4ee1696a48a69bad1a0d2ff50936f4065a7b0425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Tue, 24 Dec 2024 09:06:51 +0100
Subject: [PATCH 02/16] Update

---
 src/components/NewPosition/NewPosition.tsx | 37 ++++++----------------
 1 file changed, 9 insertions(+), 28 deletions(-)

diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
index e31f2fb1..0d5dfdd6 100644
--- a/src/components/NewPosition/NewPosition.tsx
+++ b/src/components/NewPosition/NewPosition.tsx
@@ -17,6 +17,7 @@ import {
   calculateConcentrationRange,
   convertBalanceToBN,
   determinePositionTokenBlock,
+  findClosestIndexByValue,
   parseFeeToPathFee,
   printBN,
   trimLeadingZeros,
@@ -214,28 +215,6 @@ export const NewPosition: React.FC<INewPosition> = ({
     return getConcentrationArray(tickSpacing, 2, validatedMidPrice).sort((a, b) => a - b)
   }, [tickSpacing, midPrice.index])
 
-  const mapConcentrationValueToIndex = (
-    concentrationValue: number,
-    concentrationArray: number[]
-  ): number => {
-    if (concentrationValue <= concentrationArray[0]) return 0
-    if (concentrationValue >= concentrationArray[concentrationArray.length - 1])
-      return concentrationArray.length - 1
-
-    let closestIndex = 0
-    let smallestDifference = Math.abs(concentrationArray[0] - concentrationValue)
-
-    for (let i = 1; i < concentrationArray.length; i++) {
-      const difference = Math.abs(concentrationArray[i] - concentrationValue)
-      if (difference < smallestDifference) {
-        smallestDifference = difference
-        closestIndex = i
-      }
-    }
-
-    return closestIndex
-  }
-
   useEffect(() => {
     console.log({
       concentrationIndex,
@@ -246,7 +225,7 @@ export const NewPosition: React.FC<INewPosition> = ({
     })
 
     if (initialConcentration) {
-      const concentrationValue = parseFloat(initialConcentration)
+      const concentrationValue = parseInt(initialConcentration)
       console.log(
         concentrationValue,
         positionOpeningMethod !== 'concentration',
@@ -256,17 +235,19 @@ export const NewPosition: React.FC<INewPosition> = ({
         setPositionOpeningMethod('concentration')
         onPositionOpeningMethodChange('concentration')
       }
-      const mappedIndex = mapConcentrationValueToIndex(concentrationValue, concentrationArray)
+      const mappedIndex = findClosestIndexByValue(concentrationArray, concentrationValue)
 
       const validIndex = Math.max(
         minimumSliderIndex,
         Math.min(mappedIndex, concentrationArray.length - 1)
       )
-      setTimeout(() => {
-        setConcentrationIndex(validIndex)
-      }, 2000)
+      if (!ticksLoading) {
+        setTimeout(() => {
+          setConcentrationIndex(validIndex)
+        }, 4000)
+      }
     }
-  }, [])
+  }, [concentrationIndex, concentrationArray])
 
   const setRangeBlockerInfo = () => {
     if (tokenAIndex === null || tokenBIndex === null) {

From 4d8ca195a185a85d7667c64abf40b1738a9b27cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Tue, 24 Dec 2024 10:03:38 +0100
Subject: [PATCH 03/16] Move concentration query param set logic to
 RangeSelector

---
 src/components/NewPosition/NewPosition.tsx    | 38 ++------------
 .../RangeSelector/RangeSelector.tsx           | 50 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
index 0d5dfdd6..066d85c2 100644
--- a/src/components/NewPosition/NewPosition.tsx
+++ b/src/components/NewPosition/NewPosition.tsx
@@ -17,7 +17,6 @@ import {
   calculateConcentrationRange,
   convertBalanceToBN,
   determinePositionTokenBlock,
-  findClosestIndexByValue,
   parseFeeToPathFee,
   printBN,
   trimLeadingZeros,
@@ -215,40 +214,6 @@ export const NewPosition: React.FC<INewPosition> = ({
     return getConcentrationArray(tickSpacing, 2, validatedMidPrice).sort((a, b) => a - b)
   }, [tickSpacing, midPrice.index])
 
-  useEffect(() => {
-    console.log({
-      concentrationIndex,
-      minimumSliderIndex,
-      concentrationArray,
-      positionOpeningMethod,
-      concentrationParam: initialConcentration
-    })
-
-    if (initialConcentration) {
-      const concentrationValue = parseInt(initialConcentration)
-      console.log(
-        concentrationValue,
-        positionOpeningMethod !== 'concentration',
-        !isNaN(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)
-      )
-      if (!ticksLoading) {
-        setTimeout(() => {
-          setConcentrationIndex(validIndex)
-        }, 4000)
-      }
-    }
-  }, [concentrationIndex, concentrationArray])
-
   const setRangeBlockerInfo = () => {
     if (tokenAIndex === null || tokenBIndex === null) {
       return 'Select tokens to set price range.'
@@ -844,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}
diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index 6dfe759c..780230b4 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/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,
@@ -393,6 +398,49 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
     autoZoomHandler(leftRange, rightRange, true)
   }, [tokenASymbol, tokenBSymbol])
 
+  useEffect(() => {
+    console.log({
+      concentrationIndex,
+      minimumSliderIndex,
+      concentrationArray,
+      positionOpeningMethod,
+      concentrationParam: initialConcentration
+    })
+
+    if (initialConcentration) {
+      const concentrationValue = parseInt(initialConcentration)
+      console.log(
+        concentrationValue,
+        positionOpeningMethod !== 'concentration',
+        !isNaN(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)
+      )
+      if (!ticksLoading) {
+        setPreviousConcentration(cachedConcentrationArray[validIndex])
+        setConcentrationIndex(validIndex)
+        const { leftRange, rightRange } = calculateConcentrationRange(
+          tickSpacing,
+          cachedConcentrationArray[validIndex],
+          2,
+          midPrice.index,
+          isXtoY
+        )
+
+        changeRangeHandler(leftRange, rightRange)
+        autoZoomHandler(leftRange, rightRange, true)
+      }
+    }
+  }, [ticksLoading])
+
   return (
     <Grid container className={classes.wrapper} direction='column'>
       <Grid className={classes.topInnerWrapper}>

From ee1cf6c541952764778efe3fe8f11f37c19b9bcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Tue, 24 Dec 2024 10:13:17 +0100
Subject: [PATCH 04/16] update

---
 src/components/NewPosition/NewPosition.stories.tsx         | 2 ++
 src/components/NewPosition/RangeSelector/RangeSelector.tsx | 6 +-----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/NewPosition/NewPosition.stories.tsx b/src/components/NewPosition/NewPosition.stories.tsx
index b3f15fb5..7f38fbc5 100644
--- a/src/components/NewPosition/NewPosition.stories.tsx
+++ b/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}
diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index 780230b4..9eb272f2 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -409,11 +409,7 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
 
     if (initialConcentration) {
       const concentrationValue = parseInt(initialConcentration)
-      console.log(
-        concentrationValue,
-        positionOpeningMethod !== 'concentration',
-        !isNaN(concentrationValue)
-      )
+
       if (!isNaN(concentrationValue) && positionOpeningMethod !== 'concentration') {
         setPositionOpeningMethod('concentration')
         onPositionOpeningMethodChange('concentration')

From c28f32c7f63f3da6640dbcb4e3ec9c297945768e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Tue, 24 Dec 2024 10:15:36 +0100
Subject: [PATCH 05/16] Update

---
 .../NewPosition/RangeSelector/RangeSelector.stories.tsx        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.stories.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.stories.tsx
index 4e950bc3..59a63bb6 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.stories.tsx
+++ b/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(),

From feaa6bfc67dacfa68536d95a5b5c3b56a71bc8b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Tue, 24 Dec 2024 11:22:18 +0100
Subject: [PATCH 06/16] update

---
 .../RangeSelector/RangeSelector.tsx           | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index 9eb272f2..83c64518 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -421,18 +421,20 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
         Math.min(mappedIndex, concentrationArray.length - 1)
       )
       if (!ticksLoading) {
-        setPreviousConcentration(cachedConcentrationArray[validIndex])
-        setConcentrationIndex(validIndex)
-        const { leftRange, rightRange } = calculateConcentrationRange(
-          tickSpacing,
-          cachedConcentrationArray[validIndex],
-          2,
-          midPrice.index,
-          isXtoY
-        )
-
-        changeRangeHandler(leftRange, rightRange)
-        autoZoomHandler(leftRange, rightRange, true)
+        setTimeout(() => {
+          setPreviousConcentration(cachedConcentrationArray[validIndex])
+          setConcentrationIndex(validIndex)
+          const { leftRange, rightRange } = calculateConcentrationRange(
+            tickSpacing,
+            cachedConcentrationArray[validIndex],
+            2,
+            midPrice.index,
+            isXtoY
+          )
+
+          changeRangeHandler(leftRange, rightRange)
+          autoZoomHandler(leftRange, rightRange, true)
+        }, 5000)
       }
     }
   }, [ticksLoading])

From 9e528bb0d6592e5af176e08491d21f2bb52f1508 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Tue, 24 Dec 2024 12:22:38 +0100
Subject: [PATCH 07/16] Remove timeout

---
 .../RangeSelector/RangeSelector.tsx           | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index 83c64518..9eb272f2 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -421,20 +421,18 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
         Math.min(mappedIndex, concentrationArray.length - 1)
       )
       if (!ticksLoading) {
-        setTimeout(() => {
-          setPreviousConcentration(cachedConcentrationArray[validIndex])
-          setConcentrationIndex(validIndex)
-          const { leftRange, rightRange } = calculateConcentrationRange(
-            tickSpacing,
-            cachedConcentrationArray[validIndex],
-            2,
-            midPrice.index,
-            isXtoY
-          )
-
-          changeRangeHandler(leftRange, rightRange)
-          autoZoomHandler(leftRange, rightRange, true)
-        }, 5000)
+        setPreviousConcentration(cachedConcentrationArray[validIndex])
+        setConcentrationIndex(validIndex)
+        const { leftRange, rightRange } = calculateConcentrationRange(
+          tickSpacing,
+          cachedConcentrationArray[validIndex],
+          2,
+          midPrice.index,
+          isXtoY
+        )
+
+        changeRangeHandler(leftRange, rightRange)
+        autoZoomHandler(leftRange, rightRange, true)
       }
     }
   }, [ticksLoading])

From 06994a5b27b8860188b4f9811ea484656444a475 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Tue, 24 Dec 2024 14:24:59 +0100
Subject: [PATCH 08/16] fix jumping

---
 .../RangeSelector/RangeSelector.tsx           | 110 ++++++++++++++----
 1 file changed, 88 insertions(+), 22 deletions(-)

diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index 9eb272f2..a17ad8c9 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -115,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 () => {
@@ -400,16 +464,20 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
 
   useEffect(() => {
     console.log({
-      concentrationIndex,
-      minimumSliderIndex,
-      concentrationArray,
-      positionOpeningMethod,
-      concentrationParam: initialConcentration
+      // concentrationIndex,
+      // minimumSliderIndex,
+      // concentrationArray,
+      // positionOpeningMethod,
+      tokenASymbol,
+      tokenBSymbol
+
+      // concentrationParam: initialConcentration
     })
 
-    if (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')
@@ -420,22 +488,20 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
         minimumSliderIndex,
         Math.min(mappedIndex, concentrationArray.length - 1)
       )
-      if (!ticksLoading) {
-        setPreviousConcentration(cachedConcentrationArray[validIndex])
-        setConcentrationIndex(validIndex)
-        const { leftRange, rightRange } = calculateConcentrationRange(
-          tickSpacing,
-          cachedConcentrationArray[validIndex],
-          2,
-          midPrice.index,
-          isXtoY
-        )
-
-        changeRangeHandler(leftRange, rightRange)
-        autoZoomHandler(leftRange, rightRange, true)
-      }
+      setPreviousConcentration(cachedConcentrationArray[validIndex])
+      setConcentrationIndex(validIndex)
+      const { leftRange, rightRange } = calculateConcentrationRange(
+        tickSpacing,
+        cachedConcentrationArray[validIndex],
+        2,
+        midPrice.index,
+        isXtoY
+      )
+
+      changeRangeHandler(leftRange, rightRange)
+      autoZoomHandler(leftRange, rightRange, true)
     }
-  }, [ticksLoading])
+  }, [tokenASymbol, tokenBSymbol])
 
   return (
     <Grid container className={classes.wrapper} direction='column'>

From 52e55630ecc5c8023bb593d992d1c3ae4e556d40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Tue, 24 Dec 2024 14:41:39 +0100
Subject: [PATCH 09/16] Update query param

---
 src/containers/NewPositionWrapper/NewPositionWrapper.tsx | 2 +-
 src/pages/NewPositionPage/NewPositionPage.tsx            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
index 11a2cada..3ac85e85 100644
--- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
+++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
@@ -152,7 +152,7 @@ export const NewPositionWrapper: React.FC<IProps> = ({
     const { address: fromAddress, index: fromIndex } = getTokenIndex(initialTokenFrom)
     const { address: toAddress, index: toIndex } = getTokenIndex(initialTokenTo)
 
-    const concentrationParam = initialConcentration ? `?concentration=${initialConcentration}` : ''
+    const concentrationParam = initialConcentration ? `?conc=${initialConcentration}` : ''
 
     if (fromAddress && fromIndex !== -1 && toAddress && toIndex !== -1) {
       return `/newPosition/${initialTokenFrom}/${initialTokenTo}/${initialFee}${concentrationParam}`
diff --git a/src/pages/NewPositionPage/NewPositionPage.tsx b/src/pages/NewPositionPage/NewPositionPage.tsx
index a695db02..289c3693 100644
--- a/src/pages/NewPositionPage/NewPositionPage.tsx
+++ b/src/pages/NewPositionPage/NewPositionPage.tsx
@@ -51,7 +51,7 @@ const NewPositionPage: React.FC = () => {
           initialTokenFrom={tokenFrom}
           initialTokenTo={tokenTo}
           initialFee={fee}
-          initialConcentration={searchParams.get('concentration') ?? ''}
+          initialConcentration={searchParams.get('conc') ?? ''}
         />
       </Grid>
     </Grid>

From 6c36c9315716add39e8177355136b29ee7acd15c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Fri, 27 Dec 2024 09:23:44 +0100
Subject: [PATCH 10/16] Add changing url from UI

---
 src/components/NewPosition/NewPosition.tsx    | 28 ++++--
 .../RangeSelector/RangeSelector.tsx           | 86 ++-----------------
 2 files changed, 32 insertions(+), 82 deletions(-)

diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
index 066d85c2..4083c388 100644
--- a/src/components/NewPosition/NewPosition.tsx
+++ b/src/components/NewPosition/NewPosition.tsx
@@ -193,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>('')
@@ -446,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 })
@@ -464,7 +473,6 @@ export const NewPosition: React.FC<INewPosition> = ({
       }
     }
   }
-
   useEffect(() => {
     const timeout = setTimeout(() => {
       if (refresherTime > 0 && isCurrentPoolExisting) {
@@ -627,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)
             }
@@ -723,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)
             }
@@ -780,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={
diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index a17ad8c9..1110ff81 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/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
@@ -52,6 +55,7 @@ export interface IRangeSelector {
     rightInRange: number
   }
   shouldReversePlot: boolean
+
   setShouldReversePlot: (val: boolean) => void
   shouldNotUpdatePriceRange: boolean
   unblockUpdatePriceRange: () => void
@@ -64,6 +68,7 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   midPrice,
   tokenASymbol,
   tokenBSymbol,
+  updatePath,
   onChangeRange,
   blocked = false,
   blockerInfo,
@@ -115,70 +120,6 @@ 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 () => {
@@ -194,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
@@ -463,21 +408,8 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   }, [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')

From 389da1974d8d5a464eda7b7caa57ce9e7ae6d033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Fri, 27 Dec 2024 09:25:54 +0100
Subject: [PATCH 11/16] fix stories error

---
 .../NewPosition/RangeSelector/RangeSelector.stories.tsx        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.stories.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.stories.tsx
index 59a63bb6..ffd75d68 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.stories.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.stories.tsx
@@ -53,6 +53,9 @@ export const Primary: Story = {
     getTicksInsideRange: () => ({ leftInRange: 0, rightInRange: 100 }),
     minimumSliderIndex: 0,
     onChangeRange: fn(),
+    updatePath: {
+      update: fn()
+    },
     initialConcentration: '1100',
     onPositionOpeningMethodChange: fn(),
     setPositionOpeningMethod: fn(),

From 551b6497f5008900fc33eeb5925dd22c76bacd68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Mon, 30 Dec 2024 09:38:15 +0100
Subject: [PATCH 12/16] Fix reseting concentration to default

---
 .../RangeSelector/RangeSelector.tsx           | 53 ++++++++++++-------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index 1110ff81..87628501 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -120,6 +120,8 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
 
   const isMountedRef = useRef(false)
 
+  const previousPositionOpeningMethod = useRef(positionOpeningMethod)
+
   useEffect(() => {
     isMountedRef.current = true
     return () => {
@@ -407,6 +409,27 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
     autoZoomHandler(leftRange, rightRange, true)
   }, [tokenASymbol, tokenBSymbol])
 
+  const handleUpdateConcentrationFromURL = (concentrationValue: number) => {
+    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)
+  }
+
   useEffect(() => {
     if (tokenASymbol !== 'ABC' && tokenBSymbol !== 'XYZ') {
       const concentrationValue = parseInt(initialConcentration)
@@ -414,27 +437,21 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
         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)
+      handleUpdateConcentrationFromURL(concentrationValue)
     }
   }, [tokenASymbol, tokenBSymbol])
 
+  useEffect(() => {
+    if (
+      positionOpeningMethod === 'concentration' &&
+      previousPositionOpeningMethod.current === 'range'
+    ) {
+      handleUpdateConcentrationFromURL(previousConcentration)
+    }
+
+    previousPositionOpeningMethod.current = positionOpeningMethod
+  }, [positionOpeningMethod])
+
   return (
     <Grid container className={classes.wrapper} direction='column'>
       <Grid className={classes.topInnerWrapper}>

From 24948b1abfaa1b1170aaabf1f4365b6aec42beca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wo=C5=82odko?= <kuba8369@gmail.com>
Date: Mon, 30 Dec 2024 09:40:18 +0100
Subject: [PATCH 13/16] Add comment

---
 src/components/NewPosition/RangeSelector/RangeSelector.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index 87628501..eb00c82a 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -442,6 +442,7 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   }, [tokenASymbol, tokenBSymbol])
 
   useEffect(() => {
+    // Detect change from range to concentration to prevent reseting slider
     if (
       positionOpeningMethod === 'concentration' &&
       previousPositionOpeningMethod.current === 'range'

From 3481f04bc791802079b9fa1a7fa052bf530f767d Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Tue, 31 Dec 2024 14:41:42 +0100
Subject: [PATCH 14/16] handle set conc in url for init pool

---
 src/components/NewPosition/NewPosition.tsx    | 40 +++++++++---
 .../NewPosition/PoolInit/PoolInit.tsx         | 63 +++++++++++++++++--
 2 files changed, 90 insertions(+), 13 deletions(-)

diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
index 4083c388..d8427e50 100644
--- a/src/components/NewPosition/NewPosition.tsx
+++ b/src/components/NewPosition/NewPosition.tsx
@@ -367,24 +367,24 @@ export const NewPosition: React.FC<INewPosition> = ({
   const bestTierIndex =
     tokenAIndex === null || tokenBIndex === null
       ? undefined
-      : bestTiers.find(
+      : (bestTiers.find(
           tier =>
             (tier.tokenX.equals(tokens[tokenAIndex].assetAddress) &&
               tier.tokenY.equals(tokens[tokenBIndex].assetAddress)) ||
             (tier.tokenX.equals(tokens[tokenBIndex].assetAddress) &&
               tier.tokenY.equals(tokens[tokenAIndex].assetAddress))
-        )?.bestTierIndex ?? undefined
+        )?.bestTierIndex ?? undefined)
 
   const promotedPoolTierIndex =
     tokenAIndex === null || tokenBIndex === null
       ? undefined
-      : promotedTiers.find(
+      : (promotedTiers.find(
           tier =>
             (tier.tokenX.equals(tokens[tokenAIndex].assetAddress) &&
               tier.tokenY.equals(tokens[tokenBIndex].assetAddress)) ||
             (tier.tokenX.equals(tokens[tokenBIndex].assetAddress) &&
               tier.tokenY.equals(tokens[tokenAIndex].assetAddress))
-        )?.index ?? undefined
+        )?.index ?? undefined)
   const getMinSliderIndex = () => {
     let minimumSliderIndex = 0
 
@@ -521,6 +521,13 @@ export const NewPosition: React.FC<INewPosition> = ({
     }
   }, [network])
 
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setTimeout(() => {
+      setMounted(true)
+    }, 1000)
+  }, [])
+
   return (
     <Grid container className={classes.wrapper} direction='column'>
       <Link to='/portfolio' style={{ textDecoration: 'none', maxWidth: 'fit-content' }}>
@@ -782,11 +789,12 @@ export const NewPosition: React.FC<INewPosition> = ({
             )}
           </Grid>
         </Hidden>
-        {isCurrentPoolExisting ||
-        tokenAIndex === null ||
-        tokenBIndex === null ||
-        tokenAIndex === tokenBIndex ||
-        isWaitingForNewPool ? (
+        {mounted &&
+        (isCurrentPoolExisting ||
+          tokenAIndex === null ||
+          tokenBIndex === null ||
+          tokenAIndex === tokenBIndex ||
+          isWaitingForNewPool) ? (
           <RangeSelector
             updatePath={{
               update() {
@@ -861,6 +869,20 @@ export const NewPosition: React.FC<INewPosition> = ({
             concentrationIndex={concentrationIndex}
             setConcentrationIndex={setConcentrationIndex}
             minimumSliderIndex={minimumSliderIndex}
+            initialConcentration={initialConcentration}
+            onPositionOpeningMethodChange={onPositionOpeningMethodChange}
+            setPositionOpeningMethod={setPositionOpeningMethod}
+            updatePath={{
+              update() {
+                updatePath(
+                  tokenAIndex,
+                  tokenBIndex,
+                  selectedFee,
+                  Math.round(concentrationArray[concentrationIndex])
+                )
+              }
+            }}
+            ticksLoading={ticksLoading}
           />
         )}
       </Grid>
diff --git a/src/components/NewPosition/PoolInit/PoolInit.tsx b/src/components/NewPosition/PoolInit/PoolInit.tsx
index bb9c9f58..5418ad4a 100644
--- a/src/components/NewPosition/PoolInit/PoolInit.tsx
+++ b/src/components/NewPosition/PoolInit/PoolInit.tsx
@@ -6,6 +6,7 @@ import {
   calculateConcentrationRange,
   calculateSqrtPriceFromBalance,
   calculateTickFromBalance,
+  findClosestIndexByValue,
   formatNumber,
   nearestTickIndex,
   toMaxNumericPlaces,
@@ -38,6 +39,13 @@ export interface IPoolInit {
   concentrationIndex: number
   concentrationArray: number[]
   minimumSliderIndex: number
+  updatePath: {
+    update: (param?: any) => void
+  }
+  setPositionOpeningMethod: React.Dispatch<React.SetStateAction<PositionOpeningMethod>>
+  onPositionOpeningMethodChange: (val: PositionOpeningMethod) => void
+  initialConcentration: string
+  ticksLoading: boolean
 }
 
 export const PoolInit: React.FC<IPoolInit> = ({
@@ -55,7 +63,11 @@ export const PoolInit: React.FC<IPoolInit> = ({
   setConcentrationIndex,
   concentrationIndex,
   concentrationArray,
-  minimumSliderIndex
+  minimumSliderIndex,
+  updatePath,
+  setPositionOpeningMethod,
+  onPositionOpeningMethodChange,
+  initialConcentration
 }) => {
   const minTick = getMinTick(tickSpacing)
   const maxTick = getMaxTick(tickSpacing)
@@ -172,7 +184,13 @@ export const PoolInit: React.FC<IPoolInit> = ({
 
   useEffect(() => {
     if (positionOpeningMethod === 'concentration') {
-      setConcentrationIndex(0)
+      const mappedIndex = findClosestIndexByValue(concentrationArray, +initialConcentration)
+
+      const validIndex = Math.max(
+        minimumSliderIndex,
+        Math.min(mappedIndex, concentrationArray.length - 1)
+      )
+      setConcentrationIndex(validIndex)
       const { leftRange, rightRange } = calculateConcentrationRange(
         tickSpacing,
         concentrationArray[0],
@@ -185,7 +203,7 @@ export const PoolInit: React.FC<IPoolInit> = ({
     } else {
       changeRangeHandler(leftRange, rightRange)
     }
-  }, [positionOpeningMethod])
+  }, [positionOpeningMethod, concentrationArray])
 
   useEffect(() => {
     if (positionOpeningMethod === 'concentration') {
@@ -193,7 +211,7 @@ export const PoolInit: React.FC<IPoolInit> = ({
         concentrationIndex > concentrationArray.length - 1
           ? concentrationArray.length - 1
           : concentrationIndex
-      setConcentrationIndex(index)
+
       const { leftRange, rightRange } = calculateConcentrationRange(
         tickSpacing,
         concentrationArray[index],
@@ -273,6 +291,43 @@ export const PoolInit: React.FC<IPoolInit> = ({
     }
   }, [price])
 
+  useEffect(() => {
+    if (positionOpeningMethod === 'concentration') {
+      updatePath.update()
+    }
+  }, [concentrationIndex, positionOpeningMethod])
+
+  const handleUpdateConcentrationFromURL = (concentrationValue: number) => {
+    const mappedIndex = findClosestIndexByValue(concentrationArray, concentrationValue)
+
+    const validIndex = Math.max(
+      minimumSliderIndex,
+      Math.min(mappedIndex, concentrationArray.length - 1)
+    )
+
+    setConcentrationIndex(validIndex)
+    const { leftRange, rightRange } = calculateConcentrationRange(
+      tickSpacing,
+      concentrationArray[validIndex],
+      2,
+      midPriceIndex,
+      isXtoY
+    )
+
+    changeRangeHandler(leftRange, rightRange)
+  }
+
+  useEffect(() => {
+    if (tokenASymbol !== 'ABC' && tokenBSymbol !== 'XYZ') {
+      const concentrationValue = parseInt(initialConcentration)
+      if (!isNaN(concentrationValue) && positionOpeningMethod !== 'concentration') {
+        setPositionOpeningMethod('concentration')
+        onPositionOpeningMethodChange('concentration')
+      }
+      handleUpdateConcentrationFromURL(concentrationValue)
+    }
+  }, [tokenASymbol, tokenBSymbol])
+
   return (
     <Grid container direction='column' className={classes.wrapper}>
       <Grid className={classes.topInnerWrapper}>

From 3f960bc43935784a7d3f0d27e054753ad0add162 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Tue, 31 Dec 2024 14:46:16 +0100
Subject: [PATCH 15/16] fix build

---
 src/components/NewPosition/PoolInit/PoolInit.stories.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/NewPosition/PoolInit/PoolInit.stories.tsx b/src/components/NewPosition/PoolInit/PoolInit.stories.tsx
index 30dc2e07..7a09112c 100644
--- a/src/components/NewPosition/PoolInit/PoolInit.stories.tsx
+++ b/src/components/NewPosition/PoolInit/PoolInit.stories.tsx
@@ -65,7 +65,14 @@ export const Primary: Story = {
     concentrationIndex: 2,
     minimumSliderIndex: 0,
     setConcentrationIndex: fn(),
-    positionOpeningMethod: 'range'
+    positionOpeningMethod: 'range',
+    initialConcentration: 'range',
+    onPositionOpeningMethodChange: fn(),
+    setPositionOpeningMethod: fn(),
+    ticksLoading: false,
+    updatePath: {
+      update: fn()
+    }
   },
   render: args => <PrimaryComponent {...args} />
 }

From 8b52dec04914ee69606d685aaa6210072a9866c5 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Thu, 2 Jan 2025 11:40:39 +0100
Subject: [PATCH 16/16] improve update url from init pool

---
 src/components/NewPosition/NewPosition.tsx    | 20 ++++++-------------
 .../NewPosition/PoolInit/PoolInit.tsx         | 17 ++++++++++++----
 .../RangeSelector/RangeSelector.tsx           |  8 +++++---
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
index d8427e50..5edeac8b 100644
--- a/src/components/NewPosition/NewPosition.tsx
+++ b/src/components/NewPosition/NewPosition.tsx
@@ -521,13 +521,6 @@ export const NewPosition: React.FC<INewPosition> = ({
     }
   }, [network])
 
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => {
-    setTimeout(() => {
-      setMounted(true)
-    }, 1000)
-  }, [])
-
   return (
     <Grid container className={classes.wrapper} direction='column'>
       <Link to='/portfolio' style={{ textDecoration: 'none', maxWidth: 'fit-content' }}>
@@ -789,12 +782,11 @@ export const NewPosition: React.FC<INewPosition> = ({
             )}
           </Grid>
         </Hidden>
-        {mounted &&
-        (isCurrentPoolExisting ||
-          tokenAIndex === null ||
-          tokenBIndex === null ||
-          tokenAIndex === tokenBIndex ||
-          isWaitingForNewPool) ? (
+        {isCurrentPoolExisting ||
+        tokenAIndex === null ||
+        tokenBIndex === null ||
+        tokenAIndex === tokenBIndex ||
+        isWaitingForNewPool ? (
           <RangeSelector
             updatePath={{
               update() {
@@ -882,7 +874,7 @@ export const NewPosition: React.FC<INewPosition> = ({
                 )
               }
             }}
-            ticksLoading={ticksLoading}
+            isWaitingForNewPool={isWaitingForNewPool}
           />
         )}
       </Grid>
diff --git a/src/components/NewPosition/PoolInit/PoolInit.tsx b/src/components/NewPosition/PoolInit/PoolInit.tsx
index 5418ad4a..6c82d5b3 100644
--- a/src/components/NewPosition/PoolInit/PoolInit.tsx
+++ b/src/components/NewPosition/PoolInit/PoolInit.tsx
@@ -45,7 +45,7 @@ export interface IPoolInit {
   setPositionOpeningMethod: React.Dispatch<React.SetStateAction<PositionOpeningMethod>>
   onPositionOpeningMethodChange: (val: PositionOpeningMethod) => void
   initialConcentration: string
-  ticksLoading: boolean
+  isWaitingForNewPool: boolean
 }
 
 export const PoolInit: React.FC<IPoolInit> = ({
@@ -67,7 +67,8 @@ export const PoolInit: React.FC<IPoolInit> = ({
   updatePath,
   setPositionOpeningMethod,
   onPositionOpeningMethodChange,
-  initialConcentration
+  initialConcentration,
+  isWaitingForNewPool
 }) => {
   const minTick = getMinTick(tickSpacing)
   const maxTick = getMaxTick(tickSpacing)
@@ -291,8 +292,16 @@ export const PoolInit: React.FC<IPoolInit> = ({
     }
   }, [price])
 
+  const [canUpdateUrl, setCanUpdateUrl] = useState(false)
+
   useEffect(() => {
-    if (positionOpeningMethod === 'concentration') {
+    return () => {
+      if (!isWaitingForNewPool) setCanUpdateUrl(true)
+    }
+  }, [isWaitingForNewPool])
+
+  useEffect(() => {
+    if (positionOpeningMethod === 'concentration' && canUpdateUrl) {
       updatePath.update()
     }
   }, [concentrationIndex, positionOpeningMethod])
@@ -318,7 +327,7 @@ export const PoolInit: React.FC<IPoolInit> = ({
   }
 
   useEffect(() => {
-    if (tokenASymbol !== 'ABC' && tokenBSymbol !== 'XYZ') {
+    if (tokenASymbol !== 'ABC' && tokenBSymbol !== 'XYZ' && canUpdateUrl) {
       const concentrationValue = parseInt(initialConcentration)
       if (!isNaN(concentrationValue) && positionOpeningMethod !== 'concentration') {
         setPositionOpeningMethod('concentration')
diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index eb00c82a..4af7cc55 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -438,16 +438,18 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
         onPositionOpeningMethodChange('concentration')
       }
       handleUpdateConcentrationFromURL(concentrationValue)
+      console.log('test1')
     }
-  }, [tokenASymbol, tokenBSymbol])
-
+  }, [poolIndex])
+  console.log('previousConcentration', previousConcentration)
   useEffect(() => {
-    // Detect change from range to concentration to prevent reseting slider
+    // Detect change from range to con, centration to prevent reseting slider
     if (
       positionOpeningMethod === 'concentration' &&
       previousPositionOpeningMethod.current === 'range'
     ) {
       handleUpdateConcentrationFromURL(previousConcentration)
+      console.log('test2')
     }
 
     previousPositionOpeningMethod.current = positionOpeningMethod