pkgs/ui/src/app/access-point/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { mutate } from 'swr';
+import { mutate } from "swr";
 import { useGetAttachedEntities } from "@/api/entities/entities";
 import { useGetRepositories } from "@/api/repositories/repositories";
 import SummaryDetails from "@/components/summary_card";
@@ -10,16 +10,29 @@ import {
   APAttachmentsTableConfig,
   APServiceRepositoryTableConfig,
 } from "@/config/access_point";
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
 export default function AccessPoint() {
-
+  const {
-  const { data: APAttachementData, isLoading: loadingAttachements, swrKey: attachedEntitiesKeyFunc } = useGetAttachedEntities();
+    data: APAttachementData,
-  const { data: APRepositories, isLoading: laodingRepositories, swrKey: repositoriesKeyFunc } = useGetRepositories();
+    isLoading: loadingAttachements,
+    swrKey: attachedEntitiesKeyFunc,
+  } = useGetAttachedEntities();
+  const {
+    data: APRepositories,
+    isLoading: laodingRepositories,
+    swrKey: repositoriesKeyFunc,
+  } = useGetRepositories();
 
   const onRefresh = () => {
-    const attachedEntitiesKey = typeof attachedEntitiesKeyFunc === 'function' ? attachedEntitiesKeyFunc() : attachedEntitiesKeyFunc;
+    const attachedEntitiesKey =
-    const repositoriesKey = typeof repositoriesKeyFunc === 'function' ? repositoriesKeyFunc() : repositoriesKeyFunc;
+      typeof attachedEntitiesKeyFunc === "function"
+        ? attachedEntitiesKeyFunc()
+        : attachedEntitiesKeyFunc;
+    const repositoriesKey =
+      typeof repositoriesKeyFunc === "function"
+        ? repositoriesKeyFunc()
+        : repositoriesKeyFunc;
 
     if (attachedEntitiesKey) {
       mutate(attachedEntitiesKey);
@@ -27,7 +40,7 @@ export default function AccessPoint() {
     if (repositoriesKey) {
       mutate(repositoriesKey);
     }
-  }
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {

pkgs/ui/src/app/client-1/page.tsx

@@ -6,7 +6,16 @@ import {
 } from "@/config/client_1";
 import CustomTable from "@/components/table";
 import useGetEntityByName from "@/components/hooks/useGetEntityById";
-import { Alert, Button, Card, CardContent, CardHeader, Skeleton, Snackbar, Typography } from "@mui/material";
+import {
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Skeleton,
+  Snackbar,
+  Typography,
+} from "@mui/material";
 import CopyToClipboard from "@/components/copy_to_clipboard";
 import { mutate } from "swr";
 import { useGetEntity } from "@/api/entities/entities";
@@ -14,48 +23,56 @@ import { BASE_URL } from "@/constants";
 import axios from "axios";
 
 export default function Client1() {
-
+  const { entity } = useGetEntityByName("C1");
-  const { entity } = useGetEntityByName('C1');
+  const {
-  const { data: client1, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
+    data: client1,
+    isLoading,
+    swrKey: entityKeyFunc,
+  } = useGetEntity({ entity_did: entity?.did });
   const cardContentRef = useRef(null);
   const [isAttached, setIsAttached] = useState(entity?.attached || false);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
+  const [snackbarMessage, setSnackbarMessage] = useState("");
 
   const closeSnackBar = () => {
-    setSnackbarMessage('');
+    setSnackbarMessage("");
     setSnackbarOpen(false);
-  }
+  };
 
   const onAttachEntity = async () => {
     try {
-      const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did });
+      const response = await axios.post(`${BASE_URL}/attach`, {
+        entity_did: entity?.did,
+      });
       setSnackbarMessage(response.data.message);
       setSnackbarOpen(true);
     } catch (error) {
       console.error(error);
     } finally {
-      setIsAttached(true)
+      setIsAttached(true);
     }
-  }
+  };
 
   const onDetachEntity = async () => {
     try {
-      const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did });
+      const response = await axios.post(`${BASE_URL}/detach`, {
+        entity_did: entity?.did,
+      });
       console.log(response);
-      setSnackbarMessage('Entity detached successfully.');
+      setSnackbarMessage("Entity detached successfully.");
       setSnackbarOpen(true);
     } catch (error) {
       console.error(error);
     } finally {
-      setIsAttached(false)
+      setIsAttached(false);
     }
-  }
+  };
 
   const onRefresh = () => {
-    const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
+    const entityKey =
+      typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
     if (entityKey) mutate(entityKey);
-  }
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -66,8 +83,7 @@ export default function Client1() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (isLoading)
+  if (isLoading) return <Skeleton height={500} />;
-    return <Skeleton height={500} />
 
   return (
     <div className="m-10">
@@ -80,18 +96,27 @@ export default function Client1() {
       >
         <h2>Client 1</h2>
         <div>
-
+          {isAttached === false ? (
-          {isAttached === false ?
+            <Button
-            <Button onClick={onAttachEntity} className="mr-6" variant="contained">
+              onClick={onAttachEntity}
+              className="mr-6"
+              variant="contained"
+            >
               Attach
             </Button>
-            :
+          ) : (
-            <Button onClick={onDetachEntity} className="mr-6" variant="contained">
+            <Button
+              onClick={onDetachEntity}
+              className="mr-6"
+              variant="contained"
+            >
               Detach
             </Button>
-          }
+          )}
 
-          <Button onClick={onRefresh} variant="contained">Refresh</Button>
+          <Button onClick={onRefresh} variant="contained">
+            Refresh
+          </Button>
         </div>
       </div>
 
@@ -128,8 +153,13 @@ export default function Client1() {
           configuration={Client1ProducerTableConfig}
         />
       </div>
-      <Snackbar onClose={closeSnackBar} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} autoHideDuration={1000}>
+      <Snackbar
-        <Alert severity="success" sx={{ width: '100%' }}>
+        onClose={closeSnackBar}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        open={snackbarOpen}
+        autoHideDuration={1000}
+      >
+        <Alert severity="success" sx={{ width: "100%" }}>
           {snackbarMessage}
         </Alert>
       </Snackbar>

pkgs/ui/src/app/client-2/page.tsx

@@ -6,7 +6,16 @@ import {
 } from "@/config/client_2";
 import CustomTable from "@/components/table";
 import useGetEntityByName from "@/components/hooks/useGetEntityById";
-import { Button, Card, CardContent, CardHeader, Skeleton, Typography, Snackbar, Alert } from "@mui/material";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Skeleton,
+  Typography,
+  Snackbar,
+  Alert,
+} from "@mui/material";
 import CopyToClipboard from "@/components/copy_to_clipboard";
 import { useGetEntity } from "@/api/entities/entities";
 import { mutate } from "swr";
@@ -14,46 +23,54 @@ import axios from "axios";
 import { BASE_URL } from "@/constants";
 
 export default function Client2() {
-
+  const { entity } = useGetEntityByName("C2");
-  const { entity } = useGetEntityByName('C2');
+  const {
-  const { data: client2, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
+    data: client2,
+    isLoading,
+    swrKey: entityKeyFunc,
+  } = useGetEntity({ entity_did: entity?.did });
   const cardContentRef = useRef(null);
   const [isAttached, setIsAttached] = useState(entity?.attached);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
+  const [snackbarMessage, setSnackbarMessage] = useState("");
 
   const closeSnackBar = () => {
-    setSnackbarMessage('');
+    setSnackbarMessage("");
     setSnackbarOpen(false);
-  }
+  };
 
   const onAttachEntity = async () => {
     try {
-      const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did });
+      const response = await axios.post(`${BASE_URL}/attach`, {
+        entity_did: entity?.did,
+      });
       alert(response.data.message);
     } catch (error) {
       console.error(error);
     } finally {
-      setIsAttached(true)
+      setIsAttached(true);
     }
-  }
+  };
 
   const onDetachEntity = async () => {
     try {
-      const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did });
+      const response = await axios.post(`${BASE_URL}/detach`, {
-      console.log('detach', response)
+        entity_did: entity?.did,
-      alert('Entity Detached Successfully.');
+      });
+      console.log("detach", response);
+      alert("Entity Detached Successfully.");
     } catch (error) {
       console.error(error);
     } finally {
-      setIsAttached(false)
+      setIsAttached(false);
     }
