Merge branch 'master' into nymkappa/feature/use-block-count-timespan

2022-05-25 20:16:32 +09:00
parent f9bcdfb1e5 07797d36bc
commit df9c9e334d
21 changed files with 238 additions and 473 deletions
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -197,7 +197,18 @@

    <app-transactions-list [transactions]="transactions" [paginated]="true"></app-transactions-list>

-    <ng-template [ngIf]="isLoadingTransactions">
+    <ng-template [ngIf]="transactionsError">
+      <div class="text-center">
+        <br>
+        <span i18n="error.general-loading-data">Error loading data.</span>
+        <br><br>
+        <i>{{ transactionsError.status }}: {{ transactionsError.error }}</i>
+        <br>
+        <br>
+      </div>
+    </ng-template>
+
+    <ng-template [ngIf]="isLoadingTransactions && !transactionsError">
      <div class="text-center mb-4" class="tx-skeleton">

        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus; else headerLoader">
@@ -271,9 +282,9 @@

  <ng-template [ngIf]="error">
    <div class="text-center">
-      <span i18n="block.error.loading-block-data">Error loading block data.</span>
+      <span i18n="error.general-loading-data">Error loading data.</span>
      <br><br>
-      <i>{{ error.error }}</i>
+      <i>{{ error.code }}: {{ error.error }}</i>
    </div>
  </ng-template>

--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -38,6 +38,7 @@ export class BlockComponent implements OnInit, OnDestroy {
  showDetails = false;
  showPreviousBlocklink = true;
  showNextBlocklink = true;
+  transactionsError: any = null;

  subscription: Subscription;
  keyNavigationSubscription: Subscription;
@@ -152,12 +153,13 @@ export class BlockComponent implements OnInit, OnDestroy {
        this.stateService.markBlock$.next({ blockHeight: this.blockHeight });
        this.isLoadingTransactions = true;
        this.transactions = null;
+        this.transactionsError = null;
      }),
      debounceTime(300),
      switchMap((block) => this.electrsApiService.getBlockTransactions$(block.id)
        .pipe(
          catchError((err) => {
-            console.log(err);
+            this.transactionsError = err;
            return of([]);
        }))
      ),
@@ -218,9 +220,16 @@ export class BlockComponent implements OnInit, OnDestroy {
    const start = (page - 1) * this.itemsPerPage;
    this.isLoadingTransactions = true;
    this.transactions = null;
+    this.transactionsError = null;
    target.scrollIntoView(); // works for chrome

    this.electrsApiService.getBlockTransactions$(this.block.id, start)
+      .pipe(
+        catchError((err) => {
+          this.transactionsError = err;
+          return of([]);
+      })
+      )
     .subscribe((transactions) => {
        this.transactions = transactions;
        this.isLoadingTransactions = false;
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -1,6 +1,6 @@
 <app-indexing-progress *ngIf="!widget"></app-indexing-progress>

-<div class="container-xl" [class]="widget ? 'widget' : 'full-height'">
+<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget, 'legacy': !indexingAvailable}">
  <h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Blocks</h1>

  <div class="clearfix"></div>
@@ -8,22 +8,22 @@
  <div style="min-height: 295px">
    <table class="table table-borderless">
      <thead>
-        <th class="height text-left" [class]="widget ? 'widget' : ''" i18n="latest-blocks.height">Height</th>
-        <th class="pool text-left" [class]="widget ? 'widget' : ''" i18n="mining.pool-name">Pool</th>
-        <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget">Timestamp</th>
-        <th class="mined" i18n="latest-blocks.mined" *ngIf="!widget">Mined</th>
-        <th class="reward text-right" i18n="latest-blocks.reward" [class]="widget ? 'widget' : ''">Reward</th>
-        <th class="fees text-right" i18n="latest-blocks.fees" *ngIf="!widget">Fees</th>
-        <th class="txs text-right" i18n="dashboard.txs" [class]="widget ? 'widget' : ''">TXs</th>
-        <th class="size" i18n="latest-blocks.size" *ngIf="!widget">Size</th>
+        <th class="height text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="latest-blocks.height">Height</th>
+        <th *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="mining.pool-name">Pool</th>
+        <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th>
+        <th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th>
+        <th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">Reward</th>
+        <th *ngIf="indexingAvailable && !widget" class="fees text-right" i18n="latest-blocks.fees" [class]="indexingAvailable ? '' : 'legacy'">Fees</th>
+        <th *ngIf="indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">TXs</th>
+        <th *ngIf="!indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">Transactions</th>
+        <th class="size" i18n="latest-blocks.size" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Size</th>
      </thead>
      <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
        <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
          <td class="text-left" [class]="widget ? 'widget' : ''">
-            <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
-              }}</a>
+            <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height }}</a>
          </td>
