diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx index 5dec6a70..939d668a 100644 --- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx +++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx @@ -1,5 +1,5 @@ import { Text } from '@status-im/components' -import { useState } from 'react' +import { useState, useEffect } from 'react' import { Stack, XStack, YStack } from 'tamagui' import AdvisoriesContent from './AdvisoriesContent' @@ -8,8 +8,23 @@ type AdvisoryTopicsType = { [key: string]: string[] } -const Advisories = () => { +type AdvisoriesProps = { + advisoriesIcons: string[] + subStepAdvisories: number +} + +const Advisories = ({ advisoriesIcons, subStepAdvisories }: AdvisoriesProps) => { const [selectedTitle, setSelectedTitle] = useState(Object.keys(advisoryTopics)[0]) + useEffect(() => { + setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories]) + }, [subStepAdvisories]) + + + const isCurrent = (currentTitle: string): boolean => { + const topics = Object.keys(advisoryTopics); + const index = topics.indexOf(currentTitle); + return index <= subStepAdvisories ? true : false; + } const isSameTitle = (title: string) => selectedTitle === title @@ -34,15 +49,15 @@ const Advisories = () => { > - {unicodeNumbers[index]} + {advisoriesIcons[index]} {title} @@ -56,8 +71,6 @@ const Advisories = () => { export default Advisories -const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'] - 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.',