Merge branch 'main' of github.com:nimbus-gui/nimbus-gui into Update-Device-Connect

.github/workflows/ui-tests.yaml

@@ -55,6 +55,8 @@ jobs:
             ${{ runner.os }}-yarn-v3
       - name: Build
         run: yarn build
+      - name: Check formatting
+        run: yarn format:check
       - name: Pull Vercel configuration
         run: yarn vercel pull --yes --token ${{ secrets.vercel_token }}
       - name: Build Vercel bundle

README.md

@@ -1,27 +1,36 @@
 # nimbus-gui
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A GUI for managing your [Nimbus](https://nimbus.team/) nodes.
 
-Currently, two official plugins are available:
+## Deployed pages showing the project
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+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`](https://github.com/nimbus-gui/nimbus-gui) repository.
 
-## Expanding the ESLint configuration
+## Development and running the project yourself
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+### Dependencies
 
-- Configure the top-level `parserOptions` property like this:
+Run `yarn` in the root directory of the project in order to install dependencies.
 
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
+### Running a development server
+
+If you want to run a development server to see what the GUI looks like you can
+run the following command:
+
+```bash
+yarn dev
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+This will start the server on port 5173 and you can open https://localhost:5173
+in order to see the page.
+
+### Running 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.

package.json

@@ -10,7 +10,9 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook"
+    "test-storybook": "test-storybook",
+    "format:check": "yarn prettier --check src",
+    "format": "yarn prettier --write src"
   },
   "resolutions": {
     "@tamagui/web": "1.36.4",

src/components/General/BreadcrumbBar/BreadcrumbBar.css

@@ -13,12 +13,12 @@
   position: relative;
 }
 .breadcrumb-bar-li:last-child {
-    color: #09101C;
+  color: #09101c;
 }
 .breadcrumb-bar-li::after {
   display: inline-block;
-    content: url("./icons/chevron.svg");
-    color: #09101C;
+  content: url('./icons/chevron.svg');
+  color: #09101c;
   position: absolute;
   top: 2px;
   left: 100%;

src/components/General/ColorPicker/ColorPicker.css

@@ -12,7 +12,7 @@
 .color-picker-button::before,
 .color-picker-button::after {
   display: block;
-    content: "";
+  content: '';
   position: absolute;
   top: 50%;
   left: 50%;
@@ -22,7 +22,7 @@
   transition: 120ms opacity ease-in-out;
 }
 .color-picker-button::before {
-    content: "\2713";
+  content: '\2713';
   font-size: 25px;
   color: white;
 }

src/components/General/EmojiPickerDialog.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import EmojiPickerDialog from './EmojiPickerDialog'
 
-
 const meta = {
   title: 'General/EmojiPickerDialog',
   component: EmojiPickerDialog,

src/components/General/QuickStartBar/QuickStartBar.css

@@ -1,8 +1,8 @@
 .quick-start-bar {
   border-radius: 18px;
-    border: 1px solid rgba(0, 0, 0, 0.10);
+  border: 1px solid rgba(0, 0, 0, 0.1);
   opacity: 0.949999988079071;
-    background: rgba(255, 255, 255, 0.70);
+  background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(15px);
   display: flex;
   align-items: center;
@@ -23,6 +23,6 @@
   display: flex;
 }
 .quick-start-bar ul li {
-    color: #0D1625;
+  color: #0d1625;
   font-size: 13px;
 }

src/components/Logos/NimbusLogo.css

@@ -1,4 +1,3 @@
-
 .nimbus-logomark {
   display: flex;
   justify-content: center;

src/components/PageWrappers/layout.css

@@ -1,5 +1,5 @@
 .layout {
-    background-color: #FFF;
+  background-color: #fff;
   height: 100%;
   position: relative;
   display: flex;
@@ -8,7 +8,7 @@
 }
 .layout::after {
   display: block;
-    content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: 0;
@@ -49,22 +49,22 @@
   height: 100%;
   position: relative;
   overflow: hidden;
-    color: #FFF;
+  color: #fff;
 }
 .image-container::before {
   display: block;
-    content: "";
+  content: '';
   padding-bottom: 100%;
 }
 .image-container::after {
   display: block;
-    content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: -1%;
   width: 50%;
   height: 100%;
-    background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0));
+  background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0));
 }
 .image-container .background-img {
   position: absolute;

src/index.css

@@ -1,41 +1,41 @@
 @font-face {
-  font-family: "Inter";
-  src: url("./Inter-font/Inter-Light.ttf") format("truetype");
+  font-family: 'Inter';
+  src: url('./Inter-font/Inter-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: "Inter";
-  src: url("./Inter-font/Inter-Regular.ttf") format("truetype");
+  font-family: 'Inter';
+  src: url('./Inter-font/Inter-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: "Inter";
-  src: url("./Inter-font/Inter-Medium.ttf") format("truetype");
+  font-family: 'Inter';
+  src: url('./Inter-font/Inter-Medium.ttf') format('truetype');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: "Inter";
-  src: url("./Inter-font/Inter-SemiBold.ttf") format("truetype");
+  font-family: 'Inter';
+  src: url('./Inter-font/Inter-SemiBold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: "Inter";
-  src: url("./Inter-font/Inter-Bold.ttf") format("truetype");
+  font-family: 'Inter';
+  src: url('./Inter-font/Inter-Bold.ttf') format('truetype');
   font-weight: 800;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: "Inter";
-  src: url("./Inter-font/Inter-Black.ttf") format("truetype");
+  font-family: 'Inter';
+  src: url('./Inter-font/Inter-Black.ttf') format('truetype');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
@@ -65,7 +65,12 @@ body {
   min-width: 320px;
   min-height: 100vh;
 }
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   line-height: 1.2;
   font-weight: 700;
 }
@@ -98,7 +103,7 @@ ul li {
 }
 @media (prefers-color-scheme: light) {
   :root {
-    color: #09101C;
+    color: #09101c;
     background-color: #ffffff;
   }
   a:hover {

src/pages/LandingPage/LandingPage.css

@@ -1,4 +1,3 @@
-
 .landing-page {
   height: 100%;
 }

src/pages/PairDevice/SyncStatus.tsx

@@ -48,8 +48,8 @@ const SyncStatus = ({
   const timer = convertSecondsToTimerFormat(elapsedTime)
 
   const connectViaIpHandler = () => {
-    navigate('/connect-device');
-  };
+    navigate('/connect-device')
+  }
 
   return (
     <YStack space={'$2'}>

src/pages/ValidatorOnboarding/Activation/Activation.stories.ts

@@ -20,22 +20,21 @@ export const Default: Story = {
   args: {
     validatorsValue: '4',
     executionSyncStatus1: {
-      text: "Execution Sync Status",
+      text: 'Execution Sync Status',
       isGaugeIncluded: true,
-      gaugeColor: "$blue",
+      gaugeColor: '$blue',
       gaugeSynced: 123.524,
       gaugeTotal: 172.503,
-
     },
     executionSyncStatus2: {
-      text: "Execution Sync Status",
+      text: 'Execution Sync Status',
       isGaugeIncluded: true,
-      gaugeColor: "$red",
+      gaugeColor: '$red',
       gaugeSynced: 123.524,
       gaugeTotal: 172.503,
     },
-    currentAPRValue: "4.40%",
-    estimatedActivationTimeValue: "32 Days",
-    validatorQueueValue: "92603",
+    currentAPRValue: '4.40%',
+    estimatedActivationTimeValue: '32 Days',
+    validatorQueueValue: '92603',
   },
 }

src/pages/ValidatorOnboarding/FormStepper/FormStepper.css

@@ -1,20 +1,20 @@
 .custom-step {
   background-color: #ffffff;
 }
-div[class*="StepMain-"]  {
+div[class*='StepMain-'] {
   align-items: start;
 }
-div[class*="LabelContainer-"] span[class*="Label-"]  {
+div[class*='LabelContainer-'] span[class*='Label-'] {
   text-align: initial;
   text-transform: uppercase;
-  font-family: "Inter", sans-serif;
+  font-family: 'Inter', sans-serif;
 }
-div[class*="ConnectorContainer-"]  {
+div[class*='ConnectorContainer-'] {
   right: unset;
   left: calc(-100% + 28px);
   width: 100%;
 }
-span[class*="Connector-"]  {
+span[class*='Connector-'] {
   position: relative;
   z-index: -1;
 }
@@ -55,7 +55,7 @@ span[class*="Connector-"]  {
   top: calc(100% + 4px);
   left: 8px;
   font-size: 12px;
-  font-family: "Inter", sans-serif;
-  color: #A2A9B0; 
+  font-family: 'Inter', sans-serif;
+  color: #a2a9b0;
   width: max-content;
 }

src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.module.css

@@ -31,7 +31,7 @@
   width: 100%;
   font-size: 16px;
   color: rgb(13, 22, 37);
-  font-family: "Inter", sans-serif;
+  font-family: 'Inter', sans-serif;
 }
 
 .input-wrapper {
@@ -44,7 +44,7 @@
   transform: translateY(-50%);
   pointer-events: none;
   z-index: 2;
-  color: #0D162566;
+  color: #0d162566;
   top: 48%;
 }
 

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.stories.tsx

@@ -18,6 +18,9 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    color: 'orange', synced: 140000, total: 200000, title: 'Synced Files'
+    color: 'orange',
+    synced: 140000,
+    total: 200000,
+    title: 'Synced Files',
   },
 }

src/pages/ValidatorOnboarding/layoutGradient.css

@@ -8,7 +8,7 @@
 
 .gradient-wrapper:after {
   display: block;
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: 0;