From a15f5cbc7cfed047cbbb7734ff8f00bd84b479a0 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Tue, 2 Dec 2025 17:33:36 +0100
Subject: [PATCH 01/15] refactor: manage loan tabs

---
 .../PageLoanManage/LoanBorrowMore/index.tsx   |  24 +--
 .../LoanCollateralAdd/index.tsx               |   5 +
 .../LoanCollateralRemove/index.tsx            |   5 +
 .../PageLoanManage/LoanRepay/index.tsx        |   9 +
 .../LoanSelfLiquidation/index.tsx             |   2 +-
 .../PageLoanManage/ManageLoanTabs.tsx         |  86 ++++++++++
 .../lend/components/PageLoanManage/Page.tsx   |   4 +-
 .../lend/components/PageLoanManage/index.tsx  | 157 ------------------
 apps/main/src/lend/types/lend.types.ts        |   4 +-
 .../components/AddCollateralForm.tsx          |   2 +-
 .../components/RemoveCollateralForm.tsx       |   2 +-
 .../manage-loan/components/RepayForm.tsx      |  68 ++++----
 .../manage-loan/hooks/useAddCollateralForm.ts |   2 +-
 .../hooks/useRemoveCollateralForm.ts          |   2 +-
 .../manage-loan/hooks/useRepayForm.ts         |   2 +-
 .../src/llamalend/mutations/repay.mutation.ts |   2 +-
 .../llamalend/mutations/useLlammaMutation.ts  |   4 +-
 .../loan/components/PageLoanCreate/index.tsx  |   2 +-
 .../src/shared/ui/FormTabs/FormTabs.tsx       |  76 +++++++++
 19 files changed, 249 insertions(+), 209 deletions(-)
 create mode 100644 apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
 delete mode 100644 apps/main/src/lend/components/PageLoanManage/index.tsx
 create mode 100644 packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx

diff --git a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
index 91ea35d726..a0b2b5e301 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
+++ b/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,9 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 const { Spacing } = SizesAndSpaces
 
