From 8413357dc7c5f53d877f7d51a274039549965c19 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 2 Nov 2023 23:02:17 +0200 Subject: [PATCH 001/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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/173] 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 a3f1ee14d054b6e46e906ea208d232750e95b50b Mon Sep 17 00:00:00 2001 From: zah Date: Mon, 13 Nov 2023 11:58:07 +0300 Subject: [PATCH 054/173] Improve the project README --- README.md | 42 +++++++++++++++++++++++++++++++++++------- 1 file changed, 35 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 035a71fa..dea8d967 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,36 @@ -# nimbus-gui +# Nimbus GUI -A GUI for managing your [Nimbus](https://nimbus.team/) nodes. +## Introduction -## Deployed pages showing the project +The goal of this project is to develop a management and monitoring GUI for the [Nimbus Ethereum client](https://nimbus.team). + +Right now, Nimbus is managed as a typical system service. It offers executables that can be launched from the command-line. It produces log output as the primary way to communicate information to the user and it's typically monitored through [Prometheus and Grafana](https://nimbus.guide/metrics-pretty-pictures.html). The user can interact with Nimbus through a standardized [REST](https://ethereum.github.io/beacon-APIs/) [APIs](https://ethereum.github.io/keymanager-APIs/) with some Nimbus-specific extensions. + +Since the primary purpose of Nimbus is to enable the user to operate [Ethereum validators](https://ethereum.org/en/staking/), users typically also consult web-sites such as [beaconcha.in](https://beaconcha.in/), which provide up-to-date information about the network and the obtained rewards of each validator. The beaconcha.in web-site also offers a popular mobile application which can alert the user if their validator(s) are failing to perform their duties (which can happen if the Nimbus service is experiencing any technical issues). + +At the moment, all of the above makes Nimbus accessible mostly to users with the sufficient technical skills to setup and integrate multiple software packages, often within a rented server running Linux in a remote data center. + +We would like to make Nimbus much more accessible to non-technical users by developing GUI installers and GUI management and monitoring software. We have prepared a rough roadmap for this here: + +https://github.com/status-im/nimbus-eth2/issues/3423 + +## Development Plan + +The initial version of the management UI will be developed as a web application, communicating with a special service called the Logos Node Management Service. + +As part of the [Logos](https://logos.co/) movement, Nimbus benefits from close ties to [Status](https://status.im/), a messanger that offers strong integration with Ethereum and also serves as a [mobile wallet](https://status.im/secure-wallet/) and a [DApp browser](https://zerion.io/blog/what-is-dapp-browser/). We can provide a simple interface for solo stakers who would be able to execute their validator deposits directly from the Status app in the future. The Nimbus management UI will be then embedded within the app and it will use the same design system as the app. + +The Status UI team is currently developing the next iteration of the Status design system that will be used across its mobile and desktop products. To facilitate the future integration, we will use the same system during the development of the Nimbus GUI from the start. + +## UX Designs (WIP) + +Initial designs for the Nimbus management UI are being developed here: + +https://www.figma.com/file/kUO8PyQCo89SyvCn3pFmNS/Nodes-Nimbus---New-Design-System?type=design&node-id=3%3A188588&t=npvkylewM1T5GUHG-1 + +Please note that all of the graphics are currently placeholders as the final artwords are still being prepared. The layout of the screens is likely to resemble the final design, although the content and the available functionality on the web-pages is still under review. + +## Live Demos We have a Storybook up at https://nimbus-gui.github.io/nimbus-gui/ which shows the components of the project. We also have a deployed version of the GUI up at @@ -10,13 +38,13 @@ https://nimbus-gui.vercel.app/ which shows the GUI as it currently looks in the `main` branch of the [`nimbus-gui/nimbus-gui`](https://github.com/nimbus-gui/nimbus-gui) repository. -## Development and running the project yourself +## How to Contribute -### Dependencies +### Install all dependencies Run `yarn` in the root directory of the project in order to install dependencies. -### Running a development server +### Run a development server If you want to run a development server to see what the GUI looks like you can run the following command: @@ -28,7 +56,7 @@ yarn dev This will start the server on port 5173 and you can open https://localhost:5173 in order to see the page. -### Running storybook locally +### Launch Storybook locally If you want to run the Storybook locally you can simply run `yarn storybook` in the root of the project. This is useful if you want to contribute a component From 02fe42dcda72d0967443af1f3916bb6b38106e0b Mon Sep 17 00:00:00 2001 From: zah Date: Mon, 13 Nov 2023 13:03:39 +0300 Subject: [PATCH 055/173] Remove a superfluous heading --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index dea8d967..1db71be6 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # Nimbus GUI -## Introduction - The goal of this project is to develop a management and monitoring GUI for the [Nimbus Ethereum client](https://nimbus.team). Right now, Nimbus is managed as a typical system service. It offers executables that can be launched from the command-line. It produces log output as the primary way to communicate information to the user and it's typically monitored through [Prometheus and Grafana](https://nimbus.guide/metrics-pretty-pictures.html). The user can interact with Nimbus through a standardized [REST](https://ethereum.github.io/beacon-APIs/) [APIs](https://ethereum.github.io/keymanager-APIs/) with some Nimbus-specific extensions. From 5b7c6702c165992e65f4d815bfa550963707a07c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 13 Nov 2023 20:57:02 +0200 Subject: [PATCH 056/173] 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 057/173] 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 058/173] 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 059/173] 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 060/173] 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 061/173] 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 062/173] 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 063/173] 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 064/173] 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 065/173] 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 066/173] 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 067/173] 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 068/173] 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 069/173] 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 070/173] 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 071/173] 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 072/173] 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 073/173] 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 074/173] 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 075/173] 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 076/173] 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 077/173] 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 078/173] 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 079/173] 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 080/173] 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 081/173] 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 082/173] 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 083/173] 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 084/173] 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 085/173] 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 086/173] 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 087/173] 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 088/173] 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 089/173] 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 090/173] 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 091/173] 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 092/173] 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 093/173] 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 094/173] 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 095/173] 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 096/173] 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 097/173] 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 098/173] 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 099/173] 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 100/173] 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 101/173] 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 102/173] 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 103/173] 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 104/173] 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 105/173] 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 106/173] 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 107/173] 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 108/173] 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 109/173] 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 110/173] 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 111/173] 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 112/173] 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 113/173] 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 114/173] 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 115/173] 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 116/173] 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 117/173] 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 118/173] 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 119/173] 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 120/173] 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 121/173] 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 122/173] 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 123/173] 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 124/173] 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 125/173] 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 From 5abc4fa5ea5c0706483c8fe468b9bef29141611d Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 29 Nov 2023 07:50:03 +0200 Subject: [PATCH 126/173] fix: timer seconds --- src/pages/PairDevice/SyncStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx index d331b62d..400a2636 100644 --- a/src/pages/PairDevice/SyncStatus.tsx +++ b/src/pages/PairDevice/SyncStatus.tsx @@ -33,7 +33,7 @@ const SyncStatus = ({ if (isPairing) { timer = setInterval(() => { - setElapsedTime(prevTime => prevTime + 65) + setElapsedTime(prevTime => prevTime + 1) if (elapsedTime >= 180) { changeSetIsAwaitingPairing(true) } From 2d123d7d3dae7b60535585eb3d7fa7b497b25316 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 29 Nov 2023 07:50:50 +0200 Subject: [PATCH 127/173] fix: add fixed text size for timer --- src/pages/PairDevice/SyncStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx index 400a2636..d123d408 100644 --- a/src/pages/PairDevice/SyncStatus.tsx +++ b/src/pages/PairDevice/SyncStatus.tsx @@ -59,7 +59,7 @@ const SyncStatus = ({ {isPairing && ( From 9776fb8ab674dc3a359c8d0f8051f19daca21aa4 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 29 Nov 2023 07:53:52 +0200 Subject: [PATCH 128/173] fix: size spacing between elements --- src/pages/PairDevice/SyncStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx index d123d408..7b08ad92 100644 --- a/src/pages/PairDevice/SyncStatus.tsx +++ b/src/pages/PairDevice/SyncStatus.tsx @@ -52,7 +52,7 @@ const SyncStatus = ({ } return ( - + Device Sync Status From 820e1c9fb037724d2404ebd14eab9a61192873e5 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 29 Nov 2023 07:55:50 +0200 Subject: [PATCH 129/173] feat: add new titles --- src/pages/PairDevice/PairDevice.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 9f493c03..71f628eb 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -30,7 +30,10 @@ const PairDevice = () => { }} >
- + {isPaired ? : } {!isPaired && ( Date: Wed, 29 Nov 2023 20:56:30 +0200 Subject: [PATCH 130/173] fix: change default value to isPairing --- src/pages/PairDevice/PairDevice.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 71f628eb..90e15c4e 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -15,7 +15,7 @@ import Icon from '../../components/General/Icon' const PairDevice = () => { const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) const isPaired = false - const isPairing = true + const isPairing = false const changeSetIsAwaitingPairing = (result: boolean) => { setIsAwaitingPairing(result) From ec6b4a0f71d1b77d6076c83c82e0e82c51f1be93 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 29 Nov 2023 20:57:38 +0200 Subject: [PATCH 131/173] fix: imports order --- src/pages/PairDevice/GenerateId.stories.tsx | 2 +- src/pages/PairDevice/PairDevice.tsx | 2 +- src/pages/PairDevice/SyncStatus.stories.tsx | 2 +- src/pages/PairDevice/SyncStatus.tsx | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/PairDevice/GenerateId.stories.tsx b/src/pages/PairDevice/GenerateId.stories.tsx index 18a17f0d..7a0729e9 100644 --- a/src/pages/PairDevice/GenerateId.stories.tsx +++ b/src/pages/PairDevice/GenerateId.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' import GenerateId from './GenerateId' -import { withRouter } from 'storybook-addon-react-router-v6' const meta = { title: 'Pair Device/GenerateId', diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 90e15c4e..844e869a 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -1,3 +1,4 @@ +import { NodeIcon } from '@status-im/icons' import { Separator, XStack, YStack } from 'tamagui' import { useState } from 'react' import { Button, Text } from '@status-im/components' @@ -8,7 +9,6 @@ import Titles from '../../components/General/Titles' import PairedSuccessfully from './PairedSuccessfully' import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar' import GenerateId from './GenerateId' -import { NodeIcon } from '@status-im/icons' import Header from '../../components/General/Header' import Icon from '../../components/General/Icon' diff --git a/src/pages/PairDevice/SyncStatus.stories.tsx b/src/pages/PairDevice/SyncStatus.stories.tsx index d6d7d3f6..e4329f1a 100644 --- a/src/pages/PairDevice/SyncStatus.stories.tsx +++ b/src/pages/PairDevice/SyncStatus.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' import SyncStatus from './SyncStatus' -import { withRouter } from 'storybook-addon-react-router-v6' const meta = { title: 'Pair Device/SyncStatus', diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx index 7b08ad92..0756b193 100644 --- a/src/pages/PairDevice/SyncStatus.tsx +++ b/src/pages/PairDevice/SyncStatus.tsx @@ -2,12 +2,12 @@ import { useEffect, useState } from 'react' import { XStack, YStack } from 'tamagui' import { Button, IconButton, InformationBox, Text } from '@status-im/components' import { CloseCircleIcon } from '@status-im/icons' +import { RefreshIcon } from '@status-im/icons' +import { useNavigate } from 'react-router' import Icon from '../../components/General/Icon' import ConnectionIcon from '/icons/connection.svg' import { convertSecondsToTimerFormat } from '../../utilities' -import { RefreshIcon } from '@status-im/icons' -import { useNavigate } from 'react-router' type SyncStatusProps = { isPairing: boolean From 744f39f4fac826e209648a09dc868e0026ac3875 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 29 Nov 2023 21:03:56 +0200 Subject: [PATCH 132/173] fix: change spacing and structure pair device --- src/pages/PairDevice/PairDevice.tsx | 31 +++++++++++++---------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 844e869a..33cf6cd6 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -1,5 +1,5 @@ import { NodeIcon } from '@status-im/icons' -import { Separator, XStack, YStack } from 'tamagui' +import { Separator, Stack, XStack, YStack } from 'tamagui' import { useState } from 'react' import { Button, Text } from '@status-im/components' @@ -23,12 +23,7 @@ const PairDevice = () => { return ( - +
{ /> )} - - Advanced Settings - - - - + + + Advanced Settings + + + + + {isPaired && } - +
- +
) From c4b6b5bf6238a0fef8edf965ae6804feb701c749 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 30 Nov 2023 22:19:15 +0200 Subject: [PATCH 133/173] fix: not used import --- src/pages/PairDevice/PairDevice.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 33cf6cd6..3857de72 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -1,5 +1,5 @@ import { NodeIcon } from '@status-im/icons' -import { Separator, Stack, XStack, YStack } from 'tamagui' +import { Separator, XStack, YStack } from 'tamagui' import { useState } from 'react' import { Button, Text } from '@status-im/components' From 6ff153e29d18b0004ee5baab41c55b87d4527dd3 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 30 Nov 2023 22:19:37 +0200 Subject: [PATCH 134/173] feat: add media query to remove right img --- src/components/PageWrappers/PageWrapperShadow.tsx | 2 +- src/components/PageWrappers/layout.css | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/PageWrappers/PageWrapperShadow.tsx b/src/components/PageWrappers/PageWrapperShadow.tsx index 9aa4160d..0dfa4ab8 100644 --- a/src/components/PageWrappers/PageWrapperShadow.tsx +++ b/src/components/PageWrappers/PageWrapperShadow.tsx @@ -29,7 +29,7 @@ const PageWrapperShadow = ({
-
+
Date: Thu, 30 Nov 2023 22:24:19 +0200 Subject: [PATCH 135/173] feat: hide advanced settings for is paired --- src/pages/PairDevice/PairDevice.tsx | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 3857de72..770b2fa8 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -37,17 +37,24 @@ const PairDevice = () => { changeSetIsAwaitingPairing={changeSetIsAwaitingPairing} /> )} - - - - Advanced Settings - - - - - + {isPaired === false && ( + <> + + + + Advanced Settings + + + + + + + )} {isPaired && }
From e652acc6ee4f72ecfa121271219bf235dbebba4b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 30 Nov 2023 22:27:56 +0200 Subject: [PATCH 136/173] fix: remove wrong sizes from avatar --- src/components/General/CreateAvatar/CreateAvatar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx index 8db43985..7eb9eaad 100644 --- a/src/components/General/CreateAvatar/CreateAvatar.tsx +++ b/src/components/General/CreateAvatar/CreateAvatar.tsx @@ -31,12 +31,12 @@ const CreateAvatar = () => { }, [emojiRef]) return ( - - + + - - + + Device Avatar From b5777ca0d780d1cc7fa019a1c61a2f3bbf8bfba3 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 30 Nov 2023 22:41:35 +0200 Subject: [PATCH 137/173] fix: change statement to more readable --- src/pages/PairDevice/PairDevice.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 770b2fa8..5332e93c 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -30,7 +30,7 @@ const PairDevice = () => { subtitle="Pair your existing device to the Nimbus Node Manager" /> {isPaired ? : } - {!isPaired && ( + {isPaired === false && ( Date: Fri, 1 Dec 2023 09:41:26 +0200 Subject: [PATCH 138/173] feat: move content to be on entire screen under 1000px --- src/components/PageWrappers/layout.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 5d6e4695..dcb2d3a5 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -89,3 +89,24 @@ display: none; } } + +@media (max-width: 1000px) { + .layout-left { + flex: 0 0 100%; + max-width: 100%; + } + + .container { + justify-content: start; + padding: 20px; + } + + .container-inner { + max-width: 100%; + flex: 1 0 100%; + } + + .layout-right { + display: none; + } +} From 2705db66065b86a9bdfb18049a8d602d1d956349 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 1 Dec 2023 10:00:03 +0200 Subject: [PATCH 139/173] fix: remove media query for closing img --- src/components/PageWrappers/PageWrapperShadow.tsx | 3 +-- src/components/PageWrappers/layout.css | 6 ------ 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/PageWrappers/PageWrapperShadow.tsx b/src/components/PageWrappers/PageWrapperShadow.tsx index 0dfa4ab8..0d29e963 100644 --- a/src/components/PageWrappers/PageWrapperShadow.tsx +++ b/src/components/PageWrappers/PageWrapperShadow.tsx @@ -28,8 +28,7 @@ const PageWrapperShadow = ({
{children}
- -
+
Date: Fri, 1 Dec 2023 10:03:42 +0200 Subject: [PATCH 140/173] feat: add new orders for top img --- src/components/PageWrappers/layout.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 5c94bf46..9b734d3e 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -84,10 +84,11 @@ height: 73px; } -@media (max-width: 900px) { +@media (max-width: 1000px) { .layout-left { flex: 0 0 100%; max-width: 100%; + order: 1; } .container { @@ -101,6 +102,8 @@ } .layout-right { - display: none; + flex: 0 0 100%; + max-width: 100%; + order: 0; } } From 21901e38401ee08ccbe623c9d4451077f796a00d Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 4 Dec 2023 19:18:54 +0200 Subject: [PATCH 141/173] feat: create story for general header --- src/components/General/Header.stories.tsx | 33 +++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/components/General/Header.stories.tsx diff --git a/src/components/General/Header.stories.tsx b/src/components/General/Header.stories.tsx new file mode 100644 index 00000000..ac8196ea --- /dev/null +++ b/src/components/General/Header.stories.tsx @@ -0,0 +1,33 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import Header from './Header' + +const meta = { + title: 'General/Header', + component: Header, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + selectedTag: 'pair', + }, +} + +export const CreateTag: Story = { + args: { + selectedTag: 'create', + }, +} + +export const ConnectTag: Story = { + args: { + selectedTag: 'connect', + }, +} From 27173fdfe375a9d06d1f6743f0f7e474ab046bfb Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 4 Dec 2023 19:31:11 +0200 Subject: [PATCH 142/173] feat: add style to header container --- src/components/General/Header.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/General/Header.tsx b/src/components/General/Header.tsx index c560db91..c0df7bc3 100644 --- a/src/components/General/Header.tsx +++ b/src/components/General/Header.tsx @@ -1,4 +1,3 @@ -import { XStack } from 'tamagui' import NimbusLogo from '../Logos/NimbusLogo' import TagContainer from './TagContainer' @@ -8,10 +7,17 @@ type HeaderProps = { const Header = ({ selectedTag }: HeaderProps) => { return ( - +
- +
) } From 68751434c411aaddd4594b8b4a850478ad797d02 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 4 Dec 2023 19:33:44 +0200 Subject: [PATCH 143/173] feat: add media query for header responsive --- src/components/General/Header.tsx | 1 + src/index.css | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/src/components/General/Header.tsx b/src/components/General/Header.tsx index c0df7bc3..1fc0f103 100644 --- a/src/components/General/Header.tsx +++ b/src/components/General/Header.tsx @@ -14,6 +14,7 @@ const Header = ({ selectedTag }: HeaderProps) => { paddingBottom: '25px', marginTop: '4.4rem', }} + className="header-container" > diff --git a/src/index.css b/src/index.css index 8ad31b90..d97ef17a 100644 --- a/src/index.css +++ b/src/index.css @@ -130,3 +130,10 @@ ul li { background-color: #f9f9f9; } } + +@media screen and (max-width: 440px) { + .header-container { + flex-direction: column; + gap: 12px; + } +} From 2f94f1a259f0385089bcae4c3e1eec2ba8f52522 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 4 Dec 2023 20:09:26 +0200 Subject: [PATCH 144/173] feat: add style to regenerate id container --- src/pages/PairDevice/GenerateId.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/PairDevice/GenerateId.tsx b/src/pages/PairDevice/GenerateId.tsx index 72b3a92d..a0f0dd54 100644 --- a/src/pages/PairDevice/GenerateId.tsx +++ b/src/pages/PairDevice/GenerateId.tsx @@ -3,9 +3,11 @@ import { CompleteIdIcon, CopyIcon } from '@status-im/icons' import { Text } from '@tamagui/web' import { useEffect, useState } from 'react' import { Link } from 'react-router-dom' -import { Separator, XStack, YStack } from 'tamagui' +import { Separator, YStack } from 'tamagui' import { v4 as uuidv4 } from 'uuid' +import styles from './pairDevice.module.css' + type GenerateIdProps = { isAwaitingPairing: boolean } @@ -27,7 +29,9 @@ const GenerateId = ({ isAwaitingPairing }: GenerateIdProps) => { return ( - +
Pair with Command line @@ -39,7 +43,7 @@ const GenerateId = ({ isAwaitingPairing }: GenerateIdProps) => { > Regenerate ID - +
Generated Pairing ID Input From eb5a1dbc423d99ba58b9a20a1ea563019a9f4c41 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 4 Dec 2023 20:09:45 +0200 Subject: [PATCH 145/173] feat: add media query for regenerate id container --- src/pages/PairDevice/GenerateId.tsx | 1 + src/pages/PairDevice/pairDevice.module.css | 6 ++++++ 2 files changed, 7 insertions(+) create mode 100644 src/pages/PairDevice/pairDevice.module.css diff --git a/src/pages/PairDevice/GenerateId.tsx b/src/pages/PairDevice/GenerateId.tsx index a0f0dd54..bdd0d04c 100644 --- a/src/pages/PairDevice/GenerateId.tsx +++ b/src/pages/PairDevice/GenerateId.tsx @@ -31,6 +31,7 @@ const GenerateId = ({ isAwaitingPairing }: GenerateIdProps) => {
Pair with Command line diff --git a/src/pages/PairDevice/pairDevice.module.css b/src/pages/PairDevice/pairDevice.module.css new file mode 100644 index 00000000..fe996cc4 --- /dev/null +++ b/src/pages/PairDevice/pairDevice.module.css @@ -0,0 +1,6 @@ +@media screen and (max-width: 440px) { + .regenerate-id-container { + flex-direction: column; + gap: 12px; + } +} From 35ef9baf86e7541241ef30132ccae9cc4468861c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 5 Dec 2023 23:54:07 +0200 Subject: [PATCH 146/173] fix: remove space for sync status --- src/pages/PairDevice/SyncStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx index 0756b193..cdfbd04d 100644 --- a/src/pages/PairDevice/SyncStatus.tsx +++ b/src/pages/PairDevice/SyncStatus.tsx @@ -52,7 +52,7 @@ const SyncStatus = ({ } return ( - + Device Sync Status From 9483413c131fe53b384b1f1e7cb613171adf4f2b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 5 Dec 2023 23:54:30 +0200 Subject: [PATCH 147/173] feat: add space for advanced settings --- src/pages/PairDevice/PairDevice.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 5332e93c..e8a7ac9a 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -38,7 +38,7 @@ const PairDevice = () => { /> )} {isPaired === false && ( - <> + @@ -53,7 +53,7 @@ const PairDevice = () => { - + )} {isPaired && } From 5a23c4e906f5a0f26f4cb69a631ed68ae2f831dd Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 7 Dec 2023 11:08:19 +0200 Subject: [PATCH 148/173] fix: imports order in page wrapper --- src/components/PageWrappers/PageWrapperShadow.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/PageWrappers/PageWrapperShadow.tsx b/src/components/PageWrappers/PageWrapperShadow.tsx index 0d29e963..c8ba7c1a 100644 --- a/src/components/PageWrappers/PageWrapperShadow.tsx +++ b/src/components/PageWrappers/PageWrapperShadow.tsx @@ -1,8 +1,9 @@ import { ReactNode } from 'react' -import './layout.css' -import NimbusLogoMark from '../Logos/NimbusLogoMark' import { useTheme } from 'tamagui' +import NimbusLogoMark from '../Logos/NimbusLogoMark' +import './layout.css' + type PageWrapperShadowProps = { breadcrumbBar?: ReactNode rightImageSrc?: string From ea7df5702ab92f2fb1711386637c0742567013f3 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 7 Dec 2023 11:34:48 +0200 Subject: [PATCH 149/173] feat: bold text for create local node --- src/components/General/CreateAvatar/CreateAvatar.tsx | 4 ++-- src/components/General/LabelInputField.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx index 7eb9eaad..f91c6d4e 100644 --- a/src/components/General/CreateAvatar/CreateAvatar.tsx +++ b/src/components/General/CreateAvatar/CreateAvatar.tsx @@ -37,7 +37,7 @@ const CreateAvatar = () => { - + Device Avatar @@ -65,7 +65,7 @@ const CreateAvatar = () => { - + Highlight Color diff --git a/src/components/General/LabelInputField.tsx b/src/components/General/LabelInputField.tsx index 5761ce7b..f0c4619e 100644 --- a/src/components/General/LabelInputField.tsx +++ b/src/components/General/LabelInputField.tsx @@ -10,7 +10,7 @@ type LabelInputProps = { const LabelInputField = ({ labelText, placeholderText }: LabelInputProps) => { return ( - + Highlight Color From bc239e14a9c0645d07712fe624a018313f11b997 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 12 Dec 2023 23:08:08 +0200 Subject: [PATCH 151/173] feat: add style to adjust top image width and height --- src/components/PageWrappers/layout.css | 57 +++++++++++++++++++++++++- 1 file changed, 56 insertions(+), 1 deletion(-) diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 9b734d3e..3ca6ba5f 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -85,25 +85,80 @@ } @media (max-width: 1000px) { + .layout { + height: auto; + } + .layout-left { flex: 0 0 100%; max-width: 100%; order: 1; + padding: 0; } .container { justify-content: start; - padding: 20px; + padding: 0; } .container-inner { max-width: 100%; flex: 1 0 100%; + padding: 0; } .layout-right { flex: 0 0 100%; max-width: 100%; order: 0; + padding: 0; + margin-top: -10%; + margin-bottom: -70%; + } + + .image-container { + margin: 0; + padding: 0; + height: auto; + position: relative; + overflow: hidden; + } + + .image-container .background-img { + width: 100%; + position: absolute; + top: 10%; + left: 50%; + transform: translateX(-50%) translateY(-10%); + clip-path: inset(10% 0 70% 0); + height: auto; + } + + .image-container .nimbus-logomark { + display: none; + } + + .content, + .breadcrumbBar, + .other-elements { + margin: 0; + padding: 0; + } + + .breadcrumbBar, + .some-other-element { + margin: 0; + padding: 0; + } + + .image-container { + position: relative; + overflow: hidden; + padding: 0; + margin: 0; + } + + .image-container .background-img { + clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%); } } From c3a5e9e328c029c44d00012eeb96f45835606847 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 13 Dec 2023 09:17:04 +0200 Subject: [PATCH 152/173] feat: add linear gradient for top image --- src/components/PageWrappers/layout.css | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 3ca6ba5f..0c4aadf8 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -14,7 +14,6 @@ left: 0; width: 100%; height: 100%; - background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%); } .layout-left { flex: 0 0 55%; @@ -26,7 +25,6 @@ flex-wrap: wrap; justify-content: end; height: 100%; - /* padding: 70px 0 0; */ } .container-inner { max-width: 70%; @@ -113,7 +111,7 @@ order: 0; padding: 0; margin-top: -10%; - margin-bottom: -70%; + margin-bottom: -72%; } .image-container { @@ -129,8 +127,8 @@ position: absolute; top: 10%; left: 50%; - transform: translateX(-50%) translateY(-10%); - clip-path: inset(10% 0 70% 0); + transform: translateX(-50%) translateY(-5%); + clip-path: inset(0 0 85% 0); height: auto; } @@ -159,6 +157,13 @@ } .image-container .background-img { - clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%); + clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); + } + + .image-container::after { + width: 100%; + right: 0; + left: 0; + background: linear-gradient(to top, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0)); } } From 94654b9604cf999fd2b0fc2aa3f03a45887e244b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 13 Dec 2023 09:36:34 +0200 Subject: [PATCH 153/173] fix: paddings to page wrapper --- src/components/PageWrappers/layout.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 0c4aadf8..2bf405e1 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -91,32 +91,28 @@ flex: 0 0 100%; max-width: 100%; order: 1; - padding: 0; } .container { justify-content: start; - padding: 0; + padding: 20px; } .container-inner { max-width: 100%; flex: 1 0 100%; - padding: 0; } .layout-right { flex: 0 0 100%; max-width: 100%; order: 0; - padding: 0; margin-top: -10%; margin-bottom: -72%; } .image-container { margin: 0; - padding: 0; height: auto; position: relative; overflow: hidden; From df8a83683cd089e1b0051675a68d2e706b852c4d Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 13 Dec 2023 21:35:30 +0200 Subject: [PATCH 154/173] fix: return background --- src/components/PageWrappers/layout.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 2bf405e1..d25ae2f8 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -14,6 +14,7 @@ left: 0; width: 100%; height: 100%; + background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%); } .layout-left { flex: 0 0 55%; From 7ce207e9590d345662c1f16fee04f90559fc58c6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 14 Dec 2023 10:55:49 +0200 Subject: [PATCH 155/173] fix: remove connect button from is pairing --- src/pages/PairDevice/SyncStatus.tsx | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx index cdfbd04d..dc151587 100644 --- a/src/pages/PairDevice/SyncStatus.tsx +++ b/src/pages/PairDevice/SyncStatus.tsx @@ -1,12 +1,9 @@ import { useEffect, useState } from 'react' import { XStack, YStack } from 'tamagui' -import { Button, IconButton, InformationBox, Text } from '@status-im/components' +import { IconButton, InformationBox, Text } from '@status-im/components' import { CloseCircleIcon } from '@status-im/icons' import { RefreshIcon } from '@status-im/icons' -import { useNavigate } from 'react-router' -import Icon from '../../components/General/Icon' -import ConnectionIcon from '/icons/connection.svg' import { convertSecondsToTimerFormat } from '../../utilities' type SyncStatusProps = { @@ -21,7 +18,6 @@ const SyncStatus = ({ changeSetIsAwaitingPairing, }: SyncStatusProps) => { const [elapsedTime, setElapsedTime] = useState(0) - const navigate = useNavigate() const resetTimer = () => { setElapsedTime(0) @@ -33,7 +29,7 @@ const SyncStatus = ({ if (isPairing) { timer = setInterval(() => { - setElapsedTime(prevTime => prevTime + 1) + setElapsedTime(prevTime => prevTime + 1000) if (elapsedTime >= 180) { changeSetIsAwaitingPairing(true) } @@ -47,10 +43,6 @@ const SyncStatus = ({ const timer = convertSecondsToTimerFormat(elapsedTime) - const connectViaIpHandler = () => { - navigate('/connect-device') - } - return ( @@ -89,13 +81,6 @@ const SyncStatus = ({ icon={} /> )} - {isAwaitingPairing && ( - - - - )} ) } From f00275071b29c182722d06e0f197b8373422e9af Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 14 Dec 2023 10:56:20 +0200 Subject: [PATCH 156/173] feat: add handler to real connect button --- src/pages/PairDevice/PairDevice.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index e8a7ac9a..d29d9af1 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -2,6 +2,7 @@ import { NodeIcon } from '@status-im/icons' import { Separator, XStack, YStack } from 'tamagui' import { useState } from 'react' import { Button, Text } from '@status-im/components' +import { useNavigate } from 'react-router-dom' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import SyncStatus from './SyncStatus' @@ -14,6 +15,7 @@ import Icon from '../../components/General/Icon' const PairDevice = () => { const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) + const navigate = useNavigate() const isPaired = false const isPairing = false @@ -21,6 +23,10 @@ const PairDevice = () => { setIsAwaitingPairing(result) } + const connectViaIpHandler = () => { + navigate('/connect-device') + } + return ( @@ -48,6 +54,7 @@ const PairDevice = () => { From bc92263498c665aa9c6b7b956a840cd866400d1e Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 14 Dec 2023 11:00:27 +0200 Subject: [PATCH 157/173] feat: center items for sync status --- src/pages/PairDevice/SyncStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx index dc151587..e8eb3de4 100644 --- a/src/pages/PairDevice/SyncStatus.tsx +++ b/src/pages/PairDevice/SyncStatus.tsx @@ -45,7 +45,7 @@ const SyncStatus = ({ return ( - + Device Sync Status From c3df7110743e83a87f53ebe6e160b9eb34f2fa8b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 15 Dec 2023 10:06:10 +0200 Subject: [PATCH 158/173] fix: format every file --- src/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.css b/src/index.css index 438e3bf0..507f630a 100644 --- a/src/index.css +++ b/src/index.css @@ -137,8 +137,8 @@ ul li { flex-direction: column; gap: 12px; } -} - +} + @media (max-width: 900px) { .right-sidebar-wrapper { display: none; From 0e21f85fb6c65dabd004da77c3b50c40604bb664 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 15 Dec 2023 10:20:22 +0200 Subject: [PATCH 159/173] fix: make landing page css to module --- .../LandingPage/{LandingPage.css => LandingPage.module.css} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/pages/LandingPage/{LandingPage.css => LandingPage.module.css} (94%) diff --git a/src/pages/LandingPage/LandingPage.css b/src/pages/LandingPage/LandingPage.module.css similarity index 94% rename from src/pages/LandingPage/LandingPage.css rename to src/pages/LandingPage/LandingPage.module.css index af856f8c..b6cb7c17 100644 --- a/src/pages/LandingPage/LandingPage.css +++ b/src/pages/LandingPage/LandingPage.module.css @@ -1,3 +1,3 @@ .landing-page { height: 100%; -} +} \ No newline at end of file From 216ac601b2305e338f40d0bb50bdd3f5cfb8da68 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 15 Dec 2023 10:22:00 +0200 Subject: [PATCH 160/173] feat: add styles to landing page --- src/pages/LandingPage/LandingPage.module.css | 10 ++++++++++ src/pages/LandingPage/LandingPage.tsx | 14 +++++++------- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/pages/LandingPage/LandingPage.module.css b/src/pages/LandingPage/LandingPage.module.css index b6cb7c17..c870d289 100644 --- a/src/pages/LandingPage/LandingPage.module.css +++ b/src/pages/LandingPage/LandingPage.module.css @@ -1,3 +1,13 @@ .landing-page { height: 100%; +} + +.landing-texts { + margin: 30vh 0 4vh; +} + +@media (max-width: 1000px) { + .landing-texts { + margin-top: 20vh; + } } \ No newline at end of file diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 3e339178..851ada25 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -1,11 +1,12 @@ -import './LandingPage.css' +import { useNavigate } from 'react-router' import { XStack, YStack } from 'tamagui' -import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' -import NimbusLogo from '../../components/Logos/NimbusLogo' import { NodeIcon } from '@status-im/icons' import { Button as StatusButton, Text } from '@status-im/components' + +import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar' -import { useNavigate } from 'react-router' +import NimbusLogo from '../../components/Logos/NimbusLogo' +import styles from './LandingPage.module.css' const LandingPage = () => { const navigate = useNavigate() @@ -17,11 +18,11 @@ const LandingPage = () => { return ( <> - + - + Light and performant clients, for all Ethereum validators. @@ -30,7 +31,6 @@ const LandingPage = () => { you wish to run in a completely trustless and decentralized manner. - } onPress={getStartedHanlder}> Get Started From 19c45eeb6b8b98eaf225d31b99a40cbe07162d28 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 15 Dec 2023 10:24:05 +0200 Subject: [PATCH 161/173] feat: add responsive to quick start bar --- .../General/QuickStartBar/QuickStartBar.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/General/QuickStartBar/QuickStartBar.css b/src/components/General/QuickStartBar/QuickStartBar.css index e793a352..f50ed857 100644 --- a/src/components/General/QuickStartBar/QuickStartBar.css +++ b/src/components/General/QuickStartBar/QuickStartBar.css @@ -26,3 +26,15 @@ color: #0d1625; font-size: 13px; } + +@media (max-width: 1000px) { + .quick-start-bar { + top: 0; + width: max-content; + margin: 0 20px; + } + + .quick-start-bar ul li { + font-size: 11px; + } +} \ No newline at end of file From a4fc6a67968c08db1ff84bcd3ff268602c98cc10 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 15 Dec 2023 10:27:03 +0200 Subject: [PATCH 162/173] fix: make quick start bar css to module --- .../{QuickStartBar.css => QuickStartBar.module.css} | 0 src/components/General/QuickStartBar/QuickStartBar.tsx | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/components/General/QuickStartBar/{QuickStartBar.css => QuickStartBar.module.css} (100%) diff --git a/src/components/General/QuickStartBar/QuickStartBar.css b/src/components/General/QuickStartBar/QuickStartBar.module.css similarity index 100% rename from src/components/General/QuickStartBar/QuickStartBar.css rename to src/components/General/QuickStartBar/QuickStartBar.module.css diff --git a/src/components/General/QuickStartBar/QuickStartBar.tsx b/src/components/General/QuickStartBar/QuickStartBar.tsx index da93872a..0d729522 100644 --- a/src/components/General/QuickStartBar/QuickStartBar.tsx +++ b/src/components/General/QuickStartBar/QuickStartBar.tsx @@ -1,8 +1,8 @@ -import './QuickStartBar.css' +import styles from './QuickStartBar.module.css' const QuickStartBar = () => { return ( -