diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusCard.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx index cdbc5610..7ea640d9 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx @@ -1,18 +1,19 @@ import { Stack, YStack } from 'tamagui' -import Icon from '../../../components/General/Icon' import { Text } from '@status-im/components' - +import Icon from '../../../components/General/Icon' + type ConsensusClientCardProps = { name: string icon: string } + const ConsensusClientCard = ({ name, icon }: ConsensusClientCardProps) => { return ( { ) } + export default ConsensusClientCard diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.tsx index 27bdaac3..77de4ed3 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.tsx @@ -1,6 +1,7 @@ import { Stack, XStack, YStack } from 'tamagui' import { ClearIcon } from '@status-im/icons' import { Text } from '@status-im/components' + import StandardGauge from '../../../components/Charts/StandardGauge' import BorderBox from '../../../components/General/BorderBox' import { formatNumberForGauge } from '../../../utilities' diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx index 33ac7211..6dbd1080 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx @@ -1,10 +1,11 @@ import { XStack, Stack, Text as TextTam, YStack } from 'tamagui' -import PairedDeviceCard from './PairedDeviceCard' import { Text } from '@status-im/components' +import { useSelector } from 'react-redux' + +import PairedDeviceCard from './PairedDeviceCard' import ConsensusGaugeCard from './ConsensusGaugeCard' import ConsensusClientCard from './ConsensusClientCard' import LinkWithArrow from '../../../components/General/LinkWithArrow' -import { useSelector } from 'react-redux' import { RootState } from '../../../redux/store' const ConsensusSelection = () => { @@ -23,12 +24,13 @@ const ConsensusSelection = () => { Nimbus: '/icons/NimbusDisabled.svg', } - const a = [ + const clients = [ { name: selectedClient, icon: clientIcons[selectedClient], }, ] + return ( @@ -66,7 +68,7 @@ const ConsensusSelection = () => { - + The resource efficient Ethereum Clients. diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx index f0e2d06d..58081b32 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx @@ -1,6 +1,7 @@ import { Stack, XStack, YStack } from 'tamagui' -import Icon from '../../../components/General/Icon' import { Text } from '@status-im/components' + +import Icon from '../../../components/General/Icon' import { selectClient } from '../../../redux/ValidatorOnboarding/ValidatorSetup/slice' import { useDispatch, useSelector } from 'react-redux' import { RootState } from '../../../redux/store' @@ -8,9 +9,9 @@ import { RootState } from '../../../redux/store' type ExecClientCardProps = { name: string icon: string - isComingSoon?: boolean } + const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => { const dispatch = useDispatch() const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) @@ -60,4 +61,5 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => { ) } + export default ExecClientCard diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx index d5270176..777e3fd4 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx @@ -1,14 +1,15 @@ import { Stack, YStack } from 'tamagui' -import Icon from '../../../components/General/Icon' import { Text } from '@status-im/components' - +import Icon from '../../../components/General/Icon' + type OsCardProps = { name: string icon: string onClick?: () => void isSelected?: boolean } + const OsCard = ({ name, icon, onClick, isSelected }: OsCardProps) => { return ( { ) } + export default OsCard diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx index 5410e02e..6c779894 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx @@ -1,5 +1,3 @@ -// make func component for this file - import { XStack, YStack } from 'tamagui' import { ClearIcon } from '@status-im/icons' import { Avatar, Text } from '@status-im/components' @@ -31,4 +29,5 @@ const PairedDeviceCard = () => { ) } + export default PairedDeviceCard diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.tsx index 7eb5a6dc..78bd5c38 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.tsx @@ -1,5 +1,6 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism' + type SyntaxHighlighterBoxProps = { rows: string[] } @@ -12,6 +13,7 @@ const customStyle = { }, backgroundColor: 'white', } + const SyntaxHighlighterBox = ({ rows }: SyntaxHighlighterBoxProps) => { return ( { ) } + export default SyntaxHighlighterBox diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.stories.tsx index 2975e4d5..6c463e2e 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.stories.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react' -import ValidatorSetupInstall from './ValidatorInstall' +import ValidatorSetupInstall from './ValidatorInstall' const meta = { title: 'ValidatorOnboarding/ValidatorSetupInstall', diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx index 763275b0..bea12dd4 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx @@ -1,14 +1,17 @@ import { XStack, Stack, YStack } from 'tamagui' 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' import { useSelector } from 'react-redux' + +import OsCard from './OsCard' +import SyntaxHighlighterBox from './SyntaxHighlighter' import { RootState } from '../../../redux/store' + const ValidatorSetupInstall = () => { const [selectedOs, setSelectedOs] = useState('Mac') const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) + return ( diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts index 5189112b..ecb50999 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' import ValidatorSetup from './ValidatorSetup' -import { withRouter } from 'storybook-addon-react-router-v6' const meta = { title: 'ValidatorOnboarding/ValidatorSetup', diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx index 23b27e2f..f13dfd6a 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx @@ -1,9 +1,10 @@ import { XStack, Stack, Text as TextTam, YStack } from 'tamagui' -import PairedDeviceCard from './PairedDeviceCard' import { Text } from '@status-im/components' -import ExecClientCard from './ExecClientCard' import { Link } from 'react-router-dom' +import PairedDeviceCard from './PairedDeviceCard' +import ExecClientCard from './ExecClientCard' + const ValidatorSetup = () => { return ( diff --git a/src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx b/src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx index c4a7ae17..253776d2 100644 --- a/src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx +++ b/src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx @@ -3,9 +3,11 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' interface ExecClientState { selectedClient: string } + const initialState: ExecClientState = { selectedClient: '', } + const execClientSlice = createSlice({ name: 'execClient', initialState,