Confirmation badge component, fix negative confirmations

This commit is contained in:
Mononaut
2023-05-30 16:36:49 -04:00
parent baeb200e8b
commit c49626aefc
13 changed files with 53 additions and 37 deletions

View File

@@ -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>

View File

@@ -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;
}
}
}

View File

@@ -85,6 +85,7 @@ import { SatsComponent } from './components/sats/sats.component';
import { TruncateComponent } from './components/truncate/truncate.component';
import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
import { TimestampComponent } from './components/timestamp/timestamp.component';
import { ConfirmationsComponent } from './components/confirmations/confirmations.component';
import { ToggleComponent } from './components/toggle/toggle.component';
import { GeolocationComponent } from '../shared/components/geolocation/geolocation.component';
import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.component';
@@ -175,6 +176,7 @@ import { ClockMempoolComponent } from '../components/clock/clock-mempool.compone
TruncateComponent,
SearchResultsComponent,
TimestampComponent,
ConfirmationsComponent,
ToggleComponent,
GeolocationComponent,
TestnetAlertComponent,
@@ -289,6 +291,7 @@ import { ClockMempoolComponent } from '../components/clock/clock-mempool.compone
TruncateComponent,
SearchResultsComponent,
TimestampComponent,
ConfirmationsComponent,
ToggleComponent,
GeolocationComponent,
PreviewTitleComponent,