Display tx data on bisq transaction page.

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html

@@ -27,17 +27,37 @@
                   <i> (<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since> ago)</i>
                 </td>
               </tr>
+              <tr>
+                <td class="td-width">Features</td>
+                <td>
+                  <app-tx-features *ngIf="tx; else loadingTx" [tx]="tx"></app-tx-features>
+                  <ng-template #loadingTx>
+                    <span class="skeleton-loader"></span>
+                  </ng-template>
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>
         <div class="col-sm">
           <table class="table table-borderless table-striped">
             <tbody>
-                <tr>
-                  <td class="td-width">Burnt</td>
-                  <td>
-                    {{ bisqTx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>)
-                </tr>
+              <tr>
+                <td class="td-width">Burnt</td>
+                <td>
+                  {{ bisqTx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>)
+              </tr>
+              <tr>
+                <td>Fee per vByte</td>
+                <td *ngIf="!isLoadingTx; else loadingTxFee">
+                  {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/vB
+                  &nbsp;
+                  <app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
+                </td>
+                <ng-template #loadingTxFee>
+                  <td><span class="skeleton-loader"></span></td>
+                </ng-template>
+              </tr>
             </tbody>
           </table>
         </div>

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.ts

@@ -4,7 +4,7 @@ import { BisqTransaction } from 'src/app/bisq/bisq.interfaces';
 import { switchMap, map, catchError } from 'rxjs/operators';
 import { of, Observable, Subscription } from 'rxjs';
 import { StateService } from 'src/app/services/state.service';
-import { Block } from 'src/app/interfaces/electrs.interface';
+import { Block, Transaction } from 'src/app/interfaces/electrs.interface';
 import { BisqApiService } from '../bisq-api.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { ElectrsApiService } from 'src/app/services/electrs-api.service';
@@ -17,10 +17,12 @@ import { HttpErrorResponse } from '@angular/common/http';
 })
 export class BisqTransactionComponent implements OnInit, OnDestroy {
   bisqTx: BisqTransaction;
+  tx: Transaction;
   latestBlock$: Observable<Block>;
   txId: string;
   price: number;
   isLoading = true;
+  isLoadingTx = true;
   error = null;
   subscription: Subscription;
 
@@ -37,6 +39,7 @@ export class BisqTransactionComponent implements OnInit, OnDestroy {
     this.subscription = this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
         this.isLoading = true;
+        this.isLoadingTx = true;
         this.error = null;
         document.body.scrollTo(0, 0);
         this.txId = params.get('id') || '';
@@ -71,21 +74,31 @@ export class BisqTransactionComponent implements OnInit, OnDestroy {
               return of(null);
             })
           );
-      })
+      }),
+      switchMap((tx) => {
+        if (!tx) {
+          return of(null);
+        }
+
+        if (tx.version) {
+          this.router.navigate(['/tx/', this.txId], { state: { data: tx, bsqTx: true }});
+          return of(null);
+        }
+
+        this.bisqTx = tx;
+        this.isLoading = false;
+
+        return this.electrsApiService.getTransaction$(this.txId);
+      }),
     )
     .subscribe((tx) => {
-      this.isLoading = false;
+      this.isLoadingTx = false;
 
       if (!tx) {
         return;
       }
 
-      if (tx.version) {
-        this.router.navigate(['/tx/', this.txId], { state: { data: tx, bsqTx: true }});
-        return;
-      }
-
-      this.bisqTx = tx;
+      this.tx = tx;
     },
     (error) => {
       this.error = error;

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

@@ -21,6 +21,9 @@ export class TxFeaturesComponent implements OnChanges {
   constructor() { }
 
   ngOnChanges() {
+    if (!this.tx) {
+      return;
+    }
     this.segwitGains = calcSegwitFeeGains(this.tx);
     this.isRbfTransaction = this.tx.vin.some((v) => v.sequence < 0xfffffffe);
   }