-          <td class="pool text-left" [class]="widget ? 'widget' : ''">
+          <td  *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
            <div class="tooltip-custom">
              <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
                <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
@@ -36,19 +36,19 @@
          <td class="timestamp" *ngIf="!widget">
            &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
          </td>
-          <td class="mined" *ngIf="!widget">
+          <td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
            <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
          </td>
-          <td class="reward text-right" [class]="widget ? 'widget' : ''">
+          <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
            <app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
          </td>
-          <td class="fees text-right" *ngIf="!widget">
+          <td *ngIf="indexingAvailable && !widget" class="fees text-right" [class]="indexingAvailable ? '' : 'legacy'">
            <app-amount [satoshis]="block.extras.totalFees" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
          </td>
-          <td class="txs text-right" [class]="widget ? 'widget' : ''">
+          <td class="txs text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
            {{ block.tx_count | number }}
          </td>
-          <td class="size" *ngIf="!widget">
+          <td class="size" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
            <div class="progress">
              <div class="progress-bar progress-mempool" role="progressbar"
                [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
@@ -60,29 +60,29 @@
      <ng-template #skeleton>
        <tbody>
          <tr *ngFor="let item of skeletonLines">
-            <td class="height text-left" [class]="widget ? 'widget' : ''">
+            <td class="height text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
              <span class="skeleton-loader" style="max-width: 75px"></span>
            </td>
-            <td class="pool text-left" [class]="widget ? 'widget' : ''">
+            <td *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
              <img width="1" height="25" style="opacity: 0">
              <span class="skeleton-loader" style="max-width: 125px"></span>
            </td>
-            <td class="timestamp" *ngIf="!widget">
+            <td class="timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
              <span class="skeleton-loader" style="max-width: 150px"></span>
            </td>
-            <td class="mined" *ngIf="!widget">
+            <td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
              <span class="skeleton-loader" style="max-width: 125px"></span>
            </td>
-            <td class="reward text-right" [class]="widget ? 'widget' : ''">
+            <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
              <span class="skeleton-loader" style="max-width: 75px"></span>
            </td>
-            <td class="fees text-right" *ngIf="!widget">
+            <td *ngIf="indexingAvailable && !widget" class="fees text-right" [class]="indexingAvailable ? '' : 'legacy'">
              <span class="skeleton-loader" style="max-width: 75px"></span>
            </td>
-            <td class="txs text-right" [class]="widget ? 'widget' : ''">
+            <td class="txs text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
              <span class="skeleton-loader" style="max-width: 75px"></span>
            </td>
-            <td class="size" *ngIf="!widget">
+            <td class="size" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
              <span class="skeleton-loader"></span>
            </td>
          </tr>
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -6,6 +6,9 @@
  padding-left: 0px;
  padding-bottom: 0px;
 }
+.container-xl.legacy {
+  max-width: 1140px;
+}

 .container {
  max-width: 100%;
@@ -58,6 +61,9 @@ tr, td, th {
    width: 10%;
  }
 }
+.height.legacy {
+  width: 15%;
+}

 .timestamp {
  width: 18%;
@@ -65,6 +71,9 @@ tr, td, th {
    display: none;
  }
 }
+.timestamp.legacy {
+  width: 20%;
+}

 .mined {
  width: 13%;
@@ -72,6 +81,12 @@ tr, td, th {
    display: none;
  }
 }
+.mined.legacy {
+  width: 15%;
+  @media (max-width: 576px) {
+    display: table-cell;
+  }
+}

 .txs {
  padding-right: 40px;
@@ -88,6 +103,10 @@ tr, td, th {
    display: none;
  }
 }
+.txs.legacy {
+  padding-right: 80px;
+  width: 10%;
+}

 .fees {
  width: 10%;
@@ -126,6 +145,12 @@ tr, td, th {
    display: none;
  }
 }
