improve repay modal ux

components/RepayForm.tsx

@@ -66,16 +66,21 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
     return amount
   }, [bank, mangoAccount])
 
-  const hasWalletBalanceToRepay = useMemo(() => {
-    if (!bank || !inputAmount) return true
-    if (!walletTokens?.length) return false
+  const walletBalance = useMemo(() => {
+    if (!bank || !walletTokens?.length) return 0
     const hasBorrowToken = walletTokens.find(
       (token) => token.mint.toString() === bank.mint.toString(),
     )
-    if (hasBorrowToken) {
-      return hasBorrowToken.uiAmount >= parseFloat(inputAmount)
-    } else return false
-  }, [bank, inputAmount, walletTokens])
+
+    return hasBorrowToken?.uiAmount || 0
+  }, [bank, walletTokens])
+
+  const max = useMemo(() => {
+    if (!walletBalance) return new Decimal(0)
+    return walletBalance >= borrowAmount.toNumber()
+      ? borrowAmount
+      : new Decimal(walletBalance)
+  }, [borrowAmount, walletBalance])
 
   useEffect(() => {
     if (token && !borrowAmount.eq(0)) {
@@ -85,26 +90,23 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
 
   const setMax = useCallback(() => {
     if (!bank) return
-    const amount = new Decimal(borrowAmount).toDecimalPlaces(
-      bank.mintDecimals,
-      Decimal.ROUND_UP,
-    )
+    const amount = max.toDecimalPlaces(bank.mintDecimals, Decimal.ROUND_UP)
     setInputAmount(amount.toFixed())
     setSizePercentage('100')
-  }, [bank, borrowAmount])
+  }, [bank, max])
 
   const handleSizePercentage = useCallback(
     (percentage: string) => {
       if (!bank) return
       setSizePercentage(percentage)
-      const amount = new Decimal(borrowAmount)
+      const amount = max
         .mul(percentage)
         .div(100)
         .toDecimalPlaces(bank.mintDecimals, Decimal.ROUND_UP)
 
       setInputAmount(amount.toFixed())
     },
-    [bank, borrowAmount],
+    [bank, max],
   )
 
   const handleSelectToken = (token: string) => {
@@ -158,7 +160,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
         })
       }
     },
-    [bank, publicKey?.toBase58(), sizePercentage],
+    [bank, borrowAmount, publicKey, onSuccess, sizePercentage],
   )
 
   useEffect(() => {
@@ -167,7 +169,9 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
     }
   }, [token, banks, selectedToken])
 
-  const outstandingAmount = borrowAmount.toNumber() - parseFloat(inputAmount)
+  const outstandingAmount = inputAmount
+    ? borrowAmount.toNumber() - parseFloat(inputAmount)
+    : borrowAmount.toNumber()
   const isDeposit = parseFloat(inputAmount) > borrowAmount.toNumber()
 
   return banks.length ? (
@@ -211,9 +215,9 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
                   <MaxAmountButton
                     className="mb-2"
                     decimals={bank.mintDecimals}
-                    label={t('amount-owed')}
+                    label={t('max')}
                     onClick={setMax}
-                    value={borrowAmount}
+                    value={max}
                   />
                 ) : null}
               </div>
@@ -279,7 +283,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
                 ) : null}
                 <div className="flex justify-between">
                   <div className="flex items-center">
-                    <p>{t('outstanding-balance')}</p>
+                    <p>{t('outstanding-borrow')}</p>
                   </div>
                   <p className="font-mono text-th-fgd-2">
                     {outstandingAmount > 0
@@ -294,7 +298,8 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
             ) : null}
           </div>
           <div>
