addded recoveryKeyModal component

src/components/RecoveryKeyModal.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Modal, Spinner } from 'react-bootstrap';
+import { downloadAsFile } from 'utils/common';
+import { getRecoveryKey } from 'utils/crypto';
+import constants from 'utils/strings/constants';
+
+export interface Props {
+    show: boolean;
+    onHide: () => void;
+}
+function RecoveryKeyModal(props: Props) {
+    const [recoveryKey, setRecoveryKey] = useState(null);
+    useEffect(() => {
+        const main = async () => {
+            const recoveryKey = await getRecoveryKey();
+            console.log(recoveryKey);
+
+            setRecoveryKey(recoveryKey);
+        };
+        main();
+    }, [props.show]);
+    console.log(recoveryKey);
+
+    return (
+        <Modal {...props} size="lg" centered>
+            <Modal.Body>
+                <Modal.Title>
+                    <strong>{constants.DOWNLOAD_RECOVERY_KEY}</strong>
+                </Modal.Title>
+                <hr />
+                {constants.PASSPHRASE_DISCLAIMER()}
+                <div
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        background: '#1a1919',
+                        height: '200px',
+                        padding: '40px',
+                        color: 'white',
+                        margin: '20px 0',
+                    }}
+                >
+                    {recoveryKey ? (
+                        <div
+                            style={{
+                                wordWrap: 'break-word',
+                                overflowWrap: 'break-word',
+                                minWidth: '40%',
+                            }}
+                        >
+                            {recoveryKey}
+                        </div>
+                    ) : (
+                        <Spinner animation="border" />
+                    )}
+                </div>
+                {constants.KEY_NOT_STORED_DISCLAIMER()}
+            </Modal.Body>
+            <Modal.Footer style={{ borderTop: 'none' }}>
+                <Button variant="danger" onClick={props.onHide}>
+                    {constants.SAVE_LATER}
+                </Button>
+                <Button
+                    variant="success"
+                    onClick={() => downloadAsFile(recoveryKey)}
+                >
+                    {constants.SAVE}
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}
+export default RecoveryKeyModal;

src/utils/common/index.ts

@@ -16,3 +16,7 @@ export function getFileExtension(fileName): string {
 export function runningInBrowser() {
     return typeof window !== 'undefined';
 }
+
+export function downloadAsFile(key: string) {
+    console.log('recovery key downloaded');
+}

src/utils/crypto/index.ts

@@ -49,4 +49,8 @@ export const setSessionKeys = async (key: string) => {
     setData(LS_KEYS.SESSION, { sessionKey, sessionNonce });
 };
 
+export const getRecoveryKey = async () => {
+    return 'dsadsadsadasdq3ds7a6d5sa76ds7ad5s7a6d57sa6d57s6ad57sdsadsadsadasdq3ds7a6d5sa76ds7ad5s7a6d57sa6d57s6ad57sa6d5sa76das7d45dsadsadsadasdq3ds7a6d5sa76ds7ad5s7a6d57sa6d57s6ad57sa6d5sa76das7d45a6d5sa76das7d45';
+};
+
 export default CryptoWorker;

src/utils/strings/englishConstants.tsx

@@ -163,6 +163,14 @@ const englishConstants = {
     CHANGE_PASSWORD: 'change password',
     GO_BACK: 'go back',
     DOWNLOAD_RECOVERY_KEY: 'recovery key',
+    SAVE_LATER: 'save later',
+    SAVE: 'save',
+    KEY_NOT_STORED_DISCLAIMER: () => (
+        <>
+            <p>we don't store this key</p>
+            <p>so please save this key in a safe place</p>
+        </>
+    ),
 };
 
 export default englishConstants;