feat: implement presentation verification and request handling

services/credential-server-ui/src/App.tsx

@@ -5,7 +5,7 @@ import { IconButton } from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider } from "@mui/material/styles";
 import { closeSnackbar, SnackbarProvider } from "notistack";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { BrowserRouter, Route, Routes } from "react-router";
 import { RoutePath } from "./const/route";
 import { Layout } from "./layouts/Layout";
@@ -35,14 +35,15 @@ const App = () => {
 
   const dispatch = useAppDispatch();
   const contacts = useAppSelector((state) => state.connections.contacts);
+  const hasInitialized = useRef(false);
 
   useEffect(() => {
-    dispatch(fetchContacts());
-  }, [dispatch]);
-
-  useEffect(() => {
-    dispatch(fetchSchemas());
-  }, [dispatch]);
+    if (!hasInitialized.current) {
+      hasInitialized.current = true;
+      dispatch(fetchContacts());
+      dispatch(fetchSchemas());
+    }
+  }, []); // Empty dependency array to prevent duplicate calls
 
   useEffect(() => {
     contacts.forEach((contact) => {

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

@@ -9,8 +9,7 @@ import { i18n } from "../../i18n";
 import { CredentialService } from "../../services";
 import { CredentialRequest } from "../../services/credential.types";
 import { useAppDispatch, useAppSelector } from "../../store/hooks";
-import { savePresentationRequest } from "../../store/reducers/connectionsSlice";
-import { PresentationRequestStatus } from "../../store/reducers/connectionsSlice.types";
+import { fetchPresentationRequests } from "../../store/reducers/connectionsSlice";
 import { PopupModal } from "../PopupModal";
 import { InputAttribute } from "./InputAttribute";
 import "./RequestPresentationModal.scss";
@@ -131,18 +130,8 @@ const RequestPresentationModal = ({
         "success"
       );
 
-      dispatch(
-        savePresentationRequest({
-          id: String(Date.now),
-          connectionName:
-            connections.find((item) => item.id === selectedConnection)?.alias ||
-            "",
-          credentialType: credTemplateType,
-          attribute: Object.values(attributes)[0],
-          requestDate: Date.now(),
-          status: PresentationRequestStatus.Requested,
-        })
-      );
+      dispatch(fetchPresentationRequests());
+
       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,81 @@
+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 (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+
+    intervalRef.current = setInterval(pollAllRequested, 750);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [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.scss

@@ -16,6 +16,11 @@
         color: var(--color-warning-800);
         background: var(--color-warning-100);
       }
+
+      &.presented {
+        color: var(--color-success-800);
+        background: var(--color-success-100);
+      }
     }
   }
 }

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

@@ -7,16 +7,18 @@ import {
   TableRow,
   Tooltip,
 } from "@mui/material";
-import { useState } from "react";
+import { useState, useEffect, useRef } 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 { 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,9 +46,11 @@ const headers: AppTableHeader<PresentationRequestData>[] = [
 ];
 
 export const RequestPresentation = () => {
+  const dispatch = useAppDispatch();
   const presentationRequests = useAppSelector(
     (state) => state.connections.presentationRequests
   );
+  const hasInitialized = useRef(false);
   const [openModal, setOpenModal] = useState(false);
 
   const {
@@ -58,7 +62,16 @@ export const RequestPresentation = () => {
     handleChangePage,
     handleChangeRowsPerPage,
     visibleRows,
-  } = useTable(presentationRequests, "requestDate");
+  } = useTable(presentationRequests, "requestDate", "desc");
+
+  useEffect(() => {
+    if (!hasInitialized.current) {
+      hasInitialized.current = true;
+      dispatch(fetchPresentationRequests());
+    }
+  }, []);
+
+  usePresentationPolling();
 
   const handleClick = () => {
     setOpenModal(true);
@@ -159,9 +172,7 @@ export const RequestPresentation = () => {
                   </TableCell>
                   <TableCell align="left">
                     <Box className={`label ${row.status}`}>
-                      {i18n.t(
-                        "pages.requestPresentation.table.status.requested"
-                      )}
+                      {row.status[0].toUpperCase() + row.status.slice(1)}
                     </Box>
                   </TableCell>
                   <TableCell />

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;

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

@@ -38,6 +38,7 @@ interface Credential {
 
 enum PresentationRequestStatus {
   Requested = "requested",
+  Presented = "presented",
 }
 
 interface PresentationRequestData {
@@ -47,6 +48,8 @@ interface PresentationRequestData {
   attribute: string;
   requestDate: number;
   status: PresentationRequestStatus;
+  ipexApplySaid: string;
+  discloserIdentifier: string;
 }
 
 export { PresentationRequestStatus };

services/credential-server/package.json

@@ -16,7 +16,7 @@
         "body-parser": "^1.20.3",
         "cors": "^2.8.5",
         "express": "^5.0.0-beta.3",
-        "signify-ts": "github:WebOfTrust/signify-ts#a7353800fc225f8055f499c60872fa1e447dc39e"
+        "signify-ts": "github:WebOfTrust/signify-ts#62a646f1eb67c30c8f1aecfe628d81dd693b60f2"
     },
     "devDependencies": {
         "copyfiles": "^2.4.1",