refactor: VaultTabs

Author: DanielSchiavini

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

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

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

@@ -91,19 +91,14 @@ export const ManageLoanTabs = ({
   isInSoftLiquidation,
   ...pageProps
 }: ManageLoanProps & { isInSoftLiquidation: boolean | undefined }) => {
+  const { rFormType } = pageProps
   const shouldUseSoftLiquidation = useManageSoftLiquidation() && isInSoftLiquidation
   const shouldUseManageLoanMuiForm = useManageLoanMuiForm()
   const menu = shouldUseSoftLiquidation
     ? LendManageSoftLiquidationMenu
     : 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} />
 }

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}

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} />
+)