From 13b4d9a8c75340d7d0450e2866f622c776f7ffb2 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 29 Aug 2023 12:08:06 +0300
Subject: [PATCH] Use avtivation sync card and style

---
 .../Activation/Activation.tsx                 | 14 ++++-----
 .../Activation/ActivationCard.tsx             | 31 ++++++++++++++-----
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
index 5a5aa96a..217c038d 100644
--- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx
+++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
@@ -10,15 +10,15 @@ const Activation = () => {
   useEffect(() => {
     const timer = setTimeout(() => {
       setShowConfetti(false)
-    }, 5000)  
+    }, 5000)
 
     return () => {
-      clearTimeout(timer)  
+      clearTimeout(timer)
     }
-  }, [])  
+  }, [])
 
   return (
-    <Stack>
+    <Stack width={'100%'}>
       {showConfetti && <Confetti width={1000} height={800} style={{ zIndex: 0 }} />}
       <YStack style={{ padding: '16px 32px' }}>
         <YStack space={'$5'}>
@@ -32,13 +32,13 @@ const Activation = () => {
           <YStack space={'$2'} marginTop={'10px'} width={'33%'}>
             <XStack space={'$2'} justifyContent={'space-between'}>
               <ActivationCard text="Validators" value="4" />
-              <ActivationCard text="Execution Sync Status" value="fasfasf af sa" />
-              <ActivationCard text="Execution Sync Status" value="fasfasf af sa" />
+              <ActivationCard text="Execution Sync Status" value="" isGaugeIncluded={true} />
+              <ActivationCard text="Execution Sync Status" value="" isGaugeIncluded={true} gaugeColor={'#EB5757'} />
             </XStack>
             <XStack space={'$2'}>
               <ActivationCard text="Current APR" value="4.40%" />
               <ActivationCard text="Estimated Activation Time" value="32 Days" />
-              <ActivationCard text="Estimated Activation Time" value="fasfasf af sa" />
+              <ActivationCard text="Estimated Activation Time" value="" />
             </XStack>
           </YStack>
         </YStack>
diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx
index 1930c93d..69dc7b4e 100644
--- a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx
+++ b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx
@@ -1,12 +1,15 @@
-import { YStack } from 'tamagui'
+import { Stack, XStack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
+import ActivationSyncCard from './ActivationSyncCard'
 
 type ActivationCardProps = {
   text: string
   value: string
+  isGaugeIncluded?: boolean
+  gaugeColor?: string
 }
 
-const ActivationCard = ({ text, value }: ActivationCardProps) => {
+const ActivationCard = ({ text, value, isGaugeIncluded, gaugeColor }: ActivationCardProps) => {
   return (
     <YStack
       style={{
@@ -17,12 +20,24 @@ const ActivationCard = ({ text, value }: ActivationCardProps) => {
         width: '100%',
       }}
     >
-      <Text size={13} weight={'semibold'}>
-        {text}
-      </Text>
-      <Text size={19} color="blue" weight={'semibold'}>
-        {value}
-      </Text>
+      {!isGaugeIncluded && (
+        <Stack>
+          <Text size={13} weight={'semibold'}>
+            {text}
+          </Text>
+          <Text size={19} color="blue" weight={'semibold'}>
+            {value}
+          </Text>
+        </Stack>
+      )}
+      {isGaugeIncluded && (
+        <Stack>
+          <Text size={13} weight={'semibold'}>
+            {text}
+          </Text>
+          <ActivationSyncCard color={gaugeColor} synced={132123} total={200000} />
+        </Stack>
+      )}
     </YStack>
   )
 }