From d014f54b67d9c3c7e52b94a79b2d61e484c0ea0a Mon Sep 17 00:00:00 2001
From: Rytis Grincevicius <rytis.grincevicius@gmail.com>
Date: Wed, 10 Dec 2025 16:12:50 +0200
Subject: [PATCH 1/3] feat: calculate borrowing apy

---
 apps/web-app/package.json                     |   2 +-
 .../web-app/src/components/FormComponents.tsx |  51 ++++---
 .../components/BorrowDialog/BorrowDialog.tsx  | 142 +++++++++++++++++-
 .../components/LendDialog/LendDialog.tsx      |   2 +-
 .../MoneyMarket/hooks/use-money-positions.ts  |  20 +++
 .../src/components/ui/health-factor-bar.tsx   | 103 +++++++++++++
 apps/web-app/src/routes/money-market.tsx      |  15 +-
 packages/sdk/src/types.ts                     |   2 +
 packages/shared/src/lib/decimal.ts            |   6 +
 pnpm-lock.yaml                                |  77 +++++-----
 10 files changed, 355 insertions(+), 65 deletions(-)
 create mode 100644 apps/web-app/src/components/MoneyMarket/hooks/use-money-positions.ts
 create mode 100644 apps/web-app/src/components/ui/health-factor-bar.tsx

diff --git a/apps/web-app/package.json b/apps/web-app/package.json
index 8d6d43b..c91ada8 100644
--- a/apps/web-app/package.json
+++ b/apps/web-app/package.json
@@ -23,7 +23,7 @@
     "@tailwindcss/vite": "4.1.13",
     "@tanstack/devtools-vite": "0.3.3",
     "@tanstack/react-devtools": "0.7.0",
-    "@tanstack/react-form": "1.23.0",
+    "@tanstack/react-form": "1.27.2",
     "@tanstack/react-query": "5.90.2",
     "@tanstack/react-query-devtools": "5.90.2",
     "@tanstack/react-router": "1.131.50",
diff --git a/apps/web-app/src/components/FormComponents.tsx b/apps/web-app/src/components/FormComponents.tsx
index 2893b72..3cb9de4 100644
--- a/apps/web-app/src/components/FormComponents.tsx
+++ b/apps/web-app/src/components/FormComponents.tsx
@@ -10,7 +10,7 @@ import { Switch as ShadcnSwitch } from '@/components/ui/switch';
 import { Textarea as ShadcnTextarea } from '@/components/ui/textarea';
 import { Decimal } from '@sovryn/slayer-shared';
 import { Loader2Icon } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import type { GetBalanceData } from 'wagmi/query';
 import { Field, FieldDescription, FieldError, FieldLabel } from './ui/field';
 
