mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 14:50:52 +01:00
Code Issues Projects Releases Wiki Activity

Refactor first seen tooltip labels

Browse source
This commit is contained in:
Mononaut 2024-04-01 07:00:46 +00:00
parent 9b456954b1
commit 93956d0ed4
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
3 changed files with 62 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
View file

@ -14,13 +14,25 @@
<a [routerLink]="['/tx/' | relativeUrl, txid]">{{ txid | shortenString : 16}}</a>
</td>
</tr>
<tr *ngIf="time && !relativeTime">
<td class="label" i18n="transaction.first-seen|Transaction first seen">First seen</td>
<td class="value"><i><app-time kind="since" [time]="time" [fastRender]="true"></app-time></i></td>
</tr>
<tr *ngIf="time && relativeTime">
<td class="label" i18n="transaction.confirmed-after|Transaction confirmed after">Confirmed</td>
<td class="value"><i><app-time kind="span" [time]="relativeTime - time"></app-time></i></td>
<tr *ngIf="time">
<ng-container [ngSwitch]="timeMode">
<ng-container *ngSwitchCase="'mempool'">
<td class="label" i18n="transaction.first-seen|Transaction first seen">First seen</td>
<td class="value"><i><app-time kind="since" [time]="time" [fastRender]="true"></app-time></i></td>
</ng-container>
<ng-container *ngSwitchCase="'missed'">
<td class="label" i18n="transaction.first-seen|Transaction first seen">First seen</td>
<td class="value"><i><app-time kind="before" [time]="relativeTime - time"></app-time></i></td>
</ng-container>
<ng-container *ngSwitchCase="'after'">
<td class="label" i18n="transaction.first-seen|Transaction first seen">First seen</td>
<td class="value"><i><app-time kind="span" [time]="time - relativeTime"></app-time></i></td>
</ng-container>
<ng-container *ngSwitchCase="'mined'">
<td class="label" i18n="transaction.confirmed-after|Transaction confirmed after">Confirmed</td>
<td class="value"><i><app-time kind="span" [time]="relativeTime - time"></app-time></i></td>
</ng-container>
</ng-container>
</tr>
<tr>
<td class="label" i18n="dashboard.latest-transactions.amount">Amount</td>

17
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts
View file

@ -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();
}
}

28
frontend/src/app/components/time/time.component.ts
View file

@ -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) {