Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added period switch for pairs #292

Open
wants to merge 5 commits into
base: v2
Choose a base branch
from
+168 −49
Open

added period switch for pairs #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
55d1e94
added period switch for pairs
palevoo Oct 6, 2020
4738412
use initial reserveUSD for given period, where possible, else fallbac…
palevoo Oct 7, 2020
3274ee4
added % change and initial liq to account positions preview table
palevoo Oct 7, 2020
c420ec4
fixed sort by fees in account positions
palevoo Oct 7, 2020
dc364e1
quick fix for closed positions, while i adjust getLPReturnsOnPair
palevoo Oct 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 35 additions & 36 deletions src/components/PairList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import DoubleTokenLogo from '../DoubleLogo'
import FormattedName from '../FormattedName'
import QuestionHelper from '../QuestionHelper'
import { TYPE } from '../../Theme'
import { PERIODS, PROVIDER_FEE } from '../../constants'

dayjs.extend(utc)

Expand Down Expand Up @@ -64,13 +65,13 @@ const DashGrid = styled.div`

@media screen and (min-width: 1080px) {
padding: 0 1.125rem;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: ' name liq vol volWeek fees apy';
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
grid-template-areas: ' name liq vol fees apy';
}

@media screen and (min-width: 1200px) {
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: ' name liq vol volWeek fees apy';
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
grid-template-areas: ' name liq vol fees apy';
}
`

