Redesign accelerator dashboard

frontend/src/app/components/acceleration/pending-stats/pending-stats.component.html

@@ -20,7 +20,7 @@
       <h5 class="card-title" i18n="accelerator.total-vsize">Total vsize</h5>
       <div class="card-text">
         <div [innerHTML]="'&lrm;' + (stats.totalVsize * 4 | vbytes: 2)"></div>
-        <div class="symbol">{{ (stats.totalVsize / 1_000_000).toFixed(2) }}% <span i18n="accelerator.percent-of-next-block"> of next block</span></div>
+        <div class="symbol">{{ (stats.totalVsize / 1_000_000 * 100).toFixed(2) }}% <span i18n="accelerator.percent-of-next-block"> of next block</span></div>
       </div>
     </div>
   </div>

frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { Observable, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
+import { Acceleration } from '../../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-pending-stats',
@@ -10,6 +11,7 @@ import { ApiService } from '../../../services/api.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PendingStatsComponent implements OnInit {
+  @Input() accelerations$: Observable<Acceleration[]>;
   public accelerationStats$: Observable<any>;
 
   constructor(
@@ -17,7 +19,7 @@ export class PendingStatsComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.accelerationStats$ = this.apiService.getAccelerations$().pipe(
+    this.accelerationStats$ = (this.accelerations$ || this.apiService.getAccelerations$()).pipe(
       switchMap(accelerations => {
         let totalAccelerations = 0;
         let totalFeeDelta = 0;