diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html index 44cb9192a..2d3d50d76 100644 --- a/frontend/src/app/components/tracker/tracker.component.html +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -20,30 +20,7 @@
-
-
- @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! - } - } - } -
+
@if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
First seen
@@ -103,29 +80,45 @@ @if (showAccelerationSummary) { } @else { -
- @if (tx?.acceleration && !tx.status?.confirmed) { + @if (tx?.acceleration && !tx.status?.confirmed) { +
- } @else { - @switch (trackerStage) { - @case ('waiting') { +
+ Your transaction has been accelerated + } @else { + @switch (trackerStage) { + @case ('waiting') { +
- } - @case ('pending') { +
+ Waiting for your transaction to appear in the mempool + } + @case ('pending') { +
- } - @case ('soon') { +
+ Your transaction is in the mempool, but it will not be confirmed for some time. + } + @case ('soon') { +
- } - @case ('next') { +
+ Your transaction is near the top of the mempool, and is expected to confirm soon. + } + @case ('next') { +
- } - @case ('confirmed') { +
+ Your transaction is expected to confirm in the next block + } + @case ('confirmed') { +
- } +
+ Your transaction is confirmed! } } -
+ } }
diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss index dec56e5f6..2abda231f 100644 --- a/frontend/src/app/components/tracker/tracker.component.scss +++ b/frontend/src/app/components/tracker/tracker.component.scss @@ -107,14 +107,19 @@ .bottom-panel { flex-grow: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .explainer { + margin: 0 1em; + text-align: center; + } } .progress-icon { font-size: clamp(30px, 20vw, 150px); - height: 100%; - display: flex; - align-items: center; - justify-content: center; } .footer-link {