Merge pull request #4959 from mempool/mononaut/pizza

WIP (work-in-pizza)

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: [],

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html

@@ -0,0 +1,47 @@
+<div class="container card" style="padding: 20px; background: var(--bg)">
+
+  <div class="row">
+    <div class="col-sm">
+      <h1 style="font-size: larger;">Accelerate your Bitcoin transaction?</h1>
+    </div>
+  </div>
+
+  <form class="mt-3">
+    <div class="row">
+      <div class="col-sm">
+        <div class="form-group form-check">
+          <input type="radio" class="form-check-input" id="accelerate" name="accelerate">
+          <label class="form-check-label d-flex flex-column" for="accelerate">
+            <span class="font-weight-bold">Accelerate</span>
+            <span class="text-muted">Settlement expected in 1 hour or less<br>10,000 sats ($7.00) fee</span>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <div class="form-group form-check">
+          <input type="radio" class="form-check-input" id="wait" name="accelerate" checked="checked">
+          <label class="form-check-label d-flex flex-column" for="wait">
+            <span class="font-weight-bold">Wait</span>
+            @if (!eta) {
+              <span class="text-muted">Settlement unlikely to occur within 24 hours</span>
+            } @else {
+              <span class="text-muted">Settlement estimated to occur <app-time kind="until" [time]="eta" [fastRender]="false" [fixedRender]="true"></app-time></span>
+            }
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="row mt-2">
+      <div class="col-sm d-flex flex-row justify-content-center">
+        <button type="submit" class="btn btn-light w-100 rounded-pill" style="max-width: 250px">
+          <img src="/resources/mempool-accelerator-sparkles-compressed.svg" height="25" class="mr-2" style="margin-left: -33px">
+          <span>Accelerate</span>
+        </button>
+      </div>
+    </div>
+  </form>
+
+  <span class="close-button" (click)="closeModal()">✖</span>
+</div>

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss

@@ -0,0 +1,5 @@
+.close-button {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+}

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
+import { Transaction } from '../../interfaces/electrs.interface';
+import { MempoolPosition } from '../../interfaces/node-api.interface';
+
+@Component({
+  selector: 'app-accelerate-checkout',
+  templateUrl: './accelerate-checkout.component.html',
+  styleUrls: ['./accelerate-checkout.component.scss']
+})
+export class AccelerateCheckout implements OnInit, OnDestroy {
+  @Input() tx: Transaction ;
+  @Input() eta: number;
+  @Output() close = new EventEmitter<null>();
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnDestroy() {
+  }
+
+  closeModal(): void {
+    console.log('close modal')
+    this.close.emit();
+  }
+}

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -124,13 +124,13 @@
 
 #arrow-up {
   position: relative;
-  left: 30px;
+  left: calc(var(--block-size) * 0.6);
-  top: 140px;
+  top: calc(var(--block-size) * 1.12);
   width: 0;
   height: 0;
