MP-3376: overpay on repay (#438)

* MP-3376: overpay on repay

* fix: remove Buffer and fix NaN on useSpring

src/components/Account/AccountBalancesTable/index.tsx

@@ -19,7 +19,6 @@ import { FormattedNumber } from 'components/FormattedNumber'
 import { SortAsc, SortDesc, SortNone } from 'components/Icons'
 import Text from 'components/Text'
 import { ASSETS } from 'constants/assets'
-import { BN_ZERO } from 'constants/math'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useCurrentAccount from 'hooks/useCurrentAccount'
 import useStore from 'store'
@@ -85,8 +84,8 @@ export default function Index(props: Props) {
         accessorKey: 'size',
         header: 'Size',
         cell: ({ row }) => {
-          if (row.original.amount.isEqualTo(BN_ZERO))
+          if (row.original.type === 'vault')
-            return <span className='w-full text-xs text-center'>&ndash;</span>
+            return <p className='text-xs text-right number'>&ndash;</p>
           const color = getAmountChangeColor(row.original.type, row.original.amountChange)
           const amount = demagnify(
             row.original.amount,

src/components/FormattedNumber.tsx

@@ -28,8 +28,8 @@ export const FormattedNumber = React.memo(
     }, [props.amount])
 
     const springAmount = useSpring({
-      number: props.amount,
+      number: isNaN(props.amount) ? 0 : props.amount,
-      from: { number: prevAmountRef.current },
+      from: { number: isNaN(prevAmountRef.current) ? 0 : prevAmountRef.current },
       config: { duration: 1000 },
     })
 

src/components/Modals/BorrowModal.tsx

@@ -65,6 +65,7 @@ function BorrowModal(props: Props) {
   const { simulateBorrow, simulateRepay } = useUpdatedAccount(account)
 
   const { autoLendEnabledAccountIds } = useAutoLend()
+  const apr = modal.marketData?.borrowRate ?? '0'
   const isAutoLendEnabled = autoLendEnabledAccountIds.includes(account.id)
   const { computeMaxBorrowAmount } = useHealthComputer(account)
 
@@ -112,7 +113,13 @@ function BorrowModal(props: Props) {
     (newAmount: BigNumber) => {
       const coin = BNCoin.fromDenomAndBigNumber(asset.denom, newAmount)
       if (!amount.isEqualTo(newAmount)) setAmount(newAmount)
-      if (isRepay) simulateRepay(coin)
+      if (isRepay) {
+        const totalDebt = BN(getDebtAmount(modal))
+        const repayCoin = coin.amount.isGreaterThan(totalDebt)
+          ? BNCoin.fromDenomAndBigNumber(asset.denom, totalDebt)
+          : coin
+        simulateRepay(repayCoin)
+      }
     },
     [asset, amount, isRepay, simulateRepay],
   )
@@ -124,7 +131,10 @@ function BorrowModal(props: Props) {
       const lendBalance = account.lends.find(byDenom(asset.denom))?.amount ?? BN_ZERO
       const maxBalance = depositBalance.plus(lendBalance)
       const totalDebt = BN(getDebtAmount(modal))
-      const maxRepayAmount = BigNumber.min(maxBalance, totalDebt)
+      const maxRepayAmount = BigNumber.min(
+        maxBalance,
+        totalDebt.times(1 + Number(apr) / 365 / 24).integerValue(),
+      )
       setMax(maxRepayAmount)
       return
     }