* 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>
74 lines
2.1 KiB
TypeScript
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() })}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|