From 511543603a7cc707136fe1f0f0f156cd67c7e298 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Tue, 26 Mar 2024 08:18:43 +0100
Subject: [PATCH 01/11] add refresh buttons for new position and position
 details

---
 src/components/NewPosition/NewPosition.tsx    | 31 +++++++--
 src/components/NewPosition/style.ts           | 45 +++++++++++-
 .../PositionDetails/PositionDetails.tsx       | 17 +++--
 .../SinglePositionInfo/SinglePositionInfo.tsx |  1 -
 src/components/PositionDetails/style.ts       | 27 +++++++-
 .../NewPositionWrapper/NewPositionWrapper.tsx | 68 +++++++++++++++++++
 .../SinglePositionWrapper.tsx                 | 34 +++++++++-
 src/store/reducers/solanaWallet.ts            |  3 +
 src/store/sagas/wallet.ts                     | 14 +++-
 9 files changed, 223 insertions(+), 17 deletions(-)

diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
index ffc089146..2b109cdfd 100644
--- a/src/components/NewPosition/NewPosition.tsx
+++ b/src/components/NewPosition/NewPosition.tsx
@@ -33,6 +33,7 @@ import DepositSelector from './DepositSelector/DepositSelector'
 import MarketIdLabel from './MarketIdLabel/MarketIdLabel'
 import PoolInit from './PoolInit/PoolInit'
 import RangeSelector from './RangeSelector/RangeSelector'
