Accelerator dashboard pending widget, fee delta fiat values

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

@@ -10,17 +10,26 @@
     <div class="item">
       <h5 class="card-title" i18n="accelerator.fee-delta">Fee delta</h5>
       <div class="card-text">
-        <div>{{ stats.totalFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></div>
-        <div class="symbol" i18n="accelerator.paid-out-of-band">paid out of band</div>
+        <div>{{ stats.totalFeeDelta / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
+        <span class="fiat">
+          <app-fiat [value]="stats.totalFeeDelta"></app-fiat>
+        </span>
       </div>
     </div>
-    <div class="item">
+    <div class="item" *ngIf="timespan !== 'now'">
       <h5 class="card-title" i18n="accelerator.success-rate">Success rate</h5>
       <div class="card-text">
         <div>{{ stats.successRate.toFixed(2) }} %</div>
         <div class="symbol" i18n="accelerator.mined-next-block">mined in the next block</div>
       </div>
     </div>
+    <div class="item" *ngIf="timespan === 'now'">
+      <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>
+    </div>
   </div>
 </div>
 
@@ -40,12 +49,19 @@
         <div class="skeleton-loader"></div>
       </div>
     </div>
-    <div class="item">
+    <div class="item" *ngIf="timespan !== 'now'">
       <h5 class="card-title" i18n="accelerator.success-rate">Success rate</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>
       </div>
     </div>
+    <div class="item" *ngIf="timespan === 'now'">
+      <h5 class="card-title" i18n="accelerator.total-vsize">Total vsize</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
   </div>
 </ng-template>

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

@@ -10,7 +10,7 @@ import { ApiService } from '../../services/api.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccelerationStatsComponent implements OnInit {
-  @Input() timespan: '24h' | '1w' = '24h';
+  @Input() timespan: 'now' | '24h' | '1w' = '24h';
   public accelerationStats$: Observable<any>;
 
   constructor(
@@ -18,26 +18,46 @@ export class AccelerationStatsComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.accelerationStats$ = this.apiService.getAccelerationHistory$(this.timespan).pipe(
-      switchMap(accelerations => {
-        let totalFeeDelta = 0;
-        let totalMined = 0;
-        let totalCanceled = 0;
-        for (const acceleration of accelerations) {
-          if (acceleration.status === 'completed' || acceleration.status === 'mined') {
-            totalMined++;
-            totalFeeDelta += acceleration.feeDelta;
-          } else if (acceleration.status === 'failed') {
-            totalCanceled++;
+    if (this.timespan === 'now') {
+      this.accelerationStats$ = this.apiService.getAccelerations$().pipe(
+        switchMap(accelerations => {
+          let totalAccelerations = 0;
+          let totalFeeDelta = 0;
+          let totalVsize = 0;
+          for (const acceleration of accelerations) {
+            totalAccelerations++;
+            totalFeeDelta += acceleration.feeDelta || 0;
+            totalVsize += acceleration.effectiveVsize || 0;
           }
-        }
-        return of({
-          count: totalMined,
-          totalFeeDelta,
-          successRate: (totalMined + totalCanceled > 0) ? ((totalMined / (totalMined + totalCanceled)) * 100) : 0.0,
-        });
-      })
-    );
+          return of({
+            count: totalAccelerations,
+            totalFeeDelta,
+            totalVsize,
+          });
+        })
+      );
+    } else {
+      this.accelerationStats$ = this.apiService.getAccelerationHistory$(this.timespan).pipe(
+        switchMap(accelerations => {
+          let totalFeeDelta = 0;
+          let totalMined = 0;
+          let totalCanceled = 0;
+          for (const acceleration of accelerations) {
+            if (acceleration.status === 'completed') {
+              totalMined++;
+              totalFeeDelta += acceleration.feeDelta || 0;
+            } else if (acceleration.status === 'failed') {
+              totalCanceled++;
+            }
+          }
+          return of({
+            count: totalMined,
+            totalFeeDelta,
+            successRate: (totalMined + totalCanceled > 0) ? ((totalMined / (totalMined + totalCanceled)) * 100) : 0.0,
+          });
+        })
+      );
+    }
   }
 
 

frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.html

@@ -7,13 +7,12 @@
     <!-- 24h stats -->
     <div class="col">
       <div class="main-title">
-        <span [attr.data-cy]="'acceleration-stats'" i18n="accelerator.acceleration-stats">Acceleration stats</span>&nbsp;
-        <span style="font-size: xx-small" i18n="mining.144-blocks">(144 blocks)</span>
+        <span [attr.data-cy]="'pending-accelerations'" i18n="accelerator.pending-accelerations">Pending accelerations</span>
       </div>
       <div class="card-wrapper">
         <div class="card">
           <div class="card-body more-padding">
-            <app-acceleration-stats timespan="24h"></app-acceleration-stats>
+            <app-acceleration-stats timespan="now"></app-acceleration-stats>
           </div>
         </div>
       </div>