-  }
+  };
 
   const onRefresh = () => {
-    const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
+    const entityKey =
+      typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
     if (entityKey) mutate(entityKey);
-  }
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -64,8 +81,7 @@ export default function Client2() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (isLoading)
+  if (isLoading) return <Skeleton height={500} />;
-    return <Skeleton height={500} />
 
   return (
     <div className="m-10">
@@ -78,16 +94,26 @@ export default function Client2() {
       >
         <h2>Client 2</h2>
         <div>
-          {isAttached === false ?
+          {isAttached === false ? (
-            <Button onClick={onAttachEntity} className="mr-6" variant="contained">
+            <Button
+              onClick={onAttachEntity}
+              className="mr-6"
+              variant="contained"
+            >
               Attach
             </Button>
-            :
+          ) : (
-            <Button onClick={onDetachEntity} className="mr-6" variant="contained">
+            <Button
+              onClick={onDetachEntity}
+              className="mr-6"
+              variant="contained"
+            >
               Detach
             </Button>
-          }
+          )}
-          <Button onClick={onRefresh} variant="contained">Refresh</Button>
+          <Button onClick={onRefresh} variant="contained">
+            Refresh
+          </Button>
         </div>
       </div>
 
@@ -124,8 +150,13 @@ export default function Client2() {
           configuration={Client2ProducerTableConfig}
         />
       </div>
-      <Snackbar onClose={closeSnackBar} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} autoHideDuration={1000}>
+      <Snackbar
-        <Alert severity="success" sx={{ width: '100%' }}>
+        onClose={closeSnackBar}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        open={snackbarOpen}
+        autoHideDuration={1000}
+      >
+        <Alert severity="success" sx={{ width: "100%" }}>
           {snackbarMessage}
         </Alert>
       </Snackbar>

pkgs/ui/src/app/distributed-ledger-gateway/page.tsx

@@ -6,13 +6,16 @@ import SummaryDetails from "@/components/summary_card";
 import useFetch from "@/components/hooks/useFetch";
 import { useEffect } from "react";
 
-
 export default function DLG() {
-  const { data: resolutionData, loading: loadingResolutions, fetch } = useFetch('/get_resolutions');
+  const {
+    data: resolutionData,
+    loading: loadingResolutions,
+    fetch,
+  } = useFetch("/get_resolutions");
 
   const onRefresh = () => {
     fetch();
-  }
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {

pkgs/ui/src/app/home/page.tsx

@@ -9,15 +9,17 @@ import { useEffect } from "react";
 import { mutate } from "swr";
 
 export default function Home() {
-
   const { data } = useAppState();
 
   const entitiesKeyFunc = data.entitiesKeyFunc;
 
   const onRefresh = () => {
-    const entityKey = typeof entitiesKeyFunc === 'function' ? entitiesKeyFunc() : entitiesKeyFunc;
+    const entityKey =
+      typeof entitiesKeyFunc === "function"
+        ? entitiesKeyFunc()
+        : entitiesKeyFunc;
     if (entitiesKeyFunc) mutate(entityKey);
-  }
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -39,7 +41,11 @@ export default function Home() {
 
       <div>
         <h4>Home View Table</h4>
-        <CustomTable loading={data.loadingEntities} data={data?.allEntities} configuration={HomeTableConfig} />
+        <CustomTable
+          loading={data.loadingEntities}
+          data={data?.allEntities}
+          configuration={HomeTableConfig}
+        />
       </div>
 
       <div>

pkgs/ui/src/components/hooks/useAppContext.tsx

@@ -22,10 +22,10 @@ type AppContextType = {
 export const AppContext = createContext<AppContextType>({} as AppContextType);
 
 type AppState = {
-  allEntities: Entity[] | undefined,
+  allEntities: Entity[] | undefined;
-  loadingEntities: boolean,
+  loadingEntities: boolean;
-  entitiesKeyFunc: any,
+  entitiesKeyFunc: any;
-}
+};
 
 interface AppContextProviderProps {
   children: ReactNode;
@@ -35,7 +35,6 @@ export const WithAppState = (props: AppContextProviderProps) => {
 
   const { data: entityData, swrKey: entitiesKeyFunc } = useGetEntities();
 
-
   const isLoading = false;
   const error = undefined;
 
@@ -47,7 +46,7 @@ export const WithAppState = (props: AppContextProviderProps) => {
 
   useEffect(() => {
     if (entityData) {
-      setAppState(prevState => ({
+      setAppState((prevState) => ({
         ...prevState,
         allEntities: entityData.data,
         entitiesKeyFunc,

pkgs/ui/src/components/hooks/useFetch.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
-import axios from 'axios';
+import axios from "axios";
-import { BASE_URL } from '@/constants';
+import { BASE_URL } from "@/constants";
 
 const useFetch = (url: string) => {
   const [data, setData] = useState([]);
@@ -9,7 +9,8 @@ const useFetch = (url: string) => {
 
   const fetch = () => {
     setLoading(true);
-    axios.get(BASE_URL + url)
+    axios
+      .get(BASE_URL + url)
       .then((response) => {
         setData(response.data);
       })
@@ -29,5 +30,4 @@ const useFetch = (url: string) => {
   return { data, loading, error, fetch };
 };
 
-
 export default useFetch;

pkgs/ui/src/components/hooks/useGetEntityById.tsx

@@ -10,7 +10,7 @@ const useGetEntityByName = (nameOrDid: string) => {
   }
 
   const entity = allEntities.find(
-    (entity) => entity.name === nameOrDid || entity.did === nameOrDid
+    (entity) => entity.name === nameOrDid || entity.did === nameOrDid,
   );
 
   return { entity, isLoading: false };

pkgs/ui/src/components/summary_card/index.tsx

@@ -36,7 +36,11 @@ const SummaryDetails = ({
               Attach / Detach
             </Button>
           )}
-          {hasRefreshButton && <Button onClick={onRefresh} variant="contained">Refresh</Button>}
+          {hasRefreshButton && (
+            <Button onClick={onRefresh} variant="contained">
+              Refresh
+            </Button>
+          )}
         </div>
       </div>
       {hasDetails && (

pkgs/ui/src/components/table/index.tsx

@@ -12,10 +12,8 @@ import { ICustomTable, CustomTableConfiguration } from "@/types";
 import { Checkbox, Skeleton } from "@mui/material";
 
 const CustomTable = ({ configuration, data, loading }: ICustomTable) => {
-
-
   if (loading)
-    return <Skeleton variant="rectangular" animation="wave" height={200} />
+    return <Skeleton variant="rectangular" animation="wave" height={200} />;
 
   // display empty icon in case there is no data
   if (!data || data.length === 0)

pkgs/ui/src/config/access_point/index.tsx

@@ -28,11 +28,10 @@ export const APAttachmentsTableConfig = [
     key: "other",
     label: "Network",
     render: (value: any) => {
-      let renderedValue = ''
+      let renderedValue = "";
-      if (typeof value === 'object')
+      if (typeof value === "object") renderedValue = value?.network;
-        renderedValue = value?.network;
       return renderedValue;
-    }
+    },
   },
   {
     key: "ip",
@@ -65,13 +64,17 @@ export const APServiceRepositoryTableConfig = [
     key: "other",
     label: "Type",
     render: (value: any) => {
-      let renderedValue: any = ''
+      let renderedValue: any = "";
-      if (typeof value === 'object') {
+      if (typeof value === "object") {
         const label = Object.keys(value)[0];
-        const info = value[label]
+        const info = value[label];
-        renderedValue = (<code>{label} {info}</code>);
+        renderedValue = (
+          <code>
+            {label} {info}
+          </code>
+        );
       }
       return renderedValue;
-    }
+    },
   },
 ];

pkgs/ui/src/config/client_1/index.tsx

@@ -13,8 +13,12 @@ export const Client1ConsumerTableConfig = [
     key: "endpoint_url",
     label: "End Point",
     render: () => {
-      return <Button disabled variant="outlined">Consume</Button>
+      return (
-    }
+        <Button disabled variant="outlined">
+          Consume
+        </Button>
+      );
+    },
   },
   // {
   //   key: "entity",
@@ -55,14 +59,19 @@ export const Client1ProducerTableConfig = [
     key: "other",
     label: "Action",
     render: (value: any) => {
-      let renderedValue: any = '';
+      let renderedValue: any = "";
       if (typeof value === "object")
         renderedValue = (
           <>
-            {value.action.map((actionType: string) => <><code>{actionType}</code><br /></>)}
+            {value.action.map((actionType: string) => (
+              <>
+                <code>{actionType}</code>
+                <br />
+              </>
+            ))}
           </>
-        )
+        );
       return renderedValue;
     },
-  }
+  },
 ];

pkgs/ui/src/config/client_2/index.tsx

@@ -13,8 +13,12 @@ export const Client2ConsumerTableConfig = [
     key: "endpoint_url",
     label: "End Point",
     render: () => {
-      return <Button disabled variant="outlined">Consume</Button>
+      return (
-    }
+        <Button disabled variant="outlined">
+          Consume
+        </Button>
+      );
+    },
   },
   // {
   //   key: "entity",
@@ -55,14 +59,19 @@ export const Client2ProducerTableConfig = [
     key: "other",
     label: "Action",
     render: (value: any) => {
-      let renderedValue: any = '';
+      let renderedValue: any = "";
       if (typeof value === "object")
         renderedValue = (
           <>
-            {value.action.map((actionType: string) => <><code>{actionType}</code><br /></>)}
+            {value.action.map((actionType: string) => (
+              <>
+                <code>{actionType}</code>
+                <br />
+              </>
+            ))}
           </>
-        )
+        );
       return renderedValue;
     },
-  }
+  },
 ];

pkgs/ui/src/config/dlg/index.ts

@@ -46,6 +46,6 @@ export const DLGResolutionTableConfig = [
   {
     key: "timestamp",
     label: "Timestamp",
-    render: (value: string) => formatDateTime(value)
+    render: (value: string) => formatDateTime(value),
-  }
+  },
 ];

pkgs/ui/src/config/home/index.ts

@@ -13,7 +13,7 @@ export const HomeTableConfig = [
     render: (value: any) => {
       const renderedValue = typeof value === "object" ? value?.network : "-";
       return renderedValue;
-    }
+    },
   },
   {
     key: "ip",
@@ -23,9 +23,10 @@ export const HomeTableConfig = [
     key: "other",
     label: "Roles",
     render: (value: any) => {
-      const renderedValue = typeof value === "object" ? value?.roles?.join(", ") : "-";
+      const renderedValue =
+        typeof value === "object" ? value?.roles?.join(", ") : "-";
       return renderedValue;
-    }
+    },
   },
   {
     key: "attached",

pkgs/ui/src/constants/index.ts

@@ -1,15 +1,9 @@
-const BASE_URL = 'http://localhost:2979/api/v1';
+const BASE_URL = "http://localhost:2979/api/v1";
 
 // Home View
-const HOME_VIEW_TABLE = '/get_entities';
+const HOME_VIEW_TABLE = "/get_entities";
-
 
 // Access Point
-const SERVICE_REPOSITORY_URL = '/get_repositories';
+const SERVICE_REPOSITORY_URL = "/get_repositories";
 
-
+export { BASE_URL, HOME_VIEW_TABLE, SERVICE_REPOSITORY_URL };
-export {
-  BASE_URL,
-  HOME_VIEW_TABLE,
-  SERVICE_REPOSITORY_URL,
-}

pkgs/ui/src/utils/helpers.ts

@@ -1,12 +1,12 @@
 export const formatDateTime = (date: string) => {
   const _date = new Date(date);
-  return _date.toLocaleDateString('en-US', {
+  return _date.toLocaleDateString("en-US", {
-    year: 'numeric',
+    year: "numeric",
-    month: 'long',
+    month: "long",
-    day: 'numeric',
+    day: "numeric",
-    hour: '2-digit',
+    hour: "2-digit",
-    minute: '2-digit',
+    minute: "2-digit",
-    second: '2-digit',
+    second: "2-digit",
-    hour12: true
+    hour12: true,
   });
-}
+};