-const LoanBorrowMore = ({
-  rChainId,
-  rOwmId,
-  isLeverage = false,
-  isLoaded,
-  api,
-  market,
-  userActiveKey,
-}: PageContentProps & { isLeverage?: boolean }) => {
+const LoanBorrowMore = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
   const isSubscribed = useRef(false)
-
+  const isLeverage = market?.leverage?.hasLeverage() ?? 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 +429,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: PageContentProps) => (
+  <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
+    <AppFormContentWrapper>
+      <LoanBorrowMore {...props} />
+    </AppFormContentWrapper>
+  </Stack>
+)
diff --git a/apps/main/src/lend/components/PageLoanManage/LoanCollateralAdd/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanCollateralAdd/index.tsx
index 7fb4485c0b..eea70678a7 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanCollateralAdd/index.tsx
+++ b/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} />
+)
diff --git a/apps/main/src/lend/components/PageLoanManage/LoanCollateralRemove/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanCollateralRemove/index.tsx
index aa959653e8..0a2e54f410 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanCollateralRemove/index.tsx
+++ b/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} />
+)
diff --git a/apps/main/src/lend/components/PageLoanManage/LoanRepay/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanRepay/index.tsx
index aa58edd63f..8c4c51015e 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanRepay/index.tsx
+++ b/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} />
+)
diff --git a/apps/main/src/lend/components/PageLoanManage/LoanSelfLiquidation/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanSelfLiquidation/index.tsx
index b1647b2693..15efbecd39 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanSelfLiquidation/index.tsx
+++ b/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)
diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
new file mode 100644
index 0000000000..88d81c7440
--- /dev/null
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -0,0 +1,86 @@
+import LoanBorrowMore, { LoanBorrowMoreWrapped } from '@/lend/components/PageLoanManage/LoanBorrowMore'
+import LoanCollateralAdd, { LoanAddCollateralTab } from '@/lend/components/PageLoanManage/LoanCollateralAdd'
+import LoanCollateralRemove, { LoanRemoveCollateralTab } from '@/lend/components/PageLoanManage/LoanCollateralRemove'
+import LoanRepay, {
+  LoanRepayFromCollateralTab,
+  LoanRepayFromWalletTab,
+} from '@/lend/components/PageLoanManage/LoanRepay'
+import LoanSelfLiquidation from '@/lend/components/PageLoanManage/LoanSelfLiquidation'
+import { type MarketUrlParams, PageContentProps } from '@/lend/types/lend.types'
+import { useManageLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
+import { t } from '@ui-kit/lib/i18n'
+import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
+
+type ManageLoanProps = PageContentProps<MarketUrlParams>
+
+export const LendManageLegacyMenu = [
+  {
+    value: 'loan',
+    label: t`Borrow`,
+    subTabs: [
+      { value: 'loan-increase', label: t`Borrow more`, component: LoanBorrowMore },
+      { value: 'loan-decrease', label: t`Repay`, component: LoanRepay },
+      { value: 'loan-liquidate', label: t`Self-liquidate`, component: LoanSelfLiquidation },
+    ],
+  },
+  {
+    value: 'collateral',
+    label: t`Borrow`,
+    subTabs: [
+      { value: 'collateral-increase', label: t`Add collateral`, component: LoanCollateralAdd },
+      { value: 'collateral-decrease', label: t`Remove collateral`, component: LoanCollateralRemove },
+    ],
+  },
+  {
+    value: 'leverage',
+    label: t`Leverage`,
+    enabled: ({ market }) => market?.leverage?.hasLeverage(),
+    component: LoanBorrowMore,
+  },
+] satisfies FormTab<ManageLoanProps>[]
+
+export const LendManageNewMenu = [
+  {
+    value: 'borrow',
+    label: ({ market }) => (market?.leverage?.hasLeverage() ? t`Leverage` : t`Borrow`),
+    component: LoanBorrowMoreWrapped,
+  },
+  {
+    value: 'repay',
+    label: t`Repay`,
+    subTabs: [
+      { value: 'from-wallet', label: t`From wallet`, component: LoanRepayFromWalletTab },
+      { value: 'from-collateral', label: t`From collateral`, component: LoanRepayFromCollateralTab },
+    ],
+  },
+  {
+    value: 'collateral',
+    label: t`Collateral`,
+    subTabs: [
+      { value: 'add', label: t`Add`, component: LoanAddCollateralTab },
+      { value: 'remove', label: t`Remove`, component: LoanRemoveCollateralTab },
+    ],
+  },
+  {
+    value: 'soft-liquidation',
+    label: t`Manage soft liquidation`,
+    component: LoanSelfLiquidation, // todo: migrate `ManageSoftLiquidation` component
+    // subTabs: [
+    //   { value: 'improve-health', label: t`Improve health` },
+    //   { value: 'recover', label: t`Recover` },
+    //   { value: 'close-position', label: t`Close position` },
+    // ],
+  },
+] satisfies FormTab<ManageLoanProps>[]
+
+export const ManageLoanTabs = (pageProps: ManageLoanProps) => {
+  const shouldUseManageLoanMuiForm = useManageLoanMuiForm()
+  return (
+    <FormTabs<ManageLoanProps>
+      params={pageProps}
+      menu={shouldUseManageLoanMuiForm ? LendManageNewMenu : LendManageLegacyMenu}
+      shouldWrap={!shouldUseManageLoanMuiForm}
+      defaultTab={pageProps.rFormType}
+    />
+  )
+}
diff --git a/apps/main/src/lend/components/PageLoanManage/Page.tsx b/apps/main/src/lend/components/PageLoanManage/Page.tsx
index 33e06b16c3..532e190864 100644
--- a/apps/main/src/lend/components/PageLoanManage/Page.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/Page.tsx
@@ -4,7 +4,7 @@ import CampaignRewardsBanner from '@/lend/components/CampaignRewardsBanner'
 import ChartOhlcWrapper from '@/lend/components/ChartOhlcWrapper'
 import { MarketInformationComp } from '@/lend/components/MarketInformationComp'
 import { MarketInformationTabs } from '@/lend/components/MarketInformationTabs'
-import LoanMange from '@/lend/components/PageLoanManage/index'
+import { ManageLoanTabs } from '@/lend/components/PageLoanManage/ManageLoanTabs'
 import type { DetailInfoTypes } from '@/lend/components/PageLoanManage/types'
 import { useOneWayMarket } from '@/lend/entities/chain'
 import { useBorrowPositionDetails } from '@/lend/hooks/useBorrowPositionDetails'
@@ -187,7 +187,7 @@ const Page = () => {
             (isManageSoftLiq ? (
               <ManageSoftLiquidation marketId={rOwmId} chainId={rChainId} network={network} />
             ) : (
-              <LoanMange {...pageProps} />
+              <ManageLoanTabs {...pageProps} />
             ))}
         </AppPageFormsWrapper>
         <Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
diff --git a/apps/main/src/lend/components/PageLoanManage/index.tsx b/apps/main/src/lend/components/PageLoanManage/index.tsx
deleted file mode 100644
index 6fbdbfb48c..0000000000
--- a/apps/main/src/lend/components/PageLoanManage/index.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import LoanBorrowMore from '@/lend/components/PageLoanManage/LoanBorrowMore'
-import LoanCollateralAdd from '@/lend/components/PageLoanManage/LoanCollateralAdd'
-import LoanCollateralRemove from '@/lend/components/PageLoanManage/LoanCollateralRemove'
-import LoanRepay from '@/lend/components/PageLoanManage/LoanRepay'
-import LoanSelfLiquidation from '@/lend/components/PageLoanManage/LoanSelfLiquidation'
-import type { CollateralFormType, LeverageFormType, LoanFormType } from '@/lend/components/PageLoanManage/types'
-import networks from '@/lend/networks'
-import { type MarketUrlParams, PageContentProps } from '@/lend/types/lend.types'
-import { getLoanManagePathname } from '@/lend/utils/utilsRouter'
-import { AddCollateralForm } from '@/llamalend/features/manage-loan/components/AddCollateralForm'
-import { RemoveCollateralForm } from '@/llamalend/features/manage-loan/components/RemoveCollateralForm'
-import { RepayForm } from '@/llamalend/features/manage-loan/components/RepayForm'
-import Stack from '@mui/material/Stack'
-import { AppFormContentWrapper } from '@ui/AppForm'
-import { useNavigate } from '@ui-kit/hooks/router'
-import { useManageLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
-import { t } from '@ui-kit/lib/i18n'
-import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
-import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-
-const { MaxWidth } = SizesAndSpaces
-
-const tabsLoan: TabOption<LoanFormType>[] = [
-  { value: 'loan-increase', label: t`Borrow more` },
-  { value: 'loan-decrease', label: t`Repay` },
-  { value: 'loan-liquidate', label: t`Self-liquidate` },
-]
-
-const tabsCollateral: TabOption<CollateralFormType>[] = [
-  { value: 'collateral-increase', label: t`Add collateral` },
-  { value: 'collateral-decrease', label: t`Remove collateral` },
-]
-
-const ManageLoan = (pageProps: PageContentProps & { params: MarketUrlParams }) => {
-  const { rChainId, rOwmId, rFormType, market, params, isLoaded } = pageProps
-  const push = useNavigate()
-  const shouldUseManageLoanMuiForm = useManageLoanMuiForm()
-  const useMuiForm = shouldUseManageLoanMuiForm && !!market
-
-  type Tab = 'loan' | 'collateral' | 'leverage'
-  const tabs: TabOption<Tab>[] = useMemo(
-    () => [
-      { value: 'loan' as const, label: t`Loan` },
-      { value: 'collateral' as const, label: t`Collateral` },
-      ...(market?.leverage?.hasLeverage() ? [{ value: 'leverage' as const, label: t`Leverage` }] : []),
-    ],
-    [market?.leverage],
-  )
-
-  type SubTab = LoanFormType | CollateralFormType | LeverageFormType
-  const [subTab, setSubTab] = useState<SubTab | undefined>('loan-increase')
-
-  const subTabs = useMemo(
-    () => (!rFormType || rFormType === 'loan' ? tabsLoan : rFormType === 'collateral' ? tabsCollateral : []),
-    [rFormType],
-  )
-
-  useEffect(() => setSubTab(subTabs[0]?.value), [subTabs])
-
-  return (
-    <Stack
-      sx={{
-        width: { mobile: '100%', tablet: MaxWidth.actionCard },
-        marginInline: { mobile: 'auto', desktop: 0 },
-      }}
-    >
-      <TabsSwitcher
-        variant="contained"
-        size="medium"
-        value={!rFormType ? 'loan' : rFormType}
-        onChange={(key) => push(getLoanManagePathname(params, rOwmId, key))}
-        options={tabs}
-      />
-      {useMuiForm ? (
-        <>
-          <TabsSwitcher
-            variant="underlined"
-            size="small"
-            value={subTab}
-            onChange={setSubTab}
-            options={subTabs}
-            fullWidth
-          />
-
-          {subTab === 'loan-increase' && (
-            <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-              <AppFormContentWrapper>
-                <LoanBorrowMore {...pageProps} />
-              </AppFormContentWrapper>
-            </Stack>
-          )}
-          {subTab === 'loan-decrease' && market && (
-            <RepayForm
-              networks={networks}
-              chainId={rChainId}
-              market={market}
-              enabled={isLoaded}
-              // No extra side effects required for legacy store; llamalend hooks handle cache invalidation.
-              onRepaid={async () => {}}
-            />
-          )}
-          {subTab === 'loan-liquidate' && <LoanSelfLiquidation {...pageProps} />}
-          {subTab === 'collateral-increase' && market && (
-            <AddCollateralForm
-              networks={networks}
-              chainId={rChainId}
-              market={market}
-              enabled={isLoaded}
-              onAdded={async () => {}}
-            />
-          )}
-          {subTab === 'collateral-decrease' && market && (
-            <RemoveCollateralForm
-              networks={networks}
-              chainId={rChainId}
-              market={market}
-              enabled={isLoaded}
-              onRemoved={async () => {}}
-            />
-          )}
-          {/** Leverage has no subtabs */}
-          {rFormType === 'leverage' && (
-            <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-              <AppFormContentWrapper>
-                <LoanBorrowMore isLeverage {...pageProps} />
-              </AppFormContentWrapper>
-            </Stack>
-          )}
-        </>
-      ) : (
-        <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-          <TabsSwitcher
-            variant="underlined"
-            size="small"
-            value={subTab}
-            onChange={setSubTab}
-            options={subTabs}
-            fullWidth
-          />
-
-          <AppFormContentWrapper>
-            {subTab === 'loan-increase' && <LoanBorrowMore {...pageProps} />}
-            {subTab === 'loan-decrease' && <LoanRepay {...pageProps} />}
-            {subTab === 'loan-liquidate' && <LoanSelfLiquidation {...pageProps} />}
-            {subTab === 'collateral-increase' && <LoanCollateralAdd {...pageProps} />}
-            {subTab === 'collateral-decrease' && <LoanCollateralRemove {...pageProps} />}
-            {/** Leverage has no subtabs */}
-            {rFormType === 'leverage' && <LoanBorrowMore isLeverage {...pageProps} />}
-          </AppFormContentWrapper>
-        </Stack>
-      )}
-    </Stack>
-  )
-}
-
-export default ManageLoan
diff --git a/apps/main/src/lend/types/lend.types.ts b/apps/main/src/lend/types/lend.types.ts
index 0eae98be6a..12656357ba 100644
--- a/apps/main/src/lend/types/lend.types.ts
+++ b/apps/main/src/lend/types/lend.types.ts
@@ -84,8 +84,8 @@ export type VaultWithdrawFormType = 'withdraw' | 'unstake' | 'claim'
 export type VaultManageFormType = 'loan' | 'collateral'
 export type RFormType = VaultCreateFormType | VaultDepositFormType | VaultWithdrawFormType | VaultManageFormType | ''
 
-export type PageContentProps = {
-  params: UrlParams
+export type PageContentProps<T = UrlParams> = {
+  params: T
   rChainId: ChainId
   rOwmId: string
   rFormType: RFormType
diff --git a/apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx b/apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx
index e220cdcd39..2b7996d65b 100644
--- a/apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx
+++ b/apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx
@@ -25,7 +25,7 @@ export const AddCollateralForm = <ChainId extends IChainId>({
   networks: NetworkDict<ChainId>
   chainId: ChainId
   enabled?: boolean
-  onAdded: NonNullable<AddCollateralOptions['onAdded']>
+  onAdded?: NonNullable<AddCollateralOptions['onAdded']>
 }) => {
   const network = networks[chainId]
   const [isOpen, , , toggle] = useSwitch(false)
diff --git a/apps/main/src/llamalend/features/manage-loan/components/RemoveCollateralForm.tsx b/apps/main/src/llamalend/features/manage-loan/components/RemoveCollateralForm.tsx
index 627257bccf..9041ad73ab 100644
--- a/apps/main/src/llamalend/features/manage-loan/components/RemoveCollateralForm.tsx
+++ b/apps/main/src/llamalend/features/manage-loan/components/RemoveCollateralForm.tsx
@@ -27,7 +27,7 @@ export const RemoveCollateralForm = <ChainId extends IChainId>({
   networks: NetworkDict<ChainId>
   chainId: ChainId
   enabled?: boolean
-  onRemoved: NonNullable<RemoveCollateralOptions['onRemoved']>
+  onRemoved?: NonNullable<RemoveCollateralOptions['onRemoved']>
 }) => {
   const network = networks[chainId]
   const [isOpen, , , toggle] = useSwitch(false)
diff --git a/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx b/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx
index 3bad68091c..7a9f1ee418 100644
--- a/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx
+++ b/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx
@@ -21,12 +21,18 @@ export const RepayForm = <ChainId extends IChainId>({
   chainId,
   enabled,
   onRepaid,
+  fromCollateral,
+  fromWallet,
+  fromBorrowed,
 }: {
   market: LlamaMarketTemplate | undefined
   networks: NetworkDict<ChainId>
   chainId: ChainId
   enabled?: boolean
-  onRepaid: NonNullable<RepayOptions['onRepaid']>
+  onRepaid?: NonNullable<RepayOptions['onRepaid']>
+  fromCollateral?: boolean
+  fromWallet?: boolean
+  fromBorrowed?: boolean
 }) => {
   const network = networks[chainId]
   const [isOpen, , , toggle] = useSwitch(false)
@@ -86,33 +92,39 @@ export const RepayForm = <ChainId extends IChainId>({
       }
     >
       <Stack divider={<InputDivider />}>
-        <LoanFormTokenInput
-          label={t`From collateral (position)`}
-          token={collateralToken}
-          blockchainId={network.id}
-          name="stateCollateral"
-          form={form}
-          testId="repay-state-collateral-input"
-          network={network}
-        />
-        <LoanFormTokenInput
-          label={t`From collateral (wallet)`}
-          token={collateralToken}
-          blockchainId={network.id}
-          name="userCollateral"
-          form={form}
-          testId="repay-user-collateral-input"
-          network={network}
-        />
-        <LoanFormTokenInput
-          label={t`From borrowed token`}
-          token={borrowToken}
-          blockchainId={network.id}
-          name="userBorrowed"
-          form={form}
-          testId="repay-user-borrowed-input"
-          network={network}
-        />
+        {fromCollateral && (
+          <LoanFormTokenInput
+            label={t`From collateral (position)`}
+            token={collateralToken}
+            blockchainId={network.id}
+            name="stateCollateral"
+            form={form}
+            testId="repay-state-collateral-input"
+            network={network}
+          />
+        )}
+        {fromWallet && (
+          <LoanFormTokenInput
+            label={t`From collateral (wallet)`}
+            token={collateralToken}
+            blockchainId={network.id}
+            name="userCollateral"
+            form={form}
+            testId="repay-user-collateral-input"
+            network={network}
+          />
+        )}
+        {fromBorrowed && (
+          <LoanFormTokenInput
+            label={t`From borrowed token`}
+            token={borrowToken}
+            blockchainId={network.id}
+            name="userBorrowed"
+            form={form}
+            testId="repay-user-borrowed-input"
+            network={network}
+          />
+        )}
       </Stack>
 
       <Button type="submit" loading={isPending || !market} disabled={isDisabled} data-testid="repay-submit-button">
diff --git a/apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts b/apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts
index 2aebb351fb..26ee807448 100644
--- a/apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts
+++ b/apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts
@@ -36,7 +36,7 @@ export const useAddCollateralForm = <ChainId extends LlamaChainId>({
   network: LlamaNetwork<ChainId>
   networks: NetworkDict<ChainId>
   enabled?: boolean
-  onAdded: NonNullable<AddCollateralOptions['onAdded']>
+  onAdded?: NonNullable<AddCollateralOptions['onAdded']>
 }) => {
   const { address: userAddress } = useAccount()
   const { chainId } = network
diff --git a/apps/main/src/llamalend/features/manage-loan/hooks/useRemoveCollateralForm.ts b/apps/main/src/llamalend/features/manage-loan/hooks/useRemoveCollateralForm.ts
index 2328dd7aa2..50735074b6 100644
--- a/apps/main/src/llamalend/features/manage-loan/hooks/useRemoveCollateralForm.ts
+++ b/apps/main/src/llamalend/features/manage-loan/hooks/useRemoveCollateralForm.ts
@@ -43,7 +43,7 @@ export const useRemoveCollateralForm = <
   network: BaseConfig<NetworkName, ChainId>
   networks: NetworkDict<ChainId>
   enabled?: boolean
-  onRemoved: NonNullable<RemoveCollateralOptions['onRemoved']>
+  onRemoved?: NonNullable<RemoveCollateralOptions['onRemoved']>
 }) => {
   const { address: userAddress } = useAccount()
   const { chainId } = network
diff --git a/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts b/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts
index af011733b8..c717177dd3 100644
--- a/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts
+++ b/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts
@@ -37,7 +37,7 @@ export const useRepayForm = <ChainId extends LlamaChainId, NetworkName extends L
   network: { id: LlamaNetworkId; chainId: ChainId }
   networks: NetworkDict<ChainId>
   enabled?: boolean
-  onRepaid: NonNullable<RepayOptions['onRepaid']>
+  onRepaid?: NonNullable<RepayOptions['onRepaid']>
 }) => {
   const { address: userAddress } = useAccount()
   const { chainId } = network
diff --git a/apps/main/src/llamalend/mutations/repay.mutation.ts b/apps/main/src/llamalend/mutations/repay.mutation.ts
index ebbf67cec7..4761264aba 100644
--- a/apps/main/src/llamalend/mutations/repay.mutation.ts
+++ b/apps/main/src/llamalend/mutations/repay.mutation.ts
@@ -17,7 +17,7 @@ type RepayMutation = { stateCollateral: Decimal; userCollateral: Decimal; userBo
 export type RepayOptions = {
   marketId: string | undefined
   network: { id: LlamaNetworkId; chainId: LlamaChainId }
-  onRepaid: LlammaMutationOptions<RepayMutation>['onSuccess']
+  onRepaid?: LlammaMutationOptions<RepayMutation>['onSuccess']
   onReset?: () => void
   userAddress: Address | undefined
 }
diff --git a/apps/main/src/llamalend/mutations/useLlammaMutation.ts b/apps/main/src/llamalend/mutations/useLlammaMutation.ts
index 261dbb1335..4abb634f60 100644
--- a/apps/main/src/llamalend/mutations/useLlammaMutation.ts
+++ b/apps/main/src/llamalend/mutations/useLlammaMutation.ts
@@ -70,7 +70,7 @@ export type LlammaMutationOptions<TVariables extends object, TData extends Resul
   /** Message to display on success */
   successMessage: (variables: TVariables, context: Context) => string
   /** Callback executed on successful mutation */
-  onSuccess: (
+  onSuccess?: (
     data: TData,
     receipt: FormattedTransactionReceipt,
     variables: TVariables,
@@ -130,7 +130,7 @@ export function useLlammaMutation<TVariables extends object, TData extends Resul
       updateUserEventsApi(wallet!, { id: networkId }, context.market, receipt.transactionHash)
       await invalidateAllUserMarketDetails({ chainId, marketId, userAddress })
       onReset?.()
-      await onSuccess(data, receipt, variables, context)
+      await onSuccess?.(data, receipt, variables, context)
     },
     onError: (error, variables, context) => {
       logError(mutationKey, { error, variables, marketId: context?.market.id })
diff --git a/apps/main/src/loan/components/PageLoanCreate/index.tsx b/apps/main/src/loan/components/PageLoanCreate/index.tsx
index c2c7851abd..6a27973b91 100644
--- a/apps/main/src/loan/components/PageLoanCreate/index.tsx
+++ b/apps/main/src/loan/components/PageLoanCreate/index.tsx
@@ -55,7 +55,7 @@ const LoanCreate = ({
   const onUpdate = useOnFormUpdate(props)
   const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated)
 
-  const onCreated: CreateLoanOptions['onCreated'] = useCallback(
+  const onCreated: NonNullable<CreateLoanOptions['onCreated']> = useCallback(
     async (_data, _receipt, { slippage, leverageEnabled }: BorrowMutation) =>
       curve && llamma && (await onLoanCreated(curve, leverageEnabled, llamma, slippage)),
     [curve, llamma, onLoanCreated],
diff --git a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
new file mode 100644
index 0000000000..d1542d67ce
--- /dev/null
+++ b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
@@ -0,0 +1,76 @@
+import { type ReactNode, useState } from 'react'
+import Stack from '@mui/material/Stack'
+import { AppFormContentWrapper } from '@ui/AppForm'
+import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
+import { WithWrapper } from '@ui-kit/shared/ui/WithWrapper'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { MaxWidth } = SizesAndSpaces
+
+export type FormTab<Props> = {
+  value: string
+  label: string | ((props: Props) => string)
+  subTabs?: Pick<FormTab<Props>, 'value' | 'label' | 'component'>[]
+  enabled?: (props: Props) => boolean | undefined
+  component?: (props: Props) => ReactNode
+}
+
+type UseFormTabsOptions<T> = { menu: FormTab<T>[]; defaultTab: string; params: T }
+
+function useFormTabs<T>({ menu, defaultTab, params }: UseFormTabsOptions<T>) {
+  const [tabKey, setTabKey] = useState<string | undefined>(defaultTab)
+  const [subTabKey, setSubTabKey] = useState<string | undefined>()
+
+  const enabledTabs = menu.filter(({ enabled }) => enabled == null || enabled(params))
+  const tab = enabledTabs.find(({ value }) => value === tabKey) ?? enabledTabs[0]
+
+  const tabs: TabOption<string>[] = enabledTabs.map(({ value, label }) => ({
+    value,
+    label: typeof label == 'function' ? label(params) : label,
+    onClick: () => setTabKey(value),
+  }))
+
+  const subTabs: TabOption<string>[] =
+    tab.subTabs?.map(({ value, label }) => ({
+      value,
+      label: typeof label == 'function' ? label(params) : label,
+      onClick: () => setSubTabKey(value),
+    })) ?? []
+
+  const subTab = tab.subTabs?.find(({ value }) => value === subTabKey) ?? tab.subTabs?.[0]
+
+  const Component = subTab?.component ?? tab.component
+  if (!Component) throw new Error(`No component found for tab ${tab.value} and subTab ${subTab?.value}`)
+
+  return { tab, tabs, subTabs, subTab, Component }
+}
+
+export function FormTabs<T>({
+  shouldWrap,
+  ...options
+}: UseFormTabsOptions<T> & {
+  shouldWrap: boolean
+}) {
+  const { tab, tabs, subTabs, subTab, Component } = useFormTabs(options)
+  const params = options.params
+  return (
+    <Stack
+      sx={{ width: { mobile: '100%', tablet: MaxWidth.actionCard }, marginInline: { mobile: 'auto', desktop: 0 } }}
+    >
+      <TabsSwitcher variant="contained" size="medium" value={tab.value} options={tabs} />
+
+      {subTab && <TabsSwitcher variant="underlined" size="small" value={subTab.value} options={subTabs} fullWidth />}
+
+      <WithWrapper
+        shouldWrap={shouldWrap}
+        Wrapper={({ children }) => (
+          <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
+            <AppFormContentWrapper>{children}</AppFormContentWrapper>
+          </Stack>
+        )}
+      >
+        {Component(params)}
+      </WithWrapper>
+    </Stack>
+  )
+}

From 992bdab2fa43d66c6cf0a8762a935b7ef26f8f01 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Tue, 2 Dec 2025 20:41:22 +0100
Subject: [PATCH 02/15] fix: render cycle

---
 .../PageLoanManage/LoanBorrowMore/index.tsx   |  2 +-
 .../src/shared/ui/FormTabs/FormTabs.tsx       | 36 +++++++++++--------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
index a0b2b5e301..707daefd4e 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
@@ -43,7 +43,7 @@ const { Spacing } = SizesAndSpaces
 
 const LoanBorrowMore = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
   const isSubscribed = useRef(false)
-  const isLeverage = market?.leverage?.hasLeverage() ?? false
+  const isLeverage = market?.leverage?.hasLeverage()
   const activeKey = useStore((state) => state.loanBorrowMore.activeKey)
   const activeKeyMax = useStore((state) => state.loanBorrowMore.activeKeyMax)
   const detailInfoLeverage = useStore((state) => state.loanBorrowMore.detailInfoLeverage[activeKey])
diff --git a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
index d1542d67ce..fd52f3fcff 100644
--- a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useState } from 'react'
+import { useState, type ComponentType, type ReactNode } from 'react'
 import Stack from '@mui/material/Stack'
 import { AppFormContentWrapper } from '@ui/AppForm'
 import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
@@ -12,12 +12,12 @@ export type FormTab<Props> = {
   label: string | ((props: Props) => string)
   subTabs?: Pick<FormTab<Props>, 'value' | 'label' | 'component'>[]
   enabled?: (props: Props) => boolean | undefined
-  component?: (props: Props) => ReactNode
+  component?: ComponentType<Props>
 }
 
 type UseFormTabsOptions<T> = { menu: FormTab<T>[]; defaultTab: string; params: T }
 
-function useFormTabs<T>({ menu, defaultTab, params }: UseFormTabsOptions<T>) {
+function useFormTabs<T extends object>({ menu, defaultTab, params }: UseFormTabsOptions<T>) {
   const [tabKey, setTabKey] = useState<string | undefined>(defaultTab)
   const [subTabKey, setSubTabKey] = useState<string | undefined>()
 
@@ -45,7 +45,13 @@ function useFormTabs<T>({ menu, defaultTab, params }: UseFormTabsOptions<T>) {
   return { tab, tabs, subTabs, subTab, Component }
 }
 
-export function FormTabs<T>({
+const LegacyFormWrapper = ({ children }: { children: ReactNode }) => (
+  <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
+    <AppFormContentWrapper>{children}</AppFormContentWrapper>
+  </Stack>
+)
+
+export function FormTabs<T extends object>({
   shouldWrap,
   ...options
 }: UseFormTabsOptions<T> & {
@@ -59,17 +65,19 @@ export function FormTabs<T>({
     >
       <TabsSwitcher variant="contained" size="medium" value={tab.value} options={tabs} />
 
-      {subTab && <TabsSwitcher variant="underlined" size="small" value={subTab.value} options={subTabs} fullWidth />}
+      {subTab && (
+        <TabsSwitcher
+          variant="underlined"
+          size="small"
+          value={subTab.value}
+          options={subTabs}
+          fullWidth
+          sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}
+        />
+      )}
 
-      <WithWrapper
-        shouldWrap={shouldWrap}
-        Wrapper={({ children }) => (
-          <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-            <AppFormContentWrapper>{children}</AppFormContentWrapper>
-          </Stack>
-        )}
-      >
-        {Component(params)}
+      <WithWrapper shouldWrap={shouldWrap} Wrapper={LegacyFormWrapper}>
+        <Component {...params} />
       </WithWrapper>
     </Stack>
   )

From 5957abbc6d5004391b802635cdb4217ad89139cd Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Tue, 2 Dec 2025 21:45:38 +0100
Subject: [PATCH 03/15] feat: adapt soft liquidation

---
 .../PageLoanManage/LoanBorrowMore/index.tsx   |  2 +-
 .../PageLoanManage/ManageLoanTabs.tsx         | 25 ++++--
 .../src/shared/ui/FormTabs/FormTabs.tsx       | 85 ++++++++++++-------
 3 files changed, 75 insertions(+), 37 deletions(-)

diff --git a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
index 707daefd4e..a0b2b5e301 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
@@ -43,7 +43,7 @@ const { Spacing } = SizesAndSpaces
 
 const LoanBorrowMore = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
   const isSubscribed = useRef(false)
-  const isLeverage = market?.leverage?.hasLeverage()
+  const isLeverage = market?.leverage?.hasLeverage() ?? false
   const activeKey = useStore((state) => state.loanBorrowMore.activeKey)
   const activeKeyMax = useStore((state) => state.loanBorrowMore.activeKeyMax)
   const detailInfoLeverage = useStore((state) => state.loanBorrowMore.detailInfoLeverage[activeKey])
diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
index 88d81c7440..8565f204da 100644
--- a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -6,13 +6,26 @@ import LoanRepay, {
   LoanRepayFromWalletTab,
 } from '@/lend/components/PageLoanManage/LoanRepay'
 import LoanSelfLiquidation from '@/lend/components/PageLoanManage/LoanSelfLiquidation'
+import networks from '@/lend/networks'
 import { type MarketUrlParams, PageContentProps } from '@/lend/types/lend.types'
+import { useClosePositionTab } from '@/llamalend/features/manage-soft-liquidation/hooks/useClosePositionTab'
+import { useImproveHealthTab } from '@/llamalend/features/manage-soft-liquidation/hooks/useImproveHealthTab'
+import { ClosePosition } from '@/llamalend/features/manage-soft-liquidation/ui/tabs/ClosePosition'
+import { ImproveHealth } from '@/llamalend/features/manage-soft-liquidation/ui/tabs/ImproveHealth'
 import { useManageLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
 import { t } from '@ui-kit/lib/i18n'
 import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
 
 type ManageLoanProps = PageContentProps<MarketUrlParams>
 
+export const ImproveHealthTab = ({ rChainId, rOwmId }: ManageLoanProps) => (
+  <ImproveHealth {...useImproveHealthTab({ chainId: rChainId, network: networks[rChainId], marketId: rOwmId })} />
+)
+
+export const ClosePositionTab = ({ rChainId, rOwmId }: ManageLoanProps) => (
+  <ClosePosition {...useClosePositionTab({ chainId: rChainId, network: networks[rChainId], marketId: rOwmId })} />
+)
+
 export const LendManageLegacyMenu = [
   {
     value: 'loan',
@@ -34,7 +47,7 @@ export const LendManageLegacyMenu = [
   {
     value: 'leverage',
     label: t`Leverage`,
-    enabled: ({ market }) => market?.leverage?.hasLeverage(),
+    visible: ({ market }) => market?.leverage?.hasLeverage(),
     component: LoanBorrowMore,
   },
 ] satisfies FormTab<ManageLoanProps>[]
@@ -64,12 +77,10 @@ export const LendManageNewMenu = [
   {
     value: 'soft-liquidation',
     label: t`Manage soft liquidation`,
-    component: LoanSelfLiquidation, // todo: migrate `ManageSoftLiquidation` component
-    // subTabs: [
-    //   { value: 'improve-health', label: t`Improve health` },
-    //   { value: 'recover', label: t`Recover` },
-    //   { value: 'close-position', label: t`Close position` },
-    // ],
+    subTabs: [
+      { value: 'improve-health', label: t`Improve health`, component: ImproveHealthTab },
+      { value: 'close-position', label: t`Close position`, component: ClosePositionTab },
+    ],
   },
 ] satisfies FormTab<ManageLoanProps>[]
 
diff --git a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
index fd52f3fcff..1e9a6eb4ca 100644
--- a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
@@ -1,4 +1,4 @@
-import { useState, type ComponentType, type ReactNode } from 'react'
+import { type ComponentType, type ReactNode, useState } from 'react'
 import Stack from '@mui/material/Stack'
 import { AppFormContentWrapper } from '@ui/AppForm'
 import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
@@ -7,42 +7,65 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 const { MaxWidth } = SizesAndSpaces
 
-export type FormTab<Props> = {
-  value: string
-  label: string | ((props: Props) => string)
-  subTabs?: Pick<FormTab<Props>, 'value' | 'label' | 'component'>[]
-  enabled?: (props: Props) => boolean | undefined
-  component?: ComponentType<Props>
-}
+type FnOrValue<Props extends object, Result> = ((props: Props) => Result | undefined) | Result
 
-type UseFormTabsOptions<T> = { menu: FormTab<T>[]; defaultTab: string; params: T }
+const applyFnOrValue = <Props extends object, R extends string | boolean>(
+  fnOrValue: FnOrValue<Props, R> | undefined,
+  props: Props,
+): R | undefined => (typeof fnOrValue === 'function' ? fnOrValue(props) : fnOrValue)
 
-function useFormTabs<T extends object>({ menu, defaultTab, params }: UseFormTabsOptions<T>) {
-  const [tabKey, setTabKey] = useState<string | undefined>(defaultTab)
-  const [subTabKey, setSubTabKey] = useState<string | undefined>()
+type FormSubTab<Props extends object> = Pick<FormTab<Props>, 'value' | 'label' | 'component' | 'visible' | 'disabled'>
 
-  const enabledTabs = menu.filter(({ enabled }) => enabled == null || enabled(params))
-  const tab = enabledTabs.find(({ value }) => value === tabKey) ?? enabledTabs[0]
-
-  const tabs: TabOption<string>[] = enabledTabs.map(({ value, label }) => ({
-    value,
-    label: typeof label == 'function' ? label(params) : label,
-    onClick: () => setTabKey(value),
-  }))
+export type FormTab<Props extends object> = {
+  value: string
+  label: FnOrValue<Props, string>
+  subTabs?: FormSubTab<Props>[]
+  visible?: FnOrValue<Props, boolean>
+  disabled?: FnOrValue<Props, boolean>
+  component?: ComponentType<Props>
+}
 
-  const subTabs: TabOption<string>[] =
-    tab.subTabs?.map(({ value, label }) => ({
+const createOptions = <Props extends object>(
+  tabs: FormSubTab<Props>[] | undefined,
+  params: Props,
+): TabOption<string>[] =>
+  tabs
+    ?.filter(({ visible }) => applyFnOrValue(visible, params))
+    .map(({ value, label, disabled }) => ({
       value,
-      label: typeof label == 'function' ? label(params) : label,
-      onClick: () => setSubTabKey(value),
+      label: applyFnOrValue(label, params),
+      disabled: applyFnOrValue(disabled, params),
     })) ?? []
 
-  const subTab = tab.subTabs?.find(({ value }) => value === subTabKey) ?? tab.subTabs?.[0]
+const selectVisible = <Props extends object, Tab extends FormSubTab<Props>>(
+  tabs: Tab[],
+  key: string | undefined,
+  params: Props,
+) => {
+  const visible = tabs.filter(({ visible }) => applyFnOrValue(visible, params))
+  return visible.find(({ value }) => value === key) ?? visible[0]
+}
+
+function useFormTabs<T extends object>({
+  menu,
+  defaultTab,
+  params,
+}: {
+  menu: FormTab<T>[]
+  params: T
+  defaultTab: string
+}) {
+  const [tabKey, onChangeTab] = useState(defaultTab)
+  const [subTabKey, onChangeSubTab] = useState<string>()
+  const tab = selectVisible(menu, tabKey, params)
+  const tabs = createOptions(menu, params)
+  const subTab = tab.subTabs && selectVisible(tab.subTabs, subTabKey, params)
+  const subTabs = createOptions(tab.subTabs, params)
 
   const Component = subTab?.component ?? tab.component
   if (!Component) throw new Error(`No component found for tab ${tab.value} and subTab ${subTab?.value}`)
 
-  return { tab, tabs, subTabs, subTab, Component }
+  return { tab, tabs, subTabs, subTab, Component, onChangeTab, onChangeSubTab }
 }
 
 const LegacyFormWrapper = ({ children }: { children: ReactNode }) => (
@@ -54,16 +77,19 @@ const LegacyFormWrapper = ({ children }: { children: ReactNode }) => (
 export function FormTabs<T extends object>({
   shouldWrap,
   ...options
-}: UseFormTabsOptions<T> & {
+}: {
+  menu: FormTab<T>[]
+  params: T
   shouldWrap: boolean
+  defaultTab: string
 }) {
-  const { tab, tabs, subTabs, subTab, Component } = useFormTabs(options)
+  const { tab, tabs, subTabs, subTab, Component, onChangeTab, onChangeSubTab } = useFormTabs(options)
   const params = options.params
   return (
     <Stack
       sx={{ width: { mobile: '100%', tablet: MaxWidth.actionCard }, marginInline: { mobile: 'auto', desktop: 0 } }}
     >
-      <TabsSwitcher variant="contained" size="medium" value={tab.value} options={tabs} />
+      <TabsSwitcher variant="contained" size="medium" value={tab.value} options={tabs} onChange={onChangeTab} />
 
       {subTab && (
         <TabsSwitcher
@@ -73,6 +99,7 @@ export function FormTabs<T extends object>({
           options={subTabs}
           fullWidth
           sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}
+          onChange={onChangeSubTab}
         />
       )}
 

From e8579b9dc2373ee4b9d9d052f4c486f2e4d11770 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Tue, 2 Dec 2025 22:05:46 +0100
Subject: [PATCH 04/15] doc: FormTabs

---
 .../src/shared/ui/FormTabs/FormTabs.tsx       | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
index 1e9a6eb4ca..e438dd81fd 100644
--- a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
@@ -17,11 +17,17 @@ const applyFnOrValue = <Props extends object, R extends string | boolean>(
 type FormSubTab<Props extends object> = Pick<FormTab<Props>, 'value' | 'label' | 'component' | 'visible' | 'disabled'>
 
 export type FormTab<Props extends object> = {
+  /** Unique value of the tab, it might be used in the URL later */
   value: string
+  /** Label of the tab, can be a function that receives the form props */
   label: FnOrValue<Props, string>
+  /** Optional sub-tabs of the tab */
   subTabs?: FormSubTab<Props>[]
+  /** Function or value to determine if the tab is visible */
   visible?: FnOrValue<Props, boolean>
+  /** Function or value to determine if the tab is disabled */
   disabled?: FnOrValue<Props, boolean>
+  /** Component to render when the tab is selected */
   component?: ComponentType<Props>
 }
 
@@ -46,15 +52,14 @@ const selectVisible = <Props extends object, Tab extends FormSubTab<Props>>(
   return visible.find(({ value }) => value === key) ?? visible[0]
 }
 
-function useFormTabs<T extends object>({
-  menu,
-  defaultTab,
-  params,
-}: {
+type UseFormTabOptions<T extends object> = {
   menu: FormTab<T>[]
   params: T
   defaultTab: string
-}) {
+}
+
+/** Hook to manage form tabs and sub-tabs. */
+function useFormTabs<T extends object>({ menu, defaultTab, params }: UseFormTabOptions<T>) {
   const [tabKey, onChangeTab] = useState(defaultTab)
   const [subTabKey, onChangeSubTab] = useState<string>()
   const tab = selectVisible(menu, tabKey, params)
@@ -68,21 +73,21 @@ function useFormTabs<T extends object>({
   return { tab, tabs, subTabs, subTab, Component, onChangeTab, onChangeSubTab }
 }
 
+/**
+ * Adds a background to the form content. In the new forms we don't show the background at this level,
+ * we still render AppFormContentWrapper there. However, in the new forms the accordion stays outside the background,
+ * but is still co-located with the form content.
+ */
 const LegacyFormWrapper = ({ children }: { children: ReactNode }) => (
   <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
     <AppFormContentWrapper>{children}</AppFormContentWrapper>
   </Stack>
 )
 
-export function FormTabs<T extends object>({
-  shouldWrap,
-  ...options
-}: {
-  menu: FormTab<T>[]
-  params: T
-  shouldWrap: boolean
-  defaultTab: string
-}) {
+/**
+ * Form wrapper that displays tabs and handles tab switching. It supports sub-tabs as well.
+ */
+export function FormTabs<T extends object>({ shouldWrap, ...options }: UseFormTabOptions<T> & { shouldWrap: boolean }) {
   const { tab, tabs, subTabs, subTab, Component, onChangeTab, onChangeSubTab } = useFormTabs(options)
   const params = options.params
   return (

From c5fdc33e1d7b014cde70201c3b4be89cf1e64b94 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 10:03:12 +0100
Subject: [PATCH 05/15] refactor: LoanCreateTabs

---
 .../PageLoanCreate/LoanCreateTabs.tsx         |  78 +++++++++++++
 .../lend/components/PageLoanCreate/Page.tsx   |   2 +-
 .../lend/components/PageLoanCreate/index.tsx  | 103 ------------------
 .../lend/components/PageLoanCreate/types.ts   |   1 -
 .../PageLoanManage/ManageLoanTabs.tsx         |  20 +++-
 .../lend/components/PageLoanManage/Page.tsx   |  16 +--
 .../lend/components/PageLoanManage/types.ts   |   4 -
 .../src/shared/ui/FormTabs/FormTabs.tsx       |  18 +--
 8 files changed, 108 insertions(+), 134 deletions(-)
 create mode 100644 apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
 delete mode 100644 apps/main/src/lend/components/PageLoanCreate/index.tsx

diff --git a/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
new file mode 100644
index 0000000000..3611ba58a3
--- /dev/null
+++ b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
@@ -0,0 +1,78 @@
+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 { useCreateLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
+import { t } from '@ui-kit/lib/i18n'
+import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
+
+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 =>
+  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],
+  )
+
+function CreateLoanTab({ market, api, rChainId }: CreateLoanProps) {
+  const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated)
+  return (
+    <CreateLoanForm
+      networks={networks}
+      chainId={rChainId}
+      market={market}
+      onUpdate={useOnFormUpdate({ market, api })}
+      onCreated={useCallback(
+        async () => api && market && (await onLoanCreated(api, market)),
+        [api, market, onLoanCreated],
+      )}
+    />
+  )
+}
+
+export const LendCreateTabsNewMenu = [
+  { value: 'create', label: t`Borrow`, component: CreateLoanTab },
+] satisfies FormTab<CreateLoanProps>[]
+
+export 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>[]
+
+const LoanCreate = (pageProps: CreateLoanProps) => {
+  const menu = useCreateLoanMuiForm() ? LendCreateTabsNewMenu : LendCreateTabsOldMenu
+  return (
+    <FormTabs<CreateLoanProps>
+      params={pageProps}
+      menu={menu}
+      shouldWrap={menu === LendCreateTabsOldMenu}
+      defaultTab={pageProps.rFormType}
+    />
+  )
+}
+
+export default LoanCreate
diff --git a/apps/main/src/lend/components/PageLoanCreate/Page.tsx b/apps/main/src/lend/components/PageLoanCreate/Page.tsx
index 3841891282..4ae2178e1c 100644
--- a/apps/main/src/lend/components/PageLoanCreate/Page.tsx
+++ b/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 LoanCreate from '@/lend/components/PageLoanCreate/LoanCreateTabs'
 import { useOneWayMarket } from '@/lend/entities/chain'
 import { useLendPageTitle } from '@/lend/hooks/useLendPageTitle'
 import { useMarketDetails } from '@/lend/hooks/useMarketDetails'
diff --git a/apps/main/src/lend/components/PageLoanCreate/index.tsx b/apps/main/src/lend/components/PageLoanCreate/index.tsx
deleted file mode 100644
index 520c539ba4..0000000000
--- a/apps/main/src/lend/components/PageLoanCreate/index.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-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
diff --git a/apps/main/src/lend/components/PageLoanCreate/types.ts b/apps/main/src/lend/components/PageLoanCreate/types.ts
index b49d280ce8..4293951e40 100644
--- a/apps/main/src/lend/components/PageLoanCreate/types.ts
+++ b/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' | ''
 
diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
index 8565f204da..4ab16b23f9 100644
--- a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -12,7 +12,7 @@ import { useClosePositionTab } from '@/llamalend/features/manage-soft-liquidatio
 import { useImproveHealthTab } from '@/llamalend/features/manage-soft-liquidation/hooks/useImproveHealthTab'
 import { ClosePosition } from '@/llamalend/features/manage-soft-liquidation/ui/tabs/ClosePosition'
 import { ImproveHealth } from '@/llamalend/features/manage-soft-liquidation/ui/tabs/ImproveHealth'
-import { useManageLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
+import { useManageLoanMuiForm, useManageSoftLiquidation } from '@ui-kit/hooks/useFeatureFlags'
 import { t } from '@ui-kit/lib/i18n'
 import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
 
@@ -74,6 +74,9 @@ export const LendManageNewMenu = [
       { value: 'remove', label: t`Remove`, component: LoanRemoveCollateralTab },
     ],
   },
+] satisfies FormTab<ManageLoanProps>[]
+
+export const LendManageSoftLiquidationMenu = [
   {
     value: 'soft-liquidation',
     label: t`Manage soft liquidation`,
@@ -84,13 +87,22 @@ export const LendManageNewMenu = [
   },
 ] satisfies FormTab<ManageLoanProps>[]
 
-export const ManageLoanTabs = (pageProps: ManageLoanProps) => {
+export const ManageLoanTabs = ({
+  isInSoftLiquidation,
+  ...pageProps
+}: ManageLoanProps & { isInSoftLiquidation: boolean | undefined }) => {
+  const shouldUseSoftLiquidation = useManageSoftLiquidation() && isInSoftLiquidation
   const shouldUseManageLoanMuiForm = useManageLoanMuiForm()
+  const menu = shouldUseSoftLiquidation
+    ? LendManageSoftLiquidationMenu
+    : shouldUseManageLoanMuiForm
+      ? LendManageNewMenu
+      : LendManageLegacyMenu
   return (
     <FormTabs<ManageLoanProps>
       params={pageProps}
-      menu={shouldUseManageLoanMuiForm ? LendManageNewMenu : LendManageLegacyMenu}
-      shouldWrap={!shouldUseManageLoanMuiForm}
+      menu={menu}
+      shouldWrap={menu === LendManageLegacyMenu}
       defaultTab={pageProps.rFormType}
     />
   )
diff --git a/apps/main/src/lend/components/PageLoanManage/Page.tsx b/apps/main/src/lend/components/PageLoanManage/Page.tsx
index 408051128a..aa14a27dc6 100644
--- a/apps/main/src/lend/components/PageLoanManage/Page.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/Page.tsx
@@ -16,7 +16,6 @@ import useStore from '@/lend/store/useStore'
 import { type MarketUrlParams } from '@/lend/types/lend.types'
 import { getVaultPathname, parseMarketParams } from '@/lend/utils/helpers'
 import { getCollateralListPathname } from '@/lend/utils/utilsRouter'
-import { ManageSoftLiquidation } from '@/llamalend/features/manage-soft-liquidation'
 import { MarketDetails } from '@/llamalend/features/market-details'
 import { BorrowPositionDetails, NoPosition } from '@/llamalend/features/market-position-details'
 import { UserPositionHistory } from '@/llamalend/features/user-position-history'
@@ -30,7 +29,6 @@ import Box from '@ui/Box'
 import { ConnectWalletPrompt, isLoading, useConnection, useWallet } from '@ui-kit/features/connect-wallet'
 import { useLayoutStore } from '@ui-kit/features/layout'
 import { useParams } from '@ui-kit/hooks/router'
-import { useManageSoftLiquidation } from '@ui-kit/hooks/useFeatureFlags'
 import { t } from '@ui-kit/lib/i18n'
 import { REFRESH_INTERVAL } from '@ui-kit/lib/model'
 import { ErrorPage } from '@ui-kit/pages/ErrorPage'
@@ -46,7 +44,6 @@ const Page = () => {
   const { data: market, isSuccess } = useOneWayMarket(rChainId, rMarket)
   const rOwmId = market?.id ?? ''
   const userActiveKey = helpers.getUserActiveKey(api, market!)
-  const isMdUp = useLayoutStore((state) => state.isMdUp)
   const isPageVisible = useLayoutStore((state) => state.isPageVisible)
   const fetchAllMarketDetails = useStore((state) => state.markets.fetchAll)
   const fetchAllUserMarketDetails = useStore((state) => state.user.fetchAll)
@@ -88,9 +85,8 @@ const Page = () => {
     network,
   })
 
-  const isManageSoftLiq =
-    useManageSoftLiquidation() &&
-    (borrowPositionDetails.liquidationAlert.softLiquidation || borrowPositionDetails.liquidationAlert.hardLiquidation)
+  const isInSoftLiquidation =
+    borrowPositionDetails.liquidationAlert.softLiquidation || borrowPositionDetails.liquidationAlert.hardLiquidation
 
   // set tabs
   const DETAIL_INFO_TYPES: { key: DetailInfoTypes; label: string }[] = [{ label: t`Market Details`, key: 'market' }]
@@ -142,13 +138,7 @@ const Page = () => {
     <>
       <DetailPageStack>
         <AppPageFormsWrapper>
-          {rChainId &&
-            rOwmId &&
-            (isManageSoftLiq ? (
-              <ManageSoftLiquidation marketId={rOwmId} chainId={rChainId} network={network} />
-            ) : (
-              <ManageLoanTabs {...pageProps} />
-            ))}
+          {rChainId && rOwmId && <ManageLoanTabs isInSoftLiquidation={isInSoftLiquidation} {...pageProps} />}
         </AppPageFormsWrapper>
         <Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
           <CampaignRewardsBanner
diff --git a/apps/main/src/lend/components/PageLoanManage/types.ts b/apps/main/src/lend/components/PageLoanManage/types.ts
index b57bb5ee69..a1a7aef085 100644
--- a/apps/main/src/lend/components/PageLoanManage/types.ts
+++ b/apps/main/src/lend/components/PageLoanManage/types.ts
@@ -1,10 +1,6 @@
 import { FutureRates } from '@/lend/types/lend.types'
 
 export type DetailInfoTypes = 'user' | 'market'
-export type FormType = 'loan' | 'collateral' | 'leverage'
-export type LoanFormType = 'loan-increase' | 'loan-decrease' | 'loan-liquidate'
-export type CollateralFormType = 'collateral-increase' | 'collateral-decrease'
-export type LeverageFormType = 'leverage-borrow-more'
 
 export type FormStatus = {
   isApproved: boolean
diff --git a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
index e438dd81fd..ac77e0a8ee 100644
--- a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
@@ -1,4 +1,5 @@
 import { type ComponentType, type ReactNode, useState } from 'react'
+import { notFalsy } from '@curvefi/prices-api/objects.util'
 import Stack from '@mui/material/Stack'
 import { AppFormContentWrapper } from '@ui/AppForm'
 import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
@@ -36,7 +37,7 @@ const createOptions = <Props extends object>(
   params: Props,
 ): TabOption<string>[] =>
   tabs
-    ?.filter(({ visible }) => applyFnOrValue(visible, params))
+    ?.filter(({ visible }) => applyFnOrValue(visible, params) !== false)
     .map(({ value, label, disabled }) => ({
       value,
       label: applyFnOrValue(label, params),
@@ -48,8 +49,10 @@ const selectVisible = <Props extends object, Tab extends FormSubTab<Props>>(
   key: string | undefined,
   params: Props,
 ) => {
-  const visible = tabs.filter(({ visible }) => applyFnOrValue(visible, params))
-  return visible.find(({ value }) => value === key) ?? visible[0]
+  const visible = tabs.filter(({ visible }) => applyFnOrValue(visible, params) !== false)
+  const result = visible.find(({ value }) => value === key) ?? visible[0]
+  if (!result) throw new Error(`No visible tab found for key ${key} in menu ${JSON.stringify(tabs)}`)
+  return result
 }
 
 type UseFormTabOptions<T extends object> = {
@@ -67,10 +70,10 @@ function useFormTabs<T extends object>({ menu, defaultTab, params }: UseFormTabO
   const subTab = tab.subTabs && selectVisible(tab.subTabs, subTabKey, params)
   const subTabs = createOptions(tab.subTabs, params)
 
-  const Component = subTab?.component ?? tab.component
-  if (!Component) throw new Error(`No component found for tab ${tab.value} and subTab ${subTab?.value}`)
+  const components = notFalsy(subTab?.component, tab.component)
+  if (components.length != 1) throw new Error(`${components.length} components found for [${tabKey}, ${subTabKey}]`)
 
-  return { tab, tabs, subTabs, subTab, Component, onChangeTab, onChangeSubTab }
+  return { tab, tabs, subTabs, subTab, Component: components[0], onChangeTab, onChangeSubTab }
 }
 
 /**
@@ -89,7 +92,6 @@ const LegacyFormWrapper = ({ children }: { children: ReactNode }) => (
  */
 export function FormTabs<T extends object>({ shouldWrap, ...options }: UseFormTabOptions<T> & { shouldWrap: boolean }) {
   const { tab, tabs, subTabs, subTab, Component, onChangeTab, onChangeSubTab } = useFormTabs(options)
-  const params = options.params
   return (
     <Stack
       sx={{ width: { mobile: '100%', tablet: MaxWidth.actionCard }, marginInline: { mobile: 'auto', desktop: 0 } }}
@@ -109,7 +111,7 @@ export function FormTabs<T extends object>({ shouldWrap, ...options }: UseFormTa
       )}
 
       <WithWrapper shouldWrap={shouldWrap} Wrapper={LegacyFormWrapper}>
-        <Component {...params} />
+        <Component {...options.params} />
       </WithWrapper>
     </Stack>
   )

From cd4101a7c9543833b0d56685e28263aca75c742f Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 10:03:41 +0100
Subject: [PATCH 06/15] feat: FormTabs story

---
 .../shared/ui/stories/FormTabs.stories.tsx    | 189 ++++++++++++++++++
 1 file changed, 189 insertions(+)
 create mode 100644 packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx

diff --git a/packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx b/packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx
new file mode 100644
index 0000000000..7fabb8a2ae
--- /dev/null
+++ b/packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx
@@ -0,0 +1,189 @@
+import { Stack, Typography } from '@mui/material'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { FormTabs } from '../FormTabs/FormTabs'
+
+type DemoParams = {
+  availableBalance: number
+  canWithdraw: boolean
+  showAdvanced: boolean
+  userAddress: string
+}
+
+const Panel = ({ title, body }: { title: string; body: string }) => (
+  <Stack gap={1} sx={{ padding: 3, borderRadius: 2, border: (t) => `1px solid ${t.palette.divider}` }}>
+    <Typography variant="headingSBold">{title}</Typography>
+    <Typography variant="bodyMRegular">{body}</Typography>
+  </Stack>
+)
+
+const OverviewTab = ({ availableBalance, userAddress }: DemoParams) => (
+  <Panel
+    title="Overview"
+    body={`Connected as ${userAddress}. Available balance: ${availableBalance.toLocaleString()} crvUSD.`}
+  />
+)
+
+const DepositTab = ({ availableBalance }: DemoParams) => (
+  <Panel
+    title="Deposit"
+    body={`Use this tab for simple flows. Balance shown in labels comes from props (${availableBalance.toLocaleString()} crvUSD).`}
+  />
+)
+
+const WithdrawTab = ({ canWithdraw }: DemoParams) => (
+  <Panel
+    title="Withdraw"
+    body={
+      canWithdraw
+        ? 'Withdraw actions are available and the sub-tab is enabled.'
+        : 'This sub-tab shows the disabled state when withdrawals are locked.'
+    }
+  />
+)
+
+const AdvancedTab = () => <Panel title="Advanced" body="Conditional tab that appears when enabled." />
+
+type StoryArgs = DemoParams & { defaultTab: string; shouldWrap: boolean }
+
+const FormTabsStory = ({ shouldWrap, defaultTab, ...params }: StoryArgs) => (
+    <FormTabs<DemoParams>
+      params={params}
+      shouldWrap={shouldWrap}
+      defaultTab={defaultTab}
+      menu={[
+        {
+          value: 'overview',
+          label: 'Overview',
+          visible: () => true,
+          component: OverviewTab,
+        },
+        {
+          value: 'manage',
+          label: ({ availableBalance }) => `Manage (${availableBalance.toLocaleString()} crvUSD)`,
+          visible: () => true,
+          subTabs: [
+            { value: 'deposit', label: 'Deposit', visible: () => true, component: DepositTab },
+            {
+              value: 'withdraw',
+              label: ({ canWithdraw }) => (canWithdraw ? 'Withdraw' : 'Withdraw (locked)'),
+              visible: () => true,
+              disabled: ({ canWithdraw }) => !canWithdraw,
+              component: WithdrawTab,
+            },
+          ],
+        },
+        {
+          value: 'advanced',
+          label: 'Advanced',
+          visible: ({ showAdvanced }) => showAdvanced,
+          component: AdvancedTab,
+        },
+      ]}
+    />
+  )
+
+const meta: Meta<typeof FormTabsStory> = {
+  title: 'UI Kit/Widgets/FormTabs',
+  component: FormTabsStory,
+  args: {
+    availableBalance: 1250,
+    canWithdraw: true,
+    showAdvanced: false,
+    userAddress: '0x1234...cafe',
+    defaultTab: 'overview',
+    shouldWrap: false,
+  },
+  argTypes: {
+    availableBalance: {
+      control: { type: 'number', min: 0 },
+      description: 'Value forwarded to labels and tab content.',
+    },
+    canWithdraw: {
+      control: 'boolean',
+      description: 'Toggles the disabled state of the Withdraw sub-tab.',
+    },
+    showAdvanced: {
+      control: 'boolean',
+      description: 'Controls visibility of the Advanced tab.',
+    },
+    userAddress: {
+      control: 'text',
+      description: 'Sample address injected into tab content.',
+    },
+    defaultTab: {
+      control: 'select',
+      options: ['overview', 'manage', 'advanced'],
+      description: 'Initial tab selection.',
+    },
+    shouldWrap: {
+      control: 'boolean',
+      description: 'Renders content with the legacy AppForm wrapper background.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'FormTabs renders primary and nested tabs with optional visibility and disabled states. This story showcases the possible states with sample content.',
+      },
+    },
+  },
+}
+
+type Story = StoryObj<typeof FormTabsStory>
+
+export const BasicTabs: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default layout with nested Manage sub-tabs and dynamic labels.',
+      },
+    },
+  },
+}
+
+export const StartOnManage: Story = {
+  args: { defaultTab: 'manage' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows nested sub-tabs immediately by starting on the Manage tab.',
+      },
+    },
+  },
+}
+
+export const WithConditionalTab: Story = {
+  args: { showAdvanced: true, defaultTab: 'advanced' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Advanced tab appears when visibility is enabled.',
+      },
+    },
+  },
+}
+
+export const WithDisabledSubTab: Story = {
+  args: { canWithdraw: false, defaultTab: 'manage' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Withdraw sub-tab rendered disabled to highlight the disabled state handling.',
+      },
+    },
+  },
+}
+
+export const LegacyWrapped: Story = {
+  args: { shouldWrap: true },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Illustrates the legacy AppForm background applied via shouldWrap.',
+      },
+    },
+  },
+}
+
+export default meta

From a45e4e09de446009ff45e7b6b76b291d11db2bd4 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 10:15:14 +0100
Subject: [PATCH 07/15] refactor: VaultTabs

---
 .../PageLoanCreate/LoanCreateTabs.tsx         | 30 +++-----
 .../lend/components/PageLoanCreate/Page.tsx   |  4 +-
 .../PageLoanManage/ManageLoanTabs.tsx         | 11 +--
 .../src/lend/components/PageVault/Page.tsx    |  4 +-
 .../lend/components/PageVault/VaultTabs.tsx   | 34 +++++++++
 .../src/lend/components/PageVault/index.tsx   | 72 -------------------
 6 files changed, 50 insertions(+), 105 deletions(-)
 create mode 100644 apps/main/src/lend/components/PageVault/VaultTabs.tsx
 delete mode 100644 apps/main/src/lend/components/PageVault/index.tsx

diff --git a/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
index 3611ba58a3..2efe0cc592 100644
--- a/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
@@ -35,17 +35,13 @@ const useOnFormUpdate = ({ api, market }: Pick<CreateLoanProps, 'api' | 'market'
 
 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={useOnFormUpdate({ market, api })}
-      onCreated={useCallback(
-        async () => api && market && (await onLoanCreated(api, market)),
-        [api, market, onLoanCreated],
-      )}
-    />
+    <CreateLoanForm networks={networks} chainId={rChainId} market={market} onUpdate={onUpdate} onCreated={onCreated} />
   )
 }
 
@@ -63,16 +59,8 @@ export const LendCreateTabsOldMenu = [
   },
 ] satisfies FormTab<CreateLoanProps>[]
 
-const LoanCreate = (pageProps: CreateLoanProps) => {
+export const LoanCreateTabs = (pageProps: CreateLoanProps) => {
   const menu = useCreateLoanMuiForm() ? LendCreateTabsNewMenu : LendCreateTabsOldMenu
-  return (
-    <FormTabs<CreateLoanProps>
-      params={pageProps}
-      menu={menu}
-      shouldWrap={menu === LendCreateTabsOldMenu}
-      defaultTab={pageProps.rFormType}
-    />
-  )
+  const shouldWrap = menu === LendCreateTabsOldMenu
+  return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} defaultTab={pageProps.rFormType} />
 }
-
-export default LoanCreate
diff --git a/apps/main/src/lend/components/PageLoanCreate/Page.tsx b/apps/main/src/lend/components/PageLoanCreate/Page.tsx
index 4ae2178e1c..b56ae562c9 100644
--- a/apps/main/src/lend/components/PageLoanCreate/Page.tsx
+++ b/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/LoanCreateTabs'
+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'
@@ -106,7 +106,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
diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
index 4ab16b23f9..1ddf38ae76 100644
--- a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -91,6 +91,7 @@ export const ManageLoanTabs = ({
   isInSoftLiquidation,
   ...pageProps
 }: ManageLoanProps & { isInSoftLiquidation: boolean | undefined }) => {
+  const { rFormType } = pageProps
   const shouldUseSoftLiquidation = useManageSoftLiquidation() && isInSoftLiquidation
   const shouldUseManageLoanMuiForm = useManageLoanMuiForm()
   const menu = shouldUseSoftLiquidation
@@ -98,12 +99,6 @@ export const ManageLoanTabs = ({
     : shouldUseManageLoanMuiForm
       ? LendManageNewMenu
       : LendManageLegacyMenu
-  return (
-    <FormTabs<ManageLoanProps>
-      params={pageProps}
-      menu={menu}
-      shouldWrap={menu === LendManageLegacyMenu}
-      defaultTab={pageProps.rFormType}
-    />
-  )
+  const shouldWrap = menu === LendManageLegacyMenu
+  return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} defaultTab={rFormType} />
 }
diff --git a/apps/main/src/lend/components/PageVault/Page.tsx b/apps/main/src/lend/components/PageVault/Page.tsx
index c93412ea6b..987df472e3 100644
--- a/apps/main/src/lend/components/PageVault/Page.tsx
+++ b/apps/main/src/lend/components/PageVault/Page.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import CampaignRewardsBanner from '@/lend/components/CampaignRewardsBanner'
 import { MarketInformationComp } from '@/lend/components/MarketInformationComp'
 import { MarketInformationTabs } from '@/lend/components/MarketInformationTabs'
-import Vault from '@/lend/components/PageVault/index'
+import { VaultTabs } from '@/lend/components/PageVault/VaultTabs'
 import { useOneWayMarket } from '@/lend/entities/chain'
 import { useLendPageTitle } from '@/lend/hooks/useLendPageTitle'
 import { useMarketDetails } from '@/lend/hooks/useMarketDetails'
@@ -119,7 +119,7 @@ const Page = () => {
   ) : provider ? (
     <>
       <DetailPageStack>
-        <AppPageFormsWrapper>{rChainId && rOwmId && <Vault {...pageProps} params={params} />}</AppPageFormsWrapper>
+        <AppPageFormsWrapper>{rChainId && rOwmId && <VaultTabs {...pageProps} params={params} />}</AppPageFormsWrapper>
         <Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
           <CampaignRewardsBanner
             chainId={rChainId}
diff --git a/apps/main/src/lend/components/PageVault/VaultTabs.tsx b/apps/main/src/lend/components/PageVault/VaultTabs.tsx
new file mode 100644
index 0000000000..8db5d0d6a9
--- /dev/null
+++ b/apps/main/src/lend/components/PageVault/VaultTabs.tsx
@@ -0,0 +1,34 @@
+import VaultClaim from '@/lend/components/PageVault/VaultClaim'
+import VaultDepositMint from '@/lend/components/PageVault/VaultDepositMint'
+import VaultStake from '@/lend/components/PageVault/VaultStake'
+import VaultUnstake from '@/lend/components/PageVault/VaultUnstake'
+import VaultWithdrawRedeem from '@/lend/components/PageVault/VaultWithdrawRedeem'
+import { type MarketUrlParams, PageContentProps } from '@/lend/types/lend.types'
+import { t } from '@ui-kit/lib/i18n'
+import { FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
+
+type VaultProps = PageContentProps<MarketUrlParams>
+
+const menu = [
+  {
+    value: 'deposit',
+    label: t`Deposit`,
+    subTabs: [
+      { value: 'deposit', label: t`Deposit`, component: (p) => <VaultDepositMint {...p} rFormType="deposit" /> },
+      { value: 'stake', label: t`Stake`, component: (p) => <VaultStake {...p} rFormType="stake" /> },
+    ],
+  },
+  {
+    value: 'withdraw',
+    label: t`Withdraw`,
+    subTabs: [
+      { value: 'withdraw', label: t`Withdraw`, component: (p) => <VaultWithdrawRedeem {...p} rFormType="withdraw" /> },
+      { value: 'unstake', label: t`Unstake`, component: (p) => <VaultUnstake {...p} rFormType="unstake" /> },
+      { value: 'claim', label: t`Claim Rewards`, component: (p) => <VaultClaim {...p} rFormType="claim" /> },
+    ],
+  },
+] satisfies FormTab<VaultProps>[]
+
+export const VaultTabs = (pageProps: VaultProps) => (
+  <FormTabs params={pageProps} menu={menu} shouldWrap defaultTab={pageProps.rFormType} />
+)
diff --git a/apps/main/src/lend/components/PageVault/index.tsx b/apps/main/src/lend/components/PageVault/index.tsx
deleted file mode 100644
index a9e44c57c5..0000000000
--- a/apps/main/src/lend/components/PageVault/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import VaultClaim from '@/lend/components/PageVault/VaultClaim'
-import VaultDepositMint from '@/lend/components/PageVault/VaultDepositMint'
-import VaultStake from '@/lend/components/PageVault/VaultStake'
-import VaultUnstake from '@/lend/components/PageVault/VaultUnstake'
-import VaultWithdrawRedeem from '@/lend/components/PageVault/VaultWithdrawRedeem'
-import {
-  type MarketUrlParams,
-  PageContentProps,
-  type VaultDepositFormType,
-  type VaultWithdrawFormType,
-} from '@/lend/types/lend.types'
-import { getVaultPathname } from '@/lend/utils/utilsRouter'
-import Stack from '@mui/material/Stack'
-import { AppFormContentWrapper } from '@ui/AppForm'
-import { useNavigate } from '@ui-kit/hooks/router'
-import { t } from '@ui-kit/lib/i18n'
-import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
-
-type FormType = 'deposit' | 'withdraw'
-
-const tabs: TabOption<FormType>[] = [
-  { value: 'deposit', label: t`Deposit` },
-  { value: 'withdraw', label: t`Withdraw` },
-]
-
-const tabsDeposit: TabOption<VaultDepositFormType>[] = [
-  { value: 'deposit', label: t`Deposit` },
-  { value: 'stake', label: t`Stake` },
-]
-
-const tabsWithdraw: TabOption<VaultWithdrawFormType>[] = [
-  { value: 'withdraw', label: t`Withdraw` },
-  { value: 'unstake', label: t`Unstake` },
-  { value: 'claim', label: t`Claim Rewards` },
-]
-
-const Vault = (pageProps: PageContentProps & { params: MarketUrlParams }) => {
-  const { rOwmId, rFormType, params } = pageProps
-  const push = useNavigate()
-
-  type SubTab = VaultDepositFormType | VaultWithdrawFormType
-  const [subTab, setSubTab] = useState<SubTab>('deposit')
-
-  const subTabs = useMemo(() => (!rFormType || rFormType === 'deposit' ? tabsDeposit : tabsWithdraw), [rFormType])
-  useEffect(() => setSubTab(subTabs[0]?.value), [subTabs])
-
-  return (
-    <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-      <TabsSwitcher
-        variant="contained"
-        size="medium"
-        value={!rFormType ? 'deposit' : rFormType}
-        onChange={(key) => push(getVaultPathname(params, rOwmId, key))}
-        options={tabs}
-        fullWidth
-      />
-
-      <TabsSwitcher variant="underlined" size="small" value={subTab} onChange={setSubTab} options={subTabs} fullWidth />
-
-      <AppFormContentWrapper>
-        {subTab === 'deposit' && <VaultDepositMint {...pageProps} rFormType="deposit" />}
-        {subTab === 'stake' && <VaultStake {...pageProps} rFormType="stake" />}
-        {subTab === 'withdraw' && <VaultWithdrawRedeem {...pageProps} rFormType="withdraw" />}
-        {subTab === 'unstake' && <VaultUnstake {...pageProps} rFormType="unstake" />}
-        {subTab === 'claim' && <VaultClaim {...pageProps} rFormType="claim" />}
-      </AppFormContentWrapper>
-    </Stack>
-  )
-}
-
-export default Vault

From e703af0ec64a43abff42ab2360e5022c38fed331 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 10:34:05 +0100
Subject: [PATCH 08/15] refactor: remove rFormType from lend app

---
 .../src/lend/components/AlertNoLoanFound.tsx  |  2 +-
 .../PageLoanCreate/LoanCreateTabs.tsx         |  2 +-
 .../PageLoanCreate/LoanFormCreate/index.tsx   |  4 +-
 .../lend/components/PageLoanCreate/Page.tsx   |  5 +-
 .../PageLoanManage/ManageLoanTabs.tsx         |  3 +-
 .../lend/components/PageLoanManage/Page.tsx   |  5 +-
 .../src/lend/components/PageVault/Page.tsx    |  8 +-
 .../components/PageVault/VaultClaim/index.tsx |  1 +
 .../PageVault/VaultDepositMint/index.tsx      |  5 +-
 .../components/PageVault/VaultStake/index.tsx |  3 +-
 .../lend/components/PageVault/VaultTabs.tsx   | 14 ++-
 .../PageVault/VaultUnstake/index.tsx          |  3 +-
 .../PageVault/VaultWithdrawRedeem/index.tsx   | 11 +--
 apps/main/src/lend/constants.ts               | 14 ++-
 apps/main/src/lend/types/lend.types.ts        |  3 +-
 apps/main/src/lend/utils/utilsRouter.ts       | 20 ++--
 .../src/shared/ui/FormTabs/FormTabs.tsx       |  5 +-
 .../shared/ui/stories/FormTabs.stories.tsx    | 96 ++++++++-----------
 18 files changed, 90 insertions(+), 114 deletions(-)

diff --git a/apps/main/src/lend/components/AlertNoLoanFound.tsx b/apps/main/src/lend/components/AlertNoLoanFound.tsx
index 246931bbfa..d37cb33e5d 100644
--- a/apps/main/src/lend/components/AlertNoLoanFound.tsx
+++ b/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
diff --git a/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
index 2efe0cc592..c9c3a66383 100644
--- a/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
@@ -62,5 +62,5 @@ export const LendCreateTabsOldMenu = [
 export const LoanCreateTabs = (pageProps: CreateLoanProps) => {
   const menu = useCreateLoanMuiForm() ? LendCreateTabsNewMenu : LendCreateTabsOldMenu
   const shouldWrap = menu === LendCreateTabsOldMenu
-  return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} defaultTab={pageProps.rFormType} />
+  return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} />
 }
diff --git a/apps/main/src/lend/components/PageLoanCreate/LoanFormCreate/index.tsx b/apps/main/src/lend/components/PageLoanCreate/LoanFormCreate/index.tsx
index 05549d74ad..f9f4426a09 100644
--- a/apps/main/src/lend/components/PageLoanCreate/LoanFormCreate/index.tsx
+++ b/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>
           )}
diff --git a/apps/main/src/lend/components/PageLoanCreate/Page.tsx b/apps/main/src/lend/components/PageLoanCreate/Page.tsx
index b56ae562c9..64d881c17b 100644
--- a/apps/main/src/lend/components/PageLoanCreate/Page.tsx
+++ b/apps/main/src/lend/components/PageLoanCreate/Page.tsx
@@ -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 } = useConnection()
@@ -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 ? (
diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
index 1ddf38ae76..a87328b466 100644
--- a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -91,7 +91,6 @@ export const ManageLoanTabs = ({
   isInSoftLiquidation,
   ...pageProps
 }: ManageLoanProps & { isInSoftLiquidation: boolean | undefined }) => {
-  const { rFormType } = pageProps
   const shouldUseSoftLiquidation = useManageSoftLiquidation() && isInSoftLiquidation
   const shouldUseManageLoanMuiForm = useManageLoanMuiForm()
   const menu = shouldUseSoftLiquidation
@@ -100,5 +99,5 @@ export const ManageLoanTabs = ({
       ? LendManageNewMenu
       : LendManageLegacyMenu
   const shouldWrap = menu === LendManageLegacyMenu
-  return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} defaultTab={rFormType} />
+  return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} />
 }
diff --git a/apps/main/src/lend/components/PageLoanManage/Page.tsx b/apps/main/src/lend/components/PageLoanManage/Page.tsx
index aa14a27dc6..b8d3ddf400 100644
--- a/apps/main/src/lend/components/PageLoanManage/Page.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/Page.tsx
@@ -38,7 +38,7 @@ const { Spacing } = SizesAndSpaces
 
 const Page = () => {
   const params = useParams<MarketUrlParams>()
-  const { rMarket, rChainId, rFormType } = parseMarketParams(params)
+  const { rMarket, rChainId } = parseMarketParams(params)
   const { llamaApi: api = null, connectState } = useConnection()
   const titleMapper = useTitleMapper()
   const { data: market, isSuccess } = useOneWayMarket(rChainId, rMarket)
@@ -119,7 +119,6 @@ const Page = () => {
     params,
     rChainId,
     rOwmId,
-    rFormType,
     isLoaded,
     api,
     market,
@@ -129,7 +128,7 @@ const Page = () => {
 
   const positionDetailsHrefs = {
     borrow: '',
-    supply: getVaultPathname(params, rOwmId, 'deposit'),
+    supply: getVaultPathname(params, rOwmId),
   }
 
   return isSuccess && !market ? (
diff --git a/apps/main/src/lend/components/PageVault/Page.tsx b/apps/main/src/lend/components/PageVault/Page.tsx
index 987df472e3..8aa4162fa3 100644
--- a/apps/main/src/lend/components/PageVault/Page.tsx
+++ b/apps/main/src/lend/components/PageVault/Page.tsx
@@ -36,7 +36,7 @@ const { Spacing } = SizesAndSpaces
 
 const Page = () => {
   const params = useParams<MarketUrlParams>()
-  const { rMarket, rChainId, rFormType } = parseMarketParams(params)
+  const { rMarket, rChainId } = parseMarketParams(params)
   const { connect, provider } = useWallet()
   const { llamaApi: api = null, connectState } = useConnection()
   const titleMapper = useTitleMapper()
@@ -99,7 +99,6 @@ const Page = () => {
     params,
     rChainId,
     rOwmId,
-    rFormType,
     isLoaded,
     api,
     market,
@@ -108,10 +107,7 @@ const Page = () => {
   }
 
   const borrowPathnameFn = loanExists ? getLoanManagePathname : getLoanCreatePathname
-  const positionDetailsHrefs = {
-    borrow: borrowPathnameFn(params, rOwmId, ''),
-    supply: '',
-  }
+  const positionDetailsHrefs = { borrow: borrowPathnameFn(params, rOwmId), supply: '' }
   const hasSupplyPosition = (supplyPositionDetails.shares.value ?? 0) > 0
 
   return isSuccess && !market ? (
diff --git a/apps/main/src/lend/components/PageVault/VaultClaim/index.tsx b/apps/main/src/lend/components/PageVault/VaultClaim/index.tsx
index 79ee59401f..f33a0209a4 100644
--- a/apps/main/src/lend/components/PageVault/VaultClaim/index.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultClaim/index.tsx
@@ -21,6 +21,7 @@ import { notify } from '@ui-kit/features/connect-wallet'
 import { t } from '@ui-kit/lib/i18n'
 
 const VaultClaim = ({ isLoaded, api, market, userActiveKey }: PageContentProps) => {
+  const rFormType = 'claim'
   const isSubscribed = useRef(false)
 
   const formStatus = useStore((state) => state.vaultClaim.formStatus)
diff --git a/apps/main/src/lend/components/PageVault/VaultDepositMint/index.tsx b/apps/main/src/lend/components/PageVault/VaultDepositMint/index.tsx
index 1d8ec1b20b..695a6f43b6 100644
--- a/apps/main/src/lend/components/PageVault/VaultDepositMint/index.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultDepositMint/index.tsx
@@ -29,7 +29,8 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
 import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel'
 import { decimal, type Decimal } from '@ui-kit/utils'
 
-const VaultDepositMint = ({ rChainId, rOwmId, rFormType, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+const VaultDepositMint = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+  const rFormType = 'deposit'
   const isSubscribed = useRef(false)
   const marketAlert = useMarketAlert(rChainId, rOwmId)
 
@@ -176,7 +177,7 @@ const VaultDepositMint = ({ rChainId, rOwmId, rFormType, isLoaded, api, market,
 
   // steps
   useEffect(() => {
-    if (isLoaded && api && market && rFormType) {
+    if (isLoaded && api && market) {
       const updatedSteps = getSteps(activeKey, rFormType, api, market, formStatus, formValues, steps)
       setSteps(updatedSteps)
     }
diff --git a/apps/main/src/lend/components/PageVault/VaultStake/index.tsx b/apps/main/src/lend/components/PageVault/VaultStake/index.tsx
index 7a20024fdd..c88b03bf1c 100644
--- a/apps/main/src/lend/components/PageVault/VaultStake/index.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultStake/index.tsx
@@ -24,7 +24,8 @@ import { t } from '@ui-kit/lib/i18n'
 import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
 import { decimal, type Decimal } from '@ui-kit/utils'
 
-const VaultStake = ({ rChainId, rOwmId, rFormType, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+const VaultStake = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+  const rFormType = 'stake'
   const isSubscribed = useRef(false)
 
   const activeKey = useStore((state) => state.vaultStake.activeKey)
diff --git a/apps/main/src/lend/components/PageVault/VaultTabs.tsx b/apps/main/src/lend/components/PageVault/VaultTabs.tsx
index 8db5d0d6a9..49e8e0ba1f 100644
--- a/apps/main/src/lend/components/PageVault/VaultTabs.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultTabs.tsx
@@ -14,21 +14,19 @@ const menu = [
     value: 'deposit',
     label: t`Deposit`,
     subTabs: [
-      { value: 'deposit', label: t`Deposit`, component: (p) => <VaultDepositMint {...p} rFormType="deposit" /> },
-      { value: 'stake', label: t`Stake`, component: (p) => <VaultStake {...p} rFormType="stake" /> },
+      { value: 'deposit', label: t`Deposit`, component: VaultDepositMint },
+      { value: 'stake', label: t`Stake`, component: VaultStake },
     ],
   },
   {
     value: 'withdraw',
     label: t`Withdraw`,
     subTabs: [
-      { value: 'withdraw', label: t`Withdraw`, component: (p) => <VaultWithdrawRedeem {...p} rFormType="withdraw" /> },
-      { value: 'unstake', label: t`Unstake`, component: (p) => <VaultUnstake {...p} rFormType="unstake" /> },
-      { value: 'claim', label: t`Claim Rewards`, component: (p) => <VaultClaim {...p} rFormType="claim" /> },
+      { value: 'withdraw', label: t`Withdraw`, component: VaultWithdrawRedeem },
+      { value: 'unstake', label: t`Unstake`, component: VaultUnstake },
+      { value: 'claim', label: t`Claim Rewards`, component: VaultClaim },
     ],
   },
 ] satisfies FormTab<VaultProps>[]
 
-export const VaultTabs = (pageProps: VaultProps) => (
-  <FormTabs params={pageProps} menu={menu} shouldWrap defaultTab={pageProps.rFormType} />
-)
+export const VaultTabs = (pageProps: VaultProps) => <FormTabs params={pageProps} menu={menu} shouldWrap />
diff --git a/apps/main/src/lend/components/PageVault/VaultUnstake/index.tsx b/apps/main/src/lend/components/PageVault/VaultUnstake/index.tsx
index 94278d61f5..4949ab340f 100644
--- a/apps/main/src/lend/components/PageVault/VaultUnstake/index.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultUnstake/index.tsx
@@ -23,7 +23,8 @@ import { t } from '@ui-kit/lib/i18n'
 import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
 import { decimal, type Decimal } from '@ui-kit/utils'
 
-const VaultUnstake = ({ rChainId, rOwmId, rFormType, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+const VaultUnstake = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+  const rFormType = 'unstake'
   const isSubscribed = useRef(false)
 
   const activeKey = useStore((state) => state.vaultUnstake.activeKey)
diff --git a/apps/main/src/lend/components/PageVault/VaultWithdrawRedeem/index.tsx b/apps/main/src/lend/components/PageVault/VaultWithdrawRedeem/index.tsx
index b44ea416ba..e4a2d01044 100644
--- a/apps/main/src/lend/components/PageVault/VaultWithdrawRedeem/index.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultWithdrawRedeem/index.tsx
@@ -27,15 +27,8 @@ import { t } from '@ui-kit/lib/i18n'
 import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
 import { decimal, type Decimal } from '@ui-kit/utils'
 
-const VaultWithdrawRedeem = ({
-  rChainId,
-  rOwmId,
-  rFormType,
-  isLoaded,
-  api,
-  market,
-  userActiveKey,
-}: PageContentProps) => {
+const VaultWithdrawRedeem = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+  const rFormType = 'withdraw'
   const isSubscribed = useRef(false)
 
   const activeKey = useStore((state) => state.vaultWithdrawRedeem.activeKey)
diff --git a/apps/main/src/lend/constants.ts b/apps/main/src/lend/constants.ts
index cac97898b8..06c99b8b98 100644
--- a/apps/main/src/lend/constants.ts
+++ b/apps/main/src/lend/constants.ts
@@ -1,13 +1,19 @@
 import { LEND_ROUTES } from '@ui-kit/shared/routes'
 
-export const ROUTE = {
-  ...LEND_ROUTES,
-  PAGE_INTEGRATIONS: '/integrations',
+export const MARKET_ROUTES = {
   PAGE_CREATE: '/create',
   PAGE_MANAGE: '/manage',
   PAGE_VAULT: '/vault',
+} as const
+
+export type LendMarketRoute = (typeof MARKET_ROUTES)[keyof typeof MARKET_ROUTES]
+
+export const ROUTE = {
+  ...LEND_ROUTES,
+  PAGE_INTEGRATIONS: '/integrations',
+  ...MARKET_ROUTES,
   PAGE_404: '/404',
-}
+} as const
 
 // TODO: translation
 export const NOFITY_MESSAGE = {
diff --git a/apps/main/src/lend/types/lend.types.ts b/apps/main/src/lend/types/lend.types.ts
index 90c2c2d647..9822e43cd2 100644
--- a/apps/main/src/lend/types/lend.types.ts
+++ b/apps/main/src/lend/types/lend.types.ts
@@ -19,7 +19,7 @@ export type EstimatedGas = number | number[] | null
 export type OneWayMarketTemplate = LendMarketTemplate // todo: use LendMarketTemplate consistently
 
 export type NetworkUrlParams = { network: NetworkEnum }
-export type MarketUrlParams = NetworkUrlParams & { market: string; formType?: RFormType }
+export type MarketUrlParams = NetworkUrlParams & { market: string }
 export type UrlParams = NetworkUrlParams & Partial<MarketUrlParams>
 
 export interface NetworkConfig<TId extends string = string, TChainId extends number = number> extends BaseConfig<
@@ -90,7 +90,6 @@ export type PageContentProps<T = UrlParams> = {
   params: T
   rChainId: ChainId
   rOwmId: string
-  rFormType: RFormType
   userActiveKey: string
   isLoaded: boolean
   api: LlamaApi | null
diff --git a/apps/main/src/lend/utils/utilsRouter.ts b/apps/main/src/lend/utils/utilsRouter.ts
index 2c490a76f1..e755a12fa4 100644
--- a/apps/main/src/lend/utils/utilsRouter.ts
+++ b/apps/main/src/lend/utils/utilsRouter.ts
@@ -1,4 +1,4 @@
-import { ROUTE } from '@/lend/constants'
+import { type LendMarketRoute, ROUTE } from '@/lend/constants'
 import { networksIdMapper } from '@/lend/networks'
 import { type MarketUrlParams, NetworkUrlParams, type UrlParams } from '@/lend/types/lend.types'
 import { getInternalUrl, LLAMALEND_ROUTES } from '@ui-kit/shared/routes'
@@ -9,17 +9,19 @@ export const getPath = ({ network }: UrlParams, route: string) => getInternalUrl
 export const getCollateralListPathname = ({ network }: NetworkUrlParams) =>
   getInternalUrl('llamalend', network, LLAMALEND_ROUTES.PAGE_MARKETS)
 
-export const getLoanCreatePathname = (params: UrlParams, owmId: string, formType: string) =>
-  getPath(params, `${ROUTE.PAGE_MARKETS}/${owmId}${ROUTE.PAGE_CREATE}${formType === 'create' ? '' : `/${formType}`}`)
+const getMarketPathname = (params: UrlParams, marketId: string, page: LendMarketRoute) =>
+  `${getCollateralListPathname(params)}/${marketId}${page}`
 
-export const getLoanManagePathname = (params: UrlParams, owmId: string, formType: string) =>
-  getPath(params, `${ROUTE.PAGE_MARKETS}/${owmId}${ROUTE.PAGE_MANAGE}/${formType}`)
+export const getLoanCreatePathname = (params: UrlParams, marketId: string) =>
+  getMarketPathname(params, marketId, ROUTE.PAGE_CREATE)
 
-export const getVaultPathname = (params: UrlParams, owmId: string, formType: string) =>
-  getPath(params, `${ROUTE.PAGE_MARKETS}/${owmId}${ROUTE.PAGE_VAULT}${formType === 'vault' ? '' : `/${formType}`}`)
+export const getLoanManagePathname = (params: UrlParams, marketId: string) =>
+  getMarketPathname(params, marketId, ROUTE.PAGE_MANAGE)
 
-export const parseMarketParams = ({ formType, market, network }: MarketUrlParams) => ({
+export const getVaultPathname = (params: UrlParams, marketId: string) =>
+  getMarketPathname(params, marketId, ROUTE.PAGE_VAULT)
+
+export const parseMarketParams = ({ market, network }: MarketUrlParams) => ({
   rMarket: market.toLowerCase(),
   rChainId: networksIdMapper[network],
-  rFormType: formType ?? '',
 })
diff --git a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
index ac77e0a8ee..c3543d6f6b 100644
--- a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
@@ -58,12 +58,11 @@ const selectVisible = <Props extends object, Tab extends FormSubTab<Props>>(
 type UseFormTabOptions<T extends object> = {
   menu: FormTab<T>[]
   params: T
-  defaultTab: string
 }
 
 /** Hook to manage form tabs and sub-tabs. */
-function useFormTabs<T extends object>({ menu, defaultTab, params }: UseFormTabOptions<T>) {
-  const [tabKey, onChangeTab] = useState(defaultTab)
+function useFormTabs<T extends object>({ menu, params }: UseFormTabOptions<T>) {
+  const [tabKey, onChangeTab] = useState<string>()
   const [subTabKey, onChangeSubTab] = useState<string>()
   const tab = selectVisible(menu, tabKey, params)
   const tabs = createOptions(menu, params)
diff --git a/packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx b/packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx
index 7fabb8a2ae..ac00e77f21 100644
--- a/packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx
@@ -43,44 +43,43 @@ const WithdrawTab = ({ canWithdraw }: DemoParams) => (
 
 const AdvancedTab = () => <Panel title="Advanced" body="Conditional tab that appears when enabled." />
 
-type StoryArgs = DemoParams & { defaultTab: string; shouldWrap: boolean }
-
-const FormTabsStory = ({ shouldWrap, defaultTab, ...params }: StoryArgs) => (
-    <FormTabs<DemoParams>
-      params={params}
-      shouldWrap={shouldWrap}
-      defaultTab={defaultTab}
-      menu={[
-        {
-          value: 'overview',
-          label: 'Overview',
-          visible: () => true,
-          component: OverviewTab,
-        },
-        {
-          value: 'manage',
-          label: ({ availableBalance }) => `Manage (${availableBalance.toLocaleString()} crvUSD)`,
-          visible: () => true,
-          subTabs: [
-            { value: 'deposit', label: 'Deposit', visible: () => true, component: DepositTab },
-            {
-              value: 'withdraw',
-              label: ({ canWithdraw }) => (canWithdraw ? 'Withdraw' : 'Withdraw (locked)'),
-              visible: () => true,
-              disabled: ({ canWithdraw }) => !canWithdraw,
-              component: WithdrawTab,
-            },
-          ],
-        },
-        {
-          value: 'advanced',
-          label: 'Advanced',
-          visible: ({ showAdvanced }) => showAdvanced,
-          component: AdvancedTab,
-        },
-      ]}
-    />
-  )
+type StoryArgs = DemoParams & { shouldWrap: boolean }
+
+const FormTabsStory = ({ shouldWrap, ...params }: StoryArgs) => (
+  <FormTabs<DemoParams>
+    params={params}
+    shouldWrap={shouldWrap}
+    menu={[
+      {
+        value: 'overview',
+        label: 'Overview',
+        visible: () => true,
+        component: OverviewTab,
+      },
+      {
+        value: 'manage',
+        label: ({ availableBalance }) => `Manage (${availableBalance.toLocaleString()} crvUSD)`,
+        visible: () => true,
+        subTabs: [
+          { value: 'deposit', label: 'Deposit', visible: () => true, component: DepositTab },
+          {
+            value: 'withdraw',
+            label: ({ canWithdraw }) => (canWithdraw ? 'Withdraw' : 'Withdraw (locked)'),
+            visible: () => true,
+            disabled: ({ canWithdraw }) => !canWithdraw,
+            component: WithdrawTab,
+          },
+        ],
+      },
+      {
+        value: 'advanced',
+        label: 'Advanced',
+        visible: ({ showAdvanced }) => showAdvanced,
+        component: AdvancedTab,
+      },
+    ]}
+  />
+)
 
 const meta: Meta<typeof FormTabsStory> = {
   title: 'UI Kit/Widgets/FormTabs',
@@ -90,7 +89,6 @@ const meta: Meta<typeof FormTabsStory> = {
     canWithdraw: true,
     showAdvanced: false,
     userAddress: '0x1234...cafe',
-    defaultTab: 'overview',
     shouldWrap: false,
   },
   argTypes: {
@@ -110,11 +108,6 @@ const meta: Meta<typeof FormTabsStory> = {
       control: 'text',
       description: 'Sample address injected into tab content.',
     },
-    defaultTab: {
-      control: 'select',
-      options: ['overview', 'manage', 'advanced'],
-      description: 'Initial tab selection.',
-    },
     shouldWrap: {
       control: 'boolean',
       description: 'Renders content with the legacy AppForm wrapper background.',
@@ -142,19 +135,8 @@ export const BasicTabs: Story = {
   },
 }
 
-export const StartOnManage: Story = {
-  args: { defaultTab: 'manage' },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Shows nested sub-tabs immediately by starting on the Manage tab.',
-      },
-    },
-  },
-}
-
 export const WithConditionalTab: Story = {
-  args: { showAdvanced: true, defaultTab: 'advanced' },
+  args: { showAdvanced: true },
   parameters: {
     docs: {
       description: {
@@ -165,7 +147,7 @@ export const WithConditionalTab: Story = {
 }
 
 export const WithDisabledSubTab: Story = {
-  args: { canWithdraw: false, defaultTab: 'manage' },
+  args: { canWithdraw: false },
   parameters: {
     docs: {
       description: {

From 15f69fc61c2dc7ed6eaa9c88692728069f36a5de Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 10:36:39 +0100
Subject: [PATCH 09/15] feat: redirect to clean urls

---
 apps/main/src/routes/lend.routes.tsx | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/apps/main/src/routes/lend.routes.tsx b/apps/main/src/routes/lend.routes.tsx
index 4d729d6638..6b0a942f70 100644
--- a/apps/main/src/routes/lend.routes.tsx
+++ b/apps/main/src/routes/lend.routes.tsx
@@ -32,7 +32,7 @@ export const lendRoutes = lendLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network',
-    loader: ({ params: { network } }) => redirectTo(`/lend/${network}/markets/`),
+    loader: ({ params: { network } }) => redirectTo(`/lend/${network}/markets`),
     ...layoutProps,
   }),
   createRoute({
@@ -58,20 +58,17 @@ export const lendRoutes = lendLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/markets',
-    loader: ({ params: { network } }) => redirectTo(`/llamalend/${network}/markets/`),
+    loader: ({ params: { network } }) => redirectTo(`/llamalend/${network}/markets`),
     ...layoutProps,
   }),
   createRoute({
     path: '$network/markets/$market',
-    loader: ({ params: { network, market } }) => redirectTo(`/lend/${network}/markets/${market}/manage/`),
+    loader: ({ params: { network, market } }) => redirectTo(`/lend/${network}/markets/${market}/manage`),
     ...layoutProps,
   }),
   createRoute({
     path: '$network/markets/$market/create/$formType',
-    component: PageLoanCreate,
-    head: ({ params }) => ({
-      meta: [{ title: `Create - ${params.market} - Curve Llamalend` }],
-    }),
+    loader: ({ params: { network, market } }) => redirectTo(`/lend/${network}/markets/${market}/create`),
     ...layoutProps,
   }),
   createRoute({
@@ -84,10 +81,7 @@ export const lendRoutes = lendLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/markets/$market/manage/$formType',
-    component: PageLoanManage,
-    head: ({ params }) => ({
-      meta: [{ title: `Manage - ${params.market} - Curve Llamalend` }],
-    }),
+    loader: ({ params: { network, market } }) => redirectTo(`/lend/${network}/markets/${market}/manage`),
     ...layoutProps,
   }),
   createRoute({
@@ -100,10 +94,7 @@ export const lendRoutes = lendLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/markets/$market/vault/$formType',
-    component: PageVault,
-    head: ({ params }) => ({
-      meta: [{ title: `Supply - ${params.market} - Curve Llamalend` }],
-    }),
+    loader: ({ params: { network, market } }) => redirectTo(`/lend/${network}/markets/${market}/vault`),
     ...layoutProps,
   }),
   createRoute({

From ddc3e4eb68db5383c68f488f5534cfa382ce33b5 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 12:00:37 +0100
Subject: [PATCH 10/15] fix: review comments

---
 .../lend/components/PageLoanManage/LoanBorrowMore/index.tsx    | 3 ++-
 .../llamalend/features/manage-loan/components/RepayForm.tsx    | 2 +-
 .../src/llamalend/features/manage-loan/hooks/useRepayForm.ts   | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
index a0b2b5e301..0c655bf6f7 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/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 { 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'
@@ -43,7 +44,7 @@ const { Spacing } = SizesAndSpaces
 
 const LoanBorrowMore = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
   const isSubscribed = useRef(false)
-  const isLeverage = market?.leverage?.hasLeverage() ?? 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])
diff --git a/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx b/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx
index 7a9f1ee418..bb551fc699 100644
--- a/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx
+++ b/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx
@@ -29,7 +29,7 @@ export const RepayForm = <ChainId extends IChainId>({
   networks: NetworkDict<ChainId>
   chainId: ChainId
   enabled?: boolean
-  onRepaid?: NonNullable<RepayOptions['onRepaid']>
+  onRepaid?: RepayOptions['onRepaid']
   fromCollateral?: boolean
   fromWallet?: boolean
   fromBorrowed?: boolean
diff --git a/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts b/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts
index c717177dd3..39aaf841b4 100644
--- a/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts
+++ b/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts
@@ -37,7 +37,7 @@ export const useRepayForm = <ChainId extends LlamaChainId, NetworkName extends L
   network: { id: LlamaNetworkId; chainId: ChainId }
   networks: NetworkDict<ChainId>
   enabled?: boolean
-  onRepaid?: NonNullable<RepayOptions['onRepaid']>
+  onRepaid?: RepayOptions['onRepaid']
 }) => {
   const { address: userAddress } = useAccount()
   const { chainId } = network

From 47fcfa2e2ea429c3a25ed1748096dfaf816d12fc Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 14:41:34 +0100
Subject: [PATCH 11/15] fix: getMarketPathname

---
 apps/main/src/lend/utils/utilsRouter.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/main/src/lend/utils/utilsRouter.ts b/apps/main/src/lend/utils/utilsRouter.ts
index e755a12fa4..ac2bbde7c8 100644
--- a/apps/main/src/lend/utils/utilsRouter.ts
+++ b/apps/main/src/lend/utils/utilsRouter.ts
@@ -9,8 +9,8 @@ export const getPath = ({ network }: UrlParams, route: string) => getInternalUrl
 export const getCollateralListPathname = ({ network }: NetworkUrlParams) =>
   getInternalUrl('llamalend', network, LLAMALEND_ROUTES.PAGE_MARKETS)
 
-const getMarketPathname = (params: UrlParams, marketId: string, page: LendMarketRoute) =>
-  `${getCollateralListPathname(params)}/${marketId}${page}`
+const getMarketPathname = ({ network }: UrlParams, marketId: string, page: LendMarketRoute) =>
+  `${getInternalUrl('lend', network, ROUTE.PAGE_MARKETS)}/${marketId}${page}`
 
 export const getLoanCreatePathname = (params: UrlParams, marketId: string) =>
   getMarketPathname(params, marketId, ROUTE.PAGE_CREATE)

From 3523f81bb55268c52803af79542c9eb6b4a66d0e Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 14:45:34 +0100
Subject: [PATCH 12/15] fix: query errors

---
 .../src/lend/hooks/useBorrowPositionDetails.ts    | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/main/src/lend/hooks/useBorrowPositionDetails.ts b/apps/main/src/lend/hooks/useBorrowPositionDetails.ts
index b465193a93..653c9dff10 100644
--- a/apps/main/src/lend/hooks/useBorrowPositionDetails.ts
+++ b/apps/main/src/lend/hooks/useBorrowPositionDetails.ts
@@ -34,11 +34,19 @@ export const useBorrowPositionDetails = ({
 }: UseBorrowPositionDetailsProps): BorrowPositionDetailsProps => {
   const { controller } = market?.addresses ?? {}
   const { address: userAddress } = useAccount()
-  const { data: userLoanDetails, isLoading: isUserLoanDetailsLoading } = useUserLoanDetails({
+  const { data: loanExists } = useLoanExists({
     chainId,
     marketId,
     userAddress,
   })
+  const { data: userLoanDetails, isLoading: isUserLoanDetailsLoading } = useUserLoanDetails(
+    {
+      chainId,
+      marketId,
+      userAddress,
+    },
+    !!loanExists,
+  )
   const {
     bands,
     health,
@@ -49,11 +57,6 @@ export const useBorrowPositionDetails = ({
     state: { collateral, borrowed, debt } = {},
   } = userLoanDetails ?? {}
   const prices = useStore((state) => state.markets.pricesMapper[chainId]?.[marketId])
-  const { data: loanExists } = useLoanExists({
-    chainId,
-    marketId,
-    userAddress,
-  })
   const { data: userPnl, isLoading: isUserPnlLoading } = useUserPnl({
     chainId,
     marketId,

From 8459e7baf306316ca34f0c7ccca0a5904b3c26ea Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 15:33:35 +0100
Subject: [PATCH 13/15] chore: unused code & exports

---
 .../lend/components/PageLoanCreate/LoanCreateTabs.tsx  |  4 ++--
 .../lend/components/PageLoanManage/ManageLoanTabs.tsx  | 10 +++++-----
 apps/main/src/lend/components/PageLoanManage/Page.tsx  |  7 -------
 apps/main/src/lend/types/lend.types.ts                 |  6 ------
 apps/main/src/lend/utils/helpers.ts                    |  8 --------
 5 files changed, 7 insertions(+), 28 deletions(-)

diff --git a/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
index c9c3a66383..c9bd29fe8a 100644
--- a/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
@@ -45,11 +45,11 @@ function CreateLoanTab({ market, api, rChainId }: CreateLoanProps) {
   )
 }
 
-export const LendCreateTabsNewMenu = [
+const LendCreateTabsNewMenu = [
   { value: 'create', label: t`Borrow`, component: CreateLoanTab },
 ] satisfies FormTab<CreateLoanProps>[]
 
-export const LendCreateTabsOldMenu = [
+const LendCreateTabsOldMenu = [
   { value: 'create', label: t`Create Loan`, component: LoanFormCreate },
   {
     value: 'leverage',
diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
index a87328b466..ee4e2ad5a4 100644
--- a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -18,15 +18,15 @@ import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
 
 type ManageLoanProps = PageContentProps<MarketUrlParams>
 
-export const ImproveHealthTab = ({ rChainId, rOwmId }: ManageLoanProps) => (
+const ImproveHealthTab = ({ rChainId, rOwmId }: ManageLoanProps) => (
   <ImproveHealth {...useImproveHealthTab({ chainId: rChainId, network: networks[rChainId], marketId: rOwmId })} />
 )
 
-export const ClosePositionTab = ({ rChainId, rOwmId }: ManageLoanProps) => (
+const ClosePositionTab = ({ rChainId, rOwmId }: ManageLoanProps) => (
   <ClosePosition {...useClosePositionTab({ chainId: rChainId, network: networks[rChainId], marketId: rOwmId })} />
 )
 
-export const LendManageLegacyMenu = [
+const LendManageLegacyMenu = [
   {
     value: 'loan',
     label: t`Borrow`,
@@ -52,7 +52,7 @@ export const LendManageLegacyMenu = [
   },
 ] satisfies FormTab<ManageLoanProps>[]
 
-export const LendManageNewMenu = [
+const LendManageNewMenu = [
   {
     value: 'borrow',
     label: ({ market }) => (market?.leverage?.hasLeverage() ? t`Leverage` : t`Borrow`),
@@ -76,7 +76,7 @@ export const LendManageNewMenu = [
   },
 ] satisfies FormTab<ManageLoanProps>[]
 
-export const LendManageSoftLiquidationMenu = [
+const LendManageSoftLiquidationMenu = [
   {
     value: 'soft-liquidation',
     label: t`Manage soft liquidation`,
diff --git a/apps/main/src/lend/components/PageLoanManage/Page.tsx b/apps/main/src/lend/components/PageLoanManage/Page.tsx
index b8d3ddf400..0ca3e148c9 100644
--- a/apps/main/src/lend/components/PageLoanManage/Page.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/Page.tsx
@@ -4,7 +4,6 @@ import CampaignRewardsBanner from '@/lend/components/CampaignRewardsBanner'
 import { MarketInformationComp } from '@/lend/components/MarketInformationComp'
 import { MarketInformationTabs } from '@/lend/components/MarketInformationTabs'
 import { ManageLoanTabs } from '@/lend/components/PageLoanManage/ManageLoanTabs'
-import type { DetailInfoTypes } from '@/lend/components/PageLoanManage/types'
 import { useOneWayMarket } from '@/lend/entities/chain'
 import { useBorrowPositionDetails } from '@/lend/hooks/useBorrowPositionDetails'
 import { useLendPageTitle } from '@/lend/hooks/useLendPageTitle'
@@ -88,12 +87,6 @@ const Page = () => {
   const isInSoftLiquidation =
     borrowPositionDetails.liquidationAlert.softLiquidation || borrowPositionDetails.liquidationAlert.hardLiquidation
 
-  // set tabs
-  const DETAIL_INFO_TYPES: { key: DetailInfoTypes; label: string }[] = [{ label: t`Market Details`, key: 'market' }]
-  if (signerAddress) {
-    DETAIL_INFO_TYPES.push({ label: t`Your Details`, key: 'user' })
-  }
-
   useEffect(() => {
     if (api && market && isPageVisible) {
       if (loanExists) setMarketsStateKey('marketDetailsView', 'user')
diff --git a/apps/main/src/lend/types/lend.types.ts b/apps/main/src/lend/types/lend.types.ts
index 9822e43cd2..9f3639f2af 100644
--- a/apps/main/src/lend/types/lend.types.ts
+++ b/apps/main/src/lend/types/lend.types.ts
@@ -80,12 +80,6 @@ export type ExpectedBorrowed = {
   avgPrice: string
 }
 
-export type VaultCreateFormType = 'create' | 'leverage'
-export type VaultDepositFormType = 'deposit' | 'stake'
-export type VaultWithdrawFormType = 'withdraw' | 'unstake' | 'claim'
-export type VaultManageFormType = 'loan' | 'collateral'
-export type RFormType = VaultCreateFormType | VaultDepositFormType | VaultWithdrawFormType | VaultManageFormType | ''
-
 export type PageContentProps<T = UrlParams> = {
   params: T
   rChainId: ChainId
diff --git a/apps/main/src/lend/utils/helpers.ts b/apps/main/src/lend/utils/helpers.ts
index 72f14081fe..141a72dd62 100644
--- a/apps/main/src/lend/utils/helpers.ts
+++ b/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

From e5c305fde18595d4a1b655c31f90219ed0ac2ddb Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 16:12:51 +0100
Subject: [PATCH 14/15] fix: enable all fields for mint temporarily

---
 apps/main/src/loan/components/PageLoanManage/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/main/src/loan/components/PageLoanManage/index.tsx b/apps/main/src/loan/components/PageLoanManage/index.tsx
index 991b5dd60e..481e69d179 100644
--- a/apps/main/src/loan/components/PageLoanManage/index.tsx
+++ b/apps/main/src/loan/components/PageLoanManage/index.tsx
@@ -103,6 +103,9 @@ const LoanManage = ({ curve, isReady, llamma, llammaId, params, rChainId, rColla
               market={llamma}
               enabled={isReady}
               onRepaid={async () => {}}
+              fromBorrowed
+              fromCollateral
+              fromWallet
             />
           )}
           {subTab === 'loan-liquidate' && <LoanLiquidate {...formProps} params={params} />}

From 9c826fbbe4577d5d68ad972100e12dfd56cbcb5a Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 3 Dec 2025 16:24:52 +0100
Subject: [PATCH 15/15] fix: review comments

---
 apps/main/src/lend/components/PageVault/VaultClaim/index.tsx | 1 -
 packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx    | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/main/src/lend/components/PageVault/VaultClaim/index.tsx b/apps/main/src/lend/components/PageVault/VaultClaim/index.tsx
index f33a0209a4..79ee59401f 100644
--- a/apps/main/src/lend/components/PageVault/VaultClaim/index.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultClaim/index.tsx
@@ -21,7 +21,6 @@ import { notify } from '@ui-kit/features/connect-wallet'
 import { t } from '@ui-kit/lib/i18n'
 
 const VaultClaim = ({ isLoaded, api, market, userActiveKey }: PageContentProps) => {
-  const rFormType = 'claim'
   const isSubscribed = useRef(false)
 
   const formStatus = useStore((state) => state.vaultClaim.formStatus)
diff --git a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
index c3543d6f6b..26d56d4d73 100644
--- a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
@@ -15,7 +15,7 @@ const applyFnOrValue = <Props extends object, R extends string | boolean>(
   props: Props,
 ): R | undefined => (typeof fnOrValue === 'function' ? fnOrValue(props) : fnOrValue)
 
-type FormSubTab<Props extends object> = Pick<FormTab<Props>, 'value' | 'label' | 'component' | 'visible' | 'disabled'>
+type FormSubTab<Props extends object> = Omit<FormTab<Props>, 'subTabs'>
 
 export type FormTab<Props extends object> = {
   /** Unique value of the tab, it might be used in the URL later */
@@ -51,7 +51,7 @@ const selectVisible = <Props extends object, Tab extends FormSubTab<Props>>(
 ) => {
   const visible = tabs.filter(({ visible }) => applyFnOrValue(visible, params) !== false)
   const result = visible.find(({ value }) => value === key) ?? visible[0]
-  if (!result) throw new Error(`No visible tab found for key ${key} in menu ${JSON.stringify(tabs)}`)
+  if (!result) throw new Error(`No visible tab found for key ${key} in menu ${tabs.map((t) => t.value).join(', ')}`)
   return result
 }