diff --git a/.gitignore b/.gitignore index d6b39456..efdff52f 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,4 @@ dist-ssr # vercel /.vercel +.vercel diff --git a/README.md b/README.md index 035a71fa..1db71be6 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,34 @@ -# nimbus-gui +# Nimbus GUI -A GUI for managing your [Nimbus](https://nimbus.team/) nodes. +The goal of this project is to develop a management and monitoring GUI for the [Nimbus Ethereum client](https://nimbus.team). -## Deployed pages showing the project +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](https://nimbus.guide/metrics-pretty-pictures.html). The user can interact with Nimbus through a standardized [REST](https://ethereum.github.io/beacon-APIs/) [APIs](https://ethereum.github.io/keymanager-APIs/) with some Nimbus-specific extensions. + +Since the primary purpose of Nimbus is to enable the user to operate [Ethereum validators](https://ethereum.org/en/staking/), users typically also consult web-sites such as [beaconcha.in](https://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 Logos Node Management Service. + +As part of the [Logos](https://logos.co/) movement, Nimbus benefits from close ties to [Status](https://status.im/), a messanger that offers strong integration with Ethereum and also serves as a [mobile wallet](https://status.im/secure-wallet/) and a [DApp browser](https://zerion.io/blog/what-is-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: + +https://www.figma.com/file/kUO8PyQCo89SyvCn3pFmNS/Nodes-Nimbus---New-Design-System?type=design&node-id=3%3A188588&t=npvkylewM1T5GUHG-1 + +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 @@ -10,13 +36,13 @@ https://nimbus-gui.vercel.app/ which shows the GUI as it currently looks in the `main` branch of the [`nimbus-gui/nimbus-gui`](https://github.com/nimbus-gui/nimbus-gui) repository. -## Development and running the project yourself +## How to Contribute -### Dependencies +### Install all dependencies Run `yarn` in the root directory of the project in order to install dependencies. -### Running a development server +### 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: @@ -28,7 +54,7 @@ yarn dev This will start the server on port 5173 and you can open https://localhost:5173 in order to see the page. -### Running storybook locally +### 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 diff --git a/src/App.tsx b/src/App.tsx index 836ea9f6..dba32e52 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,12 +16,12 @@ import PairDevice from './pages/PairDevice/PairDevice' import PinnedNotification from './components/General/PinnedNottification' import CreateLocalNodePage from './pages/CreateLocalNodePage/CreateLocalNodePage' import ValidatorOnboarding from './pages/ValidatorOnboarding/ValidatorOnboarding' -import { ethereumRopsten, wcV2InitOptions, apiKey } from './constants' import Dashboard from './pages/Dashboard/Dashboard' import ConnectExistingInstance from './pages/ConnectExistingInstance/ConnectExistingInstance' -import './App.css' import ValidatorManagement from './pages/ValidatorManagement/ValidatorManagement' import LogsPage from './pages/LogsPage/LogsPage' +import { ethereumRopsten, wcV2InitOptions, apiKey } from './constants' +import './App.css' const injected = injectedModule() const walletConnect = walletConnectModule(wcV2InitOptions) diff --git a/src/components/General/AddCards/AddCardsContainer.stories.ts b/src/components/General/AddCards/AddCardsContainer.stories.ts index 2132cef6..11444395 100644 --- a/src/components/General/AddCards/AddCardsContainer.stories.ts +++ b/src/components/General/AddCards/AddCardsContainer.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react' import AddCardsContainer from './AddCardsContainer' const meta = { - title: 'Dashboard/AddCardsContainer', + title: 'General/AddCardsContainer', component: AddCardsContainer, parameters: { layout: 'centered', @@ -15,5 +15,13 @@ export default meta type Story = StoryObj export const Default: Story = { - args: {}, + args: { + cardsAmount: 2, + }, +} + +export const WithoutCards: Story = { + args: { + cardsAmount: 0, + }, } diff --git a/src/components/General/AddCards/AddCardsContainer.tsx b/src/components/General/AddCards/AddCardsContainer.tsx index 136a2468..736d3c91 100644 --- a/src/components/General/AddCards/AddCardsContainer.tsx +++ b/src/components/General/AddCards/AddCardsContainer.tsx @@ -4,14 +4,19 @@ import AddCard from './AddCard' import DashboardCardWrapper from '../../../pages/Dashboard/DashboardCardWrapper' import { getHeightPercentages } from '../../../utilities' -const AddCardsContainer = () => { - const cards = 2 +type AddCardsContainerProps = { + cardsAmount: number +} +const AddCardsContainer = ({ cardsAmount }: AddCardsContainerProps) => { return ( - {Array.from({ length: cards }).map((_, index) => ( - + {Array.from({ length: cardsAmount }).map((_, index) => ( + ))} diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx index 8db43985..4d32f865 100644 --- a/src/components/General/CreateAvatar/CreateAvatar.tsx +++ b/src/components/General/CreateAvatar/CreateAvatar.tsx @@ -31,13 +31,13 @@ const CreateAvatar = () => { }, [emojiRef]) return ( - - + + - - - + + + Device Avatar @@ -64,8 +64,8 @@ const CreateAvatar = () => { - - + + Highlight Color diff --git a/src/components/General/Header.stories.tsx b/src/components/General/Header.stories.tsx new file mode 100644 index 00000000..ac8196ea --- /dev/null +++ b/src/components/General/Header.stories.tsx @@ -0,0 +1,33 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import Header from './Header' + +const meta = { + title: 'General/Header', + component: Header, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + selectedTag: 'pair', + }, +} + +export const CreateTag: Story = { + args: { + selectedTag: 'create', + }, +} + +export const ConnectTag: Story = { + args: { + selectedTag: 'connect', + }, +} diff --git a/src/components/General/Header.tsx b/src/components/General/Header.tsx index c560db91..1fc0f103 100644 --- a/src/components/General/Header.tsx +++ b/src/components/General/Header.tsx @@ -1,4 +1,3 @@ -import { XStack } from 'tamagui' import NimbusLogo from '../Logos/NimbusLogo' import TagContainer from './TagContainer' @@ -8,10 +7,18 @@ type HeaderProps = { const Header = ({ selectedTag }: HeaderProps) => { return ( - +
- +
) } diff --git a/src/components/General/LabelInputField.tsx b/src/components/General/LabelInputField.tsx index 5761ce7b..f0c4619e 100644 --- a/src/components/General/LabelInputField.tsx +++ b/src/components/General/LabelInputField.tsx @@ -10,7 +10,7 @@ type LabelInputProps = { const LabelInputField = ({ labelText, placeholderText }: LabelInputProps) => { return (