demo creds

services/credential-server-ui/README.md

@@ -3,11 +3,13 @@
 This folder contains a Web Interface to interact with the [Credential Issuance Server](../credential-server)
 
 ## Features
+
     - Connect to a credential issuance server
     - Issue custom credentials
     - Request custom credentials
 
 ## Requirements
+
 - Node.js
 - npm
 

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/AppTable/AppTable.tsx

@@ -27,6 +27,7 @@ const AppTable = <T extends AppTableBaseData = AppTableBaseData>({
 
   const emptyRows = Array.from({ length: rowPerPage - rows.length }).fill(0);
 
+
   return (
     <TableContainer className="app-table">
       <Table

services/credential-server-ui/src/components/AppTable/constants.ts

@@ -1,4 +1,4 @@
 const MIN_TABLE_WIDTH = 650;
-const ROWS_PER_PAGE_OPTIONS = [5, 10, 25];
+const ROWS_PER_PAGE_OPTIONS = [10, 25, 50];
 
 export { MIN_TABLE_WIDTH, ROWS_PER_PAGE_OPTIONS };

services/credential-server-ui/src/components/AppTable/useTable.ts

@@ -41,7 +41,7 @@ export const useTable = <T extends AppTableBaseData = AppTableBaseData>(
   const [orderBy, setOrderBy] = useState<keyof T>(initSortKey);
   const [selected, setSelected] = useState<string[]>([]);
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(5);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
 
   const handleRequestSort = (property: keyof T) => {
     const isAsc = orderBy === property && order === "asc";

services/credential-server-ui/src/components/IssueCredentialModal/IssueCredentialModal.scss

@@ -10,6 +10,12 @@
       gap: 0.75rem;
       margin-bottom: 0;
     }
+
+    .attribute-list {
+      > *:not(:last-child) {
+        margin-bottom: 1.5rem;
+      }
+    }
   }
 
   &.stage-0,
@@ -62,6 +68,9 @@
   }
 
   .review-stage {
+    max-height: 27.25rem;
+    overflow: auto;
+
     .content {
       color: var(--color-neutral-800);
     }
@@ -71,8 +80,15 @@
     }
   }
 
+  .attribute-list {
+    max-height: 27.25rem;
+    overflow: auto;
+  }
+
   .input-attribute {
     width: 100%;
+    max-height: 27.25rem;
+    overflow: auto;
 
     & > div {
       width: 100%;

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

@@ -1,5 +1,5 @@
 import ArrowBackOutlinedIcon from "@mui/icons-material/ArrowBackOutlined";
-import { Box, Button } from "@mui/material";
+import { Box, Button, List } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
 import { Trans } from "react-i18next";
 import { IGNORE_ATTRIBUTES } from "../../const";
@@ -248,16 +248,22 @@ const IssueCredentialModal = ({
         );
       }
       case IssueCredentialStage.InputAttribute: {
-        return attributeKeys.map((attribute) => (
-          <InputAttribute
-            key={attribute}
-            value={attributes}
-            setValue={updateAttributes}
-            attributes={[attribute]}
-            required={requiredList.includes(attribute)}
-            properties={properties}
-          />
-        ));
+        return (
+          <>
+            <List className="attribute-list">
+              {attributeKeys.map((attribute) => (
+                <InputAttribute
+                  key={attribute}
+                  value={attributes}
+                  setValue={updateAttributes}
+                  attributes={[attribute]}
+                  required={requiredList.includes(attribute)}
+                  properties={properties}
+                />
+              ))}
+            </List>
+          </>
+        );
       }
       case IssueCredentialStage.Review: {
         const nonEmptyAttributes = Object.fromEntries(

services/credential-server-ui/src/components/PresentationDetailModal/PresentationDetailModal.scss

@@ -0,0 +1,46 @@
+.presentation-detail-modal {
+  .modal-content {
+    max-width: 600px;
+    width: 100%;
+  }
+
+  .status-badge {
+    padding: 0.25rem 0.75rem;
+    width: fit-content;
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    border-radius: 0.5rem;
+    border: none;
+    box-shadow: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.issued {
+      color: var(--color-success-800);
+      background: var(--color-success-100);
+    }
+
+    &.revoked {
+      color: var(--color-error-800);
+      background: var(--color-error-100);
+    }
+
+    &.requested {
+      color: var(--color-warning-800);
+      background: var(--color-warning-100);
+    }
+
+    .MuiChip-label {
+      padding: 0;
+      font-size: 0.75rem;
+      line-height: 1.25rem;
+    }
+  }
+
+  .content {
+    color: var(--color-neutral-600);
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+}