Merge branch 'master' into nymkappa/feature/show-more-mining-pool-pie

frontend/src/app/components/address/address-preview.component.html

@@ -44,7 +44,7 @@
     <div class="w-100 d-block d-md-none"></div>
     <div class="col-md qrcode-col">
       <div class="qr-wrapper">
-        <app-qrcode [data]="address.address" [size]="370"></app-qrcode>
+        <app-qrcode [data]="address.address" [size]="448"></app-qrcode>
       </div>
     </div>
   </div>

frontend/src/app/components/address/address-preview.component.scss

@@ -1,5 +1,5 @@
 h1 {
-  font-size: 42px;
+  font-size: 52px;
   margin: 0;
 }
 
@@ -11,23 +11,26 @@ h1 {
 }
 
 .qrcode-col {
-  width: 420px;
-  min-width: 420px;
+  width: 468px;
+  min-width: 468px;
   flex-grow: 0;
   flex-shrink: 0;
   text-align: center;
+  padding: 0;
+  margin-left: 2px;
+  margin-right: 15px;
 }
 
 .table {
-  font-size: 24px;
+  font-size: 32px;
 
   ::ng-deep .symbol {
-    font-size: 18px;
+    font-size: 24px;
   }
 }
 
 .address-link {
-  font-size: 20px;
+  font-size: 24px;
   margin-bottom: 0.5em;
   display: flex;
   flex-direction: row;
@@ -35,7 +38,7 @@ h1 {
   .truncated-address {
     text-overflow: ellipsis;
     overflow: hidden;
-    max-width: calc(505px - 4em);
+    max-width: calc(640px - 4em);
     display: inline-block;
     white-space: nowrap;
   }

frontend/src/app/components/address/address-preview.component.ts

@@ -44,7 +44,6 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.openGraphService.setPreviewLoading();
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
 
     this.addressLoadingStatus$ = this.route.paramMap
@@ -56,6 +55,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
     this.mainSubscription = this.route.paramMap
       .pipe(
         switchMap((params: ParamMap) => {
+          this.openGraphService.waitFor('address-data');
           this.error = undefined;
           this.isLoadingAddress = true;
           this.loadedConfirmedTxCount = 0;
@@ -73,6 +73,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
                 this.isLoadingAddress = false;
                 this.error = err;
                 console.log(err);
+                this.openGraphService.fail('address-data');
                 return of(null);
               })
             );
@@ -90,7 +91,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
           this.address = address;
           this.updateChainStats();
           this.isLoadingAddress = false;
-          this.openGraphService.setPreviewReady();
+          this.openGraphService.waitOver('address-data');
         })
       )
       .subscribe(() => {},
@@ -98,6 +99,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
           console.log(error);
           this.error = error;
           this.isLoadingAddress = false;
+          this.openGraphService.fail('address-data');
         }
       );
   }

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -18,6 +18,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
   @Input() orientation = 'left';
   @Input() flip = true;
   @Output() txClickEvent = new EventEmitter<TransactionStripped>();
+  @Output() readyEvent = new EventEmitter();
 
   @ViewChild('blockCanvas')
   canvas: ElementRef<HTMLCanvasElement>;
@@ -37,6 +38,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
   selectedTx: TxView | void;
   tooltipPosition: Position;
 
+  readyNextFrame = false;
+
   constructor(
     readonly ngZone: NgZone,
     readonly elRef: ElementRef,
@@ -78,6 +81,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
   setup(transactions: TransactionStripped[]): void {
     if (this.scene) {
       this.scene.setup(transactions);
+      this.readyNextFrame = true;
       this.start();
     }
   }
@@ -258,6 +262,11 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
           this.gl.drawArrays(this.gl.TRIANGLES, 0, pointArray.length / TxSprite.vertexSize);
         }
       }
+
+      if (this.readyNextFrame) {
+        this.readyNextFrame = false;
+        this.readyEvent.emit();
+      }
     }
 
     /* LOOP */

frontend/src/app/components/block/block-preview.component.html

