diff --git a/apps/main/src/llamalend/features/borrow/components/CreateLoanForm.tsx b/apps/main/src/llamalend/features/borrow/components/CreateLoanForm.tsx index a4010d9fe..907b79291 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 = ({ testId="borrow-debt-input" network={network} maxFieldName="maxDebt" + message={ + values.maxDebt && + } /> 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..929d82f36 --- /dev/null +++ b/apps/main/src/llamalend/widgets/manage-loan/FormMessage.tsx @@ -0,0 +1,23 @@ +import Stack from '@mui/material/Stack' +import Typography from '@mui/material/Typography' +import { Decimal, formatNumber } from '@ui-kit/utils' + +export const FormMessage = ({ + value, + label, + symbol, +}: { + value: Decimal + label: string + symbol: string | undefined +}) => ( + + + {label} + + + {formatNumber(value, { abbreviate: true }) ?? '...'} + {symbol} + + +) 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 = // 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 @@ -68,7 +70,7 @@ export const LoanFormTokenInput = ({ balance, symbol: token?.symbol, loading: isBalanceLoading || isMaxLoading }),