Confirmation badge component, fix negative confirmations

2023-05-30 16:36:49 -04:00 · 2023-05-30 16:36:49 -04:00 · c49626aefc
commit c49626aefc
parent baeb200e8b
13 changed files with 53 additions and 37 deletions
--- a/backend/src/api/websocket-handler.ts
+++ b/backend/src/api/websocket-handler.ts
@ -657,8 +657,8 @@ class WebsocketHandler {

      if (client['track-tx']) {
        const trackTxid = client['track-tx'];
-        if (txIds.indexOf(trackTxid) > -1) {
-          response['txConfirmed'] = 'true';
+        if (trackTxid && txIds.indexOf(trackTxid) > -1) {
+          response['txConfirmed'] = JSON.stringify(trackTxid);
        } else {
          const mempoolTx = _memPool[trackTxid];
          if (mempoolTx && mempoolTx.position) {
--- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
+++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
@ -15,11 +15,9 @@
      </span>
      <span class="grow"></span>
      <div class="container-buttons">
-        <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right">
-          <ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></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>
+        <div *ngIf="(latestBlock$ | async) as latestBlock">
+          <app-confirmations [chainTip]="latestBlock?.height" [height]="bisqTx.blockHeight" [hideUnconfirmed]="true" buttonClass="float-right"></app-confirmations>
+        </div>
      </div>
    </div>
    
--- a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html
+++ b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html
@ -70,11 +70,7 @@

    <div class="btn-container">
      <span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
-        <button type="button" class="btn btn-sm btn-success mt-2">
-          <ng-container *ngTemplateOutlet="latestBlock.height - tx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.blockHeight + 1}"></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>
+        <app-confirmations [chainTip]="latestBlock?.height" [height]="tx.blockHeight" [hideUnconfirmed]="true" buttonClass="mt-2"></app-confirmations>
        &nbsp;
      </span>
      <button type="button" class="btn btn-sm btn-primary mt-2" (click)="switchCurrency()">
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@ -18,19 +18,7 @@
      </span>

      <div class="container-buttons">
-        <ng-template [ngIf]="tx?.status?.confirmed">
-          <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success">
-            <ng-container *ngTemplateOutlet="latestBlock.height - tx.status.block_height + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.status.block_height + 1}"></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]="tx && !tx?.status?.confirmed && replaced">
-          <button type="button" class="btn btn-sm btn-danger" i18n="transaction.unconfirmed|Transaction unconfirmed state">Replaced</button>
-        </ng-template>
-        <ng-template [ngIf]="tx && !tx?.status?.confirmed && !replaced">
-          <button type="button" class="btn btn-sm btn-danger" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
-        </ng-template>
+        <app-confirmations [chainTip]="latestBlock?.height" [height]="tx?.status?.block_height" [replaced]="replaced"></app-confirmations>
      </div>
    </ng-container>
  </div>
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@ -391,7 +391,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
    this.blocksSubscription = this.stateService.blocks$.subscribe(([block, txConfirmed]) => {
      this.latestBlock = block;

-      if (txConfirmed && this.tx && !this.tx.status.confirmed) {
+      if (txConfirmed && this.tx && !this.tx.status.confirmed && txConfirmed === this.tx.txid) {
        this.tx.status = {
          confirmed: true,
          block_height: block.height,
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@ -298,14 +298,7 @@

      <div class="float-right">
        <ng-container *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
-          <button *ngIf="tx.status.confirmed; else unconfirmedButton" type="button" class="btn btn-sm btn-success mt-2">
-            <ng-container *ngTemplateOutlet="latestBlock.height - tx.status.block_height + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.status.block_height + 1}"></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 #unconfirmedButton>
-            <button type="button" class="btn btn-sm btn-danger mt-2" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
-          </ng-template>
+          <app-confirmations [chainTip]="latestBlock?.height" [height]="tx?.status?.block_height" buttonClass="mt-2"></app-confirmations>
        </ng-container>
        <button *ngIf="address === ''; else viewingAddress" type="button" class="btn btn-sm btn-primary mt-2 ml-2" (click)="switchCurrency()">
          <ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && haveBlindedOutputValues(tx)" [ngIfElse]="defaultAmount" i18n="shared.confidential">Confidential</ng-template>
--- a/frontend/src/app/interfaces/websocket.interface.ts
+++ b/frontend/src/app/interfaces/websocket.interface.ts
@ -6,7 +6,7 @@ export interface WebsocketResponse {
  block?: BlockExtended;
  blocks?: BlockExtended[];
  conversions?: any;
-  txConfirmed?: boolean;
+  txConfirmed?: string | boolean;
  historicalDate?: string;
  mempoolInfo?: MempoolInfo;
  vBytesPerSecond?: number;
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@ -92,7 +92,7 @@ export class StateService {

  networkChanged$ = new ReplaySubject<string>(1);
  lightningChanged$ = new ReplaySubject<boolean>(1);
-  blocks$: ReplaySubject<[BlockExtended, boolean]>;
+  blocks$: ReplaySubject<[BlockExtended, string | boolean]>;
  transactions$ = new ReplaySubject<TransactionStripped>(6);
  conversions$ = new ReplaySubject<any>(1);
  bsqPrice$ = new ReplaySubject<number>(1);
--- a/frontend/src/app/services/websocket.service.ts
+++ b/frontend/src/app/services/websocket.service.ts
@ -258,7 +258,7 @@ export class WebsocketService {
    if (response.block) {
      if (response.block.height > this.stateService.latestBlockHeight) {
        this.stateService.updateChainTip(response.block.height);
-        this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
+        this.stateService.blocks$.next([response.block, response.txConfirmed]);
      }

      if (response.txConfirmed) {
--- a/frontend/src/app/shared/components/confirmations/confirmations.component.html
+++ b/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>
--- a/frontend/src/app/shared/components/confirmations/confirmations.component.scss
+++ b/frontend/src/app/shared/components/confirmations/confirmations.component.scss
--- a/frontend/src/app/shared/components/confirmations/confirmations.component.ts
+++ b/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;
+    }
+  }
+}
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@ -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,