+import refreshIcon from '@static/svg/refresh.svg'
 import useStyles from './style'
 
 export interface INewPosition {
@@ -105,6 +106,7 @@ export interface INewPosition {
   currentFeeIndex: number
   onSlippageChange: (slippage: string) => void
   initialSlippage: string
+  handleRefresh: () => void
 }
 
 export const NewPosition: React.FC<INewPosition> = ({
@@ -156,7 +158,8 @@ export const NewPosition: React.FC<INewPosition> = ({
   plotVolumeRange,
   currentFeeIndex,
   onSlippageChange,
-  initialSlippage
+  initialSlippage,
+  handleRefresh
 }) => {
   const classes = useStyles()
 
@@ -358,9 +361,29 @@ export const NewPosition: React.FC<INewPosition> = ({
         </Grid>
       </Link>
 
-      <Grid container justifyContent='space-between'>
-        <Typography className={classes.title}>Add new liquidity position</Typography>
-        <Grid container item alignItems='center' className={classes.options}>
+      <Grid
+        container
+        item
+        className={classes.subHeader}
+        alignItems='center'
+        justifyContent='space-between'>
+        <Grid
+          container
+          item
+          alignItems='center'
+          justifyContent='space-between'
+          className={classes.leftSideSubHeader}>
+          <Typography className={classes.title}>Add new liquidity position</Typography>
+          <Button onClick={handleRefresh} className={classes.refreshIconBtn}>
+            <img src={refreshIcon} className={classes.refreshIcon} />
+          </Button>
+        </Grid>
+        <Grid
+          container
+          item
+          alignItems='center'
+          justifyContent='flex-end'
+          className={classes.options}>
           {address !== '' ? (
             <MarketIdLabel
               displayLength={9}
diff --git a/src/components/NewPosition/style.ts b/src/components/NewPosition/style.ts
index 23895a1dd..2cf4da18a 100644
--- a/src/components/NewPosition/style.ts
+++ b/src/components/NewPosition/style.ts
@@ -28,7 +28,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   title: {
     color: colors.white.main,
     ...typography.heading4,
-    marginBottom: 18,
 
     [theme.breakpoints.down('xs')]: {
       fontSize: 18
@@ -85,11 +84,53 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   options: {
     width: 'fit-content',
-    marginBottom: 18,
+    marginBottom: 16,
     height: 28
   },
   switch: {
     transition: 'opacity 500ms'
+  },
+  jupiterIcon: {
+    cursor: 'pointer',
+    transition: 'filter 100ms',
+    '&:hover': {
+      filter: 'brightness(1.5)'
+    }
+  },
+  refreshIconBtn: {
+    padding: 0,
+    margin: 0,
+    minWidth: 'auto',
+    background: 'none',
+    marginRight: 7,
+    '& :hover': {
+      background: 'none'
+    }
+  },
+  refreshIcon: {
+    width: 26,
+    height: 21,
+    cursor: 'pointer',
+    transition: 'filter 100ms',
+    '&:hover': {
+      filter: 'brightness(1.5)'
+    }
+  },
+  subHeader: {
+    alignItems: 'center',
+
+    [theme.breakpoints.down('sm')]: {
+      justifyContent: 'flex-start'
+    }
+  },
+  leftSideSubHeader: {
+    marginBottom: 16,
+    width: 'calc(50% - 12px)',
+
+    [theme.breakpoints.down('sm')]: {
+      flex: 'initial',
+      width: 'auto'
+    }
   }
 }))
 
diff --git a/src/components/PositionDetails/PositionDetails.tsx b/src/components/PositionDetails/PositionDetails.tsx
index f1b2ef69a..6598ad523 100644
--- a/src/components/PositionDetails/PositionDetails.tsx
+++ b/src/components/PositionDetails/PositionDetails.tsx
@@ -13,6 +13,7 @@ import { Link, useHistory } from 'react-router-dom'
 import { ILiquidityToken } from './SinglePositionInfo/consts'
 import SinglePositionPlot from './SinglePositionPlot/SinglePositionPlot'
 import useStyles from './style'
+import refreshIcon from '@static/svg/refresh.svg'
 
 import MarketIdLabel from '@components/NewPosition/MarketIdLabel/MarketIdLabel'
 import { Color } from '@material-ui/lab'
@@ -46,6 +47,7 @@ interface IProps {
     max: number
   }
   userHasStakes?: boolean
+  handleRefresh: () => void
 }
 
 const PositionDetails: React.FC<IProps> = ({
@@ -73,7 +75,8 @@ const PositionDetails: React.FC<IProps> = ({
   hasTicksError,
   reloadHandler,
   plotVolumeRange,
-  userHasStakes = false
+  userHasStakes = false,
+  handleRefresh
 }) => {
   const classes = useStyles()
 
@@ -108,17 +111,16 @@ const PositionDetails: React.FC<IProps> = ({
         container
         item
         direction='column'
-        alignItems='flex-end'
+        alignItems='center'
         className={classes.right}
         wrap='nowrap'>
         <Grid
           container
           item
           direction='row'
-          alignItems='flex-end'
+          alignItems='center'
           // justifyContent='space-between'
-          style={{ paddingLeft: 20, flexDirection: 'row-reverse' }}
-          className={classes.right}
+          className={classes.rightSubHeader}
           wrap='nowrap'>
           <Hidden xsDown>
             <Button
@@ -134,11 +136,14 @@ const PositionDetails: React.FC<IProps> = ({
               <span className={classes.buttonText}>+ Add Liquidity</span>
             </Button>
           </Hidden>
+          <Button onClick={handleRefresh} className={classes.refreshIconBtn}>
+            <img src={refreshIcon} className={classes.refreshIcon} />
+          </Button>
           <MarketIdLabel
             marketId={poolAddress.toString()}
             displayLength={9}
             copyPoolAddressHandler={copyPoolAddressHandler}
-            style={{ paddingBottom: 20, paddingRight: 10 }}
+            style={{ paddingTop: '6px' }}
           />
         </Grid>
 
diff --git a/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx b/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx
index 0b6689728..3ce145144 100644
--- a/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx
+++ b/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx
@@ -96,7 +96,6 @@ const SinglePositionInfo: React.FC<IProp> = ({
             Close position
           </Button>
           <Hidden smUp>
-            {' '}
             <Button
               className={classes.button}
               variant='contained'
diff --git a/src/components/PositionDetails/style.ts b/src/components/PositionDetails/style.ts
index 32a5059c0..81f2952b0 100644
--- a/src/components/PositionDetails/style.ts
+++ b/src/components/PositionDetails/style.ts
@@ -29,6 +29,13 @@ const useStyles = makeStyles((theme: Theme) => ({
       width: '100%'
     }
   },
+  rightSubHeader: {
+    marginBottom: 16,
+    width: '100%',
+    paddingLeft: 20,
+    flexDirection: 'row-reverse',
+    gap: 10
+  },
   back: {
     height: 40,
     marginBottom: 16,
@@ -57,7 +64,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     borderRadius: 14,
     height: 40,
     width: 130,
-    marginBottom: 16,
     paddingRight: 9,
     paddingLeft: 9,
     letterSpacing: -0.03,
@@ -72,6 +78,25 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   buttonText: {
     WebkitPaddingBefore: '2px'
+  },
+  refreshIconBtn: {
+    padding: 0,
+    margin: 0,
+    minWidth: 'auto',
+    background: 'none',
+    marginRight: 7,
+    '& :hover': {
+      background: 'none'
+    }
+  },
+  refreshIcon: {
+    width: 26,
+    height: 21,
+    cursor: 'pointer',
+    transition: 'filter 100ms',
+    '&:hover': {
+      filter: 'brightness(1.5)'
+    }
   }
 }))
 
diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
index 1767ea430..dfc3ca129 100644
--- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
+++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
@@ -22,6 +22,7 @@ import { BN } from '@project-serum/anchor'
 import { actions as poolsActions } from '@reducers/pools'
 import { actions } from '@reducers/positions'
 import { actions as snackbarsActions } from '@reducers/snackbars'
+import { actions as solanaWallet } from '@reducers/solanaWallet'
 import { Status } from '@reducers/solanaWallet'
 import {
   isLoadingLatestPoolsForTransaction,
@@ -408,6 +409,72 @@ export const NewPositionWrapper: React.FC<IProps> = ({
     return poolAddress
   }
 
+  const handleRefresh = async () => {
+    if (tokenBIndex === null || tokenAIndex === null || tokenAIndex === tokenBIndex) {
+      return
+    }
+
+    const idA = tokens[tokenAIndex].coingeckoId ?? ''
+    if (idA.length) {
+      setPriceALoading(true)
+      await getJupTokenPrice(idA)
+        .then(data => setTokenAPriceData(data))
+        .catch(() => setTokenAPriceData(undefined))
+        .finally(() => setPriceALoading(false))
+    } else {
+      setTokenAPriceData(undefined)
+    }
+
+    const idB = tokens[tokenBIndex].coingeckoId ?? ''
+    if (idB.length) {
+      setPriceBLoading(true)
+      await getJupTokenPrice(idB)
+        .then(data => setTokenBPriceData(data))
+        .catch(() => setTokenBPriceData(undefined))
+        .finally(() => setPriceBLoading(false))
+    } else {
+      setTokenBPriceData(undefined)
+    }
+
+    dispatch(
+      poolsActions.getAllPoolsForPairData({
+        first: tokens[tokenAIndex].address,
+        second: tokens[tokenBIndex].address
+      })
+    )
+
+    dispatch(
+      poolsActions.getPoolData(
+        new Pair(tokens[tokenAIndex].assetAddress, tokens[tokenBIndex].assetAddress, {
+          fee: ALL_FEE_TIERS_DATA[feeIndex].tier.fee,
+          tickSpacing: ALL_FEE_TIERS_DATA[feeIndex].tier.tickSpacing
+        })
+      )
+    )
+
+    if (tokenAIndex !== null && tokenBIndex !== null) {
+      const index = allPools.findIndex(
+        pool =>
+          pool.fee.v.eq(fee) &&
+          ((pool.tokenX.equals(tokens[tokenAIndex].assetAddress) &&
+            pool.tokenY.equals(tokens[tokenBIndex].assetAddress)) ||
+            (pool.tokenX.equals(tokens[tokenBIndex].assetAddress) &&
+              pool.tokenY.equals(tokens[tokenAIndex].assetAddress)))
+      )
+      setPoolIndex(index !== -1 ? index : null)
+
+      if (index !== -1) {
+        dispatch(
+          actions.getCurrentPlotTicks({
+            poolIndex: index,
+            isXtoY: allPools[index].tokenX.equals(tokens[tokenAIndex].assetAddress)
+          })
+        )
+      }
+    }
+    dispatch(solanaWallet.getBalance())
+  }
+
   return (
     <NewPosition
       initialTokenFrom={initialTokenFrom}
@@ -624,6 +691,7 @@ export const NewPositionWrapper: React.FC<IProps> = ({
       currentFeeIndex={feeIndex}
       onSlippageChange={onSlippageChange}
       initialSlippage={initialSlippage}
+      handleRefresh={handleRefresh}
     />
   )
 }
diff --git a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
index e3624a528..fa181a8f1 100644
--- a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
+++ b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
@@ -8,17 +8,18 @@ import {
   getJupTokenPrice,
   printBN
 } from '@consts/utils'
-import { calculatePriceSqrt } from '@invariant-labs/sdk'
+import { Pair, calculatePriceSqrt } from '@invariant-labs/sdk'
 import { MAX_TICK, getX, getY } from '@invariant-labs/sdk/lib/math'
 import { calculateClaimAmount } from '@invariant-labs/sdk/src/utils'
 import { Grid } from '@material-ui/core'
 import { Color } from '@material-ui/lab'
+import { actions as poolsActions } from '@reducers/pools'
 import { actions as farmsActions } from '@reducers/farms'
 import { actions } from '@reducers/positions'
 import { actions as snackbarsActions } from '@reducers/snackbars'
 import { Status } from '@reducers/solanaWallet'
 import { hasFarms, hasUserStakes, stakesForPosition } from '@selectors/farms'
-import { hasTokens, volumeRanges } from '@selectors/pools'
+import { hasTokens, poolsArraySortedByFees, volumeRanges } from '@selectors/pools'
 import {
   currentPositionRangeTicks,
   isLoadingPositionsList,
@@ -57,6 +58,7 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
   const hasAnyStakes = useSelector(hasUserStakes)
   const walletStatus = useSelector(status)
   const positionStakes = useSelector(stakesForPosition(position?.address))
+  const allPools = useSelector(poolsArraySortedByFees)
 
   const [waitingForTicksData, setWaitingForTicksData] = useState<boolean | null>(null)
 
@@ -351,6 +353,33 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
     }
   }, [position])
 
+  const handleRefresh = () => {
+    setWaitingForTicksData(true)
+    if (position) {
+      dispatch(actions.getSinglePosition(position.positionIndex))
+
+      dispatch(
+        poolsActions.getPoolData(
+          new Pair(position.tokenX.assetAddress, position.tokenY.assetAddress, {
+            fee: position.poolData.fee,
+            tickSpacing: position.poolData.tickSpacing
+          })
+        )
+      )
+
+      dispatch(
+        actions.getCurrentPlotTicks({
+          poolIndex: position.poolData.poolIndex,
+          isXtoY: allPools[position.positionIndex].tokenX.equals(position.tokenX.assetAddress)
+        })
+      )
+
+      dispatch(actions.getCurrentPositionRangeTicks(position.id))
+    }
+
+    setWaitingForTicksData(false)
+  }
+
   return !isLoadingList && position ? (
     <PositionDetails
       tokenXAddress={position.tokenX.assetAddress}
@@ -419,6 +448,7 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
       }}
       plotVolumeRange={currentVolumeRange}
       userHasStakes={!!positionStakes.length}
+      handleRefresh={handleRefresh}
     />
   ) : isLoadingList ? (
     <Grid container>
diff --git a/src/store/reducers/solanaWallet.ts b/src/store/reducers/solanaWallet.ts
index 336cc3402..e041d91cf 100644
--- a/src/store/reducers/solanaWallet.ts
+++ b/src/store/reducers/solanaWallet.ts
@@ -66,6 +66,9 @@ const solanaWalletSlice = createSlice({
       state.balance = action.payload
       return state
     },
+    getBalance(state) {
+      return state
+    },
     addTokenAccount(state, action: PayloadAction<ITokenAccount>) {
       state.accounts[action.payload.programId.toString()] = action.payload
       return state
diff --git a/src/store/sagas/wallet.ts b/src/store/sagas/wallet.ts
index c4efcd54d..0d8c4b8ef 100644
--- a/src/store/sagas/wallet.ts
+++ b/src/store/sagas/wallet.ts
@@ -44,6 +44,12 @@ export function* getBalance(pubKey: PublicKey): SagaGenerator<BN> {
   return new BN(balance)
 }
 
+export function* handleBalance(): Generator {
+  const wallet = yield* call(getWallet)
+  const balance = yield* call(getBalance, wallet.publicKey)
+  yield* put(actions.setBalance(balance))
+}
+
 interface IparsedTokenInfo {
   mint: string
   owner: string
@@ -391,6 +397,12 @@ export function* airdropSaga(): Generator {
 export function* initSaga(): Generator {
   yield takeLeading(actions.initWallet, init)
 }
+
+export function* handleBalanceSaga(): Generator {
+  yield takeLeading(actions.getBalance, handleBalance)
+}
 export function* walletSaga(): Generator {
-  yield all([initSaga, airdropSaga, connectHandler, disconnectHandler].map(spawn))
+  yield all(
+    [initSaga, airdropSaga, connectHandler, disconnectHandler, handleBalanceSaga].map(spawn)
+  )
 }

From 9e9f04f0f302c52d976bc530ca5f81d06763b4ef Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Tue, 26 Mar 2024 08:25:13 +0100
Subject: [PATCH 02/11] fix import error

---
 src/containers/NewPositionWrapper/NewPositionWrapper.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
index dfc3ca129..722b5172a 100644
--- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
+++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
@@ -22,8 +22,7 @@ import { BN } from '@project-serum/anchor'
 import { actions as poolsActions } from '@reducers/pools'
 import { actions } from '@reducers/positions'
 import { actions as snackbarsActions } from '@reducers/snackbars'
-import { actions as solanaWallet } from '@reducers/solanaWallet'
-import { Status } from '@reducers/solanaWallet'
+import { Status, actions as solanaWallet } from '@reducers/solanaWallet'
 import {
   isLoadingLatestPoolsForTransaction,
   poolsArraySortedByFees,

From eb1036cea27f9ee8ce185c050c9b63f4b64bdf45 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Wed, 27 Mar 2024 13:06:53 +0100
Subject: [PATCH 03/11] fix refresh of new and single possition

---
 .../PositionDetails/PositionDetails.tsx       |  3 ++
 .../SinglePositionInfo/SinglePositionInfo.tsx |  3 ++
 .../SinglePositionPlot/SinglePositionPlot.tsx |  2 +-
 .../NewPositionWrapper/NewPositionWrapper.tsx |  2 +-
 .../SinglePositionWrapper.tsx                 | 31 +++++++++----------
 src/store/sagas/wallet.ts                     |  3 ++
 6 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/PositionDetails/PositionDetails.tsx b/src/components/PositionDetails/PositionDetails.tsx
index 6598ad523..2fecc005d 100644
--- a/src/components/PositionDetails/PositionDetails.tsx
+++ b/src/components/PositionDetails/PositionDetails.tsx
@@ -40,6 +40,7 @@ interface IProps {
   initialIsDiscreteValue: boolean
   onDiscreteChange: (val: boolean) => void
   showFeesLoader?: boolean
+  showLiquidityLoader?: boolean
   hasTicksError?: boolean
   reloadHandler: () => void
   plotVolumeRange?: {
@@ -72,6 +73,7 @@ const PositionDetails: React.FC<IProps> = ({
   initialIsDiscreteValue,
   onDiscreteChange,
   showFeesLoader = false,
+  showLiquidityLoader = false,
   hasTicksError,
   reloadHandler,
   plotVolumeRange,
@@ -103,6 +105,7 @@ const PositionDetails: React.FC<IProps> = ({
           xToY={xToY}
           swapHandler={() => setXToY(!xToY)}
           showFeesLoader={showFeesLoader}
+          showLiquidityLoader={showLiquidityLoader}
           userHasStakes={userHasStakes}
         />
       </Grid>
diff --git a/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx b/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx
index 3ce145144..6ad217c69 100644
--- a/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx
+++ b/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx
@@ -18,6 +18,7 @@ interface IProp {
   xToY: boolean
   swapHandler: () => void
   showFeesLoader?: boolean
+  showLiquidityLoader?: boolean
   userHasStakes?: boolean
 }
 
@@ -30,6 +31,7 @@ const SinglePositionInfo: React.FC<IProp> = ({
   xToY,
   swapHandler,
   showFeesLoader = false,
+  showLiquidityLoader = false,
   userHasStakes = false
 }) => {
   const history = useHistory()
@@ -118,6 +120,7 @@ const SinglePositionInfo: React.FC<IProp> = ({
           }
           showBalance
           swapHandler={swapHandler}
+          showLoader={showLiquidityLoader}
         />
         <BoxInfo
           title={'Unclaimed fees'}
diff --git a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx
index 1e5fc292e..64c94982a 100644
--- a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx
+++ b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx
@@ -175,7 +175,7 @@ const SinglePositionPlot: React.FC<ISinglePositionPlot> = ({
           xDecimal={tokenX.decimal}
           yDecimal={tokenY.decimal}
           isDiscrete={isPlotDiscrete}
-          coverOnLoading
+          coverOnLoading={true}
           hasError={hasTicksError}
           reloadHandler={reloadHandler}
           volumeRange={volumeRange}
diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
index 722b5172a..89afb491b 100644
--- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
+++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
@@ -412,6 +412,7 @@ export const NewPositionWrapper: React.FC<IProps> = ({
     if (tokenBIndex === null || tokenAIndex === null || tokenAIndex === tokenBIndex) {
       return
     }
+    dispatch(solanaWallet.getBalance())
 
     const idA = tokens[tokenAIndex].coingeckoId ?? ''
     if (idA.length) {
@@ -471,7 +472,6 @@ export const NewPositionWrapper: React.FC<IProps> = ({
         )
       }
     }
-    dispatch(solanaWallet.getBalance())
   }
 
   return (
diff --git a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
index fa181a8f1..c69e36556 100644
--- a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
+++ b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
@@ -223,6 +223,8 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
   }, [position])
 
   const [tokenXClaim, tokenYClaim] = useMemo(() => {
+    setShowFeesLoader(true)
+
     if (
       waitingForTicksData === false &&
       position &&
@@ -354,10 +356,17 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
   }, [position])
 
   const handleRefresh = () => {
-    setWaitingForTicksData(true)
     if (position) {
-      dispatch(actions.getSinglePosition(position.positionIndex))
+      dispatch(actions.getPositionsList())
 
+      setWaitingForTicksData(true)
+      dispatch(actions.getCurrentPositionRangeTicks(id))
+      dispatch(
+        actions.getCurrentPlotTicks({
+          poolIndex: position.poolData.poolIndex,
+          isXtoY: true
+        })
+      )
       dispatch(
         poolsActions.getPoolData(
           new Pair(position.tokenX.assetAddress, position.tokenY.assetAddress, {
@@ -366,21 +375,10 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
           })
         )
       )
-
-      dispatch(
-        actions.getCurrentPlotTicks({
-          poolIndex: position.poolData.poolIndex,
-          isXtoY: allPools[position.positionIndex].tokenX.equals(position.tokenX.assetAddress)
-        })
-      )
-
-      dispatch(actions.getCurrentPositionRangeTicks(position.id))
     }
-
-    setWaitingForTicksData(false)
   }
 
-  return !isLoadingList && position ? (
+  return position ? (
     <PositionDetails
       tokenXAddress={position.tokenX.assetAddress}
       tokenYAddress={position.tokenY.assetAddress}
@@ -405,7 +403,7 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
           })
         )
       }}
-      ticksLoading={ticksLoading}
+      ticksLoading={ticksLoading || isLoadingList}
       tickSpacing={position?.poolData.tickSpacing ?? 1}
       tokenX={{
         name: position.tokenX.symbol,
@@ -436,7 +434,8 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
       max={max}
       initialIsDiscreteValue={initialIsDiscreteValue}
       onDiscreteChange={setIsDiscreteValue}
-      showFeesLoader={showFeesLoader}
+      showFeesLoader={showFeesLoader || isLoadingList}
+      showLiquidityLoader={isLoadingList}
       hasTicksError={hasTicksError}
       reloadHandler={() => {
         dispatch(
diff --git a/src/store/sagas/wallet.ts b/src/store/sagas/wallet.ts
index 0d8c4b8ef..55d50b3a5 100644
--- a/src/store/sagas/wallet.ts
+++ b/src/store/sagas/wallet.ts
@@ -46,8 +46,11 @@ export function* getBalance(pubKey: PublicKey): SagaGenerator<BN> {
 
 export function* handleBalance(): Generator {
   const wallet = yield* call(getWallet)
+  yield* put(actions.setAddress(wallet.publicKey))
   const balance = yield* call(getBalance, wallet.publicKey)
   yield* put(actions.setBalance(balance))
+  yield* put(actions.setStatus(Status.Initialized))
+  yield* call(fetchTokensAccounts)
 }
 
 interface IparsedTokenInfo {

From 9ff1d19f21f53c6fca440799f1dae9ab501ed9e3 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Wed, 27 Mar 2024 13:09:53 +0100
Subject: [PATCH 04/11] fix lint error

---
 src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
index c69e36556..0d29ecc9c 100644
--- a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
+++ b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
@@ -58,7 +58,6 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
   const hasAnyStakes = useSelector(hasUserStakes)
   const walletStatus = useSelector(status)
   const positionStakes = useSelector(stakesForPosition(position?.address))
-  const allPools = useSelector(poolsArraySortedByFees)
 
   const [waitingForTicksData, setWaitingForTicksData] = useState<boolean | null>(null)
 

From 0f9fe70069ee029b258b7213ad8a297c01888d96 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Wed, 27 Mar 2024 13:14:22 +0100
Subject: [PATCH 05/11] fix lint error

---
 src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
index 0d29ecc9c..8be529880 100644
--- a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
+++ b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
@@ -19,7 +19,7 @@ import { actions } from '@reducers/positions'
 import { actions as snackbarsActions } from '@reducers/snackbars'
 import { Status } from '@reducers/solanaWallet'
 import { hasFarms, hasUserStakes, stakesForPosition } from '@selectors/farms'
-import { hasTokens, poolsArraySortedByFees, volumeRanges } from '@selectors/pools'
+import { hasTokens, volumeRanges } from '@selectors/pools'
 import {
   currentPositionRangeTicks,
   isLoadingPositionsList,

From 4c1efceeac1f557c7d5bda5f78893157b1be80b2 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Thu, 28 Mar 2024 09:21:59 +0100
Subject: [PATCH 06/11] add getBalance to position details

---
 .../SinglePositionWrapper/SinglePositionWrapper.tsx           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
index 8be529880..72e7ed6f2 100644
--- a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
+++ b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
@@ -17,7 +17,7 @@ import { actions as poolsActions } from '@reducers/pools'
 import { actions as farmsActions } from '@reducers/farms'
 import { actions } from '@reducers/positions'
 import { actions as snackbarsActions } from '@reducers/snackbars'
-import { Status } from '@reducers/solanaWallet'
+import { Status, actions as solanaWallet } from '@reducers/solanaWallet'
 import { hasFarms, hasUserStakes, stakesForPosition } from '@selectors/farms'
 import { hasTokens, volumeRanges } from '@selectors/pools'
 import {
@@ -356,6 +356,8 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
 
   const handleRefresh = () => {
     if (position) {
+      dispatch(solanaWallet.getBalance())
+
       dispatch(actions.getPositionsList())
 
       setWaitingForTicksData(true)

From 67bf4fc0ff831affdbaa3a9bd7f2c6802d913500 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Tue, 2 Apr 2024 14:16:42 +0200
Subject: [PATCH 07/11] disable reset selected ticks

---
 .eslintignore                                         |  5 +++--
 .../NewPosition/DepositSelector/DepositSelector.tsx   |  7 ++++++-
 src/components/NewPosition/NewPosition.tsx            | 11 ++++++++++-
 .../NewPosition/RangeSelector/RangeSelector.tsx       | 11 ++++++++---
 src/components/NewPosition/style.ts                   |  5 ++++-
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 97923637c..1c52538a8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,6 +2,7 @@ ServiceWorker.ts
 react-app-env.d.ts
 config-overrides.js
 build
-dist 
+dist
 vite.config.ts
-.eslintrc.js
\ No newline at end of file
+.eslintrc.js
+storybook-static
diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx
index f2fa575fa..03003aeba 100644
--- a/src/components/NewPosition/DepositSelector/DepositSelector.tsx
+++ b/src/components/NewPosition/DepositSelector/DepositSelector.tsx
@@ -59,6 +59,7 @@ export interface IDepositSelector {
   priceALoading?: boolean
   priceBLoading?: boolean
   feeTierIndex: number
+  setShouldResetPlot: (val: boolean) => void
 }
 
 export const DepositSelector: React.FC<IDepositSelector> = ({
@@ -88,7 +89,8 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   onHideUnknownTokensChange,
   priceALoading,
   priceBLoading,
-  feeTierIndex
+  feeTierIndex,
+  setShouldResetPlot
 }) => {
   const classes = useStyles()
 
@@ -206,6 +208,7 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
               tokens={tokens}
               current={tokenAIndex !== null ? tokens[tokenAIndex] : null}
               onSelect={index => {
+                setShouldResetPlot(true)
                 setTokenAIndex(index)
                 setPositionTokens(index, tokenBIndex, feeTierIndex)
               }}
@@ -241,6 +244,7 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
               tokens={tokens}
               current={tokenBIndex !== null ? tokens[tokenBIndex] : null}
               onSelect={index => {
+                setShouldResetPlot(true)
                 setTokenBIndex(index)
                 setPositionTokens(tokenAIndex, index, feeTierIndex)
               }}
@@ -258,6 +262,7 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
         <FeeSwitch
           onSelect={fee => {
             setPositionTokens(tokenAIndex, tokenBIndex, fee)
+            setShouldResetPlot(true)
           }}
           feeTiers={feeTiers}
           showOnlyPercents
diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
index 2b109cdfd..5c93c4467 100644
--- a/src/components/NewPosition/NewPosition.tsx
+++ b/src/components/NewPosition/NewPosition.tsx
@@ -178,6 +178,9 @@ export const NewPosition: React.FC<INewPosition> = ({
   const [settings, setSettings] = React.useState<boolean>(false)
   const [slippTolerance, setSlippTolerance] = React.useState<string>(initialSlippage)
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
+
+  const [shouldResetPlot, setShouldResetPlot] = useState(true)
+
   const setRangeBlockerInfo = () => {
     if (tokenAIndex === null || tokenBIndex === null) {
       return 'Select tokens to set price range.'
@@ -374,7 +377,10 @@ export const NewPosition: React.FC<INewPosition> = ({
           justifyContent='space-between'
           className={classes.leftSideSubHeader}>
           <Typography className={classes.title}>Add new liquidity position</Typography>
-          <Button onClick={handleRefresh} className={classes.refreshIconBtn}>
+          <Button
+            disabled={tokenAIndex === null || tokenBIndex === null}
+            onClick={handleRefresh}
+            className={classes.refreshIconBtn}>
             <img src={refreshIcon} className={classes.refreshIcon} />
           </Button>
         </Grid>
@@ -537,6 +543,7 @@ export const NewPosition: React.FC<INewPosition> = ({
           priceALoading={priceALoading}
           priceBLoading={priceBLoading}
           feeTierIndex={currentFeeIndex}
+          setShouldResetPlot={setShouldResetPlot}
         />
 
         {isCurrentPoolExisting ||
@@ -579,6 +586,8 @@ export const NewPosition: React.FC<INewPosition> = ({
             hasTicksError={hasTicksError}
             reloadHandler={reloadHandler}
             volumeRange={plotVolumeRange}
+            shouldResetPlot={shouldResetPlot}
+            setShouldResetPlot={setShouldResetPlot}
           />
         ) : (
           <PoolInit
diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index 471fd8ead..47914c8db 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -43,6 +43,8 @@ export interface IRangeSelector {
     min: number
     max: number
   }
+  shouldResetPlot: boolean
+  setShouldResetPlot: (val: boolean) => void
 }
 
 export const RangeSelector: React.FC<IRangeSelector> = ({
@@ -65,7 +67,9 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   poolIndex,
   hasTicksError,
   reloadHandler,
-  volumeRange
+  volumeRange,
+  shouldResetPlot,
+  setShouldResetPlot
 }) => {
   const classes = useStyles()
 
@@ -208,10 +212,11 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   }, [currentPairReversed])
 
   useEffect(() => {
-    if (ticksLoading) {
+    if (poolIndex !== null && shouldResetPlot) {
       resetPlot()
+      setShouldResetPlot(false)
     }
-  }, [ticksLoading, midPrice])
+  }, [ticksLoading, midPrice, poolIndex])
 
   const autoZoomHandler = (left: number, right: number, canZoomCloser: boolean = false) => {
     const leftX = calcPrice(left, isXtoY, xDecimal, yDecimal)
diff --git a/src/components/NewPosition/style.ts b/src/components/NewPosition/style.ts
index 2cf4da18a..44181fba7 100644
--- a/src/components/NewPosition/style.ts
+++ b/src/components/NewPosition/style.ts
@@ -103,8 +103,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     minWidth: 'auto',
     background: 'none',
     marginRight: 7,
-    '& :hover': {
+    '&:hover': {
       background: 'none'
+    },
+    '&:disabled': {
+      opacity: 0.5
     }
   },
   refreshIcon: {

From b4b0830df5e5d1eda0e22d4121affcabcb46ec54 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Fri, 5 Apr 2024 16:06:12 +0200
Subject: [PATCH 08/11] add refreshing global price, fix chart reseting

---
 src/components/NewPosition/NewPosition.tsx    |  4 ++--
 .../RangeSelector/RangeSelector.tsx           |  2 +-
 .../PriceRangePlot/PriceRangePlot.tsx         |  2 +-
 .../NewPositionWrapper/NewPositionWrapper.tsx | 19 +++++++++++++------
 .../SinglePositionWrapper.tsx                 |  8 +++++++-
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
index bab14114d..ec0d23088 100644
--- a/src/components/NewPosition/NewPosition.tsx
+++ b/src/components/NewPosition/NewPosition.tsx
@@ -204,8 +204,8 @@ export const NewPosition: React.FC<INewPosition> = ({
       .fill(1)
       .map((_e, index) => ({ x: index, y: index, index })),
     midPrice: {
-      x: 50,
-      index: 50
+      x: 0,
+      index: 0
     },
     tokenASymbol: 'ABC',
     tokenBSymbol: 'XYZ'
diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index e533f940d..acfc6d34e 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -214,7 +214,7 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   }, [currentPairReversed])
 
   useEffect(() => {
-    if (poolIndex !== null && shouldResetPlot) {
+    if (ticksLoading && shouldResetPlot && midPrice.index !== 0) {
       resetPlot()
       setShouldResetPlot(false)
     }
diff --git a/src/components/PriceRangePlot/PriceRangePlot.tsx b/src/components/PriceRangePlot/PriceRangePlot.tsx
index eee0a09a4..8d3942f79 100644
--- a/src/components/PriceRangePlot/PriceRangePlot.tsx
+++ b/src/components/PriceRangePlot/PriceRangePlot.tsx
@@ -503,11 +503,11 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
           'markers',
           'areas',
           'lines',
-          lazyLoadingLayer,
           globalPriceLayer,
           currentLayer,
           volumeRangeLayer,
           brushLayer,
+          lazyLoadingLayer,
           'axes',
           'legends'
         ]}
diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
index 68b068456..6e03b6b9f 100644
--- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
+++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
@@ -327,7 +327,8 @@ export const NewPositionWrapper: React.FC<IProps> = ({
 
   const [tokenBPriceData, setTokenBPriceData] = useState<TokenPriceData | undefined>(undefined)
   const [priceBLoading, setPriceBLoading] = useState(false)
-  useEffect(() => {
+
+  const getGlobalPrice = () => {
     if (tokenAIndex === null || tokenBIndex === null) {
       return
     }
@@ -342,6 +343,10 @@ export const NewPositionWrapper: React.FC<IProps> = ({
     } else {
       setGlobalPrice(undefined)
     }
+  }
+
+  useEffect(() => {
+    getGlobalPrice()
   }, [tokenAIndex, tokenBIndex])
 
   useEffect(() => {
@@ -434,8 +439,8 @@ export const NewPositionWrapper: React.FC<IProps> = ({
     }
     dispatch(solanaWallet.getBalance())
 
-    const idA = tokens[tokenAIndex].coingeckoId ?? ''
-    if (idA.length) {
+    const idA = tokens[tokenAIndex].assetAddress.toString() ?? ''
+    if (idA) {
       setPriceALoading(true)
       await getJupTokenPrice(idA)
         .then(data => setTokenAPriceData(data))
@@ -445,10 +450,10 @@ export const NewPositionWrapper: React.FC<IProps> = ({
       setTokenAPriceData(undefined)
     }
 
-    const idB = tokens[tokenBIndex].coingeckoId ?? ''
-    if (idB.length) {
+    const idB = tokens[tokenBIndex].assetAddress.toString() ?? ''
+    if (idB) {
       setPriceBLoading(true)
-      await getJupTokenPrice(idB)
+      getJupTokenPrice(idB)
         .then(data => setTokenBPriceData(data))
         .catch(() => setTokenBPriceData(undefined))
         .finally(() => setPriceBLoading(false))
@@ -492,6 +497,8 @@ export const NewPositionWrapper: React.FC<IProps> = ({
         )
       }
     }
+
+    getGlobalPrice()
   }
 
   return (
diff --git a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
index 90a83fd5e..d75eac853 100644
--- a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
+++ b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
@@ -343,7 +343,7 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
     }
   }, [position?.id])
 
-  useEffect(() => {
+  const getGlobalPrice = () => {
     if (!position) {
       return
     }
@@ -364,6 +364,10 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
     } else {
       setGlobalPrice(undefined)
     }
+  }
+
+  useEffect(() => {
+    getGlobalPrice()
   }, [xToY, position?.tokenX, position?.tokenY])
 
   const copyPoolAddressHandler = (message: string, variant: Color) => {
@@ -404,6 +408,8 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
           })
         )
       )
+
+      getGlobalPrice()
     }
   }
 

From 8f06a8ce7c6b95854156e23096b3a979aea3483d Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Mon, 8 Apr 2024 10:27:14 +0200
Subject: [PATCH 09/11] add loader for refresh wallet balance

---
 .../DepositAmountInput/DepositAmountInput.tsx | 24 ++++++++++++-------
 .../Inputs/DepositAmountInput/style.ts        |  5 ++++
 .../DepositSelector/DepositSelector.tsx       |  6 ++++-
 src/components/NewPosition/NewPosition.tsx    |  5 +++-
 .../NewPositionWrapper/NewPositionWrapper.tsx | 10 +++++++-
 .../SinglePositionWrapper.tsx                 |  7 ++++--
 6 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx
index ef2f218e5..137167178 100644
--- a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx
+++ b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx
@@ -21,6 +21,7 @@ interface IProps {
   balanceValue?: string
   disabled?: boolean
   priceLoading?: boolean
+  isBalanceLoading: boolean
 }
 
 export const DepositAmountInput: React.FC<IProps> = ({
@@ -38,7 +39,8 @@ export const DepositAmountInput: React.FC<IProps> = ({
   tokenPrice,
   balanceValue,
   disabled = false,
-  priceLoading = false
+  priceLoading = false,
+  isBalanceLoading
 }) => {
   const classes = useStyles()
 
@@ -145,6 +147,13 @@ export const DepositAmountInput: React.FC<IProps> = ({
 
   const usdBalance = tokenPrice && balanceValue ? tokenPrice * +balanceValue : 0
 
+  const formattedBalance = currency
+    ? `${
+        balanceValue
+          ? formatNumbers(thresholds)(balanceValue) + showPrefix(Number(balanceValue))
+          : '0'
+      } ${currency}`
+    : '- -'
   return (
     <Grid container className={classes.wrapper} style={style}>
       <div className={classes.root}>
@@ -199,14 +208,11 @@ export const DepositAmountInput: React.FC<IProps> = ({
               <>
                 <Typography className={classes.caption2}>
                   Balance:{' '}
-                  {currency
-                    ? `${
-                        balanceValue
-                          ? formatNumbers(thresholds)(balanceValue) +
-                            showPrefix(Number(balanceValue))
-                          : '0'
-                      } ${currency}`
-                    : '- -'}
+                  {isBalanceLoading ? (
+                    <img src={loadingAnimation} className={classes.loadingBalance} />
+                  ) : (
+                    <>{' '.concat(formattedBalance)}</>
+                  )}
                 </Typography>
                 <Button
                   className={
diff --git a/src/components/Inputs/DepositAmountInput/style.ts b/src/components/Inputs/DepositAmountInput/style.ts
index 6d1ab649e..e3f5a3625 100644
--- a/src/components/Inputs/DepositAmountInput/style.ts
+++ b/src/components/Inputs/DepositAmountInput/style.ts
@@ -198,6 +198,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     ...typography.caption4,
     fontSize: 13,
     color: colors.white.main
+  },
+  loadingBalance: {
+    padding: '0 10px 0 20px',
+    width: 15,
+    height: 15
   }
 }))
 
diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx
index e68eb08f1..0e5c9dfb7 100644
--- a/src/components/NewPosition/DepositSelector/DepositSelector.tsx
+++ b/src/components/NewPosition/DepositSelector/DepositSelector.tsx
@@ -58,6 +58,7 @@ export interface IDepositSelector {
   priceBLoading?: boolean
   feeTierIndex: number
   setShouldResetPlot: (val: boolean) => void
+  isBalanceLoading: boolean
 }
 
 export const DepositSelector: React.FC<IDepositSelector> = ({
@@ -86,7 +87,8 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   priceALoading,
   priceBLoading,
   feeTierIndex,
-  setShouldResetPlot
+  setShouldResetPlot,
+  isBalanceLoading
 }) => {
   const classes = useStyles()
 
@@ -327,6 +329,7 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
           }}
           {...tokenAInputState}
           priceLoading={priceALoading}
+          isBalanceLoading={isBalanceLoading}
         />
 
         <DepositAmountInput
@@ -384,6 +387,7 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
           }}
           {...tokenBInputState}
           priceLoading={priceBLoading}
+          isBalanceLoading={isBalanceLoading}
         />
       </Grid>
 
diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
index ec0d23088..18cd13c9a 100644
--- a/src/components/NewPosition/NewPosition.tsx
+++ b/src/components/NewPosition/NewPosition.tsx
@@ -108,6 +108,7 @@ export interface INewPosition {
   initialSlippage: string
   globalPrice?: number
   handleRefresh: () => void
+  isBalanceLoading: boolean
 }
 
 export const NewPosition: React.FC<INewPosition> = ({
@@ -161,7 +162,8 @@ export const NewPosition: React.FC<INewPosition> = ({
   onSlippageChange,
   initialSlippage,
   globalPrice,
-  handleRefresh
+  handleRefresh,
+  isBalanceLoading
 }) => {
   const classes = useStyles()
 
@@ -544,6 +546,7 @@ export const NewPosition: React.FC<INewPosition> = ({
           priceBLoading={priceBLoading}
           feeTierIndex={currentFeeIndex}
           setShouldResetPlot={setShouldResetPlot}
+          isBalanceLoading={isBalanceLoading}
         />
 
         {isCurrentPoolExisting ||
diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
index 6e03b6b9f..68df12773 100644
--- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
+++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
@@ -31,7 +31,13 @@ import {
 } from '@selectors/pools'
 import { initPosition, plotTicks } from '@selectors/positions'
 import { network } from '@selectors/solanaConnection'
-import { canCreateNewPool, canCreateNewPosition, status, swapTokens } from '@selectors/solanaWallet'
+import {
+  canCreateNewPool,
+  canCreateNewPosition,
+  status,
+  swapTokens,
+  balanceLoading
+} from '@selectors/solanaWallet'
 import { PublicKey } from '@solana/web3.js'
 import { getCurrentSolanaConnection, networkTypetoProgramNetwork } from '@web3/connection'
 import { openWalletSelectorModal } from '@web3/selector'
@@ -62,6 +68,7 @@ export const NewPositionWrapper: React.FC<IProps> = ({
   const walletStatus = useSelector(status)
   const allPools = useSelector(poolsArraySortedByFees)
   const poolsVolumeRanges = useSelector(volumeRanges)
+  const isBalanceLoading = useSelector(balanceLoading)
 
   const canUserCreateNewPool = useSelector(canCreateNewPool)
   const canUserCreateNewPosition = useSelector(canCreateNewPosition)
@@ -719,6 +726,7 @@ export const NewPositionWrapper: React.FC<IProps> = ({
       initialSlippage={initialSlippage}
       globalPrice={globalPrice}
       handleRefresh={handleRefresh}
+      isBalanceLoading={isBalanceLoading}
     />
   )
 }
diff --git a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
index d75eac853..e93e1226c 100644
--- a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
+++ b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
@@ -27,7 +27,7 @@ import {
   plotTicks,
   singlePositionData
 } from '@selectors/positions'
-import { status } from '@selectors/solanaWallet'
+import { status, balanceLoading } from '@selectors/solanaWallet'
 import loader from '@static/gif/loader.gif'
 import React, { useEffect, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
@@ -57,7 +57,10 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
   const hasAnyTokens = useSelector(hasTokens)
   const hasAnyFarms = useSelector(hasFarms)
   const hasAnyStakes = useSelector(hasUserStakes)
+
   const walletStatus = useSelector(status)
+  const isBalanceLoading = useSelector(balanceLoading)
+
   const positionStakes = useSelector(stakesForPosition(position?.address))
 
   const [xToY, setXToY] = useState<boolean>(true)
@@ -472,7 +475,7 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
       initialIsDiscreteValue={initialIsDiscreteValue}
       onDiscreteChange={setIsDiscreteValue}
       showFeesLoader={showFeesLoader || isLoadingList}
-      showLiquidityLoader={isLoadingList}
+      showLiquidityLoader={isLoadingList || isBalanceLoading}
       hasTicksError={hasTicksError}
       reloadHandler={() => {
         dispatch(

From f6b57c805044d9a683962f028d1af95e616dd062 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Fri, 12 Apr 2024 18:55:47 +0200
Subject: [PATCH 10/11] handle refresh when transaction timeout error apears

---
 src/components/Swap/Swap.tsx                        | 13 ++++++++++++-
 .../NewPositionWrapper/NewPositionWrapper.tsx       | 12 +++++++++++-
 .../SinglePositionWrapper/SinglePositionWrapper.tsx | 11 +++++++++++
 src/containers/WrappedSwap/WrappedSwap.tsx          | 11 ++++++++++-
 src/store/reducers/solanaConnection.ts              |  9 ++++++++-
 src/store/sagas/positions.ts                        |  7 +++++++
 src/store/sagas/swap.ts                             | 13 ++++++++++++-
 src/store/selectors/solanaConnection.ts             |  7 ++++---
 8 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx
index 7f2fcae09..dbe8ee502 100644
--- a/src/components/Swap/Swap.tsx
+++ b/src/components/Swap/Swap.tsx
@@ -98,6 +98,8 @@ export interface ISwap {
   onSlippageChange: (slippage: string) => void
   initialSlippage: string
   isBalanceLoading: boolean
+  deleteTimeoutError: () => void
+  isTimeoutError: boolean
 }
 
 export const Swap: React.FC<ISwap> = ({
@@ -126,7 +128,9 @@ export const Swap: React.FC<ISwap> = ({
   priceToLoading,
   onSlippageChange,
   initialSlippage,
-  isBalanceLoading
+  isBalanceLoading,
+  deleteTimeoutError,
+  isTimeoutError
 }) => {
   const classes = useStyles()
   enum inputTarget {
@@ -459,6 +463,13 @@ export const Swap: React.FC<ISwap> = ({
     void setSimulateAmount()
   }, [isFetchingNewPool])
 
+  useEffect(() => {
+    if (isTimeoutError) {
+      onRefresh(tokenFromIndex, tokenToIndex)
+      deleteTimeoutError()
+    }
+  }, [isTimeoutError])
+
   return (
     <Grid container className={classes.swapWrapper} alignItems='center'>
       <Grid container className={classes.header}>
diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
index ab46630a8..747eaa7ca 100644
--- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
+++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
@@ -24,13 +24,14 @@ import { actions as poolsActions } from '@reducers/pools'
 import { actions } from '@reducers/positions'
 import { actions as snackbarsActions } from '@reducers/snackbars'
 import { Status, actions as solanaWallet } from '@reducers/solanaWallet'
+import { actions as connectionActions } from '@reducers/solanaConnection'
 import {
   isLoadingLatestPoolsForTransaction,
   poolsArraySortedByFees,
   volumeRanges
 } from '@selectors/pools'
 import { initPosition, plotTicks } from '@selectors/positions'
-import { network } from '@selectors/solanaConnection'
+import { network, timeoutError } from '@selectors/solanaConnection'
 import {
   canCreateNewPool,
   canCreateNewPosition,
@@ -64,6 +65,8 @@ export const NewPositionWrapper: React.FC<IProps> = ({
 
   const connection = getCurrentSolanaConnection()
 
+  const isTimeoutError = useSelector(timeoutError)
+
   const tokens = useSelector(swapTokens)
   const walletStatus = useSelector(status)
   const allPools = useSelector(poolsArraySortedByFees)
@@ -508,6 +511,13 @@ export const NewPositionWrapper: React.FC<IProps> = ({
     getGlobalPrice()
   }
 
+  useEffect(() => {
+    if (isTimeoutError) {
+      void handleRefresh()
+      dispatch(connectionActions.setTimeoutError(false))
+    }
+  }, [isTimeoutError])
+
   return (
     <NewPosition
       initialTokenFrom={initialTokenFrom}
diff --git a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
index e93e1226c..95cb48f63 100644
--- a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
+++ b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
@@ -19,6 +19,8 @@ import { actions as farmsActions } from '@reducers/farms'
 import { actions } from '@reducers/positions'
 import { actions as snackbarsActions } from '@reducers/snackbars'
 import { Status, actions as solanaWallet } from '@reducers/solanaWallet'
+import { actions as connectionActions } from '@reducers/solanaConnection'
+import { timeoutError } from '@selectors/solanaConnection'
 import { hasFarms, hasUserStakes, stakesForPosition } from '@selectors/farms'
 import { hasTokens, volumeRanges } from '@selectors/pools'
 import {
@@ -63,6 +65,8 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
 
   const positionStakes = useSelector(stakesForPosition(position?.address))
 
+  const isTimeoutError = useSelector(timeoutError)
+
   const [xToY, setXToY] = useState<boolean>(true)
 
   const [globalPrice, setGlobalPrice] = useState<number | undefined>(undefined)
@@ -416,6 +420,13 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
     }
   }
 
+  useEffect(() => {
+    if (isTimeoutError) {
+      handleRefresh()
+      dispatch(connectionActions.setTimeoutError(false))
+    }
+  }, [isTimeoutError])
+
   return position ? (
     <PositionDetails
       tokenXAddress={position.tokenX.assetAddress}
diff --git a/src/containers/WrappedSwap/WrappedSwap.tsx b/src/containers/WrappedSwap/WrappedSwap.tsx
index 26af9d7b5..8a8d41b24 100644
--- a/src/containers/WrappedSwap/WrappedSwap.tsx
+++ b/src/containers/WrappedSwap/WrappedSwap.tsx
@@ -17,7 +17,8 @@ import {
   poolTicks,
   tickMaps
 } from '@selectors/pools'
-import { network } from '@selectors/solanaConnection'
+import { network, timeoutError } from '@selectors/solanaConnection'
+import { actions as connectionActions } from '@reducers/solanaConnection'
 import { status, swapTokens, swapTokensDict, balanceLoading } from '@selectors/solanaWallet'
 import { swap as swapPool } from '@selectors/swap'
 import { PublicKey } from '@solana/web3.js'
@@ -41,7 +42,9 @@ export const WrappedSwap = () => {
   const isBalanceLoading = useSelector(balanceLoading)
   const { success, inProgress } = useSelector(swapPool)
   const isFetchingNewPool = useSelector(isLoadingLatestPoolsForTransaction)
+
   const networkType = useSelector(network)
+  const isTimeoutError = useSelector(timeoutError)
 
   const [progress, setProgress] = useState<ProgressState>('none')
   const [tokenFrom, setTokenFrom] = useState<PublicKey | null>(null)
@@ -212,6 +215,10 @@ export const WrappedSwap = () => {
     }
   }
 
+  const deleteTimeoutError = () => {
+    dispatch(connectionActions.setTimeoutError(false))
+  }
+
   return (
     <Swap
       isFetchingNewPool={isFetchingNewPool}
@@ -285,6 +292,8 @@ export const WrappedSwap = () => {
       onSlippageChange={onSlippageChange}
       initialSlippage={initialSlippage}
       isBalanceLoading={isBalanceLoading}
+      deleteTimeoutError={deleteTimeoutError}
+      isTimeoutError={isTimeoutError}
     />
   )
 }
diff --git a/src/store/reducers/solanaConnection.ts b/src/store/reducers/solanaConnection.ts
index 0fa987804..1c4564396 100644
--- a/src/store/reducers/solanaConnection.ts
+++ b/src/store/reducers/solanaConnection.ts
@@ -14,6 +14,7 @@ export interface ISolanaConnectionStore {
   network: NetworkType
   slot: number
   rpcAddress: string
+  timeoutError: boolean
 }
 
 export const defaultState: ISolanaConnectionStore = {
@@ -21,8 +22,10 @@ export const defaultState: ISolanaConnectionStore = {
   message: '',
   network: NetworkType.MAINNET,
   slot: 0,
-  rpcAddress: SolanaNetworks.MAIN_NIGHTLY
+  rpcAddress: SolanaNetworks.MAIN_NIGHTLY,
+  timeoutError: false
 }
+
 export const solanaConnectionSliceName = 'solanaConnection'
 const solanaConnectionSlice = createSlice({
   name: solanaConnectionSliceName,
@@ -58,6 +61,10 @@ const solanaConnectionSlice = createSlice({
     setSlot(state, action: PayloadAction<number>) {
       state.slot = action.payload
       return state
+    },
+    setTimeoutError(state, action: PayloadAction<boolean>) {
+      state.timeoutError = action.payload
+      return state
     }
   }
 })
diff --git a/src/store/sagas/positions.ts b/src/store/sagas/positions.ts
index ddd0e17d6..031e03cf2 100644
--- a/src/store/sagas/positions.ts
+++ b/src/store/sagas/positions.ts
@@ -17,6 +17,7 @@ import {
   actions
 } from '@reducers/positions'
 import { actions as snackbarsActions } from '@reducers/snackbars'
+import { actions as connectionActions } from '@reducers/solanaConnection'
 import { GuardPredicate } from '@redux-saga/types'
 import { PayloadAction } from '@reduxjs/toolkit'
 import { stakesForPosition } from '@selectors/farms'
@@ -30,6 +31,7 @@ import {
   PublicKey,
   SystemProgram,
   Transaction,
+  TransactionExpiredTimeoutError,
   sendAndConfirmRawTransaction
 } from '@solana/web3.js'
 import { getMarketProgram } from '@web3/programs/amm'
@@ -501,6 +503,11 @@ function* handleInitPositionWithSOL(action: PayloadAction<InitPositionData>): Ge
   } catch (error) {
     console.log(error)
 
+    // TODO finish after merge https://github.com/invariant-labs/webapp/pull/667
+    if (error instanceof TransactionExpiredTimeoutError) {
+      yield put(connectionActions.setTimeoutError(true))
+    }
+
     yield put(actions.setInitPositionSuccess(false))
 
     closeSnackbar(loaderCreatePosition)
diff --git a/src/store/sagas/swap.ts b/src/store/sagas/swap.ts
index 118783b1e..1ac5905e2 100644
--- a/src/store/sagas/swap.ts
+++ b/src/store/sagas/swap.ts
@@ -2,13 +2,20 @@ import { SIGNING_SNACKBAR_CONFIG, WRAPPED_SOL_ADDRESS } from '@consts/static'
 import { createLoaderKey, solToPriorityFee } from '@consts/utils'
 import { Pair } from '@invariant-labs/sdk'
 import { actions as snackbarsActions } from '@reducers/snackbars'
+import { actions as connectionActions } from '@reducers/solanaConnection'
 import { actions as swapActions } from '@reducers/swap'
 import { poolsArraySortedByFees, tokens } from '@selectors/pools'
 import { network, rpcAddress } from '@selectors/solanaConnection'
 import { accounts } from '@selectors/solanaWallet'
 import { swap } from '@selectors/swap'
 import { NATIVE_MINT, TOKEN_PROGRAM_ID, Token } from '@solana/spl-token'
-import { Keypair, SystemProgram, Transaction, sendAndConfirmRawTransaction } from '@solana/web3.js'
+import {
+  Keypair,
+  SystemProgram,
+  Transaction,
+  TransactionExpiredTimeoutError,
+  sendAndConfirmRawTransaction
+} from '@solana/web3.js'
 import { getMarketProgram } from '@web3/programs/amm'
 import { call, put, select, takeEvery } from 'typed-redux-saga'
 import { getConnection } from './connection'
@@ -281,6 +288,10 @@ export function* handleSwapWithSOL(): Generator {
 
     yield put(swapActions.setSwapSuccess(false))
 
+    // TODO finish after merge https://github.com/invariant-labs/webapp/pull/667
+    if (error instanceof TransactionExpiredTimeoutError) {
+      yield put(connectionActions.setTimeoutError(true))
+    }
     yield put(
       snackbarsActions.add({
         message:
diff --git a/src/store/selectors/solanaConnection.ts b/src/store/selectors/solanaConnection.ts
index 68116bb5d..556d73178 100644
--- a/src/store/selectors/solanaConnection.ts
+++ b/src/store/selectors/solanaConnection.ts
@@ -3,13 +3,14 @@ import { keySelectors, AnyProps } from './helpers'
 
 const store = (s: AnyProps) => s[solanaConnectionSliceName] as ISolanaConnectionStore
 
-export const { network, status, slot, rpcAddress } = keySelectors(store, [
+export const { network, status, slot, rpcAddress, timeoutError } = keySelectors(store, [
   'network',
   'status',
   'slot',
-  'rpcAddress'
+  'rpcAddress',
+  'timeoutError'
 ])
 
-export const solanaConnectionSelectors = { network, status, slot, rpcAddress }
+export const solanaConnectionSelectors = { network, status, slot, rpcAddress, timeoutError }
 
 export default solanaConnectionSelectors

From 5b5579287c525fc36cea6f06a68a44890c6412c1 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Wed, 17 Apr 2024 19:22:46 +0200
Subject: [PATCH 11/11] fix claim fee loader after disconnecting wallet

---
 .../SinglePositionWrapper/SinglePositionWrapper.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
index 0418c6d77..0b98275fa 100644
--- a/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
+++ b/src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx
@@ -75,14 +75,14 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
 
   const [globalPrice, setGlobalPrice] = useState<number | undefined>(undefined)
 
-  const [waitingForTicksData, setWaitingForTicksData] = useState<boolean | null>(null)
+  const [waitingForTicksData, setWaitingForTicksData] = useState<boolean | null>(false)
 
   const [showFeesLoader, setShowFeesLoader] = useState(true)
 
   const [isFinishedDelayRender, setIsFinishedDelayRender] = useState(false)
 
   useEffect(() => {
-    if (position?.id && waitingForTicksData === null) {
+    if (position?.id && !waitingForTicksData) {
       setWaitingForTicksData(true)
       dispatch(actions.getCurrentPositionRangeTicks(id))
       dispatch(