@@ -24,7 +24,7 @@ export function SubscribeButton({ label }: { label: string }) {
         <Button
           type="submit"
           disabled={isSubmitting || !isFormValid}
-          form={form.formId()}
+          form={form.formId}
         >
           <Loader2Icon
             className={`mr-2 h-4 w-4 animate-spin ${isSubmitting ? '' : 'hidden'}`}
@@ -60,7 +60,7 @@ export function TextField({
   placeholder,
   description,
 }: {
-  label: string;
+  label: ReactNode;
   placeholder?: string;
   description?: string;
 }) {
@@ -69,8 +69,9 @@ export function TextField({
 
   return (
     <Field>
-      <FieldLabel htmlFor={label}>{label}</FieldLabel>
+      <FieldLabel htmlFor={field.name}>{label}</FieldLabel>
       <Input
+        id={field.name}
         value={field.state.value}
         placeholder={placeholder}
         onBlur={field.handleBlur}
@@ -87,7 +88,7 @@ export function TextArea({
   rows = 3,
   description,
 }: {
-  label: string;
+  label: ReactNode;
   rows?: number;
   description?: string;
 }) {
@@ -96,9 +97,9 @@ export function TextArea({
 
   return (
     <Field>
-      <FieldLabel htmlFor={label}>{label}</FieldLabel>
+      <FieldLabel htmlFor={field.name}>{label}</FieldLabel>
       <ShadcnTextarea
-        id={label}
+        id={field.name}
         value={field.state.value}
         onBlur={field.handleBlur}
         rows={rows}
@@ -116,7 +117,7 @@ export function Select({
   placeholder,
   description,
 }: {
-  label: string;
+  label: ReactNode;
   values: Array<{ label: string; value: string }>;
   placeholder?: string;
   description?: string;
@@ -126,7 +127,7 @@ export function Select({
 
   return (
     <Field>
-      <FieldLabel htmlFor={label}>{label}</FieldLabel>
+      <FieldLabel htmlFor={field.name}>{label}</FieldLabel>
       <ShadcnSelect.Select
         name={field.name}
         value={field.state.value}
@@ -156,7 +157,7 @@ export function Slider({
   label,
   description,
 }: {
-  label: string;
+  label: ReactNode;
   description?: string;
 }) {
   const field = useFieldContext<number>();
@@ -164,9 +165,9 @@ export function Slider({
 
   return (
     <Field>
-      <FieldLabel htmlFor={label}>{label}</FieldLabel>
+      <FieldLabel htmlFor={field.name}>{label}</FieldLabel>
       <ShadcnSlider
-        id={label}
+        id={field.name}
         onBlur={field.handleBlur}
         value={[field.state.value]}
         onValueChange={(value) => field.handleChange(value[0])}
@@ -181,7 +182,7 @@ export function Switch({
   label,
   description,
 }: {
-  label: string;
+  label: ReactNode;
   description?: string;
 }) {
   const field = useFieldContext<boolean>();
@@ -191,12 +192,12 @@ export function Switch({
     <Field>
       <div className="flex items-center gap-2">
         <ShadcnSwitch
-          id={label}
+          id={field.name}
           onBlur={field.handleBlur}
           checked={field.state.value}
           onCheckedChange={(checked) => field.handleChange(checked)}
         />
-        <FieldLabel htmlFor={label}>{label}</FieldLabel>
+        <FieldLabel htmlFor={field.name}>{label}</FieldLabel>
       </div>
       {description && <FieldDescription>{description}</FieldDescription>}
       {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
@@ -222,7 +223,7 @@ export function AmountField({
   description,
   balance,
 }: {
-  label: string;
+  label: ReactNode;
   placeholder?: string;
   description?: string;
   balance?: GetBalanceData;
@@ -236,14 +237,25 @@ export function AmountField({
 
   const handleChange = (input: string) => {
     setRenderedValue(input);
-    field.handleChange(tryDecimalValue(input));
+    field.setValue(tryDecimalValue(input) as never, {
+      dontRunListeners: true,
+    });
   };
 
+  useEffect(() => {
+    const unsub = field.store.subscribe(({ prevVal, currentVal }) => {
+      if (prevVal.value !== currentVal.value) {
+        setRenderedValue(tryDecimalValue(currentVal.value));
+      }
+    });
+
+    return unsub;
+  }, []);
+
   return (
     <Field>
-      <FieldLabel htmlFor={label}>
+      <FieldLabel htmlFor={field.name}>
         {label}
-
         {balance && (
           <span className="ml-2 text-sm font-normal text-gray-400">
             (Balance:{' '}
@@ -253,6 +265,7 @@ export function AmountField({
         )}
       </FieldLabel>
       <Input
+        id={field.name}
         value={renderedValue}
         placeholder={placeholder}
         onBlur={field.handleBlur}
diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx
index cd760b4..d4c182f 100644
--- a/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx
+++ b/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx
@@ -1,3 +1,4 @@
+import { AmountRenderer } from '@/components/ui/amount-renderer';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -8,15 +9,19 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { HealthFactorBar } from '@/components/ui/health-factor-bar';
 import { useAppForm } from '@/hooks/app-form';
 import { sdk } from '@/lib/sdk';
 import { useSlayerTx } from '@/lib/transactions';
 import { validateDecimal } from '@/lib/validations';
 import { BORROW_RATE_MODES } from '@sovryn/slayer-sdk';
+import { Decimal } from '@sovryn/slayer-shared';
+import { useCallback, useMemo } from 'react';
 import { useAccount } from 'wagmi';
 import z from 'zod';
 import { useStore } from 'zustand';
 import { useStoreWithEqualityFn } from 'zustand/traditional';
+import { useMoneyMarketPositions } from '../../hooks/use-money-positions';
 import { borrowRequestStore } from '../../stores/borrow-request.store';
 
 const schema = z.object({
@@ -24,8 +29,14 @@ const schema = z.object({
 });
 
 const BorrowDialogForm = () => {
+  const { address } = useAccount();
   const reserve = useStore(borrowRequestStore, (state) => state.reserve!);
 
+  const { data: items } = useMoneyMarketPositions({
+    pool: reserve.pool.id || 'default',
+    address: address!,
+  });
+
   const { begin } = useSlayerTx({
     onClosed: (ok: boolean) => {
       console.log('borrow tx modal closed, success:', ok);
@@ -35,7 +46,6 @@ const BorrowDialogForm = () => {
       }
     },
   });
-  const { address } = useAccount();
 
   const form = useAppForm({
     defaultValues: {
@@ -76,8 +86,53 @@ const BorrowDialogForm = () => {
     e.preventDefault();
   };
 
+  const data = useMemo(() => {
+    const position = (items?.data?.positions || []).find(
+      (item) => item.reserve.id === reserve.id,
+    );
+    if (position && items?.data) {
+      return {
+        position,
+        summary: items.data.summary,
+      };
+    }
+    return null;
+  }, [items]);
+
+  const calculateLiquidationPrice = useCallback(
+    (amount: string) => {
+      if (!data || Decimal.from(data.summary.collateralBalanceUsd).eq(0)) {
+        return Decimal.INFINITY;
+      }
+
+      return Decimal.from(
+        Decimal.from(amount || '0').mul(data.position.reserve.priceUsd),
+      )
+        .mul(data.summary.currentLiquidationThreshold)
+        .div(data.summary.collateralBalanceUsd);
+    },
+    [data],
+  );
+
+  const computeHealthFactor = useCallback(
+    (amount: string) => {
+      if (!data || Decimal.from(data.summary.totalBorrowsUsd).eq(0)) {
+        return Decimal.INFINITY;
+      }
+
+      return Decimal.from(data.summary.collateralBalanceUsd)
+        .mul(data.summary.currentLiquidationThreshold)
+        .div(
+          Decimal.from(data.summary.totalBorrowsUsd).add(
+            Decimal.from(amount || '0').mul(data.position.reserve.priceUsd),
+          ),
+        );
+    },
+    [data],
+  );
+
   return (
-    <form onSubmit={handleSubmit} id={form.formId()}>
+    <form onSubmit={handleSubmit} id={form.formId}>
       <DialogContent
         onInteractOutside={handleEscapes}
         onEscapeKeyDown={handleEscapes}
@@ -90,8 +145,89 @@ const BorrowDialogForm = () => {
           </DialogDescription>
         </DialogHeader>
         <form.AppField name="amount">
-          {(field) => <field.AmountField label="Amount to Borrow" />}
+          {(field) => (
+            <>
+              <field.AmountField
+                label={
+                  <div className="w-full flex flex-row gap-4 justify-between items-center">
+                    <span>Amount to borrow</span>
+                    <Button
+                      variant="link"
+                      size="sm"
+                      className="p-0"
+                      onClick={() => {
+                        field.setValue(
+                          Decimal.from(
+                            data?.position.availableToBorrow ?? '0',
+                          ).toString(Decimal.DEFAULT_PRECISION),
+                        );
+                      }}
+                    >
+                      Max:
+                      <AmountRenderer
+                        value={data?.position.availableToBorrow ?? '0'}
+                        suffix={data?.position.token.symbol}
+                        showApproxSign
+                      />
+                    </Button>
+                  </div>
+                }
+              />
+
+              <div>
+                <p>
+                  Collateral Ratio:
+                  <AmountRenderer
+                    value={computeHealthFactor(field.state.value ?? 0)
+                      .mul(100)
+                      .toNumber()
+                      .toFixed(8)}
+                    suffix="%"
+                    showApproxSign
+                  />
+                </p>
+
+                <HealthFactorBar
+                  value={computeHealthFactor(field.state.value).toNumber()}
+                  options={{
+                    start: 1,
+                    middleStart: 1.1,
+                    middleEnd: 1.5,
+                    end: 2,
+                  }}
+                />
+
+                <p>
+                  Borrow APY:
+                  <AmountRenderer
+                    value={data?.position.reserve.variableBorrowApy ?? '0'}
+                    suffix="%"
+                    showApproxSign
+                  />
+                </p>
+                <p>
+                  Liquidation price:
+                  <AmountRenderer
+                    value={calculateLiquidationPrice(
+                      field.state.value,
+                    ).toString()}
+                    showApproxSign
+                    prefix="$"
+                  />
+                </p>
+                <p>
+                  {data?.position.token.symbol} price:{' '}
+                  <AmountRenderer
+                    value={data?.position.reserve.priceUsd ?? '0'}
+                    prefix="$"
+                    showApproxSign
+                  />
+                </p>
+              </div>
+            </>
+          )}
         </form.AppField>
+
         <DialogFooter>
           <DialogClose asChild>
             <Button variant="secondary" type="button">
diff --git a/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx b/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx
index 4641a89..fcb9ce7 100644
--- a/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx
+++ b/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx
@@ -79,7 +79,7 @@ const LendDialogForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit} id={form.formId()}>
+    <form onSubmit={handleSubmit} id={form.formId}>
       <DialogContent
         onInteractOutside={handleEscapes}
         onEscapeKeyDown={handleEscapes}
diff --git a/apps/web-app/src/components/MoneyMarket/hooks/use-money-positions.ts b/apps/web-app/src/components/MoneyMarket/hooks/use-money-positions.ts
new file mode 100644
index 0000000..0c58f6c
--- /dev/null
+++ b/apps/web-app/src/components/MoneyMarket/hooks/use-money-positions.ts
@@ -0,0 +1,20 @@
+import { sdk } from '@/lib/sdk';
+import { useQuery } from '@tanstack/react-query';
+import type { Address } from 'viem';
+
+export const STALE_TIME = 1000 * 60 * 60; // 1 hour
+export const QUERY_KEY_MONEY_MARKET_POSITIONS = 'money-market:positions';
+
+export const useMoneyMarketPositions = ({
+  pool,
+  address,
+}: {
+  address: Address;
+  pool: string;
+}) =>
+  useQuery({
+    queryKey: ['money-market:positions', pool, address],
+    queryFn: () => sdk.moneyMarket.listUserPositions(pool, address!),
+    staleTime: STALE_TIME,
+    enabled: !!address && !!pool,
+  });
diff --git a/apps/web-app/src/components/ui/health-factor-bar.tsx b/apps/web-app/src/components/ui/health-factor-bar.tsx
new file mode 100644
index 0000000..2f04484
--- /dev/null
+++ b/apps/web-app/src/components/ui/health-factor-bar.tsx
@@ -0,0 +1,103 @@
+import clsx from 'clsx';
+import { useCallback, useMemo, type FC } from 'react';
+
+type HealthFactorBarProps = {
+  value: number;
+  options?: {
+    start: number;
+    middleStart: number;
+    middleEnd: number;
+    end: number;
+  };
+};
+
+export const HealthFactorBar: FC<HealthFactorBarProps> = ({
+  value,
+  options = { start: 1, middleStart: 1.1, middleEnd: 1.5, end: 2 },
+}) => {
+  const getBlurWidth = useCallback(
+    (start: number, end: number) => {
+      if (!value || value <= start) {
+        return 0;
+      }
+
+      return (value >= end ? 1 : (value - start) / (end - start)) * 100;
+    },
+    [value, options.start],
+  );
+
+  const caretPosition = useMemo(() => {
+    if (value <= options.start) {
+      return 0;
+    }
+    if (value >= options.end) {
+      return 100;
+    }
+    return ((value - options.start) / (options.end - options.start)) * 100;
+  }, [value, options.start, options.end]);
+
+  return (
+    <div className="py-3">
+      <div className="flex flex-row items-center gap-0.5 relative w-full">
+        <div
+          className={clsx(
+            'rounded-sm h-1.5 relative bg-red-600 overflow-hidden',
+          )}
+          style={{
+            flexBasis: `${(options.middleStart - options.start) * 100}%`,
+          }}
+        >
+          {value !== undefined && (
+            <span
+              className="absolute left-0 h-1.5 bg-red-300"
+              style={{
+                width: `${getBlurWidth(options.start, options.middleStart)}%`,
+              }}
+            />
+          )}
+        </div>
+        <div
+          className={clsx(
+            'rounded-sm h-1.5 relative bg-amber-600 overflow-hidden',
+          )}
+          style={{
+            flexBasis: `${(options.middleEnd - options.middleStart) * 100}%`,
+          }}
+        >
+          {value !== undefined && (
+            <span
+              className="absolute left-0 h-1.5 bg-amber-300"
+              style={{
+                width: `${getBlurWidth(options.middleStart, options.middleEnd)}%`,
+              }}
+            />
+          )}
+        </div>
+        <div
+          className={clsx(
+            'rounded-sm h-1.5 relative bg-green-600 overflow-hidden',
+          )}
+          style={{
+            flexBasis: `${(options.end - options.middleEnd) * 100}%`,
+          }}
+        >
+          {value !== undefined && (
+            <span
+              className="absolute left-0 h-1.5 bg-green-300"
+              style={{
+                width: `${getBlurWidth(options.middleEnd, options.end)}%`,
+              }}
+            />
+          )}
+        </div>
+
+        {value !== undefined && (
+          <div
+            className="absolute h-4 w-0.5 bg-white/90 top-1/2 -translate-x-1/2 -translate-y-1/2"
+            style={{ left: `calc(${caretPosition}% + 0.125rem)` }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web-app/src/routes/money-market.tsx b/apps/web-app/src/routes/money-market.tsx
index 64f3454..9b9ecd5 100644
--- a/apps/web-app/src/routes/money-market.tsx
+++ b/apps/web-app/src/routes/money-market.tsx
@@ -8,6 +8,10 @@ import { BorrowDialog } from '@/components/MoneyMarket/components/BorrowDialog/B
 import { BorrowPositionsList } from '@/components/MoneyMarket/components/BorrowPositionsList/BorrowPositionsList';
 import { LendAssetsList } from '@/components/MoneyMarket/components/LendAssetsList/LendAssetsList';
 import { LendDialog } from '@/components/MoneyMarket/components/LendDialog/LendDialog';
+import {
+  QUERY_KEY_MONEY_MARKET_POSITIONS,
+  useMoneyMarketPositions,
+} from '@/components/MoneyMarket/hooks/use-money-positions';
 import { Heading } from '@/components/ui/heading/heading';
 import { sdk } from '@/lib/sdk';
 import { useQuery } from '@tanstack/react-query';
@@ -50,7 +54,7 @@ export const Route = createFileRoute('/money-market')({
     const owner = context.connection().address;
     if (owner) {
       client.prefetchQuery({
-        queryKey: ['money-market:positions', pool || 'default', owner],
+        queryKey: [QUERY_KEY_MONEY_MARKET_POSITIONS, pool || 'default', owner],
         queryFn: () =>
           sdk.moneyMarket.listUserPositions(pool || 'default', owner),
         staleTime: STALE_TIME,
@@ -75,12 +79,9 @@ function RouteComponent() {
     staleTime: STALE_TIME,
   });
 
-  const { data: positions, isPending } = useQuery({
-    queryKey: ['money-market:positions', pool || 'default', address],
-    queryFn: () =>
-      sdk.moneyMarket.listUserPositions(pool || 'default', address!),
-    staleTime: STALE_TIME,
-    enabled: !!address,
+  const { data: positions, isPending } = useMoneyMarketPositions({
+    pool: pool || 'default',
+    address: address!,
   });
 
   const borrowAssets = useMemo(
diff --git a/packages/sdk/src/types.ts b/packages/sdk/src/types.ts
index 4b87fd2..bc3a9a3 100644
--- a/packages/sdk/src/types.ts
+++ b/packages/sdk/src/types.ts
@@ -38,6 +38,8 @@ export interface MoneyMarketPoolReserve {
   token: SdkToken;
   pool: MoneyMarketPool;
 
+  priceUsd: string;
+
   liquidity: string;
   liquidityUsd: string;
 
diff --git a/packages/shared/src/lib/decimal.ts b/packages/shared/src/lib/decimal.ts
index 7d9569f..d0e0d5b 100644
--- a/packages/shared/src/lib/decimal.ts
+++ b/packages/shared/src/lib/decimal.ts
@@ -26,6 +26,8 @@ export class Decimal {
   static ONE = new Decimal('1');
   static INFINITY = new Decimal('Infinity', 0);
 
+  static DEFAULT_PRECISION = DEFAULT_PRECISION;
+
   constructor(value: string, precision: number = DEFAULT_PRECISION) {
     this.d = new D(value);
     this.precision = precision;
@@ -74,6 +76,10 @@ export class Decimal {
     return this.d.toFixed(decimalPlaces);
   }
 
+  toNumber(): number {
+    return this.d.toNumber();
+  }
+
   toFormatted(decimalPlaces?: number): string {
     const [characteristic, mantissa] = parseFloat(
       this.toString(decimalPlaces ?? this.precision),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 46cf34d..0c8c556 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -310,8 +310,8 @@ importers:
         specifier: 0.7.0
         version: 0.7.0(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(bufferutil@4.0.9)(csstype@3.2.3)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(solid-js@1.9.10)(utf-8-validate@5.0.10)
       '@tanstack/react-form':
-        specifier: 1.23.0
-        version: 1.23.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        specifier: 1.27.2
+        version: 1.27.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@tanstack/react-query':
         specifier: 5.90.2
         version: 5.90.2(react@19.1.1)
@@ -4307,8 +4307,8 @@ packages:
     resolution: {integrity: sha512-yJT2As/drc+Epu0nsqCsJaKaLcaNGufiNxSlp/+/oeTD0jsBxF9/PJBfh66XVpYXkKr97b8689mSu7QMef0Rrw==}
     engines: {node: '>=18'}
 
-  '@tanstack/devtools-event-client@0.2.5':
-    resolution: {integrity: sha512-iVdqw879KETXyyPHc3gQR5Ld0GjlPLk7bKenBUhzr3+z1FiQZvsbfgYfRRokTSPcgwANAV7aA2Uv05nx5xWT8A==}
+  '@tanstack/devtools-event-client@0.3.5':
+    resolution: {integrity: sha512-RL1f5ZlfZMpghrCIdzl6mLOFLTuhqmPNblZgBaeKfdtk5rfbjykurv+VfYydOFXj0vxVIoA2d/zT7xfD7Ph8fw==}
     engines: {node: '>=18'}
 
   '@tanstack/devtools-ui@0.3.5':
@@ -4329,13 +4329,17 @@ packages:
     peerDependencies:
       solid-js: '>=1.9.7'
 
-  '@tanstack/form-core@1.23.0':
-    resolution: {integrity: sha512-aBJnO5iA1TtMK/SSpAvd/y6cVsBgbu5Br2FftvW6r7TkHCcZ/lB2DMx3G2dk6SG7sW0g8s6F7iaMjrvqBGooDw==}
+  '@tanstack/form-core@1.27.2':
+    resolution: {integrity: sha512-D8Xi/FOKkf0JpXp6ZZd9QV2NzjQjSUewfFVEoKGTNOqYK1KlpejDx+cQihC7Vl9r5i0ZZ6HrDBvCH6GOfPphaQ==}
 
   '@tanstack/history@1.131.2':
     resolution: {integrity: sha512-cs1WKawpXIe+vSTeiZUuSBy8JFjEuDgdMKZFRLKwQysKo8y2q6Q1HvS74Yw+m5IhOW1nTZooa6rlgdfXcgFAaw==}
     engines: {node: '>=12'}
 
+  '@tanstack/pacer@0.15.4':
+    resolution: {integrity: sha512-vGY+CWsFZeac3dELgB6UZ4c7OacwsLb8hvL2gLS6hTgy8Fl0Bm/aLokHaeDIP+q9F9HUZTnp360z9uv78eg8pg==}
+    engines: {node: '>=18'}
+
   '@tanstack/query-core@5.90.2':
     resolution: {integrity: sha512-k/TcR3YalnzibscALLwxeiLUub6jN5EDLwKDiO7q5f4ICEoptJ+n9+7vcEFy5/x/i6Q+Lb/tXrsKCggf5uQJXQ==}
 
@@ -4351,10 +4355,10 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
-  '@tanstack/react-form@1.23.0':
-    resolution: {integrity: sha512-wZ/cBjqj5dgWG79TQOsilbs8WzdouJj3iXw1DAZvQ4nejobsTGl0huU7SZZ0mnFtdNHbre1bFSdWyw+GqFcIhQ==}
+  '@tanstack/react-form@1.27.2':
+    resolution: {integrity: sha512-Sklshgv47WRnvb26IKaYNLIbHHhkY+BH+iBwK3ia7PNDPyz1yNLgyAAsLUejYbTsV/2wnSZ6dEmSA3PcvaxxYg==}
     peerDependencies:
-      '@tanstack/react-start': ^1.130.10
+      '@tanstack/react-start': '*'
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@tanstack/react-start':
@@ -4392,6 +4396,12 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  '@tanstack/react-store@0.8.0':
+    resolution: {integrity: sha512-1vG9beLIuB7q69skxK9r5xiLN3ztzIPfSQSs0GfeqWGO2tGIyInZx0x1COhpx97RKaONSoAb8C3dxacWksm1ow==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@tanstack/react-virtual@3.13.12':
     resolution: {integrity: sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==}
     peerDependencies:
@@ -4446,6 +4456,9 @@ packages:
   '@tanstack/store@0.7.7':
     resolution: {integrity: sha512-xa6pTan1bcaqYDS9BDpSiS63qa6EoDkPN9RsRaxHuDdVDNntzq3xNwR5YKTU/V3SkSyC9T4YVOPh2zRQN0nhIQ==}
 
+  '@tanstack/store@0.8.0':
+    resolution: {integrity: sha512-Om+BO0YfMZe//X2z0uLF2j+75nQga6TpTJgLJQBiq85aOyZNIhkCgleNcud2KQg4k4v9Y9l+Uhru3qWMPGTOzQ==}
+
   '@tanstack/virtual-core@3.13.12':
     resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
 
@@ -6242,9 +6255,6 @@ packages:
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
-  decode-formdata@0.9.0:
-    resolution: {integrity: sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw==}
-
   decode-uri-component@0.2.2:
     resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
     engines: {node: '>=0.10'}
@@ -6362,9 +6372,6 @@ packages:
     engines: {node: '>= 4.0.0'}
     hasBin: true
 
-  devalue@5.5.0:
-    resolution: {integrity: sha512-69sM5yrHfFLJt0AZ9QqZXGCPfJ7fQjvpln3Rq5+PS03LD32Ost1Q9N+eEnaQwGRIriKkMImXD56ocjQmfjbV3w==}
-
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -10661,10 +10668,6 @@ packages:
     resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
     hasBin: true
 
-  uuid@13.0.0:
-    resolution: {integrity: sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==}
-    hasBin: true
-
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -16193,7 +16196,7 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@tanstack/devtools-event-client@0.2.5': {}
+  '@tanstack/devtools-event-client@0.3.5': {}
 
   '@tanstack/devtools-ui@0.3.5(csstype@3.2.3)(solid-js@1.9.10)':
     dependencies:
@@ -16232,14 +16235,19 @@ snapshots:
       - csstype
       - utf-8-validate
 
-  '@tanstack/form-core@1.23.0':
+  '@tanstack/form-core@1.27.2':
     dependencies:
-      '@tanstack/devtools-event-client': 0.2.5
+      '@tanstack/devtools-event-client': 0.3.5
+      '@tanstack/pacer': 0.15.4
       '@tanstack/store': 0.7.7
-      uuid: 13.0.0
 
   '@tanstack/history@1.131.2': {}
 
+  '@tanstack/pacer@0.15.4':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.3.5
+      '@tanstack/store': 0.7.7
+
   '@tanstack/query-core@5.90.2': {}
 
   '@tanstack/query-devtools@5.90.1': {}
@@ -16257,12 +16265,10 @@ snapshots:
       - solid-js
       - utf-8-validate
 
-  '@tanstack/react-form@1.23.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+  '@tanstack/react-form@1.27.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
-      '@tanstack/form-core': 1.23.0
-      '@tanstack/react-store': 0.7.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
-      decode-formdata: 0.9.0
-      devalue: 5.5.0
+      '@tanstack/form-core': 1.27.2
+      '@tanstack/react-store': 0.8.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react: 19.1.1
     transitivePeerDependencies:
       - react-dom
@@ -16308,6 +16314,13 @@ snapshots:
       react-dom: 19.1.1(react@19.1.1)
       use-sync-external-store: 1.6.0(react@19.1.1)
 
+  '@tanstack/react-store@0.8.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@tanstack/store': 0.8.0
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      use-sync-external-store: 1.6.0(react@19.1.1)
+
   '@tanstack/react-virtual@3.13.12(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@tanstack/virtual-core': 3.13.12
@@ -16383,6 +16396,8 @@ snapshots:
 
   '@tanstack/store@0.7.7': {}
 
+  '@tanstack/store@0.8.0': {}
+
   '@tanstack/virtual-core@3.13.12': {}
 
   '@tanstack/virtual-file-routes@1.131.2': {}
@@ -19101,8 +19116,6 @@ snapshots:
 
   decimal.js@10.6.0: {}
 
-  decode-formdata@0.9.0: {}
-
   decode-uri-component@0.2.2: {}
 
   decompress-response@6.0.0:
@@ -19187,8 +19200,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  devalue@5.5.0: {}
-
   didyoumean@1.2.2: {}
 
   diff@4.0.2: {}
@@ -24177,8 +24188,6 @@ snapshots:
 
   uuid@11.1.0: {}
 
-  uuid@13.0.0: {}
-
   uuid@8.3.2: {}
 
   uuid@9.0.1: {}

From fe89673e4267a186c76c58ef1979a132786d052f Mon Sep 17 00:00:00 2001
From: Rytis Grincevicius <rytis.grincevicius@gmail.com>
Date: Thu, 11 Dec 2025 09:33:33 +0200
Subject: [PATCH 2/3] feat: borrow validation

---
 .../web-app/src/components/FormComponents.tsx |  56 ++++-
 .../components/AssetsTable/AssetsTable.tsx    |   8 +-
 .../components/BorrowDialog/BorrowDialog.tsx  | 162 +++++++++------
 .../AssetsTable/AssetsTable.constants.tsx     |  34 ---
 .../components/AssetsTable/AssetsTable.tsx    |   6 -
 .../components/LendDialog/LendDialog.tsx      |  19 +-
 .../src/components/ui/amount-renderer.tsx     |  35 ++--
 .../src/components/ui/health-factor-bar.tsx   |  12 +-
 .../web-app/src/components/ui/input-group.tsx | 168 +++++++++++++++
 apps/web-app/src/components/ui/item.tsx       | 193 ++++++++++++++++++
 apps/web-app/src/hooks/app-form.ts            |   2 +
 apps/web-app/src/lib/validations.ts           |   4 +-
 12 files changed, 552 insertions(+), 147 deletions(-)
 delete mode 100644 apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.constants.tsx
 create mode 100644 apps/web-app/src/components/ui/input-group.tsx
 create mode 100644 apps/web-app/src/components/ui/item.tsx

diff --git a/apps/web-app/src/components/FormComponents.tsx b/apps/web-app/src/components/FormComponents.tsx
index 3cb9de4..8992e87 100644
--- a/apps/web-app/src/components/FormComponents.tsx
+++ b/apps/web-app/src/components/FormComponents.tsx
@@ -8,11 +8,14 @@ import * as ShadcnSelect from '@/components/ui/select';
 import { Slider as ShadcnSlider } from '@/components/ui/slider';
 import { Switch as ShadcnSwitch } from '@/components/ui/switch';
 import { Textarea as ShadcnTextarea } from '@/components/ui/textarea';
+import type { CheckedState } from '@radix-ui/react-checkbox';
 import { Decimal } from '@sovryn/slayer-shared';
 import { Loader2Icon } from 'lucide-react';
 import { useEffect, useState, type ReactNode } from 'react';
 import type { GetBalanceData } from 'wagmi/query';
+import { Checkbox } from './ui/checkbox';
 import { Field, FieldDescription, FieldError, FieldLabel } from './ui/field';
+import { InputGroup, InputGroupAddon, InputGroupInput } from './ui/input-group';
 
 export function SubscribeButton({ label }: { label: string }) {
   const form = useFormContext();
@@ -205,6 +208,36 @@ export function Switch({
   );
 }
 
+export function CheckBox({
+  label,
+  description,
+}: {
+  label: ReactNode;
+  description?: string;
+}) {
+  const field = useFieldContext<CheckedState>();
+  const errors = useStore(field.store, (state) => state.meta.errors);
+
+  return (
+    <Field>
+      <div className="flex items-start gap-3">
+        <Checkbox
+          id={field.name}
+          checked={field.state.value}
+          onCheckedChange={(checked) => field.handleChange(checked)}
+          onBlur={field.handleBlur}
+          className="mt-1"
+        />
+        <div className="grid gap-2">
+          <FieldLabel htmlFor={field.name}>{label}</FieldLabel>
+          {description && <FieldDescription>{description}</FieldDescription>}
+        </div>
+      </div>
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </Field>
+  );
+}
+
 const tryDecimalValue = (input: string): string => {
   try {
     if (input) {
@@ -222,11 +255,13 @@ export function AmountField({
   placeholder,
   description,
   balance,
+  addonRight,
 }: {
   label: ReactNode;
   placeholder?: string;
   description?: string;
   balance?: GetBalanceData;
+  addonRight?: ReactNode;
 }) {
   const field = useFieldContext<string>();
   const errors = useStore(field.store, (state) => state.meta.errors);
@@ -264,13 +299,20 @@ export function AmountField({
           </span>
         )}
       </FieldLabel>
-      <Input
-        id={field.name}
-        value={renderedValue}
-        placeholder={placeholder}
-        onBlur={field.handleBlur}
-        onChange={(e) => handleChange(e.target.value)}
-      />
+      <InputGroup>
+        <InputGroupInput
+          id={field.name}
+          value={renderedValue}
+          placeholder={placeholder}
+          onBlur={field.handleBlur}
+          onChange={(e) => handleChange(e.target.value)}
+          type="number"
+          step="0.00001"
+        />
+        {addonRight && (
+          <InputGroupAddon align="inline-end">{addonRight}</InputGroupAddon>
+        )}
+      </InputGroup>
       {description && <FieldDescription>{description}</FieldDescription>}
       {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
     </Field>
diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.tsx
index 26fdb56..f963f86 100644
--- a/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.tsx
+++ b/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.tsx
@@ -70,7 +70,7 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
                   </div>
                 </TableCell>
                 <TableCell className="border-neutral-800 border-y">
-                  <div className="flex flex-col gap-1">
+                  <div className="flex flex-col gap-1 items-start">
                     <AmountRenderer
                       value={asset.liquidity}
                       suffix={asset.token.symbol}
@@ -99,12 +99,6 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
                     >
                       Borrow
                     </Button>
-                    <Button
-                      className="rounded-full min-w-24 h-10 hover:cursor-pointer"
-                      variant="secondary"
-                    >
-                      Details
-                    </Button>
                   </div>
                 </TableCell>
               </TableRow>
diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx
index d4c182f..c1b18d4 100644
--- a/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx
+++ b/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx
@@ -10,6 +10,12 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { HealthFactorBar } from '@/components/ui/health-factor-bar';
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+} from '@/components/ui/item';
 import { useAppForm } from '@/hooks/app-form';
 import { sdk } from '@/lib/sdk';
 import { useSlayerTx } from '@/lib/transactions';
@@ -24,10 +30,6 @@ import { useStoreWithEqualityFn } from 'zustand/traditional';
 import { useMoneyMarketPositions } from '../../hooks/use-money-positions';
 import { borrowRequestStore } from '../../stores/borrow-request.store';
 
-const schema = z.object({
-  amount: validateDecimal({ min: 1n }),
-});
-
 const BorrowDialogForm = () => {
   const { address } = useAccount();
   const reserve = useStore(borrowRequestStore, (state) => state.reserve!);
@@ -47,13 +49,32 @@ const BorrowDialogForm = () => {
     },
   });
 
+  const data = useMemo(() => {
+    const position = (items?.data?.positions || []).find(
+      (item) => item.reserve.id === reserve.id,
+    );
+    if (position && items?.data) {
+      return {
+        position,
+        summary: items.data.summary,
+      };
+    }
+    return null;
+  }, [items]);
+
   const form = useAppForm({
     defaultValues: {
       amount: '',
+      agree: false,
     },
     validators: {
-      onMount: schema,
-      onBlur: schema,
+      onChange: z.object({
+        amount: validateDecimal({
+          min: 1n,
+          max: Decimal.from(data?.position.availableToBorrow ?? '0').toBigInt(),
+        }),
+        agree: z.literal(true, 'Must agree to proceed with borrowing'),
+      }),
     },
     onSubmit: ({ value }) => {
       begin(() =>
@@ -86,19 +107,6 @@ const BorrowDialogForm = () => {
     e.preventDefault();
   };
 
-  const data = useMemo(() => {
-    const position = (items?.data?.positions || []).find(
-      (item) => item.reserve.id === reserve.id,
-    );
-    if (position && items?.data) {
-      return {
-        position,
-        summary: items.data.summary,
-      };
-    }
-    return null;
-  }, [items]);
-
   const calculateLiquidationPrice = useCallback(
     (amount: string) => {
       if (!data || Decimal.from(data.summary.collateralBalanceUsd).eq(0)) {
@@ -140,7 +148,7 @@ const BorrowDialogForm = () => {
       >
         <DialogHeader>
           <DialogTitle>Borrow Asset</DialogTitle>
-          <DialogDescription>
+          <DialogDescription className="sr-only">
             Borrowing functionality is under development.
           </DialogDescription>
         </DialogHeader>
@@ -163,68 +171,96 @@ const BorrowDialogForm = () => {
                         );
                       }}
                     >
-                      Max:
-                      <AmountRenderer
-                        value={data?.position.availableToBorrow ?? '0'}
-                        suffix={data?.position.token.symbol}
-                        showApproxSign
-                      />
+                      <span>
+                        Max:
+                        <AmountRenderer
+                          value={data?.position.availableToBorrow ?? '0'}
+                          suffix={data?.position.token.symbol}
+                          showApproxSign
+                        />
+                      </span>
                     </Button>
                   </div>
                 }
+                placeholder="Amount to borrow"
+                addonRight={data?.position.token.symbol}
               />
+            </>
+          )}
+        </form.AppField>
 
-              <div>
-                <p>
-                  Collateral Ratio:
-                  <AmountRenderer
-                    value={computeHealthFactor(field.state.value ?? 0)
-                      .mul(100)
-                      .toNumber()
-                      .toFixed(8)}
-                    suffix="%"
-                    showApproxSign
-                  />
-                </p>
-
-                <HealthFactorBar
-                  value={computeHealthFactor(field.state.value).toNumber()}
-                  options={{
-                    start: 1,
-                    middleStart: 1.1,
-                    middleEnd: 1.5,
-                    end: 2,
-                  }}
-                />
-
-                <p>
-                  Borrow APY:
+        <form.Subscribe
+          selector={(state) =>
+            [
+              state.values.amount,
+              computeHealthFactor(state.values.amount ?? 0),
+            ] as const
+          }
+        >
+          {([amount, healthFactor]) => (
+            <ItemGroup>
+              <Item size="sm" variant="outline">
+                <ItemContent>
+                  <ItemContent>
+                    <div className="flex flex-row justify-between">
+                      <div>Collateral Ratio</div>
+                      <AmountRenderer
+                        value={healthFactor.mul(100).toNumber().toFixed(8)}
+                        suffix="%"
+                        showApproxSign
+                      />
+                    </div>
+                  </ItemContent>
+                  <ItemDescription>
+                    <HealthFactorBar
+                      value={healthFactor.toNumber()}
+                      options={{
+                        start: 1,
+                        middleStart: 1.1,
+                        middleEnd: 1.5,
+                        end: 2,
+                      }}
+                    />
+                  </ItemDescription>
+                </ItemContent>
+              </Item>
+              <Item size="sm" className="mt-2 py-1">
+                <ItemContent>Borrow APY</ItemContent>
+                <ItemContent>
                   <AmountRenderer
                     value={data?.position.reserve.variableBorrowApy ?? '0'}
                     suffix="%"
                     showApproxSign
                   />
-                </p>
-                <p>
-                  Liquidation price:
+                </ItemContent>
+              </Item>
+              <Item size="sm" className="py-1">
+                <ItemContent>Liquidation price</ItemContent>
+                <ItemContent>
                   <AmountRenderer
-                    value={calculateLiquidationPrice(
-                      field.state.value,
-                    ).toString()}
+                    value={calculateLiquidationPrice(amount).toString()}
                     showApproxSign
                     prefix="$"
                   />
-                </p>
-                <p>
-                  {data?.position.token.symbol} price:{' '}
+                </ItemContent>
+              </Item>
+              <Item size="sm" className="py-1">
+                <ItemContent>{data?.position.token.symbol} Price</ItemContent>
+                <ItemContent>
                   <AmountRenderer
                     value={data?.position.reserve.priceUsd ?? '0'}
                     prefix="$"
                     showApproxSign
                   />
-                </p>
-              </div>
-            </>
+                </ItemContent>
+              </Item>
+            </ItemGroup>
+          )}
+        </form.Subscribe>
+
+        <form.AppField name="agree">
+          {(field) => (
+            <field.CheckBox label="I understand that my collateral may be liquidated or used to pay rollover fees if applicable." />
           )}
         </form.AppField>
 
diff --git a/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.constants.tsx b/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.constants.tsx
deleted file mode 100644
index 416042d..0000000
--- a/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.constants.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import iconUsdc from '@/assets/tokens/usdc.png';
-import iconUsdt from '@/assets/tokens/usdt.png';
-import iconWbtc from '@/assets/tokens/wbtc.png';
-import type { LendAsset } from '../../LendAssetsList.types';
-
-export const LEND_ASSETS: LendAsset[] = [
-  {
-    symbol: 'USDC',
-    balance: '1.01234566',
-    balanceUsd: 159489.7,
-    apy: '15.34',
-    icon: iconUsdc,
-    isSortable: true,
-    canBeCollateral: true,
-  },
-  {
-    symbol: 'USDT',
-    balance: '0',
-    balanceUsd: 0,
-    apy: '12.50',
-    icon: iconUsdt,
-    isSortable: true,
-    canBeCollateral: false,
-  },
-  {
-    symbol: 'WBTC',
-    balance: '0.005',
-    balanceUsd: 1.23,
-    apy: '8.75',
-    icon: iconWbtc,
-    isSortable: true,
-    canBeCollateral: true,
-  },
-];
diff --git a/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.tsx b/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.tsx
index 63b0f51..6961e51 100644
--- a/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.tsx
+++ b/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.tsx
@@ -107,12 +107,6 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
                   >
                     Lend
                   </Button>
-                  <Button
-                    className="rounded-full min-w-24 h-10 hover:cursor-pointer"
-                    variant="secondary"
-                  >
-                    Details
-                  </Button>
                 </div>
               </TableCell>
             </TableRow>
diff --git a/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx b/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx
index fcb9ce7..31a7b83 100644
--- a/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx
+++ b/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx
@@ -1,4 +1,6 @@
+import { AmountRenderer } from '@/components/ui/amount-renderer';
 import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
 import {
   Dialog,
   DialogClose,
@@ -96,10 +98,19 @@ const LendDialogForm = () => {
             <field.AmountField label="Amount to Lend" balance={balance} />
           )}
         </form.AppField>
-        <p>
-          {reserve.token.symbol} can be used as collateral:{' '}
-          {reserve.canBeCollateral ? 'Yes' : 'No'}
-        </p>
+
+        <Card>
+          <CardContent>
+            <div>
+              Lend APY:
+              <AmountRenderer value={'0'} suffix="%" showApproxSign />
+            </div>
+            <div>
+              Collateralization:{' '}
+              {reserve.canBeCollateral ? 'Enabled' : 'Disabled'}
+            </div>
+          </CardContent>
+        </Card>
 
         <DialogFooter>
           <DialogClose asChild>
diff --git a/apps/web-app/src/components/ui/amount-renderer.tsx b/apps/web-app/src/components/ui/amount-renderer.tsx
index 1bfc767..b464dd8 100644
--- a/apps/web-app/src/components/ui/amount-renderer.tsx
+++ b/apps/web-app/src/components/ui/amount-renderer.tsx
@@ -1,6 +1,7 @@
 import { Decimal } from '@sovryn/slayer-shared';
+import clsx from 'clsx';
 import { CopyIcon } from 'lucide-react';
-import { type FC, useCallback } from 'react';
+import { type FC, useCallback, useMemo } from 'react';
 import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
 
 export type AmountRendererProps = {
@@ -40,34 +41,32 @@ export const AmountRenderer: FC<AmountRendererProps> = ({
   }, [value]);
 
   const approxSign = showApproxSign ? (
-    <span
-      aria-label="approximate"
-      title="Approximate value"
-      style={{ marginRight: 2 }}
-    >
-      &#x223C;
+    <span aria-label="approximate" title="Approximate value">
+      &#x7e;&nbsp;
     </span>
   ) : null;
 
-  if (!showTooltip) {
-    return (
-      <span className={className}>
+  const content = useMemo(
+    () => (
+      <>
         {approxSign}
         {prefix}
         {formatted}
-        {suffix && <span> {suffix}</span>}
-      </span>
-    );
+        {suffix && <span>&nbsp;{suffix}</span>}
+      </>
+    ),
+    [approxSign, prefix, formatted, suffix],
+  );
+
+  if (!showTooltip) {
+    return <span className={className}>{content}</span>;
   }
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <span className={className} style={{ cursor: 'pointer' }}>
-          {approxSign}
-          {prefix}
-          {formatted}
-          {suffix && <span> {suffix}</span>}
+        <span className={clsx(className, 'w-auto cursor-pointer')}>
+          {content}
         </span>
       </TooltipTrigger>
       <TooltipContent>
diff --git a/apps/web-app/src/components/ui/health-factor-bar.tsx b/apps/web-app/src/components/ui/health-factor-bar.tsx
index 2f04484..da7bbe3 100644
--- a/apps/web-app/src/components/ui/health-factor-bar.tsx
+++ b/apps/web-app/src/components/ui/health-factor-bar.tsx
@@ -41,7 +41,7 @@ export const HealthFactorBar: FC<HealthFactorBarProps> = ({
       <div className="flex flex-row items-center gap-0.5 relative w-full">
         <div
           className={clsx(
-            'rounded-sm h-1.5 relative bg-red-600 overflow-hidden',
+            'rounded-sm h-1.5 relative bg-red-600/25 overflow-hidden',
           )}
           style={{
             flexBasis: `${(options.middleStart - options.start) * 100}%`,
@@ -49,7 +49,7 @@ export const HealthFactorBar: FC<HealthFactorBarProps> = ({
         >
           {value !== undefined && (
             <span
-              className="absolute left-0 h-1.5 bg-red-300"
+              className="absolute left-0 h-1.5 bg-red-600"
               style={{
                 width: `${getBlurWidth(options.start, options.middleStart)}%`,
               }}
@@ -58,7 +58,7 @@ export const HealthFactorBar: FC<HealthFactorBarProps> = ({
         </div>
         <div
           className={clsx(
-            'rounded-sm h-1.5 relative bg-amber-600 overflow-hidden',
+            'rounded-sm h-1.5 relative bg-amber-600/25 overflow-hidden',
           )}
           style={{
             flexBasis: `${(options.middleEnd - options.middleStart) * 100}%`,
@@ -66,7 +66,7 @@ export const HealthFactorBar: FC<HealthFactorBarProps> = ({
         >
           {value !== undefined && (
             <span
-              className="absolute left-0 h-1.5 bg-amber-300"
+              className="absolute left-0 h-1.5 bg-amber-600"
               style={{
                 width: `${getBlurWidth(options.middleStart, options.middleEnd)}%`,
               }}
@@ -75,7 +75,7 @@ export const HealthFactorBar: FC<HealthFactorBarProps> = ({
         </div>
         <div
           className={clsx(
-            'rounded-sm h-1.5 relative bg-green-600 overflow-hidden',
+            'rounded-sm h-1.5 relative bg-green-600/25 overflow-hidden',
           )}
           style={{
             flexBasis: `${(options.end - options.middleEnd) * 100}%`,
@@ -83,7 +83,7 @@ export const HealthFactorBar: FC<HealthFactorBarProps> = ({
         >
           {value !== undefined && (
             <span
-              className="absolute left-0 h-1.5 bg-green-300"
+              className="absolute left-0 h-1.5 bg-green-600"
               style={{
                 width: `${getBlurWidth(options.middleEnd, options.end)}%`,
               }}
diff --git a/apps/web-app/src/components/ui/input-group.tsx b/apps/web-app/src/components/ui/input-group.tsx
new file mode 100644
index 0000000..6db1784
--- /dev/null
+++ b/apps/web-app/src/components/ui/input-group.tsx
@@ -0,0 +1,168 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/apps/web-app/src/components/ui/item.tsx b/apps/web-app/src/components/ui/item.tsx
new file mode 100644
index 0000000..d97de21
--- /dev/null
+++ b/apps/web-app/src/components/ui/item.tsx
@@ -0,0 +1,193 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn("group/item-group flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-0", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}
diff --git a/apps/web-app/src/hooks/app-form.ts b/apps/web-app/src/hooks/app-form.ts
index e8a6cd0..81358fb 100644
--- a/apps/web-app/src/hooks/app-form.ts
+++ b/apps/web-app/src/hooks/app-form.ts
@@ -2,6 +2,7 @@ import { createFormHook } from '@tanstack/react-form';
 
 import {
   AmountField,
+  CheckBox,
   Select,
   SubscribeButton,
   TextArea,
@@ -15,6 +16,7 @@ export const { useAppForm } = createFormHook({
     TextField,
     Select,
     TextArea,
+    CheckBox,
   },
   formComponents: {
     SubscribeButton,
diff --git a/apps/web-app/src/lib/validations.ts b/apps/web-app/src/lib/validations.ts
index 98b1cc1..ea38991 100644
--- a/apps/web-app/src/lib/validations.ts
+++ b/apps/web-app/src/lib/validations.ts
@@ -24,8 +24,8 @@ export const validateDecimal = ({
       }
     },
     {
-      error: `Value must be a valid decimal${min !== undefined ? ` >= ${min}` : ''}${
-        max !== undefined ? ` <= ${max}` : ''
+      error: `Value must be a valid decimal${min !== undefined ? ` >= ${Decimal.from(min).toString()}` : ''}${
+        max !== undefined ? ` <= ${Decimal.from(max).toString()}` : ''
       }.`,
     },
   );

From cc0ef830c00df35837c2caf3fc3271270ecccdb5 Mon Sep 17 00:00:00 2001
From: Rytis Grincevicius <rytis.grincevicius@gmail.com>
Date: Thu, 11 Dec 2025 10:01:08 +0200
Subject: [PATCH 3/3] fix: lend modal

---
 .../web-app/src/components/FormComponents.tsx |  41 ++++-
 .../components/BorrowDialog/BorrowDialog.tsx  |  34 +---
 .../components/LendDialog/LendDialog.tsx      |  67 +++++---
 .../src/components/ui/amount-renderer.tsx     |   9 +-
 apps/web-app/src/components/ui/field.tsx      | 148 +++++++++---------
 .../src/components/ui/health-factor-bar.tsx   |  22 +--
 6 files changed, 180 insertions(+), 141 deletions(-)

diff --git a/apps/web-app/src/components/FormComponents.tsx b/apps/web-app/src/components/FormComponents.tsx
index 8992e87..4a37816 100644
--- a/apps/web-app/src/components/FormComponents.tsx
+++ b/apps/web-app/src/components/FormComponents.tsx
@@ -13,6 +13,7 @@ import { Decimal } from '@sovryn/slayer-shared';
 import { Loader2Icon } from 'lucide-react';
 import { useEffect, useState, type ReactNode } from 'react';
 import type { GetBalanceData } from 'wagmi/query';
+import { AmountRenderer } from './ui/amount-renderer';
 import { Checkbox } from './ui/checkbox';
 import { Field, FieldDescription, FieldError, FieldLabel } from './ui/field';
 import { InputGroup, InputGroupAddon, InputGroupInput } from './ui/input-group';
@@ -260,7 +261,7 @@ export function AmountField({
   label: ReactNode;
   placeholder?: string;
   description?: string;
-  balance?: GetBalanceData;
+  balance?: Omit<GetBalanceData, 'formatted'>;
   addonRight?: ReactNode;
 }) {
   const field = useFieldContext<string>();
@@ -290,13 +291,37 @@ export function AmountField({
   return (
     <Field>
       <FieldLabel htmlFor={field.name}>
-        {label}
-        {balance && (
-          <span className="ml-2 text-sm font-normal text-gray-400">
-            (Balance:{' '}
-            {Decimal.from(balance.value, balance.decimals).toFormatted()}{' '}
-            {balance.symbol})
-          </span>
+        {balance ? (
+          <>
+            <div className="w-full flex flex-row gap-4 justify-between items-center">
+              <span>{label}</span>
+              <Button
+                variant="link"
+                size="sm"
+                className="p-0"
+                onClick={() => {
+                  field.setValue(
+                    Decimal.from(balance.value).toString(balance.decimals),
+                  );
+                }}
+              >
+                <span>
+                  (max:&nbsp;
+                  <AmountRenderer
+                    value={Decimal.from(
+                      balance.value,
+                      balance.decimals,
+                    ).toString()}
+                    suffix={balance.symbol}
+                    showApproxSign
+                  />
+                  )
+                </span>
+              </Button>
+            </div>
+          </>
+        ) : (
+          <>{label}</>
         )}
       </FieldLabel>
       <InputGroup>
diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx
index c1b18d4..b1d5148 100644
--- a/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx
+++ b/apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx
@@ -156,32 +156,14 @@ const BorrowDialogForm = () => {
           {(field) => (
             <>
               <field.AmountField
-                label={
-                  <div className="w-full flex flex-row gap-4 justify-between items-center">
-                    <span>Amount to borrow</span>
-                    <Button
-                      variant="link"
-                      size="sm"
-                      className="p-0"
-                      onClick={() => {
-                        field.setValue(
-                          Decimal.from(
-                            data?.position.availableToBorrow ?? '0',
-                          ).toString(Decimal.DEFAULT_PRECISION),
-                        );
-                      }}
-                    >
-                      <span>
-                        Max:
-                        <AmountRenderer
-                          value={data?.position.availableToBorrow ?? '0'}
-                          suffix={data?.position.token.symbol}
-                          showApproxSign
-                        />
-                      </span>
-                    </Button>
-                  </div>
-                }
+                label="Amount to Borrow"
+                balance={{
+                  value: Decimal.from(
+                    data?.position.availableToBorrow ?? '0',
+                  ).toBigInt(),
+                  decimals: data?.position.token.decimals || 18,
+                  symbol: data?.position.token.symbol || '',
+                }}
                 placeholder="Amount to borrow"
                 addonRight={data?.position.token.symbol}
               />
diff --git a/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx b/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx
index 31a7b83..df474d8 100644
--- a/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx
+++ b/apps/web-app/src/components/MoneyMarket/components/LendDialog/LendDialog.tsx
@@ -1,6 +1,5 @@
 import { AmountRenderer } from '@/components/ui/amount-renderer';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
 import {
   Dialog,
   DialogClose,
@@ -10,20 +9,43 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { Item, ItemContent, ItemGroup } from '@/components/ui/item';
 import { useAppForm } from '@/hooks/app-form';
 import { sdk } from '@/lib/sdk';
 import { useSlayerTx } from '@/lib/transactions';
 import { validateDecimal } from '@/lib/validations';
 import { areAddressesEqual } from '@sovryn/slayer-shared';
+import { useMemo } from 'react';
 import { useAccount, useBalance } from 'wagmi';
 import z from 'zod';
 import { useStore } from 'zustand';
 import { useStoreWithEqualityFn } from 'zustand/traditional';
+import { useMoneyMarketPositions } from '../../hooks/use-money-positions';
 import { lendRequestStore } from '../../stores/lend-request.store';
 
 const LendDialogForm = () => {
+  const { address } = useAccount();
+
   const reserve = useStore(lendRequestStore, (state) => state.reserve!);
 
+  const { data: items } = useMoneyMarketPositions({
+    pool: reserve.pool.id || 'default',
+    address: address!,
+  });
+
+  const data = useMemo(() => {
+    const position = (items?.data?.positions || []).find(
+      (item) => item.reserve.id === reserve.id,
+    );
+    if (position && items?.data) {
+      return {
+        position,
+        summary: items.data.summary,
+      };
+    }
+    return null;
+  }, [items]);
+
   const { begin } = useSlayerTx({
     onClosed: (ok: boolean) => {
       if (ok) {
@@ -32,7 +54,6 @@ const LendDialogForm = () => {
       }
     },
   });
-  const { address } = useAccount();
 
   const { data: balance } = useBalance({
     token: areAddressesEqual(reserve.token.address, reserve.pool.weth)
@@ -47,10 +68,7 @@ const LendDialogForm = () => {
       amount: '',
     },
     validators: {
-      onMount: z.object({
-        amount: validateDecimal({ min: 1n }),
-      }),
-      onBlur: z.object({
+      onChange: z.object({
         amount: validateDecimal({ min: 1n, max: balance?.value ?? undefined }),
       }),
     },
@@ -89,28 +107,39 @@ const LendDialogForm = () => {
       >
         <DialogHeader>
           <DialogTitle>Lend Asset</DialogTitle>
-          <DialogDescription>
+          <DialogDescription className="sr-only">
             Lending functionality is under development.
           </DialogDescription>
         </DialogHeader>
         <form.AppField name="amount">
           {(field) => (
-            <field.AmountField label="Amount to Lend" balance={balance} />
+            <field.AmountField
+              label="Amount to Lend"
+              placeholder="Amount"
+              balance={balance}
+              addonRight={reserve.token.symbol}
+            />
           )}
         </form.AppField>
 
-        <Card>
-          <CardContent>
-            <div>
-              Lend APY:
-              <AmountRenderer value={'0'} suffix="%" showApproxSign />
-            </div>
-            <div>
-              Collateralization:{' '}
+        <ItemGroup>
+          <Item size="sm" className="py-1">
+            <ItemContent>Lend APY:</ItemContent>
+            <ItemContent>
+              <AmountRenderer
+                value={data?.position.reserve.supplyApy ?? '0'}
+                suffix="%"
+                showApproxSign
+              />
+            </ItemContent>
+          </Item>
+          <Item size="sm" className="py-1">
+            <ItemContent>Collateralization:</ItemContent>
+            <ItemContent>
               {reserve.canBeCollateral ? 'Enabled' : 'Disabled'}
-            </div>
-          </CardContent>
-        </Card>
+            </ItemContent>
+          </Item>
+        </ItemGroup>
 
         <DialogFooter>
           <DialogClose asChild>
diff --git a/apps/web-app/src/components/ui/amount-renderer.tsx b/apps/web-app/src/components/ui/amount-renderer.tsx
index b464dd8..fff661b 100644
--- a/apps/web-app/src/components/ui/amount-renderer.tsx
+++ b/apps/web-app/src/components/ui/amount-renderer.tsx
@@ -14,11 +14,14 @@ export type AmountRendererProps = {
   showApproxSign?: boolean;
 };
 
-function formatAmount(value: string | number | bigint, decimals = 4) {
+function formatAmount(value: string | number | bigint, decimals = 8) {
   try {
     const dec = Decimal.from(value);
-    let str = dec.d.toFixed(decimals);
-    str = str.replace(/\.?(0+)$/, '');
+    let str = dec.d.toFixed(decimals).replace(/\.?(0+)$/, '');
+    // if the value is very small, try with more decimals
+    if (str === '' || str === '0') {
+      str = dec.d.toFixed(decimals * 2).replace(/\.?(0+)$/, '');
+    }
     return str;
   } catch {
     return '-';
diff --git a/apps/web-app/src/components/ui/field.tsx b/apps/web-app/src/components/ui/field.tsx
index db0dc12..3bf2c5a 100644
--- a/apps/web-app/src/components/ui/field.tsx
+++ b/apps/web-app/src/components/ui/field.tsx
@@ -1,86 +1,86 @@
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import { useMemo } from 'react';
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
 
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
   return (
     <fieldset
       data-slot="field-set"
       className={cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
+        'flex flex-col gap-6',
+        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldLegend({
   className,
-  variant = "legend",
+  variant = 'legend',
   ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
   return (
     <legend
       data-slot="field-legend"
       data-variant={variant}
       className={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
+        'mb-3 font-medium',
+        'data-[variant=legend]:text-base',
+        'data-[variant=label]:text-sm',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="field-group"
       className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
+        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const fieldVariants = cva(
-  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  'group/field flex w-full gap-1 data-[invalid=true]:text-destructive',
   {
     variants: {
       orientation: {
-        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
         horizontal: [
-          "flex-row items-center",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          'flex-row items-center',
+          '[&>[data-slot=field-label]]:flex-auto',
+          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
         ],
         responsive: [
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
         ],
       },
     },
     defaultVariants: {
-      orientation: "vertical",
+      orientation: 'vertical',
     },
-  }
-)
+  },
+);
 
 function Field({
   className,
-  orientation = "vertical",
+  orientation = 'vertical',
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
   return (
     <div
       role="group"
@@ -89,20 +89,20 @@ function Field({
       className={cn(fieldVariants({ orientation }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="field-content"
       className={cn(
-        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
+        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldLabel({
@@ -113,58 +113,58 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
-        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
-        className
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
-        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldSeparator({
   children,
   className,
   ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode;
 }) {
   return (
     <div
       data-slot="field-separator"
       data-content={!!children}
       className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
+        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        className,
       )}
       {...props}
     >
@@ -178,7 +178,7 @@ function FieldSeparator({
         </span>
       )}
     </div>
-  )
+  );
 }
 
 function FieldError({
@@ -186,61 +186,61 @@ function FieldError({
   children,
   errors,
   ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>;
 }) {
   const content = useMemo(() => {
     if (children) {
-      return children
+      return children;
     }
 
     if (!errors?.length) {
-      return null
+      return null;
     }
 
     const uniqueErrors = [
       ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
+    ];
 
     if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
+      return uniqueErrors[0]?.message;
     }
 
     return (
       <ul className="ml-4 flex list-disc flex-col gap-1">
         {uniqueErrors.map(
           (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
+            error?.message && <li key={index}>{error.message}</li>,
         )}
       </ul>
-    )
-  }, [children, errors])
+    );
+  }, [children, errors]);
 
   if (!content) {
-    return null
+    return null;
   }
 
   return (
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
+      className={cn('text-destructive text-xs font-normal', className)}
       {...props}
     >
       {content}
     </div>
-  )
+  );
 }
 
 export {
   Field,
-  FieldLabel,
+  FieldContent,
   FieldDescription,
   FieldError,
   FieldGroup,
+  FieldLabel,
   FieldLegend,
   FieldSeparator,
   FieldSet,
-  FieldContent,
   FieldTitle,
-}
+};
diff --git a/apps/web-app/src/components/ui/health-factor-bar.tsx b/apps/web-app/src/components/ui/health-factor-bar.tsx
index da7bbe3..94db68b 100644
--- a/apps/web-app/src/components/ui/health-factor-bar.tsx
+++ b/apps/web-app/src/components/ui/health-factor-bar.tsx
@@ -37,9 +37,9 @@ export const HealthFactorBar: FC<HealthFactorBarProps> = ({
   }, [value, options.start, options.end]);
 
   return (
-    <div className="py-3">
-      <div className="flex flex-row items-center gap-0.5 relative w-full">
-        <div
+    <span className="block py-3">
+      <span className="flex flex-row items-center gap-0.5 relative w-full">
+        <span
           className={clsx(
             'rounded-sm h-1.5 relative bg-red-600/25 overflow-hidden',
           )}
@@ -55,8 +55,8 @@ export const HealthFactorBar: FC<HealthFactorBarProps> = ({
               }}
             />
           )}
-        </div>
-        <div
+        </span>
+        <span
           className={clsx(
             'rounded-sm h-1.5 relative bg-amber-600/25 overflow-hidden',
           )}
@@ -72,8 +72,8 @@ export const HealthFactorBar: FC<HealthFactorBarProps> = ({
               }}
             />
           )}
-        </div>
-        <div
+        </span>
+        <span
           className={clsx(
             'rounded-sm h-1.5 relative bg-green-600/25 overflow-hidden',
           )}
@@ -89,15 +89,15 @@ export const HealthFactorBar: FC<HealthFactorBarProps> = ({
               }}
             />
           )}
-        </div>
+        </span>
 
         {value !== undefined && (
-          <div
+          <span
             className="absolute h-4 w-0.5 bg-white/90 top-1/2 -translate-x-1/2 -translate-y-1/2"
             style={{ left: `calc(${caretPosition}% + 0.125rem)` }}
           />
         )}
-      </div>
-    </div>
+      </span>
+    </span>
   );
 };