+ @if (!tx.status.confirmed) {
+
+ }
@@ -12,7 +44,13 @@
-
+ @if (tx.status.confirmed) {
+
+ } @else if (standardETA && !tx.status.confirmed) {
+
+ }
@@ -25,128 +63,71 @@
First seen
-
0" kind="since" [time]="transactionTime">
+ @if (useAbsoluteTime) {
+
{{ transactionTime * 1000 | date }}
+ } @else {
+
+ }
-
+
-
-
+ @if (tx.status.confirmed) {
+
+ } @else {
+
+ }
+
+ @if (!tx.status.confirmed) {
+
+ }
-
Accelerated
-
-
+ @if (tx.status.confirmed) {
+
Accelerated
+ }
+
+ @if (!tx.status.confirmed) {
+
Accelerated{{ "" }}
+ }
+ @if (useAbsoluteTime) {
+
{{ acceleratedAt * 1000 | date }}
+ } @else {
+
+ }
+ @if (tx.status.confirmed) {
+ } @else {
+
+ }
-
-
-
+
+ @if (tx.status.confirmed) {
+
+ } @else {
+
+ }
+
+ @if (tx.status.confirmed) {
Mined
+ @if (useAbsoluteTime) {
+
{{ tx.status.block_time * 1000 | date }}
+ } @else {
+ }
+ }
-
+
-} @else if (acceleratedETA) {
-} @else if (standardETA) {
-
-
-
-
-
-
-
-
-
-
First seen
-
-
0" kind="since" [time]="transactionTime">
-
-
-
-
-
-
-
-
-
-
-}
\ No newline at end of file
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
index dd815ba45..93a0cdba1 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -209,7 +209,7 @@
}
.status {
- margin-top: -64px;
+ margin-top: -66px;
.badge.badge-waiting {
opacity: 0.5;
@@ -224,10 +224,20 @@
}
.time {
- margin-top: 33px;
+ margin-top: 32px;
font-size: 12px;
line-height: 16px;
white-space: nowrap;
+
+ &.offset-left {
+ @media (max-width: 650px) {
+ margin-left: -20px;
+ }
+ }
+
+ &.no-margin {
+ margin-top: 0px;
+ }
}
}
}
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
index 38d48dd05..c8dbed72b 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
@@ -19,15 +19,23 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
acceleratedAt: number;
now: number;
accelerateRatio: number;
+ useAbsoluteTime: boolean = false;
+ interval: number;
constructor() {}
ngOnInit(): void {
this.acceleratedAt = this.tx.acceleratedAt ?? new Date().getTime() / 1000;
+ this.now = Math.floor(new Date().getTime() / 1000);
+ this.useAbsoluteTime = this.tx.status.block_time < this.now - 7 * 24 * 3600;
+
+ this.interval = window.setInterval(() => {
+ this.now = Math.floor(new Date().getTime() / 1000);
+ this.useAbsoluteTime = this.tx.status.block_time < this.now - 7 * 24 * 3600;
+ }, 60000);
}
ngOnChanges(changes): void {
- this.now = Math.floor(new Date().getTime() / 1000);
// Hide standard ETA while we don't have a proper standard ETA calculation, see https://github.com/mempool/mempool/issues/65
// if (changes?.eta?.currentValue || changes?.standardETA?.currentValue || changes?.acceleratedETA?.currentValue) {
@@ -40,4 +48,8 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
// }
// }
}
+
+ ngOnDestroy(): void {
+ clearInterval(this.interval);
+ }
}