mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 22:58:30 +01:00
Code Issues Projects Releases Wiki Activity

Pizza tracker handle RBF replacements

Browse source
This commit is contained in:
Mononaut 2024-06-04 22:45:43 +00:00
parent 9b9aaed757
commit 976e505445
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
5 changed files with 39 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/components/tracker/tracker-bar.component.ts
View file

@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
export type TrackerStage = 'waiting' | 'pending' | 'soon' | 'next' | 'confirmed';
export type TrackerStage = 'waiting' | 'pending' | 'soon' | 'next' | 'confirmed' | 'replaced';
@Component({
selector: 'app-tracker-bar',

19
frontend/src/app/components/tracker/tracker.component.html
View file

@ -43,9 +43,16 @@
<app-clockchain [height]="blockchainHeight" [width]="blockchainWidth" mode="none"></app-clockchain>
</div>
<div class="panel">
<div class="tracker-bar">
<app-tracker-bar [stage]="trackerStage"></app-tracker-bar>
</div>
@if (replaced) {
<div class="alert-replaced" role="alert">
<span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
<app-truncate [text]="latestReplacement" [lastChars]="12" [link]="['/tracker/' | relativeUrl, latestReplacement]"></app-truncate>
</div>
} @else {
<div class="tracker-bar">
<app-tracker-bar [stage]="trackerStage"></app-tracker-bar>
</div>
}
<div class="data">
@if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
<div class="field narrower mt-2">
@ -143,6 +150,12 @@
</div>
<span class="explainer" i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
}
@case ('replaced') {
<div class="progress-icon">
<fa-icon [icon]="['fas', 'timeline']" [fixedWidth]="true"></fa-icon>
</div>
<span class="explainer" i18n="tracker.explain.replaced">Your transaction has been replaced by a newer version!</span>
}
}
}
}

8
frontend/src/app/components/tracker/tracker.component.scss
View file

@ -187,4 +187,12 @@
padding: 0.5em;
background: var(--primary);
color: white;
cursor: pointer;
}
.alert-replaced {
background: var(--danger);
margin: 1em 0.5em;
padding: 0.5em;
border-radius: 0.5em;
}

13
frontend/src/app/components/tracker/tracker.component.ts
View file

@ -76,6 +76,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
currencyChangeSubscription: Subscription;
rbfTransaction: undefined | Transaction;
replaced: boolean = false;
latestReplacement: string;
rbfReplaces: string[];
rbfInfo: RbfTree;
cpfpInfo: CpfpInfo | null;
@ -218,6 +219,9 @@ export class TrackerComponent implements OnInit, OnDestroy {
).subscribe((rbfResponse) => {
this.rbfInfo = rbfResponse?.replacements;
this.rbfReplaces = rbfResponse?.replaces || null;
if (this.rbfInfo) {
this.latestReplacement = this.rbfInfo.tx.txid;
}
});
this.fetchCachedTxSubscription = this.fetchCachedTx$
@ -350,7 +354,9 @@ export class TrackerComponent implements OnInit, OnDestroy {
this.tx.acceleratedBy = txPosition.position?.acceleratedBy;
}
if (txPosition.position?.block === 0) {
if (this.replaced) {
this.trackerStage = 'replaced';
} else if (txPosition.position?.block === 0) {
this.trackerStage = 'next';
} else if (txPosition.position?.block < 3){
this.trackerStage = 'soon';
@ -520,6 +526,10 @@ export class TrackerComponent implements OnInit, OnDestroy {
}
this.rbfTransaction = rbfTransaction;
this.replaced = true;
this.trackerStage = 'replaced';
if (!this.rbfInfo) {
this.latestReplacement = this.rbfTransaction.txid;
}
this.stateService.markBlock$.next({});
if (rbfTransaction && !this.tx) {
@ -663,6 +673,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
this.isLoadingTx = true;
this.rbfTransaction = undefined;
this.replaced = false;
this.latestReplacement = '';
this.transactionTime = -1;
this.cpfpInfo = null;
this.adjustedVsize = null;

3
frontend/src/app/shared/shared.module.ts
View file

@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd, faWandMagicSparkles, faFaucetDrip } from '@fortawesome/free-solid-svg-icons';
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd, faWandMagicSparkles, faFaucetDrip, faTimeline } from '@fortawesome/free-solid-svg-icons';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MenuComponent } from '../components/menu/menu.component';
import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
@ -438,5 +438,6 @@ export class SharedModule {
library.addIcons(faHourglassEnd);
library.addIcons(faWandMagicSparkles);
library.addIcons(faFaucetDrip);
library.addIcons(faTimeline);
}
}