Fix Issue for User-preferences

src/app/modules/dashboard/components/validator-performance-list/validator-performance-list.component.html

@@ -1,10 +1,13 @@
 <app-loading [loading]="loading" [loadingTemplate]="loadingTemplate"
-             [hasError]="hasError" [errorMessage]="'No validator performance information available'"
-             [noData]="noData" [noDataMessage]="'No validator performance information available'">
+  [hasError]="hasError" [errorMessage]="'No validator performance information
+  available'"
+  [noData]="noData" [noDataMessage]="'No validator performance information
+  available'">
   <ng-template #loadingTemplate>
     <div style="width:90%; margin:5%;">
       <ngx-skeleton-loader count="6"
-                           [theme]="{ 'border-radius': '6px', height: '20px', 'margin-top': '10px'}"></ngx-skeleton-loader>
+        [theme]="{ 'border-radius': '6px', height: '20px', 'margin-top':
+        '10px'}"></ngx-skeleton-loader>
     </div>
   </ng-template>
   <table mat-table [dataSource]="dataSource">
@@ -18,13 +21,15 @@
 
       <ng-container matColumnDef="attLastIncludedSlot">
         <th mat-header-cell *matHeaderCellDef>Last included slot</th>
-        <td mat-cell *matCellDef="let element"> {{element.inclusionSlots | epoch}} </td>
+        <td mat-cell *matCellDef="let element"> {{element.inclusionSlots |
+          epoch}} </td>
       </ng-container>
 
       <ng-container matColumnDef="correctlyVotedSource">
         <th mat-header-cell *matHeaderCellDef>Correctly voted source</th>
         <td mat-cell *matCellDef="let element">
-          <div [className]="element.correctlyVotedSource ? 'check green' : 'cross red'">
+          <div [className]="element.correctlyVotedSource ? 'check green' :
+            'cross red'">
           </div>
         </td>
       </ng-container>
@@ -39,15 +44,20 @@
       <ng-container matColumnDef="correctlyVotedTarget">
         <th mat-header-cell *matHeaderCellDef>Voted target</th>
         <td mat-cell *matCellDef="let element">
-          <div [className]="element.correctlyVotedTarget ? 'check green' : 'cross red'">
+          <div [className]="element.correctlyVotedTarget ? 'check green' :
+            'cross red'">
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="correctlyVotedHead">
         <th mat-header-cell *matHeaderCellDef>Voted head</th>
         <td mat-cell *matCellDef="let element">
-          <div [className]="element.correctlyVotedHead ? 'check green' : 'cross red'">
+          <div
+
+            [className]="element.correctlyVotedHead ?
+            'check green' :
+            'cross red'">
           </div>
         </td>
       </ng-container>
@@ -56,5 +66,8 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+  <mat-paginator
+    (page)="pageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [pageSize]="pageSize"></mat-paginator>
 </app-loading>

src/app/modules/dashboard/components/validator-performance-list/validator-performance-list.component.ts

