From 5f27d7d2f8a88826d8d842d27366c1f24f43ab16 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Wed, 27 Sep 2023 11:40:33 +0300
Subject: [PATCH] feat: add alerts and logs components on right sidebar

---
 .../Dashboard/RightSideBar/RightSidebar.tsx   | 71 +++++++++++++++++--
 .../RightSideBar/ValidatorListItem.tsx        | 38 +++++-----
 2 files changed, 83 insertions(+), 26 deletions(-)

diff --git a/src/pages/Dashboard/RightSideBar/RightSidebar.tsx b/src/pages/Dashboard/RightSideBar/RightSidebar.tsx
index e9e35aa3..7ba6a713 100644
--- a/src/pages/Dashboard/RightSideBar/RightSidebar.tsx
+++ b/src/pages/Dashboard/RightSideBar/RightSidebar.tsx
@@ -1,8 +1,8 @@
-import { Avatar, Tabs, Text } from '@status-im/components'
+import { Avatar, InformationBox, Tabs, Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
 import ValidatorListItem from './ValidatorListItem'
 import InputSearch from './SearchInput'
-// import { NodeIcon } from '@status-im/icons'
+import { CloseCircleIcon, ChevronRightIcon } from '@status-im/icons'
 
 const RightSidebar = () => {
   return (
@@ -34,18 +34,77 @@ const RightSidebar = () => {
             Inactive
           </Tabs.Trigger>
         </Tabs.List>
-        <Tabs.Content value="active">
+        <Tabs.Content value="active" style={{ marginTop: '16px' }}>
           <InputSearch />
-          <YStack>
+          <YStack space={'$2'} mt="16px">
             <ValidatorListItem name={'Validator 1'} avatarKey={'37880sfsef38fsb'} selected={true} />
             <ValidatorListItem name={'Validator 2'} avatarKey={'37880sfsef38fsb'} />
             <ValidatorListItem name={'Validator 3'} avatarKey={'37880sfsef38fsb'} />
             <ValidatorListItem name={'Validator 4'} avatarKey={'37880sfsef38fsb'} />
           </YStack>
         </Tabs.Content>
-        <Tabs.Content value="pending"></Tabs.Content>
-        <Tabs.Content value="inactive"></Tabs.Content>
+        <Tabs.Content value="pending">
+          <ValidatorListItem name={'Validator 5'} avatarKey={'37880sfsef38fsb'} />
+        </Tabs.Content>
+        <Tabs.Content value="inactive">
+          <ValidatorListItem name={'Validator 6'} avatarKey={'37880sfsef38fsb'} />
+        </Tabs.Content>
       </Tabs>
+
+      <YStack space={'$2'}>
+        <XStack justifyContent="space-between">
+          <Text size={15} weight={'semibold'}>
+            Alerts
+          </Text>
+          <div style={{ marginRight: '8px' }}>
+            <ChevronRightIcon size={20} />
+          </div>
+        </XStack>
+        <InformationBox
+          message="Network: Participation rate below 66%"
+          icon={<CloseCircleIcon size={20} />}
+          variant="default"
+          onClosePress={() => alert('dismissed')}
+        />
+        <InformationBox
+          message="Node: 32 Peers Connected"
+          icon={<CloseCircleIcon size={20} />}
+          variant="information"
+          onClosePress={() => alert('dismissed')}
+        />
+        <InformationBox
+          message="Node / Validator: Process Down"
+          icon={<CloseCircleIcon size={20} />}
+          variant="error"
+          onClosePress={() => alert('dismissed')}
+        />
+      </YStack>
+
+      <YStack space={'$2'}>
+        <XStack justifyContent="space-between">
+          <Text size={15} weight={'semibold'}>
+            Logs
+          </Text>
+          <div style={{ marginRight: '8px' }}>
+            <ChevronRightIcon size={20} />
+          </div>
+        </XStack>
+        <InformationBox
+          message="Critical Logs: 0.01 / M"
+          icon={<CloseCircleIcon size={20} />}
+          variant="default"
+        />
+        <InformationBox
+          message="Warning Logs: 0.01 / M"
+          icon={<CloseCircleIcon size={20} />}
+          variant="default"
+        />
+        <InformationBox
+          message="Error Logs: 0.01 / M"
+          icon={<CloseCircleIcon size={20} />}
+          variant="default"
+        />
+      </YStack>
     </YStack>
   )
 }
diff --git a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx
index 17e78ff7..60737660 100644
--- a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx
+++ b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx
@@ -1,23 +1,23 @@
-import { useState } from 'react';
-import { XStack, YStack } from 'tamagui';
-import { Avatar, Checkbox, Text } from '@status-im/components';
-import { VerifiedIcon, ContactIcon } from '@status-im/icons';
+import { useState } from 'react'
+import { XStack, YStack } from 'tamagui'
+import { Avatar, Checkbox, Text } from '@status-im/components'
+import { VerifiedIcon, ContactIcon } from '@status-im/icons'
 
 type ValidatorListItemProps = {
-  name: string;
-  avatarKey: string;
-  selected?: boolean;
-};
+  name: string
+  avatarKey: string
+  selected?: boolean
+}
 
 const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps) => {
-  const [hovered, setHovered] = useState(false);
-  const [isSelected, setIsSelected] = useState(selected);
+  const [hovered, setHovered] = useState(false)
+  const [isSelected, setIsSelected] = useState(selected)
 
-  const handleMouseEnter = () => setHovered(true);
-  const handleMouseLeave = () => setHovered(false);
-  const handleClick = () => setIsSelected(!isSelected);
+  const handleMouseEnter = () => setHovered(true)
+  const handleMouseLeave = () => setHovered(false)
+  const handleClick = () => setIsSelected(!isSelected)
 
-  const backgroundColor = isSelected || hovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent';
+  const backgroundColor = isSelected || hovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent'
 
   return (
     <XStack
@@ -37,7 +37,7 @@ const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps
         <Avatar
           type="user"
           size={32}
-          name="1"
+          name={name}
           backgroundColor="$red-50"
           colorHash={[
             [3, 30],
@@ -56,11 +56,9 @@ const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps
           <Text size={13}>{avatarKey}</Text>
         </YStack>
       </XStack>
-      {isSelected &&
-        <Checkbox id="" variant="outline" size={20} selected={isSelected} />
-      }
+      {isSelected && <Checkbox id="" variant="outline" size={20} selected={isSelected} />}
     </XStack>
-  );
+  )
 }
 
-export default ValidatorListItem;
+export default ValidatorListItem