diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index df41afe05..6db9f84ff 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -10,7 +10,6 @@ import { AppComponent } from './components/app/app.component'; import { StartComponent } from './components/start/start.component'; import { ElectrsApiService } from './services/electrs-api.service'; -import { TimeSincePipe } from './pipes/time-since/time-since.pipe'; import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe'; import { VbytesPipe } from './pipes/bytes-pipe/vbytes.pipe'; import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe'; @@ -55,7 +54,6 @@ import { AudioService } from './services/audio.service'; TransactionComponent, BlockComponent, TransactionsListComponent, - TimeSincePipe, BytesPipe, VbytesPipe, WuBytesPipe, diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html index 320172193..4892bcfef 100644 --- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html +++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html @@ -1,8 +1,8 @@ - - - + + + @@ -16,7 +16,7 @@ diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.scss b/frontend/src/app/components/latest-blocks/latest-blocks.component.scss index e69de29bb..9bf1d1822 100644 --- a/frontend/src/app/components/latest-blocks/latest-blocks.component.scss +++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.scss @@ -0,0 +1,3 @@ +.progress-mempool { + background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%); +} \ No newline at end of file diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.ts b/frontend/src/app/components/latest-blocks/latest-blocks.component.ts index 99e0a2bc9..6c6fa71e5 100644 --- a/frontend/src/app/components/latest-blocks/latest-blocks.component.ts +++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.ts @@ -37,7 +37,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy { return; } - if (block.height === this.blocks[0].height) { + if (block.height <= this.blocks[0].height) { return; } diff --git a/frontend/src/app/components/time-since/time-since.component.ts b/frontend/src/app/components/time-since/time-since.component.ts index 9f6f8e62d..de683cea6 100644 --- a/frontend/src/app/components/time-since/time-since.component.ts +++ b/frontend/src/app/components/time-since/time-since.component.ts @@ -2,12 +2,12 @@ import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDet @Component({ selector: 'app-time-since', - template: `{{ time | timeSince : trigger }}`, + template: `{{ text }}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class TimeSinceComponent implements OnInit, OnDestroy { interval: number; - trigger = 0; + text: string; @Input() time: number; @Input() fastRender = false; @@ -17,8 +17,9 @@ export class TimeSinceComponent implements OnInit, OnDestroy { ) { } ngOnInit() { + this.text = this.calculate(); this.interval = window.setInterval(() => { - this.trigger++; + this.text = this.calculate(); this.ref.markForCheck(); }, 1000 * (this.fastRender ? 1 : 60)); } @@ -27,4 +28,33 @@ export class TimeSinceComponent implements OnInit, OnDestroy { clearInterval(this.interval); } + calculate() { + const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000); + if (seconds < 60) { + return '< 1 min'; + } + const intervals = { + year: 31536000, + month: 2592000, + week: 604800, + day: 86400, + hour: 3600, + minute: 60, + second: 1 + }; + let counter; + for (const i in intervals) { + if (intervals.hasOwnProperty(i)) { + counter = Math.floor(seconds / intervals[i]); + if (counter > 0) { + if (counter === 1) { + return counter + ' ' + i; // singular (1 day ago) + } else { + return counter + ' ' + i + 's'; // plural (2 days ago) + } + } + } + } + } + } diff --git a/frontend/src/app/pipes/time-since/time-since.pipe.ts b/frontend/src/app/pipes/time-since/time-since.pipe.ts deleted file mode 100644 index d18b76fc0..000000000 --- a/frontend/src/app/pipes/time-since/time-since.pipe.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({ name: 'timeSince' }) -export class TimeSincePipe implements PipeTransform { - transform(value: any, args?: any): any { - if (value) { - const seconds = Math.floor((+new Date() - +new Date(value * 1000)) / 1000); - if (seconds < 60) { - return '< 1 minute'; - } - const intervals = { - year: 31536000, - month: 2592000, - week: 604800, - day: 86400, - hour: 3600, - minute: 60, - second: 1 - }; - let counter; - for (const i in intervals) { - if (intervals.hasOwnProperty(i)) { - counter = Math.floor(seconds / intervals[i]); - if (counter > 0) { - if (counter === 1) { - return counter + ' ' + i; // singular (1 day ago) - } else { - return counter + ' ' + i + 's'; // plural (2 days ago) - } - } - } - } - } - return value; - } -} diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 11b2aa7e5..64db16396 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -7,7 +7,7 @@ $gray-700: #fff; $nav-tabs-link-active-bg: #11131f; -$primary: #2b89c7; +$primary: #105fb0; $secondary: #2d3348; $link-color: #1bd8f4;
HeightTimestampMinedHeightTimestampMined Transactions Size Filled{{ block.size | bytes: 2 }}
-
+