Merge pull request #5637 from mempool/natsoni/timezone-selection

Add timezone selector

frontend/src/app/components/blocks-list/blocks-list.component.html

@@ -49,7 +49,7 @@
             </div>
           </td>
           <td class="timestamp" *ngIf="!widget" [ngClass]="{'widget': widget, 'legacy': !isMempoolModule}">
-            &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm:ss' }}
+            <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm:ss'" [unixTime]="block.timestamp" [hideTimeSince]="true"></app-timestamp>
           </td>
           <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !isMempoolModule}">
             <a

frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html

@@ -56,8 +56,7 @@
               </ng-template>
             </td>
             <td class="timestamp text-left">
-              &lrm;{{ utxo.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
-              <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="utxo.blocktime"></app-time>)</i></div>
+              <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm'" [unixTime]="utxo.blocktime"></app-timestamp>
             </td>
             <td class="expires-in text-left" [ngStyle]="{ 'color': getGradientColor(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) }">
               {{ utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate < 0 ? -(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) : utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate }} <span i18n="shared.blocks" class="symbol">blocks</span>

frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html

@@ -53,8 +53,7 @@
               </ng-container>
             </td>
             <td class="timestamp text-left">
-              &lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
-              <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.blocktime"></app-time>)</i></div>
+              <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm'" [unixTime]="peg.blocktime"></app-timestamp>
             </td>
             <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0, 'glow-effect': peg.amount < 0 && peg.bitcoinaddress && !peg.bitcointxid}">
               <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>

frontend/src/app/components/pool/pool.component.html

@@ -194,7 +194,7 @@
             <a [routerLink]="['/block' | relativeUrl, block.id]">{{ block.height }}</a>
           </td>
           <td class="timestamp">
-            &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm:ss' }}
+            <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm:ss'" [unixTime]="block.timestamp" [hideTimeSince]="true"></app-timestamp>
           </td>
           <td class="mined">
             <app-time kind="since" [time]="block.timestamp" [fastRender]="true" [showTooltip]="true"></app-time>

frontend/src/app/components/timezone-selector/timezone-selector.component.html

@@ -0,0 +1,8 @@
+<div [formGroup]="timezoneForm" class="text-small text-center">
+    <select formControlName="mode" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 110px;" (change)="changeMode()">
+        <option value="local">UTC{{ localTimezoneOffset !== '+0' ? localTimezoneOffset : '' }} {{ localTimezoneName ? '- ' + localTimezoneName : '' }}</option>
+        <option value="+0" *ngIf="localTimezoneOffset !== '+0'">UTC - Greenwich Mean Time (GMT)</option>
+        <option disabled>────</option>
+        <option *ngFor="let timezone of timezones" [value]="timezone.offset">UTC{{ timezone.offset !== '+0' ? timezone.offset : '' }} - {{ timezone.name }}</option>
+    </select>
+</div>

frontend/src/app/components/timezone-selector/timezone-selector.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { StorageService } from '@app/services/storage.service';
+import { StateService } from '@app/services/state.service';
+import { timezones } from '@app/app.constants';
+
+
+@Component({
+  selector: 'app-timezone-selector',
+  templateUrl: './timezone-selector.component.html',
+  styleUrls: ['./timezone-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TimezoneSelectorComponent implements OnInit {
+  timezoneForm: UntypedFormGroup;
+  timezones = timezones;
+  localTimezoneOffset: string = '';
+  localTimezoneName: string;
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private stateService: StateService,
+    private storageService: StorageService,
+  ) { }
+
+  ngOnInit() {
+    this.setLocalTimezone();
+    this.timezoneForm = this.formBuilder.group({
+      mode: ['local'],
+    });
+    this.stateService.timezone$.subscribe((mode) => {
+      this.timezoneForm.get('mode')?.setValue(mode);
+    });
+  }
+
+  changeMode() {
+    const newMode = this.timezoneForm.get('mode')?.value;
+    this.storageService.setValue('timezone-preference', newMode);
+    this.stateService.timezone$.next(newMode);
+  }
+
+  setLocalTimezone() {
+    const offset = new Date().getTimezoneOffset();
+    const sign = offset <= 0 ? "+" : "-";
+    const absOffset = Math.abs(offset);
+    const hours = String(Math.floor(absOffset / 60));
+    const minutes = String(absOffset % 60).padStart(2, '0');
+    if (minutes === '00') {
+      this.localTimezoneOffset = `${sign}${hours}`;
+    } else {
+      this.localTimezoneOffset = `${sign}${hours.padStart(2, '0')}:${minutes}`;
+    }
+
+    const timezone = this.timezones.find(tz => tz.offset === this.localTimezoneOffset);
+    this.timezones = this.timezones.filter(tz => tz.offset !== this.localTimezoneOffset && tz.offset !== '+0');
+    this.localTimezoneName = timezone ? timezone.name : '';
+  }
+}

frontend/src/app/components/tracker/tracker.component.html

@@ -88,7 +88,7 @@
           <div class="field narrower mt-2">
             <div class="label" i18n="transaction.confirmed-at">Confirmed at</div>
             <div class="value">
-              &lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}
+              <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm'" [unixTime]="tx.status.block_time" [hideTimeSince]="true"></app-timestamp>
               <div class="lg-inline">
                 <i class="symbol">(<app-time kind="since" [time]="tx.status.block_time" [fastRender]="true" [showTooltip]="true"></app-time>)</i>
               </div>

frontend/src/app/components/transaction/transaction-details/transaction-details.component.html

@@ -61,10 +61,7 @@
     <tr>
       <td i18n="block.timestamp">Timestamp</td>
       <td>
-        &lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm:ss' }}
-        <div class="lg-inline">
-          <i class="symbol">(<app-time kind="since" [time]="tx.status.block_time" [fastRender]="true"></app-time>)</i>
-        </div>
+        <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm:ss'" [unixTime]="tx.status.block_time"></app-timestamp>
       </td>
     </tr>
   } @else {

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -6,7 +6,7 @@
       <app-truncate [text]="tx.txid"></app-truncate>
     </a>
     <div>
-      <ng-template [ngIf]="tx.status.confirmed">&lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm:ss' }}</ng-template>
+      <ng-template [ngIf]="tx.status.confirmed"><app-timestamp [customFormat]="'yyyy-MM-dd HH:mm:ss'" [unixTime]="tx.status.block_time" [hideTimeSince]="true"></app-timestamp></ng-template>
       <ng-template [ngIf]="!tx.status.confirmed && tx.firstSeen">
         <i><app-time kind="since" [time]="tx.firstSeen" [fastRender]="true" [showTooltip]="true"></app-time></i>
       </ng-template>