From c4d143f5aadf3a6c79c748eefdbd674c4b493aa1 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 27 Feb 2024 14:37:22 +0200
Subject: [PATCH] feat(deposit-title): make reusable title function

---
 .../Panels/DepositPanel.tsx                   |  4 ++-
 .../ValidatorOnboarding/Deposit/Deposit.tsx   |  6 ++--
 .../Deposit/DepositTitle.stories.ts           | 19 -------------
 .../Deposit/DepositTitle.tsx                  | 28 -------------------
 src/utilities.ts                              | 16 +++++++++++
 5 files changed, 23 insertions(+), 50 deletions(-)
 delete mode 100644 src/pages/ValidatorOnboarding/Deposit/DepositTitle.stories.ts
 delete mode 100644 src/pages/ValidatorOnboarding/Deposit/DepositTitle.tsx

diff --git a/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx b/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx
index 2eb5a6aa..6ab5737a 100644
--- a/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx
+++ b/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 />
       ) : (
diff --git a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
index 9c4bafc2..057ef015 100644
--- a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
+++ b/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 />
       ) : (
diff --git a/src/pages/ValidatorOnboarding/Deposit/DepositTitle.stories.ts b/src/pages/ValidatorOnboarding/Deposit/DepositTitle.stories.ts
deleted file mode 100644
index f84c5c1a..00000000
--- a/src/pages/ValidatorOnboarding/Deposit/DepositTitle.stories.ts
+++ /dev/null
@@ -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: {},
-}
diff --git a/src/pages/ValidatorOnboarding/Deposit/DepositTitle.tsx b/src/pages/ValidatorOnboarding/Deposit/DepositTitle.tsx
deleted file mode 100644
index 4d359476..00000000
--- a/src/pages/ValidatorOnboarding/Deposit/DepositTitle.tsx
+++ /dev/null
@@ -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
diff --git a/src/utilities.ts b/src/utilities.ts
index f26df9d4..b950f60b 100644
--- a/src/utilities.ts
+++ b/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'
+  }
+}