Adding Batches, Groups, Approvals, Namespaces pages and other tweaks

src/components/Accordions/ApiAccordion.tsx

@@ -62,6 +62,7 @@ export const ApiAccordion: React.FC<Props> = ({ api, isOpen = false }) => {
                 selectedNamespace,
                 api.name
               )}
+              noColor
             />
           }
         />

src/components/Accordions/BlockchainEventAccordion.tsx

@@ -15,6 +15,7 @@ import {
 } from '../../interfaces';
 import { DEFAULT_PADDING } from '../../theme';
 import { getFFTime } from '../../utils';
+import { DownloadJsonButton } from '../Buttons/DownloadJsonButton';
 import { LaunchButton } from '../Buttons/LaunchButton';
 import { HashPopover } from '../Popovers/HashPopover';
 import { FFJsonViewer } from '../Viewers/FFJsonViewer';
@@ -67,37 +68,34 @@ export const BlockchainEventAccordion: React.FC<Props> = ({
             />
           }
           rightContent={
-            <LaunchButton
-              link={FF_NAV_PATHS.blockchainEventsPath(selectedNamespace, be.id)}
-            />
+            <>
+              <DownloadJsonButton
+                jsonString={JSON.stringify({
+                  info: be.info,
+                  output: be.output,
+                })}
+                filename={`${be.id}.json`}
+              />
+              <LaunchButton
+                link={FF_NAV_PATHS.blockchainEventsPath(
+                  selectedNamespace,
+                  be.id
+                )}
+                noColor
+              />
+            </>
           }
         />
       </AccordionSummary>
       <AccordionDetails>
-        {be.info && (
-          <Grid container item direction="column" pb={2}>
-            <FFAccordionText
-              color="primary"
-              text={t('info')}
-              padding
-              isHeader
-            />
-            <FFJsonViewer json={be.info} />
-          </Grid>
-        )}
-        {be.output && (
-          <Grid container item direction="column">
-            <FFAccordionText
-              color="primary"
-              text={t('output')}
-              padding
-              isHeader
-            />
-            <Grid item>
-              <FFJsonViewer json={be.output} />
-            </Grid>
-          </Grid>
-        )}
+        <Grid container item direction="column" pb={2}>
+          <FFJsonViewer
+            json={{
+              info: be.info,
+              output: be.output,
+            }}
+          />
+        </Grid>
         <Grid container item direction="row" pt={DEFAULT_PADDING}>
           {accInfo.map((info, idx) => (
             <Grid key={idx} item xs={4} pb={1} justifyContent="flex-start">

src/components/Accordions/JsonViewerAccordion.tsx

@@ -6,6 +6,7 @@ import {
   Grid,
 } from '@mui/material';
 import { useState } from 'react';
+import { DownloadJsonButton } from '../Buttons/DownloadJsonButton';
 import { FFJsonViewer } from '../Viewers/FFJsonViewer';
 import { FFAccordionHeader } from './FFAccordionHeader';
 import { FFAccordionText } from './FFAccordionText';
@@ -14,12 +15,14 @@ interface Props {
   header: string;
   json: object;
   isOpen?: boolean;
+  filename?: string;
 }
 
 export const JsonViewAccordion: React.FC<Props> = ({
   header,
   json,
   isOpen = false,
+  filename,
 }) => {
   const [expanded, setExpanded] = useState<boolean>(isOpen);
 
@@ -34,6 +37,16 @@ export const JsonViewAccordion: React.FC<Props> = ({
           leftContent={
             <FFAccordionText color="primary" text={header} isHeader />
           }
+          rightContent={
+            filename ? (
+              <DownloadJsonButton
+                filename={filename}
+                jsonString={JSON.stringify(json)}
+              />
+            ) : (
+              <></>
+            )
+          }
         />
       </AccordionSummary>
       <AccordionDetails>

src/components/Accordions/ListenerAccordion.tsx

@@ -77,6 +77,7 @@ export const ListenerAccordion: React.FC<Props> = ({
                 selectedNamespace,
                 listener.id
               )}
+              noColor
             />
           }
         />

src/components/Accordions/MessageAccordion.tsx

@@ -14,7 +14,6 @@ import {
   IDataWithHeader,
   IMessage,
 } from '../../interfaces';
-import { DEFAULT_PADDING } from '../../theme';
 import { getFFTime } from '../../utils';
 import { LaunchButton } from '../Buttons/LaunchButton';
 import { MsgStatusChip } from '../Chips/MsgStatusChip';
@@ -81,13 +80,14 @@ export const MessageAccordion: React.FC<Props> = ({
                     selectedNamespace,
                     message.header.id
                   )}
-                ></LaunchButton>
+                  noColor
+                />
               </>
             }
           />
         </AccordionSummary>
         <AccordionDetails>
-          <Grid container item direction="row" pt={DEFAULT_PADDING}>
+          <Grid container item direction="row">
             {accInfo.map((info, idx) => (
               <Grid key={idx} item xs={4} pb={1} justifyContent="flex-start">
                 <FFAccordionText

src/components/Accordions/MessageDataAccordion.tsx

@@ -6,8 +6,6 @@ import {
   AccordionSummary,
   Grid,
   IconButton,
-  Modal,
-  Paper,
 } from '@mui/material';
 import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -17,6 +15,7 @@ import { FF_NAV_PATHS, IData, IDataWithHeader } from '../../interfaces';
 import { DEFAULT_PADDING } from '../../theme';
 import { getFFTime } from '../../utils';
 import { DownloadButton } from '../Buttons/DownloadButton';
+import { DownloadJsonButton } from '../Buttons/DownloadJsonButton';
 import { HashPopover } from '../Popovers/HashPopover';
 import { FFJsonViewer } from '../Viewers/FFJsonViewer';
 import { FFAccordionHeader } from './FFAccordionHeader';
@@ -37,7 +36,6 @@ export const MessageDataAccordion: React.FC<Props> = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
   const [expanded, setExpanded] = useState<boolean>(isOpen);
-  const [openDataModal, setOpenDataModal] = useState(false);
 
   const accInfo: IDataWithHeader[] = [
     {
@@ -68,12 +66,17 @@ export const MessageDataAccordion: React.FC<Props> = ({
             leftContent={<HashPopover address={data.id} />}
             rightContent={
               <>
-                {data.blob && (
+                {data.blob ? (
                   <DownloadButton
                     isBlob
                     url={data.id}
                     filename={data.blob.name}
                   />
+                ) : (
+                  <DownloadJsonButton
+                    jsonString={JSON.stringify(data.value)}
+                    filename={`${data.id}.json`}
+                  />
                 )}
                 {showLink && (
                   <IconButton
@@ -122,30 +125,6 @@ export const MessageDataAccordion: React.FC<Props> = ({
           </Grid>
         </AccordionDetails>
       </Accordion>
-      <Modal
-        open={openDataModal}
-        onClose={() => setOpenDataModal(false)}
-        sx={{ wordWrap: 'break-word' }}
-      >
-        <Paper sx={modalStyle} elevation={0}>
-          <FFJsonViewer json={data.value} />
-        </Paper>
-      </Modal>
     </>
   );
 };
-
-const modalStyle = {
-  position: 'absolute' as const,
-  overflow: 'auto',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '40%',
-  height: '50%',
-  backgroundColor: 'background.paper',
-  border: '2px solid #000',
-  boxShadow: 24,
-  p: 4,
-  wordWrap: 'break-word',
-};

src/components/Accordions/TransactionAccordion.tsx

@@ -76,6 +76,7 @@ export const TransactionAccordion: React.FC<Props> = ({
                     selectedNamespace,
                     tx.id
                   )}
+                  noColor
                 />
               </>
             }

src/components/Buttons/DownloadJsonButton.tsx

@@ -0,0 +1,24 @@
+import { Download } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { downloadJsonString } from '../../utils';
+
+interface Props {
+  filename: string;
+  jsonString: string;
+}
+
+export const DownloadJsonButton: React.FC<Props> = ({
+  filename,
+  jsonString,
+}) => {
+  return (
+    <IconButton
+      onClick={(e) => {
+        e.stopPropagation();
+        downloadJsonString(jsonString, filename);
+      }}
+    >
+      <Download />
+    </IconButton>
+  );
+};

src/components/Buttons/FFArrowButton.tsx

@@ -0,0 +1,17 @@
+import { ArrowForward } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+interface Props {
+  link: string;
+}
+
+export const FFArrowButton: React.FC<Props> = ({ link }) => {
+  const navigate = useNavigate();
+
+  return (
+    <IconButton onClick={() => navigate(link)}>
+      <ArrowForward />
+    </IconButton>
+  );
+};

src/components/Buttons/IdentityButton.tsx

@@ -0,0 +1,41 @@
+import { Launch } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ApplicationContext } from '../../contexts/ApplicationContext';
+import { FF_NAV_PATHS } from '../../interfaces';
+import { FFColors } from '../../theme';
+
+type Props = {
+  did?: string;
+  nodeID?: string;
+};
+
+const getDIDNavURL = (did: string, ns: string) => {
+  if (did.startsWith('did:firefly:org')) {
+    return FF_NAV_PATHS.networkOrgsPath(ns, did);
+  } else if (did.startsWith('did:firefly:node')) {
+    return FF_NAV_PATHS.networkNodesPath(ns, did);
+  }
+
+  return FF_NAV_PATHS.networkIdentitiesPath(ns, did);
+};
+
+export const IdentityButton: React.FC<Props> = ({ did, nodeID }) => {
+  const { selectedNamespace } = useContext(ApplicationContext);
+  const navigate = useNavigate();
+
+  return (
+    <IconButton
+      sx={{ backgroundColor: FFColors.Purple }}
+      onClick={(e) => {
+        e.stopPropagation();
+        did
+          ? navigate(getDIDNavURL(did, selectedNamespace))
+          : navigate(FF_NAV_PATHS.networkNodesPath(selectedNamespace, nodeID));
+      }}
+    >
+      <Launch />
+    </IconButton>
+  );
+};

src/components/Buttons/LaunchButton.tsx

@@ -1,16 +1,22 @@
 import { Launch } from '@mui/icons-material';
-import { IconButton, Link } from '@mui/material';
+import { IconButton } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { FFColors } from '../../theme';
 
 interface Props {
   link: string;
+  noColor?: boolean;
 }
 
-export const LaunchButton: React.FC<Props> = ({ link }) => {
+export const LaunchButton: React.FC<Props> = ({ link, noColor = false }) => {
+  const navigate = useNavigate();
+
   return (
-    <Link href={`/ui${link}`} underline="always">
-      <IconButton>
-        <Launch />
-      </IconButton>
-    </Link>
+    <IconButton
+      sx={{ backgroundColor: noColor ? undefined : FFColors.Purple }}
+      onClick={() => navigate(link)}
+    >
+      <Launch />
+    </IconButton>
   );
 };

src/components/Cards/EventCards/EventCardWrapper.tsx

@@ -14,7 +14,7 @@ interface Props {
   event: IEvent;
   link?: string;
   linkState?: any;
-  onHandleViewEvent: any;
+  onHandleViewEvent?: any;
   onHandleViewTx?: any;
 }
 
@@ -30,7 +30,7 @@ export const EventCardWrapper = ({
     <>
       <BaseCard
         onClick={
-          event.transaction
+          onHandleViewTx
             ? () => onHandleViewTx(event.transaction)
             : () => onHandleViewEvent(event)
         }