feat: implement presentation verification and request handling

services/credential-server-ui/package.json

@@ -31,7 +31,8 @@
     "react-dom": "^19.0.0",
     "react-i18next": "^15.4.0",
     "react-redux": "^9.2.0",
-    "react-router": "^7.1.5"
+    "react-router": "^7.1.5",
+    "redux-persist": "^6.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",

services/credential-server-ui/src/components/PresentationStatus/PresentationStatus.tsx

@@ -0,0 +1,53 @@
+import { Chip } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
+import { PresentationRequestStatus } from "../../store/reducers/connectionsSlice.types";
+
+interface PresentationStatusProps {
+  status: PresentationRequestStatus;
+  className?: string;
+}
+
+const PresentationStatus = ({ status, className }: PresentationStatusProps) => {
+  const getStatusConfig = () => {
+    switch (status) {
+      case PresentationRequestStatus.Requested:
+        return {
+          label: "Requested",
+          icon: <HourglassEmptyIcon />,
+          color: "warning" as const,
+          variant: "outlined" as const,
+        };
+      case PresentationRequestStatus.Presented:
+        return {
+          label: "Presented",
+          icon: <CheckCircleIcon />,
+          color: "success" as const,
+          variant: "filled" as const,
+        };
+      default:
+        return {
+          label: "Unknown",
+          icon: null,
+          color: "default" as const,
+          variant: "outlined" as const,
+        };
+    }
+  };
+
+  const config = getStatusConfig();
+
+  return (
+    <Chip
+      icon={config.icon || undefined}
+      label={config.label}
+      color={config.color}
+      variant={config.variant}
+      size="small"
+      className={className}
+    />
+  );
+};
+
+export { PresentationStatus };
+export type { PresentationStatusProps };

services/credential-server-ui/src/components/PresentationStatus/index.ts

@@ -0,0 +1 @@
+export * from "./PresentationStatus";

services/credential-server-ui/src/components/RequestPresentationModal/RequestPresentationModal.tsx

