Confirmation badge component, fix negative confirmations

frontend/src/app/shared/components/confirmations/confirmations.component.html

@@ -0,0 +1,13 @@
+<ng-template [ngIf]="confirmations">
+  <button type="button" class="btn btn-sm btn-success {{buttonClass}}">
+    <ng-container *ngTemplateOutlet="confirmations == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: confirmations}"></ng-container>
+    <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
+    <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
+  </button>
+</ng-template>
+<ng-template [ngIf]="!hideUnconfirmed && !confirmations && replaced">
+  <button type="button" class="btn btn-sm btn-danger {{buttonClass}}" i18n="transaction.unconfirmed|Transaction unconfirmed state">Replaced</button>
+</ng-template>
+<ng-template [ngIf]="!hideUnconfirmed && !confirmations && !replaced">
+  <button type="button" class="btn btn-sm btn-danger {{buttonClass}}" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
+</ng-template>

frontend/src/app/shared/components/confirmations/confirmations.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+
+@Component({
+  selector: 'app-confirmations',
+  templateUrl: './confirmations.component.html',
+  styleUrls: ['./confirmations.component.scss'],
+})
+export class ConfirmationsComponent implements OnChanges {
+  @Input() chainTip: number;
+  @Input() height: number;
+  @Input() replaced: boolean = false;
+  @Input() hideUnconfirmed: boolean = false;
+  @Input() buttonClass: string = '';
+
+  confirmations: number = 0;
+
+  ngOnChanges(): void {
+    if (this.chainTip != null && this.height != null) {
+      this.confirmations = Math.max(1, this.chainTip - this.height + 1);
+    } else {
+      this.confirmations = 0;
+    }
+  }
+}