From a7b947afe54fc0b8747e0ce04f88046db0e53b0b Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 27 Sep 2023 11:23:39 +0300 Subject: [PATCH 1/9] Create ValidatorListItem.stories.tsx --- .../ValidatorListItem.stories.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/Dashboard/RightSideBar/ValidatorListItem.stories.tsx diff --git a/src/pages/Dashboard/RightSideBar/ValidatorListItem.stories.tsx b/src/pages/Dashboard/RightSideBar/ValidatorListItem.stories.tsx new file mode 100644 index 00000000..0446b9c6 --- /dev/null +++ b/src/pages/Dashboard/RightSideBar/ValidatorListItem.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ValidatorListItem from './ValidatorListItem' + +const meta = { + title: 'Dashboard/ValidatorListItem', + component: ValidatorListItem, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { avatarKey: '37880sfsef38fsb', name: 'Validator 1', selected: true, isAvatarChipIncluded: true, isVerified: true }, +} From d900076202cd541cd5d03ea4f198eb8d27f8f1fa Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 27 Sep 2023 11:24:57 +0300 Subject: [PATCH 2/9] Add icons logic in ValidatorListItem --- .../Dashboard/RightSideBar/ValidatorListItem.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx index 17e78ff7..8fa6e9c4 100644 --- a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx +++ b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx @@ -6,10 +6,13 @@ import { VerifiedIcon, ContactIcon } from '@status-im/icons'; type ValidatorListItemProps = { name: string; avatarKey: string; + isAvatarChipIncluded?: boolean; + isVerified?: boolean; selected?: boolean; + }; -const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps) => { +const ValidatorListItem = ({ name, avatarKey, selected, isAvatarChipIncluded, isVerified }: ValidatorListItemProps) => { const [hovered, setHovered] = useState(false); const [isSelected, setIsSelected] = useState(selected); @@ -51,7 +54,12 @@ const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps {name} - + {isVerified && ( + + )} + {isAvatarChipIncluded && ( + + )} {avatarKey} From 3fcbdf27070aa3030309a263929c1b65dde6f0c9 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 27 Sep 2023 11:25:05 +0300 Subject: [PATCH 3/9] Pass icons as props --- src/pages/Dashboard/RightSideBar/RightSidebar.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/pages/Dashboard/RightSideBar/RightSidebar.tsx b/src/pages/Dashboard/RightSideBar/RightSidebar.tsx index e9e35aa3..1dd66820 100644 --- a/src/pages/Dashboard/RightSideBar/RightSidebar.tsx +++ b/src/pages/Dashboard/RightSideBar/RightSidebar.tsx @@ -2,8 +2,7 @@ import { Avatar, 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' - + const RightSidebar = () => { return ( { - - - - - + + + + + From d67012a5aef9f8273c534e905d1bd4e0b2dadfff Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 27 Sep 2023 11:33:09 +0300 Subject: [PATCH 4/9] Create ValidatorsList.tsx --- .../Dashboard/RightSideBar/ValidatorsList.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/pages/Dashboard/RightSideBar/ValidatorsList.tsx diff --git a/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx new file mode 100644 index 00000000..e7e153f6 --- /dev/null +++ b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx @@ -0,0 +1,25 @@ +// create component for this file + +import { Stack, YStack } from "tamagui" +import ValidatorListItem from "./ValidatorListItem" +import InputSearch from "./SearchInput" +import { useState } from "react" + +const ValidatorsList = () => { + const [searchValue, setSearchValue] = useState('') + + return ( + + + + + + + + + + + ) +} + +export default ValidatorsList \ No newline at end of file From 6c4af99b3f0832ab505ec5d3ca15923565ff8b7f Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 27 Sep 2023 11:33:18 +0300 Subject: [PATCH 5/9] pass value --- src/pages/Dashboard/RightSideBar/SearchInput.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/Dashboard/RightSideBar/SearchInput.tsx b/src/pages/Dashboard/RightSideBar/SearchInput.tsx index d8edab92..eecd2d27 100644 --- a/src/pages/Dashboard/RightSideBar/SearchInput.tsx +++ b/src/pages/Dashboard/RightSideBar/SearchInput.tsx @@ -1,9 +1,11 @@ import { Input } from "@status-im/components" import { SearchIcon } from "@status-im/icons" -import { useState } from "react" -const InputSearch = () => { - const [value, setValue] = useState('') +type InputSearchProps = { + value: string + setValue: (value: string) => void +} +const InputSearch = ({ value, setValue }: InputSearchProps) => { return ( <> From 39bff5d6a2d35851c553b4bfd78275b84051fc87 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 27 Sep 2023 11:33:28 +0300 Subject: [PATCH 6/9] export VaidatorList --- src/pages/Dashboard/RightSideBar/RightSidebar.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/pages/Dashboard/RightSideBar/RightSidebar.tsx b/src/pages/Dashboard/RightSideBar/RightSidebar.tsx index 1dd66820..5a8f466f 100644 --- a/src/pages/Dashboard/RightSideBar/RightSidebar.tsx +++ b/src/pages/Dashboard/RightSideBar/RightSidebar.tsx @@ -2,7 +2,8 @@ import { Avatar, Tabs, Text } from '@status-im/components' import { XStack, YStack } from 'tamagui' import ValidatorListItem from './ValidatorListItem' import InputSearch from './SearchInput' - +import ValidatorsList from './ValidatorsList' + const RightSidebar = () => { return ( { - - - - - - - + From 60fd2bd8cf3e4a00b15275ac7a5d642c159f2916 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 27 Sep 2023 11:35:44 +0300 Subject: [PATCH 7/9] Implement search input field for "Search Validators" --- .../Dashboard/RightSideBar/ValidatorsList.tsx | 42 ++++++++++++------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx index e7e153f6..8f57bef6 100644 --- a/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx +++ b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx @@ -1,25 +1,39 @@ -// create component for this file - -import { Stack, YStack } from "tamagui" -import ValidatorListItem from "./ValidatorListItem" -import InputSearch from "./SearchInput" -import { useState } from "react" +import { Stack, YStack } from "tamagui"; +import ValidatorListItem from "./ValidatorListItem"; +import InputSearch from "./SearchInput"; +import { useState, useEffect } from "react"; const ValidatorsList = () => { - const [searchValue, setSearchValue] = useState('') + const [searchValue, setSearchValue] = useState(''); + const validators = [ + { name: 'Validator 1', avatarKey: '37880sfsef38fsb', selected: true, isAvatarChipIncluded: true, isVerified: true }, + { name: 'Validator 2', avatarKey: 'hs880sfsef38fsb', isVerified: true }, + { name: 'Validator 3', avatarKey: '3nh880sfsef38fsb', isAvatarChipIncluded: true }, + { name: 'Validator 4', avatarKey: 'fh7880sfsef38fsb' }, + ]; + const [filteredValidators, setFilteredValidators] = useState(validators); + + useEffect(() => { + if (searchValue) { + const filtered = validators.filter(validator => + validator.name.toLowerCase().includes(searchValue.toLowerCase()) + ); + setFilteredValidators(filtered); + } else { + setFilteredValidators(validators); + } + }, [searchValue, validators]); return ( - - - - - + {filteredValidators.map(validator => ( + + ))} - ) + ); } -export default ValidatorsList \ No newline at end of file +export default ValidatorsList; From 551edd95dc7b81ca486b2e96214430f4715225b6 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 27 Sep 2023 11:36:40 +0300 Subject: [PATCH 8/9] Add more validators --- src/pages/Dashboard/RightSideBar/ValidatorsList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx index 8f57bef6..7192b7c1 100644 --- a/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx +++ b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx @@ -10,6 +10,7 @@ const ValidatorsList = () => { { name: 'Validator 2', avatarKey: 'hs880sfsef38fsb', isVerified: true }, { name: 'Validator 3', avatarKey: '3nh880sfsef38fsb', isAvatarChipIncluded: true }, { name: 'Validator 4', avatarKey: 'fh7880sfsef38fsb' }, + { name: 'Validator 5', avatarKey: 'j77880s..fsef38fsb' , isVerified: true}, ]; const [filteredValidators, setFilteredValidators] = useState(validators); From a9bb6fcaf3280b310d8a4346baab928f1e2f0440 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 27 Sep 2023 11:43:22 +0300 Subject: [PATCH 9/9] Create ValidatorsList.stories.tsx --- .../RightSideBar/ValidatorsList.stories.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/Dashboard/RightSideBar/ValidatorsList.stories.tsx diff --git a/src/pages/Dashboard/RightSideBar/ValidatorsList.stories.tsx b/src/pages/Dashboard/RightSideBar/ValidatorsList.stories.tsx new file mode 100644 index 00000000..4595448e --- /dev/null +++ b/src/pages/Dashboard/RightSideBar/ValidatorsList.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ValidatorsList from './ValidatorsList' + +const meta = { + title: 'Dashboard/ValidatorsList', + component: ValidatorsList, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: {}, +}