From 327e8659ea540327649956b49fea79fd1de49d3a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 24 Mar 2024 20:15:48 +0200
Subject: [PATCH] feat(validator-setting-card): add navigate to panel

---
 .../LeftManage/ValidatorSettingCard.tsx              | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/pages/ManageValidator/LeftManage/ValidatorSettingCard.tsx b/src/pages/ManageValidator/LeftManage/ValidatorSettingCard.tsx
index b6bef270..1a7b1765 100644
--- a/src/pages/ManageValidator/LeftManage/ValidatorSettingCard.tsx
+++ b/src/pages/ManageValidator/LeftManage/ValidatorSettingCard.tsx
@@ -1,5 +1,6 @@
 import { Text } from '@status-im/components'
 import { DisconnectIcon, AdvancedIcon, ExternalIcon } from '@status-im/icons'
+import { useNavigate } from 'react-router-dom'
 import { Stack, YStack } from 'tamagui'
 
 type IconKey = 'Exit Validator' | 'Migrate Validator' | 'Advanced'
@@ -9,14 +10,23 @@ type ValidatorSettingCardProps = {
 }
 
 const ValidatorSettingCard = ({ title }: ValidatorSettingCardProps) => {
+  const navigate = useNavigate()
+
   const getIcon = {
     'Exit Validator': <DisconnectIcon size={20} />,
     'Migrate Validator': <ExternalIcon size={20} />,
     Advanced: <AdvancedIcon size={20} />,
   }
 
+  const onNavigateToPanel = () => {
+    if (title === 'Advanced') {
+      return
+    }
+    navigate(`${title.toLowerCase()}`)
+  }
+
   return (
-    <YStack alignItems="center">
+    <YStack alignItems="center" cursor="pointer" onPress={onNavigateToPanel}>
       <Stack
         style={{
           border: '0.5px solid #DCE0E5',