feat: show max debt on new borrow form

Author: DanielSchiavini

apps/main/src/llamalend/features/borrow/components/CreateLoanForm.tsx

@@ -3,6 +3,7 @@ import { BorrowPreset } from '@/llamalend/constants'
 import { hasLeverage } from '@/llamalend/llama.utils'
 import type { LlamaMarketTemplate, NetworkDict } from '@/llamalend/llamalend.types'
 import type { CreateLoanOptions } from '@/llamalend/mutations/create-loan.mutation'
+import { FormMessage } from '@/llamalend/widgets/manage-loan/FormMessage'
 import { LoanFormAlerts } from '@/llamalend/widgets/manage-loan/LoanFormAlerts'
 import { LoanFormTokenInput } from '@/llamalend/widgets/manage-loan/LoanFormTokenInput'
 import { LoanFormWrapper } from '@/llamalend/widgets/manage-loan/LoanFormWrapper'
@@ -115,6 +116,9 @@ export const CreateLoanForm = <ChainId extends IChainId>({
           testId="borrow-debt-input"
           network={network}
           maxFieldName="maxDebt"
+          message={
+            values.maxDebt && <FormMessage label={t`Max borrow:`} value={values.maxDebt} symbol={borrowToken?.symbol} />
+          }
         />
       </Stack>
 

apps/main/src/llamalend/widgets/manage-loan/FormMessage.tsx

@@ -0,0 +1,21 @@
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+import { formatNumber } from '@ui-kit/utils'
+
+export const FormMessage = ({
+  value,
+  label,
+  symbol,
+}: {
+  value: Decimal
+  label: string
+  symbol: string | undefined
+}) => (
+  <Typography component={Stack} alignItems="center" direction="row" gap={1}>
+    {label}
+    <Typography color="text.secondary">
+      {formatNumber(value, { abbreviate: true }) ?? '...'}
+      {symbol}
+    </Typography>
+  </Typography>
+)

apps/main/src/llamalend/widgets/manage-loan/LoanFormTokenInput.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { type ReactNode, useCallback, useMemo } from 'react'
 import type { FieldPath, FieldPathValue, FieldValues, UseFormReturn } from 'react-hook-form'
 import type { Address } from 'viem'
 import { useAccount } from 'wagmi'
@@ -24,6 +24,7 @@ export const LoanFormTokenInput = <TFieldValues extends FieldValues, TFieldName
   isError,
   form,
   testId,
+  message,
   network,
   maxFieldName,
 }: {
@@ -36,6 +37,7 @@ export const LoanFormTokenInput = <TFieldValues extends FieldValues, TFieldName
   name: TFieldName
   form: UseFormReturn<TFieldValues> // the form, used to set the value and get errors
   testId: string
+  message?: ReactNode
   network: LlamaNetwork
   /** Optional related max-field name whose errors should be reflected here */
   maxFieldName?: FieldPath<TFieldValues>
@@ -68,7 +70,7 @@ export const LoanFormTokenInput = <TFieldValues extends FieldValues, TFieldName
         [form, name],
       )}
       isError={isError || isBalanceError || !!errors[name] || !!relatedMaxFieldError}
-      message={errors[name]?.message ?? relatedMaxFieldError?.message}
+      message={errors[name]?.message ?? relatedMaxFieldError?.message ?? message}
       walletBalance={useMemo(
         // todo: separate isLoading for balance and for maxBalance
         () => ({ balance, symbol: token?.symbol, loading: isBalanceLoading || isMaxLoading }),