Bisq stats page.

BSQ prices.

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

@@ -22,7 +22,7 @@
                 </a>
               </td>
               <td class="text-right nowrap">
-                {{ input.bsqAmount / 100 | number: '1.2-2' }} BSQ
+                <app-bsq-amount [bsq]="input.bsqAmount"></app-bsq-amount>
               </td>
             </tr>
           </ng-template>
@@ -42,7 +42,7 @@
                 </a>
               </td>
               <td class="text-right nowrap">
-                {{ output.bsqAmount / 100 | number: '1.2-2' }} BSQ
+                <app-bsq-amount [bsq]="output.bsqAmount"></app-bsq-amount>
               </td>
               <td class="pl-1 arrow-td">
                 <i *ngIf="!output.spentInfo; else spent" class="arrow green"></i>
@@ -57,4 +57,21 @@
     </div>
   </div>
 
+  <div>
+    <div class="float-left mt-2-5" *ngIf="showConfirmations && tx.burntFee">
+      Fee: {{ tx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="tx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>)
+    </div>
+
+    <div class="float-right">
+      <span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
+        <button type="button" class="btn btn-sm btn-success mt-2">{{ latestBlock.height - tx.blockHeight + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.blockHeight + 1 > 1">s</ng-container></button>
+        &nbsp;
+      </span>
+      <button type="button" class="btn btn-sm btn-primary mt-2" (click)="switchCurrency()">
+        <app-bsq-amount [bsq]="totalOutput"></app-bsq-amount>
+      </button>
+    </div>
+    <div class="clearfix"></div>
+  </div>
+
 </div>

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

@@ -1,5 +1,9 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
 import { BisqTransaction } from 'src/app/bisq/bisq.interfaces';
+import { StateService } from 'src/app/services/state.service';
+import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { Block } from 'src/app/interfaces/electrs.interface';
 
 @Component({
   selector: 'app-bisq-transfers',
@@ -7,13 +11,32 @@ import { BisqTransaction } from 'src/app/bisq/bisq.interfaces';
   styleUrls: ['./bisq-transfers.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class BisqTransfersComponent {
+export class BisqTransfersComponent implements OnInit, OnChanges {
   @Input() tx: BisqTransaction;
+  @Input() showConfirmations = false;
 
-  constructor() { }
+  totalOutput: number;
+  latestBlock$: Observable<Block>;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
 
   trackByIndexFn(index: number) {
     return index;
   }
 
+  ngOnInit() {
+    this.latestBlock$ = this.stateService.blocks$.pipe(map(([block]) => block));
+  }
+
+  ngOnChanges() {
+    this.totalOutput = this.tx.outputs.filter((output) => output.isVerified).reduce((acc, output) => acc + output.bsqAmount, 0);;
+  }
+
+  switchCurrency() {
+    const oldvalue = !this.stateService.viewFiat$.value;
+    this.stateService.viewFiat$.next(oldvalue);
+  }
+
 }