Post demo fixes (#458)

* fix: show precission

* fix: fixed borrow to wallet

* fix: fixed autoLend on funding

* fix: adjusted according to feedback

* fix: typo

* fix: typo

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<SortingState>([])
   const updatedAccount = useStore((s) => s.updatedAccount)
   const accountBalanceData = useAccountBalanceData({
@@ -94,8 +94,8 @@ export default function Index(props: Props) {
           return (
             <FormattedNumber
               className={classNames('text-xs text-right', color)}
-              amount={Number(BN(amount).abs())}
-              options={{ maxDecimals: 4, abbreviated: true }}
+              amount={formatAmountToPrecision(amount, baseCurrency.decimals)}
+              options={{ maxDecimals: baseCurrency.decimals, minDecimals: 0, abbreviated: true }}
               animate
             />
           )
@@ -119,7 +119,7 @@ export default function Index(props: Props) {
         },
       },
     ],
-    [],
+    [baseCurrency.decimals],
   )
 
   const table = useReactTable({

src/components/Account/AccountFund/AccountFundContent.tsx

@@ -44,10 +44,10 @@ export default function AccountFundContent(props: Props) {
   const [fundingAssets, setFundingAssets] = useState<BNCoin[]>([])
   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)

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)) {

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])

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