-  border-left: 35px solid transparent;
+  border-left: calc(var(--block-size) * 0.3) solid transparent;
-  border-right: 35px solid transparent;
+  border-right: calc(var(--block-size) * 0.3) solid transparent;
-  border-bottom: 35px solid #FFF;
+  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
 }
 
 .flashing {

frontend/src/app/components/clockchain/clockchain.component.ts

@@ -11,7 +11,7 @@ import { StateService } from '../../services/state.service';
 export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
   @Input() width: number = 300;
   @Input() height: number = 60;
-  @Input() mode: 'mempool' | 'mined';
+  @Input() mode: 'mempool' | 'mined' | 'none';
   @Input() index: number = 0;
 
   mempoolBlocks: number = 3;

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -51,7 +51,7 @@
         </div>
       </ng-template>
     </div>
-    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
+    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + (blockWidth * 0.3) + containerOffset + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
   </div>
 </ng-container>
 

frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss

@@ -113,13 +113,13 @@
 
 #arrow-up {
   position: relative;
-  right: 75px;
+  right: calc(var(--block-size) * 0.6);
-  top: 140px;
+  top: calc(var(--block-size) * 1.12);
   width: 0;
   height: 0;
-  border-left: 35px solid transparent;
+  border-left: calc(var(--block-size) * 0.3) solid transparent;
-  border-right: 35px solid transparent;
+  border-right: calc(var(--block-size) * 0.3) solid transparent;
-  border-bottom: 35px solid #FFF;
+  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
 }
 
 .blockLink {

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -70,6 +70,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   tabHidden = false;
   feeRounding = '1.0-0';
 
+  maxArrowPosition = 0;
   rightPosition = 0;
   transition = 'background 2s, right 2s, transform 1s';
 
@@ -326,6 +327,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     if (blocks.length) {
       blocks[blocks.length - 1].isStack = blocks[blocks.length - 1].blockVSize > this.stateService.blockVSize;
     }
+    if (this.count) {
+      this.maxArrowPosition = (Math.min(blocks.length, this.count) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
+    } else {
+      this.maxArrowPosition = (Math.min(blocks.length, blocksAmount) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
+    }
     return blocks;
   }
 
@@ -386,7 +392,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     } else if (this.markIndex > -1) {
       clearTimeout(this.resetTransitionTimeout);
       this.transition = 'inherit';
-      this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
+      this.rightPosition = Math.min(this.maxArrowPosition, this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth);
       this.arrowVisible = true;
 
       this.resetTransitionTimeout = window.setTimeout(() => {
@@ -436,6 +442,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
         }
       }
     }
+    this.rightPosition = Math.min(this.maxArrowPosition, this.rightPosition);
   }
 
   mountEmptyBlocks() {

frontend/src/app/components/tracker/tracker-bar.component.html

@@ -0,0 +1,11 @@
+<div class="tracker-bar" [class.transitions]="transitionsEnabled">
+  <div class="stage {{ stages.waiting.state }}">Sent</div>
+  <div class="divider left-{{ stages.waiting.state }} right-{{ stages.pending.state }}"></div>
+  <div class="stage {{ stages.pending.state }}">Pending</div>
+  <div class="divider left-{{ stages.pending.state }} right-{{ stages.soon.state }}"></div>
+  <div class="stage {{ stages.soon.state }}">Soon</div>
+  <div class="divider left-{{ stages.soon.state }} right-{{ stages.next.state }}"></div>
+  <div class="stage {{ stages.next.state }}">Next block</div>
+  <div class="divider left-{{ stages.next.state }} right-{{ stages.confirmed.state }}"></div>
+  <div class="stage {{ stages.confirmed.state }}">Confirmed</div>
+</div>

frontend/src/app/components/tracker/tracker-bar.component.scss

@@ -0,0 +1,136 @@
+.tracker-bar {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+
+  --div-left-color: var(--box-bg);
+  --div-right-color: var(--box-bg);
+  --stage-color: var(--box-bg);
+
+  font-size: clamp(5px, 2.5vw, 15px);
+  height: clamp(15px, 7.5vw, 45px);
+
+  .stage {
+    overflow: hidden;
+    border-top: solid 2px var(--stat-box-bg);
+    border-bottom: solid 2px var(--stat-box-bg);
+    background: var(--stage-color);
+    color: var(--transparent-fg);
+    padding: 1em;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: hidden;
+    white-space: no-break;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:first-child {
+      border-left: solid 2px var(--stat-box-bg);
+      border-top-left-radius: 1.6em;
+      border-bottom-left-radius: 1.6em;
+      padding-left: 1.6em;
+    }
+    &:last-child {
+      border-right: solid 2px var(--stat-box-bg);
+      border-top-right-radius: 1.6em;
+      border-bottom-right-radius: 1.6em;
+    }
+    &:nth-child(4n + 3) {
+      --stage-color: var(--secondary);
+    }
+    &.done {
+      --stage-color: var(--primary);
+      color: white;
+    }
+    &.current {
+      --stage-color: var(--tertiary);
+      color: white;
+    }
+    &.next {
+      animation: 1s linear alternate infinite pulse-next;
+    }
+  }
+
+  .divider {
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    flex-grow: 0;
+    background: var(--stat-box-bg);
+    border-top: solid 2px var(--stat-box-bg);
+    border-bottom: solid 2px var(--stat-box-bg);
+
+    &.left-done {
+      --div-left-color: var(--primary);
+    }
+    &.left-current {
+      --div-left-color: var(--tertiary);
+    }
+    &.left-blank, &.left-next {
+      &:nth-child(4n + 0) {
+        --div-left-color: var(--secondary);
+      }
+    }
+    &.left-next {
+      animation: 1s linear alternate infinite pulse-next-top;
+    }
+    &.right-done {
+      --div-right-color: var(--primary);
+    }
+    &.right-current {
+      --div-right-color: var(--tertiary);
+    }
+    &.right-blank, &.right-next {
+      &:nth-child(4n + 2) {
+        --div-right-color: var(--secondary);
+      }
+    }
+    &.right-next {
+      animation: 1s linear alternate infinite pulse-next-bottom;
+    }
+
+    &::after, &::before {
+      content: '';
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: absolute;
+      transform: skew(160deg) translate(58%);
+      background: var(--div-right-color);
+    }
+    &::before {
+      transform: skew(160deg) translate(-58%);
+      background: var(--div-left-color);
+    }
+
+    width: clamp(5px, 2.5vw, 15px);
+  }
+
+  &.transitions {
+    .stage, .divider, .divider::before, .divider::after {
+      transition: color 500ms, border-color 500ms, background-color 500ms;
+    }
+  }
+}
+
+@keyframes pulse-next {
+  to {
+    border-color: var(--tertiary);
+    text-shadow: 0 0 0.8em var(--tertiary);
+  }
+}
+
+@keyframes pulse-next-top {
+  to {
+    border-top-color: var(--tertiary);
+  }
+}
+
+@keyframes pulse-next-bottom {
+  to {
+    border-bottom-color: var(--tertiary);
+  }
+}

frontend/src/app/components/tracker/tracker-bar.component.ts

@@ -0,0 +1,72 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+
+export type TrackerStage = 'waiting' | 'pending' | 'soon' | 'next' | 'confirmed';
+
+@Component({
+  selector: 'app-tracker-bar',
+  templateUrl: './tracker-bar.component.html',
+  styleUrls: ['./tracker-bar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TrackerBarComponent implements OnInit, OnChanges {
+  @Input() stage: TrackerStage = 'waiting';
+
+  transitionsEnabled: boolean = false;
+  
+  stages = {
+    waiting: {
+      state: 'blank',
+    },
+    pending: {
+      state: 'blank',
+    },
+    soon: {
+      state: 'blank',
+    },
+    next: {
+      state: 'blank',
+    },
+    confirmed: {
+      state: 'blank',
+    },
+  };
+  stageOrder: TrackerStage[] = ['waiting', 'pending', 'soon', 'next', 'confirmed'];
+
+  constructor (
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.setStage();
+    setTimeout(() => {
+      this.transitionsEnabled = true;
+    }, 100)
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.stage) {
+      this.setStage();
+    }
+  }
+
+  setStage() {
+    let matched = 0;
+    for (let stage of this.stageOrder) {
+      if (stage === this.stage) {
+        this.stages[stage].state = 'current';
+        matched = 1;
+      } else {
+        if (matched > 1) {
+          this.stages[stage].state = 'blank';
+        } else if (matched) {
+          this.stages[stage].state = 'next';
+          matched++;
+        } else {
+          this.stages[stage].state = 'done';
+        }
+      }
+    }
+    this.stages = this.stages;
+    this.cd.markForCheck();
+  }
+}

frontend/src/app/components/tracker/tracker.component.html

@@ -0,0 +1,106 @@
+<div class="mobile-wrapper">
+  <div class="mobile-container">
+    <div class="panel">
+      <div class="field">
+        <div class="label" i18n="shared.transaction">Transaction</div>
+        <div class="value">
+          <app-truncate [text]="txId" [lastChars]="12" [link]="['/tx/' | relativeUrl, txId]">
+            <app-clipboard [text]="txId"></app-clipboard>
+          </app-truncate>
+        </div>
+      </div>
+    </div>
+      <div class="blockchain-wrapper" [style]="{ height: blockchainHeight * 1.16 + 'px' }">
+        <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>
+      <div class="explain">
+        <div class="field">
+          @switch (trackerStage) {
+            @case ('waiting') {
+              <span i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
+            }
+            @case ('pending') {
+              <span i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
+            }
+            @case ('soon') {
+              <span i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span>
+            }
+            @case ('next') {
+              <span i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span>
+            }
+            @case ('confirmed') {
+              <span i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
+            }
+          }
+        </div>
+        @if (tx && !tx.status?.confirmed && mempoolPosition) {
+          <div class="field">
+            <div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
+            <div class="value">
+              <span class="justify-content-end d-flex align-items-center">
+                @if (mempoolPosition?.block >= 7) {
+                  <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
+                } @else {
+                  <app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
+                }
+                @if (isMobile && paymentType === 'cashapp' && accelerationEligible && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
+                  <a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+                }
+              </span>
+            </div>
+          </div>
+        } @else if (tx && tx.status?.confirmed) {
+          <div class="field">
+            <div class="label" i18n="transaction.block-height">Block height</div>
+            <div class="value">
+              <span class="justify-content-end d-flex align-items-center">
+                <a [routerLink]="['/block/' | relativeUrl, tx.status?.block_height]" class="block-link">{{ tx.status?.block_height }}</a>
+                <div class="confirmations">
+                  <app-confirmations
+                    *ngIf="tx"
+                    [chainTip]="latestBlock?.height"
+                    [height]="tx?.status?.block_height"
+                  ></app-confirmations>
+                </div>
+              </span>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+
+    <div class="bottom-panel">
+      @if (showAccelerationSummary) {
+        <app-accelerate-checkout *ngIf="(da$ | async) as da;" [tx]="tx" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false"></app-accelerate-checkout>
+      } @else {
+        <div class="progress-icon">
+          @switch (trackerStage) {
+            @case ('waiting') {
+              <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
+            }
+            @case ('pending') {
+              <fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
+            }
+            @case ('soon') {
+              <fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
+            }
+            @case ('next') {
+              <fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon>
+            }
+            @case ('confirmed') {
+              <fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon>
+            }
+          }
+        </div>
+      }
+    </div>
+
+    <div class="footer-link" [routerLink]="['/tx' | relativeUrl, tx?.txid]">
+      <span>See more details <fa-icon [icon]="['fas', 'arrow-alt-circle-right']"></fa-icon></span>
+    </div>
+  </div>
+</div>

frontend/src/app/components/tracker/tracker.component.scss

@@ -0,0 +1,104 @@
+.mobile-wrapper {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile-container {
+  width: 100vw;
+  height: 100vh;
+  max-width: 600px;
+  max-height: 1000px;
+  box-sizing: border-box;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+
+  & > * {
+    flex-shrink: 0;
+  }
+}
+
+.blockchain-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.panel {
+  background: var(--bg);
+}
+
+.field {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  width: 100%;
+  max-width: 100%;
+  padding: 1em;
+
+  &:nth-child(even) {
+    background: var(--stat-box-bg);
+  }
+
+  .label {
+    margin-right: 1em;
+  }
+  .value {
+    flex-shrink: 1;
+    flex-grow: 1;
+    width: 0;
+    white-space: nowrap;
+  }
+}
+
+.tracker-bar {
+  padding: 1em 0.5em 0;
+}
+
+.accelerate {
+  display: flex !important;
+  align-self: auto;
+  margin-left: 1em;
+  background-color: var(--tertiary);
+}
+
+.confirmations {
+  margin-left: 1em;
+}
+
+.accelerateFullSize {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem 0.25rem;
+  background-color: #653b9c;
+}
+
+.bottom-panel {
+  flex-grow: 1;
+}
+
+.progress-icon {
+  font-size: clamp(50px, 30vw, 200px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0.5em;
+  background: var(--primary);
+  color: white;
+}

frontend/src/app/components/tracker/tracker.component.ts

@@ -0,0 +1,697 @@
+import { Component, OnInit, OnDestroy, HostListener, Inject, ChangeDetectorRef, ChangeDetectionStrategy, NgZone } 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, 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 { Filter } 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 { PriceService } from '../../services/price.service';
+import { ServicesApiServices } from '../../services/services-api.service';
+import { EnterpriseService } from '../../services/enterprise.service';
+import { ZONE_SERVICE } from '../../injection-tokens';
+import { TrackerStage } from './tracker-bar.component';
+
+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'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TrackerComponent implements OnInit, OnDestroy {
+  network = '';
+  tx: Transaction;
+  txId: string;
+  txInBlockIndex: number;
+  mempoolPosition: MempoolPosition;
+  isLoadingTx = true;
+  error: any = undefined;
+  loadingCachedTx = false;
+  waitingForTransaction = false;
+  latestBlock: BlockExtended;
+  transactionTime = -1;
+  subscription: Subscription;
+  fetchCpfpSubscription: Subscription;
+  fetchRbfSubscription: Subscription;
+  fetchCachedTxSubscription: Subscription;
+  fetchAccelerationSubscription: Subscription;
+  txReplacedSubscription: Subscription;
+  mempoolPositionSubscription: Subscription;
+  mempoolBlocksSubscription: Subscription;
+  blocksSubscription: Subscription;
+  miningSubscription: Subscription;
+  currencyChangeSubscription: Subscription;
+  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;
+  isAcceleration: boolean = false;
+  filters: Filter[] = [];
+  showCpfpDetails = false;
+  fetchCpfp$ = new Subject<string>();
+  fetchRbfHistory$ = new Subject<string>();
+  fetchCachedTx$ = new Subject<string>();
+  fetchAcceleration$ = new Subject<string>();
+  fetchMiningInfo$ = new Subject<{ hash: string, height: number, txid: string }>();
+  isCached: boolean = false;
+  now = Date.now();
+  da$: Observable<DifficultyAdjustment>;
+  isMobile: boolean;
+  paymentType: 'bitcoin' | 'cashapp' = 'bitcoin';
+
+  trackerStage: TrackerStage = 'waiting';
+
+  blockchainHeight: number = 100;
+  blockchainWidth: number = 600;
+
+  hasEffectiveFeeRate: boolean;
+  accelerateCtaType: 'alert' | 'button' = 'button';
+  acceleratorAvailable: boolean = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
+  accelerationEligible: boolean = false;
+  showAccelerationSummary = false;
+  scrollIntoAccelPreview = false;
+  auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true;
+
+  constructor(
+    private route: ActivatedRoute,
+    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 enterpriseService: EnterpriseService,
+    private cd: ChangeDetectorRef,
+    private zone: NgZone,
+    @Inject(ZONE_SERVICE) private zoneService: any,
+  ) {}
+
+  ngOnInit() {
+    this.onResize();
+
+    window['setStage'] = ((stage: TrackerStage) => {
+      this.zone.run(() => {
+        this.trackerStage = stage;
+        this.cd.markForCheck();
+      });
+    }).bind(this);
+
+    this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
+
+    if (this.acceleratorAvailable && this.stateService.ref === 'https://cash.app/') {
+      this.paymentType = 'cashapp';
+    }
+
+    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.da$ = this.stateService.difficultyAdjustment$.pipe(
+      tap(() => {
+        this.now = Date.now();
+      })
+    );
+
+    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.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.transactionTime = tx.firstSeen || 0;
+
+        this.fetchRbfHistory$.next(this.tx.txid);
+      }
+    });
+
+    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')) {
+          const boostCost = acceleration.boostCost || (acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee);
+          acceleration.acceleratedFeeRate = Math.max(acceleration.effectiveFee, acceleration.effectiveFee + boostCost) / acceleration.effectiveVsize;
+          acceleration.boost = boostCost;
+
+          this.accelerationInfo = acceleration;
+          this.setIsAccelerated();
+        }
+      }
+    });
+
+    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);
+          }
+
+          if (txPosition.position?.block === 0) {
+            this.trackerStage = 'next';
+          } else if (txPosition.position?.block < 3){
+            this.trackerStage = 'soon';
+          } else {
+            this.trackerStage = 'pending';
+          }
+          if (txPosition.position?.block > 0 && this.tx.weight < 4000) {
+            this.accelerationEligible = true;
+          }
+        }
+      } 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];
+          } else {
+            this.txId = urlMatch[0];
+          }
+          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<Transaction>;
+          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.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);
+
+          if (!tx.status?.confirmed) {
+            this.trackerStage = 'pending';
+            if (tx.firstSeen) {
+              this.transactionTime = tx.firstSeen;
+            } else {
+              this.getTransactionTime();
+            }
+          } else {
+            this.trackerStage = 'confirmed';
+            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();
+
+          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.trackerStage = 'confirmed';
+        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.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;
+      }
+    });
+  }
+
+  handleLoadElectrsTransactionError(error: any): Observable<any> {
+    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));
+  }
+
+  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;
+  }
+
+  setIsAccelerated(initialState: boolean = false) {
+    this.isAcceleration = (this.tx.acceleration || (this.accelerationInfo && this.pool && this.accelerationInfo.pools.some(pool => (pool === this.pool.id || pool?.['pool_unique_id'] === this.pool.id))));
+  }
+
+  dismissAccelAlert(): void {
+    this.accelerateCtaType = 'button';
+  }
+
+  onAccelerateClicked() {
+    if (!this.txId) {
+      return;
+    }
+    this.enterpriseService.goal(8);
+    this.showAccelerationSummary = true && this.acceleratorAvailable;
+    this.scrollIntoAccelPreview = !this.scrollIntoAccelPreview;
+    return false;
+  }
+
+  resetTransaction() {
+    this.error = undefined;
+    this.tx = null;
+    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;
+    this.accelerationEligible = false;
+    this.trackerStage = 'waiting';
+    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);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    this.isMobile = window.innerWidth < 850;
+    this.blockchainWidth = Math.min(600, window.innerWidth);
+    this.blockchainHeight = this.blockchainWidth / 5;
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+    this.fetchCpfpSubscription.unsubscribe();
+    this.fetchRbfSubscription.unsubscribe();
+    this.fetchCachedTxSubscription.unsubscribe();
+    this.fetchAccelerationSubscription.unsubscribe();
+    this.txReplacedSubscription.unsubscribe();
+    this.mempoolBlocksSubscription.unsubscribe();
+    this.mempoolPositionSubscription.unsubscribe();
+    this.mempoolBlocksSubscription.unsubscribe();
+    this.blocksSubscription.unsubscribe();
+    this.miningSubscription?.unsubscribe();
+    this.currencyChangeSubscription?.unsubscribe();
+    this.leaveTransaction();
+  }
+}

