From 257fe6be30c2a9f002d939d974181bb4720adbf9 Mon Sep 17 00:00:00 2001 From: zielvna Date: Thu, 5 Dec 2024 21:43:42 +0100 Subject: [PATCH 1/5] add apr to stats --- src/components/Stats/PoolListItem/PoolListItem.tsx | 14 +++++++++++--- src/components/Stats/PoolListItem/style.ts | 10 ++++++++++ src/utils/uiUtils.ts | 5 +++++ 3 files changed, 26 insertions(+), 3 deletions(-) diff --git a/src/components/Stats/PoolListItem/PoolListItem.tsx b/src/components/Stats/PoolListItem/PoolListItem.tsx index 2a5e91f4..26bad773 100644 --- a/src/components/Stats/PoolListItem/PoolListItem.tsx +++ b/src/components/Stats/PoolListItem/PoolListItem.tsx @@ -14,6 +14,7 @@ import { DECIMAL } from '@invariant-labs/sdk/lib/utils' import { TooltipHover } from '@components/TooltipHover/TooltipHover' import { VariantType } from 'notistack' import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined' +import { apyToApr } from '@utils/uiUtils' interface IProps { TVL?: number @@ -117,6 +118,8 @@ const PoolListItem: React.FC = ({ }) } + const apr = apyToApr(apy) + return ( {displayType === 'token' ? ( @@ -165,8 +168,12 @@ const PoolListItem: React.FC = ({ {!isSm ? ( - - {`${apy > 1000 ? '>1000%' : apy === 0 ? '-' : apy.toFixed(2) + '%'}`} + + {`${apr > 1000 ? '>1000%' : apr === 0 ? '-' : apr.toFixed(2) + '%'}`} + {`${apy > 1000 ? '>1000%' : apy === 0 ? '-' : apy.toFixed(2) + '%'}`} {apy !== 0 && ( = ({ {!isSm ? ( { if (sortType === SortTypePoolList.APY_DESC) { @@ -268,7 +276,7 @@ const PoolListItem: React.FC = ({ onSort?.(SortTypePoolList.APY_DESC) } }}> - 7-days APY + APR APY {sortType === SortTypePoolList.APY_ASC ? ( ) : sortType === SortTypePoolList.APY_DESC ? ( diff --git a/src/components/Stats/PoolListItem/style.ts b/src/components/Stats/PoolListItem/style.ts index 43e01cab..521fbb43 100644 --- a/src/components/Stats/PoolListItem/style.ts +++ b/src/components/Stats/PoolListItem/style.ts @@ -173,5 +173,15 @@ export const useStyles = makeStyles()(() => ({ color: colors.invariant.lightHover } } + }, + row: { + display: 'flex', + gap: 4, + fontSize: 30, + height: 32 + }, + apy: { + fontSize: 12, + alignSelf: 'flex-end' } })) diff --git a/src/utils/uiUtils.ts b/src/utils/uiUtils.ts index 6448da57..33116eb7 100644 --- a/src/utils/uiUtils.ts +++ b/src/utils/uiUtils.ts @@ -35,3 +35,8 @@ export const importantStyles = (styleObject: { [key: string]: string | number }) }), styleObject ) + +export const apyToApr = (apy: number) => { + const dailyRate = Math.pow(1 + apy, 1 / 365) - 1 + return dailyRate * 365 +} From 790c5e5f0048f9d429d33cca77124e256c31e8d6 Mon Sep 17 00:00:00 2001 From: zielvna Date: Fri, 6 Dec 2024 10:10:15 +0100 Subject: [PATCH 2/5] update apr calculations --- src/utils/uiUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/uiUtils.ts b/src/utils/uiUtils.ts index 33116eb7..0b940bc6 100644 --- a/src/utils/uiUtils.ts +++ b/src/utils/uiUtils.ts @@ -37,6 +37,6 @@ export const importantStyles = (styleObject: { [key: string]: string | number }) ) export const apyToApr = (apy: number) => { - const dailyRate = Math.pow(1 + apy, 1 / 365) - 1 - return dailyRate * 365 + const dailyRate = Math.pow(1 + apy / 100, 1 / 365) - 1 + return dailyRate * 365 * 100 } From d195fd2bf6cd787e72eeea853b25cf9e82e05eb8 Mon Sep 17 00:00:00 2001 From: zielvna Date: Fri, 6 Dec 2024 10:17:12 +0100 Subject: [PATCH 3/5] remove tooltip from apr/apy column in stats --- .../Stats/PoolListItem/PoolListItem.tsx | 37 +------------------ 1 file changed, 1 insertion(+), 36 deletions(-) diff --git a/src/components/Stats/PoolListItem/PoolListItem.tsx b/src/components/Stats/PoolListItem/PoolListItem.tsx index 26bad773..1dfb9253 100644 --- a/src/components/Stats/PoolListItem/PoolListItem.tsx +++ b/src/components/Stats/PoolListItem/PoolListItem.tsx @@ -173,42 +173,7 @@ const PoolListItem: React.FC = ({ {`${apy > 1000 ? '>1000%' : apy === 0 ? '-' : apy.toFixed(2) + '%'}`} - {apy !== 0 && ( - - Pool APY - - Pool fees: {`${apyData.fees > 1000 ? '>1000' : apyData.fees.toFixed(2)}%`} - {apyData.accumulatedFarmsAvg > 0 ? ( - <> -
+ All farms rewards with single tick position:{' '} - {`${ - apyData.accumulatedFarmsSingleTick > 1000 - ? '>1000' - : apyData.accumulatedFarmsSingleTick.toFixed(2) - }%`} -
- (All farms rewards with average position:{' '} - {`${ - apyData.accumulatedFarmsAvg > 1000 - ? '>1000' - : apyData.accumulatedFarmsAvg.toFixed(2) - }%`} - ) - - ) : null} - - - } - placement='bottom' - classes={{ - tooltip: classes.liquidityTooltip - }}> - i - - )} + }>{`${apy > 1000 ? '>1000%' : apy === 0 ? '' : apy.toFixed(2) + '%'}`} ) : null} {fee}% From 85f2da286525db915fcb6f6fb09f0354ecb1b40a Mon Sep 17 00:00:00 2001 From: zielvna Date: Fri, 6 Dec 2024 10:35:35 +0100 Subject: [PATCH 4/5] fix build --- src/components/Stats/PoolListItem/PoolListItem.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/Stats/PoolListItem/PoolListItem.tsx b/src/components/Stats/PoolListItem/PoolListItem.tsx index 1dfb9253..4008addb 100644 --- a/src/components/Stats/PoolListItem/PoolListItem.tsx +++ b/src/components/Stats/PoolListItem/PoolListItem.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from 'react' import { theme } from '@static/theme' import { useStyles } from './style' -import { Box, Grid, Tooltip, Typography, useMediaQuery } from '@mui/material' +import { Box, Grid, Typography, useMediaQuery } from '@mui/material' import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp' import { useNavigate } from 'react-router-dom' @@ -61,11 +61,6 @@ const PoolListItem: React.FC = ({ addressTo, network, apy = 0, - apyData = { - fees: 0, - accumulatedFarmsAvg: 0, - accumulatedFarmsSingleTick: 0 - }, isUnknownFrom, isUnknownTo, poolAddress, From cc2cd3e9c0645291cf1d41b516b1e95621e25c5e Mon Sep 17 00:00:00 2001 From: zielvna Date: Fri, 6 Dec 2024 11:07:21 +0100 Subject: [PATCH 5/5] change apy percentage color to gray --- src/components/Stats/PoolListItem/style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Stats/PoolListItem/style.ts b/src/components/Stats/PoolListItem/style.ts index 521fbb43..44900fb1 100644 --- a/src/components/Stats/PoolListItem/style.ts +++ b/src/components/Stats/PoolListItem/style.ts @@ -182,6 +182,7 @@ export const useStyles = makeStyles()(() => ({ }, apy: { fontSize: 12, - alignSelf: 'flex-end' + alignSelf: 'flex-end', + color: colors.invariant.textGrey } }))