Hide features row if tx has no features

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

@@ -67,7 +67,7 @@
                     <td><app-time kind="span" [time]="tx.status.block_time - transactionTime" [fastRender]="true" [relative]="true"></app-time></td>
                   </tr>
                 </ng-template>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet' && featuresEnabled">
                   <td class="td-width" i18n="transaction.features|Transaction features">Features</td>
                   <td>
                     <app-tx-features [tx]="tx"></app-tx-features>
@@ -468,6 +468,7 @@
 <ng-template #feeTable>
   <table class="table table-borderless table-striped">
     <tbody>
+      <tr *ngIf="isMobile && (network === 'liquid' || network === 'liquidtestnet' || !featuresEnabled)"></tr>
       <tr>
         <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
         <td>{{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="tx.fee"></app-fiat></span></td>

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

@@ -74,6 +74,12 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   flowEnabled: boolean;
   blockConversion: Price;
   tooltipPosition: { x: number, y: number };
+  isMobile: boolean;
+
+  featuresEnabled: boolean;
+  segwitEnabled: boolean;
+  rbfEnabled: boolean;
+  taprootEnabled: boolean;
 
   @ViewChild('graphContainer')
   graphContainer: ElementRef;
@@ -197,6 +203,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       }
 
       this.tx = tx;
+      this.setFeatures();
       this.isCached = true;
       if (tx.fee === undefined) {
         this.tx.fee = 0;
@@ -291,6 +298,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
           }
 
           this.tx = tx;
+          this.setFeatures();
           this.isCached = false;
           if (tx.fee === undefined) {
             this.tx.fee = 0;
@@ -428,9 +436,23 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       });
   }
 
+  setFeatures(): void {
+    if (this.tx) {
+      this.segwitEnabled = !this.tx.status.confirmed || this.tx.status.block_height >= 477120;
+      this.taprootEnabled = !this.tx.status.confirmed || this.tx.status.block_height >= 709632;
+      this.rbfEnabled = !this.tx.status.confirmed || this.tx.status.block_height > 399700;
+    } else {
+      this.segwitEnabled = false;
+      this.taprootEnabled = false;
+      this.rbfEnabled = false;
+    }
+    this.featuresEnabled = this.segwitEnabled || this.taprootEnabled || this.rbfEnabled;
+  }
+
   resetTransaction() {
     this.error = undefined;
     this.tx = null;
+    this.setFeatures();
     this.waitingForTransaction = false;
     this.isLoadingTx = true;
     this.rbfTransaction = undefined;
@@ -495,6 +517,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @HostListener('window:resize', ['$event'])
   setGraphSize(): void {
+    this.isMobile = window.innerWidth < 850;
     if (this.graphContainer) {
       setTimeout(() => {
         this.graphWidth = this.graphContainer.nativeElement.clientWidth;

frontend/src/app/components/tx-features/tx-features.component.html

@@ -1,4 +1,4 @@
-<ng-template [ngIf]="!tx.status.confirmed || tx.status.block_height >= 477120">
+<ng-template [ngIf]="segwitEnabled">
 <span *ngIf="segwitGains.realizedSegwitGains && !segwitGains.potentialSegwitGains; else segwitTwo" class="badge badge-success mr-1" i18n-ngbTooltip="ngbTooltip about segwit gains" ngbTooltip="This transaction saved {{ segwitGains.realizedSegwitGains * 100 | number:  '1.0-0' }}% on fees by using native SegWit" placement="bottom" i18n="tx-features.tag.segwit|SegWit">SegWit</span>
 <ng-template #segwitTwo>
   <span *ngIf="segwitGains.realizedSegwitGains && segwitGains.potentialSegwitGains; else potentialP2shSegwitGains" class="badge badge-warning mr-1" i18n-ngbTooltip="ngbTooltip about double segwit gains" ngbTooltip="This transaction saved {{ segwitGains.realizedSegwitGains * 100 | number:  '1.0-0' }}% on fees by using SegWit and could save {{ segwitGains.potentialSegwitGains * 100 | number : '1.0-0' }}% more by fully upgrading to native SegWit" placement="bottom" i18n="tx-features.tag.segwit|SegWit">SegWit</span>
@@ -8,7 +8,7 @@
 </ng-template>
 </ng-template>
 
-<ng-template [ngIf]="!tx.status.confirmed || tx.status.block_height >= 709632">
+<ng-template [ngIf]="taprootEnabled">
 <span *ngIf="segwitGains.realizedTaprootGains && !segwitGains.potentialTaprootGains; else notFullyTaproot" class="badge badge-success mr-1" i18n-ngbTooltip="Tooltip about fees saved with taproot" ngbTooltip="This transaction uses Taproot and thereby saved at least {{ segwitGains.realizedTaprootGains * 100 | number: '1.0-0' }}% on fees" placement="bottom" i18n="tx-features.tag.taproot|Taproot">Taproot</span>
 <ng-template #notFullyTaproot>
   <span *ngIf="segwitGains.realizedTaprootGains && segwitGains.potentialTaprootGains; else noTaproot" class="badge badge-warning mr-1" i18n-ngbTooltip="Tooltip about fees that saved and could be saved with taproot" ngbTooltip="This transaction uses Taproot and already saved at least {{ segwitGains.realizedTaprootGains * 100 | number: '1.0-0' }}% on fees, but could save an additional {{ segwitGains.potentialTaprootGains * 100 | number: '1.0-0' }}% by fully using Taproot" placement="bottom" i18n="tx-features.tag.taproot|Taproot">Taproot</span>
@@ -24,7 +24,7 @@
 </ng-template>
 </ng-template>
 
-<ng-template [ngIf]="!tx.status.confirmed || tx.status.block_height > 399700">
+<ng-template [ngIf]="rbfEnabled">
 <span *ngIf="isRbfTransaction; else rbfDisabled" class="badge badge-success" i18n-ngbTooltip="RBF tooltip" ngbTooltip="This transaction supports Replace-By-Fee (RBF) allowing fee bumping" placement="bottom" i18n="tx-features.tag.rbf|RBF">RBF</span>
 <ng-template #rbfDisabled><span class="badge badge-danger mr-1" i18n-ngbTooltip="RBF disabled tooltip" ngbTooltip="This transaction does NOT support Replace-By-Fee (RBF) and cannot be fee bumped using this method" placement="bottom"><del i18n="tx-features.tag.rbf|RBF">RBF</del></span></ng-template>
 </ng-template>

frontend/src/app/components/tx-features/tx-features.component.ts

@@ -21,12 +21,19 @@ export class TxFeaturesComponent implements OnChanges {
   isRbfTransaction: boolean;
   isTaproot: boolean;
 
+  segwitEnabled: boolean;
+  rbfEnabled: boolean;
+  taprootEnabled: boolean;
+
   constructor() { }
 
   ngOnChanges() {
     if (!this.tx) {
       return;
     }
+    this.segwitEnabled = !this.tx.status.confirmed || this.tx.status.block_height >= 477120;
+    this.taprootEnabled = !this.tx.status.confirmed || this.tx.status.block_height >= 709632;
+    this.rbfEnabled = !this.tx.status.confirmed || this.tx.status.block_height > 399700;
     this.segwitGains = calcSegwitFeeGains(this.tx);
     this.isRbfTransaction = this.tx.vin.some((v) => v.sequence < 0xfffffffe);
     this.isTaproot = this.tx.vin.some((v) => v.prevout && v.prevout.scriptpubkey_type === 'v1_p2tr');