From 5114273af9539d935fa69059f4d7595d0126d764 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 6 Mar 2024 08:55:06 +0200
Subject: [PATCH] feat(exit-validator): create entire screen

---
 .../RightManageSettings/Panels/ExitPanel.tsx  | 50 +++++++++++++++++++
 .../RightManageSettings.tsx                   |  5 +-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/ExitPanel.tsx

diff --git a/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/ExitPanel.tsx b/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/ExitPanel.tsx
new file mode 100644
index 00000000..9fdad04b
--- /dev/null
+++ b/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/ExitPanel.tsx
@@ -0,0 +1,50 @@
+import { Button, Text } from '@status-im/components'
+import { XStack, YStack } from 'tamagui'
+
+import PanelWrapper from './PanelWrapper'
+
+const ExitPanel = () => {
+  const exitQueue = 603
+  const exitValidatorHandler = () => {}
+
+  return (
+    <PanelWrapper title={'Exit Validator'}>
+      <YStack alignItems={'flex-start'} marginTop={'6px'}>
+        <Text size={15} weight="semibold">
+          Validator Exit Queue
+        </Text>
+        <Text size={27} weight="semibold" color="#2A4AF5">
+          {exitQueue}
+        </Text>
+      </YStack>
+      <YStack
+        space={'$3'}
+        style={{
+          alignItems: 'center',
+          textAlign: 'center',
+          marginBottom: '6px',
+        }}
+      >
+        <img
+          src="/public/images/exit-validator.png"
+          alt="exit validator"
+          style={{ width: '300px' }}
+        />
+        <div style={{ width: '73%' }}>
+          <Text size={15} color="#2A4AF5">
+            You are about to Exit your validator it is not possible for you to
+            revert this action! Please make sure you understand the
+            consequences.
+          </Text>
+        </div>
+      </YStack>
+      <XStack
+        style={{ width: '100%', justifyContent: 'end', marginTop: '6px' }}
+      >
+        <Button onPress={exitValidatorHandler}>Exit Validator</Button>
+      </XStack>
+    </PanelWrapper>
+  )
+}
+
+export default ExitPanel
diff --git a/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/RightManageSettings.tsx b/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/RightManageSettings.tsx
index 23e56a57..25066da4 100644
--- a/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/RightManageSettings.tsx
+++ b/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/RightManageSettings.tsx
@@ -1,17 +1,20 @@
 import DefaultPanel from './Panels/DefaultPanel'
 import DepositPanel from './Panels/DepositPanel'
+import ExitPanel from './Panels/ExitPanel'
 import MigratePanel from './Panels/MigratePanel'
 
 const RightManageSettings = () => {
   const isDefault = false
   const isMigrate = false
-  const isDeposit = true
+  const isDeposit = false
+  const isExit = true
 
   return (
     <div style={{ flexGrow: 1 }}>
       {isDefault && <DefaultPanel />}
       {isMigrate && <MigratePanel />}
       {isDeposit && <DepositPanel />}
+      {isExit && <ExitPanel />}
     </div>
   )
 }