cerc-io/mars-interface
16
0
Fork 0
mirror of https://github.com/cerc-io/mars-interface.git synced 2024-12-23 04:37:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

tweaked the fields harvester interface

Browse Source
This commit is contained in:
Linkie Link 2022-05-05 13:14:27 +02:00
parent 2ecadb938f
commit 37309b46fb
No known key found for this signature in database
GPG Key ID: 0D521EAABD3B3B42
4 changed files with 111 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/tooltip/Apy.module.scss
View File

@ -5,23 +5,18 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include layoutTooltip; @include layoutTooltip;
min-width: rem-calc(184); min-width: rem-calc(280);
.item { .item {
margin-top: space(2); @include padding(1, 0);
display: flex; display: flex;
width: rem-calc(175); width: 100%;
flex-direction: row; flex-direction: row;
@include typoXS; @include typoXS;
&:last-child {
@include devider20;
font-weight: $fontWeightSemibold;
}
.label { .label {
display: flex; display: flex;
flex: 0 0 rem-calc(115); flex: 1;
} }
.value { .value {
@ -30,9 +25,13 @@
flex: 0 0 rem-calc(60); flex: 0 0 rem-calc(60);
} }
&.leverage { &.leverage,
@include margin(2, 0, 0); &.total {
font-weight: $fontWeightSemibold; font-weight: $fontWeightSemibold;
} }
&.border {
@include devider20;
}
} }
} }

137
src/components/tooltip/Apy.tsx
View File

