Refactored "features" and "fee rating" from transaction into components.

frontend/src/app/components/tx-features/tx-features.component.html

@@ -0,0 +1,4 @@
+<span *ngIf="segwitGains.realizedGains && !segwitGains.potentialBech32Gains" class="badge badge-success mr-1" ngbTooltip="This transaction saved {{ segwitGains.realizedGains * 100 | number:  '1.0-0' }}% on fees by using native SegWit-Bech32" placement="bottom">SegWit</span>
+<span *ngIf="segwitGains.realizedGains && segwitGains.potentialBech32Gains" class="badge badge-warning mr-1" ngbTooltip="This transaction saved {{ segwitGains.realizedGains * 100 | number:  '1.0-0' }}% on fees by using SegWit and could save {{ segwitGains.potentialBech32Gains * 100 | number : '1.0-0' }}% more by fully upgrading to native SegWit-Bech32" placement="bottom">SegWit</span>
+<span *ngIf="segwitGains.potentialP2shGains" class="badge badge-danger mr-1" ngbTooltip="This transaction could save {{ segwitGains.potentialBech32Gains * 100 | number : '1.0-0' }}% on fees by upgrading to native SegWit-Bech32 or {{ segwitGains.potentialP2shGains * 100 | number:  '1.0-0' }}% by upgrading to SegWit-P2SH" placement="bottom"><del>SegWit</del></span>
+<span *ngIf="isRbfTransaction" class="badge badge-success" ngbTooltip="This transaction support Replace-By-Fee (RBF) allowing fee bumping" placement="bottom">RBF</span>

frontend/src/app/components/tx-features/tx-features.component.ts

@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy, OnChanges, Input } from '@angular/core';
+import { calcSegwitFeeGains } from 'src/app/bitcoin.utils';
+import { Transaction } from 'src/app/interfaces/electrs.interface';
+
+@Component({
+  selector: 'app-tx-features',
+  templateUrl: './tx-features.component.html',
+  styleUrls: ['./tx-features.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TxFeaturesComponent implements OnChanges {
+  @Input() tx: Transaction;
+
+  segwitGains = {
+    realizedGains: 0,
+    potentialBech32Gains: 0,
+    potentialP2shGains: 0,
+  };
+  isRbfTransaction: boolean;
+
+  constructor() { }
+
+  ngOnChanges() {
+    this.segwitGains = calcSegwitFeeGains(this.tx);
+    this.isRbfTransaction = this.tx.vin.some((v) => v.sequence < 0xfffffffe);
+  }
+}