add buy, sell and global price

src/components/NewPosition/RangeSelector/RangeSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import PriceRangePlot, { TickPlotPositionData } from '@components/PriceRangePlot/PriceRangePlot'
 import RangeInput from '@components/Inputs/RangeInput/RangeInput'
 import activeLiquidity from '@static/svg/activeLiquidity.svg'
@@ -19,6 +19,7 @@ import {
 } from '@utils/utils'
 import { getMaxTick, getMinTick } from '@invariant-labs/sdk/lib/utils'
 import { Button, Grid, Tooltip, Typography } from '@mui/material'
+import { colors } from '@static/theme'
 export interface IRangeSelector {
   data: PlotTickData[]
   midPrice: TickPlotPositionData
@@ -408,16 +409,71 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
     autoZoomHandler(leftRange, rightRange, true)
   }, [tokenASymbol, tokenBSymbol])
 
+  const buyPercentageDifference = useMemo(() => {
+    if (
+      tokenAPriceData?.buyPrice === undefined ||
+      globalPrice === undefined ||
+      tokenBPriceData?.price === undefined
+    ) {
+      return
+    }
+    return ((tokenAPriceData.buyPrice / tokenBPriceData?.price - globalPrice) / globalPrice) * 100
+  }, [tokenAPriceData?.buyPrice, globalPrice, tokenBPriceData?.price])
+
+  const sellPercentageDifference = useMemo(() => {
+    if (
+      tokenAPriceData?.sellPrice === undefined ||
+      globalPrice === undefined ||
+      tokenBPriceData?.price === undefined
+    ) {
+      return
+    }
+    return ((tokenAPriceData.sellPrice / tokenBPriceData?.price - globalPrice) / globalPrice) * 100
+  }, [tokenAPriceData?.sellPrice, globalPrice, tokenBPriceData?.price])
+
   return (
     <Grid container className={classes.wrapper} direction='column'>
       <Grid className={classes.topInnerWrapper}>
         <Grid className={classes.headerContainer} container justifyContent='space-between'>
           <Grid>
             <Typography className={classes.header}>Price range</Typography>
             {poolIndex !== null && (
-              <Typography className={classes.currentPrice}>
-                {formatNumber(midPrice.x, false, 4)} {tokenBSymbol} per {tokenASymbol}
-              </Typography>
+              <>
+                <div className={classes.priceBlock}>
+                  <Typography className={classes.currentPrice}>
+                    {formatNumber(midPrice.x, false, 4)} {tokenASymbol}/{tokenBSymbol}
+                  </Typography>
+                </div>
+                <div className={classes.priceBlock}>
+                  {globalPrice && (
+                    <Typography
+                      className={classes.currentPrice}
+                      style={{ color: colors.invariant.blue }}>
+                      {formatNumber(globalPrice, false, 4)} {tokenASymbol}/{tokenBSymbol}
+                    </Typography>
+                  )}
+                </div>
+                <div className={classes.priceBlock}>
+                  {buyPercentageDifference && (
+                    <Typography
+                      className={classes.currentPrice}
+                      style={{ color: colors.invariant.plotGreen }}>
+                      {buyPercentageDifference < 0 ? '-' : '+'}
+                      {formatNumber(Math.abs(buyPercentageDifference), false, 2)}%
+                    </Typography>
+                  )}
+                </div>
+                <div className={classes.priceBlock}>
+                  {sellPercentageDifference && (
+                    <Typography
+                      className={classes.currentPrice}
+                      style={{ color: colors.invariant.plotRed }}>
+                      {sellPercentageDifference < 0 ? '-' : '+'}{' '}
+                      {formatNumber(Math.abs(sellPercentageDifference), false, 2)}%
+                    </Typography>
+                  )}
+                </div>
+              </>
             )}
           </Grid>
           <Grid className={classes.activeLiquidityContainer} container direction='column'>

src/components/NewPosition/RangeSelector/style.ts

@@ -15,7 +15,7 @@ const useStyles = makeStyles()(theme => {
       }
     },
     headerContainer: {
-      marginBottom: 12
+      paddingBottom: 12
     },
     header: {
       ...typography.heading4,
@@ -256,6 +256,10 @@ const useStyles = makeStyles()(theme => {
       ...typography.caption2,
       textAlign: 'right',
       marginLeft: 4
+    },
+    priceBlock: {
+      height: 17,
+      margin: 0
     }
   }
 })

src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx

