add refresh buttons for new position and position details

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}

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'
+    }
   }
 }))
 

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>
 

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'

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)'
+    }
   }
 }))
 

src/containers/NewPositionWrapper/NewPositionWrapper.tsx

@@ -22,7 +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 { Status } from '@reducers/solanaWallet'
+import { Status, actions as solanaWallet } from '@reducers/solanaWallet'
 import {
   isLoadingLatestPoolsForTransaction,
   poolsArraySortedByFees,
@@ -408,6 +408,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 +690,7 @@ export const NewPositionWrapper: React.FC<IProps> = ({
       currentFeeIndex={feeIndex}
       onSlippageChange={onSlippageChange}
       initialSlippage={initialSlippage}
+      handleRefresh={handleRefresh}
     />
   )
 }