add refresh buttons for new position and position details

.eslintignore

@@ -2,6 +2,7 @@ ServiceWorker.ts
 react-app-env.d.ts
 config-overrides.js
 build
-dist 
+dist
 vite.config.ts
-.eslintrc.js
+.eslintrc.js
+storybook-static

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

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()
 
@@ -175,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.'
@@ -358,9 +364,32 @@ 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
+            disabled={tokenAIndex === null || tokenBIndex === null}
+            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}
@@ -514,6 +543,7 @@ export const NewPosition: React.FC<INewPosition> = ({
           priceALoading={priceALoading}
           priceBLoading={priceBLoading}
           feeTierIndex={currentFeeIndex}
+          setShouldResetPlot={setShouldResetPlot}
         />
 
         {isCurrentPoolExisting ||
@@ -556,6 +586,8 @@ export const NewPosition: React.FC<INewPosition> = ({
             hasTicksError={hasTicksError}
             reloadHandler={reloadHandler}
             volumeRange={plotVolumeRange}
+            shouldResetPlot={shouldResetPlot}
+            setShouldResetPlot={setShouldResetPlot}
           />
         ) : (
           <PoolInit

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)

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,56 @@ 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'
+    },
+    '&:disabled': {
+      opacity: 0.5
+    }
+  },
+  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'
@@ -39,13 +40,15 @@ interface IProps {
   initialIsDiscreteValue: boolean
   onDiscreteChange: (val: boolean) => void
   showFeesLoader?: boolean
+  showLiquidityLoader?: boolean
   hasTicksError?: boolean
   reloadHandler: () => void
   plotVolumeRange?: {
     min: number
     max: number
   }
   userHasStakes?: boolean
+  handleRefresh: () => void
 }
 
 const PositionDetails: React.FC<IProps> = ({
@@ -70,10 +73,12 @@ const PositionDetails: React.FC<IProps> = ({
   initialIsDiscreteValue,
   onDiscreteChange,
   showFeesLoader = false,
+  showLiquidityLoader = false,
   hasTicksError,
   reloadHandler,
   plotVolumeRange,
-  userHasStakes = false
+  userHasStakes = false,
+  handleRefresh
 }) => {
   const classes = useStyles()
 
@@ -100,6 +105,7 @@ const PositionDetails: React.FC<IProps> = ({
           xToY={xToY}
           swapHandler={() => setXToY(!xToY)}
           showFeesLoader={showFeesLoader}
+          showLiquidityLoader={showLiquidityLoader}
           userHasStakes={userHasStakes}
         />
       </Grid>
@@ -108,17 +114,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 +139,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

@@ -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()
@@ -96,7 +98,6 @@ const SinglePositionInfo: React.FC<IProp> = ({
             Close position
           </Button>
           <Hidden smUp>
-            {' '}
             <Button
               className={classes.button}
               variant='contained'
@@ -119,6 +120,7 @@ const SinglePositionInfo: React.FC<IProp> = ({
           }
           showBalance
           swapHandler={swapHandler}
+          showLoader={showLiquidityLoader}
         />
         <BoxInfo
           title={'Unclaimed fees'}

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}