feat: previous collateral, debt, ltv and health to form

Author: 0xPearce

apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx

@@ -1,7 +1,12 @@
+import { useMemo } from 'react'
 import { useLoanToValueFromUserState } from '@/llamalend/features/manage-loan/hooks/useLoanToValueFromUserState'
+import { useHealthQueries } from '@/llamalend/hooks/useHealthQueries'
 import type { LlamaMarketTemplate, NetworkDict } from '@/llamalend/llamalend.types'
 import type { AddCollateralOptions } from '@/llamalend/mutations/add-collateral.mutation'
 import { useMarketRates } from '@/llamalend/queries/market-rates'
+import { getUserHealthOptions } from '@/llamalend/queries/user-health.query'
+import { mapQuery } from '@/llamalend/queries/utils'
+import type { Query } from '@/llamalend/widgets/manage-loan/loan.types'
 import { LoanFormAlerts } from '@/llamalend/widgets/manage-loan/LoanFormAlerts'
 import { LoanFormTokenInput } from '@/llamalend/widgets/manage-loan/LoanFormTokenInput'
 import { LoanFormWrapper } from '@/llamalend/widgets/manage-loan/LoanFormWrapper'
@@ -11,9 +16,15 @@ import Button from '@mui/material/Button'
 import Stack from '@mui/material/Stack'
 import { useSwitch } from '@ui-kit/hooks/useSwitch'
 import { t } from '@ui-kit/lib/i18n'
+import { decimal } from '@ui-kit/utils'
 import { InputDivider } from '../../../widgets/InputDivider'
 import { useAddCollateralForm } from '../hooks/useAddCollateralForm'
 
+const withTokenSymbol = <T,>(query: Query<T | null>, tokenSymbol?: string) => ({
+  ...query,
+  tokenSymbol,
+})
+
 export const AddCollateralForm = <ChainId extends IChainId>({
   market,
   networks,
@@ -37,15 +48,14 @@ export const AddCollateralForm = <ChainId extends IChainId>({
     action,
     params,
     values,
-    bands,
     health,
-    prices,
     gas,
     isApproved,
     formErrors,
     collateralToken,
     borrowToken,
     txHash,
+    userState,
   } = useAddCollateralForm({
     market,
     network,
@@ -54,30 +64,74 @@ export const AddCollateralForm = <ChainId extends IChainId>({
     onAdded,
   })
 
-  const marketRates = useMarketRates(params, isOpen)
+  const prevCollateral = useMemo(
+    () =>
+      withTokenSymbol(
+        mapQuery(userState, (state) => state?.collateral),
+        collateralToken?.symbol,
+      ),
+    [collateralToken?.symbol, userState],
+  )
+  const prevDebt = useMemo(
+    () =>
+      withTokenSymbol(
+        mapQuery(userState, (state) => state?.debt),
+        borrowToken?.symbol,
+      ),
+    [borrowToken?.symbol, userState],
+  )
+  const prevLoanToValue = useLoanToValueFromUserState({
+    chainId,
+    marketId: params.marketId,
+    userAddress: params.userAddress,
+    collateralToken,
+    borrowToken,
+    enabled: isOpen,
+  })
+  const prevHealth = useHealthQueries((isFull) => getUserHealthOptions({ ...params, isFull }, undefined))
 
+  const collateral = useMemo(
+    () =>
+      withTokenSymbol(
+        {
+          ...mapQuery(userState, (state) => state?.collateral),
+          data: decimal(
+            values.userCollateral
+              ? +values.userCollateral + (userState.data?.collateral ? +userState.data?.collateral : 0)
+              : null,
+          ),
+        },
+        collateralToken?.symbol,
+      ),
+    [collateralToken?.symbol, userState, values.userCollateral],
+  )
+  const marketRates = useMarketRates(params, isOpen)
+  const loanToValue = useLoanToValueFromUserState({
+    chainId: params.chainId!,
+    marketId: params.marketId,
+    userAddress: params.userAddress,
+    collateralToken,
+    borrowToken,
+    enabled: !!enabled && !!values.userCollateral,
+    collateralDelta: values.userCollateral,
+  })
   return (
     <LoanFormWrapper
       {...form}
       onSubmit={onSubmit}
       infoAccordion={
-        <LoanInfoAccordion // todo: prevHealth, prevRates, debt, prevDebt
+        <LoanInfoAccordion // todo: prevRates
           isOpen={isOpen}
           toggle={toggle}
+          prevHealth={prevHealth}
           health={health}
-          bands={bands}
-          prices={prices}
           rates={marketRates}
-          loanToValue={useLoanToValueFromUserState({
-            chainId: params.chainId!,
-            marketId: params.marketId,
-            userAddress: params.userAddress,
-            collateralToken,
-            borrowToken,
-            enabled: isOpen,
-            collateralDelta: values.userCollateral,
-          })}
+          prevLoanToValue={prevLoanToValue}
+          loanToValue={loanToValue}
+          prevDebt={prevDebt}
           gas={gas}
+          prevCollateral={prevCollateral}
+          collateral={collateral}
         />
       }
     >

apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts

@@ -11,6 +11,7 @@ import { useAddCollateralBands } from '@/llamalend/queries/add-collateral/add-co
 import { useAddCollateralEstimateGas } from '@/llamalend/queries/add-collateral/add-collateral-gas-estimate.query'
 import { getAddCollateralHealthOptions } from '@/llamalend/queries/add-collateral/add-collateral-health.query'
 import { useAddCollateralPrices } from '@/llamalend/queries/add-collateral/add-collateral-prices.query'
+import { useUserState } from '@/llamalend/queries/user-state.query'
 import type { CollateralParams } from '@/llamalend/queries/validation/manage-loan.types'
 import {
   collateralFormValidationSuite,
@@ -81,6 +82,7 @@ export const useAddCollateralForm = <ChainId extends LlamaChainId>({
 
   useCallbackAfterFormUpdate(form, action.reset)
 
+  const userState = useUserState(params, enabled)
   const bands = useAddCollateralBands(params, enabled)
   const health = useHealthQueries((isFull) => getAddCollateralHealthOptions({ ...params, isFull }, enabled))
   const prices = useAddCollateralPrices(params, enabled)
@@ -104,5 +106,6 @@ export const useAddCollateralForm = <ChainId extends LlamaChainId>({
     collateralToken,
     borrowToken,
     txHash: action.data?.hash,
+    userState,
   }
 }

apps/main/src/llamalend/queries/utils.ts

@@ -0,0 +1,16 @@
+import type { Query } from '../widgets/manage-loan/loan.types'
+
+/**
+ * Maps a Query type to extract partial data from it.
+ * Preserves error and loading states while transforming the data.
+ */
+export function mapQuery<TSource, TResult>(
+  query: Query<TSource>,
+  selector: (data: TSource) => TResult,
+): Query<TResult> {
+  return {
+    data: query.data === undefined ? undefined : selector(query.data),
+    isLoading: query.isLoading,
+    error: query.error,
+  }
+}