From 57290f18faf341a04db964e23ca1cb45cf93828e Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 11 Sep 2023 09:12:10 +0300
Subject: [PATCH] fix: tests and format code

---
 .../ContinueButton.stories.ts                 |   2 +
 .../ValidatorOnboarding/ContinueButton.tsx    |  22 +--
 .../ActivationValidatorSetup.tsx              | 138 +++++++++---------
 3 files changed, 83 insertions(+), 79 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ContinueButton.stories.ts b/src/pages/ValidatorOnboarding/ContinueButton.stories.ts
index b7eabdba..549e8c04 100644
--- a/src/pages/ValidatorOnboarding/ContinueButton.stories.ts
+++ b/src/pages/ValidatorOnboarding/ContinueButton.stories.ts
@@ -21,6 +21,7 @@ export const Default: Story = {
     continueHandler: () => {},
     activeStep: 0,
     isConfirmPhraseStage: false,
+    subStepValidatorSetup: 0,
   },
 }
 
@@ -29,5 +30,6 @@ export const Disabled: Story = {
     continueHandler: () => {},
     activeStep: 0,
     isConfirmPhraseStage: true,
+    subStepValidatorSetup: 0,
   },
 }
diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
index 33c8087f..66f78f11 100644
--- a/src/pages/ValidatorOnboarding/ContinueButton.tsx
+++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx
@@ -15,8 +15,12 @@ type ContinueButton = {
   subStepValidatorSetup: number
 }
 
-const ContinueButton = ({ continueHandler, activeStep, isConfirmPhraseStage, subStepValidatorSetup }: ContinueButton) => {
-  console.log(activeStep)
+const ContinueButton = ({
+  continueHandler,
+  activeStep,
+  isConfirmPhraseStage,
+  subStepValidatorSetup,
+}: ContinueButton) => {
   const { isCopyPastedPhrase, isRightPhrase, words, validWords } = useSelector(
     (state: RootState) => state.keyGeneration,
   )
@@ -36,8 +40,8 @@ const ContinueButton = ({ continueHandler, activeStep, isConfirmPhraseStage, sub
     return false
   }
 
-  const isActivationScreen = activeStep === 3 && subStepValidatorSetup === 3
-  console.log(isActivationScreen)
+  const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
+
   return (
     <XStack style={{ width: '100%', marginTop: '16px', zIndex: 999, alignItems: 'center' }}>
       {isCopyPastedPhrase && (
@@ -53,25 +57,23 @@ const ContinueButton = ({ continueHandler, activeStep, isConfirmPhraseStage, sub
         style={{
           width: '100%',
           zIndex: 999,
-          justifyContent: isActivationScreen ? 'space-between' : 'end',
+          justifyContent: isActivationValScreen ? 'space-between' : 'end',
           marginTop: isCopyPastedPhrase ? '0px' : '40px',
         }}
       >
-        {isActivationScreen &&
-
+        {isActivationValScreen && (
           <LinkWithArrow
             text="Skip to Dashboard"
             to="/"
             arrowRight={true}
             style={{ fontWeight: 'bold' }}
           />
-        }
-
+        )}
         <Button onPress={continueHandler} size={40} disabled={isDisabled()}>
           {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
         </Button>
       </XStack>
-    </XStack >
+    </XStack>
   )
 }
 
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx
index 0f7d781c..ee06a144 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx
@@ -2,81 +2,81 @@ import { useState, useEffect } from 'react'
 import { XStack, Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import Confetti from 'react-confetti'
-import LinkWithArrow from '../../../components/General/LinkWithArrow'
+
 import ActivationCard from '../Activation/ActivationCard'
 
-const styles = {
-    confettiContainer: {
-        position: 'relative' as const,
-        width: '100%',
-        height: '100%',
-        justifyContent: 'fit-content'
-    },
-    confettiCanvas: {
-        position: 'absolute' as const,
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: 0,
-    },
-}
-
 const ActivationValidatorSetup = () => {
-    const [showConfetti, setShowConfetti] = useState(true)
+  const [showConfetti, setShowConfetti] = useState(true)
 
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            setShowConfetti(false)
-        }, 10000)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowConfetti(false)
+    }, 10000)
 
-        return () => {
-            clearTimeout(timer)
-        }
-    }, [])
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
 
-    return (
-        <Stack style={styles.confettiContainer} width={'100%'} >
-            {showConfetti && <Confetti style={styles.confettiCanvas} />}
-            <YStack style={{ padding: '16px 32px' }}>
-                <YStack space={'$3'}>
-                    <Text size={27} weight={'semibold'}>
-                        Activation
-                    </Text>
-                    <Stack >
-                        <Text size={27}>
-                            Congratulations! You have successfully setup your Execution and Consensus clients and are currently syncing your nodes.  You need to be sufficiently synced prior to setting up your validators and making a deposit.
-                        </Text>
-                    </Stack>
-                    <YStack space={'$3'} marginTop={'10px'} width={'33%'} >
-                        <XStack width={'151%'} space={'$3'}   >
-
-                            <ActivationCard
-                                text="Execution Sync Status"
-                                isGaugeIncluded={true}
-                                gaugeColor={'#2a4af5'}
-                                gaugeSynced={123.524}
-                                gaugeTotal={172.503}
-                            />
-                            <ActivationCard
-                                text="Execution Sync Status"
-                                isGaugeIncluded={true}
-                                gaugeColor={'#EB5757'}
-                                gaugeSynced={123.524}
-                                gaugeTotal={172.503}
-                            />
-                        </XStack>
-                        <XStack space={'$3'}>
-                            <ActivationCard text="Validator Queue" value="92603" />
-                            <ActivationCard text="Estimated Activation Time" value="32 Days" />
-                            <ActivationCard text="Current APR" value="4.40%" />
-                        </XStack>
-                    </YStack>
-                </YStack>
-                
-            </YStack>
-        </Stack>
-    )
+  return (
+    <Stack style={styles.confettiContainer} width={'100%'}>
+      {showConfetti && <Confetti style={styles.confettiCanvas} />}
+      <YStack style={{ padding: '16px 32px' }}>
+        <YStack space={'$3'}>
+          <Text size={27} weight={'semibold'}>
+            Activation
+          </Text>
+          <Stack>
+            <Text size={27}>
+              Congratulations! You have successfully setup your Execution and Consensus clients and
+              are currently syncing your nodes. You need to be sufficiently synced prior to setting
+              up your validators and making a deposit.
+            </Text>
+          </Stack>
+          <YStack space={'$3'} marginTop={'10px'} width={'33%'}>
+            <XStack width={'151%'} space={'$3'}>
+              <ActivationCard
+                text="Execution Sync Status"
+                isGaugeIncluded={true}
+                gaugeColor={'#2a4af5'}
+                gaugeSynced={123.524}
+                gaugeTotal={172.503}
+              />
+              <ActivationCard
+                text="Execution Sync Status"
+                isGaugeIncluded={true}
+                gaugeColor={'#EB5757'}
+                gaugeSynced={123.524}
+                gaugeTotal={172.503}
+              />
+            </XStack>
+            <XStack space={'$3'}>
+              <ActivationCard text="Validator Queue" value="92603" />
+              <ActivationCard text="Estimated Activation Time" value="32 Days" />
+              <ActivationCard text="Current APR" value="4.40%" />
+            </XStack>
+          </YStack>
+        </YStack>
+      </YStack>
+    </Stack>
+  )
 }
 
 export default ActivationValidatorSetup
+
+const styles = {
+  confettiContainer: {
+    position: 'relative' as const,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'fit-content',
+  },
+  confettiCanvas: {
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 0,
+  },
+}