frontend/src/app/services/state.service.ts

@@ -192,6 +192,10 @@ export class StateService {
       }
     });
 
+    if (this.ref === 'https://cash.app/' && window.innerWidth < 850 && window.location.pathname.startsWith('/tx/')) {
+      this.router.navigate(['/tracker/' + window.location.pathname.slice(4)]);
+    }
+
     this.liveMempoolBlockTransactions$ = merge(
       this.mempoolBlockTransactions$.pipe(map(transactions => { return { transactions }; })),
       this.mempoolBlockDelta$.pipe(map(delta => { return { delta }; })),

frontend/src/app/shared/shared.module.ts

@@ -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 } 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 } 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';
@@ -50,6 +50,8 @@ 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 { TrackerBarComponent } from '../components/tracker/tracker-bar.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';
@@ -96,6 +98,7 @@ import { MempoolErrorComponent } from './components/mempool-error/mempool-error.
 import { AccelerationsListComponent } from '../components/acceleration/accelerations-list/accelerations-list.component';
 import { PendingStatsComponent } from '../components/acceleration/pending-stats/pending-stats.component';
 import { AccelerationStatsComponent } from '../components/acceleration/acceleration-stats/acceleration-stats.component';
+import { AccelerateCheckout } from '../components/accelerate-checkout/accelerate-checkout.component';
 
 import { BlockViewComponent } from '../components/block-view/block-view.component';
 import { EightBlocksComponent } from '../components/eight-blocks/eight-blocks.component';
