'init'

app/views/DeviceConfirm/DeviceConfirm.tsx

@@ -0,0 +1,59 @@
+import { PrivateView } from "@/app/components/PrivateView/PrivateView";
+import { ProtocolState } from "@/app/providers/ProtocolProvider/ProtocolProvider";
+import { useProtocolState } from "@/app/providers/ProtocolProvider/useProtocolState";
+import { Flex, Text } from "@mantine/core";
+import Lottie from "lottie-react";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import animationData from './inbox.json'
+import { AnimatedButton } from "@/app/components/AnimatedButton/AnimatedButton";
+import { useLogout } from "@/app/providers/AccountProvider/useLogout";
+
+export function DeviceConfirm() {
+    const protocolState = useProtocolState();
+    const navigate = useNavigate();
+    const logout = useLogout();
+
+    useEffect(() => {
+        if(protocolState == ProtocolState.CONNECTED) {
+            navigate('/main');
+        }
+    }, [protocolState]);
+ 
+    return (
+        <PrivateView> 
+            <Flex h={500} justify={'space-between'} align={'center'} direction={'column'}>
+                <Flex maw={380} direction={'column'} align={'center'} mt={'xl'}>
+                    <Flex>
+                        <Lottie style={{
+                            width: 140,
+                            height: 140
+                        }} animationData={animationData}></Lottie>
+                    </Flex>
+                    <Flex mt={'xl'}>
+                        <Text fw={500} fz={18}>
+                            Confirm new device
+                        </Text>
+                    </Flex>
+                    <Flex mt={'sm'} px={'lg'} justify={'center'}>
+                        <Text ta={'center'} c={'dimmed'} fz={14}>
+                            To confirm this device, please check your first device attached to your account and approve the new device.
+                        </Text>
+                    </Flex>
+                    <Flex mt={'xl'} px={'lg'} w={'100%'} justify={'center'}>
+                        <AnimatedButton onClick={() => {
+                            logout();
+                        }} variant="light" color="white" radius={'xl'} fullWidth animated={['#e03131', '#ff5656']}>Exit</AnimatedButton>
+                    </Flex>                    
+                </Flex>
+                <Flex justify={'center'} mt={'xl'} px={'lg'} align={'center'}>
+                    <Flex justify={'center'} gap={'sm'} align={'center'}>
+                        <Text ta={'center'} c={'dimmed'} fz={12}>
+                            Confirm device <strong>{window.deviceName}</strong> on your first device to loading your chats.
+                        </Text>
+                    </Flex>
+                </Flex>
+            </Flex>
+        </PrivateView>
+    )
+}