From a53fabc7c83e3f6767a803ca7546438d3d295f2d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 8 Oct 2023 19:49:15 +0300
Subject: [PATCH] fix: disabled continue button

---
 .../ValidatorOnboarding/ContinueButton.tsx    | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
index 7a06c5b6..65ea67d0 100644
--- a/src/pages/ValidatorOnboarding/ContinueButton.tsx
+++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux'
 
 import { RootState } from '../../redux/store'
 import LinkWithArrow from '../../components/General/LinkWithArrow'
+import { useEffect, useState } from 'react'
 
 type ContinueButton = {
   continueHandler: () => void
@@ -13,20 +14,25 @@ type ContinueButton = {
 }
 
 const ContinueButton = ({ continueHandler, activeStep, subStepValidatorSetup }: ContinueButton) => {
+  const [isDisabled, setIsDisabled] = useState(false)
   const { isCopyPastedPhrase, mnemonic, validWords, isConfirmPhraseStage } = useSelector(
     (state: RootState) => state.keyGeneration,
   )
   const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
 
-  const isDisabled = () => {
-    if (
-      (isConfirmPhraseStage && mnemonic.some(word => word === '')) ||
-      (isConfirmPhraseStage && validWords.some(w => w === false))
-    ) {
-      return true
+  useEffect(() => {
+    const getDisabledButton = () => {
+      if (activeStep === 4 && isConfirmPhraseStage) {
+        if (mnemonic.some(word => word === '') || validWords.some(w => w === false)) {
+          return false
+        }
+      }
+
+      return false
     }
-    return false
-  }
+
+    setIsDisabled(getDisabledButton())
+  }, [activeStep, subStepValidatorSetup, isConfirmPhraseStage, mnemonic, validWords])
 
   return (
     <XStack
@@ -55,7 +61,7 @@ const ContinueButton = ({ continueHandler, activeStep, subStepValidatorSetup }:
           style={{ fontWeight: 'bold', zIndex: 999 }}
         />
       )}
-      <Button onPress={continueHandler} size={40} disabled={isDisabled()}>
+      <Button onPress={continueHandler} size={40} disabled={isDisabled}>
         {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
       </Button>
     </XStack>