diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html index 0d9d37f42..e6e5843df 100644 --- a/frontend/src/app/components/tracker/tracker.component.html +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -117,68 +117,71 @@
  - } @else if (showAccelerationSummary) { - - - } @else { - @if (tx?.acceleration && !tx.status?.confirmed) { -
- -
- Your transaction has been accelerated - } @else { - @switch (trackerStage) { - @case ('waiting') { -
-
-
- Waiting for your transaction to appear in the mempool - } - @case ('pending') { -
- -
- Your transaction is in the mempool, but it will not be confirmed for some time. - } - @case ('soon') { -
- -
- Your transaction is near the top of the mempool, and is expected to confirm soon. - } - @case ('next') { -
- -
- Your transaction is expected to confirm in the next block - } - @case ('confirmed') { -
- -
- Your transaction is confirmed! - } - @case ('replaced') { -
- -
- Your transaction has been replaced by a newer version! + @if (!tx.status?.confirmed && showAccelerationSummary) { + + + + } +
+ @if (tx?.acceleration && !tx.status?.confirmed) { +
+ +
+ Your transaction has been accelerated + } @else { + @switch (trackerStage) { + @case ('waiting') { +
+
+
+ Waiting for your transaction to appear in the mempool + } + @case ('pending') { +
+ +
+ Your transaction is in the mempool, but it will not be confirmed for some time. + } + @case ('soon') { +
+ +
+ Your transaction is near the top of the mempool, and is expected to confirm soon. + } + @case ('next') { +
+ +
+ Your transaction is expected to confirm in the next block + } + @case ('confirmed') { +
+ +
+ Your transaction is confirmed! + } + @case ('replaced') { +
+ +
+ Your transaction has been replaced by a newer version! + } } } - } +
} diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss index ffa6208b7..56f0b5f0a 100644 --- a/frontend/src/app/components/tracker/tracker.component.scss +++ b/frontend/src/app/components/tracker/tracker.component.scss @@ -166,7 +166,7 @@ display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: start; .explainer { margin: 0 1em; @@ -178,6 +178,15 @@ font-size: clamp(30px, 20vw, 150px); } +.status-panel { + &.small-status { + min-height: 180px; + .progress-icon { + font-size: clamp(20px, 13vw, 100px); + } + } +} + .footer-link { display: flex; flex-direction: row; diff --git a/frontend/src/app/components/tracker/tracker.component.ts b/frontend/src/app/components/tracker/tracker.component.ts index 1b498cfb4..4ba00c189 100644 --- a/frontend/src/app/components/tracker/tracker.component.ts +++ b/frontend/src/app/components/tracker/tracker.component.ts @@ -596,6 +596,9 @@ export class TrackerComponent implements OnInit, OnDestroy { this.isAccelerated$, this.txChanged$, ]).pipe( + filter(([position, mempoolBlocks, da, isAccelerated]) => { + return this.tx && !this.tx?.status?.confirmed && position && this.tx.txid === position.txid; + }), map(([position, mempoolBlocks, da, isAccelerated]) => { return this.etaService.calculateETA( this.network,