Merge branch 'master' into nymkappa/accel-button

2023-09-12 14:05:56 +02:00
parent 89be841e64 827b0f6ad1
commit 596d55e413
150 changed files with 5144 additions and 1630 deletions
--- a/frontend/src/app/components/transaction/transaction-preview.component.ts
+++ b/frontend/src/app/components/transaction/transaction-preview.component.ts
@@ -15,6 +15,7 @@ import { CacheService } from '../../services/cache.service';
 import { OpenGraphService } from '../../services/opengraph.service';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
 import { CpfpInfo } from '../../interfaces/node-api.interface';
 import { LiquidUnblinding } from './liquid-ublinding';

@@ -87,6 +88,7 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy {
          this.seoService.setTitle(
            $localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`
          );
+          this.seoService.setDescription($localize`:@@meta.description.bitcoin.transaction:Get real-time status, addresses, fees, script info, and more for ${this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet'?'Liquid':'Bitcoin'}${seoDescriptionNetwork(this.stateService.network)} transaction with txid {txid}.`);
          this.resetTransaction();
          return merge(
            of(true),
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -6,6 +6,13 @@
      <app-truncate [text]="rbfTransaction.txid" [lastChars]="12" [link]="['/tx/' | relativeUrl, rbfTransaction.txid]"></app-truncate>
    </div>

+    <div *ngIf="acceleratorAvailable && accelerateCtaType === 'alert' && !tx?.status?.confirmed && !tx?.acceleration" class="alert alert-mempool alert-dismissible" role="alert">
+      <span><a class="link accelerator" (click)="onAccelerateClicked()">Accelerate</a> this transaction using Mempool Accelerator &trade;</span>
+      <button type="button" class="close" aria-label="Close" (click)="dismissAccelAlert()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+
    <ng-container *ngIf="!rbfTransaction || rbfTransaction?.size || tx">
      <h1 i18n="shared.transaction">Transaction</h1>

@@ -66,12 +73,22 @@
          <div class="col-sm">
            <ng-container *ngTemplateOutlet="feeTable"></ng-container>
          </div>
-
        </div>
      </div>

    </ng-template>

+    <!-- Accelerator -->
+    <ng-container *ngIf="!tx?.status?.confirmed && showAccelerationSummary">
+      <div class="title mt-3" id="acceleratePreviewAnchor">
+        <h2>Accelerate</h2>
+      </div>
+      <div class="box">
+        <app-accelerate-preview [tx]="tx" [scrollEvent]="scrollIntoAccelPreview"></app-accelerate-preview>
+      </div>
+
+    </ng-container>
+
    <ng-template #unconfirmedTemplate>

      <div class="box">
@@ -92,17 +109,16 @@
                  </ng-template>
                </ng-template>
                <tr *ngIf="!replaced && !isCached">
-                  <td class="td-width" i18n="transaction.eta|Transaction ETA">ETA</td>
+                  <td class="td-width align-items-center align-middle" i18n="transaction.eta|Transaction ETA">ETA</td>
                  <td>
                    <ng-template [ngIf]="this.mempoolPosition?.block == null" [ngIfElse]="estimationTmpl">
                      <span class="skeleton-loader"></span>
                    </ng-template>
                    <ng-template #estimationTmpl>
                      <ng-template [ngIf]="this.mempoolPosition.block >= 7" [ngIfElse]="belowBlockLimit">
-                        <span class="eta d-flex">
+                        <span [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'etaDeepMempool d-flex justify-content-end align-items-center' : ''">
                          <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
-                          <span class="ml-2"></span>
-                          <a *ngIf="!tx.acceleration && stateService.env.OFFICIAL_MEMPOOL_SPACE && stateService.env.ACCELERATOR" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn badge badge-primary accelerate ml-auto" i18n="transaction.accelerate|Accelerate button label">Accelerate</a>
+                          <a *ngIf="!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerateDeepMempool" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
                        </span>
                      </ng-template>
                      <ng-template #belowBlockLimit>
@@ -110,10 +126,9 @@
                          <app-time kind="until" [time]="(60 * 1000 * this.mempoolPosition.block) + now" [fastRender]="false" [fixedRender]="true"></app-time>
                        </ng-template>
                        <ng-template #timeEstimateDefault>
-                          <span class="d-flex">
+                          <span class="eta justify-content-end" [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'd-flex align-items-center' : ''">
                            <app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.timeAvg * (this.mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
-                            <span class="ml-2"></span>
-                            <a *ngIf="!tx.acceleration && stateService.env.OFFICIAL_MEMPOOL_SPACE && stateService.env.ACCELERATOR" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn badge badge-primary accelerate ml-auto" i18n="transaction.accelerate|Accelerate button label">Accelerate</a>
+                            <a *ngIf="!tx.acceleration && cceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
                          </span>
                        </ng-template>
                      </ng-template>
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -130,7 +130,7 @@
 }

 .table {
-  	tr td {
+  tr td {
 		padding: 0.75rem 0.5rem;
 		@media (min-width: 576px) {
 			padding: 0.75rem 0.75rem;
@@ -138,7 +138,7 @@
 		&:last-child {
 			text-align: right;
 			@media (min-width: 850px) {
-			text-align: left;
+        text-align: left;
 			}
 		}
 		.btn {
@@ -218,21 +218,52 @@
  }
 }

+.link.accelerator {
+  cursor: pointer;
+}
+
 .eta {
  display: flex;
-  justify-content: end;
  flex-wrap: wrap;
  align-content: center;
  @media (min-width: 850px) {
-    justify-content: space-between;
+    justify-content: left !important;    
  }
 }

 .accelerate {
+  display: flex !important;
  align-self: auto;
  margin-top: 3px;
-  @media (min-width: 850px) {
-    justify-self: start;
+  margin-left: auto;
+  background-color: #653b9c;
+  @media (max-width: 849px) {
+    margin-left: 5px;
+  }
+}
+
+.etaDeepMempool {
+  display: flex !important;
+  justify-content: end;
+  flex-wrap: wrap;
+  align-content: center;
+  @media (max-width: 995px) {
+    justify-content: left !important;
+  }
+  @media (max-width: 849px) {
+    justify-content: right !important;
+  }
+}
+
+.accelerateDeepMempool {
+  align-self: auto;
+  margin-top: 3px;
+  margin-left: auto;
+  background-color: #653b9c;
+  @media (max-width: 995px) {
    margin-left: 0px;
  }
-}
+  @media (max-width: 849px) {
+    margin-left: 5px;
+  }
+}
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -19,6 +19,8 @@ import { WebsocketService } from '../../services/websocket.service';
 import { AudioService } from '../../services/audio.service';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
+import { StorageService } from '../../services/storage.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
 import { BlockExtended, CpfpInfo, RbfTree, MempoolPosition, DifficultyAdjustment } from '../../interfaces/node-api.interface';
 import { LiquidUnblinding } from './liquid-ublinding';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
@@ -88,6 +90,10 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
  rbfEnabled: boolean;
  taprootEnabled: boolean;
  hasEffectiveFeeRate: boolean;
+  accelerateCtaType: 'alert' | 'button' = 'alert';
+  acceleratorAvailable: boolean = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
+  showAccelerationSummary = false;
+  scrollIntoAccelPreview = false;

  @ViewChild('graphContainer')
  graphContainer: ElementRef;
@@ -104,14 +110,22 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
    private apiService: ApiService,
    private seoService: SeoService,
    private priceService: PriceService,
+    private storageService: StorageService
  ) {}

  ngOnInit() {
+    this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
+
    this.websocketService.want(['blocks', 'mempool-blocks']);
    this.stateService.networkChanged$.subscribe(
-      (network) => (this.network = network)
+      (network) => {
+        this.network = network;
+        this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
+      }
    );

+    this.accelerateCtaType = (this.storageService.getValue('accel-cta-type') as 'alert' | 'button') ?? 'alert';
+
    this.setFlowEnabled();
    this.flowPrefSubscription = this.stateService.hideFlow.subscribe((hide) => {
      this.hideFlow = !!hide;
@@ -161,34 +175,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
        })
      )
      .subscribe((cpfpInfo) => {
-        if (!cpfpInfo || !this.tx) {
-          this.cpfpInfo = null;
-          this.hasEffectiveFeeRate = false;
-          return;
-        }
-        // merge ancestors/descendants
-        const relatives = [...(cpfpInfo.ancestors || []), ...(cpfpInfo.descendants || [])];
-        if (cpfpInfo.bestDescendant && !cpfpInfo.descendants?.length) {
-          relatives.push(cpfpInfo.bestDescendant);
-        }
-        const hasRelatives = !!relatives.length;
-        if (!cpfpInfo.effectiveFeePerVsize && hasRelatives) {
-          let totalWeight =
-            this.tx.weight +
-            relatives.reduce((prev, val) => prev + val.weight, 0);
-          let totalFees =
-            this.tx.fee +
-            relatives.reduce((prev, val) => prev + val.fee, 0);
-          this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
-        } else {
-          this.tx.effectiveFeePerVsize = cpfpInfo.effectiveFeePerVsize;
-        }
-        if (cpfpInfo.acceleration) {
-          this.tx.acceleration = cpfpInfo.acceleration;
-        }
-
-        this.cpfpInfo = cpfpInfo;
-        this.hasEffectiveFeeRate = hasRelatives || (this.tx.effectiveFeePerVsize && (Math.abs(this.tx.effectiveFeePerVsize - this.tx.feePerVsize) > 0.01));
+        this.setCpfpInfo(cpfpInfo);
      });

    this.fetchRbfSubscription = this.fetchRbfHistory$
@@ -259,6 +246,10 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
            mempoolPosition: this.mempoolPosition
          });
          this.txInBlockIndex = this.mempoolPosition.block;
+
+          if (txPosition.cpfp !== undefined) {
+            this.setCpfpInfo(txPosition.cpfp);
+          }
        }
      } else {
        this.mempoolPosition = null;
@@ -297,6 +288,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
          this.seoService.setTitle(
            $localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`
          );
+          this.seoService.setDescription($localize`:@@meta.description.bitcoin.transaction:Get real-time status, addresses, fees, script info, and more for ${this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet'?'Liquid':'Bitcoin'}${seoDescriptionNetwork(this.stateService.network)} transaction with txid {txid}.`);
          this.resetTransaction();
          return merge(
            of(true),
@@ -399,7 +391,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
              this.blockConversion = price;
            })
          ).subscribe();
-      
+
          setTimeout(() => { this.applyFragment(); }, 0);
        },
        (error) => {
@@ -486,6 +478,20 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
    this.setGraphSize();
  }

+  dismissAccelAlert(): void {
+    this.storageService.setValue('accel-cta-type', 'button');
+    this.accelerateCtaType = 'button';
+  }
+
+  onAccelerateClicked() {
+    if (!this.txId) {
+      return;
+    }
+    this.showAccelerationSummary = true && this.acceleratorAvailable;
+    this.scrollIntoAccelPreview = !this.scrollIntoAccelPreview;
+    return false;
+  }
+
  handleLoadElectrsTransactionError(error: any): Observable<any> {
    if (error.status === 404 && /^[a-fA-F0-9]{64}$/.test(this.txId)) {
      this.websocketService.startMultiTrackTransaction(this.txId);
@@ -507,6 +513,37 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
      });
  }

+  setCpfpInfo(cpfpInfo: CpfpInfo): void {
+    if (!cpfpInfo || !this.tx) {
+      this.cpfpInfo = null;
+      this.hasEffectiveFeeRate = false;
+      return;
+    }
+    // merge ancestors/descendants
+    const relatives = [...(cpfpInfo.ancestors || []), ...(cpfpInfo.descendants || [])];
+    if (cpfpInfo.bestDescendant && !cpfpInfo.descendants?.length) {
+      relatives.push(cpfpInfo.bestDescendant);
+    }
+    const hasRelatives = !!relatives.length;
+    if (!cpfpInfo.effectiveFeePerVsize && hasRelatives) {
+      const totalWeight =
+        this.tx.weight +
+        relatives.reduce((prev, val) => prev + val.weight, 0);
+      const totalFees =
+        this.tx.fee +
+        relatives.reduce((prev, val) => prev + val.fee, 0);
+      this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
+    } else {
+      this.tx.effectiveFeePerVsize = cpfpInfo.effectiveFeePerVsize;
+    }
+    if (cpfpInfo.acceleration) {
+      this.tx.acceleration = cpfpInfo.acceleration;
+    }
+
+    this.cpfpInfo = cpfpInfo;
+    this.hasEffectiveFeeRate = hasRelatives || (this.tx.effectiveFeePerVsize && (Math.abs(this.tx.effectiveFeePerVsize - this.tx.feePerVsize) > 0.01));
+  }
+
  setFeatures(): void {
    if (this.tx) {
      this.segwitEnabled = !this.tx.status.confirmed || isFeatureActive(this.stateService.network, this.tx.status.block_height, 'segwit');