feat(app): use everywhere constants for urls

just replace them, but see a lot copy pasted, instead of using constants

src/App.tsx

@@ -19,7 +19,35 @@ import LogsPage from './pages/LogsPage/LogsPage'
 import ManageValidator from './pages/ManageValidator/ManageValidator'
 import config from '../tamagui.config'
 import { RootState } from './redux/store'
-import { ethereumRopsten, wcV2InitOptions, apiKey } from './constants'
+import {
+  ethereumRopsten,
+  wcV2InitOptions,
+  apiKey,
+  LANDING,
+  DEVICE_HEALTH_CHECK_ONBOARDING,
+  DEVICE_HEALTH_CHECK,
+  DEVICE_SYNC_STATUS,
+  PAIR_DEVICE,
+  CREATE_LOCAL_NODE,
+  VALIDATOR_ONBOARDING,
+  ADVISORIES,
+  VALIDATOR_SETUP,
+  VALIDATOR_SETUP_INSTALL,
+  CONSENSUS_SELECTION,
+  ACTIVATION_VALIDATOR_SETUP,
+  KEY_GENERATION,
+  RECOVERY_PHRASE,
+  DEPOSIT,
+  ACTIVATION,
+  DASHBOARD,
+  LOGS,
+  VALIDATOR_MANAGEMENT,
+  MANAGE_VALIDATOR,
+  EXIT,
+  MIGRATE,
+  DEPOSIT_PANEL,
+  CLIENT_SETUP,
+} from './constants'
 import './App.css'
 
 //ValidatorOnboarding sub-routes
