From 15bfaae018e80890a5950e025f1fc4946a250410 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 11 Sep 2023 10:30:59 +0300
Subject: [PATCH] Use props from parent in Activation

---
 .../Activation/Activation.tsx                 | 49 +++++++++++++------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
index 7af703a5..3dc585ad 100644
--- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx
+++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
@@ -21,8 +21,35 @@ const styles = {
     zIndex: 0,
   },
 }
+type ActivationProps = {
+  validatorsValue: string;
+  executionSyncStatus1: {
+    text: string;
+    isGaugeIncluded: boolean;
+    gaugeColor: string;
+    gaugeSynced: number;
+    gaugeTotal: number;
+  };
+  executionSyncStatus2: {
+    text: string;
+    isGaugeIncluded: boolean;
+    gaugeColor: string;
+    gaugeSynced: number;
+    gaugeTotal: number;
+  };
+  currentAPRValue: string;
+  estimatedActivationTimeValue: string;
+  validatorQueueValue: string;
+};
 
-const Activation = () => {
+const Activation = ({
+  validatorsValue,
+  executionSyncStatus1,
+  executionSyncStatus2,
+  currentAPRValue,
+  estimatedActivationTimeValue,
+  validatorQueueValue,
+}) => {
   const [showConfetti, setShowConfetti] = useState(true)
 
   useEffect(() => {
@@ -51,26 +78,18 @@ const Activation = () => {
           </Stack>
           <YStack space={'$3'} marginTop={'10px'} width={'33%'}>
             <XStack space={'$3'} justifyContent={'space-between'}>
-              <ActivationCard text="Validators" value="4" />
+              <ActivationCard text="Validators" value={validatorsValue} />
               <ActivationCard
-                text="Execution Sync Status"
-                isGaugeIncluded={true}
-                gaugeColor={"$blue"}
-                gaugeSynced={123.524}
-                gaugeTotal={172.503}
+                {...executionSyncStatus1}
               />
               <ActivationCard
-                text="Execution Sync Status"
-                isGaugeIncluded={true}
-                gaugeColor={'$red'}
-                gaugeSynced={123.524}
-                gaugeTotal={172.503}
+                {...executionSyncStatus2}
               />
             </XStack>
             <XStack space={'$3'}>
-              <ActivationCard text="Current APR" value="4.40%" />
-              <ActivationCard text="Estimated Activation Time" value="32 Days" />
-              <ActivationCard text="Validator Queue" value="92603" />
+              <ActivationCard text="Current APR" value={currentAPRValue} />
+              <ActivationCard text="Estimated Activation Time" value={estimatedActivationTimeValue} />
+              <ActivationCard text="Validator Queue" value={validatorQueueValue} />
             </XStack>
           </YStack>
         </YStack>