Merge branch 'master' into feature/shorter-stats

backend/src/api/websocket-handler.ts

@@ -332,11 +332,18 @@ class WebsocketHandler {
       }
 
       if (client['track-tx']) {
-        const utxoSpent = newTransactions.some((tx) => {
-          return tx.vin.some((vin) => vin.txid === client['track-tx']);
-        });
-        if (utxoSpent) {
-          response['utxoSpent'] = true;
+        const outspends: object = {};
+        newTransactions.forEach((tx) => tx.vin.forEach((vin, i) => {
+          if (vin.txid === client['track-tx']) {
+            outspends[vin.vout] = {
+              vin: i,
+              txid: tx.txid,
+            };
+          }
+        }));
+
+        if (Object.keys(outspends).length) {
+          response['utxoSpent'] = outspends;
         }
 
         if (rbfTransactions[client['track-tx']]) {
@@ -414,7 +421,6 @@ class WebsocketHandler {
       }
 
       if (client['track-tx'] && txIds.indexOf(client['track-tx']) > -1) {
-        client['track-tx'] = null;
         response['txConfirmed'] = true;
       }
 

frontend/src/app/components/hashrate-chart/hashrate-chart.component.html

@@ -25,13 +25,13 @@
     </form>
   </div>
 
-  <div *ngIf="(hashrateObservable$ | async) && !tableOnly" [class]="!widget ? 'chart' : 'chart-widget'"
+  <div *ngIf="!tableOnly" [class]="!widget ? 'chart' : 'chart-widget'"
     echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
   
-  <div [class]="!widget ? 'mt-3 p-2' : 'ml-4 mr-4 mt-1'" *ngIf="tableOnly">
+  <div [class]="!widget ? 'mt-3 p-2' : 'ml-4 mr-4 mt-1'" *ngIf="tableOnly" style="min-height: 295px">
     <table class="table table-borderless table-sm text-left" [class]="widget ? 'compact' : ''">
       <thead>
         <tr>

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -15,7 +15,7 @@ import { selectPowerOfTen } from 'src/app/bitcoin.utils';
   styles: [`
     .loadingGraphs {
       position: absolute;
-      top: 38%;
+      top: 50%;
       left: calc(50% - 15px);
       z-index: 100;
     }

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html

@@ -25,7 +25,7 @@
     </form>
   </div>
 
-  <div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
+  <div [class]="!widget ? 'chart' : 'chart-widget'"
     echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>

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

@@ -2,11 +2,12 @@
 
   <div class="row row-cols-1 row-cols-md-2">
 
+    <!-- Temporary stuff here - Will be moved to a component once we have more useful data to show -->
     <div class="col">
       <div class="main-title">Reward stats</div>
       <div class="card" style="height: 123px">
         <div class="card-body more-padding">
-          <div class="difficulty-adjustment-container" *ngIf="$rewardStats | async as rewardStats">
+          <div class="fee-estimation-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
             <div class="item">
               <h5 class="card-title" i18n="">Miners Reward</h5>
               <div class="card-text">
@@ -34,6 +35,31 @@
         </div>
       </div>
     </div>
+    <ng-template #loadingReward>
+      <div class="fee-estimation-container">
+        <div class="item">
+          <h5 class="card-title" i18n="">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="">Reward Per Tx</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="">Average Fee</h5>
+          <div class="card-text">
+            <div class="skeleton-loader"></div>
+            <div class="skeleton-loader"></div>
+          </div>
+        </div>
+      </div>
+    </ng-template>
 
     <!-- difficulty adjustment -->
     <div class="col">
@@ -96,4 +122,4 @@
     </div>
 
   </div>
-</div>
+</div>

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

@@ -44,7 +44,7 @@
 .fade-border {
   -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 80%, transparent 100%)
 }
-  
+
 .main-title {
   position: relative;
   color: #ffffff91;
@@ -56,39 +56,22 @@
   padding-bottom: 3px;
 }
 
-.general-stats {
-  min-height: 56px;
-  display: block;
-  @media (min-width: 485px) {
-    display: flex;
+.fee-estimation-container {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
     flex-direction: row;
   }
-  h5 {
-    margin-bottom: 10px;
-  }
   .item {
-    width: 50%;
-    margin: 0px auto 10px;
-    display: inline-block;
-    @media (min-width: 485px) {
-      margin: 0px auto 10px;
+    max-width: 150px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
     }
-    @media (min-width: 785px) {
-      margin: 0px auto 0px;
-    }
-    &:last-child {
-      margin: 0px auto 0px;
-    }
-    &:nth-child(2) {
-      order: 2;
+    &:first-child{
+      display: none;
       @media (min-width: 485px) {
-        order: 3;
-      }
-    }
-    &:nth-child(3) {
-      order: 3;
-      @media (min-width: 485px) {
-        order: 2;
         display: block;
       }
       @media (min-width: 768px) {
@@ -98,48 +81,37 @@
         display: block;
       }
     }
-    .card-title {
-      font-size: 1rem;
-      color: #4a68b9;
+    &:last-child {
+      margin-bottom: 0;
     }
-    .card-text {
-      font-size: 18px;
-      span {
-        color: #ffffff66;
-        font-size: 12px;
-      }
+    .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;
     }
   }
 }
 
-.difficulty-adjustment-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  height: 76px;
-  .shared-block {
-    color: #ffffff66;
-    font-size: 12px;
+.skeleton-loader {
+  width: 100%;
+  display: block;
+  &:first-child {
+    max-width: 90px;
+    margin: 15px auto 3px;
   }
-  .item {
-    padding: 0 5px;
-    width: 100%;
-    &:nth-child(1) {
-      display: none;
-      @media (min-width: 485px) {
-        display: table-cell;
-      }
-      @media (min-width: 768px) {
-        display: none;
-      }
-      @media (min-width: 992px) {
-        display: table-cell;
-      }
-    }
-  }
-  .card-text {
-    font-size: 22px;
-    margin-top: -9px;
-    position: relative;
+  &:last-child {
+    margin: 10px auto 3px;
+    max-width: 55px;
   }
 }

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -1,23 +1,25 @@
 <div [class]="widget === false ? 'container-xl' : ''">
 
-  <div class="pool-distribution" *ngIf="widget && (miningStatsObservable$ | async) as miningStats">
-    <div class="item">
-      <h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</h5>
-      <p class="card-text">
-        {{ miningStats['minersLuck'] }}%
-      </p>
-    </div>
-    <div class="item">
-      <h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5>
-      <p class="card-text">
-        {{ miningStats.blockCount }}
-      </p>
-    </div>
-    <div class="item">
-      <h5 class="card-title" i18n="mining.miners-count">Pools count (1w)</h5>
-      <p class="card-text">
-        {{ miningStats.pools.length }}
-      </p>
+  <div *ngIf="widget">
+    <div class="pool-distribution" *ngIf="(miningStatsObservable$ | async) as miningStats; else loadingReward">
+      <div class="item">
+        <h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</h5>
+        <p class="card-text">
+          {{ miningStats['minersLuck'] }}%
+        </p>
+      </div>
+      <div class="item">
+        <h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5>
+        <p class="card-text">
+          {{ miningStats.blockCount }}
+        </p>
+      </div>
+      <div class="item">
+        <h5 class="card-title" i18n="mining.miners-count">Pools count (1w)</h5>
+        <p class="card-text">
+          {{ miningStats.pools.length }}
+        </p>
+      </div>
     </div>
   </div>
 
@@ -96,3 +98,27 @@
   </table>
 
 </div>
+
+
+<ng-template #loadingReward>
+  <div class="pool-distribution">
+    <div class="item">
+      <h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="mining.miners-count">Pools count (1w)</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+  </div>
+</ng-template>

frontend/src/app/components/pool-ranking/pool-ranking.component.scss

@@ -102,4 +102,11 @@
       }
     }
   }
-}
+}
+
+.skeleton-loader {
+  width: 100%;
+  display: block;
+  max-width: 80px;
+  margin: 15px auto 3px;
+}

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, NgZone, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { EChartsOption, PieSeriesOption } from 'echarts';
@@ -41,6 +41,7 @@ export class PoolRankingComponent implements OnInit {
     private miningService: MiningService,
     private seoService: SeoService,
     private router: Router,
+    private zone: NgZone,
   ) {
   }
 
@@ -293,7 +294,9 @@ export class PoolRankingComponent implements OnInit {
       if (e.data.data === 9999) { // "Other"
         return;
       }
-      this.router.navigate(['/mining/pool/', e.data.data]);
+      this.zone.run(() => {
+        this.router.navigate(['/mining/pool/', e.data.data]);
+      });
     });
   }
 

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

@@ -186,16 +186,16 @@
                     <app-amount [satoshis]="vout.value"></app-amount>
                   </ng-template>
                 </td>
-                <td class="arrow-td" *ngIf="{ value: (outspends$ | async) } as outspends">
-                  <span *ngIf="!outspends.value || !outspends.value[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="grey">
+                <td class="arrow-td">
+                  <span *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="grey">
                     <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                   </span>
                   <ng-template #outspend>
-                    <span *ngIf="!outspends.value[i][vindex] || !outspends.value[i][vindex].spent; else spent" class="green">
+                    <span *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="green">
                       <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                     </span>
                     <ng-template #spent>
-                      <a *ngIf="outspends.value[i][vindex].txid else outputNoTxId" [routerLink]="['/tx/' | relativeUrl, outspends.value[i][vindex].txid]" class="red">
+                      <a *ngIf="outspends[i][vindex].txid else outputNoTxId" [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]" class="red">
                         <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                       </a>
                       <ng-template #outputNoTxId>

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

@@ -1,11 +1,11 @@
-import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { StateService } from '../../services/state.service';
-import { Observable, forkJoin, ReplaySubject, BehaviorSubject, merge } from 'rxjs';
+import { Observable, forkJoin, ReplaySubject, BehaviorSubject, merge, of, Subject, Subscription } from 'rxjs';
 import { Outspend, Transaction } from '../../interfaces/electrs.interface';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { environment } from 'src/environments/environment';
 import { AssetsService } from 'src/app/services/assets.service';
-import { map, share, switchMap } from 'rxjs/operators';
+import { map, share, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended } from 'src/app/interfaces/node-api.interface';
 
 @Component({
@@ -27,41 +27,18 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   @Output() loadMore = new EventEmitter();
 
   latestBlock$: Observable<BlockExtended>;
-  outspends$: Observable<Outspend[]>;
+  outspendsSubscription: Subscription;
   refreshOutspends$: ReplaySubject<object> = new ReplaySubject();
   showDetails$ = new BehaviorSubject<boolean>(false);
-  _outspends: Outspend[] = [];
+  outspends: Outspend[][] = [];
   assetsMinimal: any;
 
   constructor(
     public stateService: StateService,
     private electrsApiService: ElectrsApiService,
     private assetsService: AssetsService,
-  ) {
-    this.outspends$ = merge(
-      this.refreshOutspends$,
-      this.stateService.utxoSpent$
-        .pipe(
-          map(() => {
-            this._outspends = [];
-            return { 0: this.electrsApiService.getOutspends$(this.transactions[0].txid) };
-          }),
-        )
-    ).pipe(
-      switchMap((observableObject) => forkJoin(observableObject)),
-      map((outspends: any) => {
-        const newOutspends = [];
-        for (const i in outspends) {
-          if (outspends.hasOwnProperty(i)) {
-            newOutspends.push(outspends[i]);
-          }
-        }
-        this._outspends = this._outspends.concat(newOutspends);
-        return this._outspends;
-      }),
-      share(),
-    );
-  }
+    private ref: ChangeDetectorRef,
+  ) { }
 
   ngOnInit() {
     this.latestBlock$ = this.stateService.blocks$.pipe(map(([block]) => block));
@@ -72,6 +49,34 @@ export class TransactionsListComponent implements OnInit, OnChanges {
         this.assetsMinimal = assets;
       });
     }
+
+    this.outspendsSubscription = merge(
+      this.refreshOutspends$
+        .pipe(
+          switchMap((observableObject) => forkJoin(observableObject)),
+          map((outspends: any) => {
+            const newOutspends: Outspend[] = [];
+            for (const i in outspends) {
+              if (outspends.hasOwnProperty(i)) {
+                newOutspends.push(outspends[i]);
+              }
+            }
+            this.outspends = this.outspends.concat(newOutspends);
+          }),
+        ),
+      this.stateService.utxoSpent$
+        .pipe(
+          map((utxoSpent) => {
+            for (const i in utxoSpent) {
+              this.outspends[0][i] = {
+                spent: true,
+                txid: utxoSpent[i].txid,
+                vin: utxoSpent[i].vin,
+              };
+            }
+          }),
+        )
+    ).subscribe(() => this.ref.markForCheck());
   }
 
   ngOnChanges() {
@@ -90,7 +95,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     this.transactions.forEach((tx, i) => {
       tx['@voutLimit'] = true;
       tx['@vinLimit'] = true;
-      if (this._outspends[i]) {
+      if (this.outspends[i]) {
         return;
       }
       observableObject[i] = this.electrsApiService.getOutspends$(tx.txid);
@@ -149,4 +154,8 @@ export class TransactionsListComponent implements OnInit, OnChanges {
       this.showDetails$.next(true);
     }
   }
+
+  ngOnDestroy() {
+    this.outspendsSubscription.unsubscribe();
+  }
 }

frontend/src/app/interfaces/websocket.interface.ts

@@ -16,7 +16,7 @@ export interface WebsocketResponse {
   data?: string[];
   tx?: Transaction;
   rbfTransaction?: Transaction;
-  utxoSpent?: boolean;
+  utxoSpent?: object;
   transactions?: TransactionStripped[];
   loadingIndicators?: ILoadingIndicators;
   backendInfo?: IBackendInfo;

frontend/src/app/services/state.service.ts

@@ -81,7 +81,7 @@ export class StateService {
   mempoolInfo$ = new ReplaySubject<MempoolInfo>(1);
   mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
   txReplaced$ = new Subject<Transaction>();
-  utxoSpent$ = new Subject<null>();
+  utxoSpent$ = new Subject<object>();
   mempoolTransactions$ = new Subject<Transaction>();
   blockTransactions$ = new Subject<Transaction>();
   isLoadingWebSocket$ = new ReplaySubject<boolean>(1);

frontend/src/app/services/websocket.service.ts

@@ -252,7 +252,7 @@ export class WebsocketService {
     }
 
     if (response.utxoSpent) {
-      this.stateService.utxoSpent$.next();
+      this.stateService.utxoSpent$.next(response.utxoSpent);
     }
 
     if (response.backendInfo) {