From b5d658f0ece1cde02054d79eeaaee1c6a204e9a1 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 5 Sep 2023 13:19:13 +0300
Subject: [PATCH] feat: add info box for copy pasted phrase

---
 .../ValidatorOnboarding.tsx                   | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 33bc225d..c8d3aa58 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -1,7 +1,7 @@
-import { Stack, YStack } from 'tamagui'
+import { Stack, XStack, YStack } from 'tamagui'
 import { useNavigate } from 'react-router-dom'
 import { useState } from 'react'
-import { Button } from '@status-im/components'
+import { Button, InformationBox } from '@status-im/components'
 
 import FormStepper from './FormStepper/FormStepper'
 import Titles from '../../components/General/Titles'
@@ -15,6 +15,7 @@ import Advisories from './Advisories/Advisories'
 import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
 import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
 import './layoutGradient.css'
+import { CloseCircleIcon } from '@status-im/icons'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -71,11 +72,20 @@ const ValidatorOnboarding = () => {
           {activeStep === 4 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
           {activeStep === 5 && <Activation />}
         </ValidatorBoxWrapper>
-        <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px', zIndex: 999 }}>
-          <Button onPress={continueHandler}>
-            {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
-          </Button>
-        </Stack>
+        <XStack style={{ width: '100%', marginTop: '16px', zIndex: 999, alignItems: 'center' }}>
+          <Stack style={{ width: '100%' }}>
+            <InformationBox
+              message="You have copy and pasted the entire Recovery Phrase. Please ensure you have secured it appropriately prior to continuing."
+              variant="error"
+              icon={<CloseCircleIcon size={20} />}
+            />
+          </Stack>
+          <Stack style={{ width: '100%', alignItems: 'end', zIndex: 999, position: 'absolute' }}>
+            <Button onPress={continueHandler} size={40}>
+              {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
+            </Button>
+          </Stack>
+        </XStack>
       </YStack>
     </div>
   )