feat(deposit-title): make reusable title function

src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx

@@ -33,7 +33,9 @@ const DepositPanel = () => {
   }
 
   return (
-    <PanelWrapper title={'Deposit Funds'}>
+    <PanelWrapper
+      title={getDepositTitle({ isChainParity, isTransactionConfirmation })}
+    >
       {isChainParity ? (
         <ChainParity />
       ) : (

src/pages/ValidatorOnboarding/Deposit/Deposit.tsx

@@ -7,11 +7,11 @@ import { useSelector } from 'react-redux'
 import ValidatorRequest from './ValidatorRequest/ValidatorRequest'
 import ConnectWallet from '../../../components/General/ConnectWallet'
 import ConnectedWallet from '../../../components/General/ConnectedWallet'
-import DepositTitle from './DepositTitle'
 import ChainParity from './ChainParity'
 import ValidatorsMenuWithPrice from '../../../components/General/ValidatorsMenuWithPrice'
 import { RootState } from '../../../redux/store'
 import { DEPOSIT_SUBTITLE } from '../../../constants'
+import { getDepositTitle } from '../../../utilities'
 import styles from './deposit.module.css'
 
 const Deposit = () => {
@@ -33,7 +33,9 @@ const Deposit = () => {
 
   return (
     <YStack space={'$3'} className={styles['deposit-container']}>
-      <DepositTitle />
+      <Text size={19} weight={'semibold'}>
+        {getDepositTitle({ isChainParity, isTransactionConfirmation })}
+      </Text>
       {isChainParity ? (
         <ChainParity />
       ) : (

src/pages/ValidatorOnboarding/Deposit/DepositTitle.stories.ts

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import DepositTitle from './DepositTitle'
-
-const meta = {
-  title: 'ValidatorOnboarding/DepositTitle',
-  component: DepositTitle,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof DepositTitle>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-}

src/pages/ValidatorOnboarding/Deposit/DepositTitle.tsx

@@ -1,28 +0,0 @@
-import { Text } from '@status-im/components'
-import { useSelector } from 'react-redux'
-
-import { RootState } from '../../../redux/store'
-
-const DepositTitle = () => {
-  const { isTransactionConfirmation, isChainParity } = useSelector(
-    (state: RootState) => state.deposit,
-  )
-
-  const getTitle = () => {
-    if (isChainParity) {
-      return 'Activate Validators'
-    } else if (isTransactionConfirmation) {
-      return 'Transaction Confirmation'
-    } else {
-      return 'Deposit Funds'
-    }
-  }
-
-  return (
-    <Text size={19} weight={'semibold'}>
-      {getTitle()}
-    </Text>
-  )
-}
-
-export default DepositTitle

src/utilities.ts

@@ -86,3 +86,19 @@ export const isPortValid = (port: string) => {
 export const copyFunction = (text: string) => {
   navigator.clipboard.writeText(text)
 }
+
+export const getDepositTitle = ({
+  isChainParity,
+  isTransactionConfirmation,
+}: {
+  isChainParity: boolean
+  isTransactionConfirmation: boolean
+}) => {
+  if (isChainParity) {
+    return 'Activate Validators'
+  } else if (isTransactionConfirmation) {
+    return 'Transaction Confirmation'
+  } else {
+    return 'Deposit Funds'
+  }
+}