multi-pool active accelerating details component

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

@@ -419,7 +419,11 @@
 <ng-template #detailsRight>
   <ng-container *ngTemplateOutlet="feeRow"></ng-container>
   <ng-container *ngTemplateOutlet="feeRateRow"></ng-container>
-  <ng-container *ngTemplateOutlet="effectiveRateRow"></ng-container>
+  @if (!isLoadingTx && !tx?.status?.confirmed && ((cpfpInfo && hasEffectiveFeeRate) || accelerationInfo)) {
+    <ng-container *ngTemplateOutlet="acceleratingRow"></ng-container>
+  } @else {
+    <ng-container *ngTemplateOutlet="effectiveRateRow"></ng-container>
+  }
   @if (tx?.status?.confirmed) {
     <ng-container *ngTemplateOutlet="minerRow"></ng-container>
   }
@@ -638,6 +642,15 @@
   }
 </ng-template>
 
+<ng-template #acceleratingRow>
+  <tr>
+    <td rowspan="2" colspan="2" style="padding: 0;">
+      <app-active-acceleration-box [tx]="tx" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats"></app-active-acceleration-box>
+    </td>
+  </tr>
+  <tr></tr>
+</ng-template>
+
 <ng-template #minerRow>
   @if (network === '') {
     @if (!isLoadingTx) {

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

@@ -32,6 +32,7 @@ import { isFeatureActive } from '../../bitcoin.utils';
 import { ServicesApiServices } from '../../services/services-api.service';
 import { EnterpriseService } from '../../services/enterprise.service';
 import { ZONE_SERVICE } from '../../injection-tokens';
+import { MiningService, MiningStats } from '../../services/mining.service';
 
 interface Pool {
   id: number;
@@ -98,6 +99,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   isAcceleration: boolean = false;
   filters: Filter[] = [];
   showCpfpDetails = false;
+  miningStats: MiningStats;
   fetchCpfp$ = new Subject<string>();
   fetchRbfHistory$ = new Subject<string>();
   fetchCachedTx$ = new Subject<string>();
@@ -151,6 +153,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     private priceService: PriceService,
     private storageService: StorageService,
     private enterpriseService: EnterpriseService,
+    private miningService: MiningService,
     private cd: ChangeDetectorRef,
     @Inject(ZONE_SERVICE) private zoneService: any,
   ) {}
@@ -696,6 +699,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     }
     if (cpfpInfo.acceleration) {
       this.tx.acceleration = cpfpInfo.acceleration;
+      this.tx.acceleratedBy = cpfpInfo.acceleratedBy;
       this.setIsAccelerated(firstCpfp);
     }
 
@@ -713,6 +717,12 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     if (this.isAcceleration && initialState) {
       this.showAccelerationSummary = false;
     }
+    if (this.isAcceleration) {
+      // this immediately returns cached stats if we fetched them recently
+      this.miningService.getMiningStats('1w').subscribe(stats => {
+        this.miningStats = stats;
+      });
+    }
   }
 
   setFeatures(): void {
@@ -790,6 +800,20 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
   }
 
+  getUnacceleratedFeeRate(tx: Transaction, accelerated: boolean): number {
+    if (accelerated) {
+      let ancestorVsize = tx.weight / 4;
+      let ancestorFee = tx.fee;
+      for (const ancestor of tx.ancestors || []) {
+        ancestorVsize += (ancestor.weight / 4);
+        ancestorFee += ancestor.fee;
+      }
+      return Math.min(tx.fee / (tx.weight / 4), (ancestorFee / ancestorVsize));
+    } else {
+      return tx.effectiveFeePerVsize;
+    }
+  }
+
   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

@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { TransactionComponent } from './transaction.component';
 import { SharedModule } from '../../shared/shared.module';
 import { TxBowtieModule } from '../tx-bowtie-graph/tx-bowtie.module';
+import { GraphsModule } from '../../graphs/graphs.module';
 
 const routes: Routes = [
   {
@@ -30,6 +31,7 @@ export class TransactionRoutingModule { }
     CommonModule,
     TransactionRoutingModule,
     SharedModule,
+    GraphsModule,
     TxBowtieModule,
   ],
   declarations: [