-            {!hasWalletBalanceToRepay ? (
+            {(borrowAmount.toNumber() && max.eq(0)) ||
+            (inputAmount && new Decimal(inputAmount).gt(max)) ? (
               <div className="pb-3">
                 <InlineNotification
                   desc={t('error-repay-insufficient-funds', {

public/locales/en/common.json

@@ -89,7 +89,7 @@
   "enable-notifications": "Enable Notifications",
   "equity": "Equity",
   "error-borrow-exceeds-limit": "Maximum borrow for the current period is {{remaining}}. New period starts {{resetTime}}",
-  "error-repay-insufficient-funds": "Not enough {{token}} in your wallet to repay this amount",
+  "error-repay-insufficient-funds": "Not enough {{token}} in your wallet",
   "error-token-positions-full": "You've used all of your token account slots. Close unused slots to add this token to your account or open a new account.",
   "explore": "Explore",
   "explorer": "Explorer",
@@ -141,7 +141,7 @@
   "open-account": "Open New Account",
   "operational": "Operational",
   "optional": "Optional",
-  "outstanding-balance": "Outstanding Balance",
+  "outstanding-borrow": "Outstanding Borrow",
   "overview": "Overview",
   "perp": "Perp",
   "perp-markets": "Perp Markets",

public/locales/es/common.json

@@ -89,7 +89,7 @@
   "enable-notifications": "Enable Notifications",
   "equity": "Equity",
   "error-borrow-exceeds-limit": "Maximum borrow for the current period is {{remaining}}. New period starts {{resetTime}}",
-  "error-repay-insufficient-funds": "Not enough {{token}} in your wallet to repay this amount",
+  "error-repay-insufficient-funds": "Not enough {{token}} in your wallet",
   "error-token-positions-full": "You've used all of your token account slots. Close unused slots to add this token to your account or open a new account.",
   "explore": "Explore",
   "explorer": "Explorer",
@@ -141,7 +141,7 @@
   "open-account": "Open New Account",
   "operational": "Operational",
   "optional": "Optional",
-  "outstanding-balance": "Outstanding Balance",
+  "outstanding-borrow": "Outstanding Borrow",
   "overview": "Overview",
   "perp": "Perp",
   "perp-markets": "Perp Markets",

public/locales/pt/common.json

@@ -141,7 +141,7 @@
   "open-account": "Abrir Nova Conta",
   "operational": "Operacional",
   "optional": "Opcional",
-  "outstanding-balance": "Saldo Pendente",
+  "outstanding-borrow": "Saldo Pendente",
   "overview": "Visão Geral",
   "perp": "Perp",
   "perp-markets": "Mercados Perp",

public/locales/ru/common.json

@@ -89,7 +89,7 @@
   "enable-notifications": "Enable Notifications",
   "equity": "Equity",
   "error-borrow-exceeds-limit": "Maximum borrow for the current period is {{remaining}}. New period starts {{resetTime}}",
-  "error-repay-insufficient-funds": "Not enough {{token}} in your wallet to repay this amount",
+  "error-repay-insufficient-funds": "Not enough {{token}} in your wallet",
   "error-token-positions-full": "You've used all of your token account slots. Close unused slots to add this token to your account or open a new account.",
   "explore": "Explore",
   "explorer": "Explorer",
@@ -141,7 +141,7 @@
   "open-account": "Open New Account",
   "operational": "Operational",
   "optional": "Optional",
-  "outstanding-balance": "Outstanding Balance",
+  "outstanding-borrow": "Outstanding Borrow",
   "overview": "Overview",
   "perp": "Perp",
   "perp-markets": "Perp Markets",

public/locales/zh/common.json

@@ -140,7 +140,7 @@
   "open-account": "建立新帐户",
   "operational": "运行中",
   "optional": "可选",
-  "outstanding-balance": "未结余额",
+  "outstanding-borrow": "未结余额",
   "overview": "摘要",
   "perp": "合约",
   "perp-markets": "合约市场",

public/locales/zh_tw/common.json

@@ -140,7 +140,7 @@
   "open-account": "建立新帳戶",
   "operational": "運行中",
   "optional": "可選",
-  "outstanding-balance": "未結餘額",
+  "outstanding-borrow": "未結餘額",
   "overview": "摘要",
   "perp": "合約",
   "perp-markets": "合約市場",