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 { useState } from 'react'
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 [selectedRecoveryMechanism, setSelectedRecoveryMechanism] = useState(KEY_FILES)
const [recoveryMechanism, setRecoveryMechanism] = useState(KEY_FILES)
const handleRecoveryMechanismChange = (value: string) => {
setSelectedRecoveryMechanism(value)
const handleRecMechanismChange = (value: string) => {
setRecoveryMechanism(value)
}
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' }}>
<KeyGenerationHeader />
<RecoveryMechanism
selectedRecoveryMechanism={selectedRecoveryMechanism}
handleRecoveryMechanismChange={handleRecoveryMechanismChange}
recoveryMechanism={recoveryMechanism}
handleRecMechanismChange={handleRecMechanismChange}
/>
<Text size={27} weight={'semibold'}>
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 = {
args: {
selectedRecoveryMechanism: KEY_FILES,
handleRecoveryMechanismChange: () => {},
recoveryMechanism: KEY_FILES,
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'
type RecoveryMechanismProps = {
selectedRecoveryMechanism: string
handleRecoveryMechanismChange: (value: string) => void
recoveryMechanism: string
handleRecMechanismChange: (value: string) => void
}
const RecoveryMechanism = ({
selectedRecoveryMechanism,
handleRecoveryMechanismChange,
recoveryMechanism,
handleRecMechanismChange,
}: RecoveryMechanismProps) => {
return (
<YStack style={{ width: '100%' }}>
@ -20,18 +20,18 @@ const RecoveryMechanism = ({
<XStack space={'$4'} style={{ justifyContent: 'space-between', marginTop: '40px' }}>
<RecoveryMechanismCard
value={KEY_FILES}
selectedRecoveryMechanism={selectedRecoveryMechanism}
handleRecoveryMechanismChange={handleRecoveryMechanismChange}
recoveryMechanism={recoveryMechanism}
handleRecMechanismChange={handleRecMechanismChange}
/>
<RecoveryMechanismCard
value={RECOVERY_PHRASE}
selectedRecoveryMechanism={selectedRecoveryMechanism}
handleRecoveryMechanismChange={handleRecoveryMechanismChange}
recoveryMechanism={recoveryMechanism}
handleRecMechanismChange={handleRecMechanismChange}
/>
<RecoveryMechanismCard
value={BOTH_KEY_AND_RECOVERY}
selectedRecoveryMechanism={selectedRecoveryMechanism}
handleRecoveryMechanismChange={handleRecoveryMechanismChange}
recoveryMechanism={recoveryMechanism}
handleRecMechanismChange={handleRecMechanismChange}
/>
</XStack>
</YStack>

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

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

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

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