feat(cacti-cmd-gui-app): add GUI to visualize Fabric, Ethereum blocks

Right now supporting two ledgers
- Hyperledger Fabric
- Ethereum

Updates from Peter to fix the CI checks:
1. The build:dev:backend script was broken, fixed it by removing the
clean, lint, codegen scripts which were removed earlier but this change
was trying to add them back for some reason.
2. Frontend package build (build:dev:frontend) was broken, fixed it by
correcting the polyfills for both the carbon accounting and the supply
chain example packages.
3. The build:dev:frontend script in the package.json in the root was
spawning more processes than it needed to. A single lerna invocation
with the appropriate filters can capture and run the build scripts in
all 3 of the packages. The entire point of lerna is to do this instead of
repeating 3 commands when you want to run 3 scripts in 3 packages so now
the way the npm script is written adheres to this convention.

Co-authored-by: Peter Somogyvari <peter.somogyvari@accenture.com>

Signed-off-by: Barnaba Pawelczak <barnaba.pawelczak@fujitsu.com>
Signed-off-by: Peter Somogyvari <peter.somogyvari@accenture.com>

examples/cactus-example-carbon-accounting-frontend/angular.json

@@ -178,7 +178,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

examples/cactus-example-carbon-accounting-frontend/package.json

@@ -77,9 +77,12 @@
     "@angular/compiler-cli": "15.2.9",
     "@angular/language-service": "15.2.9",
     "@ionic/angular-toolkit": "9.0.0",
+    "browserify-fs": "1.0.0",
     "https-browserify": "1.0.0",
+    "net-browserify": "0.2.4",
     "os-browserify": "0.3.0",
-    "path-browserify": "1.0.1"
+    "path-browserify": "1.0.1",
+    "tls-browserify": "0.2.2"
   },
   "engines": {
     "node": ">=10",

examples/cactus-example-carbon-accounting-frontend/webpack.config.overrides.js

@@ -8,11 +8,14 @@ module.exports = {
     fallback: {
       crypto: require.resolve("crypto-browserify"),
       buffer: require.resolve("buffer/"),
+      fs: require.resolve("browserify-fs"),
       http: require.resolve("stream-http"),
       https: require.resolve("https-browserify"),
+      net: require.resolve("net-browserify"),
       os: require.resolve("os-browserify/browser"),
       path: require.resolve("path-browserify"),
       stream: require.resolve("stream-browserify"),
+      tls: require.resolve("tls-browserify"),
       zlib: require.resolve("browserify-zlib"),
     },
   },

examples/cactus-example-supply-chain-frontend/package.json

@@ -77,7 +77,13 @@
     "@angular/compiler": "15.2.9",
     "@angular/compiler-cli": "15.2.9",
     "@angular/language-service": "15.2.9",
-    "@ionic/angular-toolkit": "9.0.0"
+    "@ionic/angular-toolkit": "9.0.0",
+    "browserify-fs": "1.0.0",
+    "https-browserify": "1.0.0",
+    "net-browserify": "0.2.4",
+    "os-browserify": "0.3.0",
+    "path-browserify": "1.0.1",
+    "tls-browserify": "0.2.2"
   },
   "engines": {
     "node": ">=10",

examples/cactus-example-supply-chain-frontend/webpack.config.overrides.js

@@ -24,11 +24,14 @@ module.exports = {
       constants: require.resolve("constants-browserify"),
       crypto: require.resolve("crypto-browserify"),
       buffer: require.resolve("buffer/"),
+      fs: require.resolve("browserify-fs"),
+      net: require.resolve("net-browserify"),
       http: require.resolve("stream-http"),
       https: require.resolve("https-browserify"),
       os: require.resolve("os-browserify/browser"),
       path: require.resolve("path-browserify"),
       stream: require.resolve("stream-browserify"),
+      tls: require.resolve("tls-browserify"),
       zlib: require.resolve("browserify-zlib"),
     },
   },

lerna.json

@@ -3,6 +3,9 @@
     "packages/cactus-*",
     "examples/cactus-*",
     "extensions/cactus-*",
+    "packages/cacti-*",
+    "examples/cacti-*",
+    "extensions/cacti-*",
     "weaver/common/protos-js",
     "weaver/sdks/fabric/interoperation-node-sdk",
     "weaver/sdks/besu/node",

package.json

@@ -7,6 +7,9 @@
       "packages/cactus-*",
       "examples/cactus-*",
       "extensions/cactus-*",
+      "packages/cacti-*",
+      "examples/cacti-*",
+      "extensions/cacti-*",
       "weaver/common/protos-js",
       "weaver/sdks/fabric/interoperation-node-sdk",
       "weaver/sdks/besu/node",
@@ -57,7 +60,7 @@
     "build:prod:frontend": "lerna run build:prod:frontend",
     "build:dev": "npm-run-all build:dev:backend webpack:dev:web build:dev:frontend",
     "build:dev:backend": "npm-run-all tsc build:dev:backend:postbuild",
