feat: loan management form add/remove collateral

apps/main/src/lend/components/PageLoanManage/index.tsx

@@ -28,8 +28,8 @@ const tabsLoan: TabOption<LoanFormType>[] = [
 ]
 
 const tabsCollateral: TabOption<CollateralFormType>[] = [
-  { value: 'collateral-increase', label: t`Add collateral` },
-  { value: 'collateral-decrease', label: t`Remove collateral` },
+  { value: 'collateral-increase', label: t`Add` },
+  { value: 'collateral-decrease', label: t`Remove` },
 ]
 
 const ManageLoan = (pageProps: PageContentProps & { params: MarketUrlParams }) => {
@@ -81,6 +81,7 @@ const ManageLoan = (pageProps: PageContentProps & { params: MarketUrlParams }) =
             onChange={setSubTab}
             options={subTabs}
             fullWidth
+            sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}
           />
 
           {subTab === 'loan-increase' && (

apps/main/src/lend/lib/apiLending.ts

@@ -28,7 +28,8 @@ import {
   UserMarketBalances,
 } from '@/lend/types/lend.types'
 import { OneWayMarketTemplate } from '@/lend/types/lend.types'
-import { fulfilledValue, getErrorMessage, log } from '@/lend/utils/helpers'
+import { fulfilledValue, log } from '@/lend/utils/helpers'
+import { getErrorMessage } from '@/llamalend/helpers'
 import { getIsUserCloseToLiquidation, getLiquidationStatus, reverseBands, sortBandsLend } from '@/llamalend/llama.utils'
 import PromisePool from '@supercharge/promise-pool'
 import type { StepStatus } from '@ui/Stepper/types'

apps/main/src/lend/utils/helpers.ts

@@ -30,14 +30,6 @@ export function getErrorMessage(error: CustomError, defaultErrorMessage: string)
   return errorMessage
 }
 
-export function scrollToTop() {
-  window.scroll({
-    top: 0,
-    left: 0,
-    behavior: 'smooth',
-  })
-}
-
 export function fulfilledValue<T>(result: PromiseSettledResult<T>) {
   if (result.status === 'fulfilled') {
     return result.value

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

@@ -1,7 +1,5 @@
-import { useLoanToValueFromUserState } from '@/llamalend/features/manage-loan/hooks/useLoanToValueFromUserState'
 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 { LoanFormAlerts } from '@/llamalend/widgets/manage-loan/LoanFormAlerts'
 import { LoanFormTokenInput } from '@/llamalend/widgets/manage-loan/LoanFormTokenInput'
 import { LoanFormWrapper } from '@/llamalend/widgets/manage-loan/LoanFormWrapper'
@@ -35,55 +33,55 @@ export const AddCollateralForm = <ChainId extends IChainId>({
     isPending,
     onSubmit,
     action,
-    params,
     values,
-    bands,
     health,
-    prices,
     gas,
     isApproved,
     formErrors,
     collateralToken,
     borrowToken,
     txHash,
+    userState,
+    expectedCollateral,
+    prevHealth,
+    marketRates,
+    prevLoanToValue,
+    loanToValue,
   } = useAddCollateralForm({
     market,
     network,
     networks,
     enabled,
     onAdded,
+    isAccordionOpen: isOpen,
   })
 
-  const marketRates = useMarketRates(params, isOpen)
-
   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}
+          userState={{
+            ...userState,
+            borrowTokenSymbol: borrowToken?.symbol,
+            collateralTokenSymbol: collateralToken?.symbol,
+          }}
           gas={gas}
+          collateral={expectedCollateral}
         />
       }
     >
       <Stack divider={<InputDivider />}>
         <LoanFormTokenInput
-          label={t`Collateral`}
+          label={t`Amount to Add`}
           token={collateralToken}
           blockchainId={network.id}
           name="userCollateral"
@@ -93,15 +91,6 @@ export const AddCollateralForm = <ChainId extends IChainId>({
         />
       </Stack>
 
-      <Button
-        type="submit"
-        loading={isPending || !market}
-        disabled={formErrors.length > 0}
-        data-testid="add-collateral-submit-button"
-      >
-        {isPending ? t`Processing...` : isApproved.data ? t`Add collateral` : t`Approve & Add collateral`}
-      </Button>
-
       <LoanFormAlerts
         isSuccess={action.isSuccess}
         error={action.error}
@@ -111,6 +100,19 @@ export const AddCollateralForm = <ChainId extends IChainId>({
         handledErrors={['userCollateral']}
         successTitle={t`Collateral added`}
       />
+
+      <Button
+        type="submit"
+        loading={isPending || !market}
+        disabled={formErrors.length > 0}
+        data-testid="add-collateral-submit-button"
+      >
+        {isPending
+          ? t`Processing...`
+          : isApproved.data || isApproved.isPending || !values.userCollateral
+            ? t`Add collateral`
+            : t`Approve & Add collateral`}
+      </Button>
     </LoanFormWrapper>
   )
 }

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

@@ -1,7 +1,5 @@
-import { useLoanToValueFromUserState } from '@/llamalend/features/manage-loan/hooks/useLoanToValueFromUserState'
 import type { LlamaMarketTemplate, NetworkDict } from '@/llamalend/llamalend.types'
 import type { RemoveCollateralOptions } from '@/llamalend/mutations/remove-collateral.mutation'
-import { useMarketRates } from '@/llamalend/queries/market-rates'
 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 +9,7 @@ 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 { Balance } from '@ui-kit/shared/ui/Balance'
 import { InputDivider } from '../../../widgets/InputDivider'
-import { setValueOptions } from '../../borrow/react-form.utils'
 import { useRemoveCollateralForm } from '../hooks/useRemoveCollateralForm'
 
 export const RemoveCollateralForm = <ChainId extends IChainId>({
@@ -38,86 +34,67 @@ export const RemoveCollateralForm = <ChainId extends IChainId>({
     onSubmit,
     action,
     maxRemovable,
-    params,
-    values,
-    bands,
     health,
-    prices,
     gas,
     formErrors,
     collateralToken,
     borrowToken,
     txHash,
+    userState,
+    expectedCollateral,
+    prevHealth,
+    marketRates,
+    prevLoanToValue,
+    loanToValue,
   } = useRemoveCollateralForm({
     market,
     network,
     networks,
     enabled,
     onRemoved,
+    isAccordionOpen: isOpen,
   })
 
-  const marketRates = useMarketRates(params, isOpen)
-
   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 != null
-                ? (`-${values.userCollateral}` as unknown as import('@ui-kit/utils').Decimal)
-                : undefined,
-          })}
+          prevLoanToValue={prevLoanToValue}
+          loanToValue={loanToValue}
+          userState={{
+            ...userState,
+            borrowTokenSymbol: borrowToken?.symbol,
+            collateralTokenSymbol: collateralToken?.symbol,
+          }}
           gas={gas}
+          collateral={expectedCollateral}
         />
       }
     >
       <Stack divider={<InputDivider />}>
         <LoanFormTokenInput
-          label={t`Collateral`}
+          label={t`Amount to Remove`}
           token={collateralToken}
           blockchainId={network.id}
           name="userCollateral"
           form={form}
           max={maxRemovable}
           testId="remove-collateral-input"
           network={network}
-          message={
-            <Balance
-              prefix={t`Max removable:`}
-              tooltip={t`Max removable`}
-              symbol={collateralToken?.symbol}
-              balance={maxRemovable.data}
-              loading={maxRemovable.isLoading}
-              onClick={() => form.setValue('userCollateral', maxRemovable.data, setValueOptions)}
-            />
-          }
+          positionBalance={{
+            position: maxRemovable,
+            tooltip: t`Max Removable Collateral`,
+          }}
         />
       </Stack>
 
-      <Button
-        type="submit"
-        loading={isPending || !market}
-        disabled={formErrors.length > 0}
-        data-testid="remove-collateral-submit-button"
-      >
-        {isPending ? t`Processing...` : t`Remove collateral`}
-      </Button>
-
       <LoanFormAlerts
         isSuccess={action.isSuccess}
         error={action.error}
@@ -127,6 +104,15 @@ export const RemoveCollateralForm = <ChainId extends IChainId>({
         handledErrors={['userCollateral']}
         successTitle={t`Collateral removed`}
       />
+
+      <Button
+        type="submit"
+        loading={isPending || !market}
+        disabled={formErrors.length > 0}
+        data-testid="remove-collateral-submit-button"
+      >
+        {isPending ? t`Processing...` : t`Remove collateral`}
+      </Button>
     </LoanFormWrapper>
   )
 }