diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html index f4c0fdf3f..974c4c1db 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html @@ -14,13 +14,25 @@ {{ txid | shortenString : 16}} - - First seen - - - - Confirmed - + + + + First seen + + + + First seen + + + + First seen + + + + Confirmed + + + Amount diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts index c6f656796..cdb4c7367 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts @@ -29,6 +29,7 @@ export class BlockOverviewTooltipComponent implements OnChanges { effectiveRate; acceleration; hasEffectiveRate: boolean = false; + timeMode: 'mempool' | 'mined' | 'missed' | 'after' = 'mempool'; filters: Filter[] = []; activeFilters: { [key: string]: boolean } = {}; @@ -76,6 +77,22 @@ export class BlockOverviewTooltipComponent implements OnChanges { this.activeFilters[filter.key] = true; } } + + if (!this.relativeTime) { + this.timeMode = 'mempool'; + } else { + if (this.tx?.context === 'actual' || this.tx?.status === 'found') { + this.timeMode = 'mined'; + } else { + const time = this.relativeTime || Date.now(); + if (this.time <= time) { + this.timeMode = 'missed'; + } else { + this.timeMode = 'after'; + } + } + } + this.cd.markForCheck(); } } diff --git a/frontend/src/app/components/time/time.component.ts b/frontend/src/app/components/time/time.component.ts index 5b4a93ca6..954e3d157 100644 --- a/frontend/src/app/components/time/time.component.ts +++ b/frontend/src/app/components/time/time.component.ts @@ -23,7 +23,7 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy { @Input() time: number; @Input() dateString: number; - @Input() kind: 'plain' | 'since' | 'until' | 'span' = 'plain'; + @Input() kind: 'plain' | 'since' | 'until' | 'span' | 'before' = 'plain'; @Input() fastRender = false; @Input() fixedRender = false; @Input() relative = false; @@ -86,7 +86,9 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy { seconds = Math.floor(this.time); } - if (seconds < 60) { + if (seconds < 1 && this.kind === 'span') { + return $localize`:@@date-base.immediately:Immediately`; + } else if (seconds < 60) { if (this.relative || this.kind === 'since') { return $localize`:@@date-base.just-now:Just now`; } else if (this.kind === 'until') { @@ -206,6 +208,28 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy { } } break; + case 'before': + if (number === 1) { + switch (unit) { // singular (1 day) + case 'year': return $localize`:@@time-span:${dateStrings.i18nYear}:DATE: before`; break; + case 'month': return $localize`:@@time-span:${dateStrings.i18nMonth}:DATE: before`; break; + case 'week': return $localize`:@@time-span:${dateStrings.i18nWeek}:DATE: before`; break; + case 'day': return $localize`:@@time-span:${dateStrings.i18nDay}:DATE: before`; break; + case 'hour': return $localize`:@@time-span:${dateStrings.i18nHour}:DATE: before`; break; + case 'minute': return $localize`:@@time-span:${dateStrings.i18nMinute}:DATE: before`; break; + case 'second': return $localize`:@@time-span:${dateStrings.i18nSecond}:DATE: before`; break; + } + } else { + switch (unit) { // plural (2 days) + case 'year': return $localize`:@@time-span:${dateStrings.i18nYears}:DATE: before`; break; + case 'month': return $localize`:@@time-span:${dateStrings.i18nMonths}:DATE: before`; break; + case 'week': return $localize`:@@time-span:${dateStrings.i18nWeeks}:DATE: before`; break; + case 'day': return $localize`:@@time-span:${dateStrings.i18nDays}:DATE: before`; break; + case 'hour': return $localize`:@@time-span:${dateStrings.i18nHours}:DATE: before`; break; + case 'minute': return $localize`:@@time-span:${dateStrings.i18nMinutes}:DATE: before`; break; + case 'second': return $localize`:@@time-span:${dateStrings.i18nSeconds}:DATE: before`; break; + } + } break; default: if (number === 1) {