Add Goggles filters tags to the transaction page

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

@@ -91,6 +91,7 @@
                     <span class="skeleton-loader"></span>
                   </td>
                 </tr>
+                <ng-container *ngTemplateOutlet="goggles"></ng-container>
               </tbody>
             </table>
           </div>
@@ -168,6 +169,7 @@
                     <app-tx-features [tx]="tx"></app-tx-features>
                   </td>
                 </tr>
+                <ng-container *ngTemplateOutlet="goggles"></ng-container>
               </tbody>
             </table>
           </div>
@@ -563,3 +565,17 @@
     </tbody>
   </table>
 </ng-template>
+
+<ng-template #goggles>
+  <tr *ngIf="((auditStatus && auditStatus.accelerated) || accelerationInfo || (tx && tx.acceleration)) || filters.length">
+    <td class="td-width">
+      <span class="goggles-icon"><app-svg-images name="goggles" width="100%" height="100%"></app-svg-images></span>
+    </td>
+    <td class="wrap-cell">
+      <span *ngIf="((auditStatus && auditStatus.accelerated) || accelerationInfo || (tx && tx.acceleration))" class="badge badge-accelerated mr-1" i18n="transaction.audit.accelerated">Accelerated</span>
+      <ng-container *ngFor="let filter of filters;">
+        <span class="badge badge-primary filter-tag mr-1">{{ filter.label }}</span>
+      </ng-container>
+    </td>
+  </tr>
+</ng-template>

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

@@ -310,3 +310,8 @@
     margin-left: 5px;
   }
 }
+
+.goggles-icon {
+  display: block;
+  width: 2.2em;
+}

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

@@ -21,6 +21,8 @@ import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
 import { StorageService } from '../../services/storage.service';
 import { seoDescriptionNetwork } from '../../shared/common.utils';
+import { getTransactionFlags } from '../../shared/transaction.utils';
+import { Filter, toFilters, TransactionFlags } from '../../shared/filters.utils';
 import { BlockExtended, CpfpInfo, RbfTree, MempoolPosition, DifficultyAdjustment, Acceleration } from '../../interfaces/node-api.interface';
 import { LiquidUnblinding } from './liquid-ublinding';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
@@ -89,6 +91,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   adjustedVsize: number | null;
   pool: Pool | null;
   auditStatus: AuditStatus | null;
+  filters: Filter[] = [];
   showCpfpDetails = false;
   fetchCpfp$ = new Subject<string>();
   fetchRbfHistory$ = new Subject<string>();
@@ -677,6 +680,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       this.segwitEnabled = !this.tx.status.confirmed || isFeatureActive(this.stateService.network, this.tx.status.block_height, 'segwit');
       this.taprootEnabled = !this.tx.status.confirmed || isFeatureActive(this.stateService.network, this.tx.status.block_height, 'taproot');
       this.rbfEnabled = !this.tx.status.confirmed || isFeatureActive(this.stateService.network, this.tx.status.block_height, 'rbf');
+      this.tx.flags = getTransactionFlags(this.tx);
+      this.filters = this.tx.flags ? toFilters(this.tx.flags).filter(f => f.txPage) : [];
     } else {
       this.segwitEnabled = false;
       this.taprootEnabled = false;
@@ -723,6 +728,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.hasEffectiveFeeRate = false;
     this.rbfInfo = null;
     this.rbfReplaces = [];
+    this.filters = [];
     this.showCpfpDetails = false;
     this.accelerationInfo = null;
     this.txInBlockIndex = null;