From 64818f12520aeba197f5502b648548c750138a7d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 12:06:54 +0300
Subject: [PATCH] feat: create grid with inputs for confirming

---
 .../KeyGeneration/ConfirmRecoveryPhrase.tsx              | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx
index 02957565..5c2ef656 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx
@@ -1,12 +1,17 @@
-import { YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import KeyGenerationTitle from './KeyGenerationTitle'
-import { Text } from '@status-im/components'
+import { Input, Text } from '@status-im/components'
 
 const ConfirmRecoveryPhrase = () => {
   return (
     <YStack space={'$4'} style={{ width: '100%', marginTop: '20px' }}>
       <KeyGenerationTitle />
       <Text size={27}>Confirm Recovery Phrase</Text>
+      <Stack style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px 16px' }}>
+        {Array.from({ length: 24 }, (_, index) => (
+          <Input key={`input-${index}`} />
+        ))}
+      </Stack>
     </YStack>
   )
 }