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 @@
Height | -Timestamp | -Mined | +Height | +Timestamp | +Mined | Transactions | Size | Filled | @@ -16,7 +16,7 @@{{ block.size | bytes: 2 }} |
-
+
|
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;
---|