From 8413357dc7c5f53d877f7d51a274039549965c19 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 2 Nov 2023 23:02:17 +0200 Subject: [PATCH 001/123] feat: add story for Validator Management --- .../ValidatorManagement.stories.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/ValidatorManagement/ValidatorManagement.stories.ts diff --git a/src/pages/ValidatorManagement/ValidatorManagement.stories.ts b/src/pages/ValidatorManagement/ValidatorManagement.stories.ts new file mode 100644 index 00000000..e1e115cc --- /dev/null +++ b/src/pages/ValidatorManagement/ValidatorManagement.stories.ts @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ValidatorManagement from './ValidatorManagement' + +const meta = { + title: 'Pages/ValidatorManagement', + component: ValidatorManagement, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 59c1280355aafc31626f862a67f339bf5fc28588 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 2 Nov 2023 23:04:03 +0200 Subject: [PATCH 002/123] feat: add sidebars --- src/App.tsx | 4 ++-- .../ValidatorManagement/ValidatorManagement.tsx | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 94b3f452..21cbe7af 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,11 +16,11 @@ import PairDevice from './pages/PairDevice/PairDevice' import PinnedNotification from './components/General/PinnedNottification' import CreateLocalNodePage from './pages/CreateLocalNodePage/CreateLocalNodePage' import ValidatorOnboarding from './pages/ValidatorOnboarding/ValidatorOnboarding' -import { ethereumRopsten, wcV2InitOptions, apiKey } from './constants' import Dashboard from './pages/Dashboard/Dashboard' import ConnectExistingInstance from './pages/ConnectExistingInstance/ConnectExistingInstance' -import './App.css' import ValidatorManagement from './pages/ValidatorManagement/ValidatorManagement' +import { ethereumRopsten, wcV2InitOptions, apiKey } from './constants' +import './App.css' const injected = injectedModule() const walletConnect = walletConnectModule(wcV2InitOptions) diff --git a/src/pages/ValidatorManagement/ValidatorManagement.tsx b/src/pages/ValidatorManagement/ValidatorManagement.tsx index 5619fe4a..9b16e1c5 100644 --- a/src/pages/ValidatorManagement/ValidatorManagement.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagement.tsx @@ -1,7 +1,15 @@ -import { YStack } from 'tamagui' +import { XStack } from 'tamagui' + +import RightSidebar from '../Dashboard/RightSideBar/RightSidebar' +import LeftSidebar from '../Dashboard/LeftSidebar' const ValidatorManagement = () => { - return + return ( + + + + + ) } export default ValidatorManagement From c60ca53fd4f2301fcc99f455b87c32bb832607b7 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 2 Nov 2023 23:06:34 +0200 Subject: [PATCH 003/123] feat: create base component for content --- src/pages/ValidatorManagement/ValidatorManagement.tsx | 2 ++ .../ValidatorManagement/ValidatorManagementContent.tsx | 7 +++++++ 2 files changed, 9 insertions(+) create mode 100644 src/pages/ValidatorManagement/ValidatorManagementContent.tsx diff --git a/src/pages/ValidatorManagement/ValidatorManagement.tsx b/src/pages/ValidatorManagement/ValidatorManagement.tsx index 9b16e1c5..1a54e956 100644 --- a/src/pages/ValidatorManagement/ValidatorManagement.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagement.tsx @@ -2,11 +2,13 @@ import { XStack } from 'tamagui' import RightSidebar from '../Dashboard/RightSideBar/RightSidebar' import LeftSidebar from '../Dashboard/LeftSidebar' +import ValidatorManagementContent from './ValidatorManagementContent' const ValidatorManagement = () => { return ( + ) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx new file mode 100644 index 00000000..454b7237 --- /dev/null +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -0,0 +1,7 @@ +import { YStack } from 'tamagui' + +const ValidatorManagementContent = () => { + return +} + +export default ValidatorManagementContent From 8874f63b217f91268f8b4af7d6247171988cbc66 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 2 Nov 2023 23:07:50 +0200 Subject: [PATCH 004/123] feat: create story for content component --- .../ValidatorManagementContent.stories.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/ValidatorManagement/ValidatorManagementContent.stories.ts diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.stories.ts b/src/pages/ValidatorManagement/ValidatorManagementContent.stories.ts new file mode 100644 index 00000000..b81bbd36 --- /dev/null +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.stories.ts @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ValidatorManagementContent from './ValidatorManagementContent' + +const meta = { + title: 'ValidatorManagement/ValidatorManagementContent', + component: ValidatorManagementContent, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 5e0d0afb1922d7d98e8c40d9bd141cfc7ed67320 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 09:50:51 +0200 Subject: [PATCH 005/123] feat: create management table component --- src/pages/ValidatorManagement/ManagementTable.tsx | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTable.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable.tsx new file mode 100644 index 00000000..f74959db --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable.tsx @@ -0,0 +1,5 @@ +const ManagementTable = () => { + return
+} + +export default ManagementTable From 5d3968ccf23ec17b68f4cb7c507f9045a8f101d5 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 09:51:41 +0200 Subject: [PATCH 006/123] feat: create story for management table --- .../ManagementTable.stories.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTable.stories.ts diff --git a/src/pages/ValidatorManagement/ManagementTable.stories.ts b/src/pages/ValidatorManagement/ManagementTable.stories.ts new file mode 100644 index 00000000..81fa2024 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable.stories.ts @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ManagementTable from './ManagementTable' + +const meta = { + title: 'ValidatorManagement/ManagementTable', + component: ManagementTable, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 5946fcda6bc1262482dd7284af61101c7a35059c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 09:55:15 +0200 Subject: [PATCH 007/123] feat: style content structure and use table --- .../ValidatorManagementContent.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index 454b7237..cfd5e40d 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -1,7 +1,23 @@ import { YStack } from 'tamagui' +import ManagementTable from './ManagementTable' + const ValidatorManagementContent = () => { - return + return ( + + + + ) } export default ValidatorManagementContent From bc381e68735f6e41562a2656f2e44029fdcbf3b3 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 10:00:16 +0200 Subject: [PATCH 008/123] feat: add css file for table --- .../ValidatorManagement/ManagementTable.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTable.css diff --git a/src/pages/ValidatorManagement/ManagementTable.css b/src/pages/ValidatorManagement/ManagementTable.css new file mode 100644 index 00000000..f45625b1 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable.css @@ -0,0 +1,17 @@ +table { + width: 100%; + border-collapse: collapse; + margin: 20px 0; + font-size: 14px; +} + +th, +td { + padding: 12px 20px; + border: 1px solid #e6e6e6; + text-align: left; +} + +th { + font-weight: 600; +} From bd8fe67c99fd9439f3be6efffa96d31d3cb4d385 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 10:02:46 +0200 Subject: [PATCH 009/123] feat: create table structure --- .../ValidatorManagement/ManagementTable.tsx | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable.tsx index f74959db..d41efaf1 100644 --- a/src/pages/ValidatorManagement/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable.tsx @@ -1,5 +1,40 @@ +import './ManagementTable.css' + const ManagementTable = () => { - return
+ const validators = [] + + return ( + + + + + + + + + + + + + + + + {validators.map((validator, index) => ( + + + + + + + + + + + + ))} + +
BalanceIncomeProposalsAttestationsEffectivenessDepositsRankStatus
{validator.balance}{validator.income}{validator.proposals}{validator.attestations}{validator.effectiveness}{validator.deposits}{validator.rank}{validator.status}
+ ) } export default ManagementTable From 9fc923c5573a08c8f69926bb25e9754709ea43f1 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 10:03:30 +0200 Subject: [PATCH 010/123] feat: add fake data for table --- .../ValidatorManagement/ManagementTable.tsx | 45 ++++++++++++++++++- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable.tsx index d41efaf1..75c0084f 100644 --- a/src/pages/ValidatorManagement/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable.tsx @@ -1,8 +1,49 @@ import './ManagementTable.css' -const ManagementTable = () => { - const validators = [] +const validators = [ + { + balance: 100, + income: 100, + proposals: 100, + attestations: 100, + effectiveness: 100, + deposits: 100, + rank: 100, + status: 'Active', + }, + { + balance: 100, + income: 100, + proposals: 100, + attestations: 100, + effectiveness: 100, + deposits: 100, + rank: 100, + status: 'Active', + }, + { + balance: 100, + income: 100, + proposals: 100, + attestations: 100, + effectiveness: 100, + deposits: 100, + rank: 100, + status: 'Active', + }, + { + balance: 100, + income: 100, + proposals: 100, + attestations: 100, + effectiveness: 100, + deposits: 100, + rank: 100, + status: 'Active', + }, +] +const ManagementTable = () => { return ( From 5809f3cefce74cad55a206c042a497f75b9b7705 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 10:05:20 +0200 Subject: [PATCH 011/123] feat: move table into other folder --- .../{ => ManagementTable}/ManagementTable.css | 0 .../{ => ManagementTable}/ManagementTable.stories.ts | 0 .../{ => ManagementTable}/ManagementTable.tsx | 0 src/pages/ValidatorManagement/ValidatorManagementContent.tsx | 2 +- 4 files changed, 1 insertion(+), 1 deletion(-) rename src/pages/ValidatorManagement/{ => ManagementTable}/ManagementTable.css (100%) rename src/pages/ValidatorManagement/{ => ManagementTable}/ManagementTable.stories.ts (100%) rename src/pages/ValidatorManagement/{ => ManagementTable}/ManagementTable.tsx (100%) diff --git a/src/pages/ValidatorManagement/ManagementTable.css b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.css similarity index 100% rename from src/pages/ValidatorManagement/ManagementTable.css rename to src/pages/ValidatorManagement/ManagementTable/ManagementTable.css diff --git a/src/pages/ValidatorManagement/ManagementTable.stories.ts b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts similarity index 100% rename from src/pages/ValidatorManagement/ManagementTable.stories.ts rename to src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts diff --git a/src/pages/ValidatorManagement/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx similarity index 100% rename from src/pages/ValidatorManagement/ManagementTable.tsx rename to src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index cfd5e40d..dcb1a452 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -1,6 +1,6 @@ import { YStack } from 'tamagui' -import ManagementTable from './ManagementTable' +import ManagementTable from './ManagementTable/ManagementTable' const ValidatorManagementContent = () => { return ( From e4be407ebca6bd220de0d77dd4e72b9303f34f35 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 10:13:34 +0200 Subject: [PATCH 012/123] feat: style table --- .../ManagementTable/ManagementTable.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.css b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.css index f45625b1..5088d391 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.css +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.css @@ -1,15 +1,20 @@ table { width: 100%; - border-collapse: collapse; + border-spacing: 0; margin: 20px 0; font-size: 14px; + border: 1px solid #e7eaee; + border-radius: 16px; +} + +th { + border-bottom: 1px solid #e7eaee; } th, td { padding: 12px 20px; - border: 1px solid #e6e6e6; - text-align: left; + text-align: center; } th { From 8647c31f7b2703a8ff97c54282e5272d46d73960 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 10:26:56 +0200 Subject: [PATCH 013/123] feat: add options icon to every row --- .../ValidatorManagement/ManagementTable/ManagementTable.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 75c0084f..af626c20 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,3 +1,5 @@ +import { OptionsIcon } from '@status-im/icons' + import './ManagementTable.css' const validators = [ @@ -57,6 +59,7 @@ const ManagementTable = () => { + @@ -71,6 +74,9 @@ const ManagementTable = () => { + ))} From 2cc892a8e1d2af8d01194ba4a25cac34a588afdf Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 11:35:14 +0200 Subject: [PATCH 014/123] fix: new imports after merge --- src/pages/ValidatorManagement/ValidatorManagement.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorManagement/ValidatorManagement.tsx b/src/pages/ValidatorManagement/ValidatorManagement.tsx index 1a54e956..46474a20 100644 --- a/src/pages/ValidatorManagement/ValidatorManagement.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagement.tsx @@ -1,8 +1,8 @@ import { XStack } from 'tamagui' -import RightSidebar from '../Dashboard/RightSideBar/RightSidebar' -import LeftSidebar from '../Dashboard/LeftSidebar' import ValidatorManagementContent from './ValidatorManagementContent' +import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar' +import RightSidebar from '../../components/General/RightSideBar/RightSidebar' const ValidatorManagement = () => { return ( From 0c68665e5825b7f84f8fadd93e0f161e185aa806 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 17:21:15 +0200 Subject: [PATCH 015/123] feat: add status texts --- .../ManagementTable/ManagementTable.tsx | 65 ++++++++++++++----- 1 file changed, 49 insertions(+), 16 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index af626c20..dadb3954 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,6 +1,7 @@ import { OptionsIcon } from '@status-im/icons' import './ManagementTable.css' +import { Text } from '@status-im/components' const validators = [ { @@ -51,14 +52,30 @@ const ManagementTable = () => { - - - - - - - - + + + + + + + + @@ -66,14 +83,30 @@ const ManagementTable = () => { {validators.map((validator, index) => ( - - - - - - - - + + + + + + + + From effbe290b44f3d27d538effec25a6490680444e6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 17:23:19 +0200 Subject: [PATCH 016/123] feat: style table texts --- .../ManagementTable/ManagementTable.tsx | 68 ++++++++++++++----- 1 file changed, 50 insertions(+), 18 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index dadb3954..8b06bb23 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,7 +1,7 @@ +import { Text } from '@status-im/components' import { OptionsIcon } from '@status-im/icons' import './ManagementTable.css' -import { Text } from '@status-im/components' const validators = [ { @@ -53,28 +53,44 @@ const ManagementTable = () => { @@ -84,31 +100,47 @@ const ManagementTable = () => { ))} From b6d5fbe3fed4a7773067b4c63321b21739125803 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 17:27:01 +0200 Subject: [PATCH 017/123] feat: add checkboxes to table --- .../ManagementTable/ManagementTable.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 8b06bb23..6ca04215 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,4 +1,4 @@ -import { Text } from '@status-im/components' +import { Checkbox, Text } from '@status-im/components' import { OptionsIcon } from '@status-im/icons' import './ManagementTable.css' @@ -51,6 +51,9 @@ const ManagementTable = () => {
Deposits Rank Status
{validator.deposits} {validator.rank} {validator.status} + +
BalanceIncomeProposalsAttestationsEffectivenessDepositsRankStatus + Balance + + Income + + Proposals + + Attestations + + Effectiveness + + Deposits + + Rank + + Status +
{validator.balance}{validator.income}{validator.proposals}{validator.attestations}{validator.effectiveness}{validator.deposits}{validator.rank}{validator.status} + {validator.balance} + + {validator.income} + + {validator.proposals} + + {validator.attestations} + + {validator.effectiveness} + + {validator.deposits} + + {validator.rank} + + {validator.status} +
- Balance + + Balance + - Income + + Income + - Proposals + + Proposals + - Attestations + + Attestations + - Effectiveness + + Effectiveness + - Deposits + + Deposits + - Rank + + Rank + - Status + + Status +
- {validator.balance} + + {validator.balance} + - {validator.income} + + {validator.income} + - {validator.proposals} + + {validator.proposals} + - {validator.attestations} + + {validator.attestations} + - {validator.effectiveness} + + {validator.effectiveness} + - {validator.deposits} + + {validator.deposits} + - {validator.rank} + + {validator.rank} + - {validator.status} + + {validator.status} + - +
+ {validators.map((validator, index) => ( + - + - + {validators .filter(validator => validator.status === tab) + .filter( + validator => + validator.address.includes(searchValue) || + validator.number.toString().includes(searchValue), + ) .map((validator, index) => ( - {validators - .filter(validator => validator.status === tab) - .filter( - validator => - validator.address.includes(searchValue) || - validator.number.toString().includes(searchValue), - ) - .map((validator, index) => ( - - - - - - - - - - - - - - ))} + {currentValidators.map((validator, index) => ( + + + + + + + + + + + + + + ))}
+ + @@ -98,6 +101,9 @@ const ManagementTable = () => {
+ + From 76aa136dc2246f2f00e00d1589bc3c22310e72f5 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 17:29:08 +0200 Subject: [PATCH 018/123] fix: css management table file --- .../ValidatorManagement/ManagementTable/ManagementTable.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.css b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.css index 5088d391..2ed76751 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.css +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.css @@ -13,10 +13,6 @@ th { th, td { - padding: 12px 20px; + padding: 9px 19px; text-align: center; } - -th { - font-weight: 600; -} From ebfc664ca753a92ef62d56f07d938e9710899fe5 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 17:30:33 +0200 Subject: [PATCH 019/123] feat: add validators amount --- .../ValidatorManagement/ManagementTable/ManagementTable.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 6ca04215..4ce4a047 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -54,7 +54,11 @@ const ManagementTable = () => { + + {validators.length} Validators + + Balance From 6481dbcdd827ca2ffd0c9cfafdcb48fda5dab334 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 3 Nov 2023 17:41:11 +0200 Subject: [PATCH 020/123] feat: create validator profile component --- src/components/General/ValidatorProfile.tsx | 33 +++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/components/General/ValidatorProfile.tsx diff --git a/src/components/General/ValidatorProfile.tsx b/src/components/General/ValidatorProfile.tsx new file mode 100644 index 00000000..5352fc07 --- /dev/null +++ b/src/components/General/ValidatorProfile.tsx @@ -0,0 +1,33 @@ +import { Avatar, Text } from '@status-im/components' +import { XStack, YStack } from 'tamagui' + +import { getFormattedValidatorAddress } from '../../utilities' + +type ValidatorProfileProps = { + number: number + address: string +} + +const ValidatorProfile = ({ number, address }: ValidatorProfileProps) => { + return ( + + + + + Validator {number} + + + {getFormattedValidatorAddress(address)} + + + + ) +} + +export default ValidatorProfile From 0e9116b0c7c6a51d0c2c7e409f593667179e83d4 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 6 Nov 2023 21:09:25 +0200 Subject: [PATCH 021/123] fix: remove title logo component and story --- src/pages/Dashboard/TitleLogo.stories.ts | 19 ---------------- src/pages/Dashboard/TitleLogo.tsx | 28 ------------------------ 2 files changed, 47 deletions(-) delete mode 100644 src/pages/Dashboard/TitleLogo.stories.ts delete mode 100644 src/pages/Dashboard/TitleLogo.tsx diff --git a/src/pages/Dashboard/TitleLogo.stories.ts b/src/pages/Dashboard/TitleLogo.stories.ts deleted file mode 100644 index 7d2a7b5a..00000000 --- a/src/pages/Dashboard/TitleLogo.stories.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' - -import TitleLogo from './TitleLogo' - -const meta = { - title: 'Dashboard/TitleLogo', - component: TitleLogo, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], -} satisfies Meta - -export default meta -type Story = StoryObj - -export const Default: Story = { - args: {}, -} diff --git a/src/pages/Dashboard/TitleLogo.tsx b/src/pages/Dashboard/TitleLogo.tsx deleted file mode 100644 index 9c8a1164..00000000 --- a/src/pages/Dashboard/TitleLogo.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Avatar, Text } from '@status-im/components' -import { Stack, XStack, YStack } from 'tamagui' - -const TitleLogo = () => { - return ( - - - - } - /> - - - - Nimbus - - - Node Management Dashboard - - - - ) -} - -export default TitleLogo From eeccf4d30abe20ceb14262d7b040272970dfc358 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 6 Nov 2023 21:10:54 +0200 Subject: [PATCH 022/123] feat: create general title component to reuse --- src/components/General/TitleLogo.tsx | 32 ++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/components/General/TitleLogo.tsx diff --git a/src/components/General/TitleLogo.tsx b/src/components/General/TitleLogo.tsx new file mode 100644 index 00000000..b694bc90 --- /dev/null +++ b/src/components/General/TitleLogo.tsx @@ -0,0 +1,32 @@ +import { Avatar, Text } from '@status-im/components' +import { Stack, XStack, YStack } from 'tamagui' + +type TitleLogoProps = { + subtitle?: string +} + +const TitleLogo = ({ subtitle }: TitleLogoProps) => { + return ( + + + + } + /> + + + + Nimbus + + + {subtitle} + + + + ) +} + +export default TitleLogo From a6dbd1f2f2f23850f589ba7df7c9f83f1b7c6bc8 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 6 Nov 2023 21:11:12 +0200 Subject: [PATCH 023/123] feat: create story for title logo --- src/components/General/TitleLogo.stories.ts | 25 +++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/components/General/TitleLogo.stories.ts diff --git a/src/components/General/TitleLogo.stories.ts b/src/components/General/TitleLogo.stories.ts new file mode 100644 index 00000000..8064f0c5 --- /dev/null +++ b/src/components/General/TitleLogo.stories.ts @@ -0,0 +1,25 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import TitleLogo from './TitleLogo' + +const meta = { + title: 'General/TitleLogo', + component: TitleLogo, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + subtitle: 'Node Management Dashboard', + }, +} + +export const WithoutSubtitle: Story = { + args: {}, +} From eac4dc781d14d47aeb30fa79dbc1c6e5124cb2ae Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 6 Nov 2023 21:12:00 +0200 Subject: [PATCH 024/123] feat: use title logos --- src/pages/Dashboard/DashboardContent.tsx | 10 ++++++---- .../ValidatorManagement/ValidatorManagementContent.tsx | 4 ++++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx index 25214f11..3d508cfd 100644 --- a/src/pages/Dashboard/DashboardContent.tsx +++ b/src/pages/Dashboard/DashboardContent.tsx @@ -1,4 +1,5 @@ -import { Stack, YStack } from 'tamagui' +import { Stack, YStack, XStack } from 'tamagui' + import BasicInfoCards from './BasicInfoCards/BasicInfoCards' import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer' import BalanceChartCard from './BalanceChartCard/BalanceChartCard' @@ -6,15 +7,16 @@ import CPUCard from './CPULoad/CPUCard' import ConsensusUptimeCard from './ConsensusUptime/ConsensusUptimeCard' import ExecutionUptime from './ExecutionUptime/ExecutionUptime' import DeviceUptime from './DeviceUptime/DeviceUptime' -import TitleLogo from './TitleLogo' +import TitleLogo from '../../components/General/TitleLogo' import StorageCard from './StorageCard/StorageCard' import NetworkCard from './NetworkCard/NetworkCard' import SyncStatusCard from './SyncStatusCards/SyncStatusCards' import MemoryCard from './MemoryCard/MemoryCard' -import { XStack } from 'tamagui' + type DashboardContentProps = { windowWidth: number } + const DashboardContent = ({ windowWidth }: DashboardContentProps) => { return ( { }} className={'transparent-scrollbar'} > - + { }} > + + Validators + ) } From 7123cb8474ce6208549ce86a5dcf3a94ebdf41e3 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 6 Nov 2023 21:12:32 +0200 Subject: [PATCH 025/123] feat: add title --- src/pages/ValidatorManagement/ValidatorManagementContent.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index be3156e8..11338806 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -2,6 +2,7 @@ import { Text } from '@status-im/components' import { YStack } from 'tamagui' import ManagementTable from './ManagementTable/ManagementTable' +import TitleLogo from '../../components/General/TitleLogo' const ValidatorManagementContent = () => { return ( @@ -16,6 +17,7 @@ const ValidatorManagementContent = () => { overflowY: 'auto', }} > + Validators From 0fb29de8f2bc952bb04cfc7a3c657b602a300b2f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 6 Nov 2023 21:13:52 +0200 Subject: [PATCH 026/123] feat: add other custom data for validators --- .../ManagementTable/ManagementTable.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 4ce4a047..d1a88683 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -5,6 +5,8 @@ import './ManagementTable.css' const validators = [ { + number: 1, + address: 'zQ3asdf9d4Gs0', balance: 100, income: 100, proposals: 100, @@ -15,6 +17,8 @@ const validators = [ status: 'Active', }, { + number: 1, + address: 'zQ3asdf9d4Gs0', balance: 100, income: 100, proposals: 100, @@ -25,6 +29,8 @@ const validators = [ status: 'Active', }, { + number: 1, + address: 'zQ3asdf9d4Gs0', balance: 100, income: 100, proposals: 100, @@ -35,6 +41,8 @@ const validators = [ status: 'Active', }, { + number: 1, + address: 'zQ3asdf9d4Gs0', balance: 100, income: 100, proposals: 100, From 697ed65e590f83da28bef6d52fe803303f53d702 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 6 Nov 2023 21:14:21 +0200 Subject: [PATCH 027/123] feat: use new validator profile component --- .../ManagementTable/ManagementTable.tsx | 5 ++++- .../ValidatorRequest/ValidatorRequest.tsx | 22 +++---------------- 2 files changed, 7 insertions(+), 20 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index d1a88683..1cb81878 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,6 +1,7 @@ import { Checkbox, Text } from '@status-im/components' import { OptionsIcon } from '@status-im/icons' +import ValidatorProfile from '../../../components/General/ValidatorProfile' import './ManagementTable.css' const validators = [ @@ -116,7 +117,9 @@ const ManagementTable = () => { + + {validator.balance} diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx index a5eb6d4e..757907c3 100644 --- a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx +++ b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx @@ -1,8 +1,8 @@ -import { Avatar, DividerLine, Text } from '@status-im/components' +import { DividerLine, Text } from '@status-im/components' import { XStack, YStack } from 'tamagui' -import { getFormattedValidatorAddress } from '../../../../utilities' import TransactionStatus from './TransactionStatus' +import ValidatorProfile from '../../../../components/General/ValidatorProfile' type ValidatorRequestProps = { number: number @@ -17,23 +17,7 @@ const ValidatorRequest = ({ number, isTransactionConfirmation }: ValidatorReques - - - - - Validator {number} - - - {getFormattedValidatorAddress('zQ3asdf9d4Gs0')} - - - + Keys Generated From c641ac5e24aa758af48383048c126386ac7dc096 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 6 Nov 2023 21:15:16 +0200 Subject: [PATCH 028/123] feat: create story for validator profile --- .../General/ValidatorProfile.stories.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/General/ValidatorProfile.stories.tsx diff --git a/src/components/General/ValidatorProfile.stories.tsx b/src/components/General/ValidatorProfile.stories.tsx new file mode 100644 index 00000000..04f5be39 --- /dev/null +++ b/src/components/General/ValidatorProfile.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ValidatorProfile from './ValidatorProfile' + +const meta = { + title: 'General/ValidatorProfile', + component: ValidatorProfile, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + number: 1, + address: 'zQ3asdf9d4Gs0', + }, +} From bf12cc552fec9d22b18d652b7f6d01f07e307ca8 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 00:05:40 +0200 Subject: [PATCH 029/123] feat: create management tabs --- .../ValidatorManagement/ManagementTabs.tsx | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTabs.tsx diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx new file mode 100644 index 00000000..5aeb2177 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -0,0 +1,38 @@ +import { useMemo } from 'react' +import { Tabs } from '@status-im/components' +import { Stack } from 'tamagui' + +import ManagementTable from './ManagementTable/ManagementTable' + +const ManagementTabs = () => { + const VALIDATOR_TABS = useMemo( + () => [ + { + label: 'Active', + value: 'active', + }, + ], + [], + ) + + return ( + + + + {VALIDATOR_TABS.map(tab => ( + + {tab.label} + + ))} + + + {VALIDATOR_TABS.map(tab => ( + + + + ))} + + ) +} + +export default ManagementTabs From 168ffa0e934a320d8f265991673a635da808128b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 00:06:02 +0200 Subject: [PATCH 030/123] feat: add tabs data --- .../ValidatorManagement/ManagementTabs.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index 5aeb2177..02ceb27d 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -11,6 +11,26 @@ const ManagementTabs = () => { label: 'Active', value: 'active', }, + { + label: 'Pending', + value: 'pending', + }, + { + label: 'Inactive', + value: 'inactive', + }, + { + label: 'Exited', + value: 'exited', + }, + { + label: 'Withdraw', + value: 'withdraw', + }, + { + label: 'All', + value: 'all', + }, ], [], ) From 320001e070aba636b20f153e5d3d7a8162d9196f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 00:06:32 +0200 Subject: [PATCH 031/123] feat: use new management tabs component --- src/pages/ValidatorManagement/ValidatorManagementContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index 11338806..09bfde61 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -1,8 +1,8 @@ import { Text } from '@status-im/components' import { YStack } from 'tamagui' -import ManagementTable from './ManagementTable/ManagementTable' import TitleLogo from '../../components/General/TitleLogo' +import ManagementTabs from './ManagementTabs' const ValidatorManagementContent = () => { return ( @@ -18,9 +18,9 @@ const ValidatorManagementContent = () => { }} > - Validators + ) From 7c7582c27146fa99fd1bb613a76b54d92b33196f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 00:06:48 +0200 Subject: [PATCH 032/123] feat: create management tabs story --- .../ManagementTabs.stories.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTabs.stories.ts diff --git a/src/pages/ValidatorManagement/ManagementTabs.stories.ts b/src/pages/ValidatorManagement/ManagementTabs.stories.ts new file mode 100644 index 00000000..2028fc1d --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTabs.stories.ts @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ManagementTabs from './ManagementTabs' + +const meta = { + title: 'ValidatorManagement/ManagementTabs', + component: ManagementTabs, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From eae4fd65ac270fa0bdefcdd2affe4c62e23c472a Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 22:06:32 +0200 Subject: [PATCH 033/123] feat: add AddCardsContainer to val management --- src/pages/ValidatorManagement/ValidatorManagementContent.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index 09bfde61..d0448843 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -3,6 +3,7 @@ import { YStack } from 'tamagui' import TitleLogo from '../../components/General/TitleLogo' import ManagementTabs from './ManagementTabs' +import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer' const ValidatorManagementContent = () => { return ( @@ -18,6 +19,7 @@ const ValidatorManagementContent = () => { }} > + Validators From cb34ce4bb6a5ac678eff5b2c07ed1a5183ac3522 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 22:08:06 +0200 Subject: [PATCH 034/123] feat: add margin to tabs --- src/pages/ValidatorManagement/ManagementTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index 02ceb27d..d5341d1f 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -37,7 +37,7 @@ const ManagementTabs = () => { return ( - + {VALIDATOR_TABS.map(tab => ( From d9ce02ee18de3673b8d9c122634426048ef52296 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 22:21:37 +0200 Subject: [PATCH 035/123] feat: create component for search validators --- .../ManagementTable/SearchManagement.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx b/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx new file mode 100644 index 00000000..869b97bf --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx @@ -0,0 +1,22 @@ +import { Input } from '@status-im/components' +import { SearchIcon } from '@status-im/icons' + +type SearchManagementProps = { + searchValue: string + changeSearchValue: (value: string) => void +} + +const SearchManagement = ({ searchValue, changeSearchValue }: SearchManagementProps) => { + return ( + } + onClear={() => changeSearchValue('')} + size={40} + /> + ) +} + +export default SearchManagement From ea1a8952e6c4c6d47e16fe4859c6429668e4d842 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 22:22:06 +0200 Subject: [PATCH 036/123] feat: add search state, handler and use component --- .../ManagementTable/ManagementTable.tsx | 208 +++++++++--------- 1 file changed, 110 insertions(+), 98 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 1cb81878..8d44d718 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,7 +1,10 @@ import { Checkbox, Text } from '@status-im/components' import { OptionsIcon } from '@status-im/icons' +import { useState } from 'react' +import { YStack } from 'tamagui' import ValidatorProfile from '../../../components/General/ValidatorProfile' +import SearchManagement from './SearchManagement' import './ManagementTable.css' const validators = [ @@ -56,117 +59,126 @@ const validators = [ ] const ManagementTable = () => { + const [searchValue, setSearchValue] = useState('') + + const changeSearchValue = (value: string) => { + setSearchValue(value) + } + return ( - - - - - - - - - - - - - - - - - - {validators.map((validator, index) => ( - - - - - - + {validators.map((validator, index) => ( + + + + + + + + + + + + + + ))} + +
- - - - {validators.length} Validators - - - - Balance - - - - Income - - - - Proposals - - - - Attestations - - - - Effectiveness - - - - Deposits - - - - Rank - - - - Status - -
- - - - - - {validator.balance} - - - - {validator.income} - - + + + + + + + + + + + + - ))} - -
+ + - {validator.proposals} + {validators.length} Validators - - + + - {validator.attestations} + Balance - - + + - {validator.effectiveness} + Income - - + + - {validator.deposits} + Proposals - - + + - {validator.rank} + Attestations - - - - {validator.status} + + + + Effectiveness - - - - + + Deposits + + + + Rank + + + + Status + +
+ +
+ + + + + + {validator.balance} + + + + {validator.income} + + + + {validator.proposals} + + + + {validator.attestations} + + + + {validator.effectiveness} + + + + {validator.deposits} + + + + {validator.rank} + + + + {validator.status} + + + +
+ ) } From 7cfaa72955e0007e31a523d2de50ff11c7cf405a Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 22:29:48 +0200 Subject: [PATCH 037/123] feat: create story for search component --- .../SearchManagement.stories.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTable/SearchManagement.stories.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/SearchManagement.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/SearchManagement.stories.tsx new file mode 100644 index 00000000..73e4c66a --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/SearchManagement.stories.tsx @@ -0,0 +1,26 @@ +import { useState } from 'react' +import type { Meta, StoryObj } from '@storybook/react' + +import SearchManagement from './SearchManagement' + +const meta = { + title: 'ValidatorManagement/SearchManagement', + component: SearchManagement, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = (args: { searchValue: string }) => { + const [searchValue, setSearchValue] = useState(args.searchValue) + + return +} + +Default.args = { + searchValue: '', +} From 6377fd5fc4ba35187bfbe31f07cfceae3cb3f62b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 22:38:48 +0200 Subject: [PATCH 038/123] feat: add icon for filter next to search --- .../ManagementTable/ManagementTable.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 8d44d718..e24c5d62 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,7 +1,7 @@ import { Checkbox, Text } from '@status-im/components' -import { OptionsIcon } from '@status-im/icons' +import { OptionsIcon, SortIcon } from '@status-im/icons' import { useState } from 'react' -import { YStack } from 'tamagui' +import { YStack, XStack } from 'tamagui' import ValidatorProfile from '../../../components/General/ValidatorProfile' import SearchManagement from './SearchManagement' @@ -67,7 +67,10 @@ const ManagementTable = () => { return ( - + + + + From ee6448a47d895c7433916b959d64132c8788878c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 8 Nov 2023 23:01:53 +0200 Subject: [PATCH 039/123] feat: style filter icon --- .../ManagementTable/ManagementTable.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index e24c5d62..6063cd26 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -69,7 +69,16 @@ const ManagementTable = () => { - +
From cdbea5fdbb7fc1d1eed8c7666ad08402fbbc3777 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 9 Nov 2023 21:09:01 +0200 Subject: [PATCH 040/123] feat: add style for scroller --- src/pages/ValidatorManagement/ValidatorManagementContent.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index d0448843..cccce408 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -17,6 +17,7 @@ const ValidatorManagementContent = () => { flexGrow: '1', overflowY: 'auto', }} + className="transparent-scrollbar" > From 2d29383c7c3f5e8b30134b37512c612804bb18bf Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 9 Nov 2023 21:13:46 +0200 Subject: [PATCH 041/123] feat: create header component --- src/pages/ValidatorManagement/ManagementHeader.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementHeader.tsx diff --git a/src/pages/ValidatorManagement/ManagementHeader.tsx b/src/pages/ValidatorManagement/ManagementHeader.tsx new file mode 100644 index 00000000..cc4946f8 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementHeader.tsx @@ -0,0 +1,13 @@ +import { XStack } from 'tamagui' + +import TitleLogo from '../../components/General/TitleLogo' + +const ManagementHeader = () => { + return ( + + + + ) +} + +export default ManagementHeader From 88d44da1ea0bcbf6aa368d87d450fcb93648266e Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 9 Nov 2023 21:24:12 +0200 Subject: [PATCH 042/123] feat: create story for header --- .../ManagementHeader.stories.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementHeader.stories.ts diff --git a/src/pages/ValidatorManagement/ManagementHeader.stories.ts b/src/pages/ValidatorManagement/ManagementHeader.stories.ts new file mode 100644 index 00000000..5a5c4765 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementHeader.stories.ts @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ManagementHeader from './ManagementHeader' + +const meta = { + title: 'ValidatorManagement/ManagementHeader', + component: ManagementHeader, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 7d8f841baae1b24b34fbec6b50f296a7a926e919 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 9 Nov 2023 21:24:27 +0200 Subject: [PATCH 043/123] feat: use new header --- src/pages/ValidatorManagement/ValidatorManagementContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index cccce408..8b97b1b0 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -1,9 +1,9 @@ import { Text } from '@status-im/components' import { YStack } from 'tamagui' -import TitleLogo from '../../components/General/TitleLogo' import ManagementTabs from './ManagementTabs' import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer' +import ManagementHeader from './ManagementHeader' const ValidatorManagementContent = () => { return ( @@ -19,7 +19,7 @@ const ValidatorManagementContent = () => { }} className="transparent-scrollbar" > - + Validators From fa87e6f5ca238572b997e622969ca03ed87ebfe4 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 9 Nov 2023 21:46:40 +0200 Subject: [PATCH 044/123] feat: move and rename sync card component and story --- .../General/SyncStatusCard.stories.ts} | 8 ++++---- .../General/SyncStatusCard.tsx} | 12 ++++++------ .../KeyGenerationHeader/KeyGenerationHeader.tsx | 6 +++--- 3 files changed, 13 insertions(+), 13 deletions(-) rename src/{pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.stories.ts => components/General/SyncStatusCard.stories.ts} (86%) rename src/{pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.tsx => components/General/SyncStatusCard.tsx} (77%) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.stories.ts b/src/components/General/SyncStatusCard.stories.ts similarity index 86% rename from src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.stories.ts rename to src/components/General/SyncStatusCard.stories.ts index 7f06c630..5fb5bf2e 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.stories.ts +++ b/src/components/General/SyncStatusCard.stories.ts @@ -1,15 +1,15 @@ import type { Meta, StoryObj } from '@storybook/react' -import KeyGenerationSyncCard from './KeyGenerationSyncCard' +import SyncStatusCard from './SyncStatusCard' const meta = { - title: 'ValidatorOnboarding/KeyGenerationSyncCard', - component: KeyGenerationSyncCard, + title: 'General/SyncStatusCard', + component: SyncStatusCard, parameters: { layout: 'centered', }, tags: ['autodocs'], -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.tsx b/src/components/General/SyncStatusCard.tsx similarity index 77% rename from src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.tsx rename to src/components/General/SyncStatusCard.tsx index 0fade5dd..b87da768 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.tsx +++ b/src/components/General/SyncStatusCard.tsx @@ -2,18 +2,18 @@ import { Stack, XStack, YStack } from 'tamagui' import { InfoBadgeIcon } from '@status-im/icons' import { Text } from '@status-im/components' -import StandardGauge from '../../../../components/Charts/StandardGauge' -import BorderBox from '../../../../components/General/BorderBox' -import { formatNumbersWithComa } from '../../../../utilities' +import StandardGauge from '../Charts/StandardGauge' +import BorderBox from './BorderBox' +import { formatNumbersWithComa } from '../../utilities' -type KeyGenerationSyncCardProps = { +type SyncStatusCardProps = { synced: number total: number title: string color: string } -const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyncCardProps) => { +const SyncStatusCard = ({ synced, total, title, color }: SyncStatusCardProps) => { return ( @@ -54,4 +54,4 @@ const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyn ) } -export default KeyGenerationSyncCard +export default SyncStatusCard diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationHeader.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationHeader.tsx index 9d10ad84..86d73792 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationHeader.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationHeader.tsx @@ -1,6 +1,6 @@ import { XStack } from 'tamagui' -import KeyGenerationSyncCard from './KeyGenerationSyncCard' +import SyncStatusCard from '../../../../components/General/SyncStatusCard' import KeyGenerationTitle from '../KeyGenerationTitle' const KeyGenerationHeader = () => { @@ -8,13 +8,13 @@ const KeyGenerationHeader = () => { - - Date: Thu, 9 Nov 2023 21:53:14 +0200 Subject: [PATCH 045/123] feat: add sync cards to header --- .../ValidatorManagement/ManagementHeader.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementHeader.tsx b/src/pages/ValidatorManagement/ManagementHeader.tsx index cc4946f8..357f70d5 100644 --- a/src/pages/ValidatorManagement/ManagementHeader.tsx +++ b/src/pages/ValidatorManagement/ManagementHeader.tsx @@ -1,11 +1,26 @@ import { XStack } from 'tamagui' import TitleLogo from '../../components/General/TitleLogo' +import SyncStatusCard from '../../components/General/SyncStatusCard' const ManagementHeader = () => { return ( - + + + + + ) } From 398dcb99a7f98c8edd1c8477653e0c91229a7ad6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 10 Nov 2023 00:14:55 +0200 Subject: [PATCH 046/123] feat: add margin top to header --- src/pages/ValidatorManagement/ManagementHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementHeader.tsx b/src/pages/ValidatorManagement/ManagementHeader.tsx index 357f70d5..a35849a1 100644 --- a/src/pages/ValidatorManagement/ManagementHeader.tsx +++ b/src/pages/ValidatorManagement/ManagementHeader.tsx @@ -5,7 +5,7 @@ import SyncStatusCard from '../../components/General/SyncStatusCard' const ManagementHeader = () => { return ( - + Date: Fri, 10 Nov 2023 00:25:01 +0200 Subject: [PATCH 047/123] fix: flow formatting test --- src/pages/ValidatorManagement/ManagementHeader.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementHeader.tsx b/src/pages/ValidatorManagement/ManagementHeader.tsx index a35849a1..c6550e44 100644 --- a/src/pages/ValidatorManagement/ManagementHeader.tsx +++ b/src/pages/ValidatorManagement/ManagementHeader.tsx @@ -5,7 +5,14 @@ import SyncStatusCard from '../../components/General/SyncStatusCard' const ManagementHeader = () => { return ( - + Date: Fri, 10 Nov 2023 00:46:34 +0200 Subject: [PATCH 048/123] fix: dashboard sync cards --- src/pages/Dashboard/DashboardContent.tsx | 4 ++-- src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx index 3d508cfd..ecfb4717 100644 --- a/src/pages/Dashboard/DashboardContent.tsx +++ b/src/pages/Dashboard/DashboardContent.tsx @@ -10,7 +10,7 @@ import DeviceUptime from './DeviceUptime/DeviceUptime' import TitleLogo from '../../components/General/TitleLogo' import StorageCard from './StorageCard/StorageCard' import NetworkCard from './NetworkCard/NetworkCard' -import SyncStatusCard from './SyncStatusCards/SyncStatusCards' +import SyncStatusCards from './SyncStatusCards/SyncStatusCards' import MemoryCard from './MemoryCard/MemoryCard' type DashboardContentProps = { @@ -41,7 +41,7 @@ const DashboardContent = ({ windowWidth }: DashboardContentProps) => { gridAutoFlow: 'row', }} > - + {windowWidth < 1375 ? ( diff --git a/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx b/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx index 3c9743c8..2dfa2c1f 100644 --- a/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx +++ b/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx @@ -5,7 +5,7 @@ import DashboardCardWrapper from '../DashboardCardWrapper' import ExecutionClientCard from './ExecutionClientCard' import ConsensusCard from './ConsensusClientCard' -const SyncStatusCard = () => { +const SyncStatusCards = () => { return ( @@ -24,4 +24,4 @@ const SyncStatusCard = () => { ) } -export default SyncStatusCard +export default SyncStatusCards From 28b5265193f8f27e00ae5615ac5628ccc89c7d46 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 10 Nov 2023 21:56:25 +0200 Subject: [PATCH 049/123] feat: add custom blue dot to filter icon --- .../ManagementTable/ManagementTable.tsx | 34 +++++++++++++------ 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 6063cd26..d0c4b8cb 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,7 +1,7 @@ import { Checkbox, Text } from '@status-im/components' import { OptionsIcon, SortIcon } from '@status-im/icons' import { useState } from 'react' -import { YStack, XStack } from 'tamagui' +import { YStack, XStack, Stack } from 'tamagui' import ValidatorProfile from '../../../components/General/ValidatorProfile' import SearchManagement from './SearchManagement' @@ -69,16 +69,28 @@ const ManagementTable = () => { - + + + +
From 584fd9679f65692fdb9860ed9275bef5c899d912 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 10 Nov 2023 22:04:28 +0200 Subject: [PATCH 050/123] fix: management table formatting --- .../ManagementTable/ManagementTable.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index d0c4b8cb..8613159e 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -80,16 +80,18 @@ const ManagementTable = () => { cursor: 'pointer', }} /> - +
From ec69bd6594f09de06e0839d9e6ef7af6e7afa804 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 10 Nov 2023 22:19:44 +0200 Subject: [PATCH 051/123] fix: search and filter structure --- .../ManagementTable/ManagementTable.tsx | 6 +++--- .../ManagementTable/SearchManagement.tsx | 18 ++++++++++-------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 8613159e..83d15f74 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -67,16 +67,16 @@ const ManagementTable = () => { return ( - + - + diff --git a/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx b/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx index 869b97bf..30c92906 100644 --- a/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx @@ -8,14 +8,16 @@ type SearchManagementProps = { const SearchManagement = ({ searchValue, changeSearchValue }: SearchManagementProps) => { return ( - } - onClear={() => changeSearchValue('')} - size={40} - /> +
+ } + onClear={() => changeSearchValue('')} + size={40} + /> +
) } From c376daa93225ff07d9f7f4fd8a8eb6a646c74919 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Sat, 11 Nov 2023 21:59:32 +0200 Subject: [PATCH 052/123] fix: search formatting --- .../ValidatorManagement/ManagementTable/SearchManagement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx b/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx index 30c92906..f651175a 100644 --- a/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/SearchManagement.tsx @@ -8,7 +8,7 @@ type SearchManagementProps = { const SearchManagement = ({ searchValue, changeSearchValue }: SearchManagementProps) => { return ( -
+
Date: Sat, 11 Nov 2023 23:07:39 +0200 Subject: [PATCH 053/123] feat: add dropdown menu for filter --- .../ManagementTable/ManagementTable.tsx | 56 ++++++++++--------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 83d15f74..bdedf756 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,4 +1,4 @@ -import { Checkbox, Text } from '@status-im/components' +import { Checkbox, DropdownMenu, Text } from '@status-im/components' import { OptionsIcon, SortIcon } from '@status-im/icons' import { useState } from 'react' import { YStack, XStack, Stack } from 'tamagui' @@ -69,30 +69,36 @@ const ManagementTable = () => { - - - - + + + + + + + {}} /> + {}} /> + +
From 5b7c6702c165992e65f4d815bfa550963707a07c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 13 Nov 2023 20:57:02 +0200 Subject: [PATCH 054/123] feat: create base of management card --- src/pages/ValidatorManagement/ManagementCard.tsx | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementCard.tsx diff --git a/src/pages/ValidatorManagement/ManagementCard.tsx b/src/pages/ValidatorManagement/ManagementCard.tsx new file mode 100644 index 00000000..4f1d63fd --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementCard.tsx @@ -0,0 +1,7 @@ +import { XStack } from 'tamagui' + +const ManagementCard = () => { + return +} + +export default ManagementCard From d6f39d649d22e849f16e85dc0f5594ecd175f214 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 13 Nov 2023 20:59:30 +0200 Subject: [PATCH 055/123] fix: stories examples names --- src/pages/ValidatorManagement/ManagementHeader.stories.ts | 2 +- .../ManagementTable/ManagementTable.stories.ts | 2 +- src/pages/ValidatorManagement/ManagementTabs.stories.ts | 2 +- .../ValidatorManagement/ValidatorManagementContent.stories.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementHeader.stories.ts b/src/pages/ValidatorManagement/ManagementHeader.stories.ts index 5a5c4765..ede987a7 100644 --- a/src/pages/ValidatorManagement/ManagementHeader.stories.ts +++ b/src/pages/ValidatorManagement/ManagementHeader.stories.ts @@ -14,6 +14,6 @@ const meta = { export default meta type Story = StoryObj -export const Page: Story = { +export const Default: Story = { args: {}, } diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts index 81fa2024..3b8c9aa6 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts @@ -14,6 +14,6 @@ const meta = { export default meta type Story = StoryObj -export const Page: Story = { +export const Default: Story = { args: {}, } diff --git a/src/pages/ValidatorManagement/ManagementTabs.stories.ts b/src/pages/ValidatorManagement/ManagementTabs.stories.ts index 2028fc1d..899e1ec7 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.stories.ts +++ b/src/pages/ValidatorManagement/ManagementTabs.stories.ts @@ -14,6 +14,6 @@ const meta = { export default meta type Story = StoryObj -export const Page: Story = { +export const Default: Story = { args: {}, } diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.stories.ts b/src/pages/ValidatorManagement/ValidatorManagementContent.stories.ts index b81bbd36..45f84738 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.stories.ts +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.stories.ts @@ -14,6 +14,6 @@ const meta = { export default meta type Story = StoryObj -export const Page: Story = { +export const Default: Story = { args: {}, } From 05843b5a682f9d40d5847b6c3b4d58c13ac43f91 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 13 Nov 2023 20:59:41 +0200 Subject: [PATCH 056/123] feat: create story for management card --- .../ManagementCard.stories.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementCard.stories.ts diff --git a/src/pages/ValidatorManagement/ManagementCard.stories.ts b/src/pages/ValidatorManagement/ManagementCard.stories.ts new file mode 100644 index 00000000..1fd17c36 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementCard.stories.ts @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ManagementCard from './ManagementCard' + +const meta = { + title: 'ValidatorManagement/ManagementCard', + component: ManagementCard, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: {}, +} From d4503920ea5f4c5eca03161ee72b2f3c04dfb8a3 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 13 Nov 2023 23:29:12 +0200 Subject: [PATCH 057/123] feat: use new management cards --- .../ValidatorManagement/ValidatorManagementContent.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index 8b97b1b0..e7343a76 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -1,9 +1,10 @@ import { Text } from '@status-im/components' -import { YStack } from 'tamagui' +import { XStack, YStack } from 'tamagui' import ManagementTabs from './ManagementTabs' import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer' import ManagementHeader from './ManagementHeader' +import ManagementCard from './ManagementCard' const ValidatorManagementContent = () => { return ( @@ -20,7 +21,11 @@ const ValidatorManagementContent = () => { className="transparent-scrollbar" > - + + + + + Validators From a1210e2832c56d48da6644591e8c2dc0ca7552ed Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:02:04 +0200 Subject: [PATCH 058/123] feat: create management card structure and style --- .../ValidatorManagement/ManagementCard.tsx | 28 +++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementCard.tsx b/src/pages/ValidatorManagement/ManagementCard.tsx index 4f1d63fd..c105b027 100644 --- a/src/pages/ValidatorManagement/ManagementCard.tsx +++ b/src/pages/ValidatorManagement/ManagementCard.tsx @@ -1,7 +1,31 @@ -import { XStack } from 'tamagui' +import { Text } from '@status-im/components' +import { Separator, Stack, YStack } from 'tamagui' const ManagementCard = () => { - return + return ( + + + + Validators + + + + + + Total Balance + + + + + + Total Income + + + + ) } export default ManagementCard From 69df48222e199dbd4aa1c7f3ae593905f40318cf Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:12:59 +0200 Subject: [PATCH 059/123] feat: add amount of cards for add cards container --- .../General/AddCards/AddCardsContainer.tsx | 13 +++++++++---- src/pages/Dashboard/DashboardContent.tsx | 2 +- .../ValidatorManagementContent.tsx | 2 +- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/General/AddCards/AddCardsContainer.tsx b/src/components/General/AddCards/AddCardsContainer.tsx index 136a2468..2518eda9 100644 --- a/src/components/General/AddCards/AddCardsContainer.tsx +++ b/src/components/General/AddCards/AddCardsContainer.tsx @@ -4,14 +4,19 @@ import AddCard from './AddCard' import DashboardCardWrapper from '../../../pages/Dashboard/DashboardCardWrapper' import { getHeightPercentages } from '../../../utilities' -const AddCardsContainer = () => { - const cards = 2 +type AddCardsContainerProps = { + cardsAmount: number +} +const AddCardsContainer = ({ cardsAmount }: AddCardsContainerProps) => { return ( - {Array.from({ length: cards }).map((_, index) => ( - + {Array.from({ length: cardsAmount }).map((_, index) => ( + ))} diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx index ecfb4717..a6fb228b 100644 --- a/src/pages/Dashboard/DashboardContent.tsx +++ b/src/pages/Dashboard/DashboardContent.tsx @@ -42,7 +42,7 @@ const DashboardContent = ({ windowWidth }: DashboardContentProps) => { }} > - + {windowWidth < 1375 ? ( diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index e7343a76..36faeb7a 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -24,7 +24,7 @@ const ValidatorManagementContent = () => { - + Validators From 9daa0ec2b677a7d89bd5ff45096f6f3f3465f1a4 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:35:20 +0200 Subject: [PATCH 060/123] fix: change validator tabs structure --- .../ValidatorManagement/ManagementTabs.tsx | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index d5341d1f..a5b0b06a 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -8,28 +8,22 @@ const ManagementTabs = () => { const VALIDATOR_TABS = useMemo( () => [ { - label: 'Active', - value: 'active', + value: 'Active', }, { - label: 'Pending', - value: 'pending', + value: 'Pending', }, { - label: 'Inactive', - value: 'inactive', + value: 'Inactive', }, { - label: 'Exited', - value: 'exited', + value: 'Exited', }, { - label: 'Withdraw', - value: 'withdraw', + value: 'Withdraw', }, { - label: 'All', - value: 'all', + value: 'All', }, ], [], @@ -41,7 +35,7 @@ const ManagementTabs = () => { {VALIDATOR_TABS.map(tab => ( - {tab.label} + {tab.value} ))} From 1d242c6e863d27a05cbbcbe4d500e81676a9edf5 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:35:41 +0200 Subject: [PATCH 061/123] feat: add filter by tabs for table --- .../ManagementTable/ManagementTable.tsx | 114 +++++++++--------- .../ValidatorManagement/ManagementTabs.tsx | 2 +- 2 files changed, 61 insertions(+), 55 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index bdedf756..24db502b 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -58,7 +58,11 @@ const validators = [ }, ] -const ManagementTable = () => { +type ManagementTableProps = { + tab: string +} + +const ManagementTable = ({ tab }: ManagementTableProps) => { const [searchValue, setSearchValue] = useState('') const changeSearchValue = (value: string) => { @@ -155,59 +159,61 @@ const ManagementTable = () => { - {validators.map((validator, index) => ( - - - - - - - - - - - - - - ))} + {validators + .filter(validator => validator.status === tab) + .map((validator, index) => ( + + + + + + + + + + + + + + ))}
- - - - - - {validator.balance} - - - - {validator.income} - - - - {validator.proposals} - - - - {validator.attestations} - - - - {validator.effectiveness} - - - - {validator.deposits} - - - - {validator.rank} - - - - {validator.status} - - - -
+ + + + + + {validator.balance} + + + + {validator.income} + + + + {validator.proposals} + + + + {validator.attestations} + + + + {validator.effectiveness} + + + + {validator.deposits} + + + + {validator.rank} + + + + {validator.status} + + + +
diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index a5b0b06a..98121189 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -42,7 +42,7 @@ const ManagementTabs = () => { {VALIDATOR_TABS.map(tab => ( - + ))} From 92e2818edcd215f1143d0cc2d7d294b3a6f83a9e Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:40:43 +0200 Subject: [PATCH 062/123] fix: get default tabs value from validators constant --- src/pages/ValidatorManagement/ManagementTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index 98121189..232c6ec8 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -30,7 +30,7 @@ const ManagementTabs = () => { ) return ( - + {VALIDATOR_TABS.map(tab => ( From 00b675865122856b6c1319d2d6b5875fe9f7d31b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:48:10 +0200 Subject: [PATCH 063/123] feat: add search filter for table --- .../ValidatorManagement/ManagementTable/ManagementTable.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 24db502b..f3fbb22d 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -161,6 +161,11 @@ const ManagementTable = ({ tab }: ManagementTableProps) => {
From 542b65699f9dd2a610d45db9c9e4f0e5f4d7d958 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:48:45 +0200 Subject: [PATCH 064/123] feat: add space between first management cards --- src/pages/ValidatorManagement/ValidatorManagementContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index 36faeb7a..7f9bca16 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -21,7 +21,7 @@ const ValidatorManagementContent = () => { className="transparent-scrollbar" > - + From b9ec9e40fc8d7e9307d776081970f207d15b60ca Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:53:13 +0200 Subject: [PATCH 065/123] fix: add cards container story title and examples --- .../General/AddCards/AddCardsContainer.stories.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/General/AddCards/AddCardsContainer.stories.ts b/src/components/General/AddCards/AddCardsContainer.stories.ts index 2132cef6..11444395 100644 --- a/src/components/General/AddCards/AddCardsContainer.stories.ts +++ b/src/components/General/AddCards/AddCardsContainer.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react' import AddCardsContainer from './AddCardsContainer' const meta = { - title: 'Dashboard/AddCardsContainer', + title: 'General/AddCardsContainer', component: AddCardsContainer, parameters: { layout: 'centered', @@ -15,5 +15,13 @@ export default meta type Story = StoryObj export const Default: Story = { - args: {}, + args: { + cardsAmount: 2, + }, +} + +export const WithoutCards: Story = { + args: { + cardsAmount: 0, + }, } From 02d622a0ecc985913e37026aa6938d6543683654 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:53:35 +0200 Subject: [PATCH 066/123] fix: management table story args --- .../ManagementTable/ManagementTable.stories.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts index 3b8c9aa6..84badf40 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts @@ -15,5 +15,7 @@ export default meta type Story = StoryObj export const Default: Story = { - args: {}, + args: { + tab: 'Active' + }, } From c669a542205441baf7e00406fa1dcbafa2284c4f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:56:41 +0200 Subject: [PATCH 067/123] feat: add validator tabs constant --- src/constants.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/constants.ts b/src/constants.ts index c41bc024..abf813f6 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -60,3 +60,6 @@ export const years = [ 'NOV', 'DEC', ] + +// Validator Management +export const VALIDATOR_TABS = ['Active', 'Pending', 'Inactive', 'Exited', 'Withdraw', 'All'] From a246d109e2a4a90563bf089af7a52de081d0ea08 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:57:01 +0200 Subject: [PATCH 068/123] fix: works with new constant structure --- .../ValidatorManagement/ManagementTabs.tsx | 36 ++++--------------- 1 file changed, 6 insertions(+), 30 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index 232c6ec8..43726681 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -1,48 +1,24 @@ -import { useMemo } from 'react' import { Tabs } from '@status-im/components' import { Stack } from 'tamagui' import ManagementTable from './ManagementTable/ManagementTable' +import { VALIDATOR_TABS } from '../../constants' const ManagementTabs = () => { - const VALIDATOR_TABS = useMemo( - () => [ - { - value: 'Active', - }, - { - value: 'Pending', - }, - { - value: 'Inactive', - }, - { - value: 'Exited', - }, - { - value: 'Withdraw', - }, - { - value: 'All', - }, - ], - [], - ) - return ( - + {VALIDATOR_TABS.map(tab => ( - - {tab.value} + + {tab} ))} {VALIDATOR_TABS.map(tab => ( - - + + ))} From 4f29df009ae489c6bf856f2674d13b3e03c07114 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 00:59:59 +0200 Subject: [PATCH 069/123] fix: replace default value for table story args --- .../ManagementTable/ManagementTable.stories.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts index 84badf40..d19ed5ea 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' import ManagementTable from './ManagementTable' +import { VALIDATOR_TABS } from '../../../constants' const meta = { title: 'ValidatorManagement/ManagementTable', @@ -16,6 +17,6 @@ type Story = StoryObj export const Default: Story = { args: { - tab: 'Active' + tab: VALIDATOR_TABS[0], }, } From f3b985713a0ca62a96cfa3755c081e6539233a4a Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 01:20:09 +0200 Subject: [PATCH 070/123] feat: made state for filtered validators --- .../ManagementTable/ManagementTable.tsx | 128 +++++++++--------- 1 file changed, 67 insertions(+), 61 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index f3fbb22d..7e2f018a 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,6 +1,6 @@ import { Checkbox, DropdownMenu, Text } from '@status-im/components' import { OptionsIcon, SortIcon } from '@status-im/icons' -import { useState } from 'react' +import { useEffect, useState } from 'react' import { YStack, XStack, Stack } from 'tamagui' import ValidatorProfile from '../../../components/General/ValidatorProfile' @@ -63,8 +63,21 @@ type ManagementTableProps = { } const ManagementTable = ({ tab }: ManagementTableProps) => { + const [currentValidators, setCurrentValidators] = useState(validators) const [searchValue, setSearchValue] = useState('') + useEffect(() => { + setCurrentValidators( + validators + .filter(validator => validator.status === tab) + .filter( + validator => + validator.number.toString().includes(searchValue) || + validator.address.includes(searchValue), + ), + ) + }, [tab, searchValue]) + const changeSearchValue = (value: string) => { setSearchValue(value) } @@ -159,66 +172,59 @@ const ManagementTable = ({ tab }: ManagementTableProps) => {
- - - - - - {validator.balance} - - - - {validator.income} - - - - {validator.proposals} - - - - {validator.attestations} - - - - {validator.effectiveness} - - - - {validator.deposits} - - - - {validator.rank} - - - - {validator.status} - - - -
+ + + + + + {validator.balance} + + + + {validator.income} + + + + {validator.proposals} + + + + {validator.attestations} + + + + {validator.effectiveness} + + + + {validator.deposits} + + + + {validator.rank} + + + + {validator.status} + + + +
From c47de2c6d129e9e325ac249d6fa854f93b1e2706 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 01:30:12 +0200 Subject: [PATCH 071/123] feat: more efficient filter with use memo --- .../ManagementTable/ManagementTable.tsx | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 7e2f018a..be0c9deb 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,6 +1,6 @@ import { Checkbox, DropdownMenu, Text } from '@status-im/components' import { OptionsIcon, SortIcon } from '@status-im/icons' -import { useEffect, useState } from 'react' +import { useMemo, useState } from 'react' import { YStack, XStack, Stack } from 'tamagui' import ValidatorProfile from '../../../components/General/ValidatorProfile' @@ -63,19 +63,16 @@ type ManagementTableProps = { } const ManagementTable = ({ tab }: ManagementTableProps) => { - const [currentValidators, setCurrentValidators] = useState(validators) const [searchValue, setSearchValue] = useState('') - useEffect(() => { - setCurrentValidators( - validators - .filter(validator => validator.status === tab) - .filter( - validator => - validator.number.toString().includes(searchValue) || - validator.address.includes(searchValue), - ), - ) + const filteredValidators = useMemo(() => { + return validators + .filter(validator => validator.status === tab) + .filter( + validator => + validator.number.toString().includes(searchValue) || + validator.address.includes(searchValue), + ) }, [tab, searchValue]) const changeSearchValue = (value: string) => { @@ -172,7 +169,7 @@ const ManagementTable = ({ tab }: ManagementTableProps) => { - {currentValidators.map((validator, index) => ( + {filteredValidators.map((validator, index) => ( From 63d31a85a01d5d973bb0488eae7dd06b4444364d Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 14 Nov 2023 01:32:08 +0200 Subject: [PATCH 072/123] feat: add table row for no validators --- .../ManagementTable/ManagementTable.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index be0c9deb..0baba891 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -222,6 +222,15 @@ const ManagementTable = ({ tab }: ManagementTableProps) => { ))} + {filteredValidators.length === 0 && ( + + + + No validators + + + + )} From 9246721b43f458df7002ca3d08b2fb1bf76798ef Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 15 Nov 2023 21:34:36 +0200 Subject: [PATCH 073/123] feat: add responsive percentages for management card --- src/pages/ValidatorManagement/ManagementCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementCard.tsx b/src/pages/ValidatorManagement/ManagementCard.tsx index c105b027..0a52d155 100644 --- a/src/pages/ValidatorManagement/ManagementCard.tsx +++ b/src/pages/ValidatorManagement/ManagementCard.tsx @@ -5,7 +5,7 @@ const ManagementCard = () => { return ( From 41a1d872c0ccc37a00dafd19f2b6b4ded524fd43 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 15 Nov 2023 21:38:06 +0200 Subject: [PATCH 074/123] fix: remove fixed width from management card --- src/pages/ValidatorManagement/ManagementCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementCard.tsx b/src/pages/ValidatorManagement/ManagementCard.tsx index 0a52d155..4dd6bbdf 100644 --- a/src/pages/ValidatorManagement/ManagementCard.tsx +++ b/src/pages/ValidatorManagement/ManagementCard.tsx @@ -5,7 +5,7 @@ const ManagementCard = () => { return ( From 4ddb17dbe9e14118b4c42161b774683d4795f497 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 15 Nov 2023 21:39:10 +0200 Subject: [PATCH 075/123] fix: validators amount on the table --- .../ValidatorManagement/ManagementTable/ManagementTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 0baba891..a7d9e850 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -122,7 +122,7 @@ const ManagementTable = ({ tab }: ManagementTableProps) => { - {validators.length} Validators + {filteredValidators.length} Validators From ab363ec22a3416e6740e850964812043374ad60a Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 15 Nov 2023 21:45:02 +0200 Subject: [PATCH 076/123] feat: filter by all status and make util func --- .../ManagementTable/ManagementTable.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index a7d9e850..b57a1b66 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -6,6 +6,7 @@ import { YStack, XStack, Stack } from 'tamagui' import ValidatorProfile from '../../../components/General/ValidatorProfile' import SearchManagement from './SearchManagement' import './ManagementTable.css' +import { VALIDATOR_TABS } from '../../../constants' const validators = [ { @@ -62,12 +63,19 @@ type ManagementTableProps = { tab: string } +const testValidatorStatus = (validatorStatus: string, tabStatus: string) => { + if (validatorStatus === tabStatus || tabStatus === VALIDATOR_TABS[VALIDATOR_TABS.length - 1]) { + return true + } + return false +} + const ManagementTable = ({ tab }: ManagementTableProps) => { const [searchValue, setSearchValue] = useState('') const filteredValidators = useMemo(() => { return validators - .filter(validator => validator.status === tab) + .filter(validator => testValidatorStatus(validator.status, tab)) .filter( validator => validator.number.toString().includes(searchValue) || From 66093a8f9ce70c6c560fcf7ab7a26a7113af4be1 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 15 Nov 2023 21:47:52 +0200 Subject: [PATCH 077/123] feat: separate func for number and address --- .../ManagementTable/ManagementTable.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index b57a1b66..aa02ecdf 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -70,17 +70,24 @@ const testValidatorStatus = (validatorStatus: string, tabStatus: string) => { return false } +const testNumberAndAddress = ( + validatorNumber: number, + validatorAddress: string, + searchValue: string, +) => { + if (validatorNumber.toString().includes(searchValue) || validatorAddress.includes(searchValue)) { + return true + } + return false +} + const ManagementTable = ({ tab }: ManagementTableProps) => { const [searchValue, setSearchValue] = useState('') const filteredValidators = useMemo(() => { return validators .filter(validator => testValidatorStatus(validator.status, tab)) - .filter( - validator => - validator.number.toString().includes(searchValue) || - validator.address.includes(searchValue), - ) + .filter(validator => testNumberAndAddress(validator.number, validator.address, searchValue)) }, [tab, searchValue]) const changeSearchValue = (value: string) => { From 5fb05ad24df56a3afd597a78520b6a3173735b32 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 15 Nov 2023 21:51:54 +0200 Subject: [PATCH 078/123] fix: util function names for filter --- .../ManagementTable/ManagementTable.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index aa02ecdf..dc399c50 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -63,14 +63,14 @@ type ManagementTableProps = { tab: string } -const testValidatorStatus = (validatorStatus: string, tabStatus: string) => { +const isValidStatus = (validatorStatus: string, tabStatus: string) => { if (validatorStatus === tabStatus || tabStatus === VALIDATOR_TABS[VALIDATOR_TABS.length - 1]) { return true } return false } -const testNumberAndAddress = ( +const isValidNumberOrAddress = ( validatorNumber: number, validatorAddress: string, searchValue: string, @@ -86,8 +86,8 @@ const ManagementTable = ({ tab }: ManagementTableProps) => { const filteredValidators = useMemo(() => { return validators - .filter(validator => testValidatorStatus(validator.status, tab)) - .filter(validator => testNumberAndAddress(validator.number, validator.address, searchValue)) + .filter(validator => isValidStatus(validator.status, tab)) + .filter(validator => isValidNumberOrAddress(validator.number, validator.address, searchValue)) }, [tab, searchValue]) const changeSearchValue = (value: string) => { From 3b2a8b575a07ceaaee9538618ff341801d126921 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 15 Nov 2023 22:41:09 +0200 Subject: [PATCH 079/123] feat: add state for validators --- .../ManagementTable/ManagementTable.tsx | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index dc399c50..e8f57212 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,14 +1,14 @@ import { Checkbox, DropdownMenu, Text } from '@status-im/components' import { OptionsIcon, SortIcon } from '@status-im/icons' -import { useMemo, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import { YStack, XStack, Stack } from 'tamagui' import ValidatorProfile from '../../../components/General/ValidatorProfile' import SearchManagement from './SearchManagement' -import './ManagementTable.css' import { VALIDATOR_TABS } from '../../../constants' +import './ManagementTable.css' -const validators = [ +const validatorsData = [ { number: 1, address: 'zQ3asdf9d4Gs0', @@ -63,6 +63,19 @@ type ManagementTableProps = { tab: string } +type Validator = { + number: number + address: string + balance: number + income: number + proposals: number + attestations: number + effectiveness: number + deposits: number + rank: number + status: string +} + const isValidStatus = (validatorStatus: string, tabStatus: string) => { if (validatorStatus === tabStatus || tabStatus === VALIDATOR_TABS[VALIDATOR_TABS.length - 1]) { return true @@ -82,13 +95,18 @@ const isValidNumberOrAddress = ( } const ManagementTable = ({ tab }: ManagementTableProps) => { + const [validators, setValidators] = useState([]) const [searchValue, setSearchValue] = useState('') + useEffect(() => { + setValidators(validatorsData) + }, []) + const filteredValidators = useMemo(() => { return validators .filter(validator => isValidStatus(validator.status, tab)) .filter(validator => isValidNumberOrAddress(validator.number, validator.address, searchValue)) - }, [tab, searchValue]) + }, [validators, tab, searchValue]) const changeSearchValue = (value: string) => { setSearchValue(value) From 1f66d5ab5edc60f63cdb42ed92d850ee59683cf9 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 15 Nov 2023 22:42:30 +0200 Subject: [PATCH 080/123] feat: move validators data to constants --- src/constants.ts | 52 +++++++++++++++++- .../ManagementTable/ManagementTable.tsx | 55 +------------------ 2 files changed, 53 insertions(+), 54 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index abf813f6..8a5e2d33 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -45,7 +45,6 @@ export const DEPOSIT_SUBTITLE = 'Connect you Wallet to stake required ETH for ne export const CLIENT_SETUP_SUBTITLE = 'How many Validators would you like to run?' // Dashboard - export const years = [ 'JAN', 'FEB', @@ -63,3 +62,54 @@ export const years = [ // Validator Management export const VALIDATOR_TABS = ['Active', 'Pending', 'Inactive', 'Exited', 'Withdraw', 'All'] + +export const VALIDATORS_DATA = [ + { + number: 1, + address: 'zQ3asdf9d4Gs0', + balance: 100, + income: 100, + proposals: 100, + attestations: 100, + effectiveness: 100, + deposits: 100, + rank: 100, + status: 'Active', + }, + { + number: 1, + address: 'zQ3asdf9d4Gs0', + balance: 100, + income: 100, + proposals: 100, + attestations: 100, + effectiveness: 100, + deposits: 100, + rank: 100, + status: 'Active', + }, + { + number: 1, + address: 'zQ3asdf9d4Gs0', + balance: 100, + income: 100, + proposals: 100, + attestations: 100, + effectiveness: 100, + deposits: 100, + rank: 100, + status: 'Active', + }, + { + number: 1, + address: 'zQ3asdf9d4Gs0', + balance: 100, + income: 100, + proposals: 100, + attestations: 100, + effectiveness: 100, + deposits: 100, + rank: 100, + status: 'Active', + }, +] diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index e8f57212..0a10502a 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -5,60 +5,9 @@ import { YStack, XStack, Stack } from 'tamagui' import ValidatorProfile from '../../../components/General/ValidatorProfile' import SearchManagement from './SearchManagement' -import { VALIDATOR_TABS } from '../../../constants' +import { VALIDATORS_DATA, VALIDATOR_TABS } from '../../../constants' import './ManagementTable.css' -const validatorsData = [ - { - number: 1, - address: 'zQ3asdf9d4Gs0', - balance: 100, - income: 100, - proposals: 100, - attestations: 100, - effectiveness: 100, - deposits: 100, - rank: 100, - status: 'Active', - }, - { - number: 1, - address: 'zQ3asdf9d4Gs0', - balance: 100, - income: 100, - proposals: 100, - attestations: 100, - effectiveness: 100, - deposits: 100, - rank: 100, - status: 'Active', - }, - { - number: 1, - address: 'zQ3asdf9d4Gs0', - balance: 100, - income: 100, - proposals: 100, - attestations: 100, - effectiveness: 100, - deposits: 100, - rank: 100, - status: 'Active', - }, - { - number: 1, - address: 'zQ3asdf9d4Gs0', - balance: 100, - income: 100, - proposals: 100, - attestations: 100, - effectiveness: 100, - deposits: 100, - rank: 100, - status: 'Active', - }, -] - type ManagementTableProps = { tab: string } @@ -99,7 +48,7 @@ const ManagementTable = ({ tab }: ManagementTableProps) => { const [searchValue, setSearchValue] = useState('') useEffect(() => { - setValidators(validatorsData) + setValidators(VALIDATORS_DATA) }, []) const filteredValidators = useMemo(() => { From 05060998c4e1cf19d4093271aab68074cc0494a1 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 15 Nov 2023 22:50:08 +0200 Subject: [PATCH 081/123] fix: change validators structure --- src/constants.ts | 48 ++++++++----------- .../ManagementTable/ManagementTable.tsx | 28 ++--------- 2 files changed, 23 insertions(+), 53 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index 8a5e2d33..b0aec30a 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -67,49 +67,41 @@ export const VALIDATORS_DATA = [ { number: 1, address: 'zQ3asdf9d4Gs0', - balance: 100, - income: 100, - proposals: 100, - attestations: 100, - effectiveness: 100, - deposits: 100, - rank: 100, + balance: 32.0786, + income: 0.0786, + proposals: '1/102', + attestations: '1/102', + effectiveness: 98, status: 'Active', }, { number: 1, address: 'zQ3asdf9d4Gs0', - balance: 100, - income: 100, - proposals: 100, - attestations: 100, - effectiveness: 100, - deposits: 100, - rank: 100, + balance: 32.0786, + income: 0.0786, + proposals: '1/102', + attestations: '1/102', + effectiveness: 98, status: 'Active', }, { number: 1, address: 'zQ3asdf9d4Gs0', - balance: 100, - income: 100, - proposals: 100, - attestations: 100, - effectiveness: 100, - deposits: 100, - rank: 100, + balance: 32.0786, + income: 0.0786, + proposals: '1/102', + attestations: '1/102', + effectiveness: 98, status: 'Active', }, { number: 1, address: 'zQ3asdf9d4Gs0', - balance: 100, - income: 100, - proposals: 100, - attestations: 100, - effectiveness: 100, - deposits: 100, - rank: 100, + balance: 32.0786, + income: 0.0786, + proposals: '1/102', + attestations: '1/102', + effectiveness: 98, status: 'Active', }, ] diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 0a10502a..107af58f 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -17,11 +17,9 @@ type Validator = { address: string balance: number income: number - proposals: number - attestations: number + proposals: string + attestations: string effectiveness: number - deposits: number - rank: number status: string } @@ -132,16 +130,6 @@ const ManagementTable = ({ tab }: ManagementTableProps) => { Effectiveness - - - Deposits - - - - - Rank - - Status @@ -181,17 +169,7 @@ const ManagementTable = ({ tab }: ManagementTableProps) => { - {validator.effectiveness} - - - - - {validator.deposits} - - - - - {validator.rank} + {validator.effectiveness}% From 4ff349bbf2cbcd8f28939235ceacb311e02b82da Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 15 Nov 2023 23:59:37 +0200 Subject: [PATCH 082/123] fix: remove component from Text --- src/pages/ValidatorManagement/ValidatorManagementContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index 7f9bca16..ee631e2a 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -28,8 +28,8 @@ const ValidatorManagementContent = () => { Validators - + ) } From 41c1079767fb8e65febb3b1102c0270d90d38350 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 16 Nov 2023 00:10:32 +0200 Subject: [PATCH 083/123] fix: add div parent to tabs for width --- .../ValidatorManagement/ManagementTabs.tsx | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index 43726681..32732603 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -6,22 +6,24 @@ import { VALIDATOR_TABS } from '../../constants' const ManagementTabs = () => { return ( - - - - {VALIDATOR_TABS.map(tab => ( - - {tab} - - ))} - - - {VALIDATOR_TABS.map(tab => ( - - - - ))} - +
+ + + + {VALIDATOR_TABS.map(tab => ( + + {tab} + + ))} + + + {VALIDATOR_TABS.map(tab => ( + + + + ))} + +
) } From 8a5afe16e4380750234e78dd00936f7a36844758 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 16 Nov 2023 00:26:40 +0200 Subject: [PATCH 084/123] feat: move search to save state between tabs --- .../ManagementTable/ManagementTable.tsx | 9 +++------ src/pages/ValidatorManagement/ManagementTabs.tsx | 13 ++++++++++++- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 107af58f..d096f42f 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -10,6 +10,8 @@ import './ManagementTable.css' type ManagementTableProps = { tab: string + searchValue: string + changeSearchValue: (value: string) => void } type Validator = { @@ -41,9 +43,8 @@ const isValidNumberOrAddress = ( return false } -const ManagementTable = ({ tab }: ManagementTableProps) => { +const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTableProps) => { const [validators, setValidators] = useState([]) - const [searchValue, setSearchValue] = useState('') useEffect(() => { setValidators(VALIDATORS_DATA) @@ -55,10 +56,6 @@ const ManagementTable = ({ tab }: ManagementTableProps) => { .filter(validator => isValidNumberOrAddress(validator.number, validator.address, searchValue)) }, [validators, tab, searchValue]) - const changeSearchValue = (value: string) => { - setSearchValue(value) - } - return ( diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index 32732603..3d93d0f3 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -1,10 +1,17 @@ import { Tabs } from '@status-im/components' import { Stack } from 'tamagui' +import { useState } from 'react' import ManagementTable from './ManagementTable/ManagementTable' import { VALIDATOR_TABS } from '../../constants' const ManagementTabs = () => { + const [searchValue, setSearchValue] = useState('') + + const changeSearchValue = (value: string) => { + setSearchValue(value) + } + return (
@@ -19,7 +26,11 @@ const ManagementTabs = () => { {VALIDATOR_TABS.map(tab => ( - + ))} From 6517d9db55bd93d01232ce0c64063014e39e5869 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 16 Nov 2023 00:32:18 +0200 Subject: [PATCH 085/123] fix: table story args --- .../ManagementTable/ManagementTable.stories.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts index d19ed5ea..a8b2a61a 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts @@ -18,5 +18,7 @@ type Story = StoryObj export const Default: Story = { args: { tab: VALIDATOR_TABS[0], + searchValue: '', + changeSearchValue: () => {}, }, } From e393e60154e6a1dd4c7e16c1f9db98f989951d88 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 16 Nov 2023 00:41:10 +0200 Subject: [PATCH 086/123] feat: add state to table story for dynamic --- .../ManagementTable.stories.ts | 24 ------------ .../ManagementTable.stories.tsx | 39 +++++++++++++++++++ 2 files changed, 39 insertions(+), 24 deletions(-) delete mode 100644 src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts create mode 100644 src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts deleted file mode 100644 index a8b2a61a..00000000 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' - -import ManagementTable from './ManagementTable' -import { VALIDATOR_TABS } from '../../../constants' - -const meta = { - title: 'ValidatorManagement/ManagementTable', - component: ManagementTable, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], -} satisfies Meta - -export default meta -type Story = StoryObj - -export const Default: Story = { - args: { - tab: VALIDATOR_TABS[0], - searchValue: '', - changeSearchValue: () => {}, - }, -} diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx new file mode 100644 index 00000000..e102fde5 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx @@ -0,0 +1,39 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ManagementTable from './ManagementTable' +import { VALIDATOR_TABS } from '../../../constants' +import { useState } from 'react' + +const meta = { + title: 'ValidatorManagement/ManagementTable', + component: ManagementTable, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = () => { + const [searchValue, setSearchValue] = useState('') + + const changeSearchValue = (os: string) => { + setSearchValue(os) + } + + return ( + + ) +} + +Default.args = { + tab: VALIDATOR_TABS[0], + searchValue: '', + changeSearchValue: () => {}, +} From aaefe1317acb73b83ecda51a977c4eed22044451 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 16 Nov 2023 21:57:34 +0200 Subject: [PATCH 087/123] feat: create and use media query for right sidebar --- src/index.css | 6 ++++++ src/pages/ValidatorManagement/ValidatorManagement.tsx | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index 8ad31b90..89573c45 100644 --- a/src/index.css +++ b/src/index.css @@ -130,3 +130,9 @@ ul li { background-color: #f9f9f9; } } + +@media (max-width: 900px) { + .right-sidebar-wrapper { + display: none; + } +} diff --git a/src/pages/ValidatorManagement/ValidatorManagement.tsx b/src/pages/ValidatorManagement/ValidatorManagement.tsx index 46474a20..c57a7140 100644 --- a/src/pages/ValidatorManagement/ValidatorManagement.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagement.tsx @@ -9,7 +9,9 @@ const ValidatorManagement = () => { - +
+ +
) } From 2e39776d0aa202b551717fdb402f30878315a878 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 16 Nov 2023 22:54:27 +0200 Subject: [PATCH 088/123] feat: make entire table responsive --- .../ValidatorManagement.tsx | 1 + .../validatorManagement.css | 63 +++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 src/pages/ValidatorManagement/validatorManagement.css diff --git a/src/pages/ValidatorManagement/ValidatorManagement.tsx b/src/pages/ValidatorManagement/ValidatorManagement.tsx index c57a7140..d7c32080 100644 --- a/src/pages/ValidatorManagement/ValidatorManagement.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagement.tsx @@ -3,6 +3,7 @@ import { XStack } from 'tamagui' import ValidatorManagementContent from './ValidatorManagementContent' import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar' import RightSidebar from '../../components/General/RightSideBar/RightSidebar' +import './ValidatorManagement.css' const ValidatorManagement = () => { return ( diff --git a/src/pages/ValidatorManagement/validatorManagement.css b/src/pages/ValidatorManagement/validatorManagement.css new file mode 100644 index 00000000..64bd7b61 --- /dev/null +++ b/src/pages/ValidatorManagement/validatorManagement.css @@ -0,0 +1,63 @@ +/* Hide Effectiveness */ +@media (max-width: 1300px) { + th:nth-child(7), + td:nth-child(7) { + display: none; + } +} + +/* Hide the Attestations */ +@media (max-width: 1200px) { + th:nth-child(6), + td:nth-child(6) { + display: none; + } +} + +/* Hide the Proposals */ +@media (max-width: 1100px) { + th:nth-child(5), + td:nth-child(5) { + display: none; + } +} + +/* Hide and show Proposals */ +@media (max-width: 900px) and (min-width: 800px) { + th:nth-child(5), + td:nth-child(5) { + display: table-cell; + } +} + +/* Hide the Income */ +@media (max-width: 1000px) { + th:nth-child(4), + td:nth-child(4) { + display: none; + } +} + +/* Hide and show Income */ +@media (max-width: 900px) and (min-width: 700px) { + th:nth-child(4), + td:nth-child(4) { + display: table-cell; + } +} + +/* Hide Status */ +@media (max-width: 560px) { + th:nth-child(8), + td:nth-child(8) { + display: none; + } +} + +/* Hide Balance */ +@media (max-width: 400px) { + th:nth-child(3), + td:nth-child(3) { + display: none; + } +} From dc559d77f6220f8af5d5597912740f12f953bd7e Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 16 Nov 2023 22:59:06 +0200 Subject: [PATCH 089/123] fix: css file import --- src/pages/ValidatorManagement/ValidatorManagement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ValidatorManagement.tsx b/src/pages/ValidatorManagement/ValidatorManagement.tsx index d7c32080..e23342ad 100644 --- a/src/pages/ValidatorManagement/ValidatorManagement.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagement.tsx @@ -3,7 +3,7 @@ import { XStack } from 'tamagui' import ValidatorManagementContent from './ValidatorManagementContent' import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar' import RightSidebar from '../../components/General/RightSideBar/RightSidebar' -import './ValidatorManagement.css' +import './validatorManagement.css' const ValidatorManagement = () => { return ( From f5f931d1eee73841744dda1aed01ab27cc3b9577 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 17 Nov 2023 23:24:59 +0200 Subject: [PATCH 090/123] feat: add media queries for header --- .../validatorManagement.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/pages/ValidatorManagement/validatorManagement.css b/src/pages/ValidatorManagement/validatorManagement.css index 64bd7b61..1940eca4 100644 --- a/src/pages/ValidatorManagement/validatorManagement.css +++ b/src/pages/ValidatorManagement/validatorManagement.css @@ -1,3 +1,21 @@ +@media (max-width: 1130px) { + .sync-status-card-container-first { + display: none; + } +} + +@media (max-width: 900px) and (min-width: 810px) { + .sync-status-card-container-first { + display: block; + } +} + +@media (max-width: 590px) { + .sync-status-card-container-second { + display: none; + } +} + /* Hide Effectiveness */ @media (max-width: 1300px) { th:nth-child(7), From 70b66834affbde417e2e00c36d4d780d2b4d7a1b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 17 Nov 2023 23:28:29 +0200 Subject: [PATCH 091/123] feat: use new css class names with divs --- .../ValidatorManagement/ManagementHeader.tsx | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementHeader.tsx b/src/pages/ValidatorManagement/ManagementHeader.tsx index c6550e44..3a66480f 100644 --- a/src/pages/ValidatorManagement/ManagementHeader.tsx +++ b/src/pages/ValidatorManagement/ManagementHeader.tsx @@ -15,18 +15,22 @@ const ManagementHeader = () => { > - - +
+ +
+
+ +
) From 7e7083aaa992065034d863ccfc644a22e9662248 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 17:56:19 +0200 Subject: [PATCH 092/123] fix: change tabs constant name --- src/constants.ts | 2 +- .../ManagementTable/ManagementTable.stories.tsx | 6 +++--- .../ManagementTable/ManagementTable.tsx | 4 ++-- src/pages/ValidatorManagement/ManagementTabs.tsx | 8 ++++---- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index b0aec30a..ea28bbf2 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -61,7 +61,7 @@ export const years = [ ] // Validator Management -export const VALIDATOR_TABS = ['Active', 'Pending', 'Inactive', 'Exited', 'Withdraw', 'All'] +export const VALIDATOR_TABS_MANAGEMENT = ['Active', 'Pending', 'Inactive', 'Exited', 'Withdraw', 'All'] export const VALIDATORS_DATA = [ { diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx index e102fde5..ad3d7abb 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' import ManagementTable from './ManagementTable' -import { VALIDATOR_TABS } from '../../../constants' +import { VALIDATOR_TABS_MANAGEMENT } from '../../../constants' import { useState } from 'react' const meta = { @@ -25,7 +25,7 @@ export const Default: Story = () => { return ( @@ -33,7 +33,7 @@ export const Default: Story = () => { } Default.args = { - tab: VALIDATOR_TABS[0], + tab: VALIDATOR_TABS_MANAGEMENT[0], searchValue: '', changeSearchValue: () => {}, } diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index d096f42f..bf8bf530 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -5,7 +5,7 @@ import { YStack, XStack, Stack } from 'tamagui' import ValidatorProfile from '../../../components/General/ValidatorProfile' import SearchManagement from './SearchManagement' -import { VALIDATORS_DATA, VALIDATOR_TABS } from '../../../constants' +import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants' import './ManagementTable.css' type ManagementTableProps = { @@ -26,7 +26,7 @@ type Validator = { } const isValidStatus = (validatorStatus: string, tabStatus: string) => { - if (validatorStatus === tabStatus || tabStatus === VALIDATOR_TABS[VALIDATOR_TABS.length - 1]) { + if (validatorStatus === tabStatus || tabStatus === VALIDATOR_TABS_MANAGEMENT[VALIDATOR_TABS_MANAGEMENT.length - 1]) { return true } return false diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index 3d93d0f3..32925450 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -3,7 +3,7 @@ import { Stack } from 'tamagui' import { useState } from 'react' import ManagementTable from './ManagementTable/ManagementTable' -import { VALIDATOR_TABS } from '../../constants' +import { VALIDATOR_TABS_MANAGEMENT } from '../../constants' const ManagementTabs = () => { const [searchValue, setSearchValue] = useState('') @@ -14,17 +14,17 @@ const ManagementTabs = () => { return (
- + - {VALIDATOR_TABS.map(tab => ( + {VALIDATOR_TABS_MANAGEMENT.map(tab => ( {tab} ))} - {VALIDATOR_TABS.map(tab => ( + {VALIDATOR_TABS_MANAGEMENT.map(tab => ( Date: Mon, 20 Nov 2023 17:58:47 +0200 Subject: [PATCH 093/123] fix: simplify validator tabs in right sidebar --- .../ValidatorsTabs/ValidatorsTabs.tsx | 35 ++++--------------- src/constants.ts | 10 +++++- 2 files changed, 16 insertions(+), 29 deletions(-) diff --git a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx index c3f53fe8..ef642cb8 100644 --- a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx +++ b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx @@ -2,44 +2,23 @@ import { Tabs } from '@status-im/components' import { Stack } from 'tamagui' import ValidatorsList from './ValidatorsList' -import { useMemo } from 'react' +import { VALIDATOR_TABS_RIGHT_SIDEBAR } from '../../../../constants' const ValidatorsTabs = () => { - const VALIDATOR_TABS = useMemo( - () => [ - { - label: 'Active', - value: 'active', - children: , - }, - { - label: 'Pending', - value: 'pending', - children: , - }, - { - label: 'Inactive', - value: 'inactive', - children: , - }, - ], - [], - ) - return ( - {VALIDATOR_TABS.map(tab => ( - - {tab.label} + {VALIDATOR_TABS_RIGHT_SIDEBAR.map(tab => ( + + {tab} ))} - {VALIDATOR_TABS.map(tab => ( - - {tab.children} + {VALIDATOR_TABS_RIGHT_SIDEBAR.map(tab => ( + + ))} diff --git a/src/constants.ts b/src/constants.ts index ea28bbf2..42ed82d7 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -59,9 +59,17 @@ export const years = [ 'NOV', 'DEC', ] +export const VALIDATOR_TABS_RIGHT_SIDEBAR = ['Active', 'Pending', 'Inactive'] // Validator Management -export const VALIDATOR_TABS_MANAGEMENT = ['Active', 'Pending', 'Inactive', 'Exited', 'Withdraw', 'All'] +export const VALIDATOR_TABS_MANAGEMENT = [ + 'Active', + 'Pending', + 'Inactive', + 'Exited', + 'Withdraw', + 'All', +] export const VALIDATORS_DATA = [ { From f2a15d958ecf15866d7919d86feadb3f105a61c9 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 18:00:58 +0200 Subject: [PATCH 094/123] fix: formatting test for management table --- .../ValidatorManagement/ManagementTable/ManagementTable.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index bf8bf530..abfe2ac9 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -26,7 +26,10 @@ type Validator = { } const isValidStatus = (validatorStatus: string, tabStatus: string) => { - if (validatorStatus === tabStatus || tabStatus === VALIDATOR_TABS_MANAGEMENT[VALIDATOR_TABS_MANAGEMENT.length - 1]) { + if ( + validatorStatus === tabStatus || + tabStatus === VALIDATOR_TABS_MANAGEMENT[VALIDATOR_TABS_MANAGEMENT.length - 1] + ) { return true } return false From 599c600eef404cfe40a6b424f60b8e66d2efd7c6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 18:15:18 +0200 Subject: [PATCH 095/123] fix: default value to right sidebar validator tabs --- .../General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx index ef642cb8..5e33a669 100644 --- a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx +++ b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs.tsx @@ -6,7 +6,7 @@ import { VALIDATOR_TABS_RIGHT_SIDEBAR } from '../../../../constants' const ValidatorsTabs = () => { return ( - + {VALIDATOR_TABS_RIGHT_SIDEBAR.map(tab => ( From 321598a0e1e2b7749bf2bfea5799a9d6778a08bc Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 18:22:00 +0200 Subject: [PATCH 096/123] feat: separate dropdown filter --- .../ManagementTable/DropdownFilter.tsx | 37 ++++++++++++++++++ .../ManagementTable/ManagementTable.tsx | 38 +++---------------- 2 files changed, 42 insertions(+), 33 deletions(-) create mode 100644 src/pages/ValidatorManagement/ManagementTable/DropdownFilter.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/DropdownFilter.tsx b/src/pages/ValidatorManagement/ManagementTable/DropdownFilter.tsx new file mode 100644 index 00000000..1742cb53 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/DropdownFilter.tsx @@ -0,0 +1,37 @@ +import { DropdownMenu } from '@status-im/components' +import { SortIcon } from '@status-im/icons' +import { Stack } from 'tamagui' + +const DropdownFilter = () => { + return ( + + + + + + + + ) +} + +export default DropdownFilter diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index abfe2ac9..57770669 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,10 +1,11 @@ -import { Checkbox, DropdownMenu, Text } from '@status-im/components' -import { OptionsIcon, SortIcon } from '@status-im/icons' +import { Checkbox, Text } from '@status-im/components' +import { OptionsIcon } from '@status-im/icons' import { useEffect, useMemo, useState } from 'react' -import { YStack, XStack, Stack } from 'tamagui' +import { YStack, XStack } from 'tamagui' import ValidatorProfile from '../../../components/General/ValidatorProfile' import SearchManagement from './SearchManagement' +import DropdownFilter from './DropdownFilter' import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants' import './ManagementTable.css' @@ -63,36 +64,7 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl - - - - - - - {}} /> - {}} /> - - + From 60379eb2bd83c5e093ce022eff29c368ec878c44 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 18:23:40 +0200 Subject: [PATCH 097/123] feat: create story for dropdown filter --- .../DropdownFilter.stories.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTable/DropdownFilter.stories.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/DropdownFilter.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/DropdownFilter.stories.tsx new file mode 100644 index 00000000..baa09844 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/DropdownFilter.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import DropdownFilter from './DropdownFilter' + +const meta = { + title: 'ValidatorManagement/DropdownFilter', + component: DropdownFilter, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: {}, +} From fc9d9c1f3e9055a9452d20166524698063ac3b67 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 18:55:24 +0200 Subject: [PATCH 098/123] feat: separate table header --- .../ManagementTable/ManagementTable.tsx | 47 +--------------- .../ManagementTable/ManagementTableHeader.tsx | 55 +++++++++++++++++++ 2 files changed, 58 insertions(+), 44 deletions(-) create mode 100644 src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 57770669..de8c3cbd 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -3,10 +3,11 @@ import { OptionsIcon } from '@status-im/icons' import { useEffect, useMemo, useState } from 'react' import { YStack, XStack } from 'tamagui' +import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants' import ValidatorProfile from '../../../components/General/ValidatorProfile' import SearchManagement from './SearchManagement' import DropdownFilter from './DropdownFilter' -import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants' +import ManagementTableHeader from './ManagementTableHeader' import './ManagementTable.css' type ManagementTableProps = { @@ -67,49 +68,7 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl
- - - - - - - - - - - - - + {filteredValidators.map((validator, index) => ( diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx new file mode 100644 index 00000000..30487aff --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx @@ -0,0 +1,55 @@ +import { Checkbox, Text } from '@status-im/components' + +type ManagementTableHeaderProps = { + validatorsAmount: number +} + +const ManagementTableHeader = ({ validatorsAmount }: ManagementTableHeaderProps) => { + return ( + + + + + + + + + + + + + + ) +} + +export default ManagementTableHeader From fc57025d315355913757fce977b1a73dac422bcb Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 18:58:44 +0200 Subject: [PATCH 099/123] feat: separate table body into component --- .../ManagementTable/ManagementTable.tsx | 61 +--------------- .../ManagementTable/ManagementTableBody.tsx | 70 +++++++++++++++++++ 2 files changed, 73 insertions(+), 58 deletions(-) create mode 100644 src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index de8c3cbd..f9395686 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,13 +1,11 @@ -import { Checkbox, Text } from '@status-im/components' -import { OptionsIcon } from '@status-im/icons' import { useEffect, useMemo, useState } from 'react' import { YStack, XStack } from 'tamagui' import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants' -import ValidatorProfile from '../../../components/General/ValidatorProfile' import SearchManagement from './SearchManagement' import DropdownFilter from './DropdownFilter' import ManagementTableHeader from './ManagementTableHeader' +import ManagementTableBody from './ManagementTableBody' import './ManagementTable.css' type ManagementTableProps = { @@ -16,7 +14,7 @@ type ManagementTableProps = { changeSearchValue: (value: string) => void } -type Validator = { +export type Validator = { number: number address: string balance: number @@ -69,60 +67,7 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl
- - - - {filteredValidators.length} Validators - - - - Balance - - - - Income - - - - Proposals - - - - Attestations - - - - Effectiveness - - - - Status - -
+ + + + {validatorsAmount} Validators + + + + Balance + + + + Income + + + + Proposals + + + + Attestations + + + + Effectiveness + + + + Status + +
- - {filteredValidators.map((validator, index) => ( - - - - - - - - - - - - ))} - {filteredValidators.length === 0 && ( - - - - )} - +
- - - - - - {validator.balance} - - - - {validator.income} - - - - {validator.proposals} - - - - {validator.attestations} - - - - {validator.effectiveness}% - - - - {validator.status} - - - -
- - No validators - -
) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx new file mode 100644 index 00000000..b8427443 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx @@ -0,0 +1,70 @@ +import { Checkbox, Text } from '@status-im/components' +import { OptionsIcon } from '@status-im/icons' + +import ValidatorProfile from '../../../components/General/ValidatorProfile' +import { Validator } from './ManagementTable' + +type ManagementTableBodyProps = { + filteredValidators: Validator[] +} + +const ManagementTableBody = ({ filteredValidators }: ManagementTableBodyProps) => { + return ( + + {filteredValidators.map((validator, index) => ( + + + + + + + + + + {validator.balance} + + + + + {validator.income} + + + + + {validator.proposals} + + + + + {validator.attestations} + + + + + {validator.effectiveness}% + + + + + {validator.status} + + + + + + + ))} + {filteredValidators.length === 0 && ( + + + + No validators + + + + )} + + ) +} + +export default ManagementTableBody From 0d546ddc5f0ca9a48d4beaa7c963809e8c459557 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 19:16:05 +0200 Subject: [PATCH 100/123] feat: separate table row --- .../ManagementTable/ManagementTableBody.tsx | 49 ++-------------- .../ManagementTable/ManagementTableRow.tsx | 57 +++++++++++++++++++ 2 files changed, 61 insertions(+), 45 deletions(-) create mode 100644 src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx index b8427443..3d2a3f80 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx @@ -1,8 +1,7 @@ -import { Checkbox, Text } from '@status-im/components' -import { OptionsIcon } from '@status-im/icons' +import { Text } from '@status-im/components' -import ValidatorProfile from '../../../components/General/ValidatorProfile' import { Validator } from './ManagementTable' +import ManagementTableRow from './ManagementTableRow' type ManagementTableBodyProps = { filteredValidators: Validator[] @@ -11,48 +10,8 @@ type ManagementTableBodyProps = { const ManagementTableBody = ({ filteredValidators }: ManagementTableBodyProps) => { return ( - {filteredValidators.map((validator, index) => ( - - - - - - - - - - {validator.balance} - - - - - {validator.income} - - - - - {validator.proposals} - - - - - {validator.attestations} - - - - - {validator.effectiveness}% - - - - - {validator.status} - - - - - - + {filteredValidators.map(validator => ( + ))} {filteredValidators.length === 0 && ( diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx new file mode 100644 index 00000000..7632f633 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx @@ -0,0 +1,57 @@ +import { Checkbox, Text } from '@status-im/components' +import { OptionsIcon } from '@status-im/icons' + +import ValidatorProfile from '../../../components/General/ValidatorProfile' +import { Validator } from './ManagementTable' + +type ManagementTableRowProps = { + validator: Validator +} + +const ManagementTableRow = ({ validator }: ManagementTableRowProps) => { + return ( + + + + + + + + + + {validator.balance} + + + + + {validator.income} + + + + + {validator.proposals} + + + + + {validator.attestations} + + + + + {validator.effectiveness}% + + + + + {validator.status} + + + + + + + ) +} + +export default ManagementTableRow From 58f52889e5b84080a8ffc6b76916bfa39ca7e41d Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 20:08:36 +0200 Subject: [PATCH 101/123] feat: create story for management table body --- .../ManagementTableBody.stories.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.stories.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.stories.tsx new file mode 100644 index 00000000..b2b79f56 --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ManagementTableBody from './ManagementTableBody' +import { VALIDATORS_DATA } from '../../../constants' + +const meta = { + title: 'ValidatorManagement/ManagementTableBody', + component: ManagementTableBody, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + filteredValidators: VALIDATORS_DATA, + }, +} From 75ca2291b011bfb3c55c64498bf7960200c8094c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 20:08:44 +0200 Subject: [PATCH 102/123] feat: create story for table header --- .../ManagementTableHeader.stories.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx new file mode 100644 index 00000000..88021b0d --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ManagementTableHeader from './ManagementTableHeader' + +const meta = { + title: 'ValidatorManagement/ManagementTableHeader', + component: ManagementTableHeader, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + validatorsAmount: 4, + }, +} From b3de3be528dc0bf00f68dcf5335721680a3ef0b4 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 20:11:19 +0200 Subject: [PATCH 103/123] feat: create story for table row --- .../ManagementTableRow.stories.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.stories.tsx diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.stories.tsx new file mode 100644 index 00000000..0f1c7e4e --- /dev/null +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ManagementTableRow from './ManagementTableRow' +import { VALIDATORS_DATA } from '../../../constants' + +const meta = { + title: 'ValidatorManagement/ManagementTableRow', + component: ManagementTableRow, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + validator: VALIDATORS_DATA[0], + }, +} From 5e03b60af7bf284272b314af4f1d5445f7518a24 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 20 Nov 2023 20:15:03 +0200 Subject: [PATCH 104/123] fix: self close tag and import order --- .../ManagementTable/ManagementTable.stories.tsx | 2 +- .../ManagementTable/ManagementTableHeader.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx index ad3d7abb..f15ba6f0 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx @@ -1,8 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react' +import { useState } from 'react' import ManagementTable from './ManagementTable' import { VALIDATOR_TABS_MANAGEMENT } from '../../../constants' -import { useState } from 'react' const meta = { title: 'ValidatorManagement/ManagementTable', diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx index 30487aff..09138111 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx @@ -46,7 +46,7 @@ const ManagementTableHeader = ({ validatorsAmount }: ManagementTableHeaderProps) Status - + ) From 7bd854379941a3f2f869fb2e78f10be242c10feb Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 21 Nov 2023 06:48:42 +0200 Subject: [PATCH 105/123] feat: add state to select all --- .../ManagementTable/ManagementTable.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index f9395686..f6b0ab46 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -48,6 +48,7 @@ const isValidNumberOrAddress = ( const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTableProps) => { const [validators, setValidators] = useState([]) + const [isAllSelected, setIsAllSelected] = useState(false) useEffect(() => { setValidators(VALIDATORS_DATA) @@ -59,6 +60,10 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl .filter(validator => isValidNumberOrAddress(validator.number, validator.address, searchValue)) }, [validators, tab, searchValue]) + const handleSelectAll = () => { + setIsAllSelected(state => !state) + } + return ( @@ -66,8 +71,15 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl - - + +
) From 70a49f4a2b44ac3c950b7bec1f7e78b22859eaf1 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 21 Nov 2023 06:49:18 +0200 Subject: [PATCH 106/123] feat: add example with selected all for story --- .../ManagementTable/ManagementTableBody.stories.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.stories.tsx index b2b79f56..3f5044b8 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.stories.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.stories.tsx @@ -18,5 +18,13 @@ type Story = StoryObj export const Default: Story = { args: { filteredValidators: VALIDATORS_DATA, + isAllSelected: false, + }, +} + +export const AllSelected: Story = { + args: { + filteredValidators: VALIDATORS_DATA, + isAllSelected: true, }, } From d39a1f88a32ece163954a4a3d2bbbb690e04343f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 21 Nov 2023 06:50:50 +0200 Subject: [PATCH 107/123] feat: update header checkbox and get props --- .../ManagementTableHeader.stories.tsx | 10 ++++++++++ .../ManagementTable/ManagementTableHeader.tsx | 15 +++++++++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx index 88021b0d..a98c4f70 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx @@ -17,5 +17,15 @@ type Story = StoryObj export const Default: Story = { args: { validatorsAmount: 4, + isAllSelected: false, + handleSelectAll: () => {}, + }, +} + +export const AllSelectedHeader: Story = { + args: { + validatorsAmount: 4, + isAllSelected: true, + handleSelectAll: () => {}, }, } diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx index 09138111..77747b7c 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx @@ -2,14 +2,25 @@ import { Checkbox, Text } from '@status-im/components' type ManagementTableHeaderProps = { validatorsAmount: number + isAllSelected: boolean + handleSelectAll: () => void } -const ManagementTableHeader = ({ validatorsAmount }: ManagementTableHeaderProps) => { +const ManagementTableHeader = ({ + validatorsAmount, + isAllSelected, + handleSelectAll, +}: ManagementTableHeaderProps) => { return ( - + From 751485b7002955d5bc9257beab163b87cdf0f275 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 21 Nov 2023 06:52:01 +0200 Subject: [PATCH 108/123] feat: add state to every check and effect to check all --- .../ManagementTable/ManagementTableBody.tsx | 9 ++++++-- .../ManagementTableRow.stories.tsx | 1 + .../ManagementTable/ManagementTableRow.tsx | 21 +++++++++++++++++-- 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx index 3d2a3f80..efd149cb 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx @@ -5,13 +5,18 @@ import ManagementTableRow from './ManagementTableRow' type ManagementTableBodyProps = { filteredValidators: Validator[] + isAllSelected: boolean } -const ManagementTableBody = ({ filteredValidators }: ManagementTableBodyProps) => { +const ManagementTableBody = ({ filteredValidators, isAllSelected }: ManagementTableBodyProps) => { return ( {filteredValidators.map(validator => ( - + ))} {filteredValidators.length === 0 && ( diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.stories.tsx index 0f1c7e4e..9c2f88c2 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.stories.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.stories.tsx @@ -18,5 +18,6 @@ type Story = StoryObj export const Default: Story = { args: { validator: VALIDATORS_DATA[0], + isAllSelected: false, }, } diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx index 7632f633..7a21bafe 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react' import { Checkbox, Text } from '@status-im/components' import { OptionsIcon } from '@status-im/icons' @@ -6,13 +7,29 @@ import { Validator } from './ManagementTable' type ManagementTableRowProps = { validator: Validator + isAllSelected: boolean } -const ManagementTableRow = ({ validator }: ManagementTableRowProps) => { +const ManagementTableRow = ({ validator, isAllSelected }: ManagementTableRowProps) => { + const [isSelected, setIsSelected] = useState(false) + + useEffect(() => { + setIsSelected(isAllSelected) + }, [isAllSelected]) + + const handleChangeIsSelected = () => { + setIsSelected(state => !state) + } + return ( - + From 7cc2dbe8643e1dbcc36f05d6f349703401e0cd3c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 22 Nov 2023 08:32:50 +0200 Subject: [PATCH 109/123] feat: style height of the scrollbar --- src/index.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.css b/src/index.css index 89573c45..5ebf15c3 100644 --- a/src/index.css +++ b/src/index.css @@ -103,11 +103,13 @@ ul li { } .transparent-scrollbar::-webkit-scrollbar { width: 8px; + height: 8px; } .transparent-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 10px; + height: 8px; } .transparent-scrollbar::-webkit-scrollbar-thumb:hover { From a92f7a628b897135f9dd1a85d01c444ccec48dae Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 22 Nov 2023 08:33:17 +0200 Subject: [PATCH 110/123] feat: add media query for tabs container --- src/pages/ValidatorManagement/validatorManagement.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/pages/ValidatorManagement/validatorManagement.css b/src/pages/ValidatorManagement/validatorManagement.css index 1940eca4..531b530d 100644 --- a/src/pages/ValidatorManagement/validatorManagement.css +++ b/src/pages/ValidatorManagement/validatorManagement.css @@ -16,6 +16,13 @@ } } +@media (max-width: 800px) { + .tabs { + overflow-x: auto; + overflow-y: none; + } +} + /* Hide Effectiveness */ @media (max-width: 1300px) { th:nth-child(7), From 31af116cb7d459a3f6461423a7d82a3ee2b808cf Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 22 Nov 2023 08:34:42 +0200 Subject: [PATCH 111/123] feat: add new container for tabs --- .../ValidatorManagement/ManagementTabs.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index 32925450..5f2256c4 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -15,15 +15,17 @@ const ManagementTabs = () => { return (
- - - {VALIDATOR_TABS_MANAGEMENT.map(tab => ( - - {tab} - - ))} - - +
+ + + {VALIDATOR_TABS_MANAGEMENT.map(tab => ( + + {tab} + + ))} + + +
{VALIDATOR_TABS_MANAGEMENT.map(tab => ( Date: Wed, 22 Nov 2023 08:46:02 +0200 Subject: [PATCH 112/123] feat: add effect to uncheck after change --- .../ValidatorManagement/ManagementTable/ManagementTable.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index f6b0ab46..ee7306e5 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -54,6 +54,10 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl setValidators(VALIDATORS_DATA) }, []) + useEffect(() => { + setIsAllSelected(false) + }, [validators, tab, searchValue]) + const filteredValidators = useMemo(() => { return validators .filter(validator => isValidStatus(validator.status, tab)) From c904b5d6393676382363597a79a1314239db3fc9 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 22 Nov 2023 08:51:10 +0200 Subject: [PATCH 113/123] fix: change padding for add cards container --- src/components/General/AddCards/AddCardsContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/General/AddCards/AddCardsContainer.tsx b/src/components/General/AddCards/AddCardsContainer.tsx index 2518eda9..736d3c91 100644 --- a/src/components/General/AddCards/AddCardsContainer.tsx +++ b/src/components/General/AddCards/AddCardsContainer.tsx @@ -15,7 +15,7 @@ const AddCardsContainer = ({ cardsAmount }: AddCardsContainerProps) => { {Array.from({ length: cardsAmount }).map((_, index) => ( ))} From c762f1eb7c91a36a6d7177d832d95ad57958203f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 23 Nov 2023 08:53:31 +0200 Subject: [PATCH 114/123] feat: create media query for management cards --- src/pages/ValidatorManagement/validatorManagement.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/ValidatorManagement/validatorManagement.css b/src/pages/ValidatorManagement/validatorManagement.css index 531b530d..a14c7980 100644 --- a/src/pages/ValidatorManagement/validatorManagement.css +++ b/src/pages/ValidatorManagement/validatorManagement.css @@ -23,6 +23,12 @@ } } +@media (max-width: 600px) { + .cards { + flex-direction: column; + } +} + /* Hide Effectiveness */ @media (max-width: 1300px) { th:nth-child(7), From fefc61392442960d6e8bab1d417d14bbb3507176 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 23 Nov 2023 08:54:44 +0200 Subject: [PATCH 115/123] fix: replace width with min width for responsiveness --- src/pages/ValidatorManagement/ManagementCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementCard.tsx b/src/pages/ValidatorManagement/ManagementCard.tsx index 4dd6bbdf..72da8773 100644 --- a/src/pages/ValidatorManagement/ManagementCard.tsx +++ b/src/pages/ValidatorManagement/ManagementCard.tsx @@ -5,7 +5,7 @@ const ManagementCard = () => { return ( From ef9db24834a360b1b347f9dd709fc40c7dc714b7 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 23 Nov 2023 09:14:33 +0200 Subject: [PATCH 116/123] feat: add inline style to cards container --- .../ValidatorManagementContent.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index ee631e2a..eb7b03e4 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -1,5 +1,5 @@ import { Text } from '@status-im/components' -import { XStack, YStack } from 'tamagui' +import { YStack } from 'tamagui' import ManagementTabs from './ManagementTabs' import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer' @@ -21,11 +21,20 @@ const ValidatorManagementContent = () => { className="transparent-scrollbar" > - +
- +
Validators From 5c30063dadced9d7170143b5ce178458d3ca9f88 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 23 Nov 2023 09:24:24 +0200 Subject: [PATCH 117/123] fix: remove min width for body --- src/index.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.css b/src/index.css index 5ebf15c3..26e74c6c 100644 --- a/src/index.css +++ b/src/index.css @@ -62,7 +62,6 @@ body { margin: 0; display: flex; - min-width: 320px; min-height: 100vh; } h1, From 54715ca0a31707835cf5757a372f5e1133e2e389 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 23 Nov 2023 09:26:04 +0200 Subject: [PATCH 118/123] fix: remove width and min width management container --- src/pages/ValidatorManagement/ValidatorManagementContent.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx index eb7b03e4..25f5c53e 100644 --- a/src/pages/ValidatorManagement/ValidatorManagementContent.tsx +++ b/src/pages/ValidatorManagement/ValidatorManagementContent.tsx @@ -12,8 +12,6 @@ const ValidatorManagementContent = () => { space="$4" alignItems="start" px="24px" - minWidth="500px" - width="50vh" style={{ flexGrow: '1', overflowY: 'auto', From 1dbaac1a190dccc49c7047ed4cf49474bc2c059d Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 24 Nov 2023 09:29:22 +0200 Subject: [PATCH 119/123] feat: add max width to tabs container --- src/pages/ValidatorManagement/ManagementTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index 5f2256c4..0e4a2a2c 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -16,7 +16,7 @@ const ManagementTabs = () => {
- + {VALIDATOR_TABS_MANAGEMENT.map(tab => ( From 29c69cc0b9345f3630ed7765b6390704e96e50c6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 24 Nov 2023 09:32:36 +0200 Subject: [PATCH 120/123] fix: change media query max width for tabs --- src/pages/ValidatorManagement/validatorManagement.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/validatorManagement.css b/src/pages/ValidatorManagement/validatorManagement.css index a14c7980..066e82c7 100644 --- a/src/pages/ValidatorManagement/validatorManagement.css +++ b/src/pages/ValidatorManagement/validatorManagement.css @@ -16,7 +16,7 @@ } } -@media (max-width: 800px) { +@media (max-width: 600px) { .tabs { overflow-x: auto; overflow-y: none; From 8c08589927f762c624f7befd8f396124ea571e0b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 24 Nov 2023 09:47:46 +0200 Subject: [PATCH 121/123] fix: hide balance column on wider screen --- src/pages/ValidatorManagement/validatorManagement.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorManagement/validatorManagement.css b/src/pages/ValidatorManagement/validatorManagement.css index 066e82c7..6ea6a853 100644 --- a/src/pages/ValidatorManagement/validatorManagement.css +++ b/src/pages/ValidatorManagement/validatorManagement.css @@ -86,7 +86,7 @@ } /* Hide Balance */ -@media (max-width: 400px) { +@media (max-width: 475px) { th:nth-child(3), td:nth-child(3) { display: none; From 650abd8bd226a47842793bdbf50010ed051ff30a Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 24 Nov 2023 11:34:50 +0200 Subject: [PATCH 122/123] feat: add state to table header story --- .../ManagementTableHeader.stories.tsx | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx index a98c4f70..c7644790 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react' +import { useState } from 'react' import ManagementTableHeader from './ManagementTableHeader' @@ -14,18 +15,24 @@ const meta = { export default meta type Story = StoryObj -export const Default: Story = { - args: { - validatorsAmount: 4, - isAllSelected: false, - handleSelectAll: () => {}, - }, +export const Default: Story = () => { + const [isAllSelected, setIsAllSelected] = useState(false) + + const handleSelectAll = () => { + setIsAllSelected(state => !state) + } + + return ( + + ) } -export const AllSelectedHeader: Story = { - args: { - validatorsAmount: 4, - isAllSelected: true, - handleSelectAll: () => {}, - }, +Default.args = { + isAllSelected: false, + validatorsAmount: 4, + handleSelectAll: () => {}, } From 7d19b0faebf5f9c39669d5656344084003378bda Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 28 Nov 2023 14:59:06 +0200 Subject: [PATCH 123/123] fix: auto add vercel settings after re-authenticate --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index d6b39456..efdff52f 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,4 @@ dist-ssr # vercel /.vercel +.vercel