From 37309b46fbb3925b443e94756d34fe6fc0684b0c Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Thu, 5 May 2022 13:14:27 +0200 Subject: [PATCH] tweaked the fields harvester interface --- src/components/tooltip/Apy.module.scss | 21 ++-- src/components/tooltip/Apy.tsx | 137 +++++++++++-------------- src/hooks/useFields.ts | 10 +- src/pages/fields/gridConfig.js | 47 +++++++-- 4 files changed, 111 insertions(+), 104 deletions(-) diff --git a/src/components/tooltip/Apy.module.scss b/src/components/tooltip/Apy.module.scss index 0d15809..9219eac 100644 --- a/src/components/tooltip/Apy.module.scss +++ b/src/components/tooltip/Apy.module.scss @@ -5,23 +5,18 @@ display: flex; flex-direction: column; @include layoutTooltip; - min-width: rem-calc(184); + min-width: rem-calc(280); .item { - margin-top: space(2); + @include padding(1, 0); display: flex; - width: rem-calc(175); + width: 100%; flex-direction: row; @include typoXS; - &:last-child { - @include devider20; - font-weight: $fontWeightSemibold; - } - .label { display: flex; - flex: 0 0 rem-calc(115); + flex: 1; } .value { @@ -30,9 +25,13 @@ flex: 0 0 rem-calc(60); } - &.leverage { - @include margin(2, 0, 0); + &.leverage, + &.total { font-weight: $fontWeightSemibold; } + + &.border { + @include devider20; + } } } diff --git a/src/components/tooltip/Apy.tsx b/src/components/tooltip/Apy.tsx index 321b09b..dd0029c 100644 --- a/src/components/tooltip/Apy.tsx +++ b/src/components/tooltip/Apy.tsx @@ -5,153 +5,134 @@ import { useTranslation } from 'react-i18next' import { useRedBank } from '../../hooks' interface Props { - trueApy: number apyData: StrategyRate - aprData: StrategyRate token: string - leverage?: string + leverage: string | number borrowDenom?: string } -const Apy = ({ - trueApy, - apyData, - aprData, - token, - leverage, - borrowDenom = 'uusd', -}: Props) => { +const Apy = ({ apyData, token, leverage, borrowDenom = 'uusd' }: Props) => { const { t } = useTranslation() const { findMarketInfo } = useRedBank() const [checkedApyData, setApyData] = useState(apyData) - const [checkedAprData, setAprData] = useState(aprData) + const borrowRate = Number(findMarketInfo(borrowDenom)?.borrow_rate) * 100 + const [totalApy, setTotalApy] = useState(0) useEffect( () => { if (apyData?.total !== checkedApyData?.total) { setApyData(apyData) } - if (aprData?.total !== checkedAprData?.total) { - setAprData(aprData) - } + + setTotalApy(checkedApyData.total - borrowRate) }, // eslint-disable-next-line react-hooks/exhaustive-deps - [apyData, aprData] + [apyData, borrowRate] ) return (

{t('fields.apyBreakdown')}

- {checkedAprData?.trading > 0 && ( + {checkedApyData?.trading > 0 && (
- {t('fields.tradingFeesApr')} + {t('fields.tradingFeesApy')} {formatValue( - checkedAprData.trading, + checkedApyData.trading, 2, 2, true, false, - '%' + '%', + true )}
)} - {checkedAprData?.astro > 0 && ( + {checkedApyData?.astro > 0 && (
- {t('fields.protocolApr', { protocol: 'ASTRO' })} + {t('fields.protocolApy', { protocol: 'ASTRO' })} {formatValue( - checkedAprData.astro, + checkedApyData.astro, 2, 2, true, false, - '%' + '%', + true )}
)} - {checkedAprData?.protocol > 0 && ( + {checkedApyData?.protocol > 0 && (
- {t('fields.protocolApr', { protocol: token })} + {t('fields.protocolApy', { protocol: token })} {formatValue( - checkedAprData.protocol, + checkedApyData.protocol, 2, 2, true, false, - '%' + '%', + true )}
)} +
+ + {t('fields.borrowRateApy')} + + + {formatValue(borrowRate, 2, 2, true, '-', '%', true)} + +
{checkedApyData?.total > 0 && ( -
+
{t('fields.totalRewardsApy')} - {formatValue( - checkedApyData.total, + {formatValue(totalApy, 2, 2, true, false, '%', true)} + +
+ )} +
+ + {t('fields.leveragedApy', { + leverage: formatValue( + Number(leverage), 2, 2, true, false, - '%' - )} - -
- )} - {leverage && Number(leverage) > 0 && trueApy > 0 && ( - <> -
- - {t('fields.borrowRateApr')} - - - {formatValue( - Number( - findMarketInfo(borrowDenom)?.borrow_rate - ) * 100, - 2, - 2, - true, - '-', - '%' - )} - -
-
- - {`${t('fields.leverage')} ${formatValue( - leverage || 0, - 2, - 2, - true, - false, - 'x', - true - )}`} - -
-
- - {t('fields.leveragedApy')} - - - {formatValue(trueApy, 2, 2, true, false, '%')} - -
- - )} + 'x', + true + ), + })} + + + {formatValue( + totalApy * Number(leverage), + 2, + 2, + true, + false, + '%', + true + )} + +
) } diff --git a/src/hooks/useFields.ts b/src/hooks/useFields.ts index 920554e..557b52d 100644 --- a/src/hooks/useFields.ts +++ b/src/hooks/useFields.ts @@ -179,7 +179,7 @@ export const useFieldsState = (): FieldsState => { const totalRewardsApr = tradingFeesApy + astroRewardsApr + protocolRewardsApr return { - tradingFeesApr: tradingFeesApy, + tradingFeesApy: tradingFeesApy, astroRewardsApr, protocolRewardsApr, totalRewardsApr, @@ -187,7 +187,7 @@ export const useFieldsState = (): FieldsState => { } const produceApy = (poolDetails: AstroPoolQueryResponse): StrategyRate => { - const { tradingFeesApr, protocolRewardsApr, astroRewardsApr } = + const { tradingFeesApy, protocolRewardsApr, astroRewardsApr } = getAprs(poolDetails) return poolDetails !== null @@ -196,7 +196,7 @@ export const useFieldsState = (): FieldsState => { astro: poolDetails.astro_rewards.apy * 100 || 0, protocol: poolDetails.protocol_rewards.apy * 100 || 0, total: - tradingFeesApr * 100 + + tradingFeesApy * 100 + convertAprToApy( (protocolRewardsApr + astroRewardsApr) * 100 || 0, dailyCompoundingPeriod @@ -209,13 +209,13 @@ export const useFieldsState = (): FieldsState => { const produceApr = (poolDetails: AstroPoolQueryResponse): StrategyRate => { const { totalRewardsApr, - tradingFeesApr, + tradingFeesApy, astroRewardsApr, protocolRewardsApr, } = getAprs(poolDetails) return poolDetails !== null ? { - trading: tradingFeesApr * 100 || 0, + trading: tradingFeesApy * 100 || 0, astro: astroRewardsApr * 100 || 0, protocol: protocolRewardsApr * 100 || 0, total: totalRewardsApr * 100 || 0, diff --git a/src/pages/fields/gridConfig.js b/src/pages/fields/gridConfig.js index 373e7c5..bdfdf16 100644 --- a/src/pages/fields/gridConfig.js +++ b/src/pages/fields/gridConfig.js @@ -13,6 +13,8 @@ import Button from '../../components/Button' import { ExternalSVG } from '../../components/Svg' import { ActionType } from '../../types/enums' +import { useRedBank } from '../../hooks' + export const activeStrategyGridColumns = [ { Header: 'Color', @@ -203,23 +205,35 @@ export const activeStrategyGridColumns = [ width: '8%', Cell: ({ cell: { value, row } }) => { const apyData = row.original.apy - const aprData = row.original.apr const leverage = row.original.position.leverage const token = row.original.assets[0].symbol + const { findMarketInfo } = useRedBank() + const borrowRate = + Number( + findMarketInfo(row.original.assets[1].denom)?.borrow_rate + ) * 100 + const apy = row.original.apy.total - borrowRate + return value > 0 ? ( } >
- {formatValue(value, 2, 2, true, false, '%', true)} + {formatValue( + apy * leverage, + 2, + 2, + true, + false, + '%', + true + )}
) : ( @@ -399,21 +413,35 @@ export const strategyGridColumns = [ sortDescFirst: true, Cell: ({ cell: { value, row } }) => { const apyData = row.original.apy - const aprData = row.original.apr const token = row.original.assets[0].symbol + const { findMarketInfo } = useRedBank() + const leverage = 2 + const borrowRate = + Number( + findMarketInfo(row.original.assets[1].denom)?.borrow_rate + ) * 100 + const apy = row.original.apy.total - borrowRate + return value > 0 ? ( } >
- {formatValue(value, 2, 2, true, false, '%', true)} + {formatValue( + apy * leverage, + 2, + 2, + true, + false, + '%', + true + )}
) : ( @@ -455,7 +483,7 @@ export const strategyGridColumns = [

{ return (