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

fix: change rec mech variable names

This commit is contained in:
RadoslavDimchev 2023-08-29 09:34:47 +03:00
parent d7569410fc
commit 41e23dbbd4
5 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
View File

@ -5,13 +5,13 @@ import { Text } from '@status-im/components'
import KeyFiles from './KeyFiles' import KeyFiles from './KeyFiles'
import { useState } from 'react' import { useState } from 'react'
import RecoveryPhrase from './RecoveryPhrase' import RecoveryPhrase from './RecoveryPhrase'
import { KEY_FILES, RECOVERY_PHRASE } from '../../../constants' import { BOTH_KEY_AND_RECOVERY, KEY_FILES, RECOVERY_PHRASE } from '../../../constants'
const KeyGeneration = () => { const KeyGeneration = () => {
const [selectedRecoveryMechanism, setSelectedRecoveryMechanism] = useState(KEY_FILES) const [recoveryMechanism, setRecoveryMechanism] = useState(KEY_FILES)
const handleRecoveryMechanismChange = (value: string) => { const handleRecMechanismChange = (value: string) => {
setSelectedRecoveryMechanism(value) setRecoveryMechanism(value)
} }
const isKeyFiles = recoveryMechanism === KEY_FILES || recoveryMechanism === BOTH_KEY_AND_RECOVERY const isKeyFiles = recoveryMechanism === KEY_FILES || recoveryMechanism === BOTH_KEY_AND_RECOVERY
@ -23,8 +23,8 @@ const KeyGeneration = () => {
<YStack space={'$2'} style={{ width: '100%', padding: '16px 32px', alignItems: 'start' }}> <YStack space={'$2'} style={{ width: '100%', padding: '16px 32px', alignItems: 'start' }}>
<KeyGenerationHeader /> <KeyGenerationHeader />
<RecoveryMechanism <RecoveryMechanism
selectedRecoveryMechanism={selectedRecoveryMechanism} recoveryMechanism={recoveryMechanism}
handleRecoveryMechanismChange={handleRecoveryMechanismChange} handleRecMechanismChange={handleRecMechanismChange}
/> />
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
4 Validators 4 Validators

4
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts
View File

@ -18,7 +18,7 @@ type Story = StoryObj<typeof meta>
export const Page: Story = { export const Page: Story = {
args: { args: {
selectedRecoveryMechanism: KEY_FILES, recoveryMechanism: KEY_FILES,
handleRecoveryMechanismChange: () => {}, handleRecMechanismChange: () => {},
}, },
} }

20
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
View File

@ -4,13 +4,13 @@ import RecoveryMechanismCard from './RecoveryMechanismCard'
import { BOTH_KEY_AND_RECOVERY, KEY_FILES, RECOVERY_PHRASE } from '../../../constants' import { BOTH_KEY_AND_RECOVERY, KEY_FILES, RECOVERY_PHRASE } from '../../../constants'
type RecoveryMechanismProps = { type RecoveryMechanismProps = {
selectedRecoveryMechanism: string recoveryMechanism: string
handleRecoveryMechanismChange: (value: string) => void handleRecMechanismChange: (value: string) => void
} }
const RecoveryMechanism = ({ const RecoveryMechanism = ({
selectedRecoveryMechanism, recoveryMechanism,
handleRecoveryMechanismChange, handleRecMechanismChange,
}: RecoveryMechanismProps) => { }: RecoveryMechanismProps) => {
return ( return (
<YStack style={{ width: '100%' }}> <YStack style={{ width: '100%' }}>
@ -20,18 +20,18 @@ const RecoveryMechanism = ({
<XStack space={'$4'} style={{ justifyContent: 'space-between', marginTop: '40px' }}> <XStack space={'$4'} style={{ justifyContent: 'space-between', marginTop: '40px' }}>
<RecoveryMechanismCard <RecoveryMechanismCard
value={KEY_FILES} value={KEY_FILES}
selectedRecoveryMechanism={selectedRecoveryMechanism} recoveryMechanism={recoveryMechanism}
handleRecoveryMechanismChange={handleRecoveryMechanismChange} handleRecMechanismChange={handleRecMechanismChange}
/> />
<RecoveryMechanismCard <RecoveryMechanismCard
value={RECOVERY_PHRASE} value={RECOVERY_PHRASE}
selectedRecoveryMechanism={selectedRecoveryMechanism} recoveryMechanism={recoveryMechanism}
handleRecoveryMechanismChange={handleRecoveryMechanismChange} handleRecMechanismChange={handleRecMechanismChange}
/> />
<RecoveryMechanismCard <RecoveryMechanismCard
value={BOTH_KEY_AND_RECOVERY} value={BOTH_KEY_AND_RECOVERY}
selectedRecoveryMechanism={selectedRecoveryMechanism} recoveryMechanism={recoveryMechanism}
handleRecoveryMechanismChange={handleRecoveryMechanismChange} handleRecMechanismChange={handleRecMechanismChange}
/> />
</XStack> </XStack>
</YStack> </YStack>

4
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.stories.ts
View File

@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>
export const Page: Story = { export const Page: Story = {
args: { args: {
value: KEY_FILES, value: KEY_FILES,
selectedRecoveryMechanism: KEY_FILES, recoveryMechanism: KEY_FILES,
handleRecoveryMechanismChange: () => {}, handleRecMechanismChange: () => {},
}, },
} }

14
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.tsx
View File

@ -2,27 +2,27 @@ import { Text } from '@status-im/components'
type RecoveryMechanismProps = { type RecoveryMechanismProps = {
value: string value: string
selectedRecoveryMechanism: string recoveryMechanism: string
handleRecoveryMechanismChange: (value: string) => void handleRecMechanismChange: (value: string) => void
} }
const RecoveryMechanismCard = ({ const RecoveryMechanismCard = ({
value, value,
selectedRecoveryMechanism, recoveryMechanism,
handleRecoveryMechanismChange, handleRecMechanismChange,
}: RecoveryMechanismProps) => { }: RecoveryMechanismProps) => {
return ( return (
<div <div
style={{ style={{
border: `1px solid ${selectedRecoveryMechanism === value ? '#2A4AF566' : '#DCE0E5'}`, border: `1px solid ${recoveryMechanism === value ? '#2A4AF566' : '#DCE0E5'}`,
borderRadius: '16px', borderRadius: '16px',
padding: '12px 16px', padding: '12px 16px',
cursor: 'pointer', cursor: 'pointer',
backgroundColor: selectedRecoveryMechanism === value ? '#f4f6fe' : '#fff', backgroundColor: recoveryMechanism === value ? '#f4f6fe' : '#fff',
width: '100%', width: '100%',
height: '140px', height: '140px',
}} }}
onClick={() => handleRecoveryMechanismChange(value)} onClick={() => handleRecMechanismChange(value)}
> >
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
{value} {value}