@@ -156,6 +159,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     BlockFiltersComponent,
     TransactionsListComponent,
     AddressGroupComponent,
+    TrackerComponent,
+    TrackerBarComponent,
     SearchFormComponent,
     AddressLabelsComponent,
     FooterComponent,
@@ -212,6 +217,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     MempoolErrorComponent,
     AccelerationsListComponent,
     AccelerationStatsComponent,
+    AccelerateCheckout,
     PendingStatsComponent,
     HttpErrorComponent,
   ],
@@ -289,6 +295,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     BlockFiltersComponent,
     TransactionsListComponent,
     AddressGroupComponent,
+    TrackerComponent,
+    TrackerBarComponent,
     SearchFormComponent,
     AddressLabelsComponent,
     FooterComponent,
@@ -334,6 +342,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     MempoolErrorComponent,
     AccelerationsListComponent,
     AccelerationStatsComponent,
+    AccelerateCheckout,
     PendingStatsComponent,
     HttpErrorComponent,
 
@@ -407,5 +416,8 @@ export class SharedModule {
     library.addIcons(faCheck);
     library.addIcons(faRocket);
     library.addIcons(faScaleBalanced);
+    library.addIcons(faHourglassStart);
+    library.addIcons(faHourglassHalf);
+    library.addIcons(faHourglassEnd);
   }
 }