@ -5,153 +5,134 @@ import { useTranslation } from 'react-i18next'
import { useRedBank } from '../../hooks' import { useRedBank } from '../../hooks'
interface Props { interface Props {
trueApy: number
apyData: StrategyRate apyData: StrategyRate
aprData: StrategyRate
token: string token: string
leverage?: string leverage: string | number
borrowDenom?: string borrowDenom?: string
} }
const Apy = ({ const Apy = ({ apyData, token, leverage, borrowDenom = 'uusd' }: Props) => {
trueApy,
apyData,
aprData,
token,
leverage,
borrowDenom = 'uusd',
}: Props) => {
const { t } = useTranslation() const { t } = useTranslation()
const { findMarketInfo } = useRedBank() const { findMarketInfo } = useRedBank()
const [checkedApyData, setApyData] = useState<StrategyRate>(apyData) const [checkedApyData, setApyData] = useState<StrategyRate>(apyData)
const [checkedAprData, setAprData] = useState<StrategyRate>(aprData) const borrowRate = Number(findMarketInfo(borrowDenom)?.borrow_rate) * 100
const [totalApy, setTotalApy] = useState(0)
useEffect( useEffect(
() => { () => {
if (apyData?.total !== checkedApyData?.total) { if (apyData?.total !== checkedApyData?.total) {
setApyData(apyData) setApyData(apyData)
} }
if (aprData?.total !== checkedAprData?.total) {
setAprData(aprData) setTotalApy(checkedApyData.total - borrowRate)
}
}, },
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
[apyData, aprData] [apyData, borrowRate]
) )
return ( return (
<div className={styles.container}> <div className={styles.container}>
<p className='sub2'>{t('fields.apyBreakdown')}</p> <p className='sub2'>{t('fields.apyBreakdown')}</p>
{checkedAprData?.trading > 0 && ( {checkedApyData?.trading > 0 && (
<div className={styles.item}> <div className={styles.item}>
<span className={styles.label}> <span className={styles.label}>
{t('fields.tradingFeesApr')} {t('fields.tradingFeesApy')}
</span> </span>
<span className={styles.value}> <span className={styles.value}>
{formatValue( {formatValue(
checkedAprData.trading, checkedApyData.trading,
2, 2,
2, 2,
true, true,
false, false,
'%' '%',
true
)} )}
</span> </span>
</div> </div>
)} )}
{checkedAprData?.astro > 0 && ( {checkedApyData?.astro > 0 && (
<div className={styles.item}> <div className={styles.item}>
<span className={styles.label}> <span className={styles.label}>
{t('fields.protocolApr', { protocol: 'ASTRO' })} {t('fields.protocolApy', { protocol: 'ASTRO' })}
</span> </span>
<span className={styles.value}> <span className={styles.value}>
{formatValue( {formatValue(
checkedAprData.astro, checkedApyData.astro,
2, 2,
2, 2,
true, true,
false, false,
'%' '%',
true
)} )}
</span> </span>
</div> </div>
)} )}
{checkedAprData?.protocol > 0 && ( {checkedApyData?.protocol > 0 && (
<div className={styles.item}> <div className={styles.item}>
<span className={styles.label}> <span className={styles.label}>
{t('fields.protocolApr', { protocol: token })} {t('fields.protocolApy', { protocol: token })}
</span> </span>
<span className={styles.value}> <span className={styles.value}>
{formatValue( {formatValue(
checkedAprData.protocol, checkedApyData.protocol,
2, 2,
2, 2,
true, true,
false, false,
'%' '%',
true
)} )}
</span> </span>
</div> </div>
)} )}
<div className={`${styles.item} ${styles.border}`}>
<span className={styles.label}>
{t('fields.borrowRateApy')}
</span>
<span className={styles.value}>
{formatValue(borrowRate, 2, 2, true, '-', '%', true)}
</span>
</div>
{checkedApyData?.total > 0 && ( {checkedApyData?.total > 0 && (
<div className={styles.item}> <div
className={`${styles.item} ${styles.total} ${styles.border}`}
>
<span className={styles.label}> <span className={styles.label}>
{t('fields.totalRewardsApy')} {t('fields.totalRewardsApy')}
</span> </span>
<span className={styles.value}> <span className={styles.value}>
{formatValue( {formatValue(totalApy, 2, 2, true, false, '%', true)}
checkedApyData.total, </span>
</div>
)}
<div className={`${styles.item} ${styles.leverage}`}>
<span className={styles.label}>
{t('fields.leveragedApy', {
leverage: formatValue(
Number(leverage),
2, 2,
2, 2,
true, true,
false, false,
'%' 'x',
)} true
</span> ),
</div> })}
)} </span>
{leverage && Number(leverage) > 0 && trueApy > 0 && ( <span className={styles.value}>
<> {formatValue(
<div className={styles.item}> totalApy * Number(leverage),
<span className={styles.label}> 2,
{t('fields.borrowRateApr')} 2,
</span> true,
<span className={styles.value}> false,
{formatValue( '%',
Number( true
findMarketInfo(borrowDenom)?.borrow_rate )}
) * 100, </span>
2, </div>
2,
true,
'-',
'%'
)}
</span>
</div>
<div className={`${styles.item} ${styles.leverage}`}>
<span className={styles.label}>
{`${t('fields.leverage')} ${formatValue(
leverage || 0,
2,
2,
true,
false,
'x',
true
)}`}
</span>
</div>
<div className={styles.item}>
<span className={styles.label}>
{t('fields.leveragedApy')}
</span>
<span className={styles.value}>
{formatValue(trueApy, 2, 2, true, false, '%')}
</span>
</div>
</>
)}
</div> </div>
) )
} }

10
src/hooks/useFields.ts
View File

