From 658968e58fb362d08ef58c4bc71241fa6bcfd9fc Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 13 Oct 2023 13:53:16 +0300
Subject: [PATCH 1/7] feat: add number of word in rec phrase

---
 src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index a80b74da..f13ecc3a 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -65,7 +65,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
           >
             {generatedMnemonic.map((word, index) => (
               <Text key={index} size={19} weight={'semibold'}>
-                {word}
+                {index + 1}. {word}
               </Text>
             ))}
           </XStack>

From 4196be475c5b787eff9976d5f97af15f417806d9 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 13 Oct 2023 14:44:52 +0300
Subject: [PATCH 2/7] fix: rec phase structure

---
 .../KeyGeneration/RecoveryPhrase.tsx          | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index f13ecc3a..44c8ebf3 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -51,25 +51,22 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
           width: '100%',
         }}
       >
-        <YStack
-          space={'$2'}
-          style={{ filter: `blur(${isReveal ? '0px' : '4px'})`, cursor: 'pointer' }}
+        <XStack
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(6, 1fr)',
+            gap: '5px 0px',
+            filter: `blur(${isReveal ? '0px' : '4px'})`,
+            cursor: 'pointer',
+          }}
           onClick={copyRecoveryPhraseHandler}
         >
-          <XStack
-            style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(6, 1fr)',
-              gap: '5px 0px',
-            }}
-          >
-            {generatedMnemonic.map((word, index) => (
-              <Text key={index} size={19} weight={'semibold'}>
-                {index + 1}. {word}
-              </Text>
-            ))}
-          </XStack>
-        </YStack>
+          {generatedMnemonic.map((word, index) => (
+            <Text key={index} size={19} weight={'semibold'}>
+              {index + 1}. {word}
+            </Text>
+          ))}
+        </XStack>
       </Stack>
       <Stack style={{ width: 'fit-content', marginBottom: '12px' }}>
         <Button onPress={revealHandler}>

From c47f589cb57fa505ac4123444f9c8eaef932f8b7 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 13 Oct 2023 16:18:09 +0300
Subject: [PATCH 3/7] fix: spaces and order

---
 .../KeyGeneration/RecoveryPhrase.tsx          | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 44c8ebf3..58c83765 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -1,6 +1,6 @@
 import { Stack, XStack, YStack } from 'tamagui'
 import { Button, InformationBox, Text } from '@status-im/components'
-import { CloseCircleIcon } from '@status-im/icons'
+import { CloseCircleIcon, CopyIcon } from '@status-im/icons'
 import { useEffect, useState } from 'react'
 import { generateMnemonic } from 'web-bip39'
 import wordlist from 'web-bip39/wordlists/english'
@@ -42,32 +42,36 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
 
   return (
     <YStack space={'$4'} style={{ width: '100%', marginTop: isKeystoreFiles ? '20px' : '0px' }}>
-      <Stack
+      <YStack
         style={{
           border: `1px solid #2A4AF566`,
           borderRadius: '16px',
-          padding: '28px 18px',
           backgroundColor: '#f4f6fe',
           width: '100%',
+          alignItems: 'end',
+          cursor: 'pointer',
+          paddingBottom: '8px',
+          paddingRight: '18px',
         }}
+        onClick={copyRecoveryPhraseHandler}
       >
-        <XStack
+        <Stack
           style={{
             display: 'grid',
             gridTemplateColumns: 'repeat(6, 1fr)',
-            gap: '5px 0px',
+            gap: '5px 3px',
+            width: '100%',
             filter: `blur(${isReveal ? '0px' : '4px'})`,
-            cursor: 'pointer',
+            padding: '28px 0px 0px 18px',
           }}
-          onClick={copyRecoveryPhraseHandler}
         >
           {generatedMnemonic.map((word, index) => (
             <Text key={index} size={19} weight={'semibold'}>
               {index + 1}. {word}
             </Text>
           ))}
-        </XStack>
-      </Stack>
+        </Stack>
+      </YStack>
       <Stack style={{ width: 'fit-content', marginBottom: '12px' }}>
         <Button onPress={revealHandler}>
           {isReveal ? 'Hide Recovery Phrase' : 'Reveal Recovery Phrase'}

From b48aec81036224786956957097d5ea01e457abcf Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 13 Oct 2023 16:18:38 +0300
Subject: [PATCH 4/7] feat: add copy icon

---
 src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 58c83765..d9ac21d5 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -1,4 +1,4 @@
-import { Stack, XStack, YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import { Button, InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon, CopyIcon } from '@status-im/icons'
 import { useEffect, useState } from 'react'
@@ -71,6 +71,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
             </Text>
           ))}
         </Stack>
