Merge branch 'master' into simon/configurable-main-module

# Conflicts:
#	frontend/src/app/components/blockchain/blockchain.component.ts

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -1,4 +1,4 @@
-<div class="blocks-container" *ngIf="(isLoading$ | async)  === false">
+<div class="blocks-container" *ngIf="loadingBlocks">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
     <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
       <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
@@ -9,7 +9,7 @@
         <div class="fees">
           ~{{ block.medianFee | number:'1.0-0' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
         </div>
-        <div class="fee-span" *ngIf="block.feeRange !== undefined">
+        <div class="fee-span">
           {{ block.feeRange[1] | number:'1.0-0' }} - {{ block.feeRange[block.feeRange.length - 1] | number:'1.0-0' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
         </div>
         <div class="block-size" [innerHTML]="block.size | bytes: 2">&lrm;</div>
@@ -25,7 +25,7 @@
   <div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
 </div>
 
-<div class="blocks-container" *ngIf="(isLoading$ | async) === true">
+<div class="blocks-container" *ngIf="!loadingBlocks">
   <div class="flashing">
     <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
       <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"></div>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
-import { Subscription, Observable } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { Block } from 'src/app/interfaces/electrs.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
@@ -11,8 +11,7 @@ import { Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainBlocksComponent implements OnInit, OnDestroy {
-  @Input() isLoading$: Observable<boolean>;
-
+  
   network = '';
   blocks: Block[] = this.mountEmptyBlocks();
   markHeight: number;
@@ -23,6 +22,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   blockStyles = [];
   interval: any;
   tabHidden = false;
+  loadingBlocks = false;
 
   arrowVisible = false;
   arrowLeftPx = 30;
@@ -54,6 +54,8 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
           return;
         }
 
+        this.loadingBlocks = true;
+
         if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
           this.blocks = [];
           this.blocksFilled = false;

frontend/src/app/components/blockchain/blockchain.component.html

@@ -1,8 +1,8 @@
 <div class="text-center" class="blockchain-wrapper">
   <div class="position-container {{ network }}">
     <span>
-      <app-mempool-blocks [isLoading$]="isLoading$"></app-mempool-blocks>
-      <app-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks>
+      <app-mempool-blocks></app-mempool-blocks>
+      <app-blockchain-blocks></app-blockchain-blocks>
       <div id="divider"></div>
     </span>
   </div>

frontend/src/app/components/blockchain/blockchain.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
-import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-blockchain',
@@ -9,7 +8,6 @@ import { Observable } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainComponent implements OnInit {
-  isLoading$: Observable<boolean>;
   network: string;
 
   constructor(
@@ -17,7 +15,6 @@ export class BlockchainComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.isLoading$ = this.stateService.isLoadingWebSocket$;
     this.network = this.stateService.network;
   }
 }

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -1,4 +1,4 @@
-<div class="mempool-blocks-container" *ngIf="(isLoading$ | async)  === false">
+<div class="mempool-blocks-container">
   <div class="flashing" *ngIf="(timeAvg$ | async) as timeAvg;">
     <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
       <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
@@ -21,7 +21,7 @@
               <app-time-until [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time-until>
             </ng-template>
             <ng-template #timeDiffMainnet>
-              <app-time-until [time]="(timeAvg * i) + now + timeAvg" [fastRender]="false" [fixedRender]="true"></app-time-until>
+              <app-time-until [time]="(timeAvg * i) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
             </ng-template>
           </div>
           <ng-template #mergedBlock>
@@ -38,7 +38,7 @@
   <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
 </div>
 
-<div class="mempool-blocks-container" *ngIf="(isLoading$ | async)  === true">
+<div class="mempool-blocks-container" *ngIf="loadingMempoolBlocks === true">
   <div class="flashing">
     <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks" let-i="index" [ngForTrackBy]="trackByFn">
       <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]"></div>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -13,7 +13,6 @@ import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MempoolBlocksComponent implements OnInit, OnDestroy {
-  @Input() isLoading$: Observable<boolean>;
 
   mempoolBlocks: MempoolBlock[] = this.mountEmptyBlocks();
   mempoolBlocks$: Observable<MempoolBlock[]>;
@@ -31,6 +30,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   blockPadding = 30;
   arrowVisible = false;
   tabHidden = false;
+  loadingMempoolBlocks = true;
 
   rightPosition = 0;
   transition = '2s';
@@ -106,6 +106,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
             timeAvgMins += Math.abs(timeAvgDiff);
           }
 
+          this.loadingMempoolBlocks = false;
           return timeAvgMins * 60 * 1000;
         })
       );

frontend/src/app/components/television/television.component.html

@@ -12,8 +12,8 @@
 
     <div class="blockchain-wrapper">
       <div class="position-container">
-        <app-mempool-blocks [isLoading$]="isLoading$"></app-mempool-blocks>
-        <app-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks>
+        <app-mempool-blocks></app-mempool-blocks>
+        <app-blockchain-blocks></app-blockchain-blocks>
         <div id="divider"></div>
       </div>
     </div>

frontend/src/app/components/television/television.component.scss

@@ -89,9 +89,4 @@
   display: flex;
   margin-top: 0px;
   flex-direction: column;
-  @media(max-height: 700px) {
-    .blockchain-wrapper{
-      display: none !important;
-    }
-  }
 }

