From de9fae5cd724bfc414fd70d8e7d541fe2fcca6b4 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sun, 4 Aug 2024 17:07:38 +0200
Subject: [PATCH] Show oob fees on tx details

---
 .../components/transaction/transaction.component.html    | 9 ++++++++-
 .../components/transaction/transaction.component.scss    | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 22141d5de..3e825eb57 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -606,7 +606,14 @@
   @if (!isLoadingTx) {
     <tr>
       <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
-      <td>{{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [blockConversion]="tx.price" [value]="tx.fee"></app-fiat></span></td>
+      <td>{{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> 
+        @if (accelerationInfo?.bidBoost) {
+          <span class="oobFees"> +{{ accelerationInfo.bidBoost | number }} </span><span class="symbol" i18n="shared.sat|sat">sat</span>
+        } @else if (tx.feeDelta) {
+          <span class="oobFees"> +{{ tx.feeDelta | number }} </span><span class="symbol" i18n="shared.sat|sat">sat</span>
+        }
+        <span class="fiat"><app-fiat [blockConversion]="tx.price" [value]="tx.fee + (accelerationInfo?.bidBoost || tx.feeDelta || 0)"></app-fiat></span>
+      </td>
     </tr>
   } @else {
     <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index 1427d64c5..232a2cacb 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -332,3 +332,7 @@
   top: -1px;
   margin-right: 2px;
 }
+
+.oobFees {
+  color: #905cf4;
+}
\ No newline at end of file