diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx index c28ed25c..d79e7e81 100644 --- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx +++ b/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,6 +409,28 @@ export const RangeSelector: React.FC = ({ 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 ( @@ -415,9 +438,42 @@ export const RangeSelector: React.FC = ({ Price range {poolIndex !== null && ( - - {formatNumber(midPrice.x, false, 4)} {tokenBSymbol} per {tokenASymbol} - + <> +
+ + {formatNumber(midPrice.x, false, 4)} {tokenASymbol}/{tokenBSymbol} + +
+
+ {globalPrice && ( + + {formatNumber(globalPrice, false, 4)} {tokenASymbol}/{tokenBSymbol} + + )} +
+
+ {buyPercentageDifference && ( + + {buyPercentageDifference < 0 ? '-' : '+'} + {formatNumber(Math.abs(buyPercentageDifference), false, 2)}% + + )} +
+
+ {sellPercentageDifference && ( + + {sellPercentageDifference < 0 ? '-' : '+'}{' '} + {formatNumber(Math.abs(sellPercentageDifference), false, 2)}% + + )} +
+ )}
diff --git a/src/components/NewPosition/RangeSelector/style.ts b/src/components/NewPosition/RangeSelector/style.ts index d1676bb8..d938b9d1 100644 --- a/src/components/NewPosition/RangeSelector/style.ts +++ b/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 } } }) diff --git a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx index f06cfaf4..729c1654 100644 --- a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx +++ b/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 = ({ } } + 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 ( - Price range + + Price range + { + <> +
+ + {formatNumber(midPrice.x, false, 4)} {tokenX.name}/{tokenY.name} + +
+
+ {globalPrice && ( + + {formatNumber(globalPrice, false, 4)} {tokenX.name}/{tokenY.name} + + )} +
+
+ {buyPercentageDifference && ( + + {buyPercentageDifference < 0 ? '-' : '+'} + {formatNumber(Math.abs(buyPercentageDifference), false, 2)}% + + )} +
+
+ {sellPercentageDifference && ( + + {sellPercentageDifference < 0 ? '-' : '+'}{' '} + {formatNumber(Math.abs(sellPercentageDifference), false, 2)}% + + )} +
+ + } +
({ }, 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' } }))