status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

format

This commit is contained in:
Hristo Nedelkov 2024-01-30 12:19:00 +02:00
parent c30606b2ee
commit 5935ed6275
11 changed files with 91 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.tsx
View File

@ -75,7 +75,10 @@ const router = createBrowserRouter([
{ path: 'validator-setup', element: <ValidatorSetup /> },
{ path: 'validator-setup-install', element: <ValidatorSetupInstall /> },
{ path: 'consensus-selection', element: <ConsensusSelection /> },
{ path: 'activation-validator-setup', element: <ActivationValidatorSetup /> },
{
path: 'activation-validator-setup',
element: <ActivationValidatorSetup />,
},
{ path: 'client-setup', element: <ClientSetup /> },
{ path: 'key-generation', element: <KeyGeneration /> },
{ path: 'deposit', element: <Deposit /> },

17
src/pages/ValidatorOnboarding/Activation/Activation.tsx
View File

@ -35,7 +35,11 @@ const Activation = () => {
</Text>
</Stack>
<YStack space={'$3'} marginTop={'25px'}>
<XStack space={'$3'} width="100%" flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}>
<XStack
space={'$3'}
width="100%"
flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}
>
<ActivationCard
text="Execution Sync Status"
isGaugeIncluded={true}
@ -51,9 +55,16 @@ const Activation = () => {
gaugeTotal={172.503}
/>
</XStack>
<XStack space={'$3'} flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'} width="100%">
<XStack
space={'$3'}
flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}
width="100%"
>
<ActivationCard text="Validator Queue" value="92603" />
<ActivationCard text="Estimated Activation Time" value="32 Days" />
<ActivationCard
text="Estimated Activation Time"
value="32 Days"
/>
<ActivationCard text="Current APR" value="4.40%" isLast={true} />
</XStack>
</YStack>

22
src/pages/ValidatorOnboarding/ContinueButton.tsx
View File

@ -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) {

10
src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
View File

@ -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 }
: {}
}
/>
)

7
src/pages/ValidatorOnboarding/Overview/Overview.tsx
View File

@ -12,7 +12,12 @@ const Overview = () => {
imgHeight="250%"
rightImageSrc="./background-images/sync-status-background.png"
>
<YStack space={'$5'} marginTop={'2rem'} marginBottom={'2rem'} width="100%">
<YStack
space={'$5'}
marginTop={'2rem'}
marginBottom={'2rem'}
width="100%"
>
<Stack marginBottom={'$2'}>
<Text size={27} weight={'semibold'}>
Overview

4
src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
View File

@ -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 (

7
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx
View File

@ -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 (
<Stack

9
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
View File

@ -19,12 +19,9 @@ const clientIcons = {
const ConsensusSelection = () => {
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 = [
{

17
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx
View File

@ -36,7 +36,11 @@ const ActivationValidatorSetup = () => {
</Text>
</Stack>
<YStack space={'$3'} marginTop={'25px'}>
<XStack space={'$3'} width="100%" flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}>
<XStack
space={'$3'}
width="100%"
flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}
>
<ActivationCard
text="Execution Sync Status"
isGaugeIncluded={true}
@ -52,9 +56,16 @@ const ActivationValidatorSetup = () => {
gaugeTotal={172.503}
/>
</XStack>
<XStack space={'$3'} flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'} width="100%">
<XStack
space={'$3'}
flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}
width="100%"
>
<ActivationCard text="Validator Queue" value="92603" />
<ActivationCard text="Estimated Activation Time" value="32 Days" />
<ActivationCard
text="Estimated Activation Time"
value="32 Days"
/>
<ActivationCard text="Current APR" value="4.40%" isLast={true} />
</XStack>
</YStack>

6
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
View File

@ -18,7 +18,11 @@ const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
{cards.map(card => (
<div
key={card.name}
className={selectedOS === card.name ? styles['os-card-selected'] : styles['os-card']}
className={
selectedOS === card.name
? styles['os-card-selected']
: styles['os-card']
}
onClick={() => handleOSCardClick(card.name)}
>
<OSCard key={card.name} icon={card.icon} name={card.name} />

15
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
View File

@ -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 = () => {
</Text>
<Stack>
<Markdown children={DOCUMENTATIONS[selectedClient].general} />
<OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
<OSCards
selectedOS={selectedOS}
handleOSCardClick={handleOSCardClick}
/>
<Stack onPress={() => copyCommands()}>
<Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />
<Markdown
children={
DOCUMENTATIONS[selectedClient].documentation[selectedOS]
}
/>
</Stack>
</Stack>
</YStack>