diff --git a/src/pages/Pool/PositionPage.tsx b/src/pages/Pool/PositionPage.tsx index 400c7c72a6..7713d078a4 100644 --- a/src/pages/Pool/PositionPage.tsx +++ b/src/pages/Pool/PositionPage.tsx @@ -23,7 +23,7 @@ import { currencyId } from 'utils/currencyId' import { formatTokenAmount } from 'utils/formatTokenAmount' import { useV3PositionFees } from 'hooks/useV3PositionFees' import { BigNumber } from '@ethersproject/bignumber' -import { WETH9, Currency, CurrencyAmount, Percent, Fraction } from '@uniswap/sdk-core' +import { WETH9, Currency, CurrencyAmount, Percent, Fraction, Price } from '@uniswap/sdk-core' import { useActiveWeb3React } from 'hooks' import { useV3NFTPositionManagerContract } from 'hooks/useContract' import { useIsTransactionPending, useTransactionAdder } from 'state/transactions/hooks' @@ -104,11 +104,13 @@ function CurrentPriceCard({ pool, currencyQuote, currencyBase, + ratio, }: { inverted?: boolean pool?: Pool | null currencyQuote?: Currency currencyBase?: Currency + ratio?: number }) { const { t } = useTranslation() if (!pool || !currencyQuote || !currencyBase) { @@ -122,11 +124,34 @@ function CurrentPriceCard({ {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)} {currencyQuote?.symbol} + {typeof ratio === 'number' && ( + + Your position is {ratio}% {currencyBase?.symbol} and{' '} + {100 - ratio}% {currencyQuote?.symbol} + + )} ) } +function getRatio(lower: Price, current: Price, upper: Price) { + try { + const a = Number.parseFloat(lower.toSignificant(15)) + const b = Number.parseFloat(upper.toSignificant(15)) + const c = Number.parseFloat(current.toSignificant(15)) + + const ratio = Math.floor(((Math.sqrt(a * b) - Math.sqrt(b * c)) / (c - Math.sqrt(b * c))) * 100) + if (ratio < 0 || ratio > 100) { + throw Error('Precision error') + } + + return ratio + } catch { + return undefined + } +} + export function PositionPage({ match: { params: { tokenId: tokenIdFromUrl }, @@ -179,6 +204,15 @@ export function PositionPage({ // const below = pool && typeof tickLower === 'number' ? pool.tickCurrent < tickLower : false // const above = pool && typeof tickUpper === 'number' ? pool.tickCurrent >= tickUpper : false + const ratio = + priceLower && pool && priceUpper + ? getRatio( + inverted ? priceUpper.invert() : priceLower, + pool.token0Price, + inverted ? priceLower.invert() : priceUpper + ) + : undefined + // fees const [feeValue0, feeValue1] = useV3PositionFees(pool ?? undefined, positionDetails) @@ -513,6 +547,7 @@ export function PositionPage({ pool={pool} currencyQuote={currencyQuote} currencyBase={currencyBase} + ratio={typeof ratio === 'number' && inRange ? (inverted ? 100 - ratio : ratio) : undefined} />