UI cleanup (#207)

* small ui changes to improve experience on non-hd wallets * small css change * fixing weird wallet password issues and also including export slashingdb items * rolling back display of slashing protection changes... until components are adjusted * some updates to readme
prysmaticlabs · Nov 1, 2021 · ad34028 · ad34028
1 parent aeacc73
commit ad34028
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -15,6 +15,26 @@ npm start
 ```
 navigate to http://localhost:4200
 
+## Environment 
+
+### Environment Variables
+
+Environment variables are injected via the environmenter service under core/services. this is key to determining some logic in the system such as with interceptors to prevent header leakage.
+
+### Develop Environment
+
+Web UI in development mode uses mock data by default
+
+The recommended way to run prysm web is from the validator client itself via the `--web` flag. If you are building the web UI from source and doing `npm start`, you **will be using fake, mock data!** Keep that in mind if you are trying to use real accounts with the web UI.
+
+Develop URL login
+
+for authentication in develop you may use any token in the url query parameter i.e. `localhost:4200/initialize?token=anytoken`
+
+### Staging Environment
+
+run `npm run start:staging` will run a 'like' production build where the backend expects to be connected to `localhost:7500`. You will need to start the validator client with `--web` but interact with your angular application on `localhost:4200`.
+
 ## Build
 
 Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
@@ -31,7 +51,7 @@ Run `npm run test:watch` to execute the unit tests in watch mode via [Karma](htt
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
 
-## Development
+## Development Tips
 
 ### Generating typescript protos
 
@@ -47,6 +67,3 @@ Then, do
 
 You should see protos being regenerated under `./src/app/proto`, which will be used as the types in our frontend application.
 
-### Environment variables
-
-Environment variables are injected via the environmenter service under core/services. this is key to determining some logic in the system such as with interceptors to prevent header leakage.
diff --git a/src/app/modules/onboarding/pages/nonhd-wallet-wizard/nonhd-wallet-wizard.component.html b/src/app/modules/onboarding/pages/nonhd-wallet-wizard/nonhd-wallet-wizard.component.html
@@ -17,7 +17,7 @@
               <app-import-accounts-form [formGroup]="keystoresFormGroup"></app-import-accounts-form>
               <div class="mt-6">
                 <button color="accent" mat-raised-button (click)="resetOnboarding()">Back to Wallets</button>
-                <span class="ml-4"><button color="primary" mat-raised-button (click)="nextStep($event, states.UnlockAccounts)">Continue</button></span>
+                <span class="ml-4"><button color="primary" mat-raised-button (click)="nextStep($event, states.UnlockAccounts)" [disabled]="keystoresFormGroup.invalid">Continue</button></span>
               </div>
             </mat-step>
             <mat-step [stepControl]="walletPasswordFormGroup" label="Wallet">

diff --git a/src/app/modules/onboarding/pages/nonhd-wallet-wizard/nonhd-wallet-wizard.component.ts b/src/app/modules/onboarding/pages/nonhd-wallet-wizard/nonhd-wallet-wizard.component.ts
@@ -53,18 +53,6 @@ export class NonhdWalletWizardComponent implements OnInit, OnDestroy {
   }, {
     asyncValidators: this.keystoreValidator.correctPassword(),
   });
-  passwordFormGroup = this.formBuilder.group({
-    password: new FormControl('', [
-      Validators.required,
-      Validators.minLength(8)
-    ]),
-    passwordConfirmation: new FormControl('', [
-      Validators.required,
-      Validators.minLength(8)
-    ]),
-  }, {
-    validators: this.passwordValidator.matchingPasswordConfirmation,
-  });
   walletPasswordFormGroup = this.formBuilder.group({
     password: new FormControl('', [
       Validators.required,
@@ -106,20 +94,21 @@ export class NonhdWalletWizardComponent implements OnInit, OnDestroy {
   }
 
   nextStep(event: Event, state: WizardState): void {
-    event.stopPropagation();
     switch (state) {
       case WizardState.UnlockAccounts:
         this.keystoresFormGroup.markAllAsTouched();
         break;
     }
-    this.stepper?.next();
+    if (this.keystoresFormGroup.valid){
+      this.stepper?.next();
+    }
   }
 
   createWallet(event: Event): void {
     event.stopPropagation();
     const request = {
       keymanager: 'IMPORTED',
-      walletPassword: this.passwordFormGroup.get('password')?.value,
+      walletPassword: this.walletPasswordFormGroup.get('password')?.value,
     } as CreateWalletRequest;
     const importRequest = {
       keystoresPassword: this.keystoresFormGroup.get('keystoresPassword')?.value,
@@ -128,7 +117,6 @@ export class NonhdWalletWizardComponent implements OnInit, OnDestroy {
     this.loading = true;
     // We attempt to create a wallet followed by a call to
     // signup using the wallet's password in the validator client.
-
     this.walletService.createWallet(request).pipe(
       switchMap(() => {
         return this.walletService.importKeystores(importRequest).pipe(

diff --git a/src/app/modules/shared/components/import-accounts-form/import-accounts-form.component.html b/src/app/modules/shared/components/import-accounts-form/import-accounts-form.component.html
@@ -17,12 +17,26 @@
     <div class="my-6 text-hint text-lg leading-relaxed">
       Upload any folder of keystore files such as the validator_keys folder that
       was created during the eth2 launchpad's eth2.0-deposit-cli process here.
-      You can drag and drop the directory or individual files.
+      You can drag and drop the directory or individual files. Onboarding requires keystores to use the same password.
+      Additional keystores with other passwords can be uploaded one at a time after onboarding.
     </div>
   </div>
   <form [formGroup]="formGroup">
+    <app-import-dropzone [accept]="'.json,.zip'"
+      (fileChange)="fileChangeHandler($event)"></app-import-dropzone>
+    <div class="my-6 flex flex-wrap">
+      <mat-error class="warning" *ngIf="formGroup && formGroup.touched &&
+        formGroup.controls.keystoresImported.hasError('noKeystoresUploaded')">
+        Please upload at least 1 valid keystore file
+      </mat-error>
+      <mat-error class="warning" *ngIf="formGroup && formGroup.touched &&
+        formGroup.controls.keystoresImported.hasError('tooManyKeystores')">
+        Max 50 keystore files allowed. If you have more than that, we recommend
+        an HD wallet instead
+      </mat-error>
+    </div>
     <mat-form-field appearance="outline">
-      <mat-label>Password to unlock keystores</mat-label>
+      <mat-label>Password to unlock keystores <span class="text-red-600">*</span></mat-label>
       <input
         matInput
         formControlName="keystoresPassword"
@@ -32,31 +46,18 @@
         type="password"
         />
       <mat-error class="warning"
-        *ngIf="formGroup?.controls.keystoresPassword.hasError('required')">
+        *ngIf="formGroup?.controls.keystoresPassword.hasError('required') && formGroup?.touched ">
         Password for keystores is required
       </mat-error>
       <mat-error class="warning"
-        *ngIf="formGroup?.controls.keystoresPassword.hasError('incorrectPassword')">
+        *ngIf="formGroup?.controls.keystoresPassword.hasError('incorrectPassword') && formGroup?.touched">
         {{formGroup?.controls.keystoresPassword.getError('incorrectPassword')}}
       </mat-error>
       <mat-error class="warning"
-        *ngIf="formGroup?.controls.keystoresPassword.hasError('somethingWentWrong')">
+        *ngIf="formGroup?.controls.keystoresPassword.hasError('somethingWentWrong') && formGroup?.touched">
         Something went wrong when attempting to decrypt your keystores, perhaps
         your node is not running
       </mat-error>
     </mat-form-field>
-    <app-import-dropzone [accept]="'.json,.zip'"
-      (fileChange)="fileChangeHandler($event)"></app-import-dropzone>
-    <div class="my-6 flex flex-wrap">
-      <mat-error *ngIf="formGroup && formGroup.touched &&
-        formGroup.controls.keystoresImported.hasError('noKeystoresUploaded')">
-        Please upload at least 1 valid keystore file
-      </mat-error>
-      <mat-error *ngIf="formGroup && formGroup.touched &&
-        formGroup.controls.keystoresImported.hasError('tooManyKeystores')">
-        Max 50 keystore files allowed. If you have more than that, we recommend
-        an HD wallet instead
-      </mat-error>
-    </div>
   </form>
 </div>
diff --git a/src/app/modules/wallet/components/import-protection/import-protection.component.ts b/src/app/modules/wallet/components/import-protection/import-protection.component.ts
@@ -70,7 +70,7 @@ export class ImportProtectionComponent extends BaseComponent implements OnInit {
     setTimeout(() => {
       this.fileStatus = FileStatus.uploading;
       const request = {
-        slashingProtectionJSON: JSON.stringify(this.importedFiles),
+        slashingProtectionJson: JSON.stringify(this.importedFiles),
       } as ImportSlashingProtectionRequest;
 
       this.walletService

diff --git a/src/app/proto/validator/accounts/v2/web_api.ts b/src/app/proto/validator/accounts/v2/web_api.ts
@@ -245,7 +245,7 @@ export interface ImportSlashingProtectionRequest {
   /**
    * JSON representin the slash protection
    */
-  slashingProtectionJSON: string;
+  slashingProtectionJson: string;
 }
 export interface BackupAccountsRequest {
   /**

diff --git a/src/styles/views/_onboarding.scss b/src/styles/views/_onboarding.scss
@@ -72,7 +72,7 @@
       }
       .mat-stepper-horizontal {
         background-color: transparent;
-        height: 650px;
+        min-height: 650px;
         width: 900px;
       }
       .mat-stepper-vertical {