feat(ledger-browser): refactor eth dashboard page

- Refactor ETH app dashboard using MUI components.
- Fix ERC20 details page rendering.
- Add block and transaction list components that use common `UITableListing`.
- Add global notifications that will be displayed in a snackbar.

Depends on #3207

Signed-off-by: Michal Bajer <[email protected]>

packages/cacti-ledger-browser/src/main/typescript/CactiLedgerBrowserApp.tsx

@@ -2,13 +2,15 @@ import { useRoutes, BrowserRouter, RouteObject } from "react-router-dom";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+// import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { themeOptions } from "./theme";
 import ContentLayout from "./components/Layout/ContentLayout";
 import HeaderBar from "./components/Layout/HeaderBar";
 import WelcomePage from "./components/WelcomePage";
 import { AppConfig, AppListEntry } from "./common/types/app";
 import { patchAppRoutePath } from "./common/utils";
+import { NotificationProvider } from "./common/context/NotificationContext";
 
 type AppConfigProps = {
   appConfig: AppConfig[];
@@ -117,9 +119,11 @@ const CactiLedgerBrowserApp: React.FC<AppConfigProps> = ({ appConfig }) => {
     <BrowserRouter>
       <ThemeProvider theme={theme}>
         <QueryClientProvider client={queryClient}>
-          <CssBaseline />
-          <App appConfig={appConfig} />
-          {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+          <NotificationProvider>
+            <CssBaseline />
+            <App appConfig={appConfig} />
+            {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+          </NotificationProvider>
         </QueryClientProvider>
       </ThemeProvider>
     </BrowserRouter>

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/BlockList/BlockList.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { ethereumAllBlocksQuery } from "../../queries";
+import { blockColumnsConfig } from "./blockColumnsConfig";
+import type { UITableListingPaginationActionProps } from "../../../../components/ui/UITableListing/UITableListingPaginationAction";
+import UITableListing from "../../../../components/ui/UITableListing/UITableListing";
+
+/**
+ * List of columns that can be rendered in a block list table
+ */
+export type BlockListColumn = keyof typeof blockColumnsConfig;
+
+/**
+ * BlockList properties.
+ */
+export interface BlockListProps {
+  footerComponent: React.ComponentType<UITableListingPaginationActionProps>;
+  columns: BlockListColumn[];
+  rowsPerPage: number;
+  tableSize?: "small" | "medium";
+}
+
+/**
+ * BlockList - Show table with ethereum blocks.
+ *
+ * @param footerComponent component will be rendered in a footer of a transaction list table.
+ * @param columns list of columns to be rendered.
+ * @param rowsPerPage how many rows to show per page.
+ */
+const BlockList: React.FC<BlockListProps> = ({
+  footerComponent,
+  columns,
+  rowsPerPage,
+  tableSize,
+}) => {
+  return (
+    <UITableListing
+      queryFunction={ethereumAllBlocksQuery}
+      label="block"
+      columnConfig={blockColumnsConfig}
+      footerComponent={footerComponent}
+      columns={columns}
+      rowsPerPage={rowsPerPage}
+      tableSize={tableSize}
+    />
+  );
+};
+
+export default BlockList;

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/BlockList/blockColumnsConfig.ts

@@ -0,0 +1,25 @@
+/**
+ * Component user can select columns to be rendered in a table list.
+ * Possible fields and their configurations are defined in here.
+ */
+export const blockColumnsConfig = {
+  hash: {
+    name: "Hash",
+    field: "hash",
+    isLongString: true,
+    isUnique: true,
+  },
+  number: {
+    name: "Number",
+    field: "number",
+  },
+  createdAt: {
+    name: "Created At",
+    field: "created_at",
+    isDate: true,
+  },
+  txCount: {
+    name: "Transaction Count",
+    field: "number_of_tx",
+  },
+};

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/TokenHeader/TokenHeader.tsx

@@ -27,7 +27,7 @@ function TokenHeader(props: { accountNum: string; tokenAddress: string }) {
         </p>
         <p>
           <b>Total supply: </b>
-          {(data as TokenMetadata20).total_supply}
+          {(data as TokenMetadata20)?.total_supply}
         </p>
       </div>
     </div>

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/TransactionList/TransactionList.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { ethereumAllTransactionsQuery } from "../../queries";
+import { transactionColumnsConfig } from "./transactionColumnsConfig";
+import type { UITableListingPaginationActionProps } from "../../../../components/ui/UITableListing/UITableListingPaginationAction";
+import UITableListing from "../../../../components/ui/UITableListing/UITableListing";
+
+/**
+ * List of columns that can be rendered in a transaction list table
+ */
+export type TransactionListColumn = keyof typeof transactionColumnsConfig;
+
+/**
+ * TransactionList properties.
+ */
+export interface TransactionListProps {
+  footerComponent: React.ComponentType<UITableListingPaginationActionProps>;
+  columns: TransactionListColumn[];
+  rowsPerPage: number;
+  tableSize?: "small" | "medium";
+}
+
+/**
+ * TransactionList - Show table with ethereum transactions.
+ *
+ * @param footerComponent component will be rendered in a footer of a transaction list table.
+ * @param columns list of columns to be rendered.
+ * @param rowsPerPage how many rows to show per page.
+ */
+const TransactionList: React.FC<TransactionListProps> = ({
+  footerComponent,
+  columns,
+  rowsPerPage,
+  tableSize,
+}) => {
+  return (
+    <UITableListing
+      queryFunction={ethereumAllTransactionsQuery}
+      label="transaction"
+      columnConfig={transactionColumnsConfig}
+      footerComponent={footerComponent}
+      columns={columns}
+      rowsPerPage={rowsPerPage}
+      tableSize={tableSize}
+    />
+  );
+};
+
+export default TransactionList;

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/TransactionList/transactionColumnsConfig.ts

@@ -0,0 +1,34 @@
+/**
+ * Component user can select columns to be rendered in transaction list.
+ * Possible fields and their configurations are defined in transactionColumnsConfig.
+ */
+export const transactionColumnsConfig = {
+  hash: {
+    name: "Hash",
+    field: "hash",
+    isLongString: true,
+    isUnique: true,
+  },
+  block: {
+    name: "Block",
+    field: "block_number",
+  },
+  from: {
+    name: "From",
+    field: "from",
+    isLongString: true,
+  },
+  to: {
+    name: "To",
+    field: "to",
+    isLongString: true,
+  },
+  value: {
+    name: "Value",
+    field: "eth_value",
+  },
+  method: {
+    name: "Method",
+    field: "method_name",
+  },
+};

packages/cacti-ledger-browser/src/main/typescript/apps/eth/index.tsx

@@ -50,16 +50,6 @@ const ethConfig: AppConfig = {
         },
       ],
     },
-    {
-      path: "block-details",
-      element: <Outlet />,
-      children: [
-        {
-          path: ":number",
-          element: <BlockDetails />,
-        },
-      ],
-    },
     {
       path: "token-details",
       element: <Outlet />,
@@ -74,16 +64,6 @@ const ethConfig: AppConfig = {
         },
       ],
     },
-    {
-      path: "txn-details",
-      element: <Outlet />,
-      children: [
-        {
-          path: ":id",
-          element: <TransactionDetails />,
-        },
-      ],
-    },
     {
       path: "erc20",
       element: <Outlet />,

packages/cacti-ledger-browser/src/main/typescript/apps/eth/pages/Blocks/Blocks.tsx

@@ -1,44 +1,18 @@
-import { useNavigate } from "react-router-dom";
-import CardWrapper from "../../../../components/ui/CardWrapper";
-
-import styles from "./Blocks.module.css";
-import { useQuery } from "@tanstack/react-query";
-import { ethereumAllBlocksQuery } from "../../queries";
-
-type ObjectKey = keyof typeof styles;
-
-function Blocks() {
-  const navigate = useNavigate();
-  const { isError, data, error } = useQuery(ethereumAllBlocksQuery());
-
-  if (isError) {
-    console.error("Transactions fetch error:", error);
-  }
-
-  const blocksTableProps = {
-    onClick: {
-      action: (param: string) => navigate(`/eth/block-details/${param}`),
-      prop: "number",
-    },
-    schema: [
-      { display: "created at", objProp: ["created_at"] },
-      { display: "block number", objProp: ["number"] },
-      { display: "hash", objProp: ["hash"] },
-    ],
-  };
+import Box from "@mui/material/Box";
+import PageTitleWithGoBack from "../../../../components/ui/PageTitleWithGoBack";
+import BlockList from "../../components/BlockList/BlockList";
+import TablePaginationAction from "../../../../components/ui/UITableListing/UITableListingPaginationAction";
 
+export default function Blocks() {
   return (
-    <div className={styles["blocks" as ObjectKey]}>
-      <CardWrapper
-        columns={blocksTableProps}
-        data={data ?? []}
-        title={"Blocks"}
-        display={"All"}
-        filters={["number", "hash"]}
-        trimmed={false}
-      ></CardWrapper>
-    </div>
+    <Box>
+      <PageTitleWithGoBack>Blocks</PageTitleWithGoBack>
+      <BlockList
+        footerComponent={TablePaginationAction}
+        columns={["number", "hash", "txCount", "createdAt"]}
+        rowsPerPage={40}
+        tableSize="small"
+      />
+    </Box>
   );
 }
-
-export default Blocks;

packages/cacti-ledger-browser/src/main/typescript/apps/eth/pages/Dashboard/BlockSummary.tsx

@@ -0,0 +1,31 @@
+import { Link as RouterLink } from "react-router-dom";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import BlockList from "../../components/BlockList/BlockList";
+
+function BlockListViewAllAction() {
+  return (
+    <Box display={"flex"}>
+      <Box flexGrow={1}></Box>
+      <Button
+        component={RouterLink}
+        to={"blocks"}
+        sx={{ margin: 1 }}
+        color="secondary"
+      >
+        View all
+      </Button>
+    </Box>
+  );
+}
+
+export default function BlockSummary() {
+  return (
+    <BlockList
+      footerComponent={BlockListViewAllAction}
+      columns={["number", "hash", "createdAt"]}
+      rowsPerPage={15}
+      tableSize="medium"
+    />
+  );
+}