Skip to content

I
interface
Commit b39aeeb8 authored by Noah Zinsmeister's avatar Noah Zinsmeister
Browse files
Options

fix for inactive positions

parent 660c3552
Show whitespace changes
Inline Side-by-side
Showing with 47 additions and 87 deletions
src/components/Badge/RangeBadge.tsx
View file @ b39aeeb8
......@@ -33,15 +33,27 @@ export const DarkBadge = styled.div`
padding: 4px 6px;
`
export default function RangeBadge({ inRange }: { inRange?: boolean }) {
export default function RangeBadge({
removed,
inRange,
}: {
removed: boolean | undefined
inRange: boolean | undefined
}) {
const { t } = useTranslation()
return (
<BadgeWrapper>
{inRange ? (
<MouseoverTooltip
text={`The price of this pair is within your selected range. Your positions is earning fees.`}
>
{removed ? (
<MouseoverTooltip text={`Your position has 0 liquidity, and is not earning fees.`}>
<Badge variant={BadgeVariant.WARNING_OUTLINE}>
<AlertCircle width={14} height={14} />
&nbsp;
<BadgeText>{t('Inactive')}</BadgeText>
</Badge>
</MouseoverTooltip>
) : inRange ? (
<MouseoverTooltip text={`The price of this pool is within your selected range. Your position is earning fees.`}>
<Badge variant={BadgeVariant.DEFAULT}>
<ActiveDot /> &nbsp;
<BadgeText>{t('In range')}</BadgeText>
......@@ -49,7 +61,7 @@ export default function RangeBadge({ inRange }: { inRange?: boolean }) {
</MouseoverTooltip>
) : (
<MouseoverTooltip
text={`The price of this pair is outside of your selected range. Your positions is not earning fees.`}
text={`The price of this pool is outside of your selected range. Your position is not earning fees.`}
>
<Badge variant={BadgeVariant.WARNING}>
<AlertCircle width={14} height={14} />
......
src/components/PositionListItem/index.tsx
View file @ b39aeeb8
import React, { useMemo, useState } from 'react'
import { Position } from '@uniswap/v3-sdk'
import Badge, { BadgeVariant } from 'components/Badge'
import Badge from 'components/Badge'
import DoubleCurrencyLogo from 'components/DoubleLogo'
import { usePool } from 'hooks/usePools'
import { useToken } from 'hooks/Tokens'
import { AlertCircle } from 'react-feather'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import styled from 'styled-components'
import { HideSmall, MEDIA_WIDTHS, SmallOnly } from 'theme'
......@@ -15,16 +13,9 @@ import { formatPrice } from 'utils/formatTokenAmount'
import Loader from 'components/Loader'
import { unwrappedToken } from 'utils/wrappedCurrency'
import { DAI, USDC, USDT, WBTC } from '../../constants'
import { MouseoverTooltip } from '../Tooltip'
import RangeBadge from 'components/Badge/RangeBadge'
import { RowFixed } from 'components/Row'
const ActiveDot = styled.span`
background-color: ${({ theme }) => theme.success};
border-radius: 50%;
height: 8px;
width: 8px;
margin-right: 4px;
`
const Row = styled(Link)`
align-items: center;
border-radius: 20px;
......@@ -65,9 +56,7 @@ const BadgeText = styled.div`
font-size: 12px;
`};
`
const BadgeWrapper = styled.div`
font-size: 14px;
`
const DataLineItem = styled.div`
font-size: 14px;
`
......@@ -185,8 +174,6 @@ export function getPriceOrderingFromPositionForUI(
}
export default function PositionListItem({ positionDetails }: PositionListItemProps) {
const { t } = useTranslation()
const {
token0: token0Address,
token1: token1Address,
......@@ -228,11 +215,7 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
;[priceLower, priceUpper, base, quote] = [priceUpper?.invert(), priceLower?.invert(), quote, base]
}
const quotePrice = useMemo(() => {
return manuallyInverted
? position?.pool.priceOf(position?.pool.token0)
: position?.pool.priceOf(position?.pool.token1)
}, [manuallyInverted, position?.pool])
const removed = liquidity?.eq(0)
return (
<Row to={positionSummaryLink}>
......@@ -247,36 +230,7 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
<BadgeText>{new Percent(feeAmount, 1_000_000).toSignificant()}%</BadgeText>
</Badge>
</PrimaryPositionIdData>
<BadgeWrapper>
{outOfRange ? (
<MouseoverTooltip
text={`The price of this pair is outside of your selected range. Your positions is not earning fees. Current price: ${quotePrice?.toSignificant(
6
)} ${manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} / ${
manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol
}`}
>
<Badge variant={BadgeVariant.WARNING}>
<AlertCircle width={14} height={14} style={{ marginRight: '' }} />
&nbsp;
<BadgeText>{t('Out of range')}</BadgeText>
</Badge>
</MouseoverTooltip>
) : (
<MouseoverTooltip
text={`The price of this pair is within your selected range. Your positions is earning fees. Current price: ${quotePrice?.toSignificant(
6
)} ${manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} / ${
manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol
}`}
>
<Badge variant={BadgeVariant.DEFAULT}>
<ActiveDot /> &nbsp;
<BadgeText>{t('In range')}</BadgeText>
</Badge>
</MouseoverTooltip>
)}
</BadgeWrapper>
<RangeBadge removed={removed} inRange={!outOfRange} />
</RowFixed>
{priceLower && priceUpper ? (
......
src/components/PositionPreview/index.tsx
View file @ b39aeeb8
......@@ -13,6 +13,7 @@ import RateToggle from 'components/RateToggle'
import DoubleCurrencyLogo from 'components/DoubleLogo'
import RangeBadge from 'components/Badge/RangeBadge'
import { ThemeContext } from 'styled-components'
import { JSBI } from '@uniswap/v2-sdk'
export const PositionPreview = ({
position,
......@@ -55,6 +56,8 @@ export const PositionPreview = ({
setBaseCurrency(quoteCurrency)
}, [quoteCurrency])
const removed = position?.liquidity && JSBI.equal(position?.liquidity, JSBI.BigInt(0))
return (
<AutoColumn gap="md" style={{ marginTop: '0.5rem' }}>
<RowBetween style={{ marginBottom: '0.5rem' }}>
......@@ -69,7 +72,7 @@ export const PositionPreview = ({
{currency0?.symbol} / {currency1?.symbol}
</TYPE.label>
</RowFixed>
<RangeBadge inRange={inRange} />
<RangeBadge removed={removed} inRange={inRange} />
</RowBetween>
<LightCard>
......
src/pages/AddLiquidity/styled.tsx
View file @ b39aeeb8
import styled from 'styled-components'
import { AutoColumn } from 'components/Column'
import CurrencyInputPanel from 'components/CurrencyInputPanel'
import Card, { DarkGreyCard } from 'components/Card'
import { DarkGreyCard } from 'components/Card'
import Input from 'components/NumericalInput'
export const Wrapper = styled.div`
......@@ -24,16 +24,6 @@ export const ScrollablePage = styled.div`
flex-direction: row;
`
export const RangeBadge = styled(Card)<{ inRange?: boolean }>`
width: fit-content;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
padding: 4px 6px;
color: ${({ theme }) => theme.black};
background-color: ${({ inRange, theme }) => (inRange ? theme.green1 : theme.yellow2)};
`
export const FixedPreview = styled.div`
position: relative;
padding: 16px;
......@@ -49,8 +39,8 @@ export const FixedPreview = styled.div`
`
export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>`
opacity: ${({ disabled }) => (disabled ? '0.3' : '1')}
pointer-events: ${({ disabled }) => (disabled ? 'none' : 'initial')}
opacity: ${({ disabled }) => (disabled ? '0.3' : '1')};
pointer-events: ${({ disabled }) => (disabled ? 'none' : 'initial')};
`
export const CurrencyDropdown = styled(CurrencyInputPanel)`
......
src/pages/Pool/PositionPage.tsx
View file @ b39aeeb8
......@@ -194,6 +194,8 @@ export function PositionPage({
const { token0: token0Address, token1: token1Address, fee: feeAmount, liquidity, tickLower, tickUpper, tokenId } =
positionDetails || {}
const removed = liquidity?.eq(0)
const token0 = useToken(token0Address)
const token1 = useToken(token1Address)
......@@ -236,9 +238,6 @@ export function PositionPage({
: undefined
}, [inverted, pool, priceLower, priceUpper])
// really can't figure out why i have to do this, getting conditional hook call errors otherwise
const WORKAROUND = typeof ratio === 'number' ? (inverted ? 100 - ratio : ratio) : undefined
// fees
const [feeValue0, feeValue1] = useV3PositionFees(pool ?? undefined, positionDetails)
......@@ -408,7 +407,7 @@ export function PositionPage({
<Badge style={{ marginRight: '8px' }}>
<BadgeText>{new Percent(feeAmount, 1_000_000).toSignificant()}%</BadgeText>
</Badge>
<RangeBadge inRange={inRange} />
<RangeBadge removed={removed} inRange={inRange} />
</RowFixed>
{ownsNFT && (
<RowFixed>
......@@ -424,7 +423,7 @@ export function PositionPage({
{t('Add Liquidity')}
</ButtonGray>
) : null}
{tokenId && (
{tokenId && !removed ? (
<ResponsiveButtonPrimary
as={Link}
to={`/remove/${tokenId}`}
......@@ -434,7 +433,7 @@ export function PositionPage({
>
{t('Remove Liquidity')}
</ResponsiveButtonPrimary>
)}
) : null}
</RowFixed>
)}
</ResponsiveRow>
......@@ -498,13 +497,13 @@ export function PositionPage({
<TYPE.main>
{inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
</TYPE.main>
{typeof ratio === 'number' && (
{typeof ratio === 'number' && !removed ? (
<DarkGreyCard padding="4px 6px" style={{ width: 'fit-content', marginLeft: '8px' }}>
<TYPE.main color={theme.text2} fontSize={11}>
{inverted ? ratio : 100 - ratio}%
</TYPE.main>
</DarkGreyCard>
)}
) : null}
</RowFixed>
</RowBetween>
<RowBetween>
......@@ -516,13 +515,13 @@ export function PositionPage({
<TYPE.main>
{inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
</TYPE.main>
{typeof ratio === 'number' && (
{typeof ratio === 'number' && !removed ? (
<DarkGreyCard padding="4px 6px" style={{ width: 'fit-content', marginLeft: '8px' }}>
<TYPE.main color={theme.text2} fontSize={11}>
{WORKAROUND}%
{inverted ? 100 - ratio : ratio}%
</TYPE.main>
</DarkGreyCard>
)}
) : null}
</RowFixed>
</RowBetween>
</AutoColumn>
......@@ -621,7 +620,7 @@ export function PositionPage({
</Label>
<HideExtraSmall>
<>
<RangeBadge inRange={inRange} />
<RangeBadge removed={removed} inRange={inRange} />
<span style={{ width: '8px' }} />
</>
</HideExtraSmall>
......
src/pages/RemoveLiquidity/V3.tsx
View file @ b39aeeb8
......@@ -28,12 +28,12 @@ import Loader from 'components/Loader'
import { useToken } from 'hooks/Tokens'
import { unwrappedToken } from 'utils/wrappedCurrency'
import DoubleCurrencyLogo from 'components/DoubleLogo'
import { RangeBadge } from 'pages/AddLiquidity/styled'
import { Break } from 'components/earn/styled'
import { NonfungiblePositionManager } from '@uniswap/v3-sdk'
import { calculateGasMargin } from 'utils'
import useTheme from 'hooks/useTheme'
import { AddRemoveTabs } from 'components/NavigationTabs'
import RangeBadge from 'components/Badge/RangeBadge'
export const UINT128MAX = BigNumber.from(2).pow(128).sub(1)
......@@ -83,6 +83,8 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
} = useDerivedV3BurnInfo(position)
const { onPercentSelect } = useBurnV3ActionHandlers()
const removed = position?.liquidity?.eq(0)
// boilerplate for the slider
const [percentForSlider, onPercentSelectForSlider] = useDebouncedChangeHandler(percent, onPercentSelect)
......@@ -281,7 +283,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<DoubleCurrencyLogo currency0={currency1} currency1={currency0} size={20} margin={true} />
<TYPE.label ml="10px" fontSize="20px">{`${currency0?.symbol}/${currency1?.symbol}`}</TYPE.label>
</RowFixed>
<RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
<RangeBadge removed={removed} inRange={!outOfRange} />
</RowBetween>
<LightCard>
<AutoColumn gap="md">
......@@ -363,10 +365,10 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
<AutoColumn gap="12px" style={{ flex: '1' }}>
<ButtonConfirmed
confirmed={false}
disabled={percent === 0 || !liquidityValue0}
disabled={removed || percent === 0 || !liquidityValue0}
onClick={() => setShowConfirm(true)}
>
{error ?? 'Remove'}
{removed ? 'Inactive' : error ?? 'Remove'}
</ButtonConfirmed>
</AutoColumn>
</div>
......
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