@ -179,7 +179,7 @@ export const useFieldsState = (): FieldsState => {
const totalRewardsApr = const totalRewardsApr =
tradingFeesApy + astroRewardsApr + protocolRewardsApr tradingFeesApy + astroRewardsApr + protocolRewardsApr
return { return {
tradingFeesApr: tradingFeesApy, tradingFeesApy: tradingFeesApy,
astroRewardsApr, astroRewardsApr,
protocolRewardsApr, protocolRewardsApr,
totalRewardsApr, totalRewardsApr,
@ -187,7 +187,7 @@ export const useFieldsState = (): FieldsState => {
} }
const produceApy = (poolDetails: AstroPoolQueryResponse): StrategyRate => { const produceApy = (poolDetails: AstroPoolQueryResponse): StrategyRate => {
const { tradingFeesApr, protocolRewardsApr, astroRewardsApr } = const { tradingFeesApy, protocolRewardsApr, astroRewardsApr } =
getAprs(poolDetails) getAprs(poolDetails)
return poolDetails !== null return poolDetails !== null
@ -196,7 +196,7 @@ export const useFieldsState = (): FieldsState => {
astro: poolDetails.astro_rewards.apy * 100 || 0, astro: poolDetails.astro_rewards.apy * 100 || 0,
protocol: poolDetails.protocol_rewards.apy * 100 || 0, protocol: poolDetails.protocol_rewards.apy * 100 || 0,
total: total:
tradingFeesApr * 100 + tradingFeesApy * 100 +
convertAprToApy( convertAprToApy(
(protocolRewardsApr + astroRewardsApr) * 100 || 0, (protocolRewardsApr + astroRewardsApr) * 100 || 0,
dailyCompoundingPeriod dailyCompoundingPeriod
@ -209,13 +209,13 @@ export const useFieldsState = (): FieldsState => {
const produceApr = (poolDetails: AstroPoolQueryResponse): StrategyRate => { const produceApr = (poolDetails: AstroPoolQueryResponse): StrategyRate => {
const { const {
totalRewardsApr, totalRewardsApr,
tradingFeesApr, tradingFeesApy,
astroRewardsApr, astroRewardsApr,
protocolRewardsApr, protocolRewardsApr,
} = getAprs(poolDetails) } = getAprs(poolDetails)
return poolDetails !== null return poolDetails !== null
? { ? {
trading: tradingFeesApr * 100 || 0, trading: tradingFeesApy * 100 || 0,
astro: astroRewardsApr * 100 || 0, astro: astroRewardsApr * 100 || 0,
protocol: protocolRewardsApr * 100 || 0, protocol: protocolRewardsApr * 100 || 0,
total: totalRewardsApr * 100 || 0, total: totalRewardsApr * 100 || 0,

47
src/pages/fields/gridConfig.js
View File

@ -13,6 +13,8 @@ import Button from '../../components/Button'
import { ExternalSVG } from '../../components/Svg' import { ExternalSVG } from '../../components/Svg'
import { ActionType } from '../../types/enums' import { ActionType } from '../../types/enums'
import { useRedBank } from '../../hooks'
export const activeStrategyGridColumns = [ export const activeStrategyGridColumns = [
{ {
Header: 'Color', Header: 'Color',
@ -203,23 +205,35 @@ export const activeStrategyGridColumns = [
width: '8%', width: '8%',
Cell: ({ cell: { value, row } }) => { Cell: ({ cell: { value, row } }) => {
const apyData = row.original.apy const apyData = row.original.apy
const aprData = row.original.apr
const leverage = row.original.position.leverage const leverage = row.original.position.leverage
const token = row.original.assets[0].symbol 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 ? ( return value > 0 ? (
<Tippy <Tippy
content={ content={
<Apy <Apy
trueApy={value}
apyData={apyData} apyData={apyData}
aprData={aprData}
token={token} token={token}
leverage={leverage} leverage={leverage}
/> />
} }
> >
<div> <div>
{formatValue(value, 2, 2, true, false, '%', true)} {formatValue(
apy * leverage,
2,
2,
true,
false,
'%',
true
)}
</div> </div>
</Tippy> </Tippy>
) : ( ) : (
@ -399,21 +413,35 @@ export const strategyGridColumns = [
sortDescFirst: true, sortDescFirst: true,
Cell: ({ cell: { value, row } }) => { Cell: ({ cell: { value, row } }) => {
const apyData = row.original.apy const apyData = row.original.apy
const aprData = row.original.apr
const token = row.original.assets[0].symbol 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 ? ( return value > 0 ? (
<Tippy <Tippy
content={ content={
<Apy <Apy
trueApy={value} leverage={leverage}
apyData={apyData} apyData={apyData}
aprData={aprData}
token={token} token={token}
/> />
} }
> >
<div> <div>
{formatValue(value, 2, 2, true, false, '%', true)} {formatValue(
apy * leverage,
2,
2,
true,
false,
'%',
true
)}
</div> </div>
</Tippy> </Tippy>
) : ( ) : (
@ -455,7 +483,7 @@ export const strategyGridColumns = [
</p> </p>
<p <p
className={`caption ${ className={`caption ${
percentageUsed === 100 ? 'red' : '' percentageUsed === 100 ? 'colorInfoLoss' : ''
}`} }`}
style={{ style={{
opacity: percentageUsed === 100 ? 1 : 0.5, opacity: percentageUsed === 100 ? 1 : 0.5,
@ -483,7 +511,6 @@ export const strategyGridColumns = [
), ),
accessor: 'provider', accessor: 'provider',
width: '8%', width: '8%',
textAlign: 'right',
Cell: ({ cell: { value } }) => { Cell: ({ cell: { value } }) => {
return ( return (
<img <img