Adding fee rating to confirmed transactions.

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

@@ -45,12 +45,18 @@
             </tr>
             <ng-template [ngIf]="tx.fee">
               <tr>
-                <td>Fee</td>
+                <td>Fee per vByte</td>
-                <td>{{ tx.fee | number }} sats (<app-fiat [value]="tx.fee"></app-fiat>)</td>
+                <td>
+                  {{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sats/vB
+                  &nbsp;
+                  <span *ngIf="feeRating === 1" class="badge badge-success">Optimal</span>
+                  <span *ngIf="feeRating === 2" class="badge badge-warning">Overpaid {{ overpaidTimes }}x</span>
+                  <span *ngIf="feeRating === 3" class="badge badge-danger">Overpaid {{ overpaidTimes }}x</span>
+                </td>
               </tr>
               <tr>
-                <td>Fee per vByte</td>
+                <td>Fee</td>
-                <td>{{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sats/vB</td>
+                <td>{{ tx.fee | number }} sats (<app-fiat [value]="tx.fee"></app-fiat>)</td>
               </tr>
             </ng-template>
           </tbody>

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { switchMap } from 'rxjs/operators';
+import { switchMap, filter } from 'rxjs/operators';
 import { Transaction, Block } from '../../interfaces/electrs.interface';
 import { of } from 'rxjs';
 import { StateService } from '../../services/state.service';
@@ -17,6 +17,8 @@ import { ApiService } from 'src/app/services/api.service';
 export class TransactionComponent implements OnInit, OnDestroy {
   tx: Transaction;
   txId: string;
+  feeRating: number;
+  overpaidTimes: number;
   isLoadingTx = true;
   error: any = undefined;
   latestBlock: Block;
@@ -41,6 +43,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
       switchMap((params: ParamMap) => {
         this.txId = params.get('id') || '';
         this.error = undefined;
+        this.feeRating = undefined;
         this.isLoadingTx = true;
         this.transactionTime = -1;
         document.body.scrollTo(0, 0);
@@ -58,6 +61,8 @@ export class TransactionComponent implements OnInit, OnDestroy {
       if (!tx.status.confirmed) {
         this.websocketService.startTrackTransaction(tx.txid);
         this.getTransactionTime();
+      } else {
+        this.findBlockAndSetFeeRating();
       }
     },
     (error) => {
@@ -77,6 +82,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
           block_time: block.timestamp,
         };
         this.audioService.playSound('magic');
+        this.findBlockAndSetFeeRating();
       });
   }
 
@@ -87,6 +93,24 @@ export class TransactionComponent implements OnInit, OnDestroy {
       });
   }
 
+  findBlockAndSetFeeRating() {
+    this.stateService.blocks$
+      .pipe(filter((block) => block.height === this.tx.status.block_height))
+      .subscribe((block) => {
+        const feePervByte = this.tx.fee / (this.tx.weight / 4);
+
+        if (feePervByte <= block.feeRange[Math.round(block.feeRange.length * 0.5)]) {
+          this.feeRating = 1;
+        } else {
+          this.feeRating = 2;
+          this.overpaidTimes = Math.round(feePervByte / block.medianFee);
+          if (this.overpaidTimes > 10) {
+            this.feeRating = 3;
+          }
+        }
+      });
+  }
+
   ngOnDestroy() {
     this.websocketService.startTrackTransaction('stop');
   }