new devices system prototype

app/components/DeviceVerify/DeviceVerify.tsx

@@ -0,0 +1,16 @@
+import { DeviceEntry } from "@/app/providers/ProtocolProvider/protocol/packets/packet.device.list";
+import { Flex, Text } from "@mantine/core";
+
+export interface DeviceVerifyProps {
+    device: DeviceEntry;
+}
+
+export function DeviceVerify(props: DeviceVerifyProps) {
+    return (
+        <Flex>
+            <Text>
+                New login from {props.device.deviceName}
+            </Text>
+        </Flex>
+    );
+}

app/components/DialogsPanel/DialogsPanel.tsx

@@ -8,6 +8,8 @@ import { useNavigate } from 'react-router-dom';
 import { DialogsList } from '../DialogsList/DialogsList';
 import { DialogsPanelHeader } from '../DialogsPanelHeader/DialogsPanelHeader';
 import { useDialogsList } from '@/app/providers/DialogListProvider/useDialogsList';
+import { useVerifyRequest } from '@/app/providers/DeviceProvider/useVerifyRequest';
+import { DeviceVerify } from '../DeviceVerify/DeviceVerify';
 
 export function DialogsPanel() {
     const [dialogsMode, setDialogsMode] = useState<'all' | 'requests'>('all');
@@ -15,6 +17,7 @@ export function DialogsPanel() {
     const {dialogs} = useDialogsList();
     const colors = useRosettaColors();
     const navigate = useNavigate();
+    const device = useVerifyRequest();
 
     useEffect(() => {
         ((async () => {
@@ -51,6 +54,9 @@ export function DialogsPanel() {
         >
             <Box>
                 <DialogsPanelHeader></DialogsPanelHeader>
+                {device && (
+                    <DeviceVerify device={device}></DeviceVerify>
+                )}
                 {requestsCount > 0 && <RequestsButton mode={dialogsMode} onClick={changeDialogMode} count={requestsCount}></RequestsButton>}
                 <Divider color={colors.borderColor}></Divider>
             </Box>