Move 'related transactions' to dedicated component

frontend/src/app/components/transaction/cpfp-info.component.html

@@ -0,0 +1,56 @@
+<br>
+<div class="title">
+  <h2 class="text-left" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
+</div>
+<div class="box cpfp-details">
+  <table class="table table-fixed table-borderless table-striped">
+    <thead>
+      <tr>
+        <th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
+        <th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
+        <th *only-vsize class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
+        <th *only-weight class="d-none d-lg-table-cell" i18n="transaction.weight|Transaction Weight">Weight</th>
+        <th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
+        <th class="d-none d-lg-table-cell"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <ng-template [ngIf]="cpfpInfo?.descendants?.length">
+        <tr *ngFor="let cpfpTx of cpfpInfo.descendants">
+          <td><span class="badge badge-primary" i18n="transaction.descendant|Descendant">Descendant</span></td>
+          <td>
+            <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
+          </td>
+          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
+          <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
+          <td class="d-none d-lg-table-cell"><fa-icon  *ngIf="roundToOneDecimal(cpfpTx) > roundToOneDecimal(tx)"  class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
+        </tr>
+      </ng-template>
+      <ng-template [ngIf]="cpfpInfo?.bestDescendant">
+        <tr>
+          <td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
+          <td class="txids">
+            <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
+          </td>
+          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
+          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight | wuBytes: 2"></td>
+          <td><app-fee-rate [fee]="cpfpInfo.bestDescendant.fee" [weight]="cpfpInfo.bestDescendant.weight"></app-fee-rate></td>
+          <td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
+        </tr>
+      </ng-template>
+      <ng-template [ngIf]="cpfpInfo?.ancestors?.length">
+        <tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
+          <td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
+          <td class="txids">
+            <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
+          </td>
+          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
+          <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
+          <td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
+        </tr>
+      </ng-template>
+    </tbody>
+  </table>
+</div>

frontend/src/app/components/transaction/cpfp-info.component.scss

@@ -0,0 +1,32 @@
+.title {
+  h2 {
+    line-height: 1;
+    margin: 0;
+    padding-bottom: 5px;
+  }
+}
+
+.cpfp-details {
+  .txids {
+    width: 60%;
+  }
+
+  @media (max-width: 500px) {
+    .txids {
+      width: 40%;
+    }
+  }
+}
+
+.arrow-green {
+	color: var(--success);
+}
+
+.arrow-red {
+	color: var(--red);
+}
+
+.badge {
+	position: relative;
+	top: -1px;
+}

frontend/src/app/components/transaction/cpfp-info.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+import { CpfpInfo } from '@interfaces/node-api.interface';
+import { Transaction } from '@interfaces/electrs.interface';
+
+@Component({
+  selector: 'app-cpfp-info',
+  templateUrl: './cpfp-info.component.html',
+  styleUrls: ['./cpfp-info.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CpfpInfoComponent implements OnInit {
+  @Input() cpfpInfo: CpfpInfo;
+  @Input() tx: Transaction;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  roundToOneDecimal(cpfpTx: any): number {
+    return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
+  }
+}

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

@@ -66,64 +66,7 @@
   <ng-template [ngIf]="!isLoadingTx && !error">
 
     <!-- CPFP Details -->
-    <ng-template [ngIf]="showCpfpDetails">
+    <app-cpfp-info *ngIf="showCpfpDetails" [cpfpInfo]="cpfpInfo" [tx]="tx"></app-cpfp-info>
-      <br>
-      <div class="title">
-        <h2 class="text-left" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
-      </div>
-      <div class="box cpfp-details">
-        <table class="table table-fixed table-borderless table-striped">
-          <thead>
-            <tr>
-              <th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
-              <th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
-              <th *only-vsize class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
-              <th *only-weight class="d-none d-lg-table-cell" i18n="transaction.weight|Transaction Weight">Weight</th>
-              <th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
-              <th class="d-none d-lg-table-cell"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <ng-template [ngIf]="cpfpInfo?.descendants?.length">
-              <tr *ngFor="let cpfpTx of cpfpInfo.descendants">
-                <td><span class="badge badge-primary" i18n="transaction.descendant|Descendant">Descendant</span></td>
-                <td>
-                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
-                </td>
-                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
-                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
-                <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
-                <td class="d-none d-lg-table-cell"><fa-icon  *ngIf="roundToOneDecimal(cpfpTx) > roundToOneDecimal(tx)"  class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
-              </tr>
-            </ng-template>
-            <ng-template [ngIf]="cpfpInfo?.bestDescendant">
-              <tr>
-                <td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
-                <td class="txids">
-                  <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
-                </td>
-                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
-                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight | wuBytes: 2"></td>
-                <td><app-fee-rate [fee]="cpfpInfo.bestDescendant.fee" [weight]="cpfpInfo.bestDescendant.weight"></app-fee-rate></td>
-                <td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
-              </tr>
-            </ng-template>
-            <ng-template [ngIf]="cpfpInfo?.ancestors?.length">
-              <tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
-                <td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
-                <td class="txids">
-                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
-                </td>
-                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
-                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
-                <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
-                <td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
-              </tr>
-            </ng-template>
-          </tbody>
-        </table>
-      </div>
-    </ng-template>
 
     <!-- Accelerator -->
     <ng-container *ngIf="!tx?.status?.confirmed && showAccelerationSummary && (ETA$ | async) as eta;">

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

@@ -227,18 +227,6 @@
   }
 }
 
-.cpfp-details {
-  .txids {
-    width: 60%;
-  }
-
-  @media (max-width: 500px) {
-    .txids {
-      width: 40%;
-    }
-  }
-}
-
 .tx-list {
   .alert-link {
     display: block;

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

@@ -1054,10 +1054,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.stateService.markBlock$.next({});
   }
 
-  roundToOneDecimal(cpfpTx: any): number {
-    return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
-  }
-
   setupGraph() {
     this.maxInOut = Math.min(this.inOutLimit, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
     this.graphHeight = this.graphExpanded ? this.maxInOut * 15 : Math.min(360, this.maxInOut * 80);

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

@@ -10,6 +10,7 @@ import { GraphsModule } from '@app/graphs/graphs.module';
 import { AccelerateCheckout } from '@components/accelerate-checkout/accelerate-checkout.component';
 import { AccelerateFeeGraphComponent } from '@components/accelerate-checkout/accelerate-fee-graph.component';
 import { TransactionRawComponent } from '@components/transaction/transaction-raw.component';
+import { CpfpInfoComponent } from '@components/transaction/cpfp-info.component';
 
 const routes: Routes = [
   {
@@ -55,12 +56,14 @@ export class TransactionRoutingModule { }
     AccelerateCheckout,
     AccelerateFeeGraphComponent,
     TransactionRawComponent,
+    CpfpInfoComponent,
   ],
   exports: [
     TransactionComponent,
     TransactionDetailsComponent,
     AccelerateCheckout,
     AccelerateFeeGraphComponent,
+    CpfpInfoComponent,
   ]
 })
 export class TransactionModule { }