refactor: form tabs

apps/main/src/lend/components/AlertNoLoanFound.tsx

@@ -25,7 +25,7 @@ const AlertNoLoanFound = ({ alertType, owmId }: { alertType?: AlertType; owmId:
           size="large"
           onClick={() => {
             setStateByKeyMarkets('marketDetailsView', 'market')
-            push(getLoanCreatePathname(params, owmId, 'create'))
+            push(getLoanCreatePathname(params, owmId))
           }}
         >
           Create loan

apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx

@@ -0,0 +1,76 @@
+import { useCallback } from 'react'
+import LoanFormCreate from '@/lend/components/PageLoanCreate/LoanFormCreate'
+import type { FormValues } from '@/lend/components/PageLoanCreate/types'
+import { DEFAULT_FORM_VALUES } from '@/lend/components/PageLoanCreate/utils'
+import networks from '@/lend/networks'
+import useStore from '@/lend/store/useStore'
+import { type MarketUrlParams, type PageContentProps } from '@/lend/types/lend.types'
+import { CreateLoanForm } from '@/llamalend/features/borrow/components/CreateLoanForm'
+import type { OnBorrowFormUpdate } from '@/llamalend/features/borrow/types'
+import { hasLeverage } from '@/llamalend/llama.utils'
+import { useDebounced } from '@ui-kit/hooks/useDebounce'
+import { useCreateLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
+import { t } from '@ui-kit/lib/i18n'
+import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
+import { Duration } from '@ui-kit/themes/design/0_primitives'
+
+type CreateLoanProps = PageContentProps<MarketUrlParams>
+
+/**
+ * Callback that synchronizes the `ChartOhlc` component with the `RangeSlider` component in the new `BorrowTabContents`.
+ */
+const useOnFormUpdate = ({ api, market }: Pick<CreateLoanProps, 'api' | 'market'>): OnBorrowFormUpdate => {
+  const [setFormValues] = useDebounced(
+    useStore((store) => store.loanCreate.setFormValues),
+    Duration.FormDebounce,
+  )
+  const [setStateByKeys] = useDebounced(
+    useStore((store) => store.loanCreate.setStateByKeys),
+    Duration.FormDebounce,
+  )
+  return useCallback(
+    async ({ debt, userCollateral, range, slippage, leverageEnabled }) => {
+      const formValues: FormValues = {
+        ...DEFAULT_FORM_VALUES,
+        n: range,
+        debt: `${debt ?? ''}`,
+        userCollateral: `${userCollateral ?? ''}`,
+      }
+      await setFormValues(api, market, formValues, `${slippage}`, leverageEnabled)
+      setStateByKeys({ isEditLiqRange: true })
+    },
+    [api, market, setFormValues, setStateByKeys],
+  )
+}
+
+function CreateLoanTab({ market, api, rChainId }: CreateLoanProps) {
+  const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated)
+  const onCreated = useCallback(
+    async () => api && market && (await onLoanCreated(api, market)),
+    [api, market, onLoanCreated],
+  )
+  const onUpdate = useOnFormUpdate({ market, api })
+  return (
+    <CreateLoanForm networks={networks} chainId={rChainId} market={market} onUpdate={onUpdate} onCreated={onCreated} />
+  )
+}
+
+const LendCreateTabsNewMenu = [
+  { value: 'create', label: t`Borrow`, component: CreateLoanTab },
+] satisfies FormTab<CreateLoanProps>[]
+
+const LendCreateTabsOldMenu = [
+  { value: 'create', label: t`Create Loan`, component: LoanFormCreate },
+  {
+    value: 'leverage',
+    label: t`Leverage`,
+    component: (p) => <LoanFormCreate {...p} isLeverage />,
+    visible: ({ market }) => market && hasLeverage(market),
+  },
+] satisfies FormTab<CreateLoanProps>[]
+
+export const LoanCreateTabs = (pageProps: CreateLoanProps) => {
+  const menu = useCreateLoanMuiForm() ? LendCreateTabsNewMenu : LendCreateTabsOldMenu
+  const shouldWrap = menu === LendCreateTabsOldMenu
+  return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} />
+}

apps/main/src/lend/components/PageLoanCreate/LoanFormCreate/index.tsx

@@ -412,7 +412,7 @@ const LoanCreate = ({
             size="large"
             onClick={() => {
               setStateByKeyMarkets('marketDetailsView', 'user')
-              push(getLoanManagePathname(params, rOwmId, 'loan'))
+              push(getLoanManagePathname(params, rOwmId))
             }}
           >
             Manage loan
@@ -431,7 +431,7 @@ const LoanCreate = ({
           )}
           {steps && <Stepper steps={steps} />}
           {formStatus.isComplete && market && (
-            <LinkButton variant="filled" size="large" href={getLoanManagePathname(params, market.id, 'loan')}>
+            <LinkButton variant="filled" size="large" href={getLoanManagePathname(params, market.id)}>
               Manage loan
             </LinkButton>
           )}

apps/main/src/lend/components/PageLoanCreate/Page.tsx

@@ -3,7 +3,7 @@ import type { Address } from 'viem'
 import CampaignRewardsBanner from '@/lend/components/CampaignRewardsBanner'
 import { MarketInformationComp } from '@/lend/components/MarketInformationComp'
 import { MarketInformationTabs } from '@/lend/components/MarketInformationTabs'
-import LoanCreate from '@/lend/components/PageLoanCreate/index'
+import { LoanCreateTabs } from '@/lend/components/PageLoanCreate/LoanCreateTabs'
 import { useOneWayMarket } from '@/lend/entities/chain'
 import { useLendPageTitle } from '@/lend/hooks/useLendPageTitle'
 import { useMarketDetails } from '@/lend/hooks/useMarketDetails'
@@ -35,7 +35,7 @@ const { Spacing } = SizesAndSpaces
 
 const Page = () => {
   const params = useParams<MarketUrlParams>()
-  const { rMarket, rChainId, rFormType } = parseMarketParams(params)
+  const { rMarket, rChainId } = parseMarketParams(params)
 
   const { data: market, isSuccess } = useOneWayMarket(rChainId, rMarket)
   const { llamaApi: api = null, connectState } = useCurve()
@@ -88,7 +88,6 @@ const Page = () => {
     params,
     rChainId,
     rOwmId,
-    rFormType,
     api,
     market,
     titleMapper,
@@ -97,7 +96,7 @@ const Page = () => {
   }
   const positionDetailsHrefs = {
     borrow: '',
-    supply: getVaultPathname(params, rOwmId, 'deposit'),
+    supply: getVaultPathname(params, rOwmId),
   }
 
   return isSuccess && !market ? (
@@ -106,7 +105,7 @@ const Page = () => {
     <>
       <DetailPageStack>
         <AppPageFormsWrapper data-testid="form-wrapper">
-          {rChainId && rOwmId && <LoanCreate {...pageProps} params={params} />}
+          {rChainId && rOwmId && <LoanCreateTabs {...pageProps} params={params} />}
         </AppPageFormsWrapper>
         <Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
           <CampaignRewardsBanner

apps/main/src/lend/components/PageLoanCreate/types.ts

@@ -10,7 +10,6 @@ import {
 import type { HealthMode } from '@/llamalend/llamalend.types'
 import type { Step } from '@ui/Stepper/types'
 
-export type FormType = 'create' | 'vault' | 'leverage'
 export type StepKey = 'APPROVAL' | 'CREATE' | ''
 export type InpError = 'too-much' | 'too-much-max' | ''
 

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

@@ -26,6 +26,7 @@ import { useLoanExists } from '@/llamalend/queries/loan-exists'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import AlertBox from '@ui/AlertBox'
+import { AppFormContentWrapper } from '@ui/AppForm'
 import { getActiveStep } from '@ui/Stepper/helpers'
 import Stepper from '@ui/Stepper/Stepper'
 import type { Step } from '@ui/Stepper/types'
@@ -40,17 +41,18 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 const { Spacing } = SizesAndSpaces
 
+export type LoanBorrowMoreProps = PageContentProps & { isLeverage?: boolean }
+
 const LoanBorrowMore = ({
   rChainId,
   rOwmId,
-  isLeverage = false,
   isLoaded,
   api,
   market,
   userActiveKey,
-}: PageContentProps & { isLeverage?: boolean }) => {
+  isLeverage = false,
+}: LoanBorrowMoreProps) => {
   const isSubscribed = useRef(false)
-
   const activeKey = useStore((state) => state.loanBorrowMore.activeKey)
   const activeKeyMax = useStore((state) => state.loanBorrowMore.activeKeyMax)
   const detailInfoLeverage = useStore((state) => state.loanBorrowMore.detailInfoLeverage[activeKey])
@@ -436,3 +438,14 @@ const LoanBorrowMore = ({
 }
 
 export default LoanBorrowMore
+
+/**
+ * The new implementation of LoanBorrowMore with mui isn't ready yet. For now, we wrap the old one for styling.
+ */
+export const LoanBorrowMoreWrapped = (props: LoanBorrowMoreProps) => (
+  <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
+    <AppFormContentWrapper>
+      <LoanBorrowMore {...props} />
+    </AppFormContentWrapper>
+  </Stack>
+)

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

@@ -19,6 +19,7 @@ import useStore from '@/lend/store/useStore'
 import { Api, OneWayMarketTemplate, PageContentProps } from '@/lend/types/lend.types'
 import { _showNoLoanFound } from '@/lend/utils/helpers'
 import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
+import { AddCollateralForm } from '@/llamalend/features/manage-loan/components/AddCollateralForm'
 import { useLoanExists } from '@/llamalend/queries/loan-exists'
 import AlertBox from '@ui/AlertBox'
 import { getActiveStep } from '@ui/Stepper/helpers'
@@ -258,3 +259,7 @@ const LoanCollateralAdd = ({ rChainId, rOwmId, api, isLoaded, market, userActive
 }
 
 export default LoanCollateralAdd
+
+export const LoanAddCollateralTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
+  <AddCollateralForm networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
+)

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

@@ -21,6 +21,7 @@ import useStore from '@/lend/store/useStore'
 import { Api, OneWayMarketTemplate, PageContentProps } from '@/lend/types/lend.types'
 import { _showNoLoanFound } from '@/lend/utils/helpers'
 import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
+import { RemoveCollateralForm } from '@/llamalend/features/manage-loan/components/RemoveCollateralForm'
 import type { HealthMode } from '@/llamalend/llamalend.types'
 import { useLoanExists } from '@/llamalend/queries/loan-exists'
 import AlertBox from '@ui/AlertBox'
@@ -296,3 +297,7 @@ const LoanCollateralRemove = ({ rChainId, rOwmId, isLoaded, api, market, userAct
 }
 
 export default LoanCollateralRemove
+
+export const LoanRemoveCollateralTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
+  <RemoveCollateralForm networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
+)

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

@@ -20,6 +20,7 @@ import { Api, FormError, type MarketUrlParams, OneWayMarketTemplate, PageContent
 import { _showNoLoanFound } from '@/lend/utils/helpers'
 import { getCollateralListPathname } from '@/lend/utils/utilsRouter'
 import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
+import { RepayForm } from '@/llamalend/features/manage-loan/components/RepayForm'
 import type { HealthMode } from '@/llamalend/llamalend.types'
 import { useLoanExists } from '@/llamalend/queries/loan-exists'
 import Stack from '@mui/material/Stack'
@@ -537,3 +538,11 @@ const LoanRepay = ({
 }
 
 export default LoanRepay
+
+export const LoanRepayFromWalletTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
+  <RepayForm fromWallet networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
+)
+
+export const LoanRepayFromCollateralTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
+  <RepayForm fromCollateral networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
+)

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

@@ -45,7 +45,7 @@ const LoanSelfLiquidation = ({
   market,
   userActiveKey,
   params,
-}: PageContentProps & { params: MarketUrlParams }) => {
+}: PageContentProps<MarketUrlParams>) => {
   const isSubscribed = useRef(false)
   const formEstGas = useStore((state) => state.loanSelfLiquidation.formEstGas)
   const formStatus = useStore((state) => state.loanSelfLiquidation.formStatus)