diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx index cb77be19..c28ed25c 100644 --- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx +++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx @@ -461,7 +461,10 @@ export const RangeSelector: React.FC = ({ Current price Global price - Buy/sell price + Last global buy price + + Last global sell price + diff --git a/src/components/NewPosition/RangeSelector/style.ts b/src/components/NewPosition/RangeSelector/style.ts index 89715ebc..d1676bb8 100644 --- a/src/components/NewPosition/RangeSelector/style.ts +++ b/src/components/NewPosition/RangeSelector/style.ts @@ -165,6 +165,7 @@ const useStyles = makeStyles()(theme => { display: 'flex', flexDirection: 'row', alignItems: 'center', + justifyContent: 'flex-end', cursor: 'default' }, activeLiquidityIcon: { @@ -241,6 +242,20 @@ const useStyles = makeStyles()(theme => { ...typography.caption2, textAlign: 'right', marginLeft: 4 + }, + lastGlobalBuyPrice: { + display: 'inline-block', + color: colors.invariant.plotGreen, + ...typography.caption2, + textAlign: 'right', + marginLeft: 4 + }, + lastGlobalSellPrice: { + display: 'inline-block', + color: colors.invariant.plotRed, + ...typography.caption2, + textAlign: 'right', + marginLeft: 4 } } }) diff --git a/src/components/PopularPools/Card/StatsLabel/style.ts b/src/components/PopularPools/Card/StatsLabel/style.ts index 4ea119b9..1d86366d 100644 --- a/src/components/PopularPools/Card/StatsLabel/style.ts +++ b/src/components/PopularPools/Card/StatsLabel/style.ts @@ -20,7 +20,7 @@ export const useStyles = makeStyles()(() => ({ ...typography.caption4, color: colors.invariant.green, textShadow: '0px 0px 5px rgba(46, 224, 154, 1)', - fontWeight: 700, + fontWeight: 500, fontSize: 20 } })) diff --git a/src/components/PositionDetails/PositionDetails.tsx b/src/components/PositionDetails/PositionDetails.tsx index f9bd606f..76a7f246 100644 --- a/src/components/PositionDetails/PositionDetails.tsx +++ b/src/components/PositionDetails/PositionDetails.tsx @@ -311,6 +311,8 @@ const PositionDetails: React.FC = ({ } } globalPrice={globalPrice} + tokenAPriceData={xToY ? tokenXPriceData : tokenYPriceData} + tokenBPriceData={xToY ? tokenYPriceData : tokenXPriceData} /> diff --git a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.stories.tsx b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.stories.tsx index ddae5bc4..af355a48 100644 --- a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.stories.tsx +++ b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.stories.tsx @@ -49,7 +49,17 @@ export const Primary: Story = { decimal: 12 }, xToY: true, - hasTicksError: false + hasTicksError: false, + tokenAPriceData: { + price: 100000, + buyPrice: 105000, + sellPrice: 95000 + }, + tokenBPriceData: { + price: 4000, + buyPrice: 4100, + sellPrice: 3900 + } }, render: args => { return ( diff --git a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx index 15fcd726..f06cfaf4 100644 --- a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx +++ b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx @@ -7,7 +7,8 @@ import { calcPriceByTickIndex, calcTicksAmountInRange, numberToString, - spacingMultiplicityGte + spacingMultiplicityGte, + TokenPriceData } from '@utils/utils' import { PlotTickData } from '@store/reducers/positions' import React, { useEffect, useState } from 'react' @@ -35,6 +36,8 @@ export interface ISinglePositionPlot { min: number max: number } + tokenAPriceData: TokenPriceData | undefined + tokenBPriceData: TokenPriceData | undefined } const SinglePositionPlot: React.FC = ({ @@ -53,7 +56,9 @@ const SinglePositionPlot: React.FC = ({ xToY, hasTicksError, reloadHandler, - volumeRange + volumeRange, + tokenAPriceData, + tokenBPriceData }) => { const { classes } = useStyles() @@ -185,8 +190,10 @@ const SinglePositionPlot: React.FC = ({ - Current price ━━━ - Global price ━━━ + Current price + Global price + Last global buy price + Last global sell price @@ -212,6 +219,8 @@ const SinglePositionPlot: React.FC = ({ reloadHandler={reloadHandler} volumeRange={volumeRange} globalPrice={globalPrice} + tokenAPriceData={tokenAPriceData} + tokenBPriceData={tokenBPriceData} /> diff --git a/src/components/PositionDetails/SinglePositionPlot/style.ts b/src/components/PositionDetails/SinglePositionPlot/style.ts index 00f12b82..7862c47f 100644 --- a/src/components/PositionDetails/SinglePositionPlot/style.ts +++ b/src/components/PositionDetails/SinglePositionPlot/style.ts @@ -91,6 +91,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({ display: 'flex', flexDirection: 'row', alignItems: 'center', + justifyContent: 'flex-end', cursor: 'default' }, activeLiquidityIcon: { @@ -151,6 +152,20 @@ export const useStyles = makeStyles()((theme: Theme) => ({ ...typography.caption2, textAlign: 'right', marginLeft: 4 + }, + lastGlobalBuyPrice: { + display: 'inline-block', + color: colors.invariant.plotGreen, + ...typography.caption2, + textAlign: 'right', + marginLeft: 4 + }, + lastGlobalSellPrice: { + display: 'inline-block', + color: colors.invariant.plotRed, + ...typography.caption2, + textAlign: 'right', + marginLeft: 4 } })) diff --git a/src/components/PriceRangePlot/PriceRangePlot.tsx b/src/components/PriceRangePlot/PriceRangePlot.tsx index 7af8a966..2e61166c 100644 --- a/src/components/PriceRangePlot/PriceRangePlot.tsx +++ b/src/components/PriceRangePlot/PriceRangePlot.tsx @@ -327,7 +327,7 @@ export const PriceRangePlot: React.FC = ({ const unitLen = innerWidth / (plotMax - plotMin) return ( @@ -337,7 +337,7 @@ export const PriceRangePlot: React.FC = ({ - + ) } @@ -350,7 +350,7 @@ export const PriceRangePlot: React.FC = ({ const unitLen = innerWidth / (plotMax - plotMin) return ( @@ -360,7 +360,7 @@ export const PriceRangePlot: React.FC = ({ - + ) } diff --git a/src/components/Stats/PoolList/PoolList.tsx b/src/components/Stats/PoolList/PoolList.tsx index 0c496b46..56b976f3 100644 --- a/src/components/Stats/PoolList/PoolList.tsx +++ b/src/components/Stats/PoolList/PoolList.tsx @@ -131,61 +131,63 @@ const PoolList: React.FC = ({ const pages = Math.ceil(data.length / 10) return ( -
- - <> - - {data.length > 0 || isLoading ? ( - paginator(page).map((element, index) => ( - 0 || element.lockedY > 0} - fee={element.fee} - apy={element.apy} - hideBottomLine={pages === 1 && index + 1 === data.length} - apyData={element.apyData} - key={index} - addressFrom={element.addressFrom} - addressTo={element.addressTo} - network={network} - isUnknownFrom={element.isUnknownFrom} - isUnknownTo={element.isUnknownTo} - poolAddress={element.poolAddress} - copyAddressHandler={copyAddressHandler} - /> - )) - ) : ( - - )} - {pages > 1 ? ( - - - - ) : null} - - -
+ + <> + + {data.length > 0 || isLoading ? ( + paginator(page).map((element, index) => ( + 0 || element.lockedY > 0} + fee={element.fee} + apy={element.apy} + hideBottomLine={pages === 1 && index + 1 === data.length} + apyData={element.apyData} + key={index} + addressFrom={element.addressFrom} + addressTo={element.addressTo} + network={network} + isUnknownFrom={element.isUnknownFrom} + isUnknownTo={element.isUnknownTo} + poolAddress={element.poolAddress} + copyAddressHandler={copyAddressHandler} + /> + )) + ) : ( + + )} + {pages > 1 ? ( + + + + ) : null} + + ) } export default PoolList diff --git a/src/components/Stats/PoolListItem/PoolListItem.tsx b/src/components/Stats/PoolListItem/PoolListItem.tsx index 4008addb..3859b6a9 100644 --- a/src/components/Stats/PoolListItem/PoolListItem.tsx +++ b/src/components/Stats/PoolListItem/PoolListItem.tsx @@ -69,7 +69,7 @@ const PoolListItem: React.FC = ({ const { classes } = useStyles() const navigate = useNavigate() - const isSm = useMediaQuery(theme.breakpoints.down('sm')) + const isSmd = useMediaQuery('(max-width:780px)') const isMd = useMediaQuery(theme.breakpoints.down('md')) const handleOpenPosition = () => { @@ -124,32 +124,30 @@ const PoolListItem: React.FC = ({ style={hideBottomLine ? { border: 'none' } : undefined}> {!isMd ? {tokenIndex} : null} - {!isSm && ( - - - Token from { - e.currentTarget.src = icons.unknownToken - }} - /> - {isUnknownFrom && } - - - Token to { - e.currentTarget.src = icons.unknownToken - }} - /> - {isUnknownTo && } - + + + Token from { + e.currentTarget.src = icons.unknownToken + }} + /> + {isUnknownFrom && } + + + Token to { + e.currentTarget.src = icons.unknownToken + }} + /> + {isUnknownTo && } - )} + {shortenAddress(symbolFrom ?? '')}/{shortenAddress(symbolTo ?? '')} @@ -162,7 +160,7 @@ const PoolListItem: React.FC = ({ - {!isSm ? ( + {!isSmd ? ( {`${apr > 1000 ? '>1000%' : apr === 0 ? '-' : apr.toFixed(2) + '%'}`} = ({ {fee}% {`$${formatNumber(volume)}`} {`$${formatNumber(TVL)}`} - {!isSm && ( + {!isMd && (