refactor(gui): gui framework change from solid to react

- changed gui framework to react because it is more common and more friendly for newcomers. - routing moved from src/pages/Pages to src/main, beside that only refactoring were made Signed-off-by: Tomasz Awramski <[email protected]>
hyperledger-cacti · Feb 24, 2024 · b0ca663 · b0ca663
1 parent 38e5f6d
commit b0ca663
Show file tree

Hide file tree

Showing 72 changed files with 4,607 additions and 28 deletions.
diff --git a/packages/cacti-ledger-browser-react/README.md b/packages/cacti-ledger-browser-react/README.md
@@ -0,0 +1,61 @@
+# `@hyperledger/cacti-ledger-browser-react`
+
+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-ledger-browser`](#hyperledgercacti-gui-tx-viewer)
+  - [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-ledger-browser-react/index.html b/packages/cacti-ledger-browser-react/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="https://www.hyperledger.org/hubfs/hyperledgerfavicon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Cacti Ledger Browser</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/packages/cacti-ledger-browser-react/package.json b/packages/cacti-ledger-browser-react/package.json
@@ -0,0 +1,84 @@
+{
+  "name": "@hyperledger/cacti-ledger-browser-react",
+  "version": "2.0.0-alpha.2",
+  "description": "Cacti GUI for visualizing ledger data build on react.",
+  "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": "Tomasz Awramski",
+      "email": "[email protected]",
+      "url": "https://www.fujitsu.com/global/"
+    },
+    {
+      "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": {
+    "build": "yarn run build:prod:frontend",
+    "build:dev:frontend": "vite build --mode=development",
+    "build:prod:frontend": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@emotion/react": "11.11.3",
+    "@emotion/styled": "11.11.0",
+    "@mui/icons-material": "5.15.10",
+    "@mui/material": "5.15.10",
+    "@supabase/supabase-js": "1.35.6",
+    "apexcharts": "3.45.2",
+    "localforage": "1.10.0",
+    "match-sorter": "6.3.3",
+    "moment": "2.30.1",
+    "react": "18.2.0",
+    "react-apexcharts": "1.4.1",
+    "react-dom": "18.2.0",
+    "react-router-dom": "6.21.3",
+    "sort-by": "1.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.43",
+    "@types/react-dom": "18.2.17",
+    "@types/sort-by": "1",
+    "@typescript-eslint/eslint-plugin": "6.14.0",
+    "@typescript-eslint/parser": "6.14.0",
+    "@vitejs/plugin-react": "4.2.1",
+    "eslint": "8.55.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.5",
+    "typescript": "5.2.2",
+    "vite": "5.0.8"
+  }
+}
diff --git a/packages/cacti-ledger-browser-react/src/components/AccountCard/AccountCard.module.css b/packages/cacti-ledger-browser-react/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-ledger-browser-react/src/components/AccountCard/AccountCard.tsx b/packages/cacti-ledger-browser-react/src/components/AccountCard/AccountCard.tsx
@@ -0,0 +1,17 @@
+import { useNavigate, useParams } from "react-router-dom";
+import styles from "./AccountCard.module.css";
+
+function AccountCard(props) {
+  const params = useParams();
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate(`/${params.standard}/${props.address}`);
+  };
+  return (
+    <div className={styles["card"]} onClick={handleClick}>
+      <span>{props.address}</span>
+    </div>
+  );
+}
+
+export default AccountCard;
diff --git a/packages/cacti-ledger-browser-react/src/components/BlockCard/BlockCard.module.css b/packages/cacti-ledger-browser-react/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-ledger-browser-react/src/components/BlockCard/BlockCard.tsx b/packages/cacti-ledger-browser-react/src/components/BlockCard/BlockCard.tsx
@@ -0,0 +1,23 @@
+import TagIcon from "@mui/icons-material/Tag";
+
+import styles from "./BlockCard.module.css";
+import { useNavigate } from "react-router-dom";
+
+function BlockCard(props) {
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate(`/blockDetails/${props.number}`);
+  };
+
+  return (
+    <div className={styles["block-card"]} onClick={handleClick}>
+      <p> {props.created_at.toLocaleString()}</p>
+      <p className={styles["block-num"]}>{props.number}</p>
+      <p className={styles["block-hash"]}>
+        <TagIcon /> {props.hash}
+      </p>
+    </div>
+  );
+}
+
+export default BlockCard;
diff --git a/packages/cacti-ledger-browser-react/src/components/CardWrapper/CardWrapper.module.css b/packages/cacti-ledger-browser-react/src/components/CardWrapper/CardWrapper.module.css
@@ -0,0 +1,85 @@
+.wrapper {
+  background-color: rgb(253, 253, 253);
+  padding: 1rem;
+  border-radius: 10px;
+  border: 1px solid rgb(233, 236, 233);
+  height: fit-content;
+}
+
+.wrapper-half-width {
+  width: 50%;
+}
+
+.wrapper-full-width {
+  width: 100%;
+}
+
+.wrapper-cards {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.wrapper-title {
+  margin-top: .5rem;
+  display: flex;
+  gap:5px;
+  align-items: center;
+  font-weight: 700;
+  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;
+}
+
+@media (max-width: 1699px) {
+  .wrapper {
+    width: 100%;
+  }
+
+  .wrapper-header {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .wrapper-cards {
+    flex-direction: column;
+    padding: 1rem 0;
+  }
+
+  .wrapper-title svg {
+    margin-bottom: -3px;
+  }
+}