Refactor accelerator dashboard

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

@@ -1,64 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { Observable, of } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-import { ApiService } from '../../services/api.service';
-
-@Component({
-  selector: 'app-acceleration-stats',
-  templateUrl: './acceleration-stats.component.html',
-  styleUrls: ['./acceleration-stats.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AccelerationStatsComponent implements OnInit {
-  @Input() timespan: 'now' | '24h' | '1w' = '24h';
-  public accelerationStats$: Observable<any>;
-
-  constructor(
-    private apiService: ApiService,
-  ) { }
-
-  ngOnInit(): void {
-    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: 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/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html

@@ -30,15 +30,15 @@
   <div *ngIf="widget">
     <div class="acceleration-fees">
       <div class="item" *ngIf="(hrStatsObservable$ | async) as stats; else loadingHrStats">
-        <h5 class="card-title" i18n="mining.avg-fee-delta-24h">Avg Fee Delta (24h)</h5>
+        <h5 class="card-title" i18n="mining.avg-oob-fees-24h">Avg Out-of-band Fees (24h)</h5>
         <p class="card-text">
-          {{ stats.avgFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+          <app-btc [satoshis]="stats.avgFeesPaid"></app-btc>
         </p>
       </div>
       <div class="item" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
-        <h5 class="card-title" i18n="mining.avg-fee-delta-1w">Avg Fee Delta (1w)</h5>
+        <h5 class="card-title" i18n="mining.avg-oob-fees-1w">Avg Out-of-band Fees (1w)</h5>
         <p class="card-text">
-          {{ stats.avgFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+          <app-btc [satoshis]="stats.avgFeesPaid"></app-btc>
         </p>
       </div>
     </div>
@@ -55,7 +55,7 @@
 
 <ng-template #loadingHrStats>
   <div class="item">
-    <h5 class="card-title" i18n="mining.avg-fee-delta-24h">Avg Fee Delta (24h)</h5>
+    <h5 class="card-title" i18n="mining.avg-oob-fees-24h">Avg Out-of-band Fees (24h)</h5>
     <p class="card-text">
       <span class="skeleton-loader skeleton-loader-big"></span>
     </p>
@@ -63,7 +63,7 @@
 </ng-template>
 <ng-template #loadingStats>
   <div class="item">
-    <h5 class="card-title" i18n="mining.avg-fee-delta-1w">Avg Fee Delta (1w)</h5>
+    <h5 class="card-title" i18n="mining.avg-oob-fees-1w">Avg Out-of-band Fees (1w)</h5>
     <p class="card-text">
       <span class="skeleton-loader skeleton-loader-big"></span>
     </p>

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts

@@ -2,14 +2,15 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, L
 import { EChartsOption, graphic } from 'echarts';
 import { Observable, combineLatest } from 'rxjs';
 import { map, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../services/api.service';
-import { SeoService } from '../../services/seo.service';
+import { ApiService } from '../../../services/api.service';
+import { SeoService } from '../../../services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { download, formatterXAxis } from '../../shared/graphs.utils';
-import { StorageService } from '../../services/storage.service';
-import { MiningService } from '../../services/mining.service';
+import { download, formatterXAxis } from '../../../shared/graphs.utils';
+import { StorageService } from '../../../services/storage.service';
+import { MiningService } from '../../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
+import { Acceleration } from '../../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-acceleration-fees-graph',
@@ -29,6 +30,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
   @Input() widget: boolean = false;
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
+  @Input() accelerations$: Observable<Acceleration[]>;
 
   miningWindowPreference: string;
   radioGroupForm: UntypedFormGroup;
@@ -69,16 +71,16 @@ export class AccelerationFeesGraphComponent implements OnInit {
       this.isLoading = true;
       this.timespan = this.miningWindowPreference;
 
-      this.hrStatsObservable$ = this.apiService.getAccelerationHistory$('24h').pipe(
+      this.hrStatsObservable$ = (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: '24h' })).pipe(
         map((accelerations) => {
           return {
-            avgFeeDelta: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length
+            avgFeesPaid: accelerations.filter(acc => acc.status === 'completed' && acc.lastUpdated < (Date.now() - (24 * 60 * 60 * 1000))).reduce((total, acc) => total + acc.feePaid, 0) / accelerations.length
           };
         })
       );
 
       this.statsObservable$ = combineLatest([
-        this.apiService.getAccelerationHistory$(this.miningWindowPreference),
+        (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })),
         this.apiService.getHistoricalBlockFees$(this.miningWindowPreference),
       ]).pipe(
         tap(([accelerations, blockFeesResponse]) => {
@@ -87,7 +89,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
         }),
         map(([accelerations, blockFeesResponse]) => {
           return {
-            avgFeeDelta: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length
+            avgFeesPaid: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feePaid, 0) / accelerations.length
           };
         }),
       );
@@ -107,7 +109,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
             this.isLoading = true;
             this.storageService.setValue('miningWindowPreference', timespan);
             this.timespan = timespan;
-            return this.apiService.getAccelerationHistory$();
+            return this.apiService.getAccelerationHistory$({});
           })
         ),
         this.radioGroupForm.get('dateSpan').valueChanges.pipe(
@@ -147,15 +149,18 @@ export class AccelerationFeesGraphComponent implements OnInit {
         last = val.avgHeight;
       }
       let totalFeeDelta = 0;
+      let totalFeePaid = 0;
       let totalCount = 0;
       while (last <= val.avgHeight) {
         totalFeeDelta += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feeDelta, 0);
+        totalFeePaid += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feePaid, 0);
         totalCount += (blockAccelerations[last] || []).length;
         last++;
       }
       data.push({
         ...val,
         feeDelta: totalFeeDelta,
+        feePaid: totalFeePaid,
         accelerations: totalCount,
       });
     }
@@ -236,7 +241,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
             icon: 'roundRect',
           },
           {
-            name: 'Total fee delta',
+            name: 'Out-of-band fees paid',
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -251,8 +256,8 @@ export class AccelerationFeesGraphComponent implements OnInit {
           axisLabel: {
             color: 'rgb(110, 112, 121)',
             formatter: (val) => {
-              if (val >= 1_000_000) {
-                return `${(val / 100_000_000).toPrecision(5)} BTC`;
+              if (val >= 100_000) {
+                return `${(val / 100_000_000).toFixed(3)} BTC`;
               } else {
                 return `${val} sats`;
               }
@@ -303,8 +308,8 @@ export class AccelerationFeesGraphComponent implements OnInit {
           legendHoverLink: false,
           zlevel: 1,
           yAxisIndex: 0,
-          name: 'Total fee delta',
-          data: data.map(block =>  [block.timestamp * 1000, block.feeDelta, block.avgHeight]),
+          name: 'Out-of-band fees paid',
+          data: data.map(block =>  [block.timestamp * 1000, block.feePaid, block.avgHeight]),
           type: 'line',
           smooth: 0.25,
           symbol: 'none',

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

@@ -0,0 +1,53 @@
+<div class="stats-wrapper" *ngIf="accelerationStats$ | async as stats; else loading">
+  <div class="stats-container">
+    <div class="item">
+      <h5 class="card-title" i18n="address.transactions">Transactions</h5>
+      <div class="card-text">
+        <div>{{ stats.count }}</div>
+        <div class="symbol" i18n="accelerator.total-accelerated">accelerated</div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="accelerator.out-of-band-fees">Out-of-band Fees</h5>
+      <div class="card-text">
+        <div>{{ stats.totalFeesPaid / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
+        <span class="fiat">
+          <app-fiat [value]="stats.totalFeesPaid"></app-fiat>
+        </span>
+      </div>
+    </div>
+    <div class="item">
+      <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</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #loading>
+  <div class="stats-container loading-container">
+    <div class="item">
+      <h5 class="card-title" i18n="address.transactions">Transactions</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="accelerator.out-of-band-fees">Out-of-band Fees</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <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>
+</ng-template>

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

@@ -0,0 +1,46 @@
+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 { StateService } from '../../../services/state.service';
+import { Acceleration } from '../../../interfaces/node-api.interface';
+
+@Component({
+  selector: 'app-acceleration-stats',
+  templateUrl: './acceleration-stats.component.html',
+  styleUrls: ['./acceleration-stats.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccelerationStatsComponent implements OnInit {
+  @Input() timespan: '24h' | '1w' = '24h';
+  @Input() accelerations$: Observable<Acceleration[]>;
+  public accelerationStats$: Observable<any>;
+
+  constructor(
+    private apiService: ApiService,
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit(): void {
+    this.accelerationStats$ = this.accelerations$.pipe(
+      switchMap(accelerations => {
+        let totalFeesPaid = 0;
+        let totalSucceeded = 0;
+        let totalCanceled = 0;
+        for (const acceleration of accelerations) {
+          if (acceleration.status === 'completed') {
+            totalSucceeded++;
+            totalFeesPaid += acceleration.feePaid || 0;
+          } else if (acceleration.status === 'failed') {
+            totalCanceled++;
+          }
+        }
+        return of({
+          count: totalSucceeded,
+          totalFeesPaid,
+          successRate: (totalSucceeded + totalCanceled > 0) ? ((totalSucceeded / (totalSucceeded + totalCanceled)) * 100) : 0.0,
+        });
+      })
+    );
+  }
+}

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html

@@ -10,19 +10,22 @@
     <table class="table table-borderless table-fixed">
       <thead>
         <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
-        <th class="fee" i18n="transaction.fee|Transaction fee">Fee</th>
-        <th class="fee-delta text-right" i18n="accelerator.fee-delta">Fee delta</th>
+        <th class="fee text-right" i18n="transaction.fee|Transaction fee">Final Fee</th>
+        <th class="fee-delta text-right" i18n="accelerator.fee-delta">Max Bid</th>
         <th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
       </thead>
-      <tbody *ngIf="accelerations$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+      <tbody *ngIf="accelerationList$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <tr *ngFor="let acceleration of accelerations; let i= index;">
           <td class="txid text-left">
             <a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
               <app-truncate [text]="acceleration.txid" [lastChars]="5"></app-truncate>
             </a>
           </td>
-          <td class="fee text-right">
-            {{ acceleration.feePaid | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+          <td *ngIf="acceleration.feePaid" class="fee text-right">
+            {{ (acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+          </td>
+          <td *ngIf="!acceleration.feePaid" class="fee text-right">
+            ~
           </td>
           <td class="fee-delta text-right">
             {{ acceleration.feeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
-import { Observable, catchError, of, switchMap } from 'rxjs';
-import { Acceleration, BlockExtended } from '../../interfaces/node-api.interface';
-import { ApiService } from '../../services/api.service';
-import { StateService } from '../../services/state.service';
-import { WebsocketService } from '../../services/websocket.service';
+import { Observable, catchError, of, switchMap, tap } from 'rxjs';
+import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
+import { ApiService } from '../../../services/api.service';
+import { StateService } from '../../../services/state.service';
+import { WebsocketService } from '../../../services/websocket.service';
 
 @Component({
   selector: 'app-accelerations-list',
@@ -13,8 +13,9 @@ import { WebsocketService } from '../../services/websocket.service';
 })
 export class AccelerationsListComponent implements OnInit {
   @Input() widget: boolean = false;
+  @Input() accelerations$: Observable<Acceleration[]>;
 
-  accelerations$: Observable<Acceleration[]> = undefined;
+  accelerationList$: Observable<Acceleration[]> = undefined;
 
   isLoading = true;
   paginationMaxSize: number;
@@ -39,7 +40,7 @@ export class AccelerationsListComponent implements OnInit {
     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
 
-    this.accelerations$ = this.apiService.getAccelerationHistory$().pipe(
+    this.accelerationList$ = (this.apiService.getAccelerationHistory$({ timeframe: '1m' }) || this.accelerations$).pipe(
       switchMap(accelerations => {
         if (this.widget) {
           return of(accelerations.slice(-6).reverse());
@@ -50,6 +51,9 @@ export class AccelerationsListComponent implements OnInit {
       catchError((err) => {
         this.isLoading = false;
         return of([]);
+      }),
+      tap(() => {
+        this.isLoading = false;
       })
     );
   }

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

@@ -4,7 +4,7 @@
 
   <div class="row row-cols-1 row-cols-md-2">
 
-    <!-- 24h stats -->
+    <!-- pending stats -->
     <div class="col">
       <div class="main-title">
         <span [attr.data-cy]="'pending-accelerations'" i18n="accelerator.pending-accelerations">Pending accelerations</span>
@@ -12,7 +12,7 @@
       <div class="card-wrapper">
         <div class="card">
           <div class="card-body more-padding">
-            <app-acceleration-stats timespan="now"></app-acceleration-stats>
+            <app-pending-stats></app-pending-stats>
           </div>
         </div>
       </div>
@@ -27,7 +27,7 @@
       <div class="card-wrapper">
         <div class="card">
           <div class="card-body more-padding">
-            <app-acceleration-stats timespan="1w"></app-acceleration-stats>
+            <app-acceleration-stats timespan="1w" [accelerations$]="accelerations$"></app-acceleration-stats>
           </div>
         </div>
       </div>
@@ -37,7 +37,7 @@
     <div class="col" style="margin-bottom: 1.47rem">
       <div class="card graph-card">
         <div class="card-body pl-2 pr-2">
-          <app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true></app-acceleration-fees-graph>
+          <app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true [accelerations$]="accelerations$"></app-acceleration-fees-graph>
           <div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
@@ -62,7 +62,7 @@
             <span>&nbsp;</span>
             <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
           </a>
-          <app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true></app-accelerations-list>
+          <app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="accelerations$"></app-accelerations-list>
         </div>
       </div>
     </div>

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss

@@ -120,6 +120,10 @@
     text-align: left;
     width: 30%;
 
+    @media (max-width: 875px) {
+      display: none;
+    }
+
     .pool-name {
       margin-left: 1em;
     }

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { SeoService } from '../../services/seo.service';
-import { WebsocketService } from '../../services/websocket.service';
-import { Acceleration, BlockExtended } from '../../interfaces/node-api.interface';
-import { StateService } from '../../services/state.service';
-import { Observable, catchError, combineLatest, of, switchMap } from 'rxjs';
-import { ApiService } from '../../services/api.service';
+import { SeoService } from '../../../services/seo.service';
+import { WebsocketService } from '../../../services/websocket.service';
+import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
+import { StateService } from '../../../services/state.service';
+import { Observable, Subject, catchError, combineLatest, distinctUntilChanged, of, share, switchMap, tap } from 'rxjs';
+import { ApiService } from '../../../services/api.service';
 
 interface AccelerationBlock extends BlockExtended {
   accelerationCount: number,
@@ -18,7 +18,7 @@ interface AccelerationBlock extends BlockExtended {
 })
 export class AcceleratorDashboardComponent implements OnInit {
   blocks$: Observable<AccelerationBlock[]>;
-
+  accelerations$: Observable<Acceleration[]>;
   loadingBlocks: boolean = true;
 
   constructor(
@@ -33,7 +33,19 @@ export class AcceleratorDashboardComponent implements OnInit {
   ngOnInit(): void {
     this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
 
+    this.accelerations$ = this.stateService.chainTip$.pipe(
+      distinctUntilChanged(),
+      switchMap((chainTip) => {
+        return this.apiService.getAccelerationHistory$({ timeframe: '1w' });
+      }),
+      catchError((e) => {
+        return of([]);
+      }),
+      share(),
+    );
+
     this.blocks$ = combineLatest([
+      this.accelerations$,
       this.stateService.blocks$.pipe(
         switchMap((blocks) => {
           if (this.stateService.env.MINING_DASHBOARD === true) {
@@ -44,16 +56,13 @@ export class AcceleratorDashboardComponent implements OnInit {
             }
           }
           return of(blocks as AccelerationBlock[]);
-        })
-      ),
-      this.apiService.getAccelerationHistory$('24h').pipe(
-        catchError((err) => {
+        }),
+        tap(() => {
           this.loadingBlocks = false;
-          return of([]);
         })
       )
     ]).pipe(
-      switchMap(([blocks, accelerations]) => {
+      switchMap(([accelerations, blocks]) => {
         const blockMap = {};
         for (const block of blocks) {
           blockMap[block.id] = block;

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

@@ -8,22 +8,15 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="accelerator.fee-delta">Fee delta</h5>
+      <h5 class="card-title" i18n="accelerator.average-max-bid">Avg Max Bid</h5>
       <div class="card-text">
-        <div>{{ stats.totalFeeDelta / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
+        <div>{{ stats.avgFeeDelta / 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>
+          <app-fiat [value]="stats.avgFeeDelta"></app-fiat>
         </span>
       </div>
     </div>
-    <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'">
+    <div class="item">
       <h5 class="card-title" i18n="accelerator.total-vsize">Total vsize</h5>
       <div class="card-text">
         <div [innerHTML]="'&lrm;' + (stats.totalVsize * 4 | vbytes: 2)"></div>
@@ -43,20 +36,13 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="accelerator.fee-delta">Fee delta</h5>
+      <h5 class="card-title" i18n="accelerator.average-max-bid">Avg Max Bid</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.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'">
+    <div class="item">
       <h5 class="card-title" i18n="accelerator.total-vsize">Total vsize</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>

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

@@ -0,0 +1,88 @@
+.card-title {
+  color: #4a68b9;
+  font-size: 10px;
+  margin-bottom: 4px;  
+  font-size: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-text {
+  font-size: 22px;
+  span {
+    font-size: 11px;
+    position: relative;
+    top: -2px;
+    display: inline-flex;
+  }
+  .green-color {
+    display: block;
+  }
+}
+
+.stats-container {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }  
+  .item {
+    max-width: 150px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }    
+    &:first-child{
+      display: none;
+      @media (min-width: 485px) {
+        display: block;
+      }    
+      @media (min-width: 768px) {
+        display: none;
+      }    
+      @media (min-width: 992px) {
+        display: block;
+      }    
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .card-text span {
+      color: #ffffff66;
+      font-size: 12px;
+      top: 0px;
+    }
+    .fee-text{
+      border-bottom: 1px solid #ffffff1c;
+      width: fit-content;
+      margin: auto;
+      line-height: 1.45;
+      padding: 0px 2px;
+    }
+    .fiat {
+      display: block;
+      font-size: 14px !important;
+    }
+  }
+}
+
+.loading-container{
+  min-height: 76px;
+}
+
+.card-text {
+  .skeleton-loader {
+    width: 100%;
+    display: block;
+    &:first-child {
+      max-width: 90px;
+      margin: 15px auto 3px;
+    }
+    &:last-child {
+      margin: 10px auto 3px;
+      max-width: 55px;
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { ApiService } from '../../../services/api.service';
+
+@Component({
+  selector: 'app-pending-stats',
+  templateUrl: './pending-stats.component.html',
+  styleUrls: ['./pending-stats.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PendingStatsComponent implements OnInit {
+  public accelerationStats$: Observable<any>;
+
+  constructor(
+    private apiService: ApiService,
+  ) { }
+
+  ngOnInit(): void {
+    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: totalAccelerations,
+          totalFeeDelta,
+          avgFeeDelta: totalAccelerations ? totalFeeDelta / totalAccelerations : 0,
+          totalVsize,
+        });
+      })
+    );
+  }
+}