frontend/src/app/components/television/television.component.ts

@@ -12,7 +12,6 @@ import { Observable } from 'rxjs';
   styleUrls: ['./television.component.scss']
 })
 export class TelevisionComponent implements OnInit {
-  isLoading$: Observable<boolean>;
 
   mempoolStats: OptimizedMempoolStats[] = [];
   mempoolVsizeFeesData: any;
@@ -27,7 +26,6 @@ export class TelevisionComponent implements OnInit {
   ngOnInit() {
     this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`);
     this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']);
-    this.isLoading$ = this.stateService.isLoadingWebSocket$;
 
     this.apiService.list2HStatistics$()
       .subscribe((mempoolStats) => {

frontend/src/app/components/time-until/time-until.component.ts

@@ -15,6 +15,7 @@ export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy {
   @Input() time: number;
   @Input() fastRender = false;
   @Input() fixedRender = false;
+  @Input() forceFloorOnTimeIntervals: string[];
 
   constructor(
     private ref: ChangeDetectorRef,
@@ -67,10 +68,10 @@ export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy {
     let counter: number;
     for (const i in this.intervals) {
       if (this.intervals.hasOwnProperty(i)) {
-        if (i === 'minute') {
-          counter = Math.round(seconds / this.intervals[i]);
-        } else {
+        if (this.forceFloorOnTimeIntervals && this.forceFloorOnTimeIntervals.indexOf(i) > -1) {
           counter = Math.floor(seconds / this.intervals[i]);
+        } else {
+          counter = Math.round(seconds / this.intervals[i]);
         }
         const dateStrings = dates(counter);
         if (counter > 0) {

frontend/src/app/components/transaction/transaction.component.html

@@ -120,7 +120,7 @@
                           <app-time-until [time]="(60 * 1000 * txInBlockIndex) + now" [fastRender]="false" [fixedRender]="true"></app-time-until>
                         </ng-template>
                         <ng-template #timeEstimateDefault>
-                          <app-time-until *ngIf="(timeAvg$ | async) as timeAvg;" [time]="(timeAvg * txInBlockIndex) + now + timeAvg" [fastRender]="false" [fixedRender]="true"></app-time-until>
+                          <app-time-until *ngIf="(timeAvg$ | async) as timeAvg;" [time]="(timeAvg * txInBlockIndex) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
                         </ng-template>
                       </ng-template>
                     </ng-template>

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

@@ -21,7 +21,7 @@
         <table class="table table-borderless smaller-text table-sm" id="table-tx-vin">
           <tbody>
             <ng-template ngFor let-vin [ngForOf]="tx['@vinLimit'] ? tx.vin.slice(0, 10) : tx.vin" [ngForTrackBy]="trackByIndexFn">
-              <tr [ngClass]="assetsMinimal && vin.prevout && assetsMinimal[vin.prevout.asset] && !vin.is_coinbase && vin.prevout.scriptpubkey_address ? 'assetBox' : ''">
+              <tr [ngClass]="assetsMinimal && vin.prevout && assetsMinimal[vin.prevout.asset] && !vin.is_coinbase && vin.prevout.scriptpubkey_address && tx._unblinded ? 'assetBox' : ''">
                 <td class="arrow-td">
                   <ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
                     <span class="grey">
@@ -122,7 +122,7 @@
         <table class="table table-borderless smaller-text table-sm"  id="table-tx-vout">
           <tbody>
             <ng-template ngFor let-vout let-vindex="index"  [ngForOf]="tx['@voutLimit'] ? tx.vout.slice(0, 10) : tx.vout" [ngForTrackBy]="trackByIndexFn">
-              <tr [ngClass]="assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase ? 'assetBox' : ''">
+              <tr [ngClass]="assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded ? 'assetBox' : ''">
                 <td>
                   <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
                     <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>