'init'

app/views/Safety/Safety.tsx

@@ -0,0 +1,83 @@
+import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
+import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
+import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
+import { useAccount } from "@/app/providers/AccountProvider/useAccount";
+import { useAccountProvider } from "@/app/providers/AccountProvider/useAccountProvider";
+import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
+import { Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import { useNavigate } from "react-router-dom";
+
+export function Safety() {
+    const publicKey = usePublicKey();
+    const [account, deleteAccount] = useAccount();
+    const {removeAccountFromLoginDice} = useAccountProvider();
+
+    const navigate = useNavigate();
+
+    const openDeleteModal = () => {
+        modals.openConfirmModal({
+            title: 'Account delete',
+            centered: true,
+            children: (
+            <Text size="sm">
+                You are attempting to delete your account. Are you sure you want to proceed? This will result in a complete loss of data.
+            </Text>
+            ),
+            withCloseButton: false,
+            labels: { confirm: 'Continue', cancel: "No, sorry" },
+            confirmProps: { color: 'red' },
+            onConfirm: accountDelete
+        });
+    }
+
+    const accountDelete = () => {
+        removeAccountFromLoginDice();
+        deleteAccount();
+        navigate("/");
+    }
+
+    return (
+        <>
+            <Breadcrumbs text="Safety"></Breadcrumbs>
+            <InternalScreen>
+                <SettingsInput.Copy 
+                    mt={'sm'} 
+                    hit="Public Key" 
+                    value={publicKey} 
+                    placeholder="Public"></SettingsInput.Copy>
+                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
+                    This is your public key. If you haven't set a @username yet, you can ask a friend to message you using your public key.
+                </Text>
+                <SettingsInput.Default 
+                    mt={'sm'} 
+                    disabled 
+                    hit="Private key" 
+                    value={account.privateKey}></SettingsInput.Default>
+                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
+                    This is your private key. For security reasons, we provide it only in an encrypted form so you can simply admire it. 
+                    If anyone asks you for this key, please do not share it.
+                </Text>
+                <SettingsInput.Clickable mt={'sm'} c={'red'}
+                    hit="Backup" 
+                    onClick={() => navigate("/main/backup")}
+                    >
+                    </SettingsInput.Clickable>  
+                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
+                    Please save your seed phrase, it is necessary for future access to your conversations.
+                    Do not share this seed phrase with anyone, otherwise, the person you share it with will gain access to your conversations.
+                </Text> 
+                <SettingsInput.Clickable mt={'sm'} c={'red'}
+                    hit="Delete Account" 
+                    onClick={openDeleteModal}
+                    rightChevronHide
+                    >
+                    </SettingsInput.Clickable>  
+                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
+                    This action cannot be undone, it will result in the complete deletion of account data from your device. 
+                    Please note, this will also delete your data on the server, such as your avatar, encrypted messages, and username.
+                </Text>                                                      
+            </InternalScreen>
+        </>
+    )
+}