diff --git a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx
index ac0a78f4..17e78ff7 100644
--- a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx
+++ b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx
@@ -1,16 +1,35 @@
-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;
+};
+
+const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps) => {
+ const [hovered, setHovered] = useState(false);
+ const [isSelected, setIsSelected] = useState(selected);
+
+ const handleMouseEnter = () => setHovered(true);
+ const handleMouseLeave = () => setHovered(false);
+ const handleClick = () => setIsSelected(!isSelected);
+
+ const backgroundColor = isSelected || hovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent';
-const ValidatorListItem = () => {
return (
@@ -31,15 +50,17 @@ const ValidatorListItem = () => {
/>
- Validator 1
+ {name}
- Validator 1
+ {avatarKey}
-
+ {isSelected &&
+
+ }
- )
+ );
}
-export default ValidatorListItem
+export default ValidatorListItem;