-    "build:dev:frontend": "lerna run build:dev:frontend --scope=\"@hyperledger/cactus-example-supply-chain-frontend\" && lerna run build:dev:frontend --scope=\"@hyperledger/cactus-example-carbon-accounting-frontend\"",
+    "build:dev:frontend": "lerna run build:dev:frontend --scope='@hyperledger/cactus-example-*-frontend' --scope='@hyperledger/cacti-cmd-gui-app'",
     "build:dev:common": "lerna exec --stream --scope '*/*common' -- 'del-cli dist/** && tsc --project ./tsconfig.json && webpack --env=dev --target=node --config ../../webpack.config.js'",
     "build:dev:backend:postbuild": "lerna run build:dev:backend:postbuild",
     "test:cmd-api-server": "tap --ts --timeout=600 \"packages/cactus-*cmd-api-server/src/test/typescript/{unit,integration}/\"",

packages/cacti-cmd-gui-app/README.md

@@ -0,0 +1,61 @@
+# `@hyperledger/cacti-cmd-gui-app`
+
+This component allows viewing ledger data in Supabase or other postgreSQL compatible database. The data is fed to supabase by persistence plugins for each ledgers.
+
+## Summary
+
+- [`@hyperledger/cacti-cmd-gui-app`](#hyperledgercacti-cmd-gui-app)
+  - [Summary](#summary)
+  - [Remarks](#remarks)
+  - [Getting Started](#getting-started)
+    - [Prerequisites using yarn](#prerequisites-using-yarn)
+    - [Alternative Prerequisites using npm](#alternative-prerequisites-using-npm)
+    - [Usage](#usage)
+  - [Contributing](#contributing)
+  - [License](#license)
+  - [Acknowledgments](#acknowledgments)
+
+## Remarks
+
+- Plugin requires running Supabase or other database and persistence plugins in order to properly view ledger data.
+- Currently, fabric and  ethereum based ledgers are supported.
+
+## Getting Started
+
+Clone the git repository on your local machine. Follow these instructions that will get you a copy of the project up and running on your local machine for development and testing purposes.
+
+### Prerequisites using yarn
+
+In the root of the project, execute the command to install and build the dependencies. It will also build this GUI front-end component:
+
+```sh
+yarn run build
+```
+### Alternative Prerequisites using npm
+
+In the root of the project, execute the command to install and build the dependencies. It will also build this GUI front-end component:
+
+```sh
+npm install
+```
+
+### Usage
+- Run Supabase instance (see documentation for detailed instructions). For development purposes, you can use our image located in `tools/docker/supabase-all-in-one`.
+- Run one or more persistence plugins:
+    - [Ethereum](../cacti-plugin-persistence-ethereum)
+    - [Fabric] (../cacti-plugin-persistence-fabric)
+- Edit [Supabase configuration file](./src/supabase-client.tsx), set correct supabase API URL and service_role key.
+- Execute `yarn run start` or `npm start` in this package directory.
+- The running application address: http://localhost:3001/ (can be changed in [Vite configuration](./vite.config.ts))
+
+## Contributing
+
+We welcome contributions to Hyperledger Cacti in many forms, and there’s always plenty to do!
+
+Please review [CONTIRBUTING.md](../../CONTRIBUTING.md) to get started.
+
+## License
+
+This distribution is published under the Apache License Version 2.0 found in the [LICENSE](../../LICENSE) file.
+
+## Acknowledgments

packages/cacti-cmd-gui-app/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Cacti GUI</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>

packages/cacti-cmd-gui-app/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@hyperledger/cacti-cmd-gui-app",
+  "version": "2.0.0-alpha.1",
+  "description": "Cacti GUI for visualizing ledger data.",
+  "keywords": [
+    "Hyperledger",
+    "Cacti",
+    "Integration",
+    "Blockchain",
+    "Distributed Ledger Technology"
+  ],
+  "homepage": "https://github.com/hyperledger/cacti#readme",
+  "bugs": {
+    "url": "https://github.com/hyperledger/cacti/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hyperledger/cacti.git"
+  },
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Hyperledger Cacti Contributors",
+    "email": "cacti@lists.hyperledger.org",
+    "url": "https://www.hyperledger.org/use/cacti"
+  },
+  "contributors": [
+    {
+      "name": "Please add yourself to the list of contributors",
+      "email": "your.name@example.com",
+      "url": "https://example.com"
+    },
+    {
+      "name": "Eryk Baranowski",
+      "email": "eryk.baranowski@fujitsu.com",
+      "url": "https://www.fujitsu.com/global/"
+    },
+    {
+      "name": "Barnaba Pawelczak",
+      "email": "barnaba.pawelczak@fujitsu.com",
+      "url": "https://www.fujitsu.com/global/"
+    }
+  ],
+  "scripts": {
+    "start": "vite",
+    "serve": "vite preview",
+    "build": "yarn run build:prod:frontend",
+    "build:dev:frontend": "vite build --mode=development",
+    "build:prod:frontend": "vite build"
+  },
+  "devDependencies": {
+    "autoprefixer": "10.4.8",
+    "postcss": "8.4.16",
+    "supabase": "1.28.4",
+    "typescript-plugin-css-modules": "4.1.1",
+    "vite": "3.0.0",
+    "vite-plugin-solid": "2.3.0"
+  },
+  "dependencies": {
+    "@solidjs/router": "0.4.2",
+    "@supabase/supabase-js": "1.35.6",
+    "apexcharts": "3.36.0",
+    "chart.js": "3.9.1",
+    "moment": "2.29.4",
+    "solid-apexcharts": "0.1.6",
+    "solid-icons": "1.0.4",
+    "solid-js": "1.5.7",
+    "solid-slider": "1.3.9",
+    "solid-toast": "^0.4.0"
+  },
+  "engines": {
+    "npm": ">=6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "watch": {}
+}

packages/cacti-cmd-gui-app/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};

packages/cacti-cmd-gui-app/src/App.module.css

@@ -0,0 +1,12 @@
+.main {
+    width: 100%;
+}
+.content {
+    margin: 1rem 2rem;
+}
+
+@media (max-width: 1699px) {
+    .content {
+        margin: 1rem;
+    }
+}

packages/cacti-cmd-gui-app/src/App.tsx

@@ -0,0 +1,18 @@
+import { Component } from "solid-js";
+import Pages from "./pages/Pages";
+import Menu from "./components/UI/Menu/Menu";
+// @ts-expect-error
+import styles from "./App.module.css";
+
+const App: Component = () => {
+  return (
+    <div class={styles.main}>
+      <Menu />
+      <div class={styles.content}>
+        <Pages />
+      </div>
+    </div>
+  );
+};
+
+export default App;

packages/cacti-cmd-gui-app/src/components/AccountCard/AccountCard.module.css

@@ -0,0 +1,19 @@
+.card {
+    display: flex;
+    justify-content: center;
+    background-color: rgb(252, 249, 249);
+    align-items: center;
+    height: 5rem;
+    padding: 0 2rem;
+    margin-top: 5px;
+    border-radius: 10px;
+    border: .5px solid rgb(224, 228, 224);
+    width: 35rem;
+    font-size: 18px;
+}
+
+.card:hover {
+    cursor: pointer;
+    background-color: #ffffff;
+    border:1px solid rgb(39, 153, 39);
+}

packages/cacti-cmd-gui-app/src/components/AccountCard/AccountCard.tsx

@@ -0,0 +1,19 @@
+import { useParams, useNavigate } from "@solidjs/router";
+import { Component } from "solid-js";
+// @ts-expect-error
+import styles from "./AccountCard.module.css";
+
+const AccountCard: Component<{ address: string }> = (props) => {
+  const params = useParams();
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate(`/${params.standard}/${props.address}`);
+  };
+  return (
+    <div class={styles["card"]} onClick={handleClick}>
+      <span>{props.address}</span>
+    </div>
+  );
+};
+
+export default AccountCard;

packages/cacti-cmd-gui-app/src/components/BlockCard/BlockCard.module.css

@@ -0,0 +1,33 @@
+.block-card {
+    display: flex;
+    gap: 1rem;
+    background-color: rgb(252, 249, 249);
+    height: 5rem;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    padding: 1rem 0rem;
+    margin-top: 5px;
+    border-radius: 10px;
+    border: .5px solid rgb(242, 245, 242);
+    max-height: 100vh;
+    font-size: 14px;
+}
+
+.block-card:hover {
+    cursor: pointer;
+    background-color: #ffffff;
+}
+
+.block-num {
+    color: rgb(12, 105, 12);
+}
+
+.block-hash {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: min-content;
+    max-width: 50%;
+}

packages/cacti-cmd-gui-app/src/components/BlockCard/BlockCard.tsx

@@ -0,0 +1,28 @@
+import { useNavigate } from "@solidjs/router";
+import { HiSolidHashtag } from "solid-icons/hi";
+import { Component } from "solid-js";
+// @ts-expect-error
+import styles from "./BlockCard.module.css";
+
+const BlockCard: Component<{
+  number: string;
+  created_at: Date;
+  hash: string;
+}> = (props) => {
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate(`/blockDetails/${props.number}`);
+  };
+
+  return (
+    <div class={styles["block-card"]} onClick={handleClick}>
+      <p> {props.created_at.toLocaleString()}</p>
+      <p class={styles["block-num"]}>{props.number}</p>
+      <p class={styles["block-hash"]}>
+        <HiSolidHashtag /> {props.hash}
+      </p>
+    </div>
+  );
+};
+
+export default BlockCard;