added mermaid diagram

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

@@ -3,18 +3,27 @@
 import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/config/dlg";
 import CustomTable from "@/components/table";
 import SummaryDetails from "@/components/summary_card";
-import useFetch from "@/components/hooks/useFetch";
 import { useEffect } from "react";
+import { useGetAllResolutions } from "@/api/resolution/resolution";
+import { mutate } from "swr";
 
 export default function DLG() {
+
   const {
     data: resolutionData,
-    loading: loadingResolutions,
-    fetch,
-  } = useFetch("/get_resolutions");
+    isLoading: loadingResolutions,
+    swrKey: resolutionsKeyFunc,
+  } = useGetAllResolutions();
 
   const onRefresh = () => {
-    fetch();
+    const resolutionsKey =
+      typeof resolutionsKeyFunc === "function"
+        ? resolutionsKeyFunc()
+        : resolutionsKeyFunc;
+
+    if (resolutionsKey) {
+      mutate(resolutionsKey);
+    }
   };
 
   useEffect(() => {
@@ -41,7 +50,7 @@ export default function DLG() {
         <h4>DID Resolution View</h4>
         <CustomTable
           loading={loadingResolutions}
-          data={resolutionData}
+          data={resolutionData?.data}
           configuration={DLGResolutionTableConfig}
           tkey="resolution_table"
         />

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

@@ -1,13 +1,16 @@
 "use client";
 
 import { useAppState } from "@/components/hooks/useAppContext";
-import { NoDataOverlay } from "@/components/noDataOverlay";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
 import { HomeTableConfig } from "@/config/home";
+import dynamic from "next/dynamic";
 import { useEffect } from "react";
 import { mutate } from "swr";
 
+const NoSSRSequenceDiagram = dynamic(() => import('../../components/sequence_diagram'), { ssr: false })
+
+
 export default function Home() {
   const { data } = useAppState();
 
@@ -51,7 +54,7 @@ export default function Home() {
 
       <div>
         <h4>Sequence Diagram</h4>
-        <NoDataOverlay label="No Activity yet" />
+        <NoSSRSequenceDiagram />
       </div>
     </div>
   );

pkgs/ui/src/app/layout.tsx

@@ -50,6 +50,16 @@ export default function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="Service Aware Networks" />
         <link rel="icon" href="tub-favicon.ico" sizes="any" />
+        <script type="module">
+          import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+        </script>
+        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+        <script
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: `mermaid.initialize({startOnLoad: true});`,
+          }}
+        />
       </head>
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={userPrefersDarkmode ? darkTheme : lightTheme}>
@@ -71,9 +81,8 @@ export default function RootLayout({
                           onClose={() => setShowSidebar(false)}
                         />
                         <div
-                          className={tw`${
-                            !showSidebarDerived && translate
-                          } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
+                          className={tw`${!showSidebarDerived && translate
+                            } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
                         >
                           <div className="grid grid-cols-3">
                             <div className="col-span-1">