'init'

app/views/Backup/Backup.tsx

@@ -0,0 +1,53 @@
+import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
+import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
+import { SettingsAlert } from "@/app/components/SettingsAlert/SettingsAlert";
+import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
+import { TextChain } from "@/app/components/TextChain/TextChain";
+import { decodeWithPassword } from "@/app/crypto/crypto";
+import { useAccount } from "@/app/providers/AccountProvider/useAccount";
+import { Paper, Text } from "@mantine/core";
+import { useState } from "react";
+
+export function Backup() {
+    const [show, setShow] = useState("");
+    const [account] = useAccount();
+
+    const onChange = async (v : string) => {
+        try{
+            const decodedPhrase = await decodeWithPassword(v, account.seedPhraseEncrypted);
+            setShow(decodedPhrase);
+        }catch(e){
+
+        }
+    }
+    
+    return (
+        <>
+            <Breadcrumbs text="Backup"></Breadcrumbs>
+            <InternalScreen>
+                <SettingsAlert text={
+                    "If you want to give your recovery phrase to someone, please stop! This may lead to the compromise of your conversations."
+                }></SettingsAlert>
+                <SettingsInput.Default 
+                    hit="Confirmation"
+                    type="password"
+                    disabled={show.trim() !== ""}
+                    mt={'sm'}
+                    onChange={(e) => onChange(e.target.value)} placeholder="Enter confirmation"></SettingsInput.Default>  
+                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
+                    To view your recovery phrase, enter the password you specified when creating your account or restoring from a seed phrase.
+                </Text>        
+                {show.trim() !== "" && (
+                <>
+                    <Paper mt={'sm'} p={'md'} withBorder>
+                        <TextChain rainbow={true} mt={'sm'} text={show}></TextChain>
+                    </Paper>
+                    <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
+                        Please don't share your seed phrase! The administration will never ask you for it.
+                    </Text>
+                </>
+                )}                  
+            </InternalScreen>
+        </>
+    )
+}