@@ -6,15 +6,17 @@ import activeLiquidity from '@static/svg/activeLiquidity.svg'
 import {
   calcPriceByTickIndex,
   calcTicksAmountInRange,
+  formatNumber,
   numberToString,
   spacingMultiplicityGte,
   TokenPriceData
 } from '@utils/utils'
 import { PlotTickData } from '@store/reducers/positions'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { ILiquidityToken } from '../SinglePositionInfo/consts'
 import useStyles from './style'
 import { getMinTick } from '@invariant-labs/sdk/lib/utils'
+import { colors } from '@static/theme'
 
 export interface ISinglePositionPlot {
   data: PlotTickData[]
@@ -147,10 +149,72 @@ const SinglePositionPlot: React.FC<ISinglePositionPlot> = ({
     }
   }
 
+  const buyPercentageDifference = useMemo(() => {
+    if (
+      tokenAPriceData?.buyPrice === undefined ||
+      globalPrice === undefined ||
+      tokenBPriceData?.price === undefined
+    ) {
+      return
+    }
+    return ((tokenAPriceData.buyPrice / tokenBPriceData?.price - globalPrice) / globalPrice) * 100
+  }, [tokenAPriceData?.buyPrice, globalPrice, tokenBPriceData?.price])
+
+  const sellPercentageDifference = useMemo(() => {
+    if (
+      tokenAPriceData?.sellPrice === undefined ||
+      globalPrice === undefined ||
+      tokenBPriceData?.price === undefined
+    ) {
+      return
+    }
+    return ((tokenAPriceData.sellPrice / tokenBPriceData?.price - globalPrice) / globalPrice) * 100
+  }, [tokenAPriceData?.sellPrice, globalPrice, tokenBPriceData?.price])
+
   return (
     <Grid item className={classes.root}>
       <Grid className={classes.headerContainer} container justifyContent='space-between'>
-        <Typography className={classes.header}>Price range</Typography>
+        <Grid>
+          <Typography className={classes.header}>Price range</Typography>
+          {
+            <>
+              <div className={classes.priceBlock}>
+                <Typography className={classes.currentPrice}>
+                  {formatNumber(midPrice.x, false, 4)} {tokenX.name}/{tokenY.name}
+                </Typography>
+              </div>
+              <div className={classes.priceBlock}>
+                {globalPrice && (
+                  <Typography
+                    className={classes.currentPrice}
+                    style={{ color: colors.invariant.blue }}>
+                    {formatNumber(globalPrice, false, 4)} {tokenX.name}/{tokenY.name}
+                  </Typography>
+                )}
+              </div>
+              <div className={classes.priceBlock}>
+                {buyPercentageDifference && (
+                  <Typography
+                    className={classes.currentPrice}
+                    style={{ color: colors.invariant.plotGreen }}>
+                    {buyPercentageDifference < 0 ? '-' : '+'}
+                    {formatNumber(Math.abs(buyPercentageDifference), false, 2)}%
+                  </Typography>
+                )}
+              </div>
+              <div className={classes.priceBlock}>
+                {sellPercentageDifference && (
+                  <Typography
+                    className={classes.currentPrice}
+                    style={{ color: colors.invariant.plotRed }}>
+                    {sellPercentageDifference < 0 ? '-' : '+'}{' '}
+                    {formatNumber(Math.abs(sellPercentageDifference), false, 2)}%
+                  </Typography>
+                )}
+              </div>
+            </>
+          }
+        </Grid>
         <Grid>
           <Tooltip
             enterTouchDelay={0}

src/components/PositionDetails/SinglePositionPlot/style.ts

@@ -15,10 +15,12 @@ export const useStyles = makeStyles()((theme: Theme) => ({
   },
   headerContainer: {
     ...typography.heading4,
-    color: '#FFFFFF'
+    color: '#FFFFFF',
+    paddingBottom: 12
   },
   header: {
-    paddingBottom: 30
+    ...typography.heading4,
+    color: colors.white.main
   },
   plotWrapper: {
     paddingBottom: 29
@@ -86,6 +88,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     marginBottom: 16
   },
   activeLiquidity: {
+    height: 24,
     color: colors.invariant.text,
     ...typography.caption2,
     display: 'flex',
@@ -142,6 +145,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     marginLeft: 16
   },
   currentPrice: {
+    display: 'inline-block',
     color: colors.invariant.yellow,
     ...typography.caption2,
     textAlign: 'right'
@@ -166,6 +170,11 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     ...typography.caption2,
     textAlign: 'right',
     marginLeft: 4
+  },
+  priceBlock: {
+    height: 17,
+    margin: 0,
+    textAlign: 'left'
   }
 }))