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/App.css

@@ -1,3 +1,3 @@
 #root {
   width: 100%;
-}
+}

src/components/General/BreadcrumbBar/BreadcrumbBar.css

@@ -1,30 +1,30 @@
 .breadcrumb-bar-nav {
-    width: 100%;
-    flex: 1 1 100%;
-    padding: 1rem 2rem;
-    margin: 0.5rem;
+  width: 100%;
+  flex: 1 1 100%;
+  padding: 1rem 2rem;
+  margin: 0.5rem;
 }
 .breadcrumb-bar-ul {
-    display: flex;
+  display: flex;
 }
 .breadcrumb-bar-li {
-    color: #647084;
-    font-weight: 500;
-    position: relative;
+  color: #647084;
+  font-weight: 500;
+  position: relative;
 }
-.breadcrumb-bar-li:last-child { 
-    color: #09101C;
+.breadcrumb-bar-li:last-child {
+  color: #09101c;
 }
 .breadcrumb-bar-li::after {
-    display: inline-block;
-    content: url("./icons/chevron.svg");
-    color: #09101C;
-    position: absolute;
-    top: 2px;
-    left: 100%;
-    transform: translateX(-50%);
+  display: inline-block;
+  content: url('./icons/chevron.svg');
+  color: #09101c;
+  position: absolute;
+  top: 2px;
+  left: 100%;
+  transform: translateX(-50%);
 }
 
 .breadcrumb-bar-li:last-child::after {
-    display: none;
+  display: none;
 }

src/components/General/ColorPicker/ColorPicker.css

@@ -1,40 +1,40 @@
 .color-picker-button {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-bottom: 10px;
-    margin-right: 10px;
-    position: relative;
-    outline: none;
-    border: none;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  position: relative;
+  outline: none;
+  border: none;
 }
 
-.color-picker-button::before ,
-.color-picker-button::after { 
-    display: block;
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    transform-origin: center;
-    opacity: 0;
-    transition: 120ms opacity ease-in-out;
+.color-picker-button::before,
+.color-picker-button::after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: center;
+  opacity: 0;
+  transition: 120ms opacity ease-in-out;
 }
 .color-picker-button::before {
-    content: "\2713";
-    font-size: 25px;
-    color: white;
+  content: '\2713';
+  font-size: 25px;
+  color: white;
 }
 .color-picker-button::after {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    border: 3px solid currentColor;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid currentColor;
 }
 
-.color-picker-button:focus::before,   
-.color-picker-button:focus::after,   
+.color-picker-button:focus::before,
+.color-picker-button:focus::after,
 .color-picker-button:hover::after {
-    opacity: 1;
+  opacity: 1;
 }

src/components/General/CreateAvatar/CreateAvatar.css

@@ -1,10 +1,10 @@
 .device-avatar {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: -30px;
-}
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: -30px;
+}

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,
@@ -15,5 +14,5 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const DefaultColors: Story = {
-  args: {emojiStyle: 'TWITTER'},
+  args: { emojiStyle: 'TWITTER' },
 }

src/components/General/LabelInputField.css

@@ -1,6 +1,6 @@
 .input-container {
-    background-color: #fff;
-    border-radius: 12px;
-    margin-top: 8px;
-    width: 100%;
-}
+  background-color: #fff;
+  border-radius: 12px;
+  margin-top: 8px;
+  width: 100%;
+}

src/components/General/QuickStartBar/QuickStartBar.css

@@ -1,28 +1,28 @@
 .quick-start-bar {
-    border-radius: 18px;
-    border: 1px solid rgba(0, 0, 0, 0.10);
-    opacity: 0.949999988079071;
-    background: rgba(255, 255, 255, 0.70);
-    backdrop-filter: blur(15px);
-    display: flex;
-    align-items: center;
-    width: 66%;
-    margin: 0 auto;
-    padding: 12px 1rem;
-    position: relative;
-    top: -18vh;
+  border-radius: 18px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  opacity: 0.949999988079071;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(15px);
+  display: flex;
+  align-items: center;
+  width: 66%;
+  margin: 0 auto;
+  padding: 12px 1rem;
+  position: relative;
+  top: -18vh;
 }
 .quick-start-bar > div {
-    width: 100%;
-    border-radius: 24px;
-    background: rgba(100, 112, 132, 0.05);
-    margin-left: 1rem;
-    padding: 1rem 0.5rem;
+  width: 100%;
+  border-radius: 24px;
+  background: rgba(100, 112, 132, 0.05);
+  margin-left: 1rem;
+  padding: 1rem 0.5rem;
 }
-.quick-start-bar ul  {
-    display: flex;
+.quick-start-bar ul {
+  display: flex;
 }
 .quick-start-bar ul li {
-    color: #0D1625;
-    font-size: 13px;
+  color: #0d1625;
+  font-size: 13px;
 }

src/components/General/TagContainer.css

@@ -1,3 +1,3 @@
 /* .tag-container div:nth-child(1) {
     background:transparent;
-  } */
+  } */

src/components/Logos/NimbusLogo.css