Expand Down Expand Up @@ -103,19 +104,23 @@ const DataText = styled(Flex)`
const SORT_FIELD = {
LIQ: 0,
VOL: 1,
VOL_7DAYS: 3,
FEES: 4,
APY: 5,
}

const FIELD_TO_VALUE = {
[SORT_FIELD.LIQ]: 'trackedReserveUSD', // sort with tracked volume only
[SORT_FIELD.VOL]: 'oneDayVolumeUSD',
[SORT_FIELD.VOL_7DAYS]: 'oneWeekVolumeUSD',
[SORT_FIELD.FEES]: 'oneDayVolumeUSD',
}

function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
const FIELD_TO_VALUE_WEEK = {
[SORT_FIELD.LIQ]: 'trackedReserveUSD', // sort with tracked volume only
[SORT_FIELD.VOL]: 'oneWeekVolumeUSD',
[SORT_FIELD.FEES]: 'oneWeekVolumeUSD',
}

function PairList({ pairs, color, disbaleLinks, maxItems = 10, period }) {
const below600 = useMedia('(max-width: 600px)')
const below740 = useMedia('(max-width: 740px)')
const below1080 = useMedia('(max-width: 1080px)')
Expand Down Expand Up @@ -148,9 +153,12 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
const pairData = pairs[pairAddress]

if (pairData && pairData.token0 && pairData.token1) {
const periodVolume = period === PERIODS.DAY ? pairData.oneDayVolumeUSD : pairData.oneWeekVolumeUSD
const liquidity = formattedNum(pairData.reserveUSD, true)
const volume = formattedNum(pairData.oneDayVolumeUSD, true)
const apy = formattedPercent((pairData.oneDayVolumeUSD * 0.003 * 365 * 100) / pairData.reserveUSD)
const volume = formattedNum(periodVolume, true)
const dailyVolume = period === PERIODS.DAY ? periodVolume : periodVolume / 7
const reserve = period === PERIODS.WEEK ? pairData.reserveUSDWeekAgo : pairData.reserveUSDDayAgo
const apy = formattedPercent((dailyVolume * PROVIDER_FEE * 365 * 100) / reserve)

return (
<DashGrid style={{ height: '48px' }} disbaleLinks={disbaleLinks} focus={true}>
Expand All @@ -173,8 +181,7 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
</DataText>
<DataText area="liq">{liquidity}</DataText>
<DataText area="vol">{volume}</DataText>
{!below1080 && <DataText area="volWeek">{formattedNum(pairData.oneWeekVolumeUSD, true)}</DataText>}
{!below1080 && <DataText area="fees">{formattedNum(pairData.oneDayVolumeUSD * 0.003, true)}</DataText>}
{!below1080 && <DataText area="fees">{formattedNum(periodVolume * PROVIDER_FEE, true)}</DataText>}
{!below1080 && <DataText area="apy">{apy}</DataText>}
</DashGrid>
)
Expand All @@ -190,11 +197,16 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
const pairA = pairs[addressA]
const pairB = pairs[addressB]
if (sortedColumn === SORT_FIELD.APY) {
const apy0 = parseFloat(pairA.oneDayVolumeUSD * 0.003 * 356 * 100) / parseFloat(pairA.reserveUSD)
const apy1 = parseFloat(pairB.oneDayVolumeUSD * 0.003 * 356 * 100) / parseFloat(pairB.reserveUSD)
const vol0 = period === PERIODS.DAY ? pairA.oneDayVolumeUSD : pairA.oneWeekVolumeUSD / 7
const vol1 = period === PERIODS.DAY ? pairB.oneDayVolumeUSD : pairB.oneWeekVolumeUSD / 7
const apy0 = parseFloat(vol0 * PROVIDER_FEE * 356 * 100) / parseFloat(pairA.reserveUSD)
const apy1 = parseFloat(vol1 * PROVIDER_FEE * 356 * 100) / parseFloat(pairB.reserveUSD)
return apy0 > apy1 ? (sortDirection ? -1 : 1) * 1 : (sortDirection ? -1 : 1) * -1
}
return parseFloat(pairA[FIELD_TO_VALUE[sortedColumn]]) > parseFloat(pairB[FIELD_TO_VALUE[sortedColumn]])

const field = period === PERIODS.DAY ? FIELD_TO_VALUE[sortedColumn] : FIELD_TO_VALUE_WEEK[sortedColumn]

return parseFloat(pairA[field]) > parseFloat(pairB[field])
? (sortDirection ? -1 : 1) * 1
: (sortDirection ? -1 : 1) * -1
})
Expand Down Expand Up @@ -223,7 +235,7 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
<Flex alignItems="center" justifyContent="flexEnd">
<ClickableText
area="liq"
onClick={(e) => {
onClick={() => {
setSortedColumn(SORT_FIELD.LIQ)
setSortDirection(sortedColumn !== SORT_FIELD.LIQ ? true : !sortDirection)
}}
Expand All @@ -234,69 +246,56 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
<Flex alignItems="center">
<ClickableText
area="vol"
onClick={(e) => {
onClick={() => {
setSortedColumn(SORT_FIELD.VOL)
setSortDirection(sortedColumn !== SORT_FIELD.VOL ? true : !sortDirection)
}}
>
Volume (24hrs)
Volume
{sortedColumn === SORT_FIELD.VOL ? (!sortDirection ? '↑' : '↓') : ''}
</ClickableText>
</Flex>
{!below1080 && (
<Flex alignItems="center" justifyContent="flexEnd">
<ClickableText
area="volWeek"
onClick={(e) => {
setSortedColumn(SORT_FIELD.VOL_7DAYS)
setSortDirection(sortedColumn !== SORT_FIELD.VOL_7DAYS ? true : !sortDirection)
}}
>
Volume (7d) {sortedColumn === SORT_FIELD.VOL_7DAYS ? (!sortDirection ? '↑' : '↓') : ''}
</ClickableText>
</Flex>
)}
{!below1080 && (
<Flex alignItems="center" justifyContent="flexEnd">
<ClickableText
area="fees"
onClick={(e) => {
onClick={() => {
setSortedColumn(SORT_FIELD.FEES)
setSortDirection(sortedColumn !== SORT_FIELD.FEES ? true : !sortDirection)
}}
>
Fees (24hr) {sortedColumn === SORT_FIELD.FEES ? (!sortDirection ? '↑' : '↓') : ''}
Fees {sortedColumn === SORT_FIELD.FEES ? (!sortDirection ? '↑' : '↓') : ''}
</ClickableText>
</Flex>
)}
{!below1080 && (
<Flex alignItems="center" justifyContent="flexEnd">
<ClickableText
area="apy"
onClick={(e) => {
onClick={() => {
setSortedColumn(SORT_FIELD.APY)
setSortDirection(sortedColumn !== SORT_FIELD.APY ? true : !sortDirection)
}}
>
1y Fees / Liquidity {sortedColumn === SORT_FIELD.APY ? (!sortDirection ? '↑' : '↓') : ''}
</ClickableText>
<QuestionHelper text={'Based on 24hr volume annualized'} />
<QuestionHelper text={`Based on ${period === PERIODS.DAY ? '24hr' : 'weekly'} volume annualized`} />
</Flex>
)}
</DashGrid>
<Divider />
<List p={0}>{!pairList ? <LocalLoader /> : pairList}</List>
<PageButtons>
<div
onClick={(e) => {
onClick={() => {
setPage(page === 1 ? page : page - 1)
}}
>
<Arrow faded={page === 1 ? true : false}>←</Arrow>
</div>
<TYPE.body>{'Page ' + page + ' of ' + maxPage}</TYPE.body>
<div
onClick={(e) => {
onClick={() => {
setPage(page === maxPage ? page : page + 1)
}}
>
Expand Down
111 changes: 102 additions & 9 deletions src/components/PositionList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Link, { CustomLink } from '../Link'
import { Divider } from '../../components'
import DoubleTokenLogo from '../DoubleLogo'
import { withRouter } from 'react-router-dom'
import { formattedNum, getPoolLink } from '../../utils'
import { formattedNum, formattedPercent, getPoolLink } from '../../utils'
import { AutoColumn } from '../Column'
import { useEthPrice } from '../../contexts/GlobalData'
import { RowFixed } from '../Row'
Expand Down Expand Up @@ -44,8 +44,8 @@ const List = styled(Box)`
const DashGrid = styled.div`
display: grid;
grid-gap: 1em;
grid-template-columns: 5px 0.5fr 1fr 1fr;
grid-template-areas: 'number name uniswap return';
grid-template-columns: 5px 0.5fr 1fr 1fr 1fr 1fr;
grid-template-areas: 'number name initial uniswap change_percent return';
align-items: flex-start;
padding: 20px 0;

Expand All @@ -61,8 +61,8 @@ const DashGrid = styled.div`
}

