Merge branch 'master' into nymkappa/reindexing-pools-update

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

@@ -13,7 +13,7 @@
     <p i18n>Our mempool and blockchain explorer for the Bitcoin community, focusing on the transaction fee market and multi-layer ecosystem, completely self-hosted without any trusted third-parties.</p>
   </div>
 
-  <video src="/resources/promo-video/mempool-promo.mp4" poster="/resources/promo-video/mempool-promo.jpg" controls loop playsinline [autoplay]="true" [muted]="true">
+  <video #promoVideo (click)="unmutePromoVideo()" (touchstart)="unmutePromoVideo()" src="/resources/promo-video/mempool-promo.mp4" poster="/resources/promo-video/mempool-promo.jpg" controls loop playsinline [autoplay]="true" [muted]="true">
     <track label="English" kind="captions" srclang="en" src="/resources/promo-video/en.vtt" [attr.default]="showSubtitles('en') ? '' : null">
     <track label="日本語" kind="captions" srclang="ja" src="/resources/promo-video/ja.vtt" [attr.default]="showSubtitles('ja') ? '' : null">
     <track label="中文" kind="captions" srclang="zh" src="/resources/promo-video/zh.vtt" [attr.default]="showSubtitles('zh') ? '' : null">

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core';
 import { WebsocketService } from '../../services/websocket.service';
 import { SeoService } from '../../services/seo.service';
 import { StateService } from '../../services/state.service';
@@ -17,6 +17,7 @@ import { DOCUMENT } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AboutComponent implements OnInit {
+  @ViewChild('promoVideo') promoVideo: ElementRef;
   backendInfo$: Observable<IBackendInfo>;
   sponsors$: Observable<any>;
   translators$: Observable<ITranslators>;
@@ -91,7 +92,11 @@ export class AboutComponent implements OnInit {
     }
   }
 
-  showSubtitles(language) {
+  showSubtitles(language): boolean {
     return ( this.locale.startsWith( language ) && !this.locale.startsWith('en') );
   }
+
+  unmutePromoVideo(): void {
+    this.promoVideo.nativeElement.muted = false;
+  }
 }

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

@@ -1,7 +1,7 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
 <header>
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
-  <a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]">
+  <a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
   <ng-template [ngIf]="subdomain">
     <div class="subdomain_container">
       <img [src]="'/api/v1/enterprise/images/' + subdomain + '/logo'" class="subdomain_logo">

frontend/src/app/components/master-page/master-page.component.ts

@@ -53,4 +53,8 @@ export class MasterPageComponent implements OnInit {
   onResize(): void {
     this.isMobile = window.innerWidth <= 767.98;
   }
+
+  brandClick(e): void {
+    this.stateService.resetScroll$.next(true);
+  }
 }

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

@@ -27,6 +27,7 @@ export class StartComponent implements OnInit, OnDestroy {
   markBlockSubscription: Subscription;
   blockCounterSubscription: Subscription;
   @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
+  resetScrollSubscription: Subscription; 
 
   isMobile: boolean = false;
   isiOS: boolean = false;
@@ -108,6 +109,12 @@ export class StartComponent implements OnInit, OnDestroy {
           }, 60 * 60 * 1000);
         }
       });
+    this.resetScrollSubscription = this.stateService.resetScroll$.subscribe(reset => {
+      if (reset) {
+        this.resetScroll();
+        this.stateService.resetScroll$.next(false);
+      } 
+    });
   }
 
   @HostListener('window:resize', ['$event'])
@@ -387,5 +394,6 @@ export class StartComponent implements OnInit, OnDestroy {
     this.chainTipSubscription.unsubscribe();
     this.markBlockSubscription.unsubscribe();
     this.blockCounterSubscription.unsubscribe();
+    this.resetScrollSubscription.unsubscribe();
   }
 }

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

@@ -196,7 +196,7 @@ export class StatisticsComponent implements OnInit {
         this.feeLevelDropdownData.push({
           fee: fee,
           range,
-          color: _chartColors[i - 1],
+          color: _chartColors[i],
         });
       }
     });

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

@@ -18,19 +18,7 @@
       </span>
 
       <div class="container-buttons">