+.size.legacy {
+  width: 20%;
+  @media (max-width: 576px) {
+    display: table-cell;
+  }
+}

 /* Tooltip text */
 .tooltip-custom {
--- a/frontend/src/app/components/blocks-list/blocks-list.component.ts
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.ts
@@ -17,6 +17,7 @@ export class BlocksList implements OnInit {

  blocks$: Observable<any[]> = undefined;

+  indexingAvailable = false;
  isLoading = true;
  fromBlockHeight = undefined;
  paginationMaxSize: number;
@@ -35,6 +36,9 @@ export class BlocksList implements OnInit {
  }

  ngOnInit(): void {
+    this.indexingAvailable = (this.stateService.env.BASE_MODULE === 'mempool' &&
+      this.stateService.env.MINING_DASHBOARD === true);
+
    if (!this.widget) {
      this.websocketService.want(['blocks']);
    }
@@ -55,17 +59,19 @@ export class BlocksList implements OnInit {
                this.isLoading = false;
              }),
              map(blocks => {
-                for (const block of blocks) {
-                  // @ts-ignore: Need to add an extra field for the template
-                  block.extras.pool.logo = `./resources/mining-pools/` +
-                    block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
+                if (this.indexingAvailable) {
+                  for (const block of blocks) {
+                    // @ts-ignore: Need to add an extra field for the template
+                    block.extras.pool.logo = `./resources/mining-pools/` +
+                      block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
+                  }
                }
                if (this.widget) {
                  return blocks.slice(0, 6);
                }
                return blocks;
              }),
-              retryWhen(errors => errors.pipe(delayWhen(() => timer(1000))))
+              retryWhen(errors => errors.pipe(delayWhen(() => timer(10000))))
            )
          })
      ),
@@ -81,9 +87,11 @@ export class BlocksList implements OnInit {
            return blocks[0];
          }
          this.blocksCount = Math.max(this.blocksCount, blocks[1][0].height) + 1;
-          // @ts-ignore: Need to add an extra field for the template
-          blocks[1][0].extras.pool.logo = `./resources/mining-pools/` +
-            blocks[1][0].extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
+          if (this.stateService.env.MINING_DASHBOARD) {
+            // @ts-ignore: Need to add an extra field for the template
+            blocks[1][0].extras.pool.logo = `./resources/mining-pools/` +
+              blocks[1][0].extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
+          }
          acc.unshift(blocks[1][0]);
          acc = acc.slice(0, this.widget ? 6 : 15);
          return acc;
--- a/frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html
+++ b/frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html
@@ -1,4 +1,4 @@
-<div style="min-height: 295px">
+<div style="min-height: 335px">
  <table class="table latest-adjustments">
    <thead>
      <tr>
--- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html
+++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html
@@ -1,57 +0,0 @@
-<div class="container-xl">
-  <h1 class="float-left" i18n="master-page.blocks">Blocks</h1>
-  <br>
-
-  <div class="clearfix"></div>
-
-  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
-    <thead>
-      <th style="width: 15%;" i18n="latest-blocks.height">Height</th>
-      <th class="d-none d-md-block" style="width: 20%;" i18n="latest-blocks.timestamp">Timestamp</th>
-      <th style="width: 20%;" i18n="latest-blocks.mined">Mined</th>
-      <th class="d-none d-lg-block" style="width: 15%;" i18n="latest-blocks.transactions">Transactions</th>
-      <th style="width: 20%;" i18n="latest-blocks.size">Size</th>
-    </thead>
-    <tbody>
-      <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
-        <td><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
-        <td class="d-none d-md-block">&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
-        <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
-        <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
-        <td>
-          <div class="progress">
-            <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
-            <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
-          </div>
-        </td>
-      </tr>
-      <ng-template [ngIf]="isLoading">
-        <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
-          <td><span class="skeleton-loader"></span></td>
-          <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-          <td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-        </tr>
-      <ng-container *ngIf="(blocksLoadingStatus$ | async) as blocksLoadingStatus">
-      <tr>
-        <td colspan="5">
-          <div class="progress progress-dark">
-            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': blocksLoadingStatus + '%' }"></div>
-          </div>
-        </td>
-      </tr>
-      </ng-container>
-    </ng-template>
-    </tbody>
-  </table>
-
-  <ng-template [ngIf]="error">
-    <div class="text-center">
-      <span>Error loading blocks</span>
-      <br>
-      <i>{{ error.error }}</i>
-    </div>
-  </ng-template>
-
-</div>
--- a/frontend/src/app/components/latest-blocks/latest-blocks.component.scss
+++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.scss
@@ -1,14 +0,0 @@
-.progress {
-  background-color: #2d3348;
-}
-
-@media (min-width: 768px) {
-  .d-md-block {
-      display: table-cell !important;
-  }
-}
-@media (min-width: 992px) {
-  .d-lg-block {
-      display: table-cell !important;
-  }
-}
--- a/frontend/src/app/components/latest-blocks/latest-blocks.component.ts
+++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.ts
@@ -1,140 +0,0 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { ElectrsApiService } from '../../services/electrs-api.service';
-import { StateService } from '../../services/state.service';
-import { Block } from '../../interfaces/electrs.interface';
-import { Subscription, Observable, merge, of } from 'rxjs';
-import { SeoService } from '../../services/seo.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
-import { map } from 'rxjs/operators';
-
-@Component({
-  selector: 'app-latest-blocks',
-  templateUrl: './latest-blocks.component.html',
-  styleUrls: ['./latest-blocks.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class LatestBlocksComponent implements OnInit, OnDestroy {
-  network$: Observable<string>;
-  error: any;
-  blocks: any[] = [];
-  blockSubscription: Subscription;
-  isLoading = true;
-  interval: any;
-  blocksLoadingStatus$: Observable<number>;
-
-  latestBlockHeight: number;
-
-  heightOfPageUntilBlocks = 150;
-  heightOfBlocksTableChunk = 470;
-
-  constructor(
-    private electrsApiService: ElectrsApiService,
-    public stateService: StateService,
-    private seoService: SeoService,
-    private websocketService: WebsocketService,
-    private cd: ChangeDetectorRef,
-  ) { }
-
-  ngOnInit() {
-    this.seoService.setTitle($localize`:@@8a7b4bd44c0ac71b2e72de0398b303257f7d2f54:Blocks`);
-    this.websocketService.want(['blocks']);
-
-    this.network$ = merge(of(''), this.stateService.networkChanged$);
-
-    this.blocksLoadingStatus$ = this.stateService.loadingIndicators$
-      .pipe(
-        map((indicators) => indicators['blocks'] !== undefined ? indicators['blocks'] : 0)
-      );
-
-    this.blockSubscription = this.stateService.blocks$
-      .subscribe(([block]) => {
-        if (block === null || !this.blocks.length) {
-          return;
-        }
-
-        this.latestBlockHeight = block.height;
-
-        if (block.height === this.blocks[0].height) {
-          return;
-        }
-
-        // If we are out of sync, reload the blocks instead
-        if (block.height > this.blocks[0].height + 1) {
-          this.loadInitialBlocks();
-          return;
-        }
-
-        if (block.height <= this.blocks[0].height) {
-          return;
-        }
-
-        this.blocks.pop();
-        this.blocks.unshift(block);
-        this.cd.markForCheck();
-      });
-
-    this.loadInitialBlocks();
-  }
-
-  ngOnDestroy() {
-    clearInterval(this.interval);
-    this.blockSubscription.unsubscribe();
-  }
-
-  loadInitialBlocks() {
-    this.electrsApiService.listBlocks$()
-      .subscribe((blocks) => {
-        this.blocks = blocks;
-        this.isLoading = false;
-        this.error = undefined;
-
-        this.latestBlockHeight = blocks[0].height;
-
-        const spaceForBlocks = window.innerHeight - this.heightOfPageUntilBlocks;
-        const chunks = Math.ceil(spaceForBlocks / this.heightOfBlocksTableChunk) - 1;
-        if (chunks > 0) {
-          this.loadMore(chunks);
-        }
-        this.cd.markForCheck();
-      },
-      (error) => {
-        console.log(error);
-        this.error = error;
-        this.isLoading = false;
-        this.cd.markForCheck();
-      });
-  }
-
-  loadMore(chunks = 0) {
-    if (this.isLoading) {
-      return;
-    }
-    const height = this.blocks[this.blocks.length - 1].height - 1;
-    if (height < 0) {
-      return;
-    }
-    this.isLoading = true;
-    this.electrsApiService.listBlocks$(height)
-      .subscribe((blocks) => {
-        this.blocks = this.blocks.concat(blocks);
-        this.isLoading = false;
-        this.error = undefined;
-
-        const chunksLeft = chunks - 1;
-        if (chunksLeft > 0) {
-          this.loadMore(chunksLeft);
-        }
-        this.cd.markForCheck();
-      },
-      (error) => {
-        console.log(error);
-        this.error = error;
-        this.isLoading = false;
-        this.cd.markForCheck();
-      });
-  }
-
-  trackByBlock(index: number, block: Block) {
-    return block.height;
-  }
-}
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -51,7 +51,7 @@
        <div class="card-body">
          <h5 class="card-title" i18n="dashboard.latest-blocks">Latest blocks</h5>
          <app-blocks-list [widget]=true></app-blocks-list>
-          <div><a [routerLink]="['/mining/blocks' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+          <div><a [routerLink]="['/blocks' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
        </div>
      </div>
    </div>