frontend/src/resources/mempool-accelerator-sparkles-compressed.svg

@@ -0,0 +1 @@
+<svg data-name="Layer 1" width="979.085" height="747.647" viewBox="0 0 734.315 560.74" xmlns="http://www.w3.org/2000/svg"><path style="fill:#7b61aa;fill-rule:evenodd;stroke-width:0" transform="translate(-68.202 -122.51)" d="m470.9 400.54 53.51 20.55-19.71 51.32 37.42 14.36 19.7-51.32 52.64 20.21 15.39-40.09-52.64-20.21 20.02-52.15-37.41-14.36L539.8 381l-53.51-20.55zm-47.17 235.11 53.73-19.96 19.14 51.53 37.57-13.95-19.14-51.53 52.85-19.64-14.95-40.25-52.85 19.63-19.45-52.36-37.57 13.95 19.45 52.37-53.73 19.95zM83.14 479.9l53.73-19.96 19.15 51.53 37.57-13.95-19.14-51.53 52.85-19.64-14.95-40.25-52.86 19.63-19.45-52.36-37.57 13.95 19.45 52.37-53.73 19.95zM403 288.01l49.16-29.46 28.26 47.16 34.38-20.6-28.25-47.15 48.36-28.98-22.07-36.84-48.36 28.98-28.71-47.92-34.38 20.6 28.7 47.92-49.16 29.45zm-249.99-26.6 69.39-11.35 10.88 66.56 48.53-7.94-10.88-66.55 68.25-11.16-8.5-51.99-68.25 11.16-11.06-67.63-48.53 7.93 11.06 67.63-69.39 11.35zm169.87 173.4 40.47 9.7-9.3 38.8 28.29 6.78 9.3-38.8 39.8 9.53 7.26-30.31-39.8-9.54 9.45-39.43-28.29-6.78-9.45 39.43-40.46-9.69zm356.55 109.52 45.87-33 31.65 44 32.08-23.08-31.65-44 45.13-32.46-24.73-34.37-45.12 32.46-32.16-44.71-32.08 23.08 32.16 44.71-45.88 33zm-46.36 103.16 41.42-3.97 3.8 39.73 28.96-2.78-3.8-39.72 40.74-3.9-2.97-31.03-40.74 3.9-3.86-40.36-28.97 2.77 3.87 40.36-41.42 3.97z"/></svg>