@@ -1,13 +1,15 @@
-import { Component, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 
 import { BigNumber } from 'ethers';
 import { ValidatorPerformanceResponse } from 'src/app/proto/eth/v1alpha1/beacon_chain';
 import { throwError } from 'rxjs';
-import { catchError, map, take, tap } from 'rxjs/operators';
+import { catchError, map, take, tap, takeUntil, filter } from 'rxjs/operators';
 import { ValidatorService } from '../../../core/services/validator.service';
+import { BaseComponent } from '../../../shared/components/base.component';
+import { UserService } from '../../../shared/services/user.service';
 
 export interface ValidatorListItem {
   publicKey: string;
@@ -26,61 +28,87 @@ export interface ValidatorListItem {
   selector: 'app-validator-performance-list',
   templateUrl: './validator-performance-list.component.html',
 })
-export class ValidatorPerformanceListComponent {
+export class ValidatorPerformanceListComponent
+  extends BaseComponent
+  implements OnInit {
   displayedColumns: string[] = [
     'publicKey',
     'attLastIncludedSlot',
     'correctlyVotedSource',
     'correctlyVotedTarget',
     'correctlyVotedHead',
-    'gains'
+    'gains',
   ];
   dataSource?: MatTableDataSource<ValidatorListItem>;
 
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator | null = null;
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator | null = null;
   @ViewChild(MatSort, { static: true }) sort: MatSort | null = null;
 
   loading = true;
   hasError = false;
   noData = false;
-
-  constructor(private validatorService: ValidatorService) {
-    this.validatorService.performance$.pipe(
-      map((performance: ValidatorPerformanceResponse) => {
-        const list: ValidatorListItem[] = [];
-        if (performance) {
-          for (let i = 0; i < performance.publicKeys.length; i++) {
-            const item = {} as ValidatorListItem;
-            item.publicKey = performance.publicKeys[i];
-            item.correctlyVotedSource = performance.correctlyVotedSource[i];
-            item.correctlyVotedHead = performance.correctlyVotedHead[i];
-            item.correctlyVotedTarget = performance.correctlyVotedTarget[i];
-            item.balancesAfterEpochTransition = performance.balancesAfterEpochTransition[i] || '0';
-            item.balancesBeforeEpochTransition = performance.balancesBeforeEpochTransition[i] || '0';
-            item.currentEffectiveBalances = performance.currentEffectiveBalances[i] || '0';
-            item.inclusionDistances = performance.inclusionDistances[i];
-            item.inclusionSlots = performance.inclusionSlots[i];
-            item.gains = BigNumber.from(item.balancesAfterEpochTransition).sub(
-              BigNumber.from(item.balancesBeforeEpochTransition)).toString();
-            list.push(item);
+  pageSizeOptions: number[] = [];
+  pageSize = 5;
+  constructor(
+    private validatorService: ValidatorService,
+    private userService: UserService
+  ) {
+    super();
+    this.validatorService.performance$
+      .pipe(
+        map((performance: ValidatorPerformanceResponse) => {
+          const list: ValidatorListItem[] = [];
+          if (performance) {
+            for (let i = 0; i < performance.publicKeys.length; i++) {
+              const item = {} as ValidatorListItem;
+              item.publicKey = performance.publicKeys[i];
+              item.correctlyVotedSource = performance.correctlyVotedSource[i];
+              item.correctlyVotedHead = performance.correctlyVotedHead[i];
+              item.correctlyVotedTarget = performance.correctlyVotedTarget[i];
+              item.balancesAfterEpochTransition =
+                performance.balancesAfterEpochTransition[i] || '0';
+              item.balancesBeforeEpochTransition =
+                performance.balancesBeforeEpochTransition[i] || '0';
+              item.currentEffectiveBalances =
+                performance.currentEffectiveBalances[i] || '0';
+              item.inclusionDistances = performance.inclusionDistances[i];
+              item.inclusionSlots = performance.inclusionSlots[i];
+              item.gains = BigNumber.from(item.balancesAfterEpochTransition)
+                .sub(BigNumber.from(item.balancesBeforeEpochTransition))
+                .toString();
+              list.push(item);
+            }
           }
-        }
-        return list;
-      }),
-      tap(result => {
-        this.dataSource = new MatTableDataSource(result);
-        this.dataSource.paginator = this.paginator;
-        this.dataSource.sort = this.sort;
-        this.loading = false;
-        this.noData = result.length === 0;
-      }),
-      catchError(err => {
-        this.loading = false;
-        this.hasError = true;
-        return throwError(err);
-      }),
-      take(1)
-    ).subscribe();
+          return list;
+        }),
+        tap((result) => {
+          this.dataSource = new MatTableDataSource(result);
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+          this.loading = false;
+          this.noData = result.length === 0;
+        }),
+        catchError((err) => {
+          this.loading = false;
+          this.hasError = true;
+          return throwError(err);
+        }),
+        take(1)
+      )
+      .subscribe();
+  }
+  ngOnInit(): void {
+    this.userService.user$
+      .pipe(
+        takeUntil(this.destroyed$),
+        filter((x) => !!x),
+        tap((x) => {
+          this.pageSizeOptions = x.pageSizeOptions;
+          this.pageSize = x.gainAndLosesPageSize;
+        })
+      )
+      .subscribe();
   }
 
   applyFilter(event: Event): void {
@@ -90,4 +118,8 @@ export class ValidatorPerformanceListComponent {
       this.dataSource.paginator?.firstPage();
     }
   }
+
+  pageChange(ev: PageEvent): void {
+    this.userService.changeGainsAndLosesPageSize(ev.pageSize);
+  }
 }

src/app/modules/shared/services/user.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  let service: UserService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UserService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/modules/shared/services/user.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { User } from '../types/user';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+  constructor() {
+    this.setUser(this.getUser());
+  }
+
+  private userKeyStore = 'user-prysm';
+
+  private user: User | null | undefined;
+  private onUserChange = new BehaviorSubject<User>((null as any) as User);
+  user$ = this.onUserChange.asObservable();
+
+  changeAccountListPerPage(accountListPerPage: number): void {
+    if (!this.user) {
+      return;
+    }
+    this.user.acountsPerPage = accountListPerPage;
+    this.saveChanges();
+  }
+
+  changeGainsAndLosesPageSize(pageSize: number): void {
+    if (!this.user) {
+      return;
+    }
+    this.user.gainAndLosesPageSize = pageSize;
+    this.saveChanges();
+  }
+
+  private saveChanges(): void {
+    if (this.user) {
+      localStorage.setItem(this.userKeyStore, JSON.stringify(this.user));
+      this.onUserChange.next(this.user);
+    }
+  }
+
+  private getUser(): User {
+    const userStr = localStorage.getItem(this.userKeyStore);
+    if (!userStr) {
+      const user = new User();
+      return user;
+    } else {
+      const user = new User(JSON.parse(userStr));
+      return user;
+    }
+  }
+
+  private setUser(user: User): void {
+    this.user = user;
+    this.saveChanges();
+  }
+}

src/app/modules/shared/types/user.ts

@@ -0,0 +1,8 @@
+export class User {
+  constructor(init?: Partial<User>) {
+    Object.assign(this, init);
+  }
+  acountsPerPage = 5;
+  gainAndLosesPageSize = 5;
+  pageSizeOptions: number[] = [5, 10, 50, 100, 250];
+}

src/app/modules/wallet/components/accounts-table/accounts-table.component.ts

@@ -10,6 +10,8 @@ import { base64ToHex } from 'src/app/modules/core/utils/hex-util';
 import { AccountDeleteComponent } from '../account-delete/account-delete.component';
 
 import { MenuItem } from '../icon-trigger-select/icon-trigger-select.component';
+import { UserService } from '../../../shared/services/user.service';
+import { Router } from '@angular/router';
 
 export interface TableData {
   select: number;

src/app/modules/wallet/pages/accounts/accounts.component.html

@@ -41,6 +41,7 @@
     <mat-paginator
       (page)="handlePageEvent($event)"
       [length]="totalData"
+      [pageSize]="pageSize"
       [pageSizeOptions]="pageSizes">
     </mat-paginator>
   </div>