diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx index 426f68b4..e92d9d6d 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx @@ -7,9 +7,10 @@ import { Text } from '@status-im/components' type OsCardProps = { name: string icon: string + onClick?: () => void isSelected?: boolean } -const OsCard = ({ name, icon, isSelected }: OsCardProps) => { +const OsCard = ({ name, icon, onClick, isSelected }: OsCardProps) => { return ( { width: '30%', }} space={'$12'} + onPress={onClick} > diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx index c85c120c..abddaf31 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx @@ -3,8 +3,9 @@ import { InformationBox, Text } from '@status-im/components' import { CloseCircleIcon } from '@status-im/icons' import OsCard from './OsCard' import SyntaxHighlighterBox from './SyntaxHighlighter' - +import { useState } from 'react' const ValidatorSetupInstall = () => { + const [selectedOs, setSelectedOs] = useState('Mac') return ( @@ -59,9 +60,24 @@ const ValidatorSetupInstall = () => { {/* Cards */} - - - + setSelectedOs('Mac')} + /> + setSelectedOs('Linux')} + /> + setSelectedOs('Windows')} + />