feat(cactus-cmd-gui-app): add common cacti gui app #2265
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. | ||
|
There was a problem hiding this comment. @ervvkb Can this not be used directly from npm via installing it to another project as a dependency? If the only way that this can be used is by copy pasting the source code of the framework then I'd call it an example rather than an actual reusable component of the framework. If it CAN be used out of the box as an npm install into another project then please make sure to document how that can be done exactly as well (maybe you already did and I'm just not seeing it - sorry if this is the case) |
||
|
|
||
| ### 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 | ||
| ``` | ||
|
|
||
|
Comment on lines
+24
to
+29
There was a problem hiding this comment. @ervvkb The build command will only perform the build but won't install the dependencies AFAICT so I'd recommend having the configure script or a The easiest way to double check if your documentation is accurate is by running the steps one by one yourself and then seeing if/where it fails. (boring but often yields great results in terms of figuring out that some commands were missing that newcomers will immediately get stuck on as they are trying to use the code) |
||
| ### 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 | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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": "cactus@lists.hyperledger.org", | ||
| "url": "https://www.hyperledger.org/use/cactus" | ||
| }, | ||
| "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: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": {} | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| module.exports = { | ||
| plugins: { | ||
| autoprefixer: {}, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| .main { | ||
| width: 100%; | ||
| } | ||
| .content { | ||
| margin: 1rem 2rem; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ervvkb Would it be possible to include shell commands here on how to get that done as well? Ideally the steps that can be executed in order and then have the whole thing working.
I see that there is a "Usage" section already but it keeps it vague by saying "use this and that image" and "set this paramtere to the "correct" value" (I'm guessing it's self-evident what is the correct value if you have experience like you do, but to others that may be less helpful to just say "set it to the correct value")
It is also fine if you do it later, but then I'll ask that you create a specific issue in the tracker for it with a title something like
docs(cmd-gui-app): add usage guide to README