)
@@ -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 (
-
+
{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 && (
+
)}
>
)
diff --git a/src/components/Modals/Vault/VaultDeposits.tsx b/src/components/Modals/Vault/VaultDeposits.tsx
index 35e0e71f..115ad549 100644
--- a/src/components/Modals/Vault/VaultDeposits.tsx
+++ b/src/components/Modals/Vault/VaultDeposits.tsx
@@ -1,8 +1,9 @@
import BigNumber from 'bignumber.js'
+import { useMemo, useState } from 'react'
+import DisplayCurrency from 'components/DisplayCurrency'
import Button from 'components/Button'
import DepositCapMessage from 'components/DepositCapMessage'
-import DisplayCurrency from 'components/DisplayCurrency'
import Divider from 'components/Divider'
import { Gauge } from 'components/Gauge'
import { ArrowRight, ExclamationMarkCircled } from 'components/Icons'
@@ -10,14 +11,14 @@ import Slider from 'components/Slider'
import Switch from 'components/Switch'
import Text from 'components/Text'
import TokenInput from 'components/TokenInput'
+import { ASSETS } from 'constants/assets'
import { BN_ZERO } from 'constants/math'
-import usePrice from 'hooks/usePrice'
-import { useMemo, useState } from 'react'
-import useStore from 'store'
+import usePrices from 'hooks/usePrices'
import { BNCoin } from 'types/classes/BNCoin'
import { accumulateAmounts } from 'utils/accounts'
-import { findCoinByDenom } from 'utils/assets'
-import { BN } from 'utils/helpers'
+import { byDenom } from 'utils/array'
+import { BN, getValueFromBNCoins } from 'utils/helpers'
+import { ORACLE_DENOM } from 'constants/oracle'
interface Props {
deposits: BNCoin[]
@@ -28,13 +29,14 @@ interface Props {
onChangeDeposits: (deposits: BNCoin[]) => void
onChangeIsCustomRatio: (isCustomRatio: boolean) => void
toggleOpen: (index: number) => void
+ displayCurrency: string
depositCapReachedCoins: BNCoin[]
}
export default function VaultDeposit(props: Props) {
- const { deposits, primaryAsset, secondaryAsset, account, onChangeDeposits } = props
- const baseCurrency = useStore((s) => s.baseCurrency)
-
+ const { deposits, primaryAsset, secondaryAsset, account, onChangeDeposits, displayCurrency } =
+ props
+ const displayCurrencyAsset = ASSETS.find(byDenom(displayCurrency)) ?? ASSETS[0]
const [availablePrimaryAmount, availableSecondaryAmount] = useMemo(
() => [
accumulateAmounts(primaryAsset.denom, [...account.deposits, ...account.lends]),
@@ -42,37 +44,35 @@ export default function VaultDeposit(props: Props) {
],
[account.deposits, account.lends, primaryAsset.denom, secondaryAsset.denom],
)
-
- const primaryPrice = usePrice(primaryAsset.denom)
- const secondaryPrice = usePrice(secondaryAsset.denom)
+ const { data: prices } = usePrices()
+ const primaryPrice = prices.find(byDenom(primaryAsset.denom))?.amount ?? BN_ZERO
+ const secondaryPrice = prices.find(byDenom(secondaryAsset.denom))?.amount ?? BN_ZERO
const primaryCoin = useMemo(() => {
- const amount = findCoinByDenom(primaryAsset.denom, deposits)?.amount.toString() || '0'
- return new BNCoin({ denom: primaryAsset.denom, amount })
+ const amount = deposits.find(byDenom(primaryAsset.denom))?.amount ?? BN_ZERO
+ return new BNCoin({ denom: primaryAsset.denom, amount: amount.toString() })
}, [deposits, primaryAsset.denom])
const secondaryCoin = useMemo(() => {
- const amount = findCoinByDenom(secondaryAsset.denom, deposits)?.amount.toString() || '0'
- return new BNCoin({ denom: secondaryAsset.denom, amount })
+ const amount = deposits.find(byDenom(secondaryAsset.denom))?.amount ?? BN_ZERO
+ return new BNCoin({ denom: secondaryAsset.denom, amount: amount.toString() })
}, [deposits, secondaryAsset.denom])
const primaryValue = useMemo(
- () => primaryCoin.amount.multipliedBy(primaryPrice),
- [primaryCoin, primaryPrice],
- )
- const secondaryValue = useMemo(
- () => secondaryCoin.amount.multipliedBy(secondaryPrice),
- [secondaryCoin, secondaryPrice],
+ () => getValueFromBNCoins([primaryCoin], prices),
+ [primaryCoin, prices],
)
+
const totalValue = useMemo(
- () => primaryValue.plus(secondaryValue),
- [primaryValue, secondaryValue],
+ () => getValueFromBNCoins([primaryCoin, secondaryCoin], prices),
+ [primaryCoin, secondaryCoin, prices],
)
const primaryValuePercentage = useMemo(() => {
const value = primaryValue.dividedBy(totalValue).multipliedBy(100).decimalPlaces(2).toNumber()
return isNaN(value) ? 50 : value
}, [primaryValue, totalValue])
+
const secondaryValuePercentage = useMemo(
() => new BigNumber(100).minus(primaryValuePercentage).integerValue(2).toNumber() ?? 50,
[primaryValuePercentage],
@@ -237,9 +237,7 @@ export default function VaultDeposit(props: Props) {
{`${primaryAsset.symbol}-${secondaryAsset.symbol} Deposit Value`}
-
+
|