machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[tx] integrated accelerator

Browse Source
This commit is contained in:
nymkappa
2023-08-26 09:52:55 +02:00
parent f9895a492c
commit fcecbe4967
10 changed files with 519 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/app/components/transaction/transaction.component.html
View File

@@ -6,7 +6,7 @@
<app-truncate [text]="rbfTransaction.txid" [lastChars]="12" [link]="['/tx/' | relativeUrl, rbfTransaction.txid]"></app-truncate>
</div>
<div *ngIf="acceleratorAvailable && accelerateCtaType === 'alert' && !tx?.status?.confirmed" class="alert alert-mempool alert-dismissible" role="alert">
<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 the Mempool Accelerator &trade;</span>
<button type="button" class="close" aria-label="Close" (click)="dismissAccelAlert()">
<span aria-hidden="true">&times;</span>
@@ -78,33 +78,17 @@
</ng-template>
<!-- Accelerator -->
<ng-container *ngIf="!tx?.status?.confirmed && showAccelerationSummary">
<div class="title mt-3" id="acceleratePreviewAnchor">
<h2>Accelerate</h2>
</div>
<div class="box">
<div class="row">
<div class="col">
Test
</div>
</div>
<div class="row">
<div class="col">
Test
</div>
</div>
<div class="row">
<div class="col">
Test
</div>
</div>
<app-accelerate-preview [txid]="txId" [scrollEvent]="scrollIntoAccelPreview"></app-accelerate-preview>
</div>
</ng-container>
<span id="acceleratePreviewAnchor"></span>
<ng-template #unconfirmedTemplate>
<div class="box">
@@ -132,10 +116,9 @@
</ng-template>
<ng-template #estimationTmpl>
<ng-template [ngIf]="this.mempoolPosition.block >= 7" [ngIfElse]="belowBlockLimit">
<span class="eta" [class]="acceleratorAvailable ? 'd-flex justify-content-end' : ''">
<span class="etaDeepMempool" [class]="acceleratorAvailable ? '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 *ngIf="acceleratorAvailable" class="ml-2"></span>
<a *ngIf="acceleratorAvailable && accelerateCtaType === 'button'" [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="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>
@@ -143,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]="acceleratorAvailable ? 'd-flex justify-content-end' : ''">
<span class="eta" [class]="acceleratorAvailable ? 'd-flex justify-content-end 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 *ngIf="acceleratorAvailable" class="ml-2"></span>
<a *ngIf="acceleratorAvailable && accelerateCtaType === 'button'" [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="acceleratorAvailable && 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>

59
frontend/src/app/components/transaction/transaction.component.scss
View File

@@ -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,25 +218,52 @@
}
}
.eta {
display: flex;
justify-content: end;
flex-wrap: wrap;
align-content: center;
@media (min-width: 850px) {
justify-content: space-between;
}
}
.link.accelerator {
cursor: pointer;
}
.eta {
display: flex;
flex-wrap: wrap;
align-content: center;
@media (min-width: 850px) {
justify-content: left !important;
}
}
.accelerate {
display: flex !important;
align-self: auto;
margin-top: 3px;
margin-left: 10px;
@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;
}
}

7
frontend/src/app/components/transaction/transaction.component.ts
View File

@@ -83,7 +83,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
blockConversion: Price;
tooltipPosition: { x: number, y: number };
isMobile: boolean;
acceleratorAvailable: boolean = false;
featuresEnabled: boolean;
segwitEnabled: boolean;
@@ -93,6 +92,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
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;
@@ -504,12 +504,13 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.accelerateCtaType = 'button';
}
onAccelerateClicked(): void {
onAccelerateClicked() {
if (!this.txId) {
return;
}
this.showAccelerationSummary = true && this.acceleratorAvailable;
this.scrollIntoAccelPreview = !this.scrollIntoAccelPreview;
return false;
}
handleLoadElectrsTransactionError(error: any): Observable<any> {