feat(cactus-cmd-gui-app): add common cacti gui app

- Add GUI app to visualize ledger data stored in supabase by persistence plugins Closes: hyperledger-cacti#2264 Depends on: hyperledger-cacti#2259 Signed-off-by: Eryk Baranowski <[email protected]>
ervvkb · Jan 13, 2023 · 971d6a6 · 971d6a6
1 parent 25f2f54
commit 971d6a6
Show file tree

Hide file tree

Showing 60 changed files with 2,364 additions and 0 deletions.
diff --git a/packages/cactus-cmd-gui-app/README.md b/packages/cactus-cmd-gui-app/README.md
@@ -0,0 +1,48 @@
+# `@hyperledger/cactus-cmd-gui-app`
+
+This component allows viewing ledger data in Supabase. The data is fed to supabase by persistence plugins for each ledgers.
+
+## Summary
+
+- [Remarks](#remarks)
+- [Getting Started](#getting-started)
+- [Contributing](#contributing)
+- [License](#license)
+- [Acknowledgments](#acknowledgments)
+
+## Remarks
+
+- Plugin requires running Supabase and persistence plugins in order to properly view ledger data.
+- Currently, only 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
+
+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
+```
+
+### 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](../cactus-plugin-persistence-ethereum)
+- Edit [Supabase configuration file](./src/supabase-client.tsx), set correct supabase API URL and service_role key.
+- Execute `yarn run 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 Cactus 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/cactus-cmd-gui-app/index.html b/packages/cactus-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/cactus-cmd-gui-app/package.json b/packages/cactus-cmd-gui-app/package.json
@@ -0,0 +1,76 @@
+{
+  "name": "@hyperledger/cactus-cmd-gui-app",
+  "version": "1.1.3",
+  "description": "Cactus GUI for visualizing ledger data.",
+  "keywords": [
+    "Hyperledger",
+    "Cactus",
+    "Integration",
+    "Blockchain",
+    "Distributed Ledger Technology"
+  ],
+  "homepage": "https://github.com/hyperledger/cactus#readme",
+  "bugs": {
+    "url": "https://github.com/hyperledger/cactus/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hyperledger/cactus.git"
+  },
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Hyperledger Cactus Contributors",
+    "email": "[email protected]",
+    "url": "https://www.hyperledger.org/use/cactus"
+  },
+  "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: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",
+    "typescript": "4.9.4"
+  },
+  "engines": {
+    "npm": ">=6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "watch": {}
+}
diff --git a/packages/cactus-cmd-gui-app/postcss.config.js b/packages/cactus-cmd-gui-app/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};
diff --git a/packages/cactus-cmd-gui-app/src/App.module.css b/packages/cactus-cmd-gui-app/src/App.module.css
@@ -0,0 +1,6 @@
+.main {
+    width: 100%;
+}
+.content {
+    margin: 1rem 2rem;
+}
diff --git a/packages/cactus-cmd-gui-app/src/App.tsx b/packages/cactus-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/cactus-cmd-gui-app/src/assets/favicon.ico b/packages/cactus-cmd-gui-app/src/assets/favicon.ico
diff --git a/packages/cactus-cmd-gui-app/src/components/AccountCard/AccountCard.module.css b/packages/cactus-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/cactus-cmd-gui-app/src/components/AccountCard/AccountCard.tsx b/packages/cactus-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/cactus-cmd-gui-app/src/components/BlockCard/BlockCard.module.css b/packages/cactus-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/cactus-cmd-gui-app/src/components/BlockCard/BlockCard.tsx b/packages/cactus-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}>
+      <span> {props.created_at.toLocaleString()}</span>
+      <span class={styles["block-num"]}>{props.number}</span>
+      <span class={styles["block-hash"]}>
+        <HiSolidHashtag /> {props.hash}
+      </span>
+    </div>
+  );
+};
+
+export default BlockCard;
diff --git a/packages/cactus-cmd-gui-app/src/components/CardWrapper/CardWrapper.module.css b/packages/cactus-cmd-gui-app/src/components/CardWrapper/CardWrapper.module.css
@@ -0,0 +1,56 @@
+.wrapper {
+    background-color: rgb(253, 253, 253);
+    padding: 1rem;
+    border-radius: 10px;
+    border: 1px solid rgb(233, 236, 233);
+    height: fit-content;
+}
+
+.wrapper-cards {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.wrapper-title {
+    display: inline-block;
+    font-weight: 700;
+    margin-left: 1rem;
+    margin-top: .7rem;
+    font-size: 1.2rem;
+    color: rgb(9, 75, 9);
+}
+
+.wrapper-btns {
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 1rem;
+}
+
+.wrapper-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 1rem;
+}
+
+.wrapper-columns {
+    display: flex;
+    justify-content: space-around;
+    background-color: rgb(243, 239, 239);
+    align-items: center;
+    border-radius: 10px;
+    border: 1px solid rgb(233, 236, 233);
+    height: 50px;
+}
+
+.wrapper-columns span {
+    display: flex;
+    width: 150px;
+}
+
+.wrapper-search {
+    display: flex;
+    gap: 5px;
+}