@@ -125,24 +125,29 @@ const RequestPresentationModal = ({
 
     try {
       setLoading(true);
-      await CredentialService.requestPresentation(data);
+      const response = await CredentialService.requestPresentation(data);
       triggerToast(
         i18n.t("pages.requestPresentation.modal.messages.success"),
         "success"
       );
 
+      const ipexApplySaid = response.data.data.ipexApplySaid;
+
       dispatch(
         savePresentationRequest({
-          id: String(Date.now),
+          id: ipexApplySaid,
           connectionName:
             connections.find((item) => item.id === selectedConnection)?.alias ||
             "",
           credentialType: credTemplateType,
           attribute: Object.values(attributes)[0],
           requestDate: Date.now(),
           status: PresentationRequestStatus.Requested,
+          ipexApplySaid: ipexApplySaid,
+          discloserIdentifier: selectedConnection,
         })
       );
+
       resetModal();
     } catch (e) {
       triggerToast(

services/credential-server-ui/src/config.ts

@@ -36,6 +36,8 @@ const config = {
     resolveOobi: "/resolveOobi",
     requestDisclosure: "/requestDisclosure",
     revokeCredential: "/revokeCredential",
+    verifyIpexPresentation: "/verifyIpexPresentation",
+    getPresentationRequests: "/getPresentationRequests",
     schemas: "/schemas",
   },
 };

services/credential-server-ui/src/hooks/usePresentationPolling.ts

@@ -0,0 +1,89 @@
+import { useEffect, useRef, useCallback } from "react";
+import { useAppSelector, useAppDispatch } from "../store/hooks";
+import { updatePresentationStatus } from "../store/reducers/connectionsSlice";
+import { PresentationRequestStatus } from "../store/reducers/connectionsSlice.types";
+import { CredentialService } from "../services";
+
+export const usePresentationPolling = () => {
+  const dispatch = useAppDispatch();
+  const presentationRequests = useAppSelector(
+    (state) => state.connections.presentationRequests
+  );
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const errorCountRef = useRef(0);
+  const maxErrors = 5;
+
+  const requestedPresentations = presentationRequests.filter(
+    (request) => request.status === PresentationRequestStatus.Requested
+  );
+
+  const pollAllRequested = useCallback(async () => {
+    if (requestedPresentations.length === 0) {
+      return;
+    }
+
+    for (const request of requestedPresentations) {
+      try {
+        const response = await CredentialService.verifyPresentation(
+          request.ipexApplySaid,
+          request.discloserIdentifier
+        );
+
+        if (response.data.success && response.data.data.verified) {
+          dispatch(
+            updatePresentationStatus({
+              id: request.id,
+              status: PresentationRequestStatus.Presented,
+            })
+          );
+        }
+      } catch (error) {
+        errorCountRef.current += 1;
+
+        if (errorCountRef.current >= maxErrors) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+          return;
+        }
+      }
+    }
+
+    if (requestedPresentations.length > 0) {
+      errorCountRef.current = 0;
+    }
+  }, [requestedPresentations, dispatch]);
+
+  useEffect(() => {
+    if (requestedPresentations.length > 0) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+
+      intervalRef.current = setInterval(pollAllRequested, 500);
+      pollAllRequested();
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [requestedPresentations.length, pollAllRequested]);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, []);
+};

services/credential-server-ui/src/locales/en/en.json

@@ -229,7 +229,8 @@
         "requestDate": "Date Requested",
         "status": {
           "header": "Status",
-          "requested": "Requested"
+          "requested": "Requested",
+          "presented": "Presented"
         }
       },
       "modal": {

services/credential-server-ui/src/pages/RequestPresentation/RequestPresentation.tsx

@@ -7,16 +7,19 @@ import {
   TableRow,
   Tooltip,
 } from "@mui/material";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { AppTable, useTable } from "../../components/AppTable";
 import { AppTableHeader } from "../../components/AppTable/AppTable.types";
 import { filter, FilterBar } from "../../components/FilterBar";
 import { FilterData } from "../../components/FilterBar/FilterBar.types";
 import { PageHeader } from "../../components/PageHeader";
 import { RequestPresentationModal } from "../../components/RequestPresentationModal";
+import { PresentationStatus } from "../../components/PresentationStatus";
 import { i18n } from "../../i18n";
-import { useAppSelector } from "../../store/hooks";
+import { useAppSelector, useAppDispatch } from "../../store/hooks";
 import { PresentationRequestData } from "../../store/reducers/connectionsSlice.types";
+import { fetchPresentationRequests } from "../../store/reducers/connectionsSlice";
+import { usePresentationPolling } from "../../hooks/usePresentationPolling";
 import { formatDate, formatDateTime } from "../../utils/dateFormatter";
 import "./RequestPresentation.scss";
 
@@ -44,6 +47,7 @@ const headers: AppTableHeader<PresentationRequestData>[] = [
 ];
 
 export const RequestPresentation = () => {
+  const dispatch = useAppDispatch();
   const presentationRequests = useAppSelector(
     (state) => state.connections.presentationRequests
   );
@@ -58,7 +62,13 @@ export const RequestPresentation = () => {
     handleChangePage,
     handleChangeRowsPerPage,
     visibleRows,
-  } = useTable(presentationRequests, "requestDate");
+  } = useTable(presentationRequests, "requestDate", "desc");
+
+  useEffect(() => {
+    dispatch(fetchPresentationRequests());
+  }, [dispatch]);
+
+  usePresentationPolling();
 
   const handleClick = () => {
     setOpenModal(true);
@@ -158,11 +168,7 @@ export const RequestPresentation = () => {
                     </Tooltip>
                   </TableCell>
                   <TableCell align="left">
-                    <Box className={`label ${row.status}`}>
-                      {i18n.t(
-                        "pages.requestPresentation.table.status.requested"
-                      )}
-                    </Box>
+                    <PresentationStatus status={row.status} />
                   </TableCell>
                   <TableCell />
                 </TableRow>

services/credential-server-ui/src/services/credential.ts

@@ -21,6 +21,23 @@ const CredentialService = {
       data
     );
   },
+  verifyPresentation: async (
+    ipexApplySaid: string,
+    discloserIdentifier: string
+  ) => {
+    return httpInstance.post(
+      `${config.endpoint}${config.path.verifyIpexPresentation}`,
+      {
+        ipexApplySaid,
+        discloserIdentifier,
+      }
+    );
+  },
+  getPresentationRequests: async () => {
+    return httpInstance.get(
+      `${config.endpoint}${config.path.getPresentationRequests}`
+    );
+  },
 };
 
 export { CredentialService };

services/credential-server-ui/src/store/reducers/connectionsSlice.ts

@@ -2,7 +2,11 @@ import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
 import axios from "axios";
 import { config } from "../../config";
 import { Contact } from "../../pages/Connections/components/ConnectionsTable/ConnectionsTable.types";
-import { Credential, PresentationRequestData } from "./connectionsSlice.types";
+import {
+  Credential,
+  PresentationRequestData,
+  PresentationRequestStatus,
+} from "./connectionsSlice.types";
 
 interface ConnectionsState {
   contacts: Contact[];
@@ -43,6 +47,16 @@ export const fetchContactCredentials = createAsyncThunk(
   }
 );
 
+export const fetchPresentationRequests = createAsyncThunk(
+  "connections/fetchPresentationRequests",
+  async () => {
+    const response = await axios.get(
+      `${config.endpoint}${config.path.getPresentationRequests}`
+    );
+    return response.data.data;
+  }
+);
+
 const connectionsSlice = createSlice({
   name: "connections",
   initialState,
@@ -53,6 +67,17 @@ const connectionsSlice = createSlice({
     ) => {
       state.presentationRequests.push(action.payload);
     },
+    updatePresentationStatus: (
+      state,
+      action: PayloadAction<{ id: string; status: PresentationRequestStatus }>
+    ) => {
+      const request = state.presentationRequests.find(
+        (req) => req.id === action.payload.id
+      );
+      if (request) {
+        request.status = action.payload.status;
+      }
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -75,10 +100,22 @@ const connectionsSlice = createSlice({
         state.credentials = currentCredentials.concat(
           credentials.map((cred: Credential) => ({ ...cred, contactId }))
         );
+      })
+      .addCase(fetchPresentationRequests.fulfilled, (state, action) => {
+        const payload = action.payload.map((request: any) => {
+          const firstKey = Object.keys(request.attributes)[0];
+          return {
+            ...request,
+            attribute: firstKey ? request.attributes[firstKey] : "",
+          };
+        });
+
+        state.presentationRequests = payload;
       });
   },
 });
 
-export const { savePresentationRequest } = connectionsSlice.actions;
+export const { savePresentationRequest, updatePresentationStatus } =
+  connectionsSlice.actions;
 
 export default connectionsSlice.reducer;