set styles to read advisories

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 = () => {
           >
             <Text
               size={19}
-              weight={isSameTitle(title) && 'semibold'}
-              color={isSameTitle(title) ? 'blue' : ''}
+              weight={isCurrent(title) && 'semibold'}
+              color={isCurrent(title) ? 'blue' : ''}
             >
-              {unicodeNumbers[index]}
+              {advisoriesIcons[index]}
             </Text>
             <Text
               size={19}
-              weight={isSameTitle(title) && 'semibold'}
-              color={isSameTitle(title) ? 'blue' : ''}
+              weight={isCurrent(title) ? 'semibold' : ''}
+              color={isCurrent(title) ? 'blue' : ''}
             >
               {title}
             </Text>
@@ -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.',