From 51c8de04850a3cf497e278fcbd6e99e79200bc89 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 14:02:22 +0200 Subject: [PATCH 01/55] fix:the spacing between the different cards and make it a consistent spacing system --- .../ValidatorOnboarding/Overview/overviewLayout.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css index 9a1a21fe..206313e2 100644 --- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css +++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css @@ -19,6 +19,6 @@ } .overviewCard { width: 35%; - margin-bottom: 16px; + } } From 34f70989ee32f6d23b50bb437c4f91a635adecf8 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 14:06:59 +0200 Subject: [PATCH 02/55] Move continue button to the left of the layout --- src/pages/ValidatorOnboarding/ContinueButton.tsx | 8 +++++++- .../Overview/overviewLayout.module.css | 1 - 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 672aa11b..d5238ec5 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -15,8 +15,10 @@ import { setIsCopyPastedPhrase, setValidWords, } from '../../redux/ValidatorOnboarding/KeyGeneration/slice' +import { useWindowSize } from '../../hooks/useWindowSize' const ContinueButton = () => { + const windowSize = useWindowSize() const [isDisabled, setIsDisabled] = useState(false) const { isCopyPastedPhrase, @@ -114,7 +116,11 @@ const ContinueButton = () => { Date: Thu, 25 Jan 2024 14:08:59 +0200 Subject: [PATCH 03/55] fix:Add spacing between text content and card --- src/pages/ValidatorOnboarding/Overview/Overview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index 0e564336..2242ef63 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -12,7 +12,7 @@ const Overview = () => { imgHeight="250%" rightImageSrc="./background-images/sync-status-background.png" > - + Overview From 0c3969e665d4ac2923e6af4cbed92e6d34d87828 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 14:18:01 +0200 Subject: [PATCH 04/55] fix:Reduce text size for top progress indicators --- src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index bb3ac14b..84b171ed 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -103,7 +103,7 @@ const stepStyle = { inactiveTextColor: '#000000', size: '28px', circleFontSize: '0px', - labelFontSize: '14px', + labelFontSize: '13px', borderRadius: '50%', fontWeight: 700, } From 3c79e6ef37267abd5b7f2e48fded7f28e83f2a4b Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 14:26:16 +0200 Subject: [PATCH 05/55] fix:Fix title spacing similar to the next Advisories page --- src/pages/ValidatorOnboarding/Overview/Overview.tsx | 10 ++++++---- .../Overview/overviewLayout.module.css | 1 + 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index 2242ef63..4f5481f4 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -1,4 +1,4 @@ -import { YStack } from 'tamagui' +import { YStack, Stack } from 'tamagui' import { Text } from '@status-im/components' import OverviewCard from './OverviewCard' @@ -13,9 +13,11 @@ const Overview = () => { rightImageSrc="./background-images/sync-status-background.png" > - - Overview - + + + Overview + + Becoming a validator is a big responsibility with important preparation steps. Only start the deposit process when you're ready. diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css index 5d3bad24..9e425f5c 100644 --- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css +++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css @@ -5,6 +5,7 @@ flex-wrap: wrap; width: 250%; } + .overviewCard { border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.15); From a2e7549ce2baad971d669ec0b9db13922803b5a7 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 14:33:10 +0200 Subject: [PATCH 06/55] fix: Fix wrapping issue. use same styling as the page before --- .../ValidatorOnboarding/Advisories/AdvisoriesContent.tsx | 4 +++- .../Advisories/advisoriesLayout.module.css | 1 - src/pages/ValidatorOnboarding/ContinueButton.tsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx index d3122954..06c6a06f 100644 --- a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx +++ b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx @@ -1,6 +1,7 @@ import { Text } from '@status-im/components' import { Link } from 'react-router-dom' import { Stack, YStack } from 'tamagui' +import { useWindowSize } from '../../../hooks/useWindowSize' type AdvisoriesContentProps = { title: string @@ -8,8 +9,9 @@ type AdvisoriesContentProps = { } const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => { + const windowSize = useWindowSize() return ( - + {title} diff --git a/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.module.css b/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.module.css index 61411116..e33d84e2 100644 --- a/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.module.css +++ b/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.module.css @@ -2,7 +2,6 @@ display: flex; padding: 30px; justify-content: space-between; - width: auto; } .advisories-nav { display: flex; diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index d5238ec5..60cb496f 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -118,7 +118,7 @@ const ContinueButton = () => { width: '100%', justifyContent: isActivationValScreen ? 'space-between' - : windowSize.width < 720 + : windowSize.width < 560 ? 'start' : 'end', alignItems: 'center', From 458b5ec1bc266f579fa2720db2ad3223288cebe5 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 15:17:45 +0200 Subject: [PATCH 07/55] fix:Fix spacing for cards and text sections on top --- .../ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx index a0bd57cf..57b31c36 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx @@ -10,6 +10,7 @@ const PairedDeviceCard = () => { padding: '6px 12px', border: '1px solid #DCE0E5', borderRadius: '10px', + marginBottom:'20px' }} alignItems={'center'} > From 4ac624dd8640d9638f1c5c10a16b65da743bc215 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 15:23:14 +0200 Subject: [PATCH 08/55] fix: Make the Paired device card full width for mobile --- .../ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx index 57b31c36..31258d92 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx @@ -1,8 +1,10 @@ import { XStack, YStack } from 'tamagui' import { InfoBadgeIcon } from '@status-im/icons' import { Avatar, Text } from '@status-im/components' +import { useWindowSize } from '../../../../hooks/useWindowSize' const PairedDeviceCard = () => { + const windowSize = useWindowSize() return ( { padding: '6px 12px', border: '1px solid #DCE0E5', borderRadius: '10px', - marginBottom:'20px' + marginBottom: '20px', + width: windowSize.width < 580 ? '100%' : 'auto', }} + justifyContent="space-between" alignItems={'center'} > - + Date: Thu, 25 Jan 2024 15:24:18 +0200 Subject: [PATCH 09/55] fix:title --- .../ValidatorSetup/ConsensusClient/ConsensusSelection.tsx | 2 +- .../ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx | 2 +- .../ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx index 8f0cd62d..63272ff7 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx @@ -35,7 +35,7 @@ const ConsensusSelection = () => { - Validator Setup + Client Setup diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx index 659af4a0..5e106cea 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx @@ -20,7 +20,7 @@ const ValidatorSetupInstall = () => { return ( - Validator Setup + Client Setup { > - Validator Setup + Client Setup From 29049e951f0fbbfc19249eb1edcc8b94ed51babb Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 19:56:08 +0200 Subject: [PATCH 10/55] fix major markdown bug --- src/components/General/Markdown/Markdown.tsx | 11 +++++- .../InstallLayout.module.css | 38 ++++++++++++++----- .../ValidatorInstalling/OSCards.tsx | 4 +- .../ValidatorInstalling/ValidatorInstall.tsx | 1 + 4 files changed, 40 insertions(+), 14 deletions(-) diff --git a/src/components/General/Markdown/Markdown.tsx b/src/components/General/Markdown/Markdown.tsx index 6df0068a..0dda3e8c 100644 --- a/src/components/General/Markdown/Markdown.tsx +++ b/src/components/General/Markdown/Markdown.tsx @@ -1,13 +1,20 @@ import ReactMarkdown from 'react-markdown' - +import styles from './../../../pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css' import MarkdownLink from './MarkdownLink' type MarkdownProps = { children: string } + const Markdown = ({ children }: MarkdownProps) => { - return + return ( + + ) } export default Markdown diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css index f95f66da..c7823d17 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css @@ -1,4 +1,4 @@ -.osCardsContainer { +.os-cards-container { display: flex; justify-content: space-between; display: grid; @@ -7,36 +7,54 @@ grid-template-columns: repeat(3, 1fr); } -.osCard { +.os-card { border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 16px; padding: 12px 16px; cursor: pointer; box-sizing: border-box; } - -.osCardSelected { +.markdown-text { + overflow-x: auto; + + width: 90%; +} +.os-card-selected { background-color: #2a4af50d; border: 1px solid #2a4af566; + border-radius: 16px; + padding: 12px 16px; + cursor: pointer; + box-sizing: border-box; } @media (max-width: 1000px) { - .osCardsContainer { + .os-cards-container { grid-template-columns: repeat(2, 1fr); } - .osCard:nth-child(3) { + .os-card:nth-child(3) { width: 205%; } } -@media (max-width: 750px) { - .osCardsContainer { +@media (max-width: 850px) { + .os-cards-container { grid-template-columns: repeat(1, 1fr); } - .osCard { + .os-card { width: 100%; } - .osCard:nth-child(3) { + .os-card:nth-child(3) { width: 100%; } } +@media (max-width: 750px) { + .os-cards-container { + grid-template-columns: repeat(1, 0.9fr); + } +} +@media (max-width: 650px) { + .os-cards-container { + grid-template-columns: repeat(1, 0.7fr); + } +} diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx index 9c50ce40..ac29e2ad 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx @@ -14,11 +14,11 @@ type OSCardsProps = { } const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => { return ( -
+
{cards.map(card => (
handleOSCardClick(card.name)} > diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx index 5e106cea..dd49e759 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx @@ -38,6 +38,7 @@ const ValidatorSetupInstall = () => { + From 0ffe92dabf62c131d5f1ff9f2d679358f6a3b2bb Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 20:10:46 +0200 Subject: [PATCH 11/55] Update InstallLayout.module.css --- .../ValidatorInstalling/InstallLayout.module.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css index c7823d17..bfc377d3 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css @@ -16,8 +16,7 @@ } .markdown-text { overflow-x: auto; - - width: 90%; + width: 100%; } .os-card-selected { background-color: #2a4af50d; @@ -52,9 +51,18 @@ .os-cards-container { grid-template-columns: repeat(1, 0.9fr); } + .markdown-text { + + width: 80%; + } + } @media (max-width: 650px) { .os-cards-container { - grid-template-columns: repeat(1, 0.7fr); + grid-template-columns: repeat(1, 0.65fr); + } + .markdown-text { + overflow-x: auto; + width: 70%; } } From 8746d9a8aff20d00fa68a97c257ea4965e480556 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 20:14:28 +0200 Subject: [PATCH 12/55] :( --- .../InstallLayout.module.css | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css index bfc377d3..eeddbcd2 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css @@ -47,22 +47,3 @@ width: 100%; } } -@media (max-width: 750px) { - .os-cards-container { - grid-template-columns: repeat(1, 0.9fr); - } - .markdown-text { - - width: 80%; - } - -} -@media (max-width: 650px) { - .os-cards-container { - grid-template-columns: repeat(1, 0.65fr); - } - .markdown-text { - overflow-x: auto; - width: 70%; - } -} From dcf1a0dbfcace5420f6c72e480c2778e89e94420 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 20:14:32 +0200 Subject: [PATCH 13/55] Update ValidatorInstall.tsx --- .../ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx index dd49e759..c8849f2c 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx @@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => { } return ( - + Client Setup From 2528ef0f76676d8f209111eb260ec7b2880d7f28 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 23:11:31 +0200 Subject: [PATCH 14/55] Fix: fix client card --- .../ValidatorSetup/ConsensusClient/ConsensusClientCard.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusClientCard.tsx index 734bc970..4bf15cf6 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusClientCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusClientCard.tsx @@ -2,6 +2,7 @@ import { Stack, YStack } from 'tamagui' import { Text } from '@status-im/components' import Icon from '../../../../components/General/Icon' +import { useWindowSize } from '../../../../hooks/useWindowSize' type ConsensusClientCardProps = { name: string @@ -9,6 +10,7 @@ type ConsensusClientCardProps = { } const ConsensusClientCard = ({ name, icon }: ConsensusClientCardProps) => { + const windowSize = useWindowSize() return ( { border: '1px solid #2A4AF5', borderRadius: '16px', padding: '12px 16px', - width: '29%', cursor: 'pointer', + minWidth: '250px', + width: windowSize.width < 780 ? '100%' : 'auto', }} space={'$8'} > From a0edfd71137fcd22c565b776ddbb147e487ec36e Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 25 Jan 2024 23:12:06 +0200 Subject: [PATCH 15/55] fix: content of consensus --- .../ValidatorSetup/ConsensusClient/ConsensusSelection.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx index 63272ff7..0839c4ad 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx @@ -7,6 +7,7 @@ import ConsensusGaugeCard from './ConsensusGaugeCard' import ConsensusClientCard from './ConsensusClientCard' import LinkWithArrow from '../../../../components/General/LinkWithArrow' import { RootState } from '../../../../redux/store' +import { useWindowSize } from '../../../../hooks/useWindowSize' const clientIcons = { Nethermind: '/icons/nethermind-circle.png', @@ -17,6 +18,7 @@ const clientIcons = { } const ConsensusSelection = () => { + const windowSize = useWindowSize() const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) as | 'Nethermind' | 'Besu' @@ -70,7 +72,7 @@ const ConsensusSelection = () => { - + The resource efficient Ethereum Clients. {selectedClient} is a client implementation for both execution and consensus layers that From 436a2776a2b14ff08344da5e961490a0a94efb27 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 26 Jan 2024 10:22:04 +0200 Subject: [PATCH 16/55] fix:consensusGaugeCard to work responsive --- .../ConsensusClient/ConsensusGaugeCard.tsx | 82 +++++++++++-------- 1 file changed, 48 insertions(+), 34 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx index b0e17f47..8169048a 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx @@ -5,6 +5,7 @@ import { Text } from '@status-im/components' import StandardGauge from '../../../../components/Charts/StandardGauge' import BorderBox from '../../../../components/General/BorderBox' import { formatNumbersWithComa } from '../../../../utilities' +import { useWindowSize } from '../../../../hooks/useWindowSize' type ConsensusGaugeCardProps = { synced: number @@ -14,43 +15,56 @@ type ConsensusGaugeCardProps = { } const ConsensusGaugeCard = ({ synced, total, title, color }: ConsensusGaugeCardProps) => { + const windowSize = useWindowSize() return ( - - - - - - - - {title} - - - {formatNumbersWithComa(synced)} / {formatNumbersWithComa(total)} - - + + + + + + + + + {title} + + + {formatNumbersWithComa(synced)} / {formatNumbersWithComa(total)} + + + - + ) } From 9ab4bef8e66cd2b5872a99ea30d02e33708b7964 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 26 Jan 2024 10:22:22 +0200 Subject: [PATCH 17/55] fix: paired device card to be the right size --- .../ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx index 31258d92..04d3d35c 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx @@ -13,7 +13,7 @@ const PairedDeviceCard = () => { border: '1px solid #DCE0E5', borderRadius: '10px', marginBottom: '20px', - width: windowSize.width < 580 ? '100%' : 'auto', + width: windowSize.width < 580 ? '90%' : 'auto', }} justifyContent="space-between" alignItems={'center'} From 3fcd265d44bdb96a100a49266cf86c1c59c551bb Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 26 Jan 2024 10:39:07 +0200 Subject: [PATCH 18/55] fix both cards --- .../ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx | 2 +- .../ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx index 8169048a..091ef297 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx @@ -23,7 +23,7 @@ const ConsensusGaugeCard = ({ synced, total, title, color }: ConsensusGaugeCardP borderRadius: '10px', padding: '6px 12px', borderWidth: '0.5px', - width: windowSize.width < 580 ? '90%' : 'auto', +width: windowSize.width < 580 ? '100%' : 'auto', height: '100%', }} > diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx index 04d3d35c..31258d92 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx @@ -13,7 +13,7 @@ const PairedDeviceCard = () => { border: '1px solid #DCE0E5', borderRadius: '10px', marginBottom: '20px', - width: windowSize.width < 580 ? '90%' : 'auto', + width: windowSize.width < 580 ? '100%' : 'auto', }} justifyContent="space-between" alignItems={'center'} From 692f36ca96989c0a1375961e04ad3a0eb7044c1f Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 26 Jan 2024 10:39:22 +0200 Subject: [PATCH 19/55] Make parent responsive --- .../ConsensusClient/ConsensusSelection.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx index 0839c4ad..8476c29c 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx @@ -39,7 +39,12 @@ const ConsensusSelection = () => { Client Setup - + { - + The resource efficient Ethereum Clients. {selectedClient} is a client implementation for both execution and consensus layers that From c950617643d5a93f39a0e76595de5fc06b1276b0 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 26 Jan 2024 10:46:05 +0200 Subject: [PATCH 20/55] format --- src/components/General/Markdown/Markdown.tsx | 1 - src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx | 2 +- .../ValidatorOnboarding/Overview/overviewLayout.module.css | 2 +- .../ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx | 2 +- .../ValidatorSetup/ConsensusClient/ConsensusSelection.tsx | 2 +- .../ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx | 2 +- 6 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/General/Markdown/Markdown.tsx b/src/components/General/Markdown/Markdown.tsx index 0dda3e8c..188f59c6 100644 --- a/src/components/General/Markdown/Markdown.tsx +++ b/src/components/General/Markdown/Markdown.tsx @@ -6,7 +6,6 @@ type MarkdownProps = { children: string } - const Markdown = ({ children }: MarkdownProps) => { return ( { const windowSize = useWindowSize() return ( - + {title} diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css index 9e425f5c..6e18f298 100644 --- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css +++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css @@ -5,7 +5,7 @@ flex-wrap: wrap; width: 250%; } - + .overviewCard { border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.15); diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx index 091ef297..2639e54f 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx @@ -23,7 +23,7 @@ const ConsensusGaugeCard = ({ synced, total, title, color }: ConsensusGaugeCardP borderRadius: '10px', padding: '6px 12px', borderWidth: '0.5px', -width: windowSize.width < 580 ? '100%' : 'auto', + width: windowSize.width < 580 ? '100%' : 'auto', height: '100%', }} > diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx index 8476c29c..8ce947f4 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx @@ -43,7 +43,7 @@ const ConsensusSelection = () => { space={'$2'} flexWrap={windowSize.width < 735 ? 'wrap' : 'nowrap'} marginTop={windowSize.width < 735 ? '20px' : 0} - width={windowSize.width < 580 ? '100%' : 'auto'} + width={windowSize.width < 580 ? '100%' : 'auto'} > diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx index c8849f2c..c756aa29 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx @@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => { } return ( - + Client Setup From 00869e7794119712467080f777cf74b545a31528 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 26 Jan 2024 10:55:50 +0200 Subject: [PATCH 21/55] clear code --- .../ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx index 2639e54f..82ebbd9d 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx @@ -3,7 +3,6 @@ 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 { useWindowSize } from '../../../../hooks/useWindowSize' From 26ab5e977c7b1672678f74fdddf92ed03c57a4b5 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Sat, 27 Jan 2024 08:22:08 +0200 Subject: [PATCH 22/55] fix:makke actiovation cards take whole width --- src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx index cca9b23f..ecb0ddaa 100644 --- a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx +++ b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx @@ -26,7 +26,8 @@ const ActivationCard = ({ border: '1px solid rgba(0, 0, 0, 0.15)', padding: '12px 16px', backgroundColor: '#FFF', - width: '100%', + + flex: 1, }} > {!isGaugeIncluded && ( From 5651b2d9fd02b5b32ce59e2d9e5ce145f74cfef5 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Sat, 27 Jan 2024 08:22:26 +0200 Subject: [PATCH 23/55] fix: make validator setup activation responsive --- .../ValidatorActivation/ActivationValidatorSetup.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx index 56c8b49c..65878aa1 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx @@ -4,10 +4,11 @@ import { Text } from '@status-im/components' import Confetti from 'react-confetti' import ActivationCard from '../../Activation/ActivationCard' +import { useWindowSize } from '../../../../hooks/useWindowSize' const ActivationValidatorSetup = () => { const [showConfetti, setShowConfetti] = useState(true) - + const windowSize = useWindowSize() useEffect(() => { const timer = setTimeout(() => { setShowConfetti(false) @@ -19,7 +20,7 @@ const ActivationValidatorSetup = () => { }, []) return ( - + {showConfetti && } @@ -33,8 +34,8 @@ const ActivationValidatorSetup = () => { up your validators and making a deposit. - - + + { gaugeTotal={172.503} /> - + From c9aacf51fa7e46cd6661801c7253b2e3e4467a3c Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Sat, 27 Jan 2024 09:22:05 +0200 Subject: [PATCH 24/55] fix: add space between cards in column --- src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx index ecb0ddaa..1c7a70ce 100644 --- a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx +++ b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx @@ -9,6 +9,7 @@ type ActivationCardProps = { gaugeColor?: string gaugeSynced?: number gaugeTotal?: number + isLast?: boolean } const ActivationCard = ({ @@ -18,6 +19,7 @@ const ActivationCard = ({ gaugeColor, gaugeSynced, gaugeTotal, + isLast, }: ActivationCardProps) => { return ( From afb4a2d255bb47d42030fc94c308bd54ea014f98 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Sat, 27 Jan 2024 09:22:37 +0200 Subject: [PATCH 25/55] pass new props --- .../ValidatorActivation/ActivationValidatorSetup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx index 65878aa1..ecde7482 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx @@ -54,7 +54,7 @@ const ActivationValidatorSetup = () => { - + From 3b32c83347eedd9882465a5c21b780ed99518be8 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 13:08:26 +0200 Subject: [PATCH 26/55] add sub-urls for validator onboarding --- src/App.tsx | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 17932d8e..d92fb1af 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,6 +21,18 @@ import LogsPage from './pages/LogsPage/LogsPage' import { ethereumRopsten, wcV2InitOptions, apiKey } from './constants' import './App.css' +//ValidatorOnboarding sub-routes +import Overview from './pages/ValidatorOnboarding/Overview/Overview' +import Advisories from './pages/ValidatorOnboarding/Advisories/Advisories' +import ValidatorSetup from './pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup' +import ValidatorSetupInstall from './pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall' +import ConsensusSelection from './pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection' +import ActivationValidatorSetup from './pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup' +import ClientSetup from './pages/ValidatorOnboarding/ClientSetup/ClientSetup' +import KeyGeneration from './pages/ValidatorOnboarding/KeyGeneration/KeyGeneration' +import Deposit from './pages/ValidatorOnboarding/Deposit/Deposit' +import Activation from './pages/ValidatorOnboarding/Activation/Activation' + const injected = injectedModule() const walletConnect = walletConnectModule(wcV2InitOptions) @@ -55,10 +67,53 @@ const router = createBrowserRouter([ element: , }, { path: '/create-local-node', element: }, - { path: '/validator-onboarding', element: }, + { + path: '/validator-onboarding', + children: [ + { path: '', element: }, + { path: 'advisories', element: }, + { path: 'validator-setup', element: }, + { path: 'validator-setup-install', element: }, + { path: 'consensus-selection', element: }, + { path: 'activation-validator-setup', element: }, + { path: 'client-setup', element: }, + { path: 'key-generation', element: }, + { path: 'deposit', element: }, + { + path: 'activation', + element: ( + + ), + }, + ], + element: , + }, { path: '/dashboard', element: }, { path: '/logs', element: }, - { path: '/validator-management', element: }, + { + path: '/validator-management', + + element: , + }, ]) function App() { From 6be043bad0aae4ba5d5aa00390cda7307f39d0f9 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 13:08:47 +0200 Subject: [PATCH 27/55] fix continue button to work with sub-urls --- .../ValidatorOnboarding/ContinueButton.tsx | 43 +++++++++++++------ 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 60cb496f..1dcb7c93 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -29,6 +29,20 @@ const ContinueButton = () => { generatedMnemonic, } = useSelector((state: RootState) => state.keyGeneration) + const stepToPathMap: (string | string[])[] = [ + '/validator-onboarding/overview', + '/validator-onboarding/advisories', + [ + '/validator-onboarding/validator-setup', + '/validator-onboarding/validator-setup-install', + '/validator-onboarding/consensus-selection', + '/validator-onboarding/activation-validator-setup', + ], + '/validator-onboarding/client-setup', + '/validator-onboarding/key-generation', + '/validator-onboarding/deposit', + '/dashboard', + ] const { activeStep, subStepValidatorSetup } = useSelector( (state: RootState) => state.validatorOnboarding, ) @@ -97,21 +111,22 @@ const ContinueButton = () => { } const continueHandler = () => { - if (activeStep === 1) { - handleStep1() - } else if (activeStep === 2) { - handleStep2() - } else if (activeStep === 4) { - handleStep4() - } else { - if (activeStep < 6) { - dispatch(setActiveStep(activeStep + 1)) - } else { - navigate('/dashboard') - } - } - } + let nextPath: string + if (activeStep === 2) { + const paths = stepToPathMap[activeStep] + if (Array.isArray(paths)) { + nextPath = paths[subStepValidatorSetup + 1] || '/dashboard' + } else { + nextPath = '/dashboard' + } + } else { + const path = stepToPathMap[activeStep + 1] + nextPath = typeof path === 'string' ? path : '/dashboard' + } + + navigate(nextPath) + } return ( Date: Mon, 29 Jan 2024 13:09:04 +0200 Subject: [PATCH 28/55] Use Outlet component to get children componnets --- .../ValidatorOnboarding.tsx | 33 ++----------------- 1 file changed, 2 insertions(+), 31 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 8f92a7a7..b3409829 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -18,6 +18,7 @@ import ActivationValidatorSetup from './ValidatorSetup/ValidatorActivation/Activ import Deposit from './Deposit/Deposit' import { useWindowSize } from '../../hooks/useWindowSize' import styles from './layoutGradient.module.css' +import { Outlet } from 'react-router-dom'; const ValidatorOnboarding = () => { const { activeStep, subStepValidatorSetup } = useSelector( @@ -42,37 +43,7 @@ const ValidatorOnboarding = () => { /> - {activeStep === 0 && } - {activeStep === 1 && } - {activeStep === 2 && subStepValidatorSetup === 0 && } - {activeStep === 2 && subStepValidatorSetup === 1 && } - {activeStep === 2 && subStepValidatorSetup === 2 && } - {activeStep === 2 && subStepValidatorSetup === 3 && } - {activeStep === 3 && } - {activeStep === 4 && } - {activeStep === 5 && } - {activeStep === 6 && ( - - )} + From c68b3e678f39bbd4029dadf2214c8211d1f92275 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 13:48:28 +0200 Subject: [PATCH 29/55] fix: form stepper to read urls --- .../FormStepper/FormStepper.tsx | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index 84b171ed..cb126085 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -1,6 +1,6 @@ import { Stepper, Step } from 'react-form-stepper' +import { useNavigate } from 'react-router-dom' import { useDispatch } from 'react-redux' - import { setActiveStep } from '../../../redux/ValidatorOnboarding/slice' import { FORM_STEPS } from '../../../constants' import { useWindowSize } from '../../../hooks/useWindowSize' @@ -12,14 +12,28 @@ type FormStepperProps = { const FormStepper = ({ activeStep }: FormStepperProps) => { const dispatch = useDispatch() + const navigate = useNavigate() const windowSize = useWindowSize() + const stepToUrlMap = [ + '/validator-onboarding/', + '/validator-onboarding/advisories', + '/validator-onboarding/validator-setup', + '/validator-onboarding/validator-setup-install', + '/validator-onboarding/consensus-selection', + '/validator-onboarding/activation-validator-setup', + '/validator-onboarding/client-setup', + '/validator-onboarding/key-generation', + '/validator-onboarding/deposit', + '/validator-onboarding/activation', + // Add more steps as needed + ] + const getIsStepVisible = (index: number, stepsBefore: number, stepsAfter: number) => { const totalSteps = FORM_STEPS.length let start = activeStep - stepsBefore let end = activeStep + stepsAfter - // active step is near the start or end if (start < 0) { end -= start start = 0 @@ -37,21 +51,22 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { const isStepVisible = (index: number) => { if (windowSize.width < 774) { - return getIsStepVisible(index, 1, 1) // 3 steps (1 before, 1 after) + return getIsStepVisible(index, 1, 1) } else if (windowSize.width < 963) { - return getIsStepVisible(index, 1, 2) // 4 steps + return getIsStepVisible(index, 1, 2) } else if (windowSize.width < 1183) { - return getIsStepVisible(index, 1, 3) // 5 steps + return getIsStepVisible(index, 1, 3) } else if (windowSize.width < 1300) { - return getIsStepVisible(index, 2, 3) // 6 steps + return getIsStepVisible(index, 2, 3) } else { return true } } const changeStepOnClickHandler = (index: number) => { - if (activeStep > index) { - dispatch(setActiveStep(index)) + const path = stepToUrlMap[index] + if (path) { + navigate(path) } } @@ -87,6 +102,7 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { ) } + const stepStyle = { // For default dots: inactiveBgColor: '#FFFFFF', From e75fe48974e84ced52907b2c7e50f5e39e9e6a99 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 13:48:39 +0200 Subject: [PATCH 30/55] clear code --- .../ValidatorOnboarding/ValidatorOnboarding.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index b3409829..b20028b7 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -4,21 +4,12 @@ import { useSelector } from 'react-redux' import { RootState } from '../../redux/store' import FormStepper from './FormStepper/FormStepper' import Titles from '../../components/General/Titles' -import Overview from './Overview/Overview' -import KeyGeneration from './KeyGeneration/KeyGeneration' -import Activation from './Activation/Activation' import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper' -import ClientSetup from './ClientSetup/ClientSetup' -import ConsensusSelection from './ValidatorSetup/ConsensusClient/ConsensusSelection' -import Advisories from './Advisories/Advisories' -import ValidatorSetup from './ValidatorSetup/ValidatorSetup/ValidatorSetup' -import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstalling/ValidatorInstall' import ContinueButton from './ContinueButton' -import ActivationValidatorSetup from './ValidatorSetup/ValidatorActivation/ActivationValidatorSetup' -import Deposit from './Deposit/Deposit' + import { useWindowSize } from '../../hooks/useWindowSize' import styles from './layoutGradient.module.css' -import { Outlet } from 'react-router-dom'; +import { Outlet } from 'react-router-dom' const ValidatorOnboarding = () => { const { activeStep, subStepValidatorSetup } = useSelector( @@ -43,7 +34,7 @@ const ValidatorOnboarding = () => { /> - + From 40db43bf890b5f2206652765639d78eba2816a49 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 13:48:59 +0200 Subject: [PATCH 31/55] fix continue button to work with all steps --- .../ValidatorOnboarding/ContinueButton.tsx | 184 +++++++----------- 1 file changed, 69 insertions(+), 115 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 1dcb7c93..565b55a4 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -1,25 +1,36 @@ -import { Stack, XStack } from 'tamagui' -import { Button, InformationBox } from '@status-im/components' -import { CloseCircleIcon } from '@status-im/icons' - -import { useDispatch, useSelector } from 'react-redux' -import { useEffect, useState } from 'react' -import { useNavigate } from 'react-router-dom' - -import { RootState } from '../../redux/store' -import LinkWithArrow from '../../components/General/LinkWithArrow' -import { setActiveStep, setSubStepValidatorSetup } from '../../redux/ValidatorOnboarding/slice' -import { KEYSTORE_FILES } from '../../constants' -import { - setIsConfirmPhraseStage, - setIsCopyPastedPhrase, - setValidWords, -} from '../../redux/ValidatorOnboarding/KeyGeneration/slice' -import { useWindowSize } from '../../hooks/useWindowSize' +import { Stack, XStack } from 'tamagui'; +import { Button, InformationBox } from '@status-im/components'; +import { CloseCircleIcon } from '@status-im/icons'; +import { useEffect, useState } from 'react'; +import { useNavigate, useLocation } from 'react-router-dom'; +import { useSelector } from 'react-redux'; +import { RootState } from '../../redux/store'; +import LinkWithArrow from '../../components/General/LinkWithArrow'; +import { useWindowSize } from '../../hooks/useWindowSize'; const ContinueButton = () => { - const windowSize = useWindowSize() - const [isDisabled, setIsDisabled] = useState(false) + const windowSize = useWindowSize(); + const [isDisabled, setIsDisabled] = useState(false); + const navigate = useNavigate(); + const location = useLocation(); + + // Derive the active step index based on the current URL + const pathToStepMap = { + '/validator-onboarding/overview': 0, + '/validator-onboarding/advisories': 1, + '/validator-onboarding/validator-setup': 2, + '/validator-onboarding/validator-setup-install': 3, + '/validator-onboarding/consensus-selection': 4, + '/validator-onboarding/activation-validator-setup': 5, + '/validator-onboarding/client-setup': 6, + '/validator-onboarding/key-generation': 7, + '/validator-onboarding/deposit': 8, + '/validator-onboarding/activation': 9, + // Add more mappings as needed + }; + + const activeStep = pathToStepMap[location.pathname] || 0; + const { isCopyPastedPhrase, mnemonic, @@ -27,115 +38,60 @@ const ContinueButton = () => { isConfirmPhraseStage, recoveryMechanism, generatedMnemonic, - } = useSelector((state: RootState) => state.keyGeneration) + } = useSelector((state: RootState) => state.keyGeneration); - const stepToPathMap: (string | string[])[] = [ - '/validator-onboarding/overview', - '/validator-onboarding/advisories', - [ - '/validator-onboarding/validator-setup', - '/validator-onboarding/validator-setup-install', - '/validator-onboarding/consensus-selection', - '/validator-onboarding/activation-validator-setup', - ], - '/validator-onboarding/client-setup', - '/validator-onboarding/key-generation', - '/validator-onboarding/deposit', - '/dashboard', - ] - const { activeStep, subStepValidatorSetup } = useSelector( - (state: RootState) => state.validatorOnboarding, - ) - const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup) - - const dispatch = useDispatch() - const navigate = useNavigate() - const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3 + const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup); useEffect(() => { const getDisabledButton = () => { - if (activeStep === 4 && isConfirmPhraseStage) { + if (activeStep === 7 && isConfirmPhraseStage) { if ( validWords.some(w => w === false) || generatedMnemonic.some((w, i) => w !== mnemonic[i]) ) { - return true + return true; } - } else if (activeStep === 3 && !isValidatorSet) { - return true + } else if (activeStep === 6 && !isValidatorSet) { + return true; } - return false - } + return false; + }; - setIsDisabled(getDisabledButton()) + setIsDisabled(getDisabledButton()); }, [ activeStep, - subStepValidatorSetup, isConfirmPhraseStage, mnemonic, validWords, isValidatorSet, - ]) - - const handleStep1 = () => { - dispatch(setActiveStep(activeStep + 1)) - } - - const handleStep2 = () => { - if (subStepValidatorSetup === 3) { - return dispatch(setActiveStep(activeStep + 1)) - } - dispatch(setSubStepValidatorSetup(subStepValidatorSetup + 1)) - } - - const handleStep4 = () => { - if (!isConfirmPhraseStage && recoveryMechanism === KEYSTORE_FILES) { - return dispatch(setActiveStep(activeStep + 1)) - } - - if (!isConfirmPhraseStage) { - return dispatch(setIsConfirmPhraseStage(true)) - } - - if (isConfirmPhraseStage) { - const newValidWords = mnemonic.map((w, index) => generatedMnemonic[index] === w) - dispatch(setValidWords(newValidWords)) - - if (!newValidWords.includes(false)) { - dispatch(setActiveStep(activeStep + 1)) - if (isCopyPastedPhrase) { - dispatch(setIsCopyPastedPhrase(false)) - } - } - } - } + ]); const continueHandler = () => { - let nextPath: string - - if (activeStep === 2) { - const paths = stepToPathMap[activeStep] - if (Array.isArray(paths)) { - nextPath = paths[subStepValidatorSetup + 1] || '/dashboard' - } else { - nextPath = '/dashboard' - } - } else { - const path = stepToPathMap[activeStep + 1] - nextPath = typeof path === 'string' ? path : '/dashboard' + // Logic to determine the next path based on activeStep + // For example, if activeStep is 1 (advisories), navigate to step 2's URL + let nextPath; + switch(activeStep) { + case 0: nextPath = '/validator-onboarding/advisories'; break; + case 1: nextPath = '/validator-onboarding/validator-setup'; break; + case 2: nextPath = '/validator-onboarding/validator-setup-install'; break; + case 3: nextPath = '/validator-onboarding/consensus-selection'; break; + case 4: nextPath = '/validator-onboarding/activation-validator-setup'; break; + case 5: nextPath = '/validator-onboarding/client-setup'; break; + case 6: nextPath = '/validator-onboarding/key-generation'; break; + case 7: nextPath = '/validator-onboarding/deposit'; break; + case 8: nextPath = '/validator-onboarding/activation'; break; + case 9: nextPath = '/dashboard'; break; + default: nextPath = '/validator-onboarding/overview'; } - navigate(nextPath) - } + navigate(nextPath); + }; + return ( { /> )} - {isActivationValScreen && ( - - )} + - ) -} + ); +}; -export default ContinueButton +export default ContinueButton; From 6c92da396bc2b887f61c40ffd69c8cee63aa0c6e Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 14:26:12 +0200 Subject: [PATCH 32/55] clear code --- src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index cb126085..dc751d9d 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -26,7 +26,6 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { '/validator-onboarding/key-generation', '/validator-onboarding/deposit', '/validator-onboarding/activation', - // Add more steps as needed ] const getIsStepVisible = (index: number, stepsBefore: number, stepsAfter: number) => { From 18cfc833422e8e8556dd2b836da8024c1db8b82f Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 17:55:33 +0200 Subject: [PATCH 33/55] Revert "fix continue button to work with all steps" This reverts commit 40db43bf890b5f2206652765639d78eba2816a49. --- .../ValidatorOnboarding/ContinueButton.tsx | 184 +++++++++++------- 1 file changed, 115 insertions(+), 69 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 565b55a4..1dcb7c93 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -1,36 +1,25 @@ -import { Stack, XStack } from 'tamagui'; -import { Button, InformationBox } from '@status-im/components'; -import { CloseCircleIcon } from '@status-im/icons'; -import { useEffect, useState } from 'react'; -import { useNavigate, useLocation } from 'react-router-dom'; -import { useSelector } from 'react-redux'; -import { RootState } from '../../redux/store'; -import LinkWithArrow from '../../components/General/LinkWithArrow'; -import { useWindowSize } from '../../hooks/useWindowSize'; +import { Stack, XStack } from 'tamagui' +import { Button, InformationBox } from '@status-im/components' +import { CloseCircleIcon } from '@status-im/icons' + +import { useDispatch, useSelector } from 'react-redux' +import { useEffect, useState } from 'react' +import { useNavigate } from 'react-router-dom' + +import { RootState } from '../../redux/store' +import LinkWithArrow from '../../components/General/LinkWithArrow' +import { setActiveStep, setSubStepValidatorSetup } from '../../redux/ValidatorOnboarding/slice' +import { KEYSTORE_FILES } from '../../constants' +import { + setIsConfirmPhraseStage, + setIsCopyPastedPhrase, + setValidWords, +} from '../../redux/ValidatorOnboarding/KeyGeneration/slice' +import { useWindowSize } from '../../hooks/useWindowSize' const ContinueButton = () => { - const windowSize = useWindowSize(); - const [isDisabled, setIsDisabled] = useState(false); - const navigate = useNavigate(); - const location = useLocation(); - - // Derive the active step index based on the current URL - const pathToStepMap = { - '/validator-onboarding/overview': 0, - '/validator-onboarding/advisories': 1, - '/validator-onboarding/validator-setup': 2, - '/validator-onboarding/validator-setup-install': 3, - '/validator-onboarding/consensus-selection': 4, - '/validator-onboarding/activation-validator-setup': 5, - '/validator-onboarding/client-setup': 6, - '/validator-onboarding/key-generation': 7, - '/validator-onboarding/deposit': 8, - '/validator-onboarding/activation': 9, - // Add more mappings as needed - }; - - const activeStep = pathToStepMap[location.pathname] || 0; - + const windowSize = useWindowSize() + const [isDisabled, setIsDisabled] = useState(false) const { isCopyPastedPhrase, mnemonic, @@ -38,60 +27,115 @@ const ContinueButton = () => { isConfirmPhraseStage, recoveryMechanism, generatedMnemonic, - } = useSelector((state: RootState) => state.keyGeneration); + } = useSelector((state: RootState) => state.keyGeneration) - const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup); + const stepToPathMap: (string | string[])[] = [ + '/validator-onboarding/overview', + '/validator-onboarding/advisories', + [ + '/validator-onboarding/validator-setup', + '/validator-onboarding/validator-setup-install', + '/validator-onboarding/consensus-selection', + '/validator-onboarding/activation-validator-setup', + ], + '/validator-onboarding/client-setup', + '/validator-onboarding/key-generation', + '/validator-onboarding/deposit', + '/dashboard', + ] + const { activeStep, subStepValidatorSetup } = useSelector( + (state: RootState) => state.validatorOnboarding, + ) + const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup) + + const dispatch = useDispatch() + const navigate = useNavigate() + const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3 useEffect(() => { const getDisabledButton = () => { - if (activeStep === 7 && isConfirmPhraseStage) { + if (activeStep === 4 && isConfirmPhraseStage) { if ( validWords.some(w => w === false) || generatedMnemonic.some((w, i) => w !== mnemonic[i]) ) { - return true; + return true } - } else if (activeStep === 6 && !isValidatorSet) { - return true; + } else if (activeStep === 3 && !isValidatorSet) { + return true } - return false; - }; + return false + } - setIsDisabled(getDisabledButton()); + setIsDisabled(getDisabledButton()) }, [ activeStep, + subStepValidatorSetup, isConfirmPhraseStage, mnemonic, validWords, isValidatorSet, - ]); + ]) - const continueHandler = () => { - // Logic to determine the next path based on activeStep - // For example, if activeStep is 1 (advisories), navigate to step 2's URL - let nextPath; - switch(activeStep) { - case 0: nextPath = '/validator-onboarding/advisories'; break; - case 1: nextPath = '/validator-onboarding/validator-setup'; break; - case 2: nextPath = '/validator-onboarding/validator-setup-install'; break; - case 3: nextPath = '/validator-onboarding/consensus-selection'; break; - case 4: nextPath = '/validator-onboarding/activation-validator-setup'; break; - case 5: nextPath = '/validator-onboarding/client-setup'; break; - case 6: nextPath = '/validator-onboarding/key-generation'; break; - case 7: nextPath = '/validator-onboarding/deposit'; break; - case 8: nextPath = '/validator-onboarding/activation'; break; - case 9: nextPath = '/dashboard'; break; - default: nextPath = '/validator-onboarding/overview'; + const handleStep1 = () => { + dispatch(setActiveStep(activeStep + 1)) + } + + const handleStep2 = () => { + if (subStepValidatorSetup === 3) { + return dispatch(setActiveStep(activeStep + 1)) + } + dispatch(setSubStepValidatorSetup(subStepValidatorSetup + 1)) + } + + const handleStep4 = () => { + if (!isConfirmPhraseStage && recoveryMechanism === KEYSTORE_FILES) { + return dispatch(setActiveStep(activeStep + 1)) } - navigate(nextPath); - }; + if (!isConfirmPhraseStage) { + return dispatch(setIsConfirmPhraseStage(true)) + } + if (isConfirmPhraseStage) { + const newValidWords = mnemonic.map((w, index) => generatedMnemonic[index] === w) + dispatch(setValidWords(newValidWords)) + + if (!newValidWords.includes(false)) { + dispatch(setActiveStep(activeStep + 1)) + if (isCopyPastedPhrase) { + dispatch(setIsCopyPastedPhrase(false)) + } + } + } + } + + const continueHandler = () => { + let nextPath: string + + if (activeStep === 2) { + const paths = stepToPathMap[activeStep] + if (Array.isArray(paths)) { + nextPath = paths[subStepValidatorSetup + 1] || '/dashboard' + } else { + nextPath = '/dashboard' + } + } else { + const path = stepToPathMap[activeStep + 1] + nextPath = typeof path === 'string' ? path : '/dashboard' + } + + navigate(nextPath) + } return ( { /> )} - + {isActivationValScreen && ( + + )} - ); -}; + ) +} -export default ContinueButton; +export default ContinueButton From 9ab31b1a57d1bc4f0925f9ed22b8d83e1119f50c Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 18:33:41 +0200 Subject: [PATCH 34/55] fix continue button to work with all --- .../ValidatorOnboarding/ContinueButton.tsx | 61 ++++++++++--------- 1 file changed, 31 insertions(+), 30 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 1dcb7c93..02a1907b 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -29,39 +29,40 @@ const ContinueButton = () => { generatedMnemonic, } = useSelector((state: RootState) => state.keyGeneration) - const stepToPathMap: (string | string[])[] = [ - '/validator-onboarding/overview', - '/validator-onboarding/advisories', - [ - '/validator-onboarding/validator-setup', - '/validator-onboarding/validator-setup-install', - '/validator-onboarding/consensus-selection', - '/validator-onboarding/activation-validator-setup', - ], - '/validator-onboarding/client-setup', - '/validator-onboarding/key-generation', - '/validator-onboarding/deposit', - '/dashboard', - ] const { activeStep, subStepValidatorSetup } = useSelector( (state: RootState) => state.validatorOnboarding, ) + const dispatch = useDispatch() + + const pathToStepMap = { + '/validator-onboarding/': 0, + '/validator-onboarding/advisories': 1, + '/validator-onboarding/validator-setup': 2, + '/validator-onboarding/validator-setup-install': 3, + '/validator-onboarding/consensus-selection': 4, + '/validator-onboarding/activation-validator-setup': 5, + '/validator-onboarding/client-setup': 6, + '/validator-onboarding/key-generation': 7, + '/validator-onboarding/deposit': 8, + '/validator-onboarding/activation': 9, + } + dispatch(setActiveStep(pathToStepMap[location.pathname as keyof typeof pathToStepMap] || 0)) + const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup) - const dispatch = useDispatch() const navigate = useNavigate() const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3 useEffect(() => { const getDisabledButton = () => { - if (activeStep === 4 && isConfirmPhraseStage) { + if (activeStep === 7 && isConfirmPhraseStage) { if ( validWords.some(w => w === false) || generatedMnemonic.some((w, i) => w !== mnemonic[i]) ) { return true } - } else if (activeStep === 3 && !isValidatorSet) { + } else if (activeStep === 6 && !isValidatorSet) { return true } return false @@ -111,22 +112,22 @@ const ContinueButton = () => { } const continueHandler = () => { - let nextPath: string - - if (activeStep === 2) { - const paths = stepToPathMap[activeStep] - if (Array.isArray(paths)) { - nextPath = paths[subStepValidatorSetup + 1] || '/dashboard' - } else { - nextPath = '/dashboard' - } - } else { - const path = stepToPathMap[activeStep + 1] - nextPath = typeof path === 'string' ? path : '/dashboard' - } + let nextPath + if (activeStep === 0) nextPath = '/validator-onboarding/advisories' + else if (activeStep === 1) nextPath = '/validator-onboarding/validator-setup' + else if (activeStep === 2) nextPath = '/validator-onboarding/validator-setup-install' + else if (activeStep === 3) nextPath = '/validator-onboarding/consensus-selection' + else if (activeStep === 4) nextPath = '/validator-onboarding/activation-validator-setup' + else if (activeStep === 5) nextPath = '/validator-onboarding/client-setup' + else if (activeStep === 6) nextPath = '/validator-onboarding/key-generation' + else if (activeStep === 7) nextPath = '/validator-onboarding/deposit' + else if (activeStep === 8) nextPath = '/validator-onboarding/activation' + else if (activeStep === 9) nextPath = '/dashboard' + else nextPath = '/validator-onboarding/' navigate(nextPath) } + return ( Date: Mon, 29 Jan 2024 18:33:51 +0200 Subject: [PATCH 35/55] clear code --- src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index dc751d9d..1bb5d394 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -1,7 +1,7 @@ import { Stepper, Step } from 'react-form-stepper' import { useNavigate } from 'react-router-dom' import { useDispatch } from 'react-redux' -import { setActiveStep } from '../../../redux/ValidatorOnboarding/slice' + import { FORM_STEPS } from '../../../constants' import { useWindowSize } from '../../../hooks/useWindowSize' import './FormStepper.css' @@ -11,7 +11,6 @@ type FormStepperProps = { } const FormStepper = ({ activeStep }: FormStepperProps) => { - const dispatch = useDispatch() const navigate = useNavigate() const windowSize = useWindowSize() @@ -64,10 +63,13 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { const changeStepOnClickHandler = (index: number) => { const path = stepToUrlMap[index] - if (path) { + if (path && index < activeStep) { navigate(path) } } + if (activeStep > 1) { + activeStep = activeStep < 6 ? 2 : activeStep - 3 + } return ( Date: Mon, 29 Jan 2024 18:34:19 +0200 Subject: [PATCH 36/55] clear code --- src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 2 -- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index 1bb5d394..cdbf22fc 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -1,7 +1,5 @@ import { Stepper, Step } from 'react-form-stepper' import { useNavigate } from 'react-router-dom' -import { useDispatch } from 'react-redux' - import { FORM_STEPS } from '../../../constants' import { useWindowSize } from '../../../hooks/useWindowSize' import './FormStepper.css' diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index b20028b7..79baa6b2 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -12,7 +12,7 @@ import styles from './layoutGradient.module.css' import { Outlet } from 'react-router-dom' const ValidatorOnboarding = () => { - const { activeStep, subStepValidatorSetup } = useSelector( + const { activeStep } = useSelector( (state: RootState) => state.validatorOnboarding, ) const windowSize = useWindowSize() From d17b43d232c0ca74a2773e0a9b0e8ac91cc37a3a Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 18:46:54 +0200 Subject: [PATCH 37/55] fix:remove props to activation --- src/App.tsx | 23 +---------------------- 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d92fb1af..27368f57 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -81,28 +81,7 @@ const router = createBrowserRouter([ { path: 'deposit', element: }, { path: 'activation', - element: ( - - ), + element: , }, ], element: , From e5f2413dd55959d15f08b80ec96a9f12273901a2 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 18:47:16 +0200 Subject: [PATCH 38/55] fix: make activation responsive --- .../Activation/Activation.tsx | 63 +++++++------------ 1 file changed, 22 insertions(+), 41 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx index 0f39ad35..302c4f0d 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx +++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx @@ -5,38 +5,11 @@ import Confetti from 'react-confetti' import ActivationCard from './ActivationCard' import LinkWithArrow from '../../../components/General/LinkWithArrow' +import { useWindowSize } from '../../../hooks/useWindowSize' -type ActivationProps = { - validatorsValue: string - executionSyncStatus1: { - text: string - isGaugeIncluded: boolean - gaugeColor: string - gaugeSynced: number - gaugeTotal: number - } - executionSyncStatus2: { - text: string - isGaugeIncluded: boolean - gaugeColor: string - gaugeSynced: number - gaugeTotal: number - } - currentAPRValue: string - estimatedActivationTimeValue: string - validatorQueueValue: string -} - -const Activation = ({ - validatorsValue, - executionSyncStatus1, - executionSyncStatus2, - currentAPRValue, - estimatedActivationTimeValue, - validatorQueueValue, -}: ActivationProps) => { +const Activation = () => { const [showConfetti, setShowConfetti] = useState(true) - + const windowSize = useWindowSize() useEffect(() => { const timer = setTimeout(() => { setShowConfetti(false) @@ -61,19 +34,27 @@ const Activation = ({ syncing your nodes. - - - - - - - - + + - + + + + + + From 078a68552b72f879ea5685725c043e938ea31562 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 18:47:21 +0200 Subject: [PATCH 39/55] Update ContinueButton.tsx --- src/pages/ValidatorOnboarding/ContinueButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 02a1907b..5cbdcda3 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -160,7 +160,7 @@ const ContinueButton = () => { /> )} ) From d35190cfadb26e5af7a20775e1eb0869715f2807 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 18:47:35 +0200 Subject: [PATCH 40/55] format --- src/pages/ValidatorOnboarding/ContinueButton.tsx | 2 +- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 4 +--- .../ValidatorActivation/ActivationValidatorSetup.tsx | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 5cbdcda3..efe4a2c1 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -160,7 +160,7 @@ const ContinueButton = () => { /> )} ) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 79baa6b2..e0285612 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -12,9 +12,7 @@ import styles from './layoutGradient.module.css' import { Outlet } from 'react-router-dom' const ValidatorOnboarding = () => { - const { activeStep } = useSelector( - (state: RootState) => state.validatorOnboarding, - ) + const { activeStep } = useSelector((state: RootState) => state.validatorOnboarding) const windowSize = useWindowSize() return ( diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx index ecde7482..9b7ca2f8 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx @@ -54,7 +54,7 @@ const ActivationValidatorSetup = () => { - + From ce778bfd11e5bb661d5b7b4da4f88391c00514ce Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 18:52:53 +0200 Subject: [PATCH 41/55] clear code --- src/pages/ValidatorOnboarding/ContinueButton.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index efe4a2c1..424261dc 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -78,17 +78,7 @@ const ContinueButton = () => { isValidatorSet, ]) - const handleStep1 = () => { - dispatch(setActiveStep(activeStep + 1)) - } - - const handleStep2 = () => { - if (subStepValidatorSetup === 3) { - return dispatch(setActiveStep(activeStep + 1)) - } - dispatch(setSubStepValidatorSetup(subStepValidatorSetup + 1)) - } - +//FIX: move this function out of the component const handleStep4 = () => { if (!isConfirmPhraseStage && recoveryMechanism === KEYSTORE_FILES) { return dispatch(setActiveStep(activeStep + 1)) From 1963dfb83027eec1e531bd42eb1b6f8ea84cc3ac Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Mon, 29 Jan 2024 23:59:15 +0200 Subject: [PATCH 42/55] Update ContinueButton.tsx --- src/pages/ValidatorOnboarding/ContinueButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 424261dc..1ed8c053 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -51,7 +51,8 @@ const ContinueButton = () => { const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup) const navigate = useNavigate() - const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3 + + const isActivationValScreen = activeStep === 5 useEffect(() => { const getDisabledButton = () => { From 289f142b4b982b2e57be80beeb4a615bae52d94e Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 00:20:08 +0200 Subject: [PATCH 43/55] fix:style current form stepper step --- src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index cdbf22fc..a0ee1c68 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -95,6 +95,9 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { completed={activeStep > originalIndex - 1} data-subtitle={step.subtitle} data-step={step.label} + style={ + originalIndex === activeStep ? { backgroundColor: stepStyle.currentBgColor } : {} + } /> ) })} @@ -121,6 +124,7 @@ const stepStyle = { labelFontSize: '13px', borderRadius: '50%', fontWeight: 700, + currentBgColor: '#808080', } const customConnectorStyle = { From c63d27528cafbdbc7d9ddf6eb7ca7c74284e1b14 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 01:03:07 +0200 Subject: [PATCH 44/55] fix: continue button to work with Recovery Mechanism --- .../ValidatorOnboarding/ContinueButton.tsx | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 1ed8c053..3bbc35da 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -51,7 +51,7 @@ const ContinueButton = () => { const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup) const navigate = useNavigate() - + const isActivationValScreen = activeStep === 5 useEffect(() => { @@ -79,12 +79,10 @@ const ContinueButton = () => { isValidatorSet, ]) -//FIX: move this function out of the component - const handleStep4 = () => { + const handleRecoveryMechanism = () => { if (!isConfirmPhraseStage && recoveryMechanism === KEYSTORE_FILES) { return dispatch(setActiveStep(activeStep + 1)) } - if (!isConfirmPhraseStage) { return dispatch(setIsConfirmPhraseStage(true)) } @@ -109,10 +107,18 @@ const ContinueButton = () => { else if (activeStep === 2) nextPath = '/validator-onboarding/validator-setup-install' else if (activeStep === 3) nextPath = '/validator-onboarding/consensus-selection' else if (activeStep === 4) nextPath = '/validator-onboarding/activation-validator-setup' - else if (activeStep === 5) nextPath = '/validator-onboarding/client-setup' - else if (activeStep === 6) nextPath = '/validator-onboarding/key-generation' - else if (activeStep === 7) nextPath = '/validator-onboarding/deposit' - else if (activeStep === 8) nextPath = '/validator-onboarding/activation' + else if (activeStep === 5) { + nextPath = '/validator-onboarding/client-setup' + } else if (activeStep === 6) { + nextPath = '/validator-onboarding/key-generation' + } else if (activeStep === 7) { + if (isConfirmPhraseStage) { + nextPath = '/validator-onboarding/deposit' + } else { + nextPath = '/validator-onboarding/key-generation' + } + handleRecoveryMechanism() + } else if (activeStep === 8) nextPath = '/validator-onboarding/activation' else if (activeStep === 9) nextPath = '/dashboard' else nextPath = '/validator-onboarding/' From 92c02068d026a9f522d529a98c27ac0fc54d6af4 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 11:38:32 +0200 Subject: [PATCH 45/55] feat: add copy functionality --- .../ValidatorInstalling/ValidatorInstall.tsx | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx index c756aa29..a311948e 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx @@ -1,6 +1,6 @@ import { Stack, YStack } from 'tamagui' import { Text } from '@status-im/components' -import { useSelector } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import { useState } from 'react' import { RootState } from '../../../../redux/store' @@ -8,13 +8,48 @@ import { DOCUMENTATIONS } from './documentations' import { MAC } from '../../../../constants' import OSCards from './OSCards' import Markdown from '../../../../components/General/Markdown/Markdown' +import { setPinnedMessage } from '../../../../redux/PinnedMessage/slice' + +function extractBashCommands(documentation: any) { + const bashCommandRegex = /```bash\n([\s\S]*?)\n```/g + const matches = [] + let match + + while ((match = bashCommandRegex.exec(documentation)) !== null) { + matches.push(match[1]) + } + return matches.join('\n\n') +} const ValidatorSetupInstall = () => { + const dispatch = useDispatch() const [selectedOS, setSelectedOS] = useState(MAC) const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) + const docText = DOCUMENTATIONS[selectedClient].documentation[selectedOS] + const bashCommands = extractBashCommands(docText) const handleOSCardClick = (os: string) => { setSelectedOS(os) + } + + const copyCommands = () => { + navigator.clipboard.writeText(bashCommands) + dispatch( + setPinnedMessage({ + id: '123', + text: 'You have successfully copied the commands to your clipboard.', + pinned: true, + }), + ) + setTimeout(() => { + dispatch( + setPinnedMessage({ + id: '123', + text: 'You have successfully copied the commands to your clipboard.', + pinned: false, + }), + ) + }, 3000) } return ( @@ -39,7 +74,9 @@ const ValidatorSetupInstall = () => { - + copyCommands()}> + + From bbbd7adec8a187ebe05aa795eef5a68c9faff302 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 12:04:46 +0200 Subject: [PATCH 46/55] clear code --- src/pages/ValidatorOnboarding/ContinueButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 3bbc35da..85e35c37 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -8,7 +8,7 @@ import { useNavigate } from 'react-router-dom' import { RootState } from '../../redux/store' import LinkWithArrow from '../../components/General/LinkWithArrow' -import { setActiveStep, setSubStepValidatorSetup } from '../../redux/ValidatorOnboarding/slice' +import { setActiveStep } from '../../redux/ValidatorOnboarding/slice' import { KEYSTORE_FILES } from '../../constants' import { setIsConfirmPhraseStage, From f23790e0eb166e68177c09225525fe7896e1b35c Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 12:04:51 +0200 Subject: [PATCH 47/55] format --- .../ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx index a311948e..c39b8281 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx @@ -30,7 +30,7 @@ const ValidatorSetupInstall = () => { const handleOSCardClick = (os: string) => { setSelectedOS(os) - } + } const copyCommands = () => { navigator.clipboard.writeText(bashCommands) From 5935ed6275c6d304be8240a6e658f01760ea4dd9 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 12:19:00 +0200 Subject: [PATCH 48/55] format --- src/App.tsx | 5 ++++- .../Activation/Activation.tsx | 17 +++++++++++--- .../ValidatorOnboarding/ContinueButton.tsx | 22 ++++++++++++++----- .../FormStepper/FormStepper.tsx | 10 +++++++-- .../ValidatorOnboarding/Overview/Overview.tsx | 7 +++++- .../ValidatorOnboarding.tsx | 4 +++- .../ConsensusClient/ConsensusGaugeCard.tsx | 7 +++++- .../ConsensusClient/ConsensusSelection.tsx | 9 +++----- .../ActivationValidatorSetup.tsx | 17 +++++++++++--- .../ValidatorInstalling/OSCards.tsx | 6 ++++- .../ValidatorInstalling/ValidatorInstall.tsx | 15 ++++++++++--- 11 files changed, 91 insertions(+), 28 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 27368f57..29cb4766 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -75,7 +75,10 @@ const router = createBrowserRouter([ { path: 'validator-setup', element: }, { path: 'validator-setup-install', element: }, { path: 'consensus-selection', element: }, - { path: 'activation-validator-setup', element: }, + { + path: 'activation-validator-setup', + element: , + }, { path: 'client-setup', element: }, { path: 'key-generation', element: }, { path: 'deposit', element: }, diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx index 93996ebf..ddcc5077 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx +++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx @@ -35,7 +35,11 @@ const Activation = () => { - + { gaugeTotal={172.503} /> - + - + diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 538f9cf6..f865972a 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -46,9 +46,15 @@ const ContinueButton = () => { '/validator-onboarding/deposit': 8, '/validator-onboarding/activation': 9, } - dispatch(setActiveStep(pathToStepMap[location.pathname as keyof typeof pathToStepMap] || 0)) + dispatch( + setActiveStep( + pathToStepMap[location.pathname as keyof typeof pathToStepMap] || 0, + ), + ) - const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup) + const { isValidatorSet } = useSelector( + (state: RootState) => state.validatorSetup, + ) const navigate = useNavigate() @@ -105,10 +111,14 @@ const ContinueButton = () => { const continueHandler = () => { let nextPath if (activeStep === 0) nextPath = '/validator-onboarding/advisories' - else if (activeStep === 1) nextPath = '/validator-onboarding/validator-setup' - else if (activeStep === 2) nextPath = '/validator-onboarding/validator-setup-install' - else if (activeStep === 3) nextPath = '/validator-onboarding/consensus-selection' - else if (activeStep === 4) nextPath = '/validator-onboarding/activation-validator-setup' + else if (activeStep === 1) + nextPath = '/validator-onboarding/validator-setup' + else if (activeStep === 2) + nextPath = '/validator-onboarding/validator-setup-install' + else if (activeStep === 3) + nextPath = '/validator-onboarding/consensus-selection' + else if (activeStep === 4) + nextPath = '/validator-onboarding/activation-validator-setup' else if (activeStep === 5) { nextPath = '/validator-onboarding/client-setup' } else if (activeStep === 6) { diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index a0ee1c68..7a035b56 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -25,7 +25,11 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { '/validator-onboarding/activation', ] - const getIsStepVisible = (index: number, stepsBefore: number, stepsAfter: number) => { + const getIsStepVisible = ( + index: number, + stepsBefore: number, + stepsAfter: number, + ) => { const totalSteps = FORM_STEPS.length let start = activeStep - stepsBefore let end = activeStep + stepsAfter @@ -96,7 +100,9 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { data-subtitle={step.subtitle} data-step={step.label} style={ - originalIndex === activeStep ? { backgroundColor: stepStyle.currentBgColor } : {} + originalIndex === activeStep + ? { backgroundColor: stepStyle.currentBgColor } + : {} } /> ) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index e61b75e0..b661fe55 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -12,7 +12,12 @@ const Overview = () => { imgHeight="250%" rightImageSrc="./background-images/sync-status-background.png" > - + Overview diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index e0285612..79baa6b2 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -12,7 +12,9 @@ import styles from './layoutGradient.module.css' import { Outlet } from 'react-router-dom' const ValidatorOnboarding = () => { - const { activeStep } = useSelector((state: RootState) => state.validatorOnboarding) + const { activeStep } = useSelector( + (state: RootState) => state.validatorOnboarding, + ) const windowSize = useWindowSize() return ( diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx index 82ebbd9d..fb871cfd 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx @@ -13,7 +13,12 @@ type ConsensusGaugeCardProps = { color: string } -const ConsensusGaugeCard = ({ synced, total, title, color }: ConsensusGaugeCardProps) => { +const ConsensusGaugeCard = ({ + synced, + total, + title, + color, +}: ConsensusGaugeCardProps) => { const windowSize = useWindowSize() return ( { const windowSize = useWindowSize() - const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) as - | 'Nethermind' - | 'Besu' - | 'Geth' - | 'Erigon' - | 'Nimbus' + const selectedClient = useSelector( + (state: RootState) => state.execClient.selectedClient, + ) as 'Nethermind' | 'Besu' | 'Geth' | 'Erigon' | 'Nimbus' const clients = [ { diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx index bb2d4df2..dc026b99 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx @@ -36,7 +36,11 @@ const ActivationValidatorSetup = () => { - + { gaugeTotal={172.503} /> - + - + diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx index ac29e2ad..1f6a3f10 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx @@ -18,7 +18,11 @@ const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => { {cards.map(card => (
handleOSCardClick(card.name)} > diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx index 32769cbf..19d6c0f7 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx @@ -24,7 +24,9 @@ function extractBashCommands(documentation: any) { const ValidatorSetupInstall = () => { const dispatch = useDispatch() const [selectedOS, setSelectedOS] = useState(MAC) - const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) + const selectedClient = useSelector( + (state: RootState) => state.execClient.selectedClient, + ) const docText = DOCUMENTATIONS[selectedClient].documentation[selectedOS] const bashCommands = extractBashCommands(docText) @@ -72,9 +74,16 @@ const ValidatorSetupInstall = () => { - + copyCommands()}> - + From d09ae9be5a63eab3f7b66d1f8d8d3fbe5b4d6596 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 13:44:41 +0200 Subject: [PATCH 49/55] Delete FormStepper.stories.ts --- .../FormStepper/FormStepper.stories.ts | 64 ------------------- 1 file changed, 64 deletions(-) delete mode 100644 src/pages/ValidatorOnboarding/FormStepper/FormStepper.stories.ts diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.stories.ts b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.stories.ts deleted file mode 100644 index a096e8b5..00000000 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.stories.ts +++ /dev/null @@ -1,64 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' - -import FormStepper from './FormStepper' - -const meta = { - title: 'ValidatorOnboarding/FormStepper', - component: FormStepper, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], - argTypes: { - activeStep: { - options: [0, 1, 2, 3, 4, 5], - control: { type: 'radio' }, - defaultValue: 0, - }, - }, -} satisfies Meta - -export default meta -type Story = StoryObj - -export const OverviewActive: Story = { - args: { - activeStep: 0, - }, -} - -export const AdvisoriesActive: Story = { - args: { - activeStep: 1, - }, -} - -export const ClientSetupActive: Story = { - args: { - activeStep: 2, - }, -} - -export const ValidatorSetupActive: Story = { - args: { - activeStep: 3, - }, -} - -export const KeyGenerationActive: Story = { - args: { - activeStep: 4, - }, -} - -export const ActivationActive: Story = { - args: { - activeStep: 5, - }, -} - -export const NoActiveStep: Story = { - args: { - activeStep: -1, - }, -} From 8db9326c4d1527db74bb486121f4bbe6214d8726 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 14:47:21 +0200 Subject: [PATCH 50/55] fix: remove unused --- src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx index 1c7a70ce..31e525ec 100644 --- a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx +++ b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx @@ -9,7 +9,6 @@ type ActivationCardProps = { gaugeColor?: string gaugeSynced?: number gaugeTotal?: number - isLast?: boolean } const ActivationCard = ({ @@ -19,7 +18,6 @@ const ActivationCard = ({ gaugeColor, gaugeSynced, gaugeTotal, - isLast, }: ActivationCardProps) => { return ( {!isGaugeIncluded && ( From 7979afa6887e082f8b150551ae8af9404ad5055c Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 14:47:30 +0200 Subject: [PATCH 51/55] clear code --- .../ValidatorActivation/ActivationValidatorSetup.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx index dc026b99..811de1a0 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx @@ -35,9 +35,8 @@ const ActivationValidatorSetup = () => { making a deposit. - + @@ -57,7 +56,6 @@ const ActivationValidatorSetup = () => { /> @@ -66,7 +64,7 @@ const ActivationValidatorSetup = () => { text="Estimated Activation Time" value="32 Days" /> - + From 8b5382ce30398c506eaaa6d1179305f1885c8a84 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 14:48:25 +0200 Subject: [PATCH 52/55] Update Activation.tsx --- src/pages/ValidatorOnboarding/Activation/Activation.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx index ddcc5077..3c707369 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx +++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx @@ -34,9 +34,8 @@ const Activation = () => { Validators and are currently syncing your nodes. - + @@ -56,7 +55,6 @@ const Activation = () => { /> @@ -65,7 +63,7 @@ const Activation = () => { text="Estimated Activation Time" value="32 Days" /> - + From c7b7008cddf2fa9331aaedfbb12b41582a67180a Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 14:54:05 +0200 Subject: [PATCH 53/55] Update InstallLayout.module.css --- .../ValidatorInstalling/InstallLayout.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css index eeddbcd2..ea2286f0 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css @@ -17,6 +17,10 @@ .markdown-text { overflow-x: auto; width: 100%; + -ms-overflow-style: none; +} +.markdown-text::-webkit-scrollbar { + display: none; } .os-card-selected { background-color: #2a4af50d; From 65a1933cc34df4f8cc6e3874d31671d5fdf3106b Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 30 Jan 2024 14:54:24 +0200 Subject: [PATCH 54/55] format --- .../ValidatorActivation/ActivationValidatorSetup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx index 811de1a0..9676a04f 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx @@ -35,7 +35,7 @@ const ActivationValidatorSetup = () => { making a deposit. - + Date: Tue, 30 Jan 2024 15:24:28 +0200 Subject: [PATCH 55/55] Update InstallLayout.module.css --- .../ValidatorInstalling/InstallLayout.module.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css index ea2286f0..6fcc6b33 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css @@ -19,9 +19,7 @@ width: 100%; -ms-overflow-style: none; } -.markdown-text::-webkit-scrollbar { - display: none; -} + .os-card-selected { background-color: #2a4af50d; border: 1px solid #2a4af566;