mars-v2-frontend/src/components/Modals/Vault/VaultDepositsSubTitle.tsx
Linkie Link f1ee4bd7f3
Mp 3330 compare accounts via use updated account for vaults (#415)
* feat: added simulateTrade

* MP-3330: added vault positions to the useUpdated Account

* tidy: format

* tidy: refactor

* Health indicator change preview (#410)

* fix: adjusted the AccountDetail width

* feat: added health indicator updates

* Update src/components/Account/AccountDetails.tsx

Co-authored-by: Yusuf Seyrek <yusufseyrek@users.noreply.github.com>

* fix: created a function for the back- and foregroundColors

* fix: updated tailwind conf

* fix: fixed the useHealthColorAndLabel function

---------

Co-authored-by: Yusuf Seyrek <yusufseyrek@users.noreply.github.com>
Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>

* fix: added updatedAccount to AccountSummary (#414)

Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>

* fix: added a new way of calulating values to vaults

* fix: refactored the displayCurrency

* fix: fixed the subtitles, to not nest <p> tags

* MP-3330: added comparison to the vault mechanics

* fix: fixed tests

* fix: updated the borrow slider percentage on vaults

* fix: addressed change request

* update displayValue stuff

* fixed wrong display conversions

* fix: fixed the display price and renamed getDepositsAndLendsAfterCoinSpent

* fix test and update DisplayCurrency

* tidy: refactor

* tidy: rename method

---------

Co-authored-by: Yusuf Seyrek <yusufseyrek@users.noreply.github.com>
Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>
2023-09-05 09:25:57 +02:00

74 lines
2.1 KiB
TypeScript

import BigNumber from 'bignumber.js'
import classNames from 'classnames'
import { useMemo } from 'react'
import DisplayCurrency from 'components/DisplayCurrency'
import Text from 'components/Text'
import usePrices from 'hooks/usePrices'
import { BNCoin } from 'types/classes/BNCoin'
import { formatAmountWithSymbol } from 'utils/formatters'
import { getValueFromBNCoins } from 'utils/helpers'
import { ORACLE_DENOM } from 'constants/oracle'
interface Props {
primaryAmount: BigNumber
secondaryAmount: BigNumber
primaryAsset: Asset
secondaryAsset: Asset
displayCurrency: string
}
export default function VaultDepositSubTitle(props: Props) {
const { data: prices } = usePrices()
const primaryText = useMemo(
() => (
<Text size='xs' className='inline mt-1 text-white/60'>
{formatAmountWithSymbol({
denom: props.primaryAsset.denom,
amount: props.primaryAmount.toString(),
})}
</Text>
),
[props.primaryAmount, props.primaryAsset.denom],
)
const secondaryText = useMemo(
() => (
<Text size='xs' className='inline mt-1 text-white/60 ml-1 before:pr-1 before:content-["+"]'>
{formatAmountWithSymbol({
denom: props.secondaryAsset.denom,
amount: props.secondaryAmount.toString(),
})}
</Text>
),
[props.secondaryAmount, props.secondaryAsset.denom],
)
const positionValue = getValueFromBNCoins(
[
BNCoin.fromDenomAndBigNumber(props.primaryAsset.denom, props.primaryAmount),
BNCoin.fromDenomAndBigNumber(props.secondaryAsset.denom, props.secondaryAmount),
],
prices,
)
const showPrimaryText = !props.primaryAmount.isZero()
const showSecondaryText = !props.secondaryAmount.isZero()
return (
<>
{showPrimaryText && primaryText}
{showSecondaryText && secondaryText}
{(showPrimaryText || showSecondaryText) && (
<DisplayCurrency
className={classNames(
'text-xs mt-1 text-white/60 ml-1 inline',
'before:content-["="] before:pr-1',
)}
coin={new BNCoin({ denom: ORACLE_DENOM, amount: positionValue.toString() })}
/>
)}
</>
)
}