@media screen and (min-width: 1200px) {
grid-template-columns: 35px 2.5fr 1fr 1fr;
grid-template-areas: 'number name uniswap return';
grid-template-columns: 35px 2.5fr 1fr 1fr 1fr 1fr;
grid-template-areas: 'number name initial uniswap change_percent return';
}

@media screen and (max-width: 740px) {
Expand Down Expand Up @@ -104,7 +104,11 @@ const DataText = styled(Flex)`

const SORT_FIELD = {
VALUE: 'VALUE',
VALUE_INITAL: 'VALUE_INITIAL',
UNISWAP_RETURN: 'UNISWAP_RETURN',
CHANGE: 'CHANGE',
CHANGE_PERCENTAGE: 'CHANGE_PERCENTAGE',
FEES_ACCRUED: 'FEES_ACCRUED',
}

function PositionList({ positions }) {
Expand Down Expand Up @@ -140,6 +144,9 @@ function PositionList({ positions }) {
const ListItem = ({ position, index }) => {
const poolOwnership = position.liquidityTokenBalance / position.pair.totalSupply
const valueUSD = poolOwnership * position.pair.reserveUSD
const percentageChange = position.net.return / (position.principal.usd / 100)
const percentageChangePair0 = (poolOwnership * position.pair.reserve0) / (position.principal.amount0 / 100) - 100
const percentageChangePair1 = (poolOwnership * position.pair.reserve1) / (position.principal.amount1 / 100) - 100

return (
<DashGrid style={{ opacity: poolOwnership > 0 ? 1 : 0.6 }} focus={true}>
Expand Down Expand Up @@ -174,6 +181,35 @@ function PositionList({ positions }) {
</RowFixed>
</AutoColumn>
</DataText>
{!below740 && (
<DataText area="initial">
{poolOwnership > 0 && (
<AutoColumn gap="12px" justify="flex-end">
<TYPE.main>{formattedNum(position.principal.usd, true, true)}</TYPE.main>
<AutoColumn gap="4px" justify="flex-end">
<RowFixed>
<TYPE.small fontWeight={400}>{formattedNum(parseFloat(position.principal.amount0))} </TYPE.small>
<FormattedName
text={position.pair.token0.symbol}
maxCharacters={below740 ? 10 : 18}
margin={true}
fontSize={'11px'}
/>
</RowFixed>
<RowFixed>
<TYPE.small fontWeight={400}>{formattedNum(parseFloat(position.principal.amount1))} </TYPE.small>
<FormattedName
text={position.pair.token1.symbol}
maxCharacters={below740 ? 10 : 18}
margin={true}
fontSize={'11px'}
/>
</RowFixed>
</AutoColumn>
</AutoColumn>
)}
</DataText>
)}
<DataText area="uniswap">
<AutoColumn gap="12px" justify="flex-end">
<TYPE.main>{formattedNum(valueUSD, true, true)}</TYPE.main>
Expand Down Expand Up @@ -203,6 +239,23 @@ function PositionList({ positions }) {
</AutoColumn>
</AutoColumn>
</DataText>
{!below740 && (
<DataText area="change_percent">
{poolOwnership > 0 && (
<AutoColumn gap="12px" justify="flex-end">
<TYPE.main>{formattedPercent(percentageChange)}</TYPE.main>
<AutoColumn gap="4px" justify="flex-end">
<RowFixed>
<TYPE.small fontWeight={400}>{formattedPercent(percentageChangePair0)}</TYPE.small>
</RowFixed>
<RowFixed>
<TYPE.small fontWeight={400}>{formattedPercent(percentageChangePair1)}</TYPE.small>
</RowFixed>
</AutoColumn>
</AutoColumn>
)}
</DataText>
)}
{!below500 && (
<DataText area="return">
<AutoColumn gap="12px" justify="flex-end">
Expand Down Expand Up @@ -255,7 +308,6 @@ function PositionList({ positions }) {
const positionsSorted =
positions &&
positions

.sort((p0, p1) => {
if (sortedColumn === SORT_FIELD.PRINCIPAL) {
return p0?.principal?.usd > p1?.principal?.usd ? (sortDirection ? -1 : 1) : sortDirection ? 1 : -1
Expand All @@ -271,6 +323,20 @@ function PositionList({ positions }) {
const bal1 = (p1.liquidityTokenBalance / p1.pair.totalSupply) * p1.pair.reserveUSD
return bal0 > bal1 ? (sortDirection ? -1 : 1) : sortDirection ? 1 : -1
}
if (sortedColumn === SORT_FIELD.VALUE_INITAL) {
const bal0 = (p0.liquidityTokenBalance / p0.pair.totalSupply) * p0.principal.usd
const bal1 = (p1.liquidityTokenBalance / p1.pair.totalSupply) * p1.principal.usd
console.log('bal0', bal0, 'bal1', bal1)
return bal0 > bal1 ? (sortDirection ? -1 : 1) : sortDirection ? 1 : -1
}
if (sortedColumn === SORT_FIELD.CHANGE_PERCENTAGE) {
const bal0 = p0.net.return / (p0.principal.usd / 100)
const bal1 = p1.net.return / (p1.principal.usd / 100)
return bal0 > bal1 ? (sortDirection ? -1 : 1) : sortDirection ? 1 : -1
}
if (sortedColumn === SORT_FIELD.FEES_ACCRUED) {
return p0?.fees?.sum > p1?.fees?.sum ? (sortDirection ? -1 : 1) : sortDirection ? 1 : -1
}
return 1
})
.slice(ITEMS_PER_PAGE * (page - 1), page * ITEMS_PER_PAGE)
Expand All @@ -294,6 +360,20 @@ function PositionList({ positions }) {
<Flex alignItems="flex-start" justifyContent="flex-start">
<TYPE.main area="number">Name</TYPE.main>
</Flex>
{!below740 && (
<Flex alignItems="center" justifyContent="flexEnd">
<ClickableText
area="initial"
onClick={(e) => {
setSortedColumn(SORT_FIELD.VALUE_INITIAL)
setSortDirection(sortedColumn !== SORT_FIELD.VALUE_INITIAL ? true : !sortDirection)
}}
>
{below740 ? 'Initial' : 'Initial liquidity'}{' '}
{sortedColumn === SORT_FIELD.VALUE_INITAL ? (!sortDirection ? '↑' : '↓') : ''}
</ClickableText>
</Flex>
)}
<Flex alignItems="center" justifyContent="flexEnd">
<ClickableText
area="uniswap"
Expand All @@ -305,17 +385,30 @@ function PositionList({ positions }) {
{below740 ? 'Value' : 'Liquidity'} {sortedColumn === SORT_FIELD.VALUE ? (!sortDirection ? '↑' : '↓') : ''}
</ClickableText>
</Flex>
{!below740 && (
<Flex alignItems="center" justifyContent="flexEnd">
<ClickableText
area="change_percent"
onClick={() => {
setSortedColumn(SORT_FIELD.CHANGE_PERCENTAGE)
setSortDirection(sortedColumn !== SORT_FIELD.CHANGE_PERCENTAGE ? true : !sortDirection)
}}
>
Change % {sortedColumn === SORT_FIELD.CHANGE_PERCENTAGE ? (!sortDirection ? '↑' : '↓') : ''}
</ClickableText>
</Flex>
)}
{!below500 && (
<Flex alignItems="center" justifyContent="flexEnd">
<ClickableText
area="return"
onClick={() => {
setSortedColumn(SORT_FIELD.UNISWAP_RETURN)
setSortDirection(sortedColumn !== SORT_FIELD.UNISWAP_RETURN ? true : !sortDirection)
setSortedColumn(SORT_FIELD.FEES_ACCRUED)
setSortDirection(sortedColumn !== SORT_FIELD.FEES_ACCRUED ? true : !sortDirection)
}}
>
{below740 ? 'Fees' : 'Total Fees Earned'}{' '}
{sortedColumn === SORT_FIELD.UNISWAP_RETURN ? (!sortDirection ? '↑' : '↓') : ''}
{sortedColumn === SORT_FIELD.FEES_ACCRUED ? (!sortDirection ? '↑' : '↓') : ''}
</ClickableText>
</Flex>
)}
Expand Down
7 changes: 7 additions & 0 deletions src/constants/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,10 @@ export const PAIR_BLACKLIST = ['0xb6a741f37d6e455ebcc9f17e2c16d0586c3f57a5']
* For tokens that cause erros on fee calculations
*/
export const FEE_WARNING_TOKENS = ['0xd46ba6d942050d489dbd938a2c909a5d5039a161']

export const PERIODS = {
WEEK: 'WEEK',
DAY: 'DAY',
}

export const PROVIDER_FEE = 0.003
Loading