From 0f526f24cb15d117a1c15d172dddf74fe2e5f419 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 13 Jul 2024 07:59:59 +0000
Subject: [PATCH] show cpfp toggle on pending accelerations

---
 .../active-acceleration-box.component.html       | 16 +++++++++++++++-
 .../active-acceleration-box.component.ts         |  8 +++++++-
 .../transaction/transaction.component.html       |  2 +-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
index 19d5700a5..83ecad459 100644
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
@@ -18,7 +18,12 @@
         </div>
       </td>
       <td class="pie-chart" rowspan="2" *ngIf="!chartPositionLeft">
-        <ng-container *ngTemplateOutlet="pieChart"></ng-container>
+        <div class="d-flex justify-content-between align-items-start">
+          @if (hasCpfp) {
+            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
+          }
+          <ng-container *ngTemplateOutlet="pieChart"></ng-container>
+        </div>
       </td>
     </tr>
     <tr>
@@ -27,6 +32,15 @@
         <ng-container i18n="accelerator.x-of-hash-rate">{{ acceleratedByPercentage }} <span class="symbol hashrate-label">of hashrate</span></ng-container>
       </td>
     </tr>
+    @if (hasCpfp && chartPositionLeft) {
+      <tr>
+        <td colspan="3" class="pt-0">
+          <div class="d-flex justify-content-end align-items-start">
+            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
+          </div>
+        </td>
+      </tr>
+    }
   </tbody>
 </table>
 }
diff --git a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
index 9638532e8..46ba12816 100644
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, Output, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
 import { Transaction } from '../../../interfaces/electrs.interface';
 import { Acceleration, SinglePoolStats } from '../../../interfaces/node-api.interface';
 import { EChartsOption, PieSeriesOption } from '../../../graphs/echarts';
@@ -27,8 +27,10 @@ export class ActiveAccelerationBox implements OnChanges {
   @Input() accelerationInfo: Acceleration;
   @Input() miningStats: MiningStats;
   @Input() pools: number[];
+  @Input() hasCpfp: boolean = false;
   @Input() chartOnly: boolean = false;
   @Input() chartPositionLeft: boolean = false;
+  @Output() toggleCpfp = new EventEmitter();
 
   acceleratedByPercentage: string = '';
 
@@ -133,4 +135,8 @@ export class ActiveAccelerationBox implements OnChanges {
     }
     this.chartInstance = ec;
   }
+
+  onToggleCpfp(): void {
+    this.toggleCpfp.emit();
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 22916b242..c5a683c76 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -663,7 +663,7 @@
 <ng-template #acceleratingRow>
   <tr>
     <td rowspan="2" colspan="2" style="padding: 0;">
-      <app-active-acceleration-box [tx]="tx" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [chartPositionLeft]="isMobile"></app-active-acceleration-box>
+      <app-active-acceleration-box [tx]="tx" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [hasCpfp]="hasCpfp" (toggleCpfp)="showCpfpDetails = !showCpfpDetails" [chartPositionLeft]="isMobile"></app-active-acceleration-box>
     </td>
   </tr>
   <tr></tr>