revert: "Merge pull request #1730 from curvefi/refactor/routes"

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))
+            push(getLoanCreatePathname(params, owmId, 'create'))
           }}
         >
           Create loan

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))
+              push(getLoanManagePathname(params, rOwmId, 'loan'))
             }}
           >
             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)}>
+            <LinkButton variant="filled" size="large" href={getLoanManagePathname(params, market.id, 'loan')}>
               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 { LoanCreateTabs } from '@/lend/components/PageLoanCreate/LoanCreateTabs'
+import LoanCreate from '@/lend/components/PageLoanCreate/index'
 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 } = parseMarketParams(params)
+  const { rMarket, rChainId, rFormType } = parseMarketParams(params)
 
   const { data: market, isSuccess } = useOneWayMarket(rChainId, rMarket)
   const { llamaApi: api = null, connectState } = useConnection()
@@ -88,6 +88,7 @@ const Page = () => {
     params,
     rChainId,
     rOwmId,
+    rFormType,
     api,
     market,
     titleMapper,
@@ -96,7 +97,7 @@ const Page = () => {
   }
   const positionDetailsHrefs = {
     borrow: '',
-    supply: getVaultPathname(params, rOwmId),
+    supply: getVaultPathname(params, rOwmId, 'deposit'),
   }
 
   return isSuccess && !market ? (
@@ -105,7 +106,7 @@ const Page = () => {
     <>
       <DetailPageStack>
         <AppPageFormsWrapper data-testid="form-wrapper">
-          {rChainId && rOwmId && <LoanCreateTabs {...pageProps} params={params} />}
+          {rChainId && rOwmId && <LoanCreate {...pageProps} params={params} />}
         </AppPageFormsWrapper>
         <Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
           <CampaignRewardsBanner

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

@@ -0,0 +1,103 @@
+import { useCallback, useMemo } 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 { getLoanCreatePathname } from '@/lend/utils/utilsRouter'
+import { CreateLoanForm } from '@/llamalend/features/borrow/components/CreateLoanForm'
+import type { OnBorrowFormUpdate } from '@/llamalend/features/borrow/types'
+import Stack from '@mui/material/Stack'
+import { AppFormContentWrapper } from '@ui/AppForm'
+import { useNavigate } from '@ui-kit/hooks/router'
+import { useCreateLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
+import { t } from '@ui-kit/lib/i18n'
+import { TabsSwitcher, type TabOption } from '@ui-kit/shared/ui/TabsSwitcher'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { MaxWidth } = SizesAndSpaces
+
+/**
+ * Callback that synchronizes the `ChartOhlc` component with the `RangeSlider` component in the new `BorrowTabContents`.
+ */
+const useOnFormUpdate = ({ api, market }: PageContentProps): OnBorrowFormUpdate =>
+  useCallback(
+    async ({ debt, userCollateral, range, slippage, leverageEnabled }) => {
+      const { setFormValues, setStateByKeys } = useStore.getState().loanCreate
+      const formValues: FormValues = {
+        ...DEFAULT_FORM_VALUES,
+        n: range,
+        debt: `${debt ?? ''}`,
+        userCollateral: `${userCollateral ?? ''}`,
+      }
+      await setFormValues(api, market, formValues, `${slippage}`, leverageEnabled)
+      setStateByKeys({ isEditLiqRange: true })
+    },
+    [api, market],
+  )
+
+const LoanCreate = (pageProps: PageContentProps & { params: MarketUrlParams }) => {
+  const { rChainId, rOwmId, rFormType, market, params, api } = pageProps
+  const push = useNavigate()
+  const shouldUseBorrowUnifiedForm = useCreateLoanMuiForm()
+  const onUpdate = useOnFormUpdate(pageProps)
+
+  const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated)
+  const resetState = useStore((state) => state.loanCreate.resetState)
+
+  type Tab = 'create' | 'leverage'
+  const tabs: TabOption<Tab>[] = useMemo(
+    () =>
+      shouldUseBorrowUnifiedForm
+        ? // the new borrow form contains both create and leverage functionality
+          [{ value: 'create' as const, label: t`Borrow` }]
+        : [
+            { value: 'create' as const, label: t`Create Loan` },
+            ...(market?.leverage.hasLeverage() ? [{ value: 'leverage' as const, label: t`Leverage` }] : []),
+          ],
+    [market?.leverage, shouldUseBorrowUnifiedForm],
+  )
+
+  const onCreated = useCallback(
+    async () => api && market && (await onLoanCreated(api, market)),
+    [api, market, onLoanCreated],
+  )
+
+  return (
+    <Stack
+      sx={{
+        width: { mobile: '100%', tablet: MaxWidth.actionCard },
+        marginInline: { mobile: 'auto', desktop: 0 },
+      }}
+    >
+      <TabsSwitcher
+        variant="contained"
+        size="medium"
+        value={!rFormType ? 'create' : rFormType}
+        onChange={(key) => {
+          resetState({ rChainId, rOwmId, key })
+          push(getLoanCreatePathname(params, rOwmId, key))
+        }}
+        options={tabs}
+      />
+      {shouldUseBorrowUnifiedForm ? (
+        <CreateLoanForm
+          networks={networks}
+          chainId={rChainId}
+          market={market ?? undefined}
+          onUpdate={onUpdate}
+          onCreated={onCreated}
+        />
+      ) : (
+        <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
+          <AppFormContentWrapper>
+            <LoanFormCreate isLeverage={rFormType === 'leverage'} {...pageProps} />
+          </AppFormContentWrapper>
+        </Stack>
+      )}
+    </Stack>
+  )
+}
+
+export default LoanCreate

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

@@ -10,6 +10,7 @@ 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

@@ -21,13 +21,11 @@ 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 { hasLeverage } from '@/llamalend/llama.utils'
 import type { HealthMode } from '@/llamalend/llamalend.types'
 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'
@@ -42,9 +40,17 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 const { Spacing } = SizesAndSpaces
 
-const LoanBorrowMore = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+const LoanBorrowMore = ({
+  rChainId,
+  rOwmId,
+  isLeverage = false,
+  isLoaded,
+  api,
+  market,
+  userActiveKey,
+}: PageContentProps & { isLeverage?: boolean }) => {
   const isSubscribed = useRef(false)
-  const isLeverage = !!market && hasLeverage(market)
+
   const activeKey = useStore((state) => state.loanBorrowMore.activeKey)
   const activeKeyMax = useStore((state) => state.loanBorrowMore.activeKeyMax)
   const detailInfoLeverage = useStore((state) => state.loanBorrowMore.detailInfoLeverage[activeKey])
@@ -430,14 +436,3 @@ const LoanBorrowMore = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey
 }
 
 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: PageContentProps) => (
-  <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-    <AppFormContentWrapper>
-      <LoanBorrowMore {...props} />
-    </AppFormContentWrapper>
-  </Stack>
-)

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

@@ -19,7 +19,6 @@ 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'
@@ -259,7 +258,3 @@ 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,7 +21,6 @@ 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'
@@ -297,7 +296,3 @@ 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,7 +20,6 @@ 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'
@@ -538,11 +537,3 @@ 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<MarketUrlParams>) => {
+}: PageContentProps & { params: MarketUrlParams }) => {
   const isSubscribed = useRef(false)
   const formEstGas = useStore((state) => state.loanSelfLiquidation.formEstGas)
   const formStatus = useStore((state) => state.loanSelfLiquidation.formStatus)