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

show "loading" message while checking for cached txs

Browse Source
This commit is contained in:
Mononaut 2023-07-11 15:49:38 +09:00
parent 243fd5e9dd
commit 415b70da14
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -453,12 +453,19 @@
<ng-template [ngIf]="error"> <ng-template [ngIf]="error">
<div class="text-center" *ngIf="waitingForTransaction; else errorTemplate"> <div class="text-center" *ngIf="loadingCachedTx; else waitingTemplate">
<h3 i18n="transaction.error.transaction-not-found">Transaction not found.</h3> <h3 i18n="transaction.error.transaction-not-found">Loading transaction</h3>
<h5 i18n="transaction.error.waiting-for-it-to-appear">Waiting for it to appear in the mempool...</h5>
<div class="spinner-border text-light mt-2"></div> <div class="spinner-border text-light mt-2"></div>
</div> </div>
<ng-template #waitingTemplate>
<div class="text-center" *ngIf="waitingForTransaction; else errorTemplate">
<h3 i18n="transaction.error.transaction-not-found">Transaction not found.</h3>
<h5 i18n="transaction.error.waiting-for-it-to-appear">Waiting for it to appear in the mempool...</h5>
<div class="spinner-border text-light mt-2"></div>
</div>
</ng-template>
<ng-template #errorTemplate> <ng-template #errorTemplate>
<div class="text-center"> <div class="text-center">
<h3>{{ error.error }}</h3> <h3>{{ error.error }}</h3>

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

@ -39,6 +39,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
isLoadingTx = true; isLoadingTx = true;
error: any = undefined; error: any = undefined;
errorUnblinded: any = undefined; errorUnblinded: any = undefined;
loadingCachedTx = false;
waitingForTransaction = false; waitingForTransaction = false;
latestBlock: BlockExtended; latestBlock: BlockExtended;
transactionTime = -1; transactionTime = -1;
@ -199,6 +200,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.fetchCachedTxSubscription = this.fetchCachedTx$ this.fetchCachedTxSubscription = this.fetchCachedTx$
.pipe( .pipe(
tap(() => {
this.loadingCachedTx = true;
}),
switchMap((txId) => switchMap((txId) =>
this.apiService this.apiService
.getRbfCachedTx$(txId) .getRbfCachedTx$(txId)
@ -207,6 +211,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
return of(null); return of(null);
}) })
).subscribe((tx) => { ).subscribe((tx) => {
this.loadingCachedTx = false;
if (!tx) { if (!tx) {
return; return;
} }
@ -221,6 +226,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.tx.feePerVsize = tx.fee / (tx.weight / 4); this.tx.feePerVsize = tx.fee / (tx.weight / 4);
this.isLoadingTx = false; this.isLoadingTx = false;
this.error = undefined; this.error = undefined;
this.loadingCachedTx = false;
this.waitingForTransaction = false; this.waitingForTransaction = false;
this.graphExpanded = false; this.graphExpanded = false;
this.transactionTime = tx.firstSeen || 0; this.transactionTime = tx.firstSeen || 0;
@ -338,6 +344,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.tx.feePerVsize = tx.fee / (tx.weight / 4); this.tx.feePerVsize = tx.fee / (tx.weight / 4);
this.isLoadingTx = false; this.isLoadingTx = false;
this.error = undefined; this.error = undefined;
this.loadingCachedTx = false;
this.waitingForTransaction = false; this.waitingForTransaction = false;
this.websocketService.startTrackTransaction(tx.txid); this.websocketService.startTrackTransaction(tx.txid);
this.graphExpanded = false; this.graphExpanded = false;
@ -409,6 +416,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.txReplacedSubscription = this.stateService.txReplaced$.subscribe((rbfTransaction) => { this.txReplacedSubscription = this.stateService.txReplaced$.subscribe((rbfTransaction) => {
if (!this.tx) { if (!this.tx) {
this.error = new Error(); this.error = new Error();
this.loadingCachedTx = false;
this.waitingForTransaction = false; this.waitingForTransaction = false;
} }
this.rbfTransaction = rbfTransaction; this.rbfTransaction = rbfTransaction;