Commit 6e52a435 authored by Moody Salem's avatar Moody Salem

fix: remove the click to flip price on the position list item

fixes https://github.com/Uniswap/uniswap-interface/issues/1436
parent d4c5d3e8
...@@ -3,7 +3,6 @@ import React, { useState } from 'react' ...@@ -3,7 +3,6 @@ import React, { useState } from 'react'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
const TextWrapper = styled.span<{ margin: boolean; link?: boolean; fontSize?: string; adjustSize?: boolean }>` const TextWrapper = styled.span<{ margin: boolean; link?: boolean; fontSize?: string; adjustSize?: boolean }>`
cursor: auto;
margin-left: ${({ margin }) => margin && '4px'}; margin-left: ${({ margin }) => margin && '4px'};
color: ${({ theme, link }) => (link ? theme.blue1 : theme.text1)}; color: ${({ theme, link }) => (link ? theme.blue1 : theme.text1)};
font-size: ${({ fontSize }) => fontSize ?? 'inherit'}; font-size: ${({ fontSize }) => fontSize ?? 'inherit'};
...@@ -22,7 +21,7 @@ const HoverInlineText = ({ ...@@ -22,7 +21,7 @@ const HoverInlineText = ({
link, link,
...rest ...rest
}: { }: {
text: string text?: string
maxCharacters?: number maxCharacters?: number
margin?: boolean margin?: boolean
adjustSize?: boolean adjustSize?: boolean
......
import React, { useMemo, useState } from 'react' import React, { useMemo } from 'react'
import { Position } from '@uniswap/v3-sdk' import { Position } from '@uniswap/v3-sdk'
import Badge from 'components/Badge' import Badge from 'components/Badge'
import DoubleCurrencyLogo from 'components/DoubleLogo' import DoubleCurrencyLogo from 'components/DoubleLogo'
...@@ -17,10 +17,12 @@ import { RowFixed } from 'components/Row' ...@@ -17,10 +17,12 @@ import { RowFixed } from 'components/Row'
import HoverInlineText from 'components/HoverInlineText' import HoverInlineText from 'components/HoverInlineText'
import { DAI, USDC, USDT, WBTC } from '../../constants/tokens' import { DAI, USDC, USDT, WBTC } from '../../constants/tokens'
const Row = styled(Link)` const LinkRow = styled(Link)`
align-items: center; align-items: center;
border-radius: 20px; border-radius: 20px;
display: flex; display: flex;
cursor: pointer;
user-select: none;
justify-content: space-between; justify-content: space-between;
color: ${({ theme }) => theme.text1}; color: ${({ theme }) => theme.text1};
margin: 8px 0; margin: 8px 0;
...@@ -50,6 +52,7 @@ const Row = styled(Link)` ...@@ -50,6 +52,7 @@ const Row = styled(Link)`
row-gap: 24px; row-gap: 24px;
`}; `};
` `
const BadgeText = styled.div` const BadgeText = styled.div`
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
...@@ -65,7 +68,6 @@ const DataLineItem = styled.div` ...@@ -65,7 +68,6 @@ const DataLineItem = styled.div`
const RangeLineItem = styled(DataLineItem)` const RangeLineItem = styled(DataLineItem)`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
cursor: pointer;
align-items: center; align-items: center;
justify-self: flex-end; justify-self: flex-end;
...@@ -199,25 +201,20 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr ...@@ -199,25 +201,20 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
}, [liquidity, pool, tickLower, tickUpper]) }, [liquidity, pool, tickLower, tickUpper])
// prices // prices
let { priceLower, priceUpper, base, quote } = getPriceOrderingFromPositionForUI(position) const { priceLower, priceUpper, quote, base } = getPriceOrderingFromPositionForUI(position)
const inverted = token1 ? base?.equals(token1) : undefined
const currencyQuote = inverted ? currency1 : currency0 const currencyQuote = quote && unwrappedToken(quote)
const currencyBase = inverted ? currency0 : currency1 const currencyBase = base && unwrappedToken(base)
// check if price is within range // check if price is within range
const outOfRange: boolean = pool ? pool.tickCurrent < tickLower || pool.tickCurrent >= tickUpper : false const outOfRange: boolean = pool ? pool.tickCurrent < tickLower || pool.tickCurrent >= tickUpper : false
const positionSummaryLink = '/pool/' + positionDetails.tokenId const positionSummaryLink = '/pool/' + positionDetails.tokenId
const [manuallyInverted, setManuallyInverted] = useState(true)
if (manuallyInverted) {
;[priceLower, priceUpper, base, quote] = [priceUpper?.invert(), priceLower?.invert(), quote, base]
}
const removed = liquidity?.eq(0) const removed = liquidity?.eq(0)
return ( return (
<Row to={positionSummaryLink}> <LinkRow to={positionSummaryLink}>
<RowFixed> <RowFixed>
<PrimaryPositionIdData> <PrimaryPositionIdData>
<DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={18} margin /> <DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={18} margin />
...@@ -233,20 +230,11 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr ...@@ -233,20 +230,11 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
</RowFixed> </RowFixed>
{priceLower && priceUpper ? ( {priceLower && priceUpper ? (
<> <RangeLineItem>
<RangeLineItem
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
setManuallyInverted(!manuallyInverted)
}}
>
<RangeText> <RangeText>
<ExtentsText>Min: </ExtentsText> <ExtentsText>Min: </ExtentsText>
{formatPrice(priceLower, 5)}{' '} {formatPrice(priceLower, 5)} <HoverInlineText text={currencyQuote?.symbol} /> {' per '}{' '}
<HoverInlineText text={manuallyInverted ? currencyQuote?.symbol ?? '' : currencyBase?.symbol ?? ''} />{' '} <HoverInlineText text={currencyBase?.symbol ?? ''} />
{' per '}{' '}
<HoverInlineText text={manuallyInverted ? currencyBase?.symbol ?? '' : currencyQuote?.symbol ?? ''} />
</RangeText>{' '} </RangeText>{' '}
<HideSmall> <HideSmall>
<DoubleArrow></DoubleArrow>{' '} <DoubleArrow></DoubleArrow>{' '}
...@@ -256,19 +244,13 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr ...@@ -256,19 +244,13 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
</SmallOnly> </SmallOnly>
<RangeText> <RangeText>
<ExtentsText>Max:</ExtentsText> <ExtentsText>Max:</ExtentsText>
{formatPrice(priceUpper, 5)}{' '} {formatPrice(priceUpper, 5)} <HoverInlineText text={currencyQuote?.symbol} /> {' per '}{' '}
<HoverInlineText text={manuallyInverted ? currencyQuote?.symbol ?? '' : currencyBase?.symbol ?? ''} />{' '} <HoverInlineText maxCharacters={10} text={currencyBase?.symbol} />
{' per '}{' '} </RangeText>
<HoverInlineText
maxCharacters={10}
text={manuallyInverted ? currencyBase?.symbol ?? '' : currencyQuote?.symbol ?? ''}
/>
</RangeText>{' '}
</RangeLineItem> </RangeLineItem>
</>
) : ( ) : (
<Loader /> <Loader />
)} )}
</Row> </LinkRow>
) )
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment