add refresh buttons for new position and position details

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={

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

src/components/NewPosition/DepositSelector/DepositSelector.tsx

@@ -62,6 +62,8 @@ export interface IDepositSelector {
   concentrationIndex: number
   minimumSliderIndex: number
   positionOpeningMethod: PositionOpeningMethod
+  setShouldResetPlot: (val: boolean) => void
+  isBalanceLoading: boolean
 }
 
 export const DepositSelector: React.FC<IDepositSelector> = ({
@@ -93,7 +95,9 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   concentrationArray,
   concentrationIndex,
   minimumSliderIndex,
-  positionOpeningMethod
+  positionOpeningMethod,
+  setShouldResetPlot,
+  isBalanceLoading
 }) => {
   const classes = useStyles()
 
@@ -227,6 +231,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)
               }}
@@ -262,6 +267,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)
               }}
@@ -279,6 +285,7 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
         <FeeSwitch
           onSelect={fee => {
             setPositionTokens(tokenAIndex, tokenBIndex, fee)
+            setShouldResetPlot(true)
           }}
           feeTiers={feeTiers}
           showOnlyPercents
@@ -347,6 +354,7 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
           }}
           {...tokenAInputState}
           priceLoading={priceALoading}
+          isBalanceLoading={isBalanceLoading}
         />
 
         <DepositAmountInput
@@ -404,6 +412,7 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
           }}
           {...tokenBInputState}
           priceLoading={priceBLoading}
+          isBalanceLoading={isBalanceLoading}
         />
       </Grid>
 

src/components/NewPosition/NewPosition.tsx

@@ -32,6 +32,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'
 import { getMinTick } from '@invariant-labs/sdk/src/utils'
 
@@ -106,6 +107,8 @@ export interface INewPosition {
   onSlippageChange: (slippage: string) => void
   initialSlippage: string
   globalPrice?: number
+  handleRefresh: () => void
+  isBalanceLoading: boolean
 }
 
 export const NewPosition: React.FC<INewPosition> = ({
@@ -158,7 +161,9 @@ export const NewPosition: React.FC<INewPosition> = ({
   currentFeeIndex,
   onSlippageChange,
   initialSlippage,
-  globalPrice
+  globalPrice,
+  handleRefresh,
+  isBalanceLoading
 }) => {
   const classes = useStyles()
 
@@ -189,6 +194,8 @@ export const NewPosition: React.FC<INewPosition> = ({
     [tickSpacing]
   )
 
+  const [shouldResetPlot, setShouldResetPlot] = useState(true)
+
   const setRangeBlockerInfo = () => {
     if (tokenAIndex === null || tokenBIndex === null) {
       return 'Select tokens to set price range.'
@@ -210,8 +217,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'
@@ -442,9 +449,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}
@@ -605,6 +635,8 @@ export const NewPosition: React.FC<INewPosition> = ({
           concentrationIndex={concentrationIndex}
           minimumSliderIndex={minimumSliderIndex}
           positionOpeningMethod={positionOpeningMethod}
+          setShouldResetPlot={setShouldResetPlot}
+          isBalanceLoading={isBalanceLoading}
         />
 
         {isCurrentPoolExisting ||
@@ -653,6 +685,8 @@ export const NewPosition: React.FC<INewPosition> = ({
             concentrationIndex={concentrationIndex}
             minimumSliderIndex={minimumSliderIndex}
             getTicksInsideRange={getTicksInsideRange}
+            shouldResetPlot={shouldResetPlot}
+            setShouldResetPlot={setShouldResetPlot}
           />
         ) : (
           <PoolInit

src/components/NewPosition/RangeSelector/RangeSelector.tsx

@@ -55,6 +55,8 @@ export interface IRangeSelector {
     leftInRange: number
     rightInRange: number
   }
+  shouldResetPlot: boolean
+  setShouldResetPlot: (val: boolean) => void
 }
 
 export const RangeSelector: React.FC<IRangeSelector> = ({
@@ -79,6 +81,8 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   hasTicksError,
   reloadHandler,
   volumeRange,
+  shouldResetPlot,
+  setShouldResetPlot,
   concentrationArray,
   minimumSliderIndex,
   concentrationIndex,
@@ -245,10 +249,11 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
   }, [currentPairReversed])
 
   useEffect(() => {
-    if (ticksLoading && isMountedRef.current) {
+    if (ticksLoading && shouldResetPlot && midPrice.index !== 0 && isMountedRef.current) {
       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'
+    }
   }
 }))