diff --git a/src/constants.ts b/src/constants.ts index fe6f193c..632d6fcb 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,6 +1,3 @@ -type AdvisoryTopicsType = { - [key: string]: string[] -} // App export const apiKey = '1730eff0-9d50-4382-a3fe-89f0d34a2070' const INFURA_KEY = 'f25e905e25a545dcaad2c939530b91db' @@ -43,6 +40,40 @@ export const FORM_STEPS = [ { label: 'Deposit', subtitle: 'Stake your ETH' }, { label: 'Activation', subtitle: 'Complete Setup' }, ] +export const ADVISORY_TOPICS: { + [key: string]: string[] +} = { + 'Proof of Stake': [ + 'Proof of Stake systems require validators to hold and lock up a certain amount of cryptocurrency to participate.', + 'In Proof of Stake, the chances of creating a block is proportional to the amount of cryptocurrency held.', + 'Unlike Proof of Work, Proof of Stake aims to achieve consensus without intensive computational work.', + ], + Deposit: [ + 'Deposits are often irreversible, so ensure to double-check transaction details before confirming.', + 'Delay in deposit acknowledgment might be due to network congestion or node synchronization.', + 'Always keep transaction IDs or hashes for records and future references in case of disputes.', + ], + 'Key Management': [ + 'Storing your private keys on a device connected to the internet is susceptible to hacks and malware.', + 'Hardware wallets provide an added layer of security by keeping private keys isolated from online systems.', + 'Regularly back up and encrypt your key management solutions to prevent potential losses.', + ], + 'Bad Behaviour': [ + 'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.', + 'Running your validator keys simultaneously on two or more machines will result in slashing.*', + 'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.', + ], + Requirements: [ + 'Ensure your system meets the minimum software and hardware requirements before initiating any operations.', + 'Staying updated with the latest versions is vital to maintain system integrity and performance.', + 'Failure to meet requirements might result in operational inefficiencies or security vulnerabilities.', + ], + Risks: [ + 'Cryptocurrency investments are subject to high volatility and can result in both significant gains and losses.', + 'Always do thorough research before making investment decisions or engaging in transactions.', + 'Be wary of phishing scams, malicious software, and too-good-to-be-true offers.', + ], +} export const MAC = 'MacOS' export const WINDOWS = 'Windows' @@ -125,39 +156,6 @@ export const VALIDATORS_DATA = [ status: 'Active', }, ] -//Validator onboarding -> advisories -> text -export const advisoryTopics: AdvisoryTopicsType = { - 'Proof of Stake': [ - 'Proof of Stake systems require validators to hold and lock up a certain amount of cryptocurrency to participate.', - 'In Proof of Stake, the chances of creating a block is proportional to the amount of cryptocurrency held.', - 'Unlike Proof of Work, Proof of Stake aims to achieve consensus without intensive computational work.', - ], - Deposit: [ - 'Deposits are often irreversible, so ensure to double-check transaction details before confirming.', - 'Delay in deposit acknowledgment might be due to network congestion or node synchronization.', - 'Always keep transaction IDs or hashes for records and future references in case of disputes.', - ], - 'Key Management': [ - 'Storing your private keys on a device connected to the internet is susceptible to hacks and malware.', - 'Hardware wallets provide an added layer of security by keeping private keys isolated from online systems.', - 'Regularly back up and encrypt your key management solutions to prevent potential losses.', - ], - 'Bad Behaviour': [ - 'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.', - 'Running your validator keys simultaneously on two or more machines will result in slashing.*', - 'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.', - ], - Requirements: [ - 'Ensure your system meets the minimum software and hardware requirements before initiating any operations.', - 'Staying updated with the latest versions is vital to maintain system integrity and performance.', - 'Failure to meet requirements might result in operational inefficiencies or security vulnerabilities.', - ], - Risks: [ - 'Cryptocurrency investments are subject to high volatility and can result in both significant gains and losses.', - 'Always do thorough research before making investment decisions or engaging in transactions.', - 'Be wary of phishing scams, malicious software, and too-good-to-be-true offers.', - ], -} // Pair Device export const VC = 'VC' diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx index 1ddaa4b5..865c3028 100644 --- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx +++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx @@ -6,14 +6,14 @@ import AdvisoriesContent from './AdvisoriesContent' import { useDispatch, useSelector } from 'react-redux' import { RootState } from '../../../redux/store' import { setSubStepAdvisories } from '../../../redux/ValidatorOnboarding/Advisories/slice' +import { ADVISORY_TOPICS } from '../../../constants' import './advisoriesLayout.css' -import { advisoryTopics } from '../../../constants' const Advisories = () => { const dispatch = useDispatch() const { subStepAdvisories } = useSelector((state: RootState) => state.advisories) const [completedSteps, setCompletedSteps] = useState([]) - const [selectedTitle, setSelectedTitle] = useState(Object.keys(advisoryTopics)[0]) + const [selectedTitle, setSelectedTitle] = useState(Object.keys(ADVISORY_TOPICS)[0]) const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'] @@ -22,7 +22,7 @@ const Advisories = () => { const advisoriesIcons = unicodeNumbers.map((number, index) => (isCompleted(index) ? '✓' : number)) useEffect(() => { - setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories]) + setSelectedTitle(Object.keys(ADVISORY_TOPICS)[subStepAdvisories]) setCompletedSteps(prevSteps => { if (!prevSteps.includes(subStepAdvisories)) { @@ -38,13 +38,13 @@ const Advisories = () => { } const isCurrent = (currentTitle: string): boolean => { - const topics = Object.keys(advisoryTopics) + const topics = Object.keys(ADVISORY_TOPICS) const index = topics.indexOf(currentTitle) return index === subStepAdvisories } const getIndexTitle = (title: string): number => { - const topics = Object.keys(advisoryTopics) + const topics = Object.keys(ADVISORY_TOPICS) const index = topics.indexOf(title) return index } @@ -57,7 +57,7 @@ const Advisories = () => { Advisories - {Object.keys(advisoryTopics).map((title, index) => ( + {Object.keys(ADVISORY_TOPICS).map((title, index) => ( handleStepClick(title)} @@ -82,7 +82,7 @@ const Advisories = () => { ))} - + ) } diff --git a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts index 09088d7f..2725285b 100644 --- a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts +++ b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react' import { withRouter } from 'storybook-addon-react-router-v6' import AdvisoriesContent from './AdvisoriesContent' -import { advisoryTopics } from './Advisories' +import { ADVISORY_TOPICS } from './Advisories' const meta = { title: 'ValidatorOnboarding/AdvisoriesContent', @@ -17,8 +17,8 @@ const meta = { export default meta type Story = StoryObj -const advisoryTopicsKeys = Object.keys(advisoryTopics) -const advisoryTopicsValues = Object.values(advisoryTopics) +const advisoryTopicsKeys = Object.keys(ADVISORY_TOPICS) +const advisoryTopicsValues = Object.values(ADVISORY_TOPICS) export const ProofOfStake: Story = { args: { diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 44a63867..664d99f5 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -16,8 +16,8 @@ import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstalling/Validato import ContinueButton from './ContinueButton' import ActivationValidatorSetup from './ValidatorSetup/ValidatorActivation/ActivationValidatorSetup' import Deposit from './Deposit/Deposit' -import './layoutGradient.css' import { useWindowSize } from '../../hooks/useWindowSize' +import './layoutGradient.css' const ValidatorOnboarding = () => { const { activeStep, subStepValidatorSetup } = useSelector(