Add accelerator dashboard

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

@@ -0,0 +1,51 @@
+<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.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>
+    </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 in the next block</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #loading>
+  <div class="stats-container loading-container">
+    <div class="item">
+      <h5 class="card-title" i18n="mining.rewards">Miners Reward</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="mining.fees-per-block">Avg Block 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="mining.average-fee">Avg Tx Fee</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.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-stats/acceleration-stats.component.ts

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, 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';
+
+@Component({
+  selector: 'app-acceleration-stats',
+  templateUrl: './acceleration-stats.component.html',
+  styleUrls: ['./acceleration-stats.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccelerationStatsComponent implements OnInit {
+  public accelerationStats$: Observable<any>;
+  private lastBlockHeight: number;
+
+  constructor(private apiService: ApiService, private stateService: StateService) { }
+
+  ngOnInit(): void {
+    this.accelerationStats$ = this.apiService.getAccelerations$().pipe(
+      switchMap(accelerations => {
+        let totalFeeDelta = 0;
+        let totalMined = 0;
+        let totalCanceled = 0;
+        for (const acceleration of accelerations) {
+          if (acceleration.mined) {
+            totalMined++;
+            totalFeeDelta += acceleration.feeDelta;
+          } else if (acceleration.canceled) {
+            totalCanceled++;
+          }
+        }
+        return of({
+          count: totalMined,
+          totalFeeDelta,
+          successRate: (totalMined + totalCanceled > 0) ? ((totalMined / (totalMined + totalCanceled)) * 100) : 0.0,
+        });
+      })
+    );
+  }
+
+
+}

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

@@ -0,0 +1,62 @@
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
+
+<div class="container-xl" style="min-height: 335px" [class.widget]="widget" [class.full-height]="!widget">
+  <h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Accelerations</h1>
+  <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
+
+  <div class="clearfix"></div>
+
+  <div style="min-height: 295px">
+    <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="status text-right" i18n="transaction.status|Transaction Status">Status</th>
+      </thead>
+      <tbody *ngIf="accelerations$ | 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.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+          </td>
+          <td class="fee-delta text-right">
+            {{ acceleration.feeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+          </td>
+          <td class="status text-right">
+            <span *ngIf="acceleration.mined" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
+            <span *ngIf="acceleration.canceled" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span>
+          </td>
+        </tr>
+      </tbody>
+      <ng-template #skeleton>
+        <tbody>
+          <tr *ngFor="let item of skeletonLines">
+            <td class="txid text-left">
+              <span class="skeleton-loader" style="max-width: 75px"></span>
+            </td>
+            <td class="fee text-right">
+              <span class="skeleton-loader" style="max-width: 75px"></span>
+            </td>
+            <td class="fee-delta text-right">
+              <span class="skeleton-loader" style="max-width: 75px"></span>
+            </td>
+            <td class="status text-right">
+              <span class="skeleton-loader" style="max-width: 75px"></span>
+            </td>
+          </tr>
+        </tbody>
+      </ng-template>
+    </table>
+
+    <ng-template [ngIf]="!widget">
+      <div class="clearfix"></div>
+      <br>
+    </ng-template>
+  </div>
+  
+</div>

frontend/src/app/components/accelerations-list/accelerations-list.component.scss

@@ -0,0 +1,107 @@
+.spinner-border {
+  height: 25px;
+  width: 25px;
+  margin-top: 13px;
+}
+
+.container-xl {
+  max-width: 1400px;
+}
+.container-xl.widget {
+  padding-left: 0px;
+  padding-bottom: 0px;
+}
+.container-xl.legacy {
+  max-width: 1140px;
+}
+
+.container {
+  max-width: 100%;
+}
+
+tr, td, th {
+  border: 0px;
+  padding-top: 0.65rem !important;
+  padding-bottom: 0.7rem !important;
+
+  .difference {
+    margin-left: 0.5em;
+
+    &.positive {
+      color: rgb(66, 183, 71);
+    }
+    &.negative {
+      color: rgb(183, 66, 66);
+    }
+  }
+}
+
+.clear-link {
+  color: white;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.progress {
+  background-color: #2d3348;
+}
+
+.txid {
+  width: 30%;
+  @media (max-width: 1100px) {
+    padding-right: 10px;
+  }
+  @media (max-width: 875px) {
+    display: none;
+  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 30%;
+}
+
+.fee {
+  width: 25%;
+}
+
+.fee-delta {
+  width: 25%;
+}
+
+.status {
+  width: 20%
+}
+
+/* Tooltip text */
+.tooltip-custom {
+  position: relative; 
+}
+
+.tooltip-custom .tooltiptext {
+  visibility: hidden;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+  position: absolute;
+  z-index: 1;
+  top: -40px;
+  left: 0;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip-custom:hover .tooltiptext {
+  visibility: visible;
+}
+
+.scriptmessage {
+  overflow: hidden;
+	display: inline-block;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	max-width: 50vw;
+  text-align: left;
+}

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

@@ -0,0 +1,53 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
+import { Observable, catchError, of } 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',
+  templateUrl: './accelerations-list.component.html',
+  styleUrls: ['./accelerations-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccelerationsListComponent implements OnInit {
+  @Input() widget: boolean = false;
+
+  accelerations$: Observable<Acceleration[]> = undefined;
+
+  isLoading = true;
+  paginationMaxSize: number;
+  page = 1;
+  lastPage = 1;
+  maxSize = window.innerWidth <= 767.98 ? 3 : 5;
+  skeletonLines: number[] = [];
+
+  constructor(
+    private apiService: ApiService,
+    private websocketService: WebsocketService,
+    public stateService: StateService,
+    private cd: ChangeDetectorRef,
+  ) {
+  }
+
+  ngOnInit(): void {
+    if (!this.widget) {
+      this.websocketService.want(['blocks']);
+    }
+
+    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.getAccelerations$().pipe(
+      catchError((err) => {
+        this.isLoading = false;
+        return of([]);
+      })
+    );
+  }
+
+  trackByBlock(index: number, block: BlockExtended): number {
+    return block.height;
+  }
+}

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

@@ -0,0 +1,76 @@
+<app-indexing-progress></app-indexing-progress>
+
+<div class="container-xl dashboard-container">
+
+  <div class="row row-cols-1 row-cols-md-2">
+
+    <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>
+      </div>
+      <div class="card-wrapper">
+        <div class="card">
+          <div class="card-body more-padding">
+            <app-acceleration-stats></app-acceleration-stats>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- difficulty adjustment -->
+    <div class="col">
+      <div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
+      <app-difficulty-mining [attr.data-cy]="'difficulty-adjustment'" [showTitle]="false" [showProgress]="false" [showHalving]="true"></app-difficulty-mining>
+    </div>
+
+    <!-- pool distribution -->
+    <div class="col" style="margin-bottom: 1.47rem">
+      <div class="card graph-card">
+        <div class="card-body pl-2 pr-2">
+          <app-pool-ranking [attr.data-cy]="'pool-distribution'" [widget]=true></app-pool-ranking>
+          <div class="mt-1"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- block fee rates -->
+    <div class="col" style="margin-bottom: 1.47rem">
+      <div class="card">
+        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
+          <app-block-fee-rates-graph [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-block-fee-rates-graph>
+          <div class="mt-1"><a [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" fragment="1m" i18n="dashboard.view-more">View more &raquo;</a></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Latest accelerations -->
+    <div class="col">
+      <div class="card">
+        <div class="card-body">
+          <a class="title-link" href="" [routerLink]="['/acceleration-list' | relativeUrl]">
+            <h5 class="card-title d-inline" i18n="dashboard.latest-accelerations">Latest accelerations</h5>
+            <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]="'latest-accelerations'" [widget]=true></app-accelerations-list>
+        </div>
+      </div>
+    </div>
+
+    <!-- Difficult adjustments -->
+    <div class="col">
+      <div class="card">
+        <div class="card-body">
+          <a class="title-link" href="" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]">
+            <h5 class="card-title d-inline" i18n="dashboard.adjustments">Adjustments</h5>
+            <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-difficulty-adjustments-table [attr.data-cy]="'difficulty-adjustments-table'"></app-difficulty-adjustments-table>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

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

@@ -0,0 +1,102 @@
+.dashboard-container {
+  text-align: center;
+  margin-top: 0.5rem;
+  .col {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.card {
+  background-color: #1d1f31;
+}
+
+.graph-card {
+  height: 100%;
+  @media (min-width: 992px) {
+    height: 385px;
+  }
+}
+
+.card-title {
+  font-size: 1rem;
+  color: #4a68b9;
+}
+.card-title > a {
+  color: #4a68b9;
+}
+
+.card-body.pool-ranking {
+  padding: 1.25rem 0.25rem 0.75rem 0.25rem;
+}
+.card-text {
+  font-size: 22px;
+}
+
+#blockchain-container {
+  position: relative;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+#blockchain-container::-webkit-scrollbar {
+  display: none;
+}
+
+.fade-border {
+  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 80%, transparent 100%)
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.more-padding {
+  padding: 24px 20px !important;
+}
+
+.card-wrapper {
+  .card {
+    height: auto !important;
+  }
+  .card-body {
+    display: flex;
+    flex: inherit;
+    text-align: center;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 22px 20px;
+  }
+}
+
+.skeleton-loader {
+  width: 100%;
+  display: block;
+  &:first-child {
+    max-width: 90px;
+    margin: 15px auto 3px;
+  }
+  &:last-child {
+    margin: 10px auto 3px;
+    max-width: 55px;
+  }
+}
+
+.card-text {
+  font-size: 22px;
+}
+
+.title-link, .title-link:hover, .title-link:focus, .title-link:active {
+  display: block;
+  margin-bottom: 10px;
+  text-decoration: none;
+  color: inherit;
+}

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

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { SeoService } from '../../services/seo.service';
+import { WebsocketService } from '../../services/websocket.service';
+
+@Component({
+  selector: 'app-accelerator-dashboard',
+  templateUrl: './accelerator-dashboard.component.html',
+  styleUrls: ['./accelerator-dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AcceleratorDashboardComponent implements OnInit {
+  constructor(
+    private seoService: SeoService,
+    private websocketService: WebsocketService,
+  ) {
+    this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Accelerator Dashboard`);
+  }
+
+  ngOnInit(): void {
+    this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
+  }
+}

frontend/src/app/graphs/graphs.module.ts

@@ -19,6 +19,7 @@ import { PoolComponent } from '../components/pool/pool.component';
 import { TelevisionComponent } from '../components/television/television.component';
 import { DashboardComponent } from '../dashboard/dashboard.component';
 import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
+import { AcceleratorDashboardComponent } from '../components/accelerator-dashboard/accelerator-dashboard.component';
 import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-chart.component';
 import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
 import { BlockHealthGraphComponent } from '../components/block-health-graph/block-health-graph.component';
@@ -30,6 +31,7 @@ import { CommonModule } from '@angular/common';
     MempoolBlockComponent,
 
     MiningDashboardComponent,
+    AcceleratorDashboardComponent,
     PoolComponent,
     PoolRankingComponent,
     TelevisionComponent,

frontend/src/app/graphs/graphs.routing.module.ts

@@ -10,6 +10,7 @@ import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-ch
 import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
 import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
 import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
+import { AcceleratorDashboardComponent } from '../components/accelerator-dashboard/accelerator-dashboard.component';
 import { PoolRankingComponent } from '../components/pool-ranking/pool-ranking.component';
 import { PoolComponent } from '../components/pool/pool.component';
 import { StartComponent } from '../components/start/start.component';
@@ -37,6 +38,17 @@ const routes: Routes = [
           },
         ]
       },
+      {
+        path: 'acceleration',
+        data: { networks: ['bitcoin'] },
+        component: StartComponent,
+        children: [
+          {
+            path: '',
+            component: AcceleratorDashboardComponent,
+          }
+        ]
+      },
       {
         path: 'mempool-block/:id',
         data: { networks: ['bitcoin', 'liquid'] },

frontend/src/app/shared/shared.module.ts

@@ -85,6 +85,8 @@ import { GlobalFooterComponent } from './components/global-footer/global-footer.
 import { AcceleratePreviewComponent } from '../components/accelerate-preview/accelerate-preview.component';
 import { AccelerateFeeGraphComponent } from '../components/accelerate-preview/accelerate-fee-graph.component';
 import { MempoolErrorComponent } from './components/mempool-error/mempool-error.component';
+import { AccelerationsListComponent } from '../components/accelerations-list/accelerations-list.component';
+import { AccelerationStatsComponent } from '../components/acceleration-stats/acceleration-stats.component';
 
 import { BlockViewComponent } from '../components/block-view/block-view.component';
 import { EightBlocksComponent } from '../components/eight-blocks/eight-blocks.component';
@@ -190,6 +192,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     OnlyVsizeDirective,
     OnlyWeightDirective,
     MempoolErrorComponent,
+    AccelerationsListComponent,
+    AccelerationStatsComponent,
   ],
   imports: [
     CommonModule,
@@ -300,6 +304,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     AcceleratePreviewComponent,
     AccelerateFeeGraphComponent,
     MempoolErrorComponent,
+    AccelerationsListComponent,
+    AccelerationStatsComponent,
 
     MempoolBlockOverviewComponent,
     ClockchainComponent,