+        <CopyIcon size={20} />
       </YStack>
       <Stack style={{ width: 'fit-content', marginBottom: '12px' }}>
         <Button onPress={revealHandler}>

From d97ccc8c9ec2b0633f24d6ce94be89c7a4b92f30 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 13 Oct 2023 16:27:28 +0300
Subject: [PATCH 5/7] feat: add state for is copied phrase

---
 .../ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index d9ac21d5..71cc09b3 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -1,6 +1,6 @@
 import { Stack, YStack } from 'tamagui'
 import { Button, InformationBox, Text } from '@status-im/components'
-import { CloseCircleIcon, CopyIcon } from '@status-im/icons'
+import { CloseCircleIcon, CopyIcon, CheckIcon } from '@status-im/icons'
 import { useEffect, useState } from 'react'
 import { generateMnemonic } from 'web-bip39'
 import wordlist from 'web-bip39/wordlists/english'
@@ -15,6 +15,7 @@ type RecoveryPhraseProps = {
 
 const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
   const [isReveal, setIsReveal] = useState(false)
+  const [isCopied, setIsCopied] = useState(false)
   const { generatedMnemonic } = useSelector((state: RootState) => state.keyGeneration)
   const dispatch = useDispatch()
 
@@ -32,12 +33,10 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
   }
 
   const copyRecoveryPhraseHandler = () => {
-    if (isKeystoreFiles) {
-      return
-    }
-
     const text = generatedMnemonic.join(' ')
     navigator.clipboard.writeText(text)
+
+    setIsCopied(true)
   }
 
   return (

From e9ce5627c59a023b33db59cfc1915cb9ffd13d3e Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 13 Oct 2023 16:29:13 +0300
Subject: [PATCH 6/7] feat: change icon after copy

---
 src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 71cc09b3..4efd10ae 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -70,7 +70,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
             </Text>
           ))}
         </Stack>
-        <CopyIcon size={20} />
+        {isCopied ? <CheckIcon size={20} /> : <CopyIcon size={20} />}
       </YStack>
       <Stack style={{ width: 'fit-content', marginBottom: '12px' }}>
         <Button onPress={revealHandler}>

From 77d6a07645ed30bddb4251414778e8e1fd1b68be Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 13 Oct 2023 16:40:10 +0300
Subject: [PATCH 7/7] feat: add same position for word number and style

---
 .../KeyGeneration/RecoveryPhrase.tsx            | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 4efd10ae..8fe3a5f3 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -1,10 +1,10 @@
-import { Stack, YStack } from 'tamagui'
+import { Stack, XStack, YStack } from 'tamagui'
 import { Button, InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon, CopyIcon, CheckIcon } from '@status-im/icons'
 import { useEffect, useState } from 'react'
 import { generateMnemonic } from 'web-bip39'
-import wordlist from 'web-bip39/wordlists/english'
 import { useDispatch, useSelector } from 'react-redux'
+import wordlist from 'web-bip39/wordlists/english'
 
 import { RootState } from '../../../redux/store'
 import { setGeneratedMnemonic } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
@@ -65,9 +65,16 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
           }}
         >
           {generatedMnemonic.map((word, index) => (
-            <Text key={index} size={19} weight={'semibold'}>
-              {index + 1}. {word}
-            </Text>
+            <XStack style={{ width: '100%' }}>
+              <Stack style={{ width: '25%' }}>
+                <Text key={index} size={19} weight={'semibold'} color="#0d162566">
+                  {index + 1}.
+                </Text>
+              </Stack>
+              <Text key={index} size={19} weight={'semibold'}>
+                {word}
+              </Text>
+            </XStack>
           ))}
         </Stack>
         {isCopied ? <CheckIcon size={20} /> : <CopyIcon size={20} />}