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 <[email protected]> Signed-off-by: Barnaba Pawelczak <[email protected]> Signed-off-by: Peter Somogyvari <[email protected]>
hyperledger-cacti · Jul 20, 2023 · 15d9e9d · 15d9e9d
1 parent 61ea36f
commit 15d9e9d
Show file tree

Hide file tree

Showing 85 changed files with 4,648 additions and 131 deletions.
diff --git a/examples/cactus-example-carbon-accounting-frontend/angular.json b/examples/cactus-example-carbon-accounting-frontend/angular.json
@@ -178,7 +178,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

diff --git a/examples/cactus-example-carbon-accounting-frontend/package.json b/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",

diff --git a/examples/cactus-example-carbon-accounting-frontend/webpack.config.overrides.js b/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"),
     },
   },

diff --git a/examples/cactus-example-supply-chain-frontend/package.json b/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",

diff --git a/examples/cactus-example-supply-chain-frontend/webpack.config.overrides.js b/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"),
     },
   },

diff --git a/lerna.json b/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",

diff --git a/package.json b/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}/\"",

diff --git a/packages/cacti-cmd-gui-app/README.md b/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
diff --git a/packages/cacti-cmd-gui-app/index.html b/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>
diff --git a/packages/cacti-cmd-gui-app/package.json b/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": "[email protected]",
+    "url": "https://www.hyperledger.org/use/cacti"
+  },
+  "contributors": [
+    {
+      "name": "Please add yourself to the list of contributors",
+      "email": "[email protected]",
+      "url": "https://example.com"
+    },
+    {
+      "name": "Eryk Baranowski",
+      "email": "[email protected]",
+      "url": "https://www.fujitsu.com/global/"
+    },
+    {
+      "name": "Barnaba Pawelczak",
+      "email": "[email protected]",
+      "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": {}
+}
diff --git a/packages/cacti-cmd-gui-app/postcss.config.js b/packages/cacti-cmd-gui-app/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};
diff --git a/packages/cacti-cmd-gui-app/src/App.module.css b/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;
+    }
+}
diff --git a/packages/cacti-cmd-gui-app/src/App.tsx b/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;
diff --git a/packages/cacti-cmd-gui-app/src/assets/favicon.ico b/packages/cacti-cmd-gui-app/src/assets/favicon.ico
diff --git a/packages/cacti-cmd-gui-app/src/components/AccountCard/AccountCard.module.css b/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);
+}
diff --git a/packages/cacti-cmd-gui-app/src/components/AccountCard/AccountCard.tsx b/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;
diff --git a/packages/cacti-cmd-gui-app/src/components/BlockCard/BlockCard.module.css b/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%;
+}
diff --git a/packages/cacti-cmd-gui-app/src/components/BlockCard/BlockCard.tsx b/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;