4248bba928
feat: create right side content of manage validator Create DepositStatusPieChart.tsx Create RightPanel.tsx Create DepositStatus.tsx fix(deposit status): adjust innerRadius Create Header.tsx Create ValidatorInfo.tsx feat(manage validator): refactor feat(manage validator): add validator info components Create DepositStepper.module.css Create DepositStepper.tsx feat(deposit status): use exported component style(validator-info): style validator info Create ValidatorBalance.tsx Create diamond.svg Create suit-guy.png fix:style deposit status feat: add validatorBalance feat: add all components to validator balance Create ValidatorToolsCards.tsx Create ValidatorToolCard.tsx Update ManageValidator.tsx fix(validator tools): fix spacing Create broken-chain.png Create hand-key.png Create pig.png Create ValidatorDataCards.tsx Create ValidatorDataCard.tsx Update ManageValidator.tsx Update ValidatorBalance.tsx Update ValidatorToolsCards.tsx Update constants.ts Create ValidatorDataTabs.tsx Create ValidatorTable.tsx Create ValidatorTableBody.tsx Create ValidatorTableHeader.tsx Create ValidatorTableRow.tsx fix(manage validator): import table into parent Delete validatorManagement.css Create validatorManagement.module.css fix(validator-management): fix classes Delete ManagementTable.css Create ManagementTable.module.css fix: differentiate tables in validator management feat: (manage-validator): organize code Create ValidatorPeersCard.tsx feat: create Peers pie chart Create ValidatorGraffiti.tsx fix(validator graffiti): fix spaces fix(deposit stepper): fix style Create Footer.tsx feat(manage validator): add footer to parent feat(footer): import external icon Create beacon-chain.svg fix(footer): style footer properly Create cross.svg feat:(validator info): add days in validator info component Create eth-logo-blue.png fix(validator balance): use correct sizes feat: add manage validator table data feat(manageValidatorTab): create redux Update store.ts fix(validator row): render rows from constant feat(validator header): render headers from constant fix(validator data tabs): implement logic for tabs format fix: fix build errors
Nimbus GUI
The goal of this project is to develop a management and monitoring GUI for the Nimbus Ethereum client.
Right now, Nimbus is managed as a typical system service. It offers executables that can be launched from the command-line. It produces log output as the primary way to communicate information to the user and it's typically monitored through Prometheus and Grafana. The user can interact with Nimbus through a standardized REST APIs with some Nimbus-specific extensions.
Since the primary purpose of Nimbus is to enable the user to operate Ethereum validators, users typically also consult web-sites such as beaconcha.in, which provide up-to-date information about the network and the obtained rewards of each validator. The beaconcha.in web-site also offers a popular mobile application which can alert the user if their validator(s) are failing to perform their duties (which can happen if the Nimbus service is experiencing any technical issues).
At the moment, all of the above makes Nimbus accessible mostly to users with the sufficient technical skills to setup and integrate multiple software packages, often within a rented server running Linux in a remote data center.
We would like to make Nimbus much more accessible to non-technical users by developing GUI installers and GUI management and monitoring software. We have prepared a rough roadmap for this here:
https://github.com/status-im/nimbus-eth2/issues/3423
Development Plan
The initial version of the management UI will be developed as a web application, communicating with a special service called the Status Node Management Service.
As part of the Logos movement, Nimbus benefits from close ties to Status, a messanger that offers strong integration with Ethereum and also serves as a mobile wallet and a DApp browser. We can provide a simple interface for solo stakers who would be able to execute their validator deposits directly from the Status app in the future. The Nimbus management UI will be then embedded within the app and it will use the same design system as the app.
The Status UI team is currently developing the next iteration of the Status design system that will be used across its mobile and desktop products. To facilitate the future integration, we will use the same system during the development of the Nimbus GUI from the start.
UX Designs (WIP)
Initial designs for the Nimbus management UI are being developed here:
Please note that all of the graphics are currently placeholders as the final artwords are still being prepared. The layout of the screens is likely to resemble the final design, although the content and the available functionality on the web-pages is still under review.
Live Demos
We have a Storybook up at https://nimbus-gui.github.io/nimbus-gui/ which shows
the components of the project. We also have a deployed version of the GUI up at
https://nimbus-gui.vercel.app/ which shows the GUI as it currently looks in the
main branch of the
nimbus-gui/nimbus-gui repository.
Here is a list with the available pages:
- Main page
- Device pairing page
- Validator onboarding page
- Validator management page
- Dashboard page
- Device Health Check page
- Device Sync Status page
- Create Local Node page
- Logs page
How to Contribute
Install all dependencies
Run yarn in the root directory of the project in order to install dependencies.
Run a development server
If you want to run a development server to see what the GUI looks like you can run the following command:
yarn dev
This will start the server on port 5173 and you can open https://localhost:5173 in order to see the page.
For example here are some of the pages you can see:
- Main page - http://localhost:5173/
- Device pairing page - http://localhost:5173/pair-device
- Validator onboarding page - http://localhost:5173/validator-onboarding
- Validator management page - http://localhost:5173/validator-management
- Dashboard page - http://localhost:5173/dashboard
- Device Health Check page - http://localhost:5173/device-health-check
- Device Sync Status page - http://localhost:5173/device-sync-status
- Create Local Node page - http://localhost:5173/create-local-node
- Logs page - http://localhost:5173/logs
Launch Storybook locally
If you want to run the Storybook locally you can simply run yarn storybook in
the root of the project. This is useful if you want to contribute a component
and be sure that it renders as you expect it to, without testing it out on any
given page.