@@ -58,63 +86,63 @@ const web3Onboard = init({
 
 const router = createBrowserRouter([
   {
-    path: '/',
+    path: LANDING,
     element: <LandingPage />,
   },
   {
-    path: '/device-health-check-onboarding',
+    path: DEVICE_HEALTH_CHECK_ONBOARDING,
     element: <DeviceHealthCheckOnboarding />,
   },
   {
-    path: '/device-health-check',
+    path: DEVICE_HEALTH_CHECK,
     element: <DeviceHealthCheck />,
   },
   {
-    path: '/device-sync-status',
+    path: DEVICE_SYNC_STATUS,
     element: <DeviceSyncStatus />,
   },
   {
-    path: '/pair-device',
+    path: PAIR_DEVICE,
     element: <PairDevice />,
   },
-  { path: '/create-local-node', element: <CreateLocalNode /> },
+  { path: CREATE_LOCAL_NODE, element: <CreateLocalNode /> },
   {
-    path: '/validator-onboarding',
+    path: VALIDATOR_ONBOARDING,
     children: [
       { path: '', element: <Overview /> },
-      { path: 'advisories', element: <Advisories /> },
-      { path: 'validator-setup', element: <ValidatorSetup /> },
-      { path: 'validator-setup-install', element: <ValidatorSetupInstall /> },
-      { path: 'consensus-selection', element: <ConsensusSelection /> },
+      { path: ADVISORIES, element: <Advisories /> },
+      { path: VALIDATOR_SETUP, element: <ValidatorSetup /> },
+      { path: VALIDATOR_SETUP_INSTALL, element: <ValidatorSetupInstall /> },
+      { path: CONSENSUS_SELECTION, element: <ConsensusSelection /> },
       {
-        path: 'activation-validator-setup',
+        path: ACTIVATION_VALIDATOR_SETUP,
         element: <ActivationValidatorSetup />,
       },
-      { path: 'client-setup', element: <ClientSetup /> },
-      { path: 'key-generation', element: <KeyGeneration /> },
-      { path: 'recovery-phrase', element: <ConfirmRecoveryPhrase /> },
-      { path: 'deposit', element: <Deposit /> },
+      { path: CLIENT_SETUP, element: <ClientSetup /> },
+      { path: KEY_GENERATION, element: <KeyGeneration /> },
+      { path: RECOVERY_PHRASE, element: <ConfirmRecoveryPhrase /> },
+      { path: DEPOSIT, element: <Deposit /> },
       {
-        path: 'activation',
+        path: ACTIVATION,
         element: <Activation />,
       },
     ],
     element: <ValidatorOnboarding />,
   },
-  { path: '/dashboard', element: <Dashboard /> },
-  { path: '/logs', element: <LogsPage /> },
+  { path: DASHBOARD, element: <Dashboard /> },
+  { path: LOGS, element: <LogsPage /> },
   {
-    path: '/validator-management',
+    path: VALIDATOR_MANAGEMENT,
     element: <ValidatorManagement />,
   },
   {
-    path: '/manage-validator/:validatorName',
+    path: `${MANAGE_VALIDATOR}/:validatorName`,
     element: <ManageValidator />,
     children: [
       { path: '', element: <DefaultPanel /> },
-      { path: 'exit', element: <ExitPanel /> },
-      { path: 'migrate', element: <MigratePanel /> },
-      { path: 'deposit', element: <DepositPanel /> },
+      { path: EXIT, element: <ExitPanel /> },
+      { path: MIGRATE, element: <MigratePanel /> },
+      { path: DEPOSIT_PANEL, element: <DepositPanel /> },
     ],
   },
 ])

src/components/General/LeftSidebar/LeftSidebar.tsx

@@ -12,15 +12,21 @@ import { Stack, YStack } from 'tamagui'
 import { Tooltip } from '@status-im/components'
 
 import LeftSidebarIconButton from './LeftSidebarIconButton'
+import {
+  DASHBOARD,
+  DEVICE_HEALTH_CHECK,
+  LOGS,
+  VALIDATOR_MANAGEMENT,
+} from '../../../constants'
 
 export const LEFT_SIDEBAR_ICONS = [
   {
-    path: '/dashboard',
+    path: DASHBOARD,
     tooltip: 'Dashboard',
     icon: <DashboardIcon size={20} />,
   },
   {
-    path: '/validator-management',
+    path: VALIDATOR_MANAGEMENT,
     tooltip: 'Validator Management',
     icon: <SpeedIcon size={20} />,
   },
@@ -30,11 +36,11 @@ export const LEFT_SIDEBAR_ICONS = [
     icon: <ChartIcon size={20} />,
   },
   {
-    path: '/device-health-check',
+    path: DEVICE_HEALTH_CHECK,
     tooltip: 'Device Health Check',
     icon: <HeartIcon size={20} />,
   },
-  { path: '/logs', tooltip: 'Logs', icon: <CodeBlockIcon size={20} /> },
+  { path: LOGS, tooltip: 'Logs', icon: <CodeBlockIcon size={20} /> },
   {
     path: '/community',
     tooltip: 'Community',

src/components/General/LinkWithArrow.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
 
 import LinkWithArrow from './LinkWithArrow'
-import { withRouter } from 'storybook-addon-react-router-v6'
+import { LANDING } from '../../constants'
 
 const meta = {
   title: 'General/LinkWithArrow',
@@ -19,7 +20,7 @@ type Story = StoryObj<typeof meta>
 export const LeftArrow: Story = {
   args: {
     text: 'Learn More',
-    to: '/',
+    to: LANDING,
     arrowLeft: true,
   },
 }
@@ -27,7 +28,7 @@ export const LeftArrow: Story = {
 export const RightArrow: Story = {
   args: {
     text: 'Learn More',
-    to: '/',
+    to: LANDING,
     arrowRight: true,
   },
 }
@@ -35,7 +36,7 @@ export const RightArrow: Story = {
 export const BothArrows: Story = {
   args: {
     text: 'Learn More',
-    to: '/',
+    to: LANDING,
     arrowLeft: true,
     arrowRight: true,
   },
@@ -44,14 +45,14 @@ export const BothArrows: Story = {
 export const WithoutArrow: Story = {
   args: {
     text: 'Learn More',
-    to: '/',
+    to: LANDING,
   },
 }
 
 export const WithoutText: Story = {
   args: {
     text: '',
-    to: '/',
+    to: LANDING,
     arrowLeft: true,
   },
 }
@@ -59,7 +60,7 @@ export const WithoutText: Story = {
 export const WithLongText: Story = {
   args: {
     text: 'This is a very long text that is used to test the component.',
-    to: '/',
+    to: LANDING,
     arrowLeft: true,
   },
 }
@@ -67,7 +68,7 @@ export const WithLongText: Story = {
 export const WithCustomStyle: Story = {
   args: {
     text: 'Learn More',
-    to: '/',
+    to: LANDING,
     arrowLeft: true,
     style: { backgroundColor: 'lightgray' },
   },

src/components/General/Markdown/MarkdownLink.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
 import MarkdownLink from './MarkdownLink'
+import { LANDING } from '../../../constants'
 
 const meta = {
   title: 'General/MarkdownLink',
@@ -18,7 +19,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    href: '/',
+    href: LANDING,
     children: 'MarkdownLink',
   },
 }

src/components/General/TagContainer.tsx

@@ -3,6 +3,8 @@ import { XStack } from 'tamagui'
 import { AddSmallIcon, SwapIcon } from '@status-im/icons'
 import { useNavigate } from 'react-router'
 
+import { CREATE_LOCAL_NODE, PAIR_DEVICE } from '../../constants'
+
 export type SelectedTag = 'Pair' | 'Create'
 
 type TagContainerProps = {
@@ -13,12 +15,12 @@ const TAGS = [
   {
     label: 'Pair',
     icon: SwapIcon,
-    path: '/pair-device',
+    path: PAIR_DEVICE,
   },
   {
     label: 'Create',
     icon: AddSmallIcon,
-    path: '/create-local-node',
+    path: CREATE_LOCAL_NODE,
   },
 ]
 

src/components/General/ValidatorNameAddress.tsx

@@ -10,6 +10,7 @@ import { useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import { copyFunction, getFormattedValidatorAddress } from '../../utilities'
+import { MANAGE_VALIDATOR } from '../../constants'
 
 type ValidatorNameAddressProps = {
   name: string
@@ -42,7 +43,7 @@ const ValidatorNameAddress = ({
     <YStack alignItems={'flex-start'}>
       <XStack space={'$1'} alignItems="center" cursor="pointer">
         <Text size={13} weight={'semibold'}>
-          <Link to={`/manage-validator/${name}`} style={{ color: 'black' }}>
+          <Link to={`${MANAGE_VALIDATOR}/${name}`} style={{ color: 'black' }}>
             Validator {name}
           </Link>
         </Text>

src/constants.ts

@@ -67,35 +67,35 @@ export const FORM_STEPS = [
   {
     label: 'Advisories',
     subtitle: 'Understand your Duties',
-    paths: ['advisories'],
+    paths: [ADVISORIES],
   },
   {
     label: 'Client Setup',
     subtitle: 'Execution & Consensus',
     paths: [
-      'validator-setup',
-      'validator-setup-install',
-      'client-setup',
-      'activation-validator-setup',
+      VALIDATOR_SETUP,
+      VALIDATOR_SETUP_INSTALL,
+      CLIENT_SETUP,
+      ACTIVATION_VALIDATOR_SETUP,
     ],
   },
   {
     label: 'Validator Setup',
     subtitle: 'Validators & Withdrawal',
     paths: [
-      'validator-setup',
-      'validator-setup-install',
-      'consensus-selection',
-      'activation-validator-setup',
+      VALIDATOR_SETUP,
+      VALIDATOR_SETUP_INSTALL,
+      CONSENSUS_SELECTION,
+      ACTIVATION_VALIDATOR_SETUP,
     ],
   },
   {
     label: 'Key Generation',
     subtitle: 'Secure your Keypairs',
-    paths: ['key-generation'],
+    paths: [KEY_GENERATION],
   },
-  { label: 'Deposit', subtitle: 'Stake your ETH', paths: ['deposit'] },
-  { label: 'Activation', subtitle: 'Complete Setup', paths: ['activation'] },
+  { label: 'Deposit', subtitle: 'Stake your ETH', paths: [DEPOSIT] },
+  { label: 'Activation', subtitle: 'Complete Setup', paths: [ACTIVATION] },
 ]
 export const DepositStatusSteps = [
   { label: 'Deposit' },
@@ -104,18 +104,18 @@ export const DepositStatusSteps = [
   { label: 'Exit' },
 ]
 export const STEPPER_PATHS = [
-  '/validator-onboarding/',
-  '/validator-onboarding/advisories',
-  '/validator-onboarding/validator-setup',
-  '/validator-onboarding/validator-setup-install',
-  '/validator-onboarding/consensus-selection',
-  '/validator-onboarding/activation-validator-setup',
-  '/validator-onboarding/client-setup',
-  '/validator-onboarding/key-generation',
-  '/validator-onboarding/recovery-phrase',
-  '/validator-onboarding/',
-  '/validator-onboarding/activation',
-  '/dashboard',
+  `${VALIDATOR_ONBOARDING}/`,
+  `${VALIDATOR_ONBOARDING}/${ADVISORIES}`,
+  `${VALIDATOR_ONBOARDING}/${VALIDATOR_SETUP}`,
+  `${VALIDATOR_ONBOARDING}/${VALIDATOR_SETUP_INSTALL}`,
+  `${VALIDATOR_ONBOARDING}/${CONSENSUS_SELECTION}`,
+  `${VALIDATOR_ONBOARDING}/${ACTIVATION_VALIDATOR_SETUP}`,
+  `${VALIDATOR_ONBOARDING}/${CLIENT_SETUP}`,
+  `${VALIDATOR_ONBOARDING}/${KEY_GENERATION}`,
+  `${VALIDATOR_ONBOARDING}/${RECOVERY_PHRASE}`,
+  `${VALIDATOR_ONBOARDING}/`,
+  `${VALIDATOR_ONBOARDING}/${ACTIVATION}`,
+  DASHBOARD,
 ]
 export const ADVISORY_TOPICS: {
   [key: string]: string[]

src/pages/CreateLocalNode/CreateLocalNode.tsx

@@ -2,22 +2,24 @@ import { useState } from 'react'
 import { Button as StatusButton, Text, Checkbox } from '@status-im/components'
 import { NodeIcon } from '@status-im/icons'
 import { Label, Separator, Stack, XStack, YStack } from 'tamagui'
+import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
 
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import Header from '../../components/General/Header'
 import Titles from '../../components/General/Titles'
 import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
-import { useNavigate } from 'react-router-dom'
-import { useDispatch } from 'react-redux'
 import { setNavigationFlow } from '../../redux/NavigationFlow/slice'
+import { DEVICE_HEALTH_CHECK_ONBOARDING } from '../../constants'
 
 const CreateLocalNode = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
   const navigate = useNavigate()
   const dispatch = useDispatch()
+
   const handleContinue = () => {
     dispatch(setNavigationFlow('createNode'))
-    navigate('/device-health-check-onboarding')
+    navigate(DEVICE_HEALTH_CHECK_ONBOARDING)
   }
   return (
     <PageWrapperShadow

src/pages/DeviceHealthCheckOnboarding/DeviceHealthCheckOnboarding.tsx

@@ -13,6 +13,7 @@ import HealthInfoSection from '../../components/General/HealthInfoSection'
 import DeviceMemory from '../../components/Charts/DeviceMemoryHealth'
 import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth'
 import { RootState } from '../../redux/store'
+import { DEVICE_SYNC_STATUS, VALIDATOR_ONBOARDING } from '../../constants'
 import styles from './deviceHealthCheckOnboarding.module.css'
 
 const DeviceHealthCheckOnboarding = () => {
@@ -26,9 +27,7 @@ const DeviceHealthCheckOnboarding = () => {
 
   const continueHandler = () => {
     navigate(
-      navigateFlow === 'pairDevice'
-        ? '/device-sync-status'
-        : '/validator-onboarding',
+      navigateFlow === 'pairDevice' ? DEVICE_SYNC_STATUS : VALIDATOR_ONBOARDING,
     )
   }
   return (

src/pages/LandingPage/LandingPage.tsx

@@ -6,13 +6,14 @@ import { Button as StatusButton, Text } from '@status-im/components'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
 import NimbusLogo from '../../components/Logos/NimbusLogo'
+import { PAIR_DEVICE } from '../../constants'
 import styles from './LandingPage.module.css'
 
 const LandingPage = () => {
   const navigate = useNavigate()
 
   const onGetStartedHandler = () => {
-    navigate('/pair-device')
+    navigate(PAIR_DEVICE)
   }
 
   return (

src/pages/PairDevice/PairDevice.tsx

@@ -3,6 +3,7 @@ import { Label, Separator, XStack, YStack } from 'tamagui'
 import { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Button, Checkbox, Text } from '@status-im/components'
+import { useNavigate } from 'react-router-dom'
 
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatus from './SyncStatus'
@@ -14,8 +15,8 @@ import Header from '../../components/General/Header'
 import ConnectViaIP from './ConnectViaIP/ConnectViaIP'
 import { RootState } from '../../redux/store'
 import { isAddressValid, isPortValid } from '../../utilities'
-import { useNavigate } from 'react-router-dom'
 import { setNavigationFlow } from '../../redux/NavigationFlow/slice'
+import { DEVICE_HEALTH_CHECK_ONBOARDING } from '../../constants'
 
 const PairDevice = () => {
   const dispatch = useDispatch()
@@ -44,7 +45,7 @@ const PairDevice = () => {
 
   const continueHandler = () => {
     dispatch(setNavigationFlow('pairDevice'))
-    navigate('/device-health-check-onboarding')
+    navigate(DEVICE_HEALTH_CHECK_ONBOARDING)
   }
 
   const isDisabledButton = () => {

src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react'
 import { Separator, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
+import { useDispatch } from 'react-redux'
 
 import WithdrawalAddress from './WithdrawalAddress'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
 import ValidatorsMenuWithPrice from '../../../components/General/ValidatorsMenuWithPrice'
-import { CLIENT_SETUP_SUBTITLE } from '../../../constants'
-import { useDispatch } from 'react-redux'
+import { CLIENT_SETUP_SUBTITLE, LANDING } from '../../../constants'
 import { setIsValidatorSet } from '../../../redux/ValidatorOnboarding/ValidatorSetup/slice'
 
 const ClientSetup = () => {
@@ -40,7 +40,7 @@ const ClientSetup = () => {
       <WithdrawalAddress title={'Withdrawal address'} />
       <LinkWithArrow
         text="Advanced Recovery Method"
-        to={'/'}
+        to={LANDING}
         arrowRight={true}
         style={{ marginBottom: '50px', fontWeight: 'bold', fontSize: '15px' }}
       />

src/pages/ValidatorOnboarding/ContinueButton.tsx

@@ -7,7 +7,22 @@ import { useNavigate } from 'react-router-dom'
 import { RootState } from '../../redux/store'
 import LinkWithArrow from '../../components/General/LinkWithArrow'
 import { setActiveStep } from '../../redux/ValidatorOnboarding/slice'
-import { KEYSTORE_FILES, STEPPER_PATHS } from '../../constants'
+import {
+  ACTIVATION,
+  ACTIVATION_VALIDATOR_SETUP,
+  ADVISORIES,
+  CLIENT_SETUP,
+  CONSENSUS_SELECTION,
+  DASHBOARD,
+  DEPOSIT,
+  KEY_GENERATION,
+  KEYSTORE_FILES_OPTION,
+  RECOVERY_PHRASE,
+  STEPPER_PATHS,
+  VALIDATOR_ONBOARDING,
+  VALIDATOR_SETUP,
+  VALIDATOR_SETUP_INSTALL,
+} from '../../constants'
 import {
   setIsConfirmPhraseStage,
   setIsCopyPastedPhrase,
@@ -35,19 +50,19 @@ const ContinueButton = () => {
   const dispatch = useDispatch()
 
   const pathToStepMap = {
-    '/validator-onboarding/': 0,
-    '/validator-onboarding/advisories': 1,
-    '/validator-onboarding/validator-setup': 2,
-    '/validator-onboarding/validator-setup-install': 3,
-    '/validator-onboarding/consensus-selection': 4,
-    '/validator-onboarding/activation-validator-setup': 5,
-    '/validator-onboarding/client-setup': 6,
-    '/validator-onboarding/key-generation': 7,
-    '/validator-onboarding/deposit': 8,
-    '/validator-onboarding/activation': 9,
+    [`${VALIDATOR_ONBOARDING}/`]: 0,
+    [`${VALIDATOR_ONBOARDING}/${ADVISORIES}`]: 1,
+    [`${VALIDATOR_ONBOARDING}/${VALIDATOR_SETUP}`]: 2,
+    [`${VALIDATOR_ONBOARDING}/${VALIDATOR_SETUP_INSTALL}`]: 3,
+    [`${VALIDATOR_ONBOARDING}/${CONSENSUS_SELECTION}`]: 4,
+    [`${VALIDATOR_ONBOARDING}/${ACTIVATION_VALIDATOR_SETUP}`]: 5,
+    [`${VALIDATOR_ONBOARDING}/${CLIENT_SETUP}`]: 6,
+    [`${VALIDATOR_ONBOARDING}/${KEY_GENERATION}`]: 7,
+    [`${VALIDATOR_ONBOARDING}/${DEPOSIT}`]: 8,
+    [`${VALIDATOR_ONBOARDING}/${ACTIVATION}`]: 9,
   }
   const handleActiveStep = () => {
-    if (location.pathname === '/validator-onboarding/recovery-phrase') {
+    if (location.pathname === `${VALIDATOR_ONBOARDING}/${RECOVERY_PHRASE}`) {
       return 7
     }
     return pathToStepMap[location.pathname as keyof typeof pathToStepMap] || 0
@@ -88,7 +103,7 @@ const ContinueButton = () => {
   ])
 
   const handleRecoveryMechanism = () => {
-    if (!isConfirmPhraseStage && recoveryMechanism === KEYSTORE_FILES) {
+    if (!isConfirmPhraseStage && recoveryMechanism === KEYSTORE_FILES_OPTION) {
       return dispatch(setActiveStep(activeStep + 1))
     }
     if (!isConfirmPhraseStage) {
@@ -115,13 +130,13 @@ const ContinueButton = () => {
 
     if (activeStep === 7) {
       nextPath = isConfirmPhraseStage
-        ? '/validator-onboarding/deposit'
-        : '/validator-onboarding/recovery-phrase'
+        ? `${VALIDATOR_ONBOARDING}/${DEPOSIT}`
+        : `${VALIDATOR_ONBOARDING}/${RECOVERY_PHRASE}`
       handleRecoveryMechanism()
     } else if (activeStep === 8) {
-      nextPath = '/validator-onboarding/activation'
+      nextPath = `${VALIDATOR_ONBOARDING}/${ACTIVATION}`
     } else if (activeStep === 9) {
-      nextPath = '/dashboard'
+      nextPath = DASHBOARD
     }
     navigate(nextPath)
   }
@@ -144,7 +159,7 @@ const ContinueButton = () => {
         {isActivationValScreen && (
           <LinkWithArrow
             text="Skip to Dashboard"
-            to="/dashboard"
+            to={DASHBOARD}
             arrowRight={true}
             style={{ fontWeight: 'bold', zIndex: 999 }}
           />

src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx

@@ -1,6 +1,19 @@
 import { Stepper, Step } from 'react-form-stepper'
 import { useNavigate } from 'react-router-dom'
-import { FORM_STEPS } from '../../../constants'
+
+import {
+  ACTIVATION,
+  ACTIVATION_VALIDATOR_SETUP,
+  ADVISORIES,
+  CLIENT_SETUP,
+  CONSENSUS_SELECTION,
+  DEPOSIT,
+  FORM_STEPS,
+  KEY_GENERATION,
+  VALIDATOR_ONBOARDING,
+  VALIDATOR_SETUP,
+  VALIDATOR_SETUP_INSTALL,
+} from '../../../constants'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import styles from './FormStepper.module.css'
 
@@ -13,16 +26,16 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
   const windowSize = useWindowSize()
 
   const stepToUrlMap = [
-    '/validator-onboarding/',
-    '/validator-onboarding/advisories',
-    '/validator-onboarding/validator-setup',
-    '/validator-onboarding/validator-setup-install',
-    '/validator-onboarding/consensus-selection',
-    '/validator-onboarding/activation-validator-setup',
-    '/validator-onboarding/client-setup',
-    '/validator-onboarding/key-generation',
-    '/validator-onboarding/deposit',
-    '/validator-onboarding/activation',
+    `${VALIDATOR_ONBOARDING}/`,
+    `${VALIDATOR_ONBOARDING}/${ADVISORIES}`,
+    `${VALIDATOR_ONBOARDING}/${VALIDATOR_SETUP}`,
+    `${VALIDATOR_ONBOARDING}/${VALIDATOR_SETUP_INSTALL}`,
+    `${VALIDATOR_ONBOARDING}/${CONSENSUS_SELECTION}`,
+    `${VALIDATOR_ONBOARDING}/${ACTIVATION_VALIDATOR_SETUP}`,
+    `${VALIDATOR_ONBOARDING}/${CLIENT_SETUP}`,
+    `${VALIDATOR_ONBOARDING}/${KEY_GENERATION}`,
+    `${VALIDATOR_ONBOARDING}/${DEPOSIT}`,
+    `${VALIDATOR_ONBOARDING}/${ACTIVATION}`,
   ]
 
   const getIsStepVisible = (

src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx

@@ -9,8 +9,8 @@ import RecoveryPhrase from './RecoveryPhrase'
 import ConfirmRecoveryPhrase from './ConfirmRecoveryPhrase/ConfirmRecoveryPhrase'
 import {
   BOTH_KEY_AND_RECOVERY,
-  KEYSTORE_FILES,
-  RECOVERY_PHRASE,
+  KEYSTORE_FILES_OPTION,
+  RECOVERY_PHRASE_OPTION,
 } from '../../../constants'
 import { RootState } from '../../../redux/store'
 
@@ -20,11 +20,11 @@ const KeyGeneration = () => {
   )
 
   const isKeystoreFiles =
-    recoveryMechanism === KEYSTORE_FILES ||
+    recoveryMechanism === KEYSTORE_FILES_OPTION ||
     recoveryMechanism === BOTH_KEY_AND_RECOVERY
 
   const isRecoveryPhrase =
-    recoveryMechanism === RECOVERY_PHRASE ||
+    recoveryMechanism === RECOVERY_PHRASE_OPTION ||
     recoveryMechanism === BOTH_KEY_AND_RECOVERY
 
   return (

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanism.stories.tsx

@@ -3,8 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react'
 import RecoveryMechanism from './RecoveryMechanism'
 import {
   BOTH_KEY_AND_RECOVERY,
-  KEYSTORE_FILES,
-  RECOVERY_PHRASE,
+  KEYSTORE_FILES_OPTION,
+  RECOVERY_PHRASE_OPTION,
 } from '../../../../constants'
 
 const meta = {
@@ -16,9 +16,13 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     recoveryMechanism: {
-      options: [RECOVERY_PHRASE, KEYSTORE_FILES, BOTH_KEY_AND_RECOVERY],
+      options: [
+        RECOVERY_PHRASE_OPTION,
+        KEYSTORE_FILES_OPTION,
+        BOTH_KEY_AND_RECOVERY,
+      ],
       control: { type: 'radio' },
-      defaultValue: KEYSTORE_FILES,
+      defaultValue: KEYSTORE_FILES_OPTION,
     },
   },
 } satisfies Meta<typeof RecoveryMechanism>
@@ -28,13 +32,13 @@ type Story = StoryObj<typeof meta>
 
 export const KeystoreFiles: Story = {
   args: {
-    recoveryMechanism: KEYSTORE_FILES,
+    recoveryMechanism: KEYSTORE_FILES_OPTION,
   },
 }
 
 export const RecoveryPhrase: Story = {
   args: {
-    recoveryMechanism: RECOVERY_PHRASE,
+    recoveryMechanism: RECOVERY_PHRASE_OPTION,
   },
 }
 

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanism.tsx

@@ -4,8 +4,8 @@ import { YStack } from 'tamagui'
 import RecoveryMechanismCard from './RecoveryMechanismCard'
 import {
   BOTH_KEY_AND_RECOVERY,
-  KEYSTORE_FILES,
-  RECOVERY_PHRASE,
+  KEYSTORE_FILES_OPTION,
+  RECOVERY_PHRASE_OPTION,
 } from '../../../../constants'
 import styles from '../index.module.css'
 
@@ -14,8 +14,8 @@ type RecoveryMechanismProps = {
 }
 
 const cards = {
-  [RECOVERY_PHRASE]: 'recovery-phrase-icon.svg',
-  [KEYSTORE_FILES]: 'keystore-files-icon.svg',
+  [RECOVERY_PHRASE_OPTION]: 'recovery-phrase-icon.svg',
+  [KEYSTORE_FILES_OPTION]: 'keystore-files-icon.svg',
   [BOTH_KEY_AND_RECOVERY]: 'both-recovery-keystore-icon.svg',
 }
 

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanismCard.stories.ts

@@ -3,8 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react'
 import RecoveryMechanismCard from './RecoveryMechanismCard'
 import {
   BOTH_KEY_AND_RECOVERY,
-  KEYSTORE_FILES,
-  RECOVERY_PHRASE,
+  KEYSTORE_FILES_OPTION,
+  RECOVERY_PHRASE_OPTION,
 } from '../../../../constants'
 
 const meta = {
@@ -21,16 +21,16 @@ type Story = StoryObj<typeof meta>
 
 export const KeystoreFiles: Story = {
   args: {
-    value: KEYSTORE_FILES,
-    recoveryMechanism: KEYSTORE_FILES,
+    value: KEYSTORE_FILES_OPTION,
+    recoveryMechanism: KEYSTORE_FILES_OPTION,
     icon: 'keystore-files-icon.svg',
   },
 }
 
 export const RecoveryPhrase: Story = {
   args: {
-    value: RECOVERY_PHRASE,
-    recoveryMechanism: RECOVERY_PHRASE,
+    value: RECOVERY_PHRASE_OPTION,
+    recoveryMechanism: RECOVERY_PHRASE_OPTION,
     icon: 'recovery-phrase-icon.svg',
   },
 }
@@ -45,7 +45,7 @@ export const BothKeyAndRecovery: Story = {
 
 export const NotSelected: Story = {
   args: {
-    value: KEYSTORE_FILES,
+    value: KEYSTORE_FILES_OPTION,
     recoveryMechanism: '',
     icon: 'keystore-files-icon.svg',
   },
@@ -54,7 +54,7 @@ export const NotSelected: Story = {
 export const WithoutValue: Story = {
   args: {
     value: '',
-    recoveryMechanism: KEYSTORE_FILES,
+    recoveryMechanism: KEYSTORE_FILES_OPTION,
     icon: '',
   },
 }

src/pages/ValidatorOnboarding/Overview/Overview.tsx

@@ -4,6 +4,7 @@ import { Text } from '@status-im/components'
 import OverviewCard from './OverviewCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
 import OverviewWrapper from './OverviewWrapper'
+import { LANDING } from '../../../constants'
 import styles from './overview.module.css'
 
 const Overview = () => {
@@ -32,7 +33,7 @@ const Overview = () => {
         </Text>
         <LinkWithArrow
           text="Learn More"
-          to={'/'}
+          to={LANDING}
           arrowRight={true}
           style={{ marginBottom: '1rem', fontSize: '13px' }}
         />

src/pages/ValidatorOnboarding/ValidatorSetup/BackButton.tsx

@@ -2,10 +2,16 @@ import { Text } from '@status-im/components'
 import { Stack, XStack } from 'tamagui'
 import { ArrowLeftIcon } from '@status-im/icons'
 import { useEffect, useState } from 'react'
-import { FORM_STEPS, STEPPER_PATHS } from '../../../constants'
+import { useDispatch, useSelector } from 'react-redux'
+
+import {
+  FORM_STEPS,
+  KEY_GENERATION,
+  STEPPER_PATHS,
+  VALIDATOR_ONBOARDING,
+} from '../../../constants'
 import { useNavigate } from 'react-router-dom'
 import { RootState } from '../../../redux/store'
-import { useDispatch, useSelector } from 'react-redux'
 import { setIsConfirmPhraseStage } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
 
 const BackButton = () => {
@@ -66,10 +72,10 @@ const BackButton = () => {
   const handleNavigateBack = () => {
     if (activeStep === 7 && isConfirmPhraseStage) {
       dispatch(setIsConfirmPhraseStage(false))
-      navigate('/validator-onboarding/key-generation')
+      navigate(`${VALIDATOR_ONBOARDING}/${KEY_GENERATION}`)
       return
     } else {
-      let prevPath = STEPPER_PATHS[activeStep - 1] || '/validator-onboarding/'
+      let prevPath = STEPPER_PATHS[activeStep - 1] || `${VALIDATOR_ONBOARDING}/`
       navigate(prevPath)
     }
   }

src/redux/ValidatorOnboarding/KeyGeneration/slice.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
-import { RECOVERY_PHRASE } from '../../../constants'
+import { RECOVERY_PHRASE_OPTION } from '../../../constants'
 
 type KeyGenerationState = {
   mnemonic: string[]
@@ -22,7 +22,7 @@ const initialState: KeyGenerationState = {
   validWords: Array(24).fill(true),
   generatedMnemonic: [],
   isConfirmPhraseStage: false,
-  recoveryMechanism: RECOVERY_PHRASE,
+  recoveryMechanism: RECOVERY_PHRASE_OPTION,
 }
 
 const keyGenerationSlice = createSlice({