display indexed cpfp info on non-mempool txs

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

@@ -156,7 +156,20 @@
             </tr>
           </thead>
           <tbody>
-            <ng-template [ngIf]="cpfpInfo.bestDescendant">
+            <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><a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
+                    <span class="d-inline d-lg-none">{{ cpfpTx.txid | shortenString : 8 }}</span>
+                    <span class="d-none d-lg-inline">{{ cpfpTx.txid }}</span>
+                  </a>
+                </td>
+                <td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+                <td>{{ cpfpTx.fee / (cpfpTx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></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>
@@ -170,7 +183,7 @@
                 <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">
+            <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><a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
@@ -468,11 +481,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.bestDescendant && !cpfpInfo.ancestors.length) || !cpfpInfo)" [tx]="tx"></app-tx-fee-rating>
+            <app-tx-fee-rating *ngIf="tx.fee && ((cpfpInfo && !cpfpInfo?.descendants?.length && !cpfpInfo?.bestDescendant && !cpfpInfo?.ancestors?.length) || !cpfpInfo)" [tx]="tx"></app-tx-fee-rating>
           </ng-template>
         </td>
       </tr>
-      <tr *ngIf="cpfpInfo && (cpfpInfo.bestDescendant || cpfpInfo.ancestors.length)">
+      <tr *ngIf="cpfpInfo && (cpfpInfo?.bestDescendant || cpfpInfo?.descendants?.length || cpfpInfo?.ancestors?.length)">
         <td i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
         <td>
           <div class="effective-fee-container">

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

@@ -117,25 +117,31 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         if (!this.tx) {
           return;
         }
-        const lowerFeeParents = cpfpInfo.ancestors.filter(
+        if (cpfpInfo.effectiveFeePerVsize) {
-          (parent) => parent.fee / (parent.weight / 4) < this.tx.feePerVsize
+          this.tx.effectiveFeePerVsize = cpfpInfo.effectiveFeePerVsize;
-        );
+        } else {
-        let totalWeight =
+          const lowerFeeParents = cpfpInfo.ancestors.filter(
-          this.tx.weight +
+            (parent) => parent.fee / (parent.weight / 4) < this.tx.feePerVsize
-          lowerFeeParents.reduce((prev, val) => prev + val.weight, 0);
+          );
-        let totalFees =
+          let totalWeight =
-          this.tx.fee +
+            this.tx.weight +
-          lowerFeeParents.reduce((prev, val) => prev + val.fee, 0);
+            lowerFeeParents.reduce((prev, val) => prev + val.weight, 0);
+          let totalFees =
+            this.tx.fee +
+            lowerFeeParents.reduce((prev, val) => prev + val.fee, 0);
 
-        if (cpfpInfo.bestDescendant) {
+          if (cpfpInfo?.bestDescendant) {
-          totalWeight += cpfpInfo.bestDescendant.weight;
+            totalWeight += cpfpInfo?.bestDescendant.weight;
-          totalFees += cpfpInfo.bestDescendant.fee;
+            totalFees += cpfpInfo?.bestDescendant.fee;
+          }
+
+          this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
+        }
+        if (!this.tx.status.confirmed) {
+          this.stateService.markBlock$.next({
+            txFeePerVSize: this.tx.effectiveFeePerVsize,
+          });
         }
-
-        this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
-        this.stateService.markBlock$.next({
-          txFeePerVSize: this.tx.effectiveFeePerVsize,
-        });
         this.cpfpInfo = cpfpInfo;
       });
 
@@ -239,6 +245,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
             this.stateService.markBlock$.next({
               blockHeight: tx.status.block_height,
             });
+            this.fetchCpfp$.next(this.tx.txid);
           } else {
             if (tx.cpfpChecked) {
               this.stateService.markBlock$.next({

frontend/src/app/interfaces/node-api.interface.ts

@@ -22,7 +22,9 @@ interface BestDescendant {
 
 export interface CpfpInfo {
   ancestors: Ancestor[];
-  bestDescendant: BestDescendant | null;
+  descendants?: Ancestor[];
+  bestDescendant?: BestDescendant | null;
+  effectiveFeePerVsize?: number;
 }
 
 export interface DifficultyAdjustment {