new devices system prototype

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>