@@ -30,44 +30,42 @@
             <td i18n="block.weight">Weight</td>
             <td [innerHTML]="'&lrm;' + (block?.weight | wuBytes: 2)"></td>
           </tr>
-          <ng-template [ngIf]="webGlEnabled">
-            <tr *ngIf="block?.extras?.medianFee != undefined">
-              <td class="td-width" i18n="block.median-fee">Median fee</td>
-              <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
-            </tr>
-            <ng-template [ngIf]="fees !== undefined">
-              <tr>
-                <td i18n="block.total-fees|Total fees in a block">Total fees</td>
-                <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
-                  <app-amount [satoshis]="block?.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+          <tr *ngIf="block?.extras?.medianFee != undefined">
+            <td class="td-width" i18n="block.median-fee">Median fee</td>
+            <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
+          </tr>
+          <ng-template [ngIf]="fees !== undefined">
+            <tr>
+              <td i18n="block.total-fees|Total fees in a block">Total fees</td>
+              <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
+                <app-amount [satoshis]="block?.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+              </td>
+              <ng-template #liquidTotalFees>
+                <td>
+                  <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
                 </td>
-                <ng-template #liquidTotalFees>
-                  <td>
-                    <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
-                  </td>
-                </ng-template>
-              </tr>
-            </ng-template>
-            <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-              <td i18n="block.miner">Miner</td>
-              <td *ngIf="stateService.env.MINING_DASHBOARD">
-                <a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
-                  [class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-                  {{ block?.extras.pool.name }}
-                </a>
-              </td>
-              <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
-                <span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
-                  [class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-                  {{ block?.extras.pool.name }}
-              </span>
-              </td>
+              </ng-template>
             </tr>
           </ng-template>
+          <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+            <td i18n="block.miner">Miner</td>
+            <td *ngIf="stateService.env.MINING_DASHBOARD">
+              <a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
+                [class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+                {{ block?.extras.pool.name }}
+              </a>
+            </td>
+            <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
+              <span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
+                [class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+                {{ block?.extras.pool.name }}
+            </span>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
-    <div class="col-sm chart-container" *ngIf="webGlEnabled">
+    <div class="col-sm chart-container">
       <app-block-overview-graph
         #blockGraph
         [isLoading]="false"
@@ -75,7 +73,7 @@
         [blockLimit]="stateService.blockVSize"
         [orientation]="'top'"
         [flip]="false"
-        (txClickEvent)="onTxClick($event)"
+        (readyEvent)="onGraphReady()"
       ></app-block-overview-graph>
     </div>
   </div>

frontend/src/app/components/block/block-preview.component.scss

@@ -1,23 +1,25 @@
 .block-title {
-  margin-bottom: 0.75em;
-  font-size: 42px;
+  margin-bottom: 48px;
+  font-size: 52px;
 
   ::ng-deep .next-previous-blocks {
-    font-size: 42px;
+    font-size: 52px;
   }
 }
 
 .table {
-  font-size: 24px;
+  font-size: 32px;
 }
 
 .chart-container {
   flex-grow: 0;
   flex-shrink: 0;
-  width: 420px;
-  min-width: 420px;
+  width: 470px;
+  min-width: 470px;
+  padding: 0;
+  margin-right: 15px;
 }
 
 ::ng-deep .symbol {
-  font-size: 18px;
+  font-size: 24px;
 }

frontend/src/app/components/block/block-preview.component.ts

@@ -1,11 +1,168 @@
-import { Component } from '@angular/core';
-import { BlockComponent } from './block.component';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { switchMap, tap, throttleTime, catchError, shareReplay, startWith, pairwise, filter } from 'rxjs/operators';
+import { of, Subscription, asyncScheduler } from 'rxjs';
+import { StateService } from '../../services/state.service';
+import { SeoService } from 'src/app/services/seo.service';
+import { OpenGraphService } from 'src/app/services/opengraph.service';
+import { BlockExtended, TransactionStripped } from 'src/app/interfaces/node-api.interface';
+import { ApiService } from 'src/app/services/api.service';
+import { BlockOverviewGraphComponent } from 'src/app/components/block-overview-graph/block-overview-graph.component';
 
 @Component({
   selector: 'app-block-preview',
   templateUrl: './block-preview.component.html',
-  styleUrls: ['./block.component.scss', './block-preview.component.scss']
+  styleUrls: ['./block-preview.component.scss']
 })
-export class BlockPreviewComponent extends BlockComponent {
-  
+export class BlockPreviewComponent implements OnInit, OnDestroy {
+  network = '';
+  block: BlockExtended;
+  blockHeight: number;
+  blockHash: string;
+  isLoadingBlock = true;
+  strippedTransactions: TransactionStripped[];
+  overviewTransitionDirection: string;
+  isLoadingOverview = true;
+  error: any;
+  blockSubsidy: number;
+  fees: number;
+  overviewError: any = null;
+
+  overviewSubscription: Subscription;
+  networkChangedSubscription: Subscription;
+
+  @ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;
+
+  constructor(
+    private route: ActivatedRoute,
+    private electrsApiService: ElectrsApiService,
+    public stateService: StateService,
+    private seoService: SeoService,
+    private openGraphService: OpenGraphService,
+    private apiService: ApiService
+  ) { }
+
+  ngOnInit() {
+    this.network = this.stateService.network;
+
+    const block$ = this.route.paramMap.pipe(
+      switchMap((params: ParamMap) => {
+        this.openGraphService.waitFor('block-viz');
+        this.openGraphService.waitFor('block-data');
+
+        const blockHash: string = params.get('id') || '';
+        this.block = undefined;
+        this.error = undefined;
+        this.overviewError = undefined;
+        this.fees = undefined;
+
+        let isBlockHeight = false;
+        if (/^[0-9]+$/.test(blockHash)) {
+          isBlockHeight = true;
+        } else {
+          this.blockHash = blockHash;
+        }
+
+        this.isLoadingBlock = true;
+        this.isLoadingOverview = true;
+
+        if (isBlockHeight) {
+          return this.electrsApiService.getBlockHashFromHeight$(parseInt(blockHash, 10))
+            .pipe(
+              switchMap((hash) => {
+                if (hash) {
+                  this.blockHash = hash;
+                  return this.apiService.getBlock$(hash);
+                } else {
+                  return null;
+                }
+              }),
+              catchError((err) => {
+                this.error = err;
+                this.openGraphService.fail('block-data');
+                this.openGraphService.fail('block-viz');
+                return of(null);
+              }),
+            );
+        }
+        return this.apiService.getBlock$(blockHash);
+      }),
+      filter((block: BlockExtended | void) => block != null),
+      tap((block: BlockExtended) => {
+        this.block = block;
+        this.blockHeight = block.height;
+
+        this.seoService.setTitle($localize`:@@block.component.browser-title:Block ${block.height}:BLOCK_HEIGHT:: ${block.id}:BLOCK_ID:`);
+        this.isLoadingBlock = false;
+        this.setBlockSubsidy();
+        if (block?.extras?.reward !== undefined) {
+          this.fees = block.extras.reward / 100000000 - this.blockSubsidy;
+        }
+        this.stateService.markBlock$.next({ blockHeight: this.blockHeight });
+        this.isLoadingOverview = true;
+        this.overviewError = null;
+
+        this.openGraphService.waitOver('block-data');
+      }),
+      throttleTime(50, asyncScheduler, { leading: true, trailing: true }),
+      shareReplay(1)
+    );
+
+    this.overviewSubscription = block$.pipe(
+      startWith(null),
+      pairwise(),
+      switchMap(([prevBlock, block]) => this.apiService.getStrippedBlockTransactions$(block.id)
+        .pipe(
+          catchError((err) => {
+            this.overviewError = err;
+            this.openGraphService.fail('block-viz');
+            return of([]);
+          }),
+          switchMap((transactions) => {
+            return of({ transactions, direction: 'down' });
+          })
+        )
+      ),
+    )
+    .subscribe(({transactions, direction}: {transactions: TransactionStripped[], direction: string}) => {
+      this.strippedTransactions = transactions;
+      this.isLoadingOverview = false;
+      if (this.blockGraph) {
+        this.blockGraph.destroy();
+        this.blockGraph.setup(this.strippedTransactions);
+      }
+    },
+    (error) => {
+      this.error = error;
+      this.isLoadingOverview = false;
+      this.openGraphService.fail('block-viz');
+      this.openGraphService.fail('block-data');
+      if (this.blockGraph) {
+        this.blockGraph.destroy();
+      }
+    });
+
+    this.networkChangedSubscription = this.stateService.networkChanged$
+      .subscribe((network) => this.network = network);
+  }
+
+  ngOnDestroy() {
+    if (this.overviewSubscription) {
+      this.overviewSubscription.unsubscribe();
+    }
+    if (this.networkChangedSubscription) {
+      this.networkChangedSubscription.unsubscribe();
+    }
+  }
+
+  // TODO - Refactor this.fees/this.reward for liquid because it is not
+  // used anymore on Bitcoin networks (we use block.extras directly)
+  setBlockSubsidy() {
+    this.blockSubsidy = 0;
+  }
+
+  onGraphReady(): void {
+    this.openGraphService.waitOver('block-viz');
+  }
 }

frontend/src/app/components/master-page-preview/master-page-preview.component.html

@@ -1,21 +1,20 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
 <div class="preview-wrapper">
-  <router-outlet></router-outlet>
-
-  <footer>
-    <span class="footer-brand" style="position: relative;">
-      <img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo">
-      <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
+  <header>
+    <span class="header-brand" style="position: relative;">
+      <img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="50" width="200" class="logo">
+      <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
     </span>
 
     <div [ngSwitch]="network.val">
-      <span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 30px;" class="signet mr-1" alt="logo"> Signet</span>
-      <span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 30px;" class="mr-1" alt="testnet logo"> Testnet</span>
-      <span *ngSwitchCase="'bisq'" class="network bisq"><img src="/resources/bisq-logo.png" style="width: 30px;" class="mr-1" alt="bisq logo"> Bisq</span>
-      <span *ngSwitchCase="'liquid'" class="network liquid"><img src="/resources/liquid-logo.png" style="width: 30px;" class="mr-1" alt="liquid mainnet logo"> Liquid</span>
-      <span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</span>
-      <span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 30px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</span>
+      <span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 45px;" class="signet mr-1" alt="logo"> Signet</span>
+      <span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 45px;" class="mr-1" alt="testnet logo"> Testnet</span>
+      <span *ngSwitchCase="'bisq'" class="network bisq"><img src="/resources/bisq-logo.png" style="width: 45px;" class="mr-1" alt="bisq logo"> Bisq</span>
+      <span *ngSwitchCase="'liquid'" class="network liquid"><img src="/resources/liquid-logo.png" style="width: 45px;" class="mr-1" alt="liquid mainnet logo"> Liquid</span>
+      <span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 45px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</span>
+      <span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 45px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</span>
     </div>
-  </footer>
+  </header>
+  <router-outlet></router-outlet>
 </div>
 </ng-container>

frontend/src/app/components/master-page-preview/master-page-preview.component.scss

@@ -2,28 +2,28 @@
   position: relative;
   display: block;
   margin: auto;
-  max-width: 1024px;
-  max-height: 512px;
-  padding-bottom: 64px;
+  max-width: 1200px;
+  max-height: 600px;
+  padding-top: 80px;
 
-  footer {
+  header {
     position: absolute;
     left: 0;
     right: 0;
-    bottom: 0;
+    top: 0;
     z-index: 100;
-    min-height: 64px;
-    padding: 0rem 2rem;
+    min-height: 80px;
+    padding: 0rem 3rem;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     background: #11131f;
     text-align: start;
-    font-size: 1.2em;
+    font-size: 1.8em;
   }
 
-  .footer-brand {
+  .header-brand {
     width: 60%;
   }