diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 7ec9a37d3..c4c065615 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -7,6 +7,7 @@ import { MempoolBlockViewComponent } from './components/mempool-block-view/mempo
import { ClockComponent } from './components/clock/clock.component';
import { StatusViewComponent } from './components/status-view/status-view.component';
import { AddressGroupComponent } from './components/address-group/address-group.component';
+import { TrackerComponent } from './components/tracker/tracker.component';
const browserWindow = window || {};
// @ts-ignore
@@ -105,6 +106,10 @@ let routes: Routes = [
loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
data: { preload: true },
},
+ {
+ path: 'tracker/:id',
+ component: TrackerComponent,
+ },
{
path: 'wallet',
children: [],
diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html
new file mode 100644
index 000000000..1ad27e6fa
--- /dev/null
+++ b/frontend/src/app/components/tracker/tracker.component.html
@@ -0,0 +1,3 @@
+
+ 🍕
+
\ No newline at end of file
diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss
new file mode 100644
index 000000000..bfdd4cc03
--- /dev/null
+++ b/frontend/src/app/components/tracker/tracker.component.scss
@@ -0,0 +1,317 @@
+.adjust-btn-padding {
+ padding: 0.55rem;
+}
+
+.container-buttons {
+ align-self: center;
+}
+
+.title-block {
+ flex-wrap: wrap;
+ align-items: baseline;
+ @media (min-width: 650px) {
+ flex-direction: row;
+ }
+ h1 {
+ margin: 0rem;
+ margin-right: 15px;
+ line-height: 1;
+ }
+}
+.tx-link {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: baseline;
+ width: 0;
+ max-width: 100%;
+ margin-right: 0px;
+ margin-bottom: 0px;
+ margin-top: 8px;
+ @media (min-width: 651px) {
+ flex-grow: 1;
+ margin-bottom: 0px;
+ margin-right: 1em;
+ top: 1px;
+ position: relative;
+ }
+ @media (max-width: 650px) {
+ width: 100%;
+ order: 3;
+ }
+
+ .txid {
+ width: 200px;
+ min-width: 200px;
+ flex-grow: 1;
+ }
+}
+
+.td-width {
+ width: 150px;
+
+ @media (max-width: 768px) {
+ width: 175px;
+ }
+}
+
+.badge {
+ position: relative;
+ top: -1px;
+}
+
+.badge.badge-accelerated {
+ background-color: #653b9c;
+ color: white;
+}
+
+.btn-small-height {
+ line-height: 1;
+}
+
+.arrow-green {
+ color: #1a9436;
+}
+
+.arrow-red {
+ color: #dc3545;
+}
+
+.container-xl {
+ margin-bottom: 40px;
+}
+
+.row{
+ flex-direction: column;
+ @media (min-width: 850px) {
+ flex-direction: row;
+ }
+}
+
+.box.hidden {
+ visibility: hidden;
+ height: 0px;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ margin-top: 0px;
+ margin-bottom: 0px;
+}
+
+.graph-container {
+ position: relative;
+ width: 100%;
+ background: #181b2d;
+ padding: 10px 0;
+ padding-bottom: 0;
+}
+
+.toggle-wrapper {
+ width: 100%;
+ text-align: center;
+ margin: 1.25em 0 0;
+}
+
+.graph-toggle {
+ margin: auto;
+}
+
+@media (max-width: 767.98px) {
+ .mobile-bottomcol {
+ margin-top: 15px;
+ }
+
+ .details-table td:first-child {
+ white-space: pre-wrap;
+ }
+}
+
+.fiat {
+ display: block;
+ @media (min-width: 768px){
+ display: inline-block;
+ margin-left: 15px;
+ text-align: left;
+ }
+}
+
+.table {
+ tr td {
+ padding: 0.75rem 0.5rem;
+ @media (min-width: 576px) {
+ padding: 0.75rem 0.75rem;
+ }
+ &:last-child {
+ text-align: right;
+ @media (min-width: 850px) {
+ text-align: left;
+ }
+ }
+ .btn {
+ display: block;
+ }
+
+ &.wrap-cell {
+ white-space: normal;
+ }
+ }
+}
+
+.effective-fee-container {
+ display: block;
+ @media (min-width: 768px){
+ display: inline-block;
+ }
+ @media (max-width: 425px){
+ display: flex;
+ flex-direction: column;
+ }
+}
+
+.effective-fee-rating {
+ @media (max-width: 767px){
+ margin-right: 0px !important;
+ }
+}
+
+.title {
+ h2 {
+ line-height: 1;
+ margin: 0;
+ padding-bottom: 10px;
+ }
+}
+
+.btn-outline-info {
+ margin-top: 5px;
+ @media (min-width: 768px){
+ margin-top: 0px;
+ }
+}
+
+.details-button, .flow-toggle, .accelerator-toggle {
+ margin-top: -5px;
+ margin-left: 10px;
+ @media (min-width: 768px){
+ display: inline-block;
+ margin-top: 0px;
+ margin-bottom: 0px;
+ }
+}
+
+.subtitle-block {
+ display: flex;
+ flex-direction: row;
+ align-items: baseline;
+ justify-content: space-between;
+
+ .title {
+ flex-shrink: 0;
+ }
+
+ .title-buttons {
+ flex-shrink: 1;
+ text-align: right;
+ .btn {
+ margin-top: 0;
+ margin-bottom: 8px;
+ margin-left: 8px;
+ }
+ }
+}
+
+.cpfp-details {
+ .txids {
+ width: 60%;
+ }
+
+ @media (max-width: 500px) {
+ .txids {
+ width: 40%;
+ }
+ }
+}
+
+.tx-list {
+ .alert-link {
+ display: block;
+ }
+}
+
+.alert-purple {
+ background-color: #5c3a88;
+ width: 100%;
+}
+
+// Blinking block
+@keyframes shadowyBackground {
+ 0% {
+ box-shadow: 0px 0px 20px rgba(#eba814, 1);
+ }
+ 50% {
+ box-shadow: 0px 0px 20px rgba(#eba814, .3);
+ }
+ 100% {
+ box-shadow: 0px 0px 20px rgba(#ffae00, 1);
+ }
+}
+
+.blink-bg {
+ color: #fff;
+ background: repeating-linear-gradient(#daad0a 0%, #daad0a 5%, #987805 100%) !important;
+ animation: shadowyBackground 1s infinite;
+ box-shadow: 0px 0px 20px rgba(#eba814, 1);
+ transition: 100ms all ease-in;
+ margin-right: 8px;
+ font-size: 16px;
+ border: 1px solid gold;
+}
+
+.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-left: auto;
+ background-color: #653b9c;
+ @media (max-width: 849px) {
+ margin-left: 5px;
+ }
+}
+
+.etaDeepMempool {
+ display: flex !important;
+ justify-content: flex-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;
+ }
+}
+
+.goggles-icon {
+ display: block;
+ width: 2.2em;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/tracker/tracker.component.ts b/frontend/src/app/components/tracker/tracker.component.ts
new file mode 100644
index 000000000..fbaa0be17
--- /dev/null
+++ b/frontend/src/app/components/tracker/tracker.component.ts
@@ -0,0 +1,821 @@
+import { Component, OnInit, AfterViewInit, OnDestroy, HostListener, ViewChild, ElementRef, Inject, ChangeDetectorRef } from '@angular/core';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import {
+ switchMap,
+ filter,
+ catchError,
+ retryWhen,
+ delay,
+ mergeMap,
+ tap,
+ map
+} from 'rxjs/operators';
+import { Transaction } from '../../interfaces/electrs.interface';
+import { of, merge, Subscription, Observable, Subject, from, throwError, combineLatest } from 'rxjs';
+import { StateService } from '../../services/state.service';
+import { CacheService } from '../../services/cache.service';
+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 { getTransactionFlags } from '../../shared/transaction.utils';
+import { Filter, toFilters, TransactionFlags } from '../../shared/filters.utils';
+import { BlockExtended, CpfpInfo, RbfTree, MempoolPosition, DifficultyAdjustment, Acceleration } from '../../interfaces/node-api.interface';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { Price, PriceService } from '../../services/price.service';
+import { isFeatureActive } from '../../bitcoin.utils';
+import { ServicesApiServices } from '../../services/services-api.service';
+import { EnterpriseService } from '../../services/enterprise.service';
+import { ZONE_SERVICE } from '../../injection-tokens';
+
+interface Pool {
+ id: number;
+ name: string;
+ slug: string;
+}
+
+interface AuditStatus {
+ seen?: boolean;
+ expected?: boolean;
+ added?: boolean;
+ prioritized?: boolean;
+ delayed?: number;
+ accelerated?: boolean;
+ conflict?: boolean;
+ coinbase?: boolean;
+}
+
+@Component({
+ selector: 'app-tracker',
+ templateUrl: './tracker.component.html',
+ styleUrls: ['./tracker.component.scss'],
+})
+export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy {
+ network = '';
+ tx: Transaction;
+ txId: string;
+ txInBlockIndex: number;
+ mempoolPosition: MempoolPosition;
+ isLoadingTx = true;
+ error: any = undefined;
+ errorUnblinded: any = undefined;
+ loadingCachedTx = false;
+ waitingForTransaction = false;
+ latestBlock: BlockExtended;
+ transactionTime = -1;
+ subscription: Subscription;
+ fetchCpfpSubscription: Subscription;
+ fetchRbfSubscription: Subscription;
+ fetchCachedTxSubscription: Subscription;
+ fetchAccelerationSubscription: Subscription;
+ txReplacedSubscription: Subscription;
+ txRbfInfoSubscription: Subscription;
+ mempoolPositionSubscription: Subscription;
+ queryParamsSubscription: Subscription;
+ urlFragmentSubscription: Subscription;
+ mempoolBlocksSubscription: Subscription;
+ blocksSubscription: Subscription;
+ miningSubscription: Subscription;
+ currencyChangeSubscription: Subscription;
+ fragmentParams: URLSearchParams;
+ rbfTransaction: undefined | Transaction;
+ replaced: boolean = false;
+ rbfReplaces: string[];
+ rbfInfo: RbfTree;
+ cpfpInfo: CpfpInfo | null;
+ hasCpfp: boolean = false;
+ accelerationInfo: Acceleration | null = null;
+ sigops: number | null;
+ adjustedVsize: number | null;
+ pool: Pool | null;
+ auditStatus: AuditStatus | null;
+ filters: Filter[] = [];
+ showCpfpDetails = false;
+ fetchCpfp$ = new Subject();
+ fetchRbfHistory$ = new Subject();
+ fetchCachedTx$ = new Subject();
+ fetchAcceleration$ = new Subject();
+ fetchMiningInfo$ = new Subject<{ hash: string, height: number, txid: string }>();
+ isCached: boolean = false;
+ now = Date.now();
+ da$: Observable;
+ inputIndex: number;
+ outputIndex: number;
+ graphExpanded: boolean = false;
+ graphWidth: number = 1068;
+ graphHeight: number = 360;
+ inOutLimit: number = 150;
+ maxInOut: number = 0;
+ flowPrefSubscription: Subscription;
+ hideFlow: boolean = this.stateService.hideFlow.value;
+ overrideFlowPreference: boolean = null;
+ flowEnabled: boolean;
+ tooltipPosition: { x: number, y: number };
+ isMobile: boolean;
+
+ featuresEnabled: boolean;
+ segwitEnabled: boolean;
+ rbfEnabled: boolean;
+ taprootEnabled: boolean;
+ hasEffectiveFeeRate: boolean;
+ accelerateCtaType: 'alert' | 'button' = 'button';
+ acceleratorAvailable: boolean = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
+ showAccelerationSummary = false;
+ scrollIntoAccelPreview = false;
+ auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true;
+
+ @ViewChild('graphContainer')
+ graphContainer: ElementRef;
+
+ constructor(
+ private route: ActivatedRoute,
+ private router: Router,
+ private relativeUrlPipe: RelativeUrlPipe,
+ private electrsApiService: ElectrsApiService,
+ public stateService: StateService,
+ private cacheService: CacheService,
+ private websocketService: WebsocketService,
+ private audioService: AudioService,
+ private apiService: ApiService,
+ private servicesApiService: ServicesApiServices,
+ private seoService: SeoService,
+ private priceService: PriceService,
+ private storageService: StorageService,
+ private enterpriseService: EnterpriseService,
+ private cd: ChangeDetectorRef,
+ @Inject(ZONE_SERVICE) private zoneService: any,
+ ) {}
+
+ ngOnInit() {
+ this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
+
+ this.enterpriseService.page();
+
+ this.websocketService.want(['blocks', 'mempool-blocks']);
+ this.stateService.networkChanged$.subscribe(
+ (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') ?? 'button';
+
+ this.setFlowEnabled();
+ this.flowPrefSubscription = this.stateService.hideFlow.subscribe((hide) => {
+ this.hideFlow = !!hide;
+ this.setFlowEnabled();
+ });
+
+ this.da$ = this.stateService.difficultyAdjustment$.pipe(
+ tap(() => {
+ this.now = Date.now();
+ })
+ );
+
+ this.urlFragmentSubscription = this.route.fragment.subscribe((fragment) => {
+ this.fragmentParams = new URLSearchParams(fragment || '');
+ const vin = parseInt(this.fragmentParams.get('vin'), 10);
+ const vout = parseInt(this.fragmentParams.get('vout'), 10);
+ this.inputIndex = (!isNaN(vin) && vin >= 0) ? vin : null;
+ this.outputIndex = (!isNaN(vout) && vout >= 0) ? vout : null;
+ });
+
+ this.blocksSubscription = this.stateService.blocks$.subscribe((blocks) => {
+ this.latestBlock = blocks[0];
+ });
+
+ this.fetchCpfpSubscription = this.fetchCpfp$
+ .pipe(
+ switchMap((txId) =>
+ this.apiService
+ .getCpfpinfo$(txId)
+ .pipe(retryWhen((errors) => errors.pipe(
+ mergeMap((error) => {
+ if (!this.tx?.status || this.tx.status.confirmed) {
+ return throwError(error);
+ } else {
+ return of(null);
+ }
+ }),
+ delay(2000)
+ )),
+ catchError(() => {
+ return of(null);
+ })
+ )
+ ),
+ catchError(() => {
+ return of(null);
+ })
+ )
+ .subscribe((cpfpInfo) => {
+ this.setCpfpInfo(cpfpInfo);
+ });
+
+ this.fetchRbfSubscription = this.fetchRbfHistory$
+ .pipe(
+ switchMap((txId) =>
+ this.apiService
+ .getRbfHistory$(txId)
+ ),
+ catchError(() => {
+ return of(null);
+ })
+ ).subscribe((rbfResponse) => {
+ this.rbfInfo = rbfResponse?.replacements;
+ this.rbfReplaces = rbfResponse?.replaces || null;
+ });
+
+ this.fetchCachedTxSubscription = this.fetchCachedTx$
+ .pipe(
+ tap(() => {
+ this.loadingCachedTx = true;
+ }),
+ switchMap((txId) =>
+ this.apiService
+ .getRbfCachedTx$(txId)
+ ),
+ catchError(() => {
+ return of(null);
+ })
+ ).subscribe((tx) => {
+ this.loadingCachedTx = false;
+ if (!tx) {
+ this.seoService.logSoft404();
+ return;
+ }
+ this.seoService.clearSoft404();
+
+ if (!this.tx) {
+ this.tx = tx;
+ this.setFeatures();
+ this.isCached = true;
+ if (tx.fee === undefined) {
+ this.tx.fee = 0;
+ }
+ this.tx.feePerVsize = tx.fee / (tx.weight / 4);
+ this.isLoadingTx = false;
+ this.error = undefined;
+ this.waitingForTransaction = false;
+ this.graphExpanded = false;
+ this.transactionTime = tx.firstSeen || 0;
+ this.setupGraph();
+
+ this.fetchRbfHistory$.next(this.tx.txid);
+ this.txRbfInfoSubscription = this.stateService.txRbfInfo$.subscribe((rbfInfo) => {
+ if (this.tx) {
+ this.rbfInfo = rbfInfo;
+ }
+ });
+ }
+ });
+
+ this.fetchAccelerationSubscription = this.fetchAcceleration$.pipe(
+ filter(() => this.stateService.env.ACCELERATOR === true),
+ tap(() => {
+ this.accelerationInfo = null;
+ }),
+ switchMap((blockHash: string) => {
+ return this.servicesApiService.getAccelerationHistory$({ blockHash });
+ }),
+ catchError(() => {
+ return of(null);
+ })
+ ).subscribe((accelerationHistory) => {
+ for (const acceleration of accelerationHistory) {
+ if (acceleration.txid === this.txId && (acceleration.status === 'completed' || acceleration.status === 'completed_provisional')) {
+ acceleration.acceleratedFee = Math.max(acceleration.effectiveFee, acceleration.effectiveFee + acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee);
+ this.accelerationInfo = acceleration;
+ }
+ }
+ });
+
+ this.miningSubscription = this.fetchMiningInfo$.pipe(
+ filter((target) => target.txid === this.txId),
+ tap(() => {
+ this.pool = null;
+ this.auditStatus = null;
+ }),
+ switchMap(({ hash, height, txid }) => {
+ const foundBlock = this.cacheService.getCachedBlock(height) || null;
+ const auditAvailable = this.isAuditAvailable(height);
+ const isCoinbase = this.tx.vin.some(v => v.is_coinbase);
+ const fetchAudit = auditAvailable && !isCoinbase;
+ return combineLatest([
+ foundBlock ? of(foundBlock.extras.pool) : this.apiService.getBlock$(hash).pipe(
+ map(block => {
+ return block.extras.pool;
+ }),
+ catchError(() => {
+ return of(null);
+ })
+ ),
+ fetchAudit ? this.apiService.getBlockAudit$(hash).pipe(
+ map(audit => {
+ const isAdded = audit.addedTxs.includes(txid);
+ const isPrioritized = audit.prioritizedTxs.includes(txid);
+ const isAccelerated = audit.acceleratedTxs.includes(txid);
+ const isConflict = audit.fullrbfTxs.includes(txid);
+ const isExpected = audit.template.some(tx => tx.txid === txid);
+ return {
+ seen: isExpected || isPrioritized || isAccelerated,
+ expected: isExpected,
+ added: isAdded,
+ prioritized: isPrioritized,
+ conflict: isConflict,
+ accelerated: isAccelerated,
+ };
+ }),
+ catchError(() => {
+ return of(null);
+ })
+ ) : of(isCoinbase ? { coinbase: true } : null)
+ ]);
+ }),
+ catchError(() => {
+ return of(null);
+ })
+ ).subscribe(([pool, auditStatus]) => {
+ this.pool = pool;
+ this.auditStatus = auditStatus;
+ });
+
+ this.mempoolPositionSubscription = this.stateService.mempoolTxPosition$.subscribe(txPosition => {
+ this.now = Date.now();
+ if (txPosition && txPosition.txid === this.txId && txPosition.position) {
+ this.mempoolPosition = txPosition.position;
+ if (this.tx && !this.tx.status.confirmed) {
+ this.stateService.markBlock$.next({
+ txid: txPosition.txid,
+ mempoolPosition: this.mempoolPosition
+ });
+ this.txInBlockIndex = this.mempoolPosition.block;
+
+ if (txPosition.cpfp !== undefined) {
+ this.setCpfpInfo(txPosition.cpfp);
+ }
+ }
+ } else {
+ this.mempoolPosition = null;
+ }
+ });
+
+ this.subscription = this.zoneService.wrapObservable(this.route.paramMap
+ .pipe(
+ switchMap((params: ParamMap) => {
+ const urlMatch = (params.get('id') || '').split(':');
+ if (urlMatch.length === 2 && urlMatch[1].length === 64) {
+ const vin = parseInt(urlMatch[0], 10);
+ this.txId = urlMatch[1];
+ // rewrite legacy vin syntax
+ if (!isNaN(vin)) {
+ this.fragmentParams.set('vin', vin.toString());
+ this.fragmentParams.delete('vout');
+ }
+ this.router.navigate([this.relativeUrlPipe.transform('/tx'), this.txId], {
+ queryParamsHandling: 'merge',
+ fragment: this.fragmentParams.toString(),
+ });
+ } else {
+ this.txId = urlMatch[0];
+ const vout = parseInt(urlMatch[1], 10);
+ if (urlMatch.length > 1 && !isNaN(vout)) {
+ // rewrite legacy vout syntax
+ this.fragmentParams.set('vout', vout.toString());
+ this.fragmentParams.delete('vin');
+ this.router.navigate([this.relativeUrlPipe.transform('/tx'), this.txId], {
+ queryParamsHandling: 'merge',
+ fragment: this.fragmentParams.toString(),
+ });
+ }
+ }
+ this.seoService.setTitle(
+ $localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`
+ );
+ const network = this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet' ? 'Liquid' : 'Bitcoin';
+ const seoDescription = seoDescriptionNetwork(this.stateService.network);
+ this.seoService.setDescription($localize`:@@meta.description.bitcoin.transaction:Get real-time status, addresses, fees, script info, and more for ${network}${seoDescription} transaction with txid ${this.txId}.`);
+ this.resetTransaction();
+ return merge(
+ of(true),
+ this.stateService.connectionState$.pipe(
+ filter(
+ (state) => state === 2 && this.tx && !this.tx.status?.confirmed
+ )
+ )
+ );
+ }),
+ switchMap(() => {
+ let transactionObservable$: Observable;
+ const cached = this.cacheService.getTxFromCache(this.txId);
+ if (cached && cached.fee !== -1) {
+ transactionObservable$ = of(cached);
+ } else {
+ transactionObservable$ = this.electrsApiService
+ .getTransaction$(this.txId)
+ .pipe(
+ catchError(this.handleLoadElectrsTransactionError.bind(this))
+ );
+ }
+ return merge(
+ transactionObservable$,
+ this.stateService.mempoolTransactions$
+ );
+ }),
+ ))
+ .subscribe((tx: Transaction) => {
+ if (!tx) {
+ this.fetchCachedTx$.next(this.txId);
+ this.seoService.logSoft404();
+ return;
+ }
+ this.seoService.clearSoft404();
+
+ this.tx = tx;
+ this.setFeatures();
+ this.isCached = false;
+ if (tx.fee === undefined) {
+ this.tx.fee = 0;
+ }
+ if (this.tx.sigops != null) {
+ this.sigops = this.tx.sigops;
+ this.adjustedVsize = Math.max(this.tx.weight / 4, this.sigops * 5);
+ }
+ this.tx.feePerVsize = tx.fee / (tx.weight / 4);
+ this.isLoadingTx = false;
+ this.error = undefined;
+ this.loadingCachedTx = false;
+ this.waitingForTransaction = false;
+ this.websocketService.startTrackTransaction(tx.txid);
+ this.graphExpanded = false;
+ this.setupGraph();
+
+ if (!tx.status?.confirmed) {
+ if (tx.firstSeen) {
+ this.transactionTime = tx.firstSeen;
+ } else {
+ this.getTransactionTime();
+ }
+ } else {
+ this.fetchAcceleration$.next(tx.status.block_hash);
+ this.fetchMiningInfo$.next({ hash: tx.status.block_hash, height: tx.status.block_height, txid: tx.txid });
+ this.transactionTime = 0;
+ }
+
+ if (this.tx?.status?.confirmed) {
+ this.stateService.markBlock$.next({
+ blockHeight: tx.status.block_height,
+ });
+ this.fetchCpfp$.next(this.tx.txid);
+ } else {
+ if (tx.cpfpChecked) {
+ this.stateService.markBlock$.next({
+ txid: tx.txid,
+ txFeePerVSize: tx.effectiveFeePerVsize,
+ mempoolPosition: this.mempoolPosition,
+ });
+ this.setCpfpInfo({
+ ancestors: tx.ancestors,
+ bestDescendant: tx.bestDescendant,
+ });
+ const hasRelatives = !!(tx.ancestors?.length || tx.bestDescendant);
+ this.hasEffectiveFeeRate = hasRelatives || (tx.effectiveFeePerVsize && (Math.abs(tx.effectiveFeePerVsize - tx.feePerVsize) > 0.01));
+ } else {
+ this.fetchCpfp$.next(this.tx.txid);
+ }
+ }
+ this.fetchRbfHistory$.next(this.tx.txid);
+ this.currencyChangeSubscription?.unsubscribe();
+ this.currencyChangeSubscription = this.stateService.fiatCurrency$.pipe(
+ switchMap((currency) => {
+ return tx.status.block_time ? this.priceService.getBlockPrice$(tx.status.block_time, true, currency).pipe(
+ tap((price) => tx['price'] = price),
+ ) : of(undefined);
+ })
+ ).subscribe();
+
+ setTimeout(() => { this.applyFragment(); }, 0);
+
+ this.cd.detectChanges();
+ },
+ (error) => {
+ this.error = error;
+ this.seoService.logSoft404();
+ this.isLoadingTx = false;
+ }
+ );
+
+ this.stateService.txConfirmed$.subscribe(([txConfirmed, block]) => {
+ if (txConfirmed && this.tx && !this.tx.status.confirmed && txConfirmed === this.tx.txid) {
+ this.tx.status = {
+ confirmed: true,
+ block_height: block.height,
+ block_hash: block.id,
+ block_time: block.timestamp,
+ };
+ this.stateService.markBlock$.next({ blockHeight: block.height });
+ if (this.tx.acceleration || (this.accelerationInfo && ['accelerating', 'completed_provisional', 'completed'].includes(this.accelerationInfo.status))) {
+ this.audioService.playSound('wind-chimes-harp-ascend');
+ } else {
+ this.audioService.playSound('magic');
+ }
+ this.fetchAcceleration$.next(block.id);
+ this.fetchMiningInfo$.next({ hash: block.id, height: block.height, txid: this.tx.txid });
+ }
+ });
+
+ this.txReplacedSubscription = this.stateService.txReplaced$.subscribe((rbfTransaction) => {
+ if (!this.tx) {
+ this.error = new Error();
+ this.loadingCachedTx = false;
+ this.waitingForTransaction = false;
+ }
+ this.rbfTransaction = rbfTransaction;
+ this.replaced = true;
+ this.stateService.markBlock$.next({});
+
+ if (rbfTransaction && !this.tx) {
+ this.fetchCachedTx$.next(this.txId);
+ }
+ });
+
+ this.txRbfInfoSubscription = this.stateService.txRbfInfo$.subscribe((rbfInfo) => {
+ if (this.tx) {
+ this.rbfInfo = rbfInfo;
+ }
+ });
+
+ this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
+ if (params.showFlow === 'false') {
+ this.overrideFlowPreference = false;
+ } else if (params.showFlow === 'true') {
+ this.overrideFlowPreference = true;
+ } else {
+ this.overrideFlowPreference = null;
+ }
+ this.setFlowEnabled();
+ this.setGraphSize();
+ });
+
+ this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$.subscribe((mempoolBlocks) => {
+ this.now = Date.now();
+
+ if (!this.tx || this.mempoolPosition) {
+ return;
+ }
+
+ const txFeePerVSize =
+ this.tx.effectiveFeePerVsize || this.tx.fee / (this.tx.weight / 4);
+
+ let found = false;
+ this.txInBlockIndex = 0;
+ for (const block of mempoolBlocks) {
+ for (let i = 0; i < block.feeRange.length - 1 && !found; i++) {
+ if (
+ txFeePerVSize <= block.feeRange[i + 1] &&
+ txFeePerVSize >= block.feeRange[i]
+ ) {
+ this.txInBlockIndex = mempoolBlocks.indexOf(block);
+ found = true;
+ }
+ }
+ }
+ if (!found && mempoolBlocks.length && txFeePerVSize < mempoolBlocks[mempoolBlocks.length - 1].feeRange[0]) {
+ this.txInBlockIndex = 7;
+ }
+ });
+ }
+
+ ngAfterViewInit(): void {
+ this.setGraphSize();
+ }
+
+ dismissAccelAlert(): void {
+ this.storageService.setValue('accel-cta-type', 'button');
+ this.accelerateCtaType = 'button';
+ }
+
+ onAccelerateClicked() {
+ if (!this.txId) {
+ return;
+ }
+ this.enterpriseService.goal(8);
+ this.showAccelerationSummary = true && this.acceleratorAvailable;
+ this.scrollIntoAccelPreview = !this.scrollIntoAccelPreview;
+ return false;
+ }
+
+ handleLoadElectrsTransactionError(error: any): Observable {
+ if (error.status === 404 && /^[a-fA-F0-9]{64}$/.test(this.txId)) {
+ this.websocketService.startMultiTrackTransaction(this.txId);
+ this.waitingForTransaction = true;
+ }
+ this.error = error;
+ this.seoService.logSoft404();
+ this.isLoadingTx = false;
+ return of(false);
+ }
+
+ getTransactionTime() {
+ this.apiService
+ .getTransactionTimes$([this.tx.txid])
+ .subscribe((transactionTimes) => {
+ if (transactionTimes?.length) {
+ this.transactionTime = transactionTimes[0];
+ }
+ });
+ }
+
+ setCpfpInfo(cpfpInfo: CpfpInfo): void {
+ if (!cpfpInfo || !this.tx) {
+ this.cpfpInfo = null;
+ this.hasCpfp = false;
+ 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;
+ if (this.cpfpInfo.adjustedVsize && this.cpfpInfo.sigops != null) {
+ this.sigops = this.cpfpInfo.sigops;
+ this.adjustedVsize = this.cpfpInfo.adjustedVsize;
+ }
+ this.hasCpfp =!!(this.cpfpInfo && (this.cpfpInfo.bestDescendant || this.cpfpInfo.descendants?.length || this.cpfpInfo.ancestors?.length));
+ 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');
+ this.taprootEnabled = !this.tx.status.confirmed || isFeatureActive(this.stateService.network, this.tx.status.block_height, 'taproot');
+ this.rbfEnabled = !this.tx.status.confirmed || isFeatureActive(this.stateService.network, this.tx.status.block_height, 'rbf');
+ this.tx.flags = getTransactionFlags(this.tx);
+ this.filters = this.tx.flags ? toFilters(this.tx.flags).filter(f => f.txPage) : [];
+ } else {
+ this.segwitEnabled = false;
+ this.taprootEnabled = false;
+ this.rbfEnabled = false;
+ }
+ this.featuresEnabled = this.segwitEnabled || this.taprootEnabled || this.rbfEnabled;
+ }
+
+ isAuditAvailable(blockHeight: number): boolean {
+ if (!this.auditEnabled) {
+ return false;
+ }
+ switch (this.stateService.network) {
+ case 'testnet':
+ if (blockHeight < this.stateService.env.TESTNET_BLOCK_AUDIT_START_HEIGHT) {
+ return false;
+ }
+ break;
+ case 'signet':
+ if (blockHeight < this.stateService.env.SIGNET_BLOCK_AUDIT_START_HEIGHT) {
+ return false;
+ }
+ break;
+ default:
+ if (blockHeight < this.stateService.env.MAINNET_BLOCK_AUDIT_START_HEIGHT) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ resetTransaction() {
+ this.error = undefined;
+ this.tx = null;
+ this.setFeatures();
+ this.waitingForTransaction = false;
+ this.isLoadingTx = true;
+ this.rbfTransaction = undefined;
+ this.replaced = false;
+ this.transactionTime = -1;
+ this.cpfpInfo = null;
+ this.adjustedVsize = null;
+ this.sigops = null;
+ this.hasEffectiveFeeRate = false;
+ this.rbfInfo = null;
+ this.rbfReplaces = [];
+ this.filters = [];
+ this.showCpfpDetails = false;
+ this.accelerationInfo = null;
+ this.txInBlockIndex = null;
+ this.mempoolPosition = null;
+ this.pool = null;
+ this.auditStatus = null;
+ document.body.scrollTo(0, 0);
+ this.leaveTransaction();
+ }
+
+ leaveTransaction() {
+ this.websocketService.stopTrackingTransaction();
+ this.stateService.markBlock$.next({});
+ }
+
+ roundToOneDecimal(cpfpTx: any): number {
+ return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
+ }
+
+ setupGraph() {
+ this.maxInOut = Math.min(this.inOutLimit, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
+ this.graphHeight = this.graphExpanded ? this.maxInOut * 15 : Math.min(360, this.maxInOut * 80);
+ }
+
+ toggleGraph() {
+ const showFlow = !this.flowEnabled;
+ this.stateService.hideFlow.next(!showFlow);
+ this.router.navigate([], {
+ relativeTo: this.route,
+ queryParams: { showFlow: showFlow },
+ queryParamsHandling: 'merge',
+ fragment: 'flow'
+ });
+ }
+
+ setFlowEnabled() {
+ this.flowEnabled = (this.overrideFlowPreference != null ? this.overrideFlowPreference : !this.hideFlow);
+ }
+
+ expandGraph() {
+ this.graphExpanded = true;
+ this.graphHeight = this.maxInOut * 15;
+ }
+
+ collapseGraph() {
+ this.graphExpanded = false;
+ this.graphHeight = Math.min(360, this.maxInOut * 80);
+ }
+
+ // simulate normal anchor fragment behavior
+ applyFragment(): void {
+ const anchor = Array.from(this.fragmentParams.entries()).find(([frag, value]) => value === '');
+ if (anchor?.length) {
+ if (anchor[0] === 'accelerate') {
+ setTimeout(this.onAccelerateClicked.bind(this), 100);
+ } else {
+ const anchorElement = document.getElementById(anchor[0]);
+ if (anchorElement) {
+ anchorElement.scrollIntoView();
+ }
+ }
+ }
+ }
+
+ @HostListener('window:resize', ['$event'])
+ setGraphSize(): void {
+ this.isMobile = window.innerWidth < 850;
+ if (this.graphContainer?.nativeElement && this.stateService.isBrowser) {
+ setTimeout(() => {
+ if (this.graphContainer?.nativeElement?.clientWidth) {
+ this.graphWidth = this.graphContainer.nativeElement.clientWidth;
+ } else {
+ setTimeout(() => { this.setGraphSize(); }, 1);
+ }
+ }, 1);
+ }
+ }
+
+ ngOnDestroy() {
+ this.subscription.unsubscribe();
+ this.fetchCpfpSubscription.unsubscribe();
+ this.fetchRbfSubscription.unsubscribe();
+ this.fetchCachedTxSubscription.unsubscribe();
+ this.fetchAccelerationSubscription.unsubscribe();
+ this.txReplacedSubscription.unsubscribe();
+ this.txRbfInfoSubscription.unsubscribe();
+ this.queryParamsSubscription.unsubscribe();
+ this.flowPrefSubscription.unsubscribe();
+ this.urlFragmentSubscription.unsubscribe();
+ this.mempoolBlocksSubscription.unsubscribe();
+ this.mempoolPositionSubscription.unsubscribe();
+ this.mempoolBlocksSubscription.unsubscribe();
+ this.blocksSubscription.unsubscribe();
+ this.miningSubscription?.unsubscribe();
+ this.currencyChangeSubscription?.unsubscribe();
+ this.leaveTransaction();
+ }
+}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 72d9eb04d..2a47077ca 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -50,6 +50,7 @@ import { BlockOverviewGraphComponent } from '../components/block-overview-graph/
import { BlockOverviewTooltipComponent } from '../components/block-overview-tooltip/block-overview-tooltip.component';
import { BlockFiltersComponent } from '../components/block-filters/block-filters.component';
import { AddressGroupComponent } from '../components/address-group/address-group.component';
+import { TrackerComponent } from '../components/tracker/tracker.component';
import { SearchFormComponent } from '../components/search-form/search-form.component';
import { AddressLabelsComponent } from '../components/address-labels/address-labels.component';
import { FooterComponent } from '../components/footer/footer.component';
@@ -156,6 +157,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
BlockFiltersComponent,
TransactionsListComponent,
AddressGroupComponent,
+ TrackerComponent,
SearchFormComponent,
AddressLabelsComponent,
FooterComponent,
@@ -289,6 +291,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
BlockFiltersComponent,
TransactionsListComponent,
AddressGroupComponent,
+ TrackerComponent,
SearchFormComponent,
AddressLabelsComponent,
FooterComponent,