From 918cc2e4aa851f32d0bafaeab7e9719abccb7d51 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Thu, 20 Nov 2025 11:42:11 +0100
Subject: [PATCH 1/2] feat: show max debt on new borrow form

---
 .../borrow/components/CreateLoanForm.tsx      |  4 ++++
 .../widgets/manage-loan/FormMessage.tsx       | 21 +++++++++++++++++++
 .../manage-loan/LoanFormTokenInput.tsx        |  6 ++++--
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 apps/main/src/llamalend/widgets/manage-loan/FormMessage.tsx

diff --git a/apps/main/src/llamalend/features/borrow/components/CreateLoanForm.tsx b/apps/main/src/llamalend/features/borrow/components/CreateLoanForm.tsx
index e16408b79..2636227c3 100644
--- a/apps/main/src/llamalend/features/borrow/components/CreateLoanForm.tsx
+++ b/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>
 
diff --git a/apps/main/src/llamalend/widgets/manage-loan/FormMessage.tsx b/apps/main/src/llamalend/widgets/manage-loan/FormMessage.tsx
new file mode 100644
index 000000000..02747e059
--- /dev/null
+++ b/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>
+)
diff --git a/apps/main/src/llamalend/widgets/manage-loan/LoanFormTokenInput.tsx b/apps/main/src/llamalend/widgets/manage-loan/LoanFormTokenInput.tsx
index 314479c96..f87e0216b 100644
--- a/apps/main/src/llamalend/widgets/manage-loan/LoanFormTokenInput.tsx
+++ b/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 }),

From 889604db71de642597bbe311e09a29457e38cf6b Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Thu, 20 Nov 2025 13:42:52 +0100
Subject: [PATCH 2/2] fix: font size

---
 .../src/llamalend/widgets/manage-loan/FormMessage.tsx  | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/main/src/llamalend/widgets/manage-loan/FormMessage.tsx b/apps/main/src/llamalend/widgets/manage-loan/FormMessage.tsx
index 1067ce870..929d82f36 100644
--- a/apps/main/src/llamalend/widgets/manage-loan/FormMessage.tsx
+++ b/apps/main/src/llamalend/widgets/manage-loan/FormMessage.tsx
@@ -11,11 +11,13 @@ export const FormMessage = ({
   label: string
   symbol: string | undefined
 }) => (
-  <Typography component={Stack} alignItems="center" direction="row" gap={1}>
-    {label}
-    <Typography color="text.secondary">
+  <Stack alignItems="center" direction="row" gap={1}>
+    <Typography color="text.secondary" variant="bodyXsRegular">
+      {label}
+    </Typography>
+    <Typography color="text.tertiary" variant="bodyXsRegular">
       {formatNumber(value, { abbreviate: true }) ?? '...'}
       {symbol}
     </Typography>
-  </Typography>
+  </Stack>
 )