Refactor accelerator dashboard

2023-12-07 08:26:32 +00:00
parent e34ee3a34d
commit 8599876b26
22 changed files with 373 additions and 142 deletions
--- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html
+++ b/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>
--- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
+++ b/frontend/src/app/components/acceleration/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;
+    }
+  }
+}
--- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts
+++ b/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,
+        });
+      })
+    );
+  }
+}