decline & accept devices and protocol connection issues fixed

app/components/DeviceVerify/DeviceVerify.tsx

@@ -1,6 +1,8 @@
 import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { useDeviceResolve } from "@/app/providers/DeviceProvider/useDeviceResolve";
 import { DeviceEntry } from "@/app/providers/ProtocolProvider/protocol/packets/packet.device.list";
 import { Box, Button, Divider, Flex, Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
 
 export interface DeviceVerifyProps {
     device: DeviceEntry;
@@ -8,6 +10,24 @@ export interface DeviceVerifyProps {
 
 export function DeviceVerify(props: DeviceVerifyProps) {
     const colors = useRosettaColors();
+    const { accept, decline } = useDeviceResolve();
+
+    const acceptConfirmModal = () => {
+        modals.openConfirmModal({
+            title: 'Accept new device',
+            children: (
+                <Text size="sm">
+                    Are you sure you want to accept this device? This will allow it to access your account.
+                </Text>
+            ),
+            centered: true,
+            labels: { confirm: 'Accept', cancel: 'Cancel' },
+            cancelProps: { color: 'gray', style: {
+                outline: 'none'
+            } },
+            onConfirm: () => accept(props.device.deviceId),
+        });
+    }
 
     return (
         <Box bg={colors.mainColor} h={65}>
@@ -17,8 +37,8 @@ export function DeviceVerify(props: DeviceVerifyProps) {
                     New login from {props.device.deviceName} ({props.device.deviceOs})
                 </Text>
                 <Flex direction={'row'} mt={'xs'} gap={'md'}>
-                    <Button p={0} h={18} variant={'transparent'} size={'xs'}>Accept</Button>
-                    <Button p={0} h={18} variant={'transparent'} size={'xs'} color={'red'}>Decline</Button>
+                    <Button p={0} h={18} onClick={acceptConfirmModal} variant={'transparent'} size={'xs'}>Accept</Button>
+                    <Button p={0} h={18} onClick={() => decline(props.device.deviceId)} variant={'transparent'} size={'xs'} color={'red'}>Decline</Button>
                 </Flex>
             </Flex>            
         </Box>