status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Rickard Andersson 2023-09-26 12:58:41 +03:00
parent 7cce79fcf9 29952fb285
commit 481113a8f3
25 changed files with 242 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/ui-tests.yaml vendored
View File

@ -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

43
README.md
View File

@ -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.

4
package.json
View File

@ -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",

6
src/components/General/BreadcrumbBar/BreadcrumbBar.css
View File

@ -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%;

8
src/components/General/ColorPicker/ColorPicker.css
View File

@ -9,20 +9,20 @@
border: none;
}
.color-picker-button::before ,
.color-picker-button::before,
.color-picker-button::after {
display: block;
content: "";
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
transform-origin: center;
opacity: 0;
transition: 120ms opacity ease-in-out;
}
.color-picker-button::before {
content: "\2713";
content: '\2713';
font-size: 25px;
color: white;
}

3
src/components/General/EmojiPickerDialog.stories.tsx
View File

@ -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' },
}

6
src/components/General/QuickStartBar/QuickStartBar.css
View File

@ -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;
}

3
src/components/Logos/NimbusLogo.css
View File

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

16
src/components/PageWrappers/layout.css
View File

@ -1,5 +1,5 @@
.layout{
background-color: #FFF;
.layout {
background-color: #fff;
height: 100%;
position: relative;
display: flex;
@ -8,13 +8,13 @@
}
.layout::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%);
}
.layout-left {
flex: 0 0 55%;
@ -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;

35
src/index.css
View File

@ -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;
}
@ -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 {

1
src/pages/LandingPage/LandingPage.css
View File

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

6
src/pages/PairDevice/SyncStatus.tsx
View File

@ -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>

15
src/pages/ValidatorOnboarding/Activation/Activation.stories.ts
View File

@ -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',
},
}

14
src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
View File

@ -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;
}

4
src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.module.css
View File

@ -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%;
}

5
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.stories.tsx
View File

@ -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',
},
}

2
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.stories.tsx
View File

@ -15,5 +15,5 @@ export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: { },
args: {},
}

4
src/pages/ValidatorOnboarding/layoutGradient.css
View File

@ -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%);
}