Update TX pages for API parity

package.json

@@ -1,6 +1,6 @@
 {
   "name": "firefly-ui",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.4.1",

src/core/components/HashPopover.tsx

@@ -33,12 +33,14 @@ interface Props {
   address: string;
   shortHash?: boolean;
   textColor?: 'primary' | 'secondary';
+  paper?: boolean;
 }
 
 export const HashPopover: React.FC<Props> = ({
   address,
   shortHash,
   textColor = 'primary',
+  paper,
 }) => {
   const classes = useStyles();
   const [open, setOpen] = useState(false);
@@ -49,7 +51,7 @@ export const HashPopover: React.FC<Props> = ({
         label={shortHash ? getShortHash(address) : address}
         sx={{ width: shortHash ? 110 : 200 }}
         className={clsx(
-          classes.chip,
+          paper ? classes.paperChip : classes.chip,
           textColor === 'secondary' && classes.addressSecondaryText
         )}
         onClick={(event) => {
@@ -119,4 +121,11 @@ const useStyles = makeStyles<Theme>((theme) => ({
   addressSecondaryText: {
     color: theme.palette.text.secondary,
   },
+  paperChip: {
+    borderRadius: 2,
+    backgroundColor: theme.palette.background.paper,
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.background.paper,
+    },
+  },
 }));

src/core/components/TransactionStatus.tsx

@@ -0,0 +1,79 @@
+// Copyright © 2021 Kaleido, Inc.
+//
+// SPDX-License-Identifier: Apache-2.0
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Grid, Paper, Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ITransactionStatus } from '../interfaces';
+import dayjs from 'dayjs';
+import { HashPopover } from './HashPopover';
+
+interface Props {
+  status: ITransactionStatus;
+}
+
+export const TransactionStatus: React.FC<Props> = ({ status }) => {
+  const { t } = useTranslation();
+  const classes = useStyles();
+
+  return (
+    <>
+      <Typography fontWeight="bold">{t('details')}</Typography>
+      <Grid container spacing={3} paddingTop={2}>
+        {status.details.map((item) => (
+          <React.Fragment key={item.id}>
+            <Grid item xs={12}>
+              <Paper className={classes.paper}>
+                <Grid container spacing={2}>
+                  <Grid container item justifyContent="space-between">
+                    <Grid item>
+                      <Typography color="white">{item.type}</Typography>
+                    </Grid>
+                    <Grid item>
+                      <Typography color="white">{item.status}</Typography>
+                    </Grid>
+                  </Grid>
+                  <Grid container item justifyContent="space-between">
+                    <Grid item>
+                      {item.id ? (
+                        <HashPopover address={item.id} paper />
+                      ) : undefined}
+                    </Grid>
+                    {item.timestamp && (
+                      <Grid item>
+                        <Typography color="white">
+                          {dayjs(item.timestamp).format('MM/DD/YYYY h:mm A')}
+                        </Typography>
+                      </Grid>
+                    )}
+                  </Grid>
+                </Grid>
+              </Paper>
+            </Grid>
+          </React.Fragment>
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(2),
+  },
+}));

src/core/interfaces.ts

@@ -44,6 +44,14 @@ export enum FFColors {
   Red = '#FF0000',
 }
 
+export enum TransactionType {
+  None = 'none',
+  BatchPin = 'batch_pin',
+  TokenPool = 'token_pool',
+  TokenTransfer = 'token_transfer',
+  ContractInvoke = 'contract_invoke',
+}
+
 export type CreatedFilterOptions = '1hour' | '24hours' | '7days' | '30days';
 
 export type FilterOptions = CreatedFilterOptions;
@@ -150,18 +158,22 @@ export interface INamespace {
 
 export interface ITransaction {
   created: number;
-  hash: string;
   id: string;
-  protocolId?: string;
-  sequence: number;
-  status: TXStatus;
-  info?: IEthTransactionInfo;
-  subject: {
-    signer: string;
-    namespace: string;
+  namespace: string;
+  type: TransactionType;
+}
+
+export interface ITransactionStatus {
+  status: OPStatus;
+  details: {
+    error?: string;
+    id?: string;
+    status: string;
+    subtype?: string;
+    timestamp?: string;
     type: string;
-    reference: string;
-  };
+    info: any;
+  }[];
 }
 
 export interface IEthTransactionInfo {

src/core/translations/en.json

@@ -6,7 +6,7 @@
   "last7Days": "Last 7 Days",
   "last30Days": "Last 30 Days",
   "recentTransactions": "Recent Transactions",
-  "messages":"Messages",
+  "messages": "Messages",
   "namespace": "Namespace",
   "transactions": "Transactions",
   "addFilter": "Add Filter",
@@ -28,5 +28,7 @@
   "caseSensitive": "Case sensitive",
   "rule": "Rule",
   "matches": "Matches",
-  "notMatches": "Does not match"
+  "notMatches": "Does not match",
+  "status": "Status",
+  "details": "Details"
 }

src/modules/data/registration.ts

@@ -29,7 +29,6 @@ import { Data } from './views/Data/Data';
 import { Events } from './views/Events/Events';
 import { MessageDetails } from './views/Messages/MessageDetails';
 import { Messages } from './views/Messages/Messages';
-import { TransactionDetails } from './views/Transactions/TransactionDetails';
 import { Transactions } from './views/Transactions/Transactions';
 import { Types } from './views/Types/Types';
 
@@ -152,11 +151,6 @@ export const DataRoutes: IRoute[] = [
     route: `${DATA_ROUTE_PREFIX}/transactions`,
     component: Transactions,
   },
-  {
-    exact: true,
-    route: `${DATA_ROUTE_PREFIX}/transactions/:id`,
-    component: TransactionDetails,
-  },
   {
     exact: true,
     route: `${DATA_ROUTE_PREFIX}/events`,

src/modules/data/translations/en.json

@@ -10,7 +10,6 @@
   "dataDetails": "Data Details",
   "dataExplorer": "Data Explorer",
   "dataHash": "Data Hash",
-  "dateMined": "Date Mined",
   "dataTypes": "Data Types",
   "details": "Details",
   "emptyPlaceholder": "--",
@@ -19,7 +18,7 @@
   "filter": "Filter",
   "hash": "Hash",
   "id": "ID",
-   "last1Hour": "Last 1 Hour",
+  "last1Hour": "Last 1 Hour",
   "last24Hours": "Last 24 Hours",
   "last30Days": "Last 30 Days",
   "last7Days": "Last 7 Days",
@@ -58,5 +57,6 @@
   "type": "Type",
   "version": "Version",
   "viewTx": "View TX",
-  "yes": "Yes"
-}
+  "yes": "Yes",
+  "created": "Created"
+}

src/modules/data/views/Dashboard.tsx

@@ -42,7 +42,6 @@ import {
   IMetric,
   IPieChartElement,
   MSGStatus,
-  TXStatus,
 } from '../../../core/interfaces';
 import { fetchWithCredentials, getCreatedFilter } from '../../../core/utils';
 import { useDataTranslation } from '../registration';
@@ -66,11 +65,6 @@ const MSG_STATUS_COLORS: { [key in MSGStatus]: string } = {
   staged: FFColors.Yellow,
   rejected: FFColors.Red,
 };
-const TX_STATUS_COLORS: { [key in TXStatus]: string } = {
-  Succeeded: FFColors.Blue,
-  Pending: FFColors.Yellow,
-  Error: FFColors.Red,
-};
 
 export const Dashboard: () => JSX.Element = () => {
   const classes = useStyles();
@@ -83,9 +77,6 @@ export const Dashboard: () => JSX.Element = () => {
   const [latestMsgs, setLatestMsgs] = useState<
     IGenericPagedResponse[] | undefined
   >(undefined);
-  const [latestTx, setLatestTx] = useState<IGenericPagedResponse[] | undefined>(
-    undefined
-  );
   // Metrics
   const [msgMetrics, setMsgMetrics] = useState<IMetric[]>([]);
   const [txMetrics, setTxMetrics] = useState<IMetric[]>([]);
@@ -136,26 +127,6 @@ export const Dashboard: () => JSX.Element = () => {
         setLatestMsgs(msgStatusResponseJsons);
       }
     });
-    // Tx Pie Chart
-    const txStatusObject: { [key: string]: string } = TXStatus;
-    const txEnums = Object.keys(TXStatus).map(
-      (key: string) => txStatusObject[key]
-    );
-    Promise.all(
-      txEnums.map((e) =>
-        fetchWithCredentials(
-          `/api/v1/namespaces/${namespace}/transactions?count${createdFilterObject.filterString}&limit=1&status=${e}`
-        )
-      )
-    ).then(async (txStatusResponses) => {
-      if (txStatusResponses.every((e) => e.ok)) {
-        const txStatusResponseJsons: IGenericPagedResponse[] = [];
-        for (let i = 0; i < txStatusResponses.length; i++) {
-          await txStatusResponseJsons.push(await txStatusResponses[i].json());
-        }
-        setLatestTx(txStatusResponseJsons);
-      }
-    });
   }, [namespace, lastEvent, createdFilter]);
 
   useEffect(() => {
@@ -227,21 +198,6 @@ export const Dashboard: () => JSX.Element = () => {
         latestMsgs && mapPieChartData(latestMsgs, MSG_STATUS_COLORS, MSGStatus),
       title: t('latestMessages'),
     },
-    {
-      chart:
-        latestTx !== undefined ? (
-          <>
-            <PieChart
-              data={mapPieChartData(latestTx, TX_STATUS_COLORS, TXStatus)}
-              dataType={t('transactions')}
-            ></PieChart>
-          </>
-        ) : (
-          <CircularProgress />
-        ),
-      data: latestTx && mapPieChartData(latestTx, TX_STATUS_COLORS, TXStatus),
-      title: t('latestTransactions'),
-    },
   ];
 
   const pieChartPanel = (data: IChartPanel): JSX.Element => (
@@ -367,7 +323,6 @@ export const Dashboard: () => JSX.Element = () => {
                 container
                 item
                 md={12}
-                lg={6}
                 key={idx}
                 className={classes.chartPanel}
               >

src/modules/data/views/Messages/MessageDetails.tsx

@@ -13,12 +13,10 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import LaunchIcon from '@mui/icons-material/Launch';
 import {
   Breadcrumbs,
   CircularProgress,
   Grid,
-  IconButton,
   Link,
   List,
   Modal,
@@ -126,20 +124,7 @@ export const MessageDetails: () => JSX.Element = () => {
     {
       label: t('transactionID'),
       value: batch?.payload.tx.id && (
-        <>
-          <HashPopover address={batch.payload.tx.id}></HashPopover>
-          <IconButton
-            className={classes.button}
-            size="large"
-            onClick={() => {
-              history.push(
-                `/namespace/${selectedNamespace}/data/transactions/${batch.payload.tx.id}`
-              );
-            }}
-          >
-            <LaunchIcon />
-          </IconButton>
-        </>
+        <HashPopover address={batch.payload.tx.id}></HashPopover>
       ),
     },