refactor: remove rFormType from lend app

DanielSchiavini · DanielSchiavini · commit e703af0ec64a · 2025-12-03T10:34:05.000+01:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const AlertNoLoanFound = ({ alertType, owmId }: { alertType?: AlertType; owmId:`
`25`	`25`	`size="large"`
`26`	`26`	`onClick={() => {`
`27`	`27`	`setStateByKeyMarkets('marketDetailsView', 'market')`
`28`		`- push(getLoanCreatePathname(params, owmId, 'create'))`
	`28`	`+ push(getLoanCreatePathname(params, owmId))`
`29`	`29`	`}}`
`30`	`30`	`>`
`31`	`31`	`Create loan`
Original file line number	Diff line number	Diff line change
`@@ -62,5 +62,5 @@ export const LendCreateTabsOldMenu = [`
`62`	`62`	`export const LoanCreateTabs = (pageProps: CreateLoanProps) => {`
`63`	`63`	`const menu = useCreateLoanMuiForm() ? LendCreateTabsNewMenu : LendCreateTabsOldMenu`
`64`	`64`	`const shouldWrap = menu === LendCreateTabsOldMenu`
`65`		`- return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} defaultTab={pageProps.rFormType} />`
	`65`	`+ return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} />`
`66`	`66`	`}`