@@ -1,10 +1,9 @@
-
-.nimbus-logomark{
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.nimbus-logomark {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .nimbus-logomark svg {
-    width: auto;
-    height: 24px;
-}
+  width: auto;
+  height: 24px;
+}

src/components/PageWrappers/PageWrapperShadow.tsx

@@ -28,7 +28,7 @@ const PageWrapperShadow = ({
           <div className="container-inner">{children}</div>
         </div>
       </section>
-      
+
       <section className="layout-right">
         <div className="image-container">
           <img

src/components/PageWrappers/layout.css

@@ -1,85 +1,85 @@
-.layout{
-    background-color: #FFF;
-    height: 100%;
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    overflow: hidden;
+.layout {
+  background-color: #fff;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
 }
 .layout::after {
-    display: block;
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255,255,255,0) 50%);
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
 }
 .layout-left {
-    flex: 0 0 55%;
-    max-width: 55%;
-    z-index: 2;
+  flex: 0 0 55%;
+  max-width: 55%;
+  z-index: 2;
 }
 .container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: end; 
-    height: 100%;
-    /* padding: 70px 0 0; */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: end;
+  height: 100%;
+  /* padding: 70px 0 0; */
 }
 .container-inner {
-    max-width: 70%;
-    flex: 1 0 70%;
-    display: flex;
-    flex-direction: column; 
+  max-width: 70%;
+  flex: 1 0 70%;
+  display: flex;
+  flex-direction: column;
 }
 .content {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 /* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
 .layout-right {
-    flex: 0 0 45%;
-    max-width: 45%;
-    z-index: 0;
+  flex: 0 0 45%;
+  max-width: 45%;
+  z-index: 0;
 }
 
 .image-container {
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    color: #FFF;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  color: #fff;
 }
 .image-container::before {
-    display: block;
-    content: "";
-    padding-bottom: 100%;
+  display: block;
+  content: '';
+  padding-bottom: 100%;
 }
 .image-container::after {
-    display: block;
-    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));
+  display: block;
+  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));
 }
 .image-container .background-img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    height: 140%;
-    width: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 140%;
+  width: auto;
 }
 .image-container .nimbus-logomark {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .image-container .nimbus-logomark svg {
-    height: 73px;
+  height: 73px;
 }

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;
@@ -45,11 +45,11 @@
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-  
+
   color-scheme: light dark;
   color: rgba(0, 0, 0, 0.87);
   background-color: #242424;
-  
+
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -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;
 }
@@ -87,7 +92,7 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-ul{
+ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -98,7 +103,7 @@ ul li {
 }
 @media (prefers-color-scheme: light) {
   :root {
-    color: #09101C;
+    color: #09101c;
     background-color: #ffffff;
   }
   a:hover {

src/pages/DeviceSyncStatus/DeviceSync.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
- 
+
 import DeviceSyncStatus from './DeviceSyncStatus'
 
 const meta = {

src/pages/LandingPage/LandingPage.css

@@ -1,4 +1,3 @@
-
-.landing-page  {
-    height: 100%;
+.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'}>
@@ -91,7 +91,7 @@ const SyncStatus = ({
       )}
       {isAwaitingPairing && (
         <XStack>
-          <Button icon={<Icon src={ConnectionIcon} />} size={40} onPress={connectViaIpHandler} >
+          <Button icon={<Icon src={ConnectionIcon} />} size={40} onPress={connectViaIpHandler}>
             Connect via IP
           </Button>
         </XStack>

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 {
@@ -42,9 +42,9 @@
   position: absolute;
   left: 15px;
   transform: translateY(-50%);
-  pointer-events: none;  
+  pointer-events: none;
   z-index: 2;
-  color: #0D162566;
+  color: #0d162566;
   top: 48%;
 }
 
@@ -78,4 +78,4 @@
 
 .suggestion-list::-webkit-scrollbar-thumb:hover {
   background-color: transparent;
-}
+}

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/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.stories.tsx

@@ -4,16 +4,16 @@ import ActivationValidatorSetup from './ActivationValidatorSetup'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
 const meta = {
-    title: 'ValidatorOnboarding/ActivationValidatorSetup',
-    component: ActivationValidatorSetup,
+  title: 'ValidatorOnboarding/ActivationValidatorSetup',
+  component: ActivationValidatorSetup,
 
-    tags: ['autodocs'],
-    decorators: [withRouter()],
+  tags: ['autodocs'],
+  decorators: [withRouter()],
 } satisfies Meta<typeof ActivationValidatorSetup>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-    args: {    },
+  args: {},
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx

@@ -24,8 +24,8 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
         border: isComingSoon
           ? '1px solid #F5F6F8'
           : isSelected
-            ? '1px solid #2A4AF5'
-            : '1px solid #DCE0E5',
+          ? '1px solid #2A4AF5'
+          : '1px solid #DCE0E5',
         borderRadius: '16px',
         padding: '12px 16px',
         width: '19%',

src/pages/ValidatorOnboarding/layoutGradient.css

@@ -8,11 +8,11 @@
 
 .gradient-wrapper:after {
   display: block;
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255,255,255,0) 50%);
-}
+  background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
+}