feat(cacti-cmd-gui-app): add new feature GUI app to visualize fabric …

…hyperledger and ethereum blocks

right now supporting two
- hyperledger fabric
- ethereum

Signed-off-by: Barnaba Pawelczak <barnaba.pawelczak@fujitsu.com>

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",
@@ -55,7 +58,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 lint clean codegen 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-supply-chain-frontend\" && lerna run build:dev:frontend --scope=\"@hyperledger/cactus-example-carbon-accounting-frontend\"&& lerna run build:dev: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;