mirror of
https://github.com/mempool/mempool.git
synced 2025-03-17 13:21:55 +01:00
Redirect to tx page 2 seconds after broadcast
This commit is contained in:
parent
062c5ca03a
commit
4dff3adf11
@ -30,7 +30,6 @@
|
||||
</span>
|
||||
|
||||
<div class="container-buttons">
|
||||
<button *ngIf="successBroadcast" type="button" class="btn btn-sm btn-success no-cursor" i18n="transaction.broadcasted|Broadcasted">Broadcasted</button>
|
||||
<button class="btn btn-sm" style="margin-left: 10px; padding: 0;" (click)="resetForm()">✕</button>
|
||||
</div>
|
||||
|
||||
@ -40,14 +39,18 @@
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<div *ngIf="!successBroadcast" class="alert alert-mempool" style="align-items: center;">
|
||||
<div class="alert alert-mempool" style="align-items: center;">
|
||||
<span>
|
||||
<fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
|
||||
<ng-container i18n="transaction.local-tx|This transaction is stored locally in your browser.">
|
||||
<ng-container *ngIf="!successBroadcast" i18n="transaction.local-tx|This transaction is stored locally in your browser.">
|
||||
This transaction is stored locally in your browser. Broadcast it to add it to the mempool.
|
||||
</ng-container>
|
||||
<ng-container *ngIf="successBroadcast" i18n="transaction.redirecting|Redirecting to transaction page...">
|
||||
Redirecting to transaction page...
|
||||
</ng-container>
|
||||
</span>
|
||||
<button [disabled]="isLoadingBroadcast" type="button" class="btn btn-sm btn-primary" i18n="transaction.broadcast|Broadcast" (click)="postTx()">Broadcast</button>
|
||||
<button *ngIf="!successBroadcast" [disabled]="isLoadingBroadcast" type="button" class="btn btn-sm btn-primary btn-broadcast" i18n="transaction.broadcast|Broadcast" (click)="postTx()">Broadcast</button>
|
||||
<button *ngIf="successBroadcast" type="button" class="btn btn-sm btn-success no-cursor btn-broadcast" i18n="transaction.broadcasted|Broadcasted">Broadcasted</button>
|
||||
</div>
|
||||
|
||||
@if (!hasPrevouts) {
|
||||
|
@ -191,4 +191,12 @@
|
||||
.no-cursor {
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-broadcast {
|
||||
margin-left: 5px;
|
||||
@media (max-width: 567px) {
|
||||
margin-left: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
@ -3,7 +3,7 @@ import { Transaction, Vout } from '@interfaces/electrs.interface';
|
||||
import { StateService } from '../../services/state.service';
|
||||
import { Filter, toFilters } from '../../shared/filters.utils';
|
||||
import { decodeRawTransaction, getTransactionFlags, addInnerScriptsToVin, countSigops } from '../../shared/transaction.utils';
|
||||
import { firstValueFrom, Subscription } from 'rxjs';
|
||||
import { catchError, firstValueFrom, Subscription, switchMap, tap, throwError, timer } from 'rxjs';
|
||||
import { WebsocketService } from '../../services/websocket.service';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
@ -36,6 +36,7 @@ export class TransactionRawComponent implements OnInit, OnDestroy {
|
||||
isLoadingBroadcast: boolean;
|
||||
errorBroadcast: string;
|
||||
successBroadcast: boolean;
|
||||
broadcastSubscription: Subscription;
|
||||
|
||||
isMobile: boolean;
|
||||
@ViewChild('graphContainer')
|
||||
@ -207,18 +208,22 @@ export class TransactionRawComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
async postTx(): Promise<string> {
|
||||
postTx(): void {
|
||||
this.isLoadingBroadcast = true;
|
||||
this.errorBroadcast = null;
|
||||
return new Promise((resolve, reject) => {
|
||||
this.apiService.postTransaction$(this.rawHexTransaction)
|
||||
.subscribe((result) => {
|
||||
|
||||
this.broadcastSubscription = this.apiService.postTransaction$(this.rawHexTransaction).pipe(
|
||||
tap((txid: string) => {
|
||||
this.isLoadingBroadcast = false;
|
||||
this.successBroadcast = true;
|
||||
this.transaction.txid = result;
|
||||
resolve(result);
|
||||
},
|
||||
(error) => {
|
||||
this.transaction.txid = txid;
|
||||
}),
|
||||
switchMap((txid: string) =>
|
||||
timer(2000).pipe(
|
||||
tap(() => this.router.navigate([this.relativeUrlPipe.transform('/tx/' + txid)])),
|
||||
)
|
||||
),
|
||||
catchError((error) => {
|
||||
if (typeof error.error === 'string') {
|
||||
const matchText = error.error.replace(/\\/g, '').match('"message":"(.*?)"');
|
||||
this.errorBroadcast = 'Failed to broadcast transaction, reason: ' + (matchText && matchText[1] || error.error);
|
||||
@ -226,9 +231,9 @@ export class TransactionRawComponent implements OnInit, OnDestroy {
|
||||
this.errorBroadcast = 'Failed to broadcast transaction, reason: ' + error.message;
|
||||
}
|
||||
this.isLoadingBroadcast = false;
|
||||
reject(this.error);
|
||||
});
|
||||
});
|
||||
return throwError(() => error);
|
||||
})
|
||||
).subscribe();
|
||||
}
|
||||
|
||||
resetState() {
|
||||
@ -253,6 +258,7 @@ export class TransactionRawComponent implements OnInit, OnDestroy {
|
||||
this.missingPrevouts = [];
|
||||
this.stateService.markBlock$.next({});
|
||||
this.mempoolBlocksSubscription?.unsubscribe();
|
||||
this.broadcastSubscription?.unsubscribe();
|
||||
}
|
||||
|
||||
resetForm() {
|
||||
@ -308,6 +314,7 @@ export class TransactionRawComponent implements OnInit, OnDestroy {
|
||||
this.mempoolBlocksSubscription?.unsubscribe();
|
||||
this.flowPrefSubscription?.unsubscribe();
|
||||
this.stateService.markBlock$.next({});
|
||||
this.broadcastSubscription?.unsubscribe();
|
||||
}
|
||||
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user