From cb087490c033c38c232b6b9e1144a464f5a99844 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 31 Oct 2023 18:06:48 +0200
Subject: [PATCH] feat: use new card

---
 .../KeystoreFiles/KeystoreFiles.tsx           | 44 ++-----------------
 1 file changed, 3 insertions(+), 41 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
index 4c173776..c23be369 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
@@ -3,6 +3,8 @@ import { Button, InformationBox, Input, Text } from '@status-im/components'
 import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
 
+import KeystoreBackupsCard from './KeystoreBackupsCard'
+
 const KeystoreFiles = () => {
   const [encryptedPassword, setEncryptedPassword] = useState('')
   const [confirmEncryptedPassword, setConfirmEncryptedPassword] = useState('')
@@ -37,15 +39,6 @@ const KeystoreFiles = () => {
     setDisplayConfirmEncryptedPassword(getHidedPassword(password.length))
   }
 
-  const downloadKeyFilesHandler = () => {
-    const element = document.createElement('a')
-    const file = new Blob([''], { type: 'text/plain' })
-    element.href = URL.createObjectURL(file)
-    element.download = 'keystore_files.txt'
-    document.body.appendChild(element)
-    element.click()
-  }
-
   const getHidedPassword = (passwordLength: number) => {
     return '*'.repeat(passwordLength)
   }
@@ -103,38 +96,7 @@ const KeystoreFiles = () => {
             />
           </YStack>
         </YStack>
-        <YStack
-          style={{
-            border: '1px solid #DCE0E5',
-            borderRadius: '16px',
-            padding: '12px 16px',
-            width: '32%',
-            marginTop: '3.4%',
-            cursor: 'pointer',
-          }}
-          onClick={downloadKeyFilesHandler}
-        >
-          <Text size={15} weight={'semibold'}>
-            Download Keystore Backups
-          </Text>
-          <XStack
-            style={{
-              justifyContent: 'space-between',
-              width: '100%',
-              alignItems: 'center',
-              marginTop: '8px',
-            }}
-          >
-            <Text size={13} color="#647084">
-              Your keystore files are loaded automatically, please secure your keystore backups for
-              recovery.
-            </Text>
-            <img
-              src={'/icons/download-keystore-backups-icon.svg'}
-              alt="download-keystore-backups"
-            />
-          </XStack>
-        </YStack>
+        <KeystoreBackupsCard />
       </XStack>
       <Stack style={{ width: 'fit-content' }}>
         <Button onPress={generateKeystoreFilesHandler}>Generate Key files</Button>