-        <ng-template [ngIf]="tx?.status?.confirmed">
-          <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success">
-            <ng-container *ngTemplateOutlet="latestBlock.height - tx.status.block_height + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.status.block_height + 1}"></ng-container>
-            <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
-            <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
-          </button>
-        </ng-template>
-        <ng-template [ngIf]="tx && !tx?.status?.confirmed && replaced">
-          <button type="button" class="btn btn-sm btn-danger" i18n="transaction.unconfirmed|Transaction unconfirmed state">Replaced</button>
-        </ng-template>
-        <ng-template [ngIf]="tx && !tx?.status?.confirmed && !replaced">
-          <button type="button" class="btn btn-sm btn-danger" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
-        </ng-template>
+        <app-confirmations [chainTip]="latestBlock?.height" [height]="tx?.status?.block_height" [replaced]="replaced"></app-confirmations>
       </div>
     </ng-container>
   </div>
@@ -271,6 +259,10 @@
                 <td i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
                 <td [innerHTML]="'&lrm;' + (tx.weight / 4 | vbytes: 2)"></td>
               </tr>
+              <tr *ngIf="cpfpInfo && cpfpInfo.adjustedVsize && cpfpInfo.adjustedVsize > (tx.weight / 4)">
+                <td i18n="transaction.adjusted-vsize|Transaction Adjusted VSize">Adjusted vsize</td>
+                <td [innerHTML]="'&lrm;' + (cpfpInfo.adjustedVsize | vbytes: 2)"></td>
+              </tr>
               <tr>
                 <td i18n="block.weight">Weight</td>
                 <td [innerHTML]="'&lrm;' + (tx.weight | wuBytes: 2)"></td>
@@ -289,6 +281,10 @@
                 <td i18n="transaction.locktime">Locktime</td>
                 <td [innerHTML]="'&lrm;' + (tx.locktime | number)"></td>
               </tr>
+              <tr *ngIf="cpfpInfo && cpfpInfo.adjustedVsize && cpfpInfo.adjustedVsize > (tx.weight / 4)">
+                <td i18n="transaction.sigops|Transaction Sigops">Sigops</td>
+                <td [innerHTML]="'&lrm;' + (cpfpInfo.sigops | number)"></td>
+              </tr>
               <tr>
                 <td i18n="transaction.hex">Transaction hex</td>
                 <td><a target="_blank" href="{{ network === '' ? '' : '/' + network }}/api/tx/{{ txId }}/hex"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
