Visualize the CPFP transactions.

fixes #401

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

@@ -9,6 +9,7 @@ import { WebsocketService } from '../../services/websocket.service';
 import { AudioService } from 'src/app/services/audio.service';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { CpfpInfo } from 'src/app/interfaces/node-api.interface';
 
 @Component({
   selector: 'app-transaction',
@@ -27,6 +28,8 @@ export class TransactionComponent implements OnInit, OnDestroy {
   transactionTime = -1;
   subscription: Subscription;
   rbfTransaction: undefined | Transaction;
+  cpfpInfo: CpfpInfo | null;
+  showCpfpDetails = false;
 
   constructor(
     private route: ActivatedRoute,
@@ -77,6 +80,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
       if (tx.fee === undefined) {
         this.tx.fee = 0;
       }
+      this.tx.feePerVsize = +(tx.fee / (tx.weight / 4)).toFixed(1);
       this.isLoadingTx = false;
       this.error = undefined;
       this.waitingForTransaction = false;
@@ -97,6 +101,11 @@ export class TransactionComponent implements OnInit, OnDestroy {
       } else {
         if (tx.effectiveFeePerVsize) {
           this.stateService.markBlock$.next({ txFeePerVSize: tx.effectiveFeePerVsize });
+          this.cpfpInfo = {
+            ancestors: tx.ancestors,
+            bestDescendant: tx.bestDescendant,
+          };
+          tx.effectiveFeePerVsize = +(tx.effectiveFeePerVsize).toFixed(1);
         } else {
           this.apiService.getCpfpinfo$(this.tx.txid)  
             .subscribe((cpfpInfo) => {
@@ -108,9 +117,10 @@ export class TransactionComponent implements OnInit, OnDestroy {
                 totalFees += cpfpInfo.bestDescendant.fee;
               }
 
-              const effectiveFeePerVsize = totalFees / (totalWeight / 4);
+              const effectiveFeePerVsize = +(totalFees / (totalWeight / 4)).toFixed(1);
               this.tx.effectiveFeePerVsize = effectiveFeePerVsize;
               this.stateService.markBlock$.next({ txFeePerVSize: effectiveFeePerVsize });
+              this.cpfpInfo = cpfpInfo;
             });
         }
       }
@@ -183,6 +193,8 @@ export class TransactionComponent implements OnInit, OnDestroy {
     this.isLoadingTx = true;
     this.rbfTransaction = undefined;
     this.transactionTime = -1;
+    this.cpfpInfo = null;
+    this.showCpfpDetails = false;
     document.body.scrollTo(0, 0);
     this.leaveTransaction();
   }
@@ -192,6 +204,10 @@ export class TransactionComponent implements OnInit, OnDestroy {
     this.stateService.markBlock$.next({});
   }
 
+  roundToOneDecimal(cpfpTx: any): number {
+    return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
+  }
+
   ngOnDestroy() {
     this.subscription.unsubscribe();
     this.leaveTransaction();