From 9dce578fa5996e3ba32ea7281179c9e04e3d9cd0 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 31 Jan 2024 23:34:27 +0200
Subject: [PATCH] feat(deposits): separate chain parity as component

---
 .../Deposit/ChainParity.tsx                   | 20 +++++++++++++++++++
 .../ValidatorOnboarding/Deposit/Deposit.tsx   | 14 ++-----------
 2 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/ValidatorOnboarding/Deposit/ChainParity.tsx

diff --git a/src/pages/ValidatorOnboarding/Deposit/ChainParity.tsx b/src/pages/ValidatorOnboarding/Deposit/ChainParity.tsx
new file mode 100644
index 00000000..fd2d6fef
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Deposit/ChainParity.tsx
@@ -0,0 +1,20 @@
+import { Text } from '@status-im/components'
+
+const ChainParity = () => {
+  return (
+    <>
+      <Text size={15} weight="regular" color={'#647084'}>
+        Awaiting chain parity
+      </Text>
+      <div style={{ padding: '7.5% 20%' }}>
+        <img
+          src="/images/chain-parity.png"
+          alt="Chain parity"
+          style={{ width: '100%' }}
+        />
+      </div>
+    </>
+  )
+}
+
+export default ChainParity
diff --git a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
index 4403c1fa..27b7a470 100644
--- a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
+++ b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
@@ -8,6 +8,7 @@ import ValidatorRequest from './ValidatorRequest/ValidatorRequest'
 import ConnectWallet from './ConnectWallet'
 import ConnectedWallet from './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'
@@ -41,18 +42,7 @@ const Deposit = () => {
     >
       <DepositTitle />
       {isChainParity ? (
-        <>
-          <Text size={15} weight="regular" color={'#647084'}>
-            Awaiting chain parity
-          </Text>
-          <div style={{ padding: '7.5% 20%' }}>
-            <img
-              src="/images/chain-parity.png"
-              alt="Chain parity"
-              style={{ width: '100%' }}
-            />
-          </div>
-        </>
+        <ChainParity />
       ) : (
         <YStack space={'$3'}>
           {isTransactionConfirmation ? (