@@ -477,11 +473,11 @@
           {{ tx.feePerVsize | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
           <ng-template [ngIf]="tx?.status?.confirmed">
             &nbsp;
-            <app-tx-fee-rating *ngIf="tx.fee && ((cpfpInfo && !cpfpInfo?.descendants?.length && !cpfpInfo?.bestDescendant && !cpfpInfo?.ancestors?.length) || !cpfpInfo)" [tx]="tx"></app-tx-fee-rating>
+            <app-tx-fee-rating *ngIf="tx.fee && !hasEffectiveFeeRate" [tx]="tx"></app-tx-fee-rating>
           </ng-template>
         </td>
       </tr>
-      <tr *ngIf="cpfpInfo && (cpfpInfo?.bestDescendant || cpfpInfo?.descendants?.length || cpfpInfo?.ancestors?.length)">
+      <tr *ngIf="cpfpInfo && hasEffectiveFeeRate">
         <td i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
         <td>
           <div class="effective-fee-container">
@@ -490,7 +486,7 @@
               <app-tx-fee-rating class="ml-2 mr-2" *ngIf="tx.fee || tx.effectiveFeePerVsize" [tx]="tx"></app-tx-fee-rating>
             </ng-template>
           </div>
-          <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right" (click)="showCpfpDetails = !showCpfpDetails">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
+          <button *ngIf="cpfpInfo.bestDescendant || cpfpInfo.descendants?.length || cpfpInfo.ancestors?.length" type="button" class="btn btn-outline-info btn-sm btn-small-height float-right" (click)="showCpfpDetails = !showCpfpDetails">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
         </td>
       </tr>
     </tbody>

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

@@ -86,6 +86,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   segwitEnabled: boolean;
   rbfEnabled: boolean;
   taprootEnabled: boolean;
+  hasEffectiveFeeRate: boolean;
 
   @ViewChild('graphContainer')
   graphContainer: ElementRef;
@@ -157,6 +158,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       .subscribe((cpfpInfo) => {
         if (!cpfpInfo || !this.tx) {
           this.cpfpInfo = null;
+          this.hasEffectiveFeeRate = false;
           return;
         }
         // merge ancestors/descendants
@@ -164,16 +166,21 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         if (cpfpInfo.bestDescendant && !cpfpInfo.descendants?.length) {
           relatives.push(cpfpInfo.bestDescendant);
         }
-        let totalWeight =
-          this.tx.weight +
-          relatives.reduce((prev, val) => prev + val.weight, 0);
-        let totalFees =
-          this.tx.fee +
-          relatives.reduce((prev, val) => prev + val.fee, 0);
-
-        this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
+        const hasRelatives = !!relatives.length;
+        if (!cpfpInfo.effectiveFeePerVsize && hasRelatives) {
+          let totalWeight =
+            this.tx.weight +
+            relatives.reduce((prev, val) => prev + val.weight, 0);
+          let totalFees =
+            this.tx.fee +
+            relatives.reduce((prev, val) => prev + val.fee, 0);
+          this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
+        } else {
+          this.tx.effectiveFeePerVsize = cpfpInfo.effectiveFeePerVsize;
+        }
 
         this.cpfpInfo = cpfpInfo;
+        this.hasEffectiveFeeRate = hasRelatives || (this.tx.effectiveFeePerVsize && (Math.abs(this.tx.effectiveFeePerVsize - this.tx.feePerVsize) > 0.01));
       });
 
     this.fetchRbfSubscription = this.fetchRbfHistory$
@@ -359,6 +366,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
                 ancestors: tx.ancestors,
                 bestDescendant: tx.bestDescendant,
               };
+              const hasRelatives = !!(tx.ancestors.length || tx.bestDescendant);
+              this.hasEffectiveFeeRate = hasRelatives || (tx.effectiveFeePerVsize && (Math.abs(tx.effectiveFeePerVsize - tx.feePerVsize) > 0.01));
             } else {
               this.fetchCpfp$.next(this.tx.txid);
             }
@@ -382,7 +391,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.blocksSubscription = this.stateService.blocks$.subscribe(([block, txConfirmed]) => {
       this.latestBlock = block;
 
-      if (txConfirmed && this.tx && !this.tx.status.confirmed) {
+      if (txConfirmed && this.tx && !this.tx.status.confirmed && txConfirmed === this.tx.txid) {
         this.tx.status = {
           confirmed: true,
           block_height: block.height,
@@ -500,6 +509,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.replaced = false;
     this.transactionTime = -1;
     this.cpfpInfo = null;
+    this.hasEffectiveFeeRate = false;
     this.rbfInfo = null;
     this.rbfReplaces = [];
     this.showCpfpDetails = false;

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

@@ -298,14 +298,7 @@
 
       <div class="float-right">
         <ng-container *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
-          <button *ngIf="tx.status.confirmed; else unconfirmedButton" type="button" class="btn btn-sm btn-success mt-2">
-            <ng-container *ngTemplateOutlet="latestBlock.height - tx.status.block_height + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.status.block_height + 1}"></ng-container>
-            <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
-            <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
-          </button>
-          <ng-template #unconfirmedButton>
-            <button type="button" class="btn btn-sm btn-danger mt-2" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
-          </ng-template>
+          <app-confirmations [chainTip]="latestBlock?.height" [height]="tx?.status?.block_height" buttonClass="mt-2"></app-confirmations>
         </ng-container>
         <button *ngIf="address === ''; else viewingAddress" type="button" class="btn btn-sm btn-primary mt-2 ml-2" (click)="switchCurrency()">
           <ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && haveBlindedOutputValues(tx)" [ngIfElse]="defaultAmount" i18n="shared.confidential">Confidential</ng-template>