diff --git a/src/components/Account/AccountBalancesTable/index.tsx b/src/components/Account/AccountBalancesTable/index.tsx index e12344b3..c48990ee 100644 --- a/src/components/Account/AccountBalancesTable/index.tsx +++ b/src/components/Account/AccountBalancesTable/index.tsx @@ -24,8 +24,7 @@ import useCurrentAccount from 'hooks/useCurrentAccount' import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' import { getAssetByDenom } from 'utils/assets' -import { demagnify } from 'utils/formatters' -import { BN } from 'utils/helpers' +import { demagnify, formatAmountToPrecision } from 'utils/formatters' import { getPage, getRoute } from 'utils/route' interface Props { @@ -41,6 +40,7 @@ export default function Index(props: Props) { const navigate = useNavigate() const { pathname } = useLocation() const address = useStore((s) => s.address) + const baseCurrency = useStore((s) => s.baseCurrency) const [sorting, setSorting] = useState([]) const updatedAccount = useStore((s) => s.updatedAccount) const accountBalanceData = useAccountBalanceData({ @@ -94,8 +94,8 @@ export default function Index(props: Props) { return ( ) @@ -119,7 +119,7 @@ export default function Index(props: Props) { }, }, ], - [], + [baseCurrency.decimals], ) const table = useReactTable({ diff --git a/src/components/Account/AccountFund/AccountFundContent.tsx b/src/components/Account/AccountFund/AccountFundContent.tsx index f46b1bac..4c08a357 100644 --- a/src/components/Account/AccountFund/AccountFundContent.tsx +++ b/src/components/Account/AccountFund/AccountFundContent.tsx @@ -44,10 +44,10 @@ export default function AccountFundContent(props: Props) { const [fundingAssets, setFundingAssets] = useState([]) const { data: marketAssets } = useMarketAssets() const { data: walletBalances } = useWalletBalances(props.address) - const { autoLendEnabledAccountIds, enableAutoLendAccountId } = useAutoLend() + const { autoLendEnabledAccountIds } = useAutoLend() const [isLending, toggleIsLending] = useToggle(lendAssets) const { simulateDeposits } = useUpdatedAccount(props.account) - + const autoLendEnabled = autoLendEnabledAccountIds.includes(props.accountId) const baseAsset = getBaseAsset() const hasAssetSelected = fundingAssets.length > 0 @@ -126,16 +126,8 @@ export default function AccountFundContent(props: Props) { }, []) useEffect(() => { - const autoLendEnabled = autoLendEnabledAccountIds.includes(props.accountId) - if (lendAssets && !autoLendEnabled) enableAutoLendAccountId(props.accountId) toggleIsLending(autoLendEnabled) - }, [ - props.accountId, - autoLendEnabledAccountIds, - toggleIsLending, - lendAssets, - enableAutoLendAccountId, - ]) + }, [autoLendEnabled, toggleIsLending]) useEffect(() => { if (accounts?.length === 1 && isLending) setLendAssets(true) diff --git a/src/components/Modals/BorrowModal.tsx b/src/components/Modals/BorrowModal.tsx index 551db4cb..d7aba172 100644 --- a/src/components/Modals/BorrowModal.tsx +++ b/src/components/Modals/BorrowModal.tsx @@ -1,5 +1,5 @@ import BigNumber from 'bignumber.js' -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' import AccountSummary from 'components/Account/AccountSummary' import AssetImage from 'components/AssetImage' @@ -69,7 +69,11 @@ function BorrowModal(props: Props) { const isAutoLendEnabled = autoLendEnabledAccountIds.includes(account.id) const { computeMaxBorrowAmount } = useHealthComputer(account) const totalDebt = BN(getDebtAmount(modal)) - const totalDebtRepayAmount = getDebtAmountWithInterest(totalDebt, Number(apr)) + + const totalDebtRepayAmount = useMemo( + () => getDebtAmountWithInterest(totalDebt, Number(apr)), + [totalDebt, apr], + ) function resetState() { setAmount(BN_ZERO) @@ -112,16 +116,28 @@ function BorrowModal(props: Props) { (newAmount: BigNumber) => { const coin = BNCoin.fromDenomAndBigNumber(asset.denom, newAmount) if (!amount.isEqualTo(newAmount)) setAmount(newAmount) - if (isRepay) { - const repayCoin = coin.amount.isGreaterThan(totalDebt) - ? BNCoin.fromDenomAndBigNumber(asset.denom, totalDebt) - : coin - simulateRepay(repayCoin) - } + if (!isRepay) return + const repayCoin = coin.amount.isGreaterThan(totalDebt) + ? BNCoin.fromDenomAndBigNumber(asset.denom, totalDebt) + : coin + simulateRepay(repayCoin) }, - [asset, amount, isRepay, simulateRepay, modal, totalDebt, totalDebtRepayAmount], + [amount, asset.denom, isRepay, simulateRepay, totalDebt], ) + const maxBorrow = useMemo(() => { + const maxBorrowAmount = isRepay + ? BN_ZERO + : computeMaxBorrowAmount(asset.denom, borrowToWallet ? 'wallet' : 'deposit') + + return BigNumber.min(maxBorrowAmount, modal.marketData?.liquidity?.amount || 0) + }, [asset.denom, borrowToWallet, computeMaxBorrowAmount, isRepay, modal.marketData]) + + useEffect(() => { + if (!account || isRepay) return + if (maxBorrow !== max) setMax(maxBorrow) + }, [account, isRepay, maxBorrow, max]) + useEffect(() => { if (!account) return if (isRepay) { @@ -132,23 +148,7 @@ function BorrowModal(props: Props) { setMax(maxRepayAmount) return } - - const maxBorrowAmount = computeMaxBorrowAmount( - asset.denom, - borrowToWallet ? 'wallet' : 'deposit', - ) - - setMax(BigNumber.min(maxBorrowAmount, modal.marketData?.liquidity?.amount || 0)) - }, [ - account, - isRepay, - modal, - asset.denom, - computeMaxBorrowAmount, - borrowToWallet, - apr, - totalDebtRepayAmount, - ]) + }, [account, asset.denom, isRepay, totalDebtRepayAmount]) useEffect(() => { if (amount.isGreaterThan(max)) { diff --git a/src/hooks/useUpdatedAccount/index.ts b/src/hooks/useUpdatedAccount/index.ts index dc4ad783..56b311bb 100644 --- a/src/hooks/useUpdatedAccount/index.ts +++ b/src/hooks/useUpdatedAccount/index.ts @@ -61,8 +61,8 @@ export function useUpdatedAccount(account?: Account) { const simulateBorrow = useCallback( (target: 'wallet' | 'deposit' | 'lend', coin: BNCoin) => { if (!account) return - removeDeposits([]) - removeLends([]) + addDeposits([]) + addLends([]) addDebts([coin]) if (target === 'deposit') addDeposits([coin]) if (target === 'lend') addLends([coin]) diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts index b7ba0518..cc03ce54 100644 --- a/src/utils/formatters.ts +++ b/src/utils/formatters.ts @@ -6,7 +6,7 @@ import { BN_ZERO } from 'constants/math' import { ORACLE_DENOM } from 'constants/oracle' import { BNCoin } from 'types/classes/BNCoin' import { byDenom } from 'utils/array' -import { getAllAssets, getEnabledMarketAssets } from 'utils/assets' +import { getAllAssets } from 'utils/assets' import { BN } from 'utils/helpers' export function truncate(text = '', [h, t]: [number, number] = [6, 6]): string { @@ -162,6 +162,10 @@ export function formatAmountWithSymbol(coin: Coin) { }) } +export function formatAmountToPrecision(amount: number | string, decimals: number) { + return Number(BN(amount).toPrecision(decimals)) +} + export const convertPercentage = (percent: number) => { let percentage = percent if (percent >= 100) percentage = 100