diff --git a/__tests__/components/Modals/vault/VaultBorrowings.test.tsx b/__tests__/components/Modals/vault/VaultBorrowings.test.tsx index 2189ebc9..a1b7be74 100644 --- a/__tests__/components/Modals/vault/VaultBorrowings.test.tsx +++ b/__tests__/components/Modals/vault/VaultBorrowings.test.tsx @@ -59,6 +59,7 @@ describe('', () => { onChangeBorrowings: jest.fn(), depositActions: [], depositCapReachedCoins: [], + displayCurrency: 'uosmo', } beforeAll(() => { @@ -80,7 +81,7 @@ describe('', () => { it('should render DisplayCurrency correctly', () => { expect(mockedDisplayCurrency).toHaveBeenCalledTimes(1) expect(mockedDisplayCurrency).toHaveBeenCalledWith( - { coin: new BNCoin({ denom: 'uosmo', amount: '0' }) }, + { coin: new BNCoin({ denom: 'usd', amount: '0' }) }, expect.anything(), ) }) diff --git a/src/components/AccordionContent.tsx b/src/components/AccordionContent.tsx index 88ea0166..86bfa5d0 100644 --- a/src/components/AccordionContent.tsx +++ b/src/components/AccordionContent.tsx @@ -32,9 +32,7 @@ export default function AccordionContent(props: Props) { >
{title} - - {renderSubTitle()} - + {renderSubTitle()}
{isOpen ? : } diff --git a/src/components/Account/AccountBalancesTable.tsx b/src/components/Account/AccountBalancesTable.tsx index 43737354..75cbed5c 100644 --- a/src/components/Account/AccountBalancesTable.tsx +++ b/src/components/Account/AccountBalancesTable.tsx @@ -17,20 +17,20 @@ import { FormattedNumber } from 'components/FormattedNumber' import { SortAsc, SortDesc, SortNone } from 'components/Icons' import Text from 'components/Text' import { ASSETS } from 'constants/assets' -import { DEFAULT_SETTINGS } from 'constants/defaultSettings' -import { DISPLAY_CURRENCY_KEY } from 'constants/localStore' +import { BN_ZERO } from 'constants/math' import useCurrentAccount from 'hooks/useCurrentAccount' -import useLocalStorage from 'hooks/useLocalStorage' import usePrices from 'hooks/usePrices' import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' import { byDenom } from 'utils/array' import { getAssetByDenom } from 'utils/assets' -import { convertLiquidityRateToAPR, convertToDisplayAmount, demagnify } from 'utils/formatters' +import { convertLiquidityRateToAPR, demagnify, getCoinValue } from 'utils/formatters' import { BN } from 'utils/helpers' import { convertAprToApy } from 'utils/parsers' import { getPage, getRoute } from 'utils/route' +import { ORACLE_DENOM } from '../../constants/oracle' + interface Props { account: Account lendingData: LendingMarketTableData[] @@ -38,11 +38,20 @@ interface Props { tableBodyClassName?: string } +interface PositionValue { + type: 'deposits' | 'borrowing' | 'lending' + symbol: string + size: number + value: string + denom: string + amount: BigNumber + apy: number +} + function calculatePositionValues( type: 'deposits' | 'borrowing' | 'lending', asset: Asset, prices: BNCoin[], - displayCurrencyDenom: string, position: BNCoin, apy: number, ) { @@ -51,22 +60,29 @@ function calculatePositionValues( type, symbol: asset.symbol, size: demagnify(amount, asset), - value: convertToDisplayAmount( - BNCoin.fromDenomAndBigNumber(denom, amount), - displayCurrencyDenom, - prices, - ).toString(), + value: getCoinValue(BNCoin.fromDenomAndBigNumber(denom, amount), prices).toString(), denom, amount: type === 'borrowing' ? amount.negated() : amount, apy, } } +function calculateVaultValues(vault: DepositedVault, apy: number) { + const { name } = vault + const totalValue = vault.values.primary.plus(vault.values.secondary) + + return { + type: 'vault', + symbol: name, + size: 0, + value: totalValue.toString(), + denom: vault.denoms.lp, + amount: BN_ZERO, + apy, + } +} + export default function AccountBalancesTable(props: Props) { - const [displayCurrency] = useLocalStorage( - DISPLAY_CURRENCY_KEY, - DEFAULT_SETTINGS.displayCurrency, - ) const { data: prices } = usePrices() const currentAccount = useCurrentAccount() const navigate = useNavigate() @@ -77,31 +93,38 @@ export default function AccountBalancesTable(props: Props) { const accountDeposits = props.account?.deposits ?? [] const accountLends = props.account?.lends ?? [] const accountDebts = props.account?.debts ?? [] + const accountVaults = props.account?.vaults ?? [] - const deposits = accountDeposits.map((deposit) => { - const asset = ASSETS.find((asset) => asset.denom === deposit.denom) ?? ASSETS[0] + const deposits: PositionValue[] = [] + accountDeposits.forEach((deposit) => { + const asset = ASSETS.find(byDenom(deposit.denom)) + if (!asset) return const apy = 0 - return calculatePositionValues('deposits', asset, prices, displayCurrency, deposit, apy) + deposits.push(calculatePositionValues('deposits', asset, prices, deposit, apy)) }) const lends = accountLends.map((lending) => { - const asset = ASSETS.find((asset) => asset.denom === lending.denom) ?? ASSETS[0] + const asset = ASSETS.find(byDenom(lending.denom)) ?? ASSETS[0] const apr = convertLiquidityRateToAPR( props.lendingData.find((market) => market.asset.denom === lending.denom) ?.marketLiquidityRate ?? 0, ) const apy = convertAprToApy(apr, 365) - return calculatePositionValues('lending', asset, prices, displayCurrency, lending, apy) + return calculatePositionValues('lending', asset, prices, lending, apy) + }) + + const vaults = accountVaults.map((vault) => { + const apy = (vault.apy ?? 0) * 100 + return calculateVaultValues(vault, apy) }) const debts = accountDebts.map((debt) => { const asset = ASSETS.find(byDenom(debt.denom)) ?? ASSETS[0] const apy = props.borrowingData.find((market) => market.asset.denom === debt.denom)?.borrowRate ?? 0 - return calculatePositionValues('borrowing', asset, prices, displayCurrency, debt, apy * -100) + return calculatePositionValues('borrowing', asset, prices, debt, apy * -100) }) - - return [...deposits, ...lends, ...debts] - }, [displayCurrency, prices, props.account, props.borrowingData, props.lendingData]) + return [...deposits, ...lends, ...vaults, ...debts] + }, [prices, props.account, props.borrowingData, props.lendingData]) const columns = React.useMemo[]>( () => [ @@ -114,6 +137,7 @@ export default function AccountBalancesTable(props: Props) { {row.original.symbol} {row.original.type === 'lending' && (lent)} + {row.original.type === 'vault' && (farm)} ) }, @@ -124,8 +148,8 @@ export default function AccountBalancesTable(props: Props) { id: 'value', cell: ({ row }) => { const coin = new BNCoin({ - denom: row.original.denom, - amount: row.original.amount.toString(), + denom: ORACLE_DENOM, + amount: row.original.value.toString(), }) return }, @@ -135,6 +159,8 @@ export default function AccountBalancesTable(props: Props) { accessorKey: 'size', header: 'Size', cell: ({ row }) => { + if (row.original.amount.isEqualTo(BN_ZERO)) + return const amount = demagnify( row.original.amount, getAssetByDenom(row.original.denom) ?? ASSETS[0], @@ -154,7 +180,7 @@ export default function AccountBalancesTable(props: Props) { accessorKey: 'apy', header: 'APY', cell: ({ row }) => { - if (row.original.apy === 0) + if (row.original.type === 'deposit') return return ( {table.getHeaderGroups().map((headerGroup) => ( - {headerGroup.headers.map((header, index) => { + {headerGroup.headers.map((header) => { return ( diff --git a/src/components/Account/AccountDetails.tsx b/src/components/Account/AccountDetails.tsx index c0768d08..126be386 100644 --- a/src/components/Account/AccountDetails.tsx +++ b/src/components/Account/AccountDetails.tsx @@ -51,12 +51,12 @@ function AccountDetails(props: Props) { const { health: updatedHealth } = useHealthComputer(updatedAccount || account) const { data: prices } = usePrices() const accountBalanceValue = useMemo( - () => calculateAccountBalanceValue(updatedAccount ? updatedAccount : account, prices), + () => calculateAccountBalanceValue(updatedAccount ?? account, prices), [updatedAccount, account, prices], ) const coin = BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, accountBalanceValue) const leverage = useMemo( - () => calculateAccountLeverage(updatedAccount ? updatedAccount : account, prices), + () => calculateAccountLeverage(updatedAccount ?? account, prices), [account, updatedAccount, prices], ) const { availableAssets: borrowAvailableAssets, accountBorrowedAssets } = diff --git a/src/components/DisplayCurrency.tsx b/src/components/DisplayCurrency.tsx index cca97117..18b4f2d8 100644 --- a/src/components/DisplayCurrency.tsx +++ b/src/components/DisplayCurrency.tsx @@ -8,7 +8,9 @@ import useLocalStorage from 'hooks/useLocalStorage' import usePrices from 'hooks/usePrices' import { BNCoin } from 'types/classes/BNCoin' import { getDisplayCurrencies } from 'utils/assets' -import { convertToDisplayAmount } from 'utils/formatters' +import { getCoinValue } from 'utils/formatters' +import { BN } from 'utils/helpers' +import { ORACLE_DENOM } from 'constants/oracle' interface Props { coin: BNCoin @@ -39,13 +41,27 @@ export default function DisplayCurrency(props: Props) { ? '' : ` ${displayCurrencyAsset.symbol ? ` ${displayCurrencyAsset.symbol}` : ''}` + const amount = useMemo(() => { + const coinValue = getCoinValue(props.coin, prices) + + if (displayCurrency === ORACLE_DENOM) return coinValue.toNumber() + + const displayDecimals = displayCurrencyAsset.decimals + const displayPrice = getCoinValue( + BNCoin.fromDenomAndBigNumber(displayCurrency, BN(1).shiftedBy(displayDecimals)), + prices, + ) + + return coinValue.div(displayPrice).toNumber() + }, [displayCurrency, displayCurrencyAsset.decimals, prices, props.coin]) + return ( vault.isFeatured) if (!featuredVaults.length) return null @@ -14,7 +14,7 @@ function Content() { return ( {featuredVaults.map((vault) => ( diff --git a/src/components/Earn/Farm/Vaults.tsx b/src/components/Earn/Farm/Vaults.tsx index 6ec01a61..3772572b 100644 --- a/src/components/Earn/Farm/Vaults.tsx +++ b/src/components/Earn/Farm/Vaults.tsx @@ -5,11 +5,11 @@ import Card from 'components/Card' import { VaultTable } from 'components/Earn/Farm/VaultTable' import VaultUnlockBanner from 'components/Earn/Farm/VaultUnlockBanner' import { IS_TESTNET } from 'constants/env' +import { BN_ZERO } from 'constants/math' import { TESTNET_VAULTS_META_DATA, VAULTS_META_DATA } from 'constants/vaults' import useDepositedVaults from 'hooks/useDepositedVaults' import useVaults from 'hooks/useVaults' import { VaultStatus } from 'types/enums/vault' -import { BN_ZERO } from 'constants/math' interface Props { type: 'available' | 'deposited' @@ -26,6 +26,7 @@ function Content(props: Props) { const { deposited, available } = useMemo(() => { return vaultsMetaData.reduce( (prev: { deposited: DepositedVault[]; available: Vault[] }, curr) => { + if (!vaults) return prev const vault = vaults.find((vault) => vault.address === curr.address) const depositedVault = depositedVaults?.find((vault) => vault.address === curr.address) @@ -59,7 +60,7 @@ function Content(props: Props) { <> {!isAvailable && } @@ -85,7 +86,7 @@ function Fallback() { })) return ( - + ) diff --git a/src/components/Earn/Lend/LendingMarketsTable.tsx b/src/components/Earn/Lend/LendingMarketsTable.tsx index 06025a94..6834500c 100644 --- a/src/components/Earn/Lend/LendingMarketsTable.tsx +++ b/src/components/Earn/Lend/LendingMarketsTable.tsx @@ -9,10 +9,12 @@ import AssetListTable from 'components/MarketAssetTable' import MarketAssetTableRow from 'components/MarketAssetTable/MarketAssetTableRow' import MarketDetails from 'components/MarketAssetTable/MarketDetails' import TitleAndSubCell from 'components/TitleAndSubCell' -import useDisplayCurrencyPrice from 'hooks/useDisplayCurrencyPrice' import { convertLiquidityRateToAPR, demagnify } from 'utils/formatters' import { BN } from 'utils/helpers' +import { BN_ZERO } from '../../../constants/math' +import AmountAndValue from '../../AmountAndValue' + interface Props { title: string data: LendingMarketTableData[] @@ -20,7 +22,6 @@ interface Props { export default function LendingMarketsTable(props: Props) { const { title, data } = props - const { symbol: displayCurrencySymbol } = useDisplayCurrencyPrice() const shouldShowAccountDeposit = !!data[0]?.accountLentValue const rowRenderer = useCallback( @@ -49,12 +50,12 @@ export default function LendingMarketsTable(props: Props) { const asset = row.original.asset return ( -
+
) @@ -66,14 +67,12 @@ export default function LendingMarketsTable(props: Props) { accessorKey: 'accountDepositValue', header: 'Deposited', cell: ({ row }) => { - const accountDepositValue = row.original.accountLentValue as BigNumber + const amount = row.original.accountLentAmount return ( - ) }, @@ -135,7 +134,7 @@ export default function LendingMarketsTable(props: Props) { ), }, ], - [displayCurrencySymbol, shouldShowAccountDeposit], + [shouldShowAccountDeposit], ) return diff --git a/src/components/FormattedNumber.tsx b/src/components/FormattedNumber.tsx index 282c6a8a..ac378dce 100644 --- a/src/components/FormattedNumber.tsx +++ b/src/components/FormattedNumber.tsx @@ -12,6 +12,7 @@ interface Props { options?: FormatOptions className?: string animate?: boolean + parentheses?: boolean } export const FormattedNumber = React.memo( @@ -39,13 +40,25 @@ export const FormattedNumber = React.memo( reduceMotion ) return ( -

+

{formatValue(props.amount.toString(), props.options)}

) return ( - + {springAmount.number.to((num) => formatValue(num, props.options))} ) diff --git a/src/components/Modals/AssetsSelect/AssetSelectTable.tsx b/src/components/Modals/AssetsSelect/AssetSelectTable.tsx index 9cfa332c..1455cc8b 100644 --- a/src/components/Modals/AssetsSelect/AssetSelectTable.tsx +++ b/src/components/Modals/AssetsSelect/AssetSelectTable.tsx @@ -133,7 +133,7 @@ export default function AssetSelectTable(props: Props) { diff --git a/src/components/Modals/BorrowModal.tsx b/src/components/Modals/BorrowModal.tsx index 07493d0d..d0cc20d2 100644 --- a/src/components/Modals/BorrowModal.tsx +++ b/src/components/Modals/BorrowModal.tsx @@ -20,7 +20,7 @@ import useCurrentAccount from 'hooks/useCurrentAccount' import useHealthComputer from 'hooks/useHealthComputer' import useToggle from 'hooks/useToggle' import { useUpdatedAccount } from 'hooks/useUpdatedAccount' -import { getDepositsAndLendsAfterCoinSpent } from 'hooks/useUpdatedAccount/functions' +import { getDepositAndLendCoinsToSpend } from 'hooks/useUpdatedAccount/functions' import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' import { byDenom } from 'utils/array' @@ -77,7 +77,7 @@ function BorrowModal(props: Props) { if (!asset) return setIsConfirming(true) let result - const { lends } = getDepositsAndLendsAfterCoinSpent( + const { lend } = getDepositAndLendCoinsToSpend( BNCoin.fromDenomAndBigNumber(asset.denom, amount), account, ) @@ -85,8 +85,8 @@ function BorrowModal(props: Props) { result = await repay({ accountId: account.id, coin: BNCoin.fromDenomAndBigNumber(asset.denom, amount), - accountBalance: max.isEqualTo(amount), - lends, + accountBalance: percentage === 100, + lend, }) } else { result = await borrow({ diff --git a/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx b/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx index ca6ff577..47723745 100644 --- a/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx +++ b/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx @@ -14,7 +14,7 @@ import useToggle from 'hooks/useToggle' import { useUpdatedAccount } from 'hooks/useUpdatedAccount' import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' -import { cloneAccount, getMergedBalances, removeDepositsAndLends } from 'utils/accounts' +import { cloneAccount, getMergedBalancesForAsset, removeDepositsAndLends } from 'utils/accounts' import { byDenom } from 'utils/array' import { getEnabledMarketAssets } from 'utils/assets' @@ -36,7 +36,7 @@ export default function WithdrawFromAccount(props: Props) { const accountClone = cloneAccount(account) const borrowAccount = removeDepositsAndLends(accountClone, currentAsset.denom) const { computeMaxBorrowAmount } = useHealthComputer(borrowAccount) - const balances = getMergedBalances(account, getEnabledMarketAssets()) + const balances = getMergedBalancesForAsset(account, getEnabledMarketAssets()) const maxWithdrawAmount = computeMaxWithdrawAmount(currentAsset.denom) const maxWithdrawWithBorrowAmount = computeMaxBorrowAmount(currentAsset.denom, 'wallet').plus( maxWithdrawAmount, diff --git a/src/components/Modals/Vault/VaultBorrowings.tsx b/src/components/Modals/Vault/VaultBorrowings.tsx index 9215e0fb..fab52543 100644 --- a/src/components/Modals/Vault/VaultBorrowings.tsx +++ b/src/components/Modals/Vault/VaultBorrowings.tsx @@ -19,6 +19,8 @@ import { Action } from 'types/generated/mars-credit-manager/MarsCreditManager.ty import { byDenom } from 'utils/array' import { findCoinByDenom, getAssetByDenom } from 'utils/assets' import { formatPercent } from 'utils/formatters' +import { getValueFromBNCoins, mergeBNCoinArrays } from 'utils/helpers' +import { ORACLE_DENOM } from 'constants/oracle' export interface VaultBorrowingsProps { borrowings: BNCoin[] @@ -28,18 +30,29 @@ export interface VaultBorrowingsProps { vault: Vault depositActions: Action[] onChangeBorrowings: (borrowings: BNCoin[]) => void + displayCurrency: string depositCapReachedCoins: BNCoin[] } export default function VaultBorrowings(props: VaultBorrowingsProps) { const { data: marketAssets } = useMarketAssets() const { data: prices } = usePrices() - const baseCurrency = useStore((s) => s.baseCurrency) const vaultModal = useStore((s) => s.vaultModal) const depositIntoVault = useStore((s) => s.depositIntoVault) const [isConfirming, setIsConfirming] = useState(false) const updatedAccount = useStore((s) => s.updatedAccount) const { computeMaxBorrowAmount } = useHealthComputer(updatedAccount) + const [percentage, setPercentage] = useState(0) + + const calculateSliderPercentage = (maxBorrowAmounts: BNCoin[], borrowings: BNCoin[]) => { + if (borrowings.length === 1) { + const amount = borrowings[0].amount + if (amount.isZero()) return 0 + const max = maxBorrowAmounts.find(byDenom(borrowings[0].denom))?.amount || BN_ZERO + return amount.times(100).dividedBy(max).toNumber() + } + return 0 + } const maxBorrowAmounts: BNCoin[] = useMemo(() => { return props.borrowings.map((borrowing) => { @@ -53,25 +66,10 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) { }) }, [props.borrowings, computeMaxBorrowAmount, props.vault.address]) - const borrowingValue = useMemo(() => { - return props.borrowings.reduce((prev, curr) => { - const price = prices.find((price) => price.denom === curr.denom)?.amount - if (!price) return prev - - return prev.plus(curr.amount.multipliedBy(price)) - }, BN_ZERO as BigNumber) - }, [props.borrowings, prices]) - - const totalValue = useMemo(() => { - const depositValue = props.deposits.reduce((prev, curr) => { - const price = prices.find((price) => price.denom === curr.denom)?.amount - if (!price) return prev - const value = curr.amount.multipliedBy(price) - return prev.plus(value) - }, BN_ZERO as BigNumber) - - return depositValue.plus(borrowingValue) - }, [props.deposits, borrowingValue, prices]) + const totalValue = useMemo( + () => getValueFromBNCoins(mergeBNCoinArrays(props.deposits, props.borrowings), prices), + [props.borrowings, props.deposits, prices], + ) useEffect(() => { const selectedBorrowDenoms = vaultModal?.selectedBorrowDenoms || [] @@ -81,25 +79,24 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) { ) { return } - const updatedBorrowings = selectedBorrowDenoms.map((denom) => { const amount = findCoinByDenom(denom, props.borrowings)?.amount || BN_ZERO + return new BNCoin({ denom, amount: amount.toString(), }) }) props.onChangeBorrowings(updatedBorrowings) - }, [vaultModal, props]) - - const [percentage, setPercentage] = useState(0) + setPercentage(calculateSliderPercentage(maxBorrowAmounts, updatedBorrowings)) + }, [vaultModal, props, maxBorrowAmounts]) function onChangeSlider(value: number) { if (props.borrowings.length !== 1) return const denom = props.borrowings[0].denom const currentAmount = props.borrowings[0].amount - const maxAmount = maxBorrowAmounts.find((coin) => coin.denom === denom)?.amount ?? BN_ZERO + const maxAmount = maxBorrowAmounts.find(byDenom(denom))?.amount ?? BN_ZERO const newBorrowings: BNCoin[] = [ new BNCoin({ denom, @@ -123,7 +120,8 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) { function onDelete(denom: string) { const index = props.borrowings.findIndex((coin) => coin.denom === denom) props.borrowings.splice(index, 1) - props.onChangeBorrowings([...props.borrowings]) + const newBorrowings = [...props.borrowings] + props.onChangeBorrowings(newBorrowings) if (!vaultModal) return useStore.setState({ @@ -132,6 +130,7 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) { selectedBorrowDenoms: props.borrowings.map((coin) => coin.denom), }, }) + setPercentage(calculateSliderPercentage(maxBorrowAmounts, newBorrowings)) } function addAsset() { @@ -140,6 +139,7 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) { selectedDenoms: props.borrowings.map((coin) => coin.denom), }, }) + setPercentage(calculateSliderPercentage(maxBorrowAmounts, props.borrowings)) } async function onConfirm() { @@ -209,7 +209,7 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) {
{`${props.primaryAsset.symbol}-${props.secondaryAsset.symbol} Position Value`}
{props.borrowings.map((coin) => { diff --git a/src/components/Modals/Vault/VaultBorrowingsSubTitle.tsx b/src/components/Modals/Vault/VaultBorrowingsSubTitle.tsx index a6ad4de6..409cb1c6 100644 --- a/src/components/Modals/Vault/VaultBorrowingsSubTitle.tsx +++ b/src/components/Modals/Vault/VaultBorrowingsSubTitle.tsx @@ -1,47 +1,60 @@ +import classNames from 'classnames' import { useMemo } from 'react' import DisplayCurrency from 'components/DisplayCurrency' -import usePrices from 'hooks/usePrices' -import useStore from 'store' -import { BNCoin } from 'types/classes/BNCoin' -import { formatAmountWithSymbol } from 'utils/formatters' +import Text from 'components/Text' import { BN_ZERO } from 'constants/math' +import usePrices from 'hooks/usePrices' +import { BNCoin } from 'types/classes/BNCoin' +import { formatAmountWithSymbol, getCoinValue } from 'utils/formatters' +import { ORACLE_DENOM } from 'constants/oracle' interface Props { borrowings: BNCoin[] + displayCurrency: string } -export default function VaultDepositSubTitle(props: Props) { - const baseCurrency = useStore((s) => s.baseCurrency) +export default function VaultBorrowingsSubTitle(props: Props) { const { data: prices } = usePrices() - const [borrowingTexts, borrowingValue] = useMemo(() => { - const texts: string[] = [] + const borrowingValue = useMemo(() => { let borrowingValue = BN_ZERO props.borrowings.map((coin) => { const price = prices.find((p) => p.denom === coin.denom)?.amount if (!price || coin.amount.isZero()) return - borrowingValue = borrowingValue.plus(coin.amount.multipliedBy(price)) - texts.push( - formatAmountWithSymbol({ - denom: coin.denom, - amount: coin.amount.toString(), - }), - ) + borrowingValue = getCoinValue(coin, prices) }) - return [texts, borrowingValue] + return borrowingValue }, [props.borrowings, prices]) + const borrowingTexts = useMemo( + () => + props.borrowings.map((borrowing, index) => ( + + {formatAmountWithSymbol(borrowing.toCoin())} + + )), + [props.borrowings], + ) + return ( <> - {borrowingTexts.join(' + ')} - {borrowingTexts.length > 0 && ( - <> - {` = `} - - + {props.borrowings.length > 0 && borrowingTexts} + {props.borrowings.length > 0 && ( + + {formatAmountWithSymbol({ + denom: props.secondaryAsset.denom, + amount: props.secondaryAmount.toString(), + })} + + ), + [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() @@ -37,15 +58,15 @@ export default function VaultDepositSubTitle(props: Props) { return ( <> {showPrimaryText && primaryText} - {showPrimaryText && showSecondaryText && ' + '} {showSecondaryText && secondaryText} {(showPrimaryText || showSecondaryText) && ( - <> - {` = `} - - +