mirror of
https://github.com/cerc-io/mars-interface.git
synced 2024-12-22 20:27:44 +00:00
tweaked the fields harvester interface
This commit is contained in:
Linkie Link
parent
2ecadb938f
commit
37309b46fb
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<StrategyRate>(apyData)
|
||||
const [checkedAprData, setAprData] = useState<StrategyRate>(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 (
|
||||
<div className={styles.container}>
|
||||
<p className='sub2'>{t('fields.apyBreakdown')}</p>
|
||||
{checkedAprData?.trading > 0 && (
|
||||
{checkedApyData?.trading > 0 && (
|
||||
<div className={styles.item}>
|
||||
<span className={styles.label}>
|
||||
{t('fields.tradingFeesApr')}
|
||||
{t('fields.tradingFeesApy')}
|
||||
</span>
|
||||
<span className={styles.value}>
|
||||
{formatValue(
|
||||
checkedAprData.trading,
|
||||
checkedApyData.trading,
|
||||
2,
|
||||
2,
|
||||
true,
|
||||
false,
|
||||
'%'
|
||||
'%',
|
||||
true
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{checkedAprData?.astro > 0 && (
|
||||
{checkedApyData?.astro > 0 && (
|
||||
<div className={styles.item}>
|
||||
<span className={styles.label}>
|
||||
{t('fields.protocolApr', { protocol: 'ASTRO' })}
|
||||
{t('fields.protocolApy', { protocol: 'ASTRO' })}
|
||||
</span>
|
||||
<span className={styles.value}>
|
||||
{formatValue(
|
||||
checkedAprData.astro,
|
||||
checkedApyData.astro,
|
||||
2,
|
||||
2,
|
||||
true,
|
||||
false,
|
||||
'%'
|
||||
'%',
|
||||
true
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{checkedAprData?.protocol > 0 && (
|
||||
{checkedApyData?.protocol > 0 && (
|
||||
<div className={styles.item}>
|
||||
<span className={styles.label}>
|
||||
{t('fields.protocolApr', { protocol: token })}
|
||||
{t('fields.protocolApy', { protocol: token })}
|
||||
</span>
|
||||
<span className={styles.value}>
|
||||
{formatValue(
|
||||
checkedAprData.protocol,
|
||||
checkedApyData.protocol,
|
||||
2,
|
||||
2,
|
||||
true,
|
||||
false,
|
||||
'%'
|
||||
'%',
|
||||
true
|
||||
)}
|
||||
</span>
|
||||
</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 && (
|
||||
<div className={styles.item}>
|
||||
<div
|
||||
className={`${styles.item} ${styles.total} ${styles.border}`}
|
||||
>
|
||||
<span className={styles.label}>
|
||||
{t('fields.totalRewardsApy')}
|
||||
</span>
|
||||
<span className={styles.value}>
|
||||
{formatValue(
|
||||
checkedApyData.total,
|
||||
{formatValue(totalApy, 2, 2, true, false, '%', true)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={`${styles.item} ${styles.leverage}`}>
|
||||
<span className={styles.label}>
|
||||
{t('fields.leveragedApy', {
|
||||
leverage: formatValue(
|
||||
Number(leverage),
|
||||
2,
|
||||
2,
|
||||
true,
|
||||
false,
|
||||
'%'
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{leverage && Number(leverage) > 0 && trueApy > 0 && (
|
||||
<>
|
||||
<div className={styles.item}>
|
||||
<span className={styles.label}>
|
||||
{t('fields.borrowRateApr')}
|
||||
</span>
|
||||
<span className={styles.value}>
|
||||
{formatValue(
|
||||
Number(
|
||||
findMarketInfo(borrowDenom)?.borrow_rate
|
||||
) * 100,
|
||||
2,
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
'x',
|
||||
true
|
||||
),
|
||||
})}
|
||||
</span>
|
||||
<span className={styles.value}>
|
||||
{formatValue(
|
||||
totalApy * Number(leverage),
|
||||
2,
|
||||
2,
|
||||
true,
|
||||
false,
|
||||
'%',
|
||||
true
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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 ? (
|
||||
<Tippy
|
||||
content={
|
||||
<Apy
|
||||
trueApy={value}
|
||||
apyData={apyData}
|
||||
aprData={aprData}
|
||||
token={token}
|
||||
leverage={leverage}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
{formatValue(value, 2, 2, true, false, '%', true)}
|
||||
{formatValue(
|
||||
apy * leverage,
|
||||
2,
|
||||
2,
|
||||
true,
|
||||
false,
|
||||
'%',
|
||||
true
|
||||
)}
|
||||
</div>
|
||||
</Tippy>
|
||||
) : (
|
||||
@ -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 ? (
|
||||
<Tippy
|
||||
content={
|
||||
<Apy
|
||||
trueApy={value}
|
||||
leverage={leverage}
|
||||
apyData={apyData}
|
||||
aprData={aprData}
|
||||
token={token}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
{formatValue(value, 2, 2, true, false, '%', true)}
|
||||
{formatValue(
|
||||
apy * leverage,
|
||||
2,
|
||||
2,
|
||||
true,
|
||||
false,
|
||||
'%',
|
||||
true
|
||||
)}
|
||||
</div>
|
||||
</Tippy>
|
||||
) : (
|
||||
@ -455,7 +483,7 @@ export const strategyGridColumns = [
|
||||
</p>
|
||||
<p
|
||||
className={`caption ${
|
||||
percentageUsed === 100 ? 'red' : ''
|
||||
percentageUsed === 100 ? 'colorInfoLoss' : ''
|
||||
}`}
|
||||
style={{
|
||||
opacity: percentageUsed === 100 ? 1 : 0.5,
|
||||
@ -483,7 +511,6 @@ export const strategyGridColumns = [
|
||||
),
|
||||
accessor: 'provider',
|
||||
width: '8%',
|
||||
textAlign: 'right',
|
||||
Cell: ({ cell: { value } }) => {
|
||||
return (
|
||||
<img
|
||||
|
||||
Loading…
Reference in New Issue
Block a user