'init'

app/views/GroupEncryption/GroupEncryption.tsx

@@ -0,0 +1,74 @@
+import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
+import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
+import { KeyImage } from "@/app/components/KeyImage/KeyImage";
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { Button, Flex, Text, Tooltip, useMantineTheme } from "@mantine/core";
+import { IconChevronLeft, IconLock } from "@tabler/icons-react";
+import { useNavigate, useParams } from "react-router-dom";
+
+export function GroupEncryption() {
+    const params = useParams();
+    const encryptKey = params.key!;
+    const theme = useMantineTheme();
+    const colors = useRosettaColors();
+    const navigate = useNavigate();
+
+    const translateStringToHex = (str: string) => {
+        return str.split('').map(c => {
+            /*
+                XOR for prevent share keys
+            */
+            const hex = (c.charCodeAt(0) ^ 27).toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        }).join(' ');
+    }
+
+    return (<>
+        <Breadcrumbs text={"Encryption key"}></Breadcrumbs>
+        <InternalScreen>
+            <Flex align={'center'} justify={'center'}>
+                <KeyImage radius={0} colors={[
+                    theme.colors.blue[1],
+                    theme.colors.blue[2],
+                    theme.colors.blue[3],
+                    theme.colors.blue[4],
+                    theme.colors.blue[5]
+                ]} size={180} keyRender={encryptKey}></KeyImage>                
+            </Flex>
+            <Flex align={'center'} style={{
+                userSelect: 'none'
+            }} direction={'column'} mt={'sm'} justify={'center'}>
+                <Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
+                    translateStringToHex(encryptKey.substring(0, 16))
+                }</Text>
+                <Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
+                    translateStringToHex(encryptKey.substring(16, 32))
+                }</Text>
+                <Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
+                    translateStringToHex(encryptKey.substring(32, 48))
+                }</Text>   
+                <Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
+                    translateStringToHex(encryptKey.substring(48, 64))
+                }</Text>              
+            </Flex>
+            <Flex align={'center'} direction={'column'} mt={'sm'}>
+                <Flex direction={'row'} gap={5} align={'center'}>
+                    <Text fw={500} fz={'sm'}>
+                        Your messages is secure
+                    </Text>
+                    <Tooltip withArrow label="Secure and store only on your device.">
+                        <IconLock size={16} color={colors.success}></IconLock>
+                    </Tooltip>
+                </Flex>
+                <Text ta="center" maw={350} mt={'sm'} c={'dimmed'} fz={'xs'}>
+                    This key is used to encrypt and decrypt messages. Your messages is secure and not stored on our servers.
+                </Text>
+            </Flex>
+            <Flex>
+                <Button onClick={() => navigate(-1)} leftSection={
+                    <IconChevronLeft size={16}></IconChevronLeft>
+                } fullWidth mt={'md'} variant={'subtle'} color="blue">Back</Button>
+            </Flex>
+        </InternalScreen>
+    </>)
+}