diff --git a/frontend/src/app/components/clock-face/clock-face.component.scss b/frontend/src/app/components/clock-face/clock-face.component.scss
index d671341a6..1ca2ce914 100644
--- a/frontend/src/app/components/clock-face/clock-face.component.scss
+++ b/frontend/src/app/components/clock-face/clock-face.component.scss
@@ -40,6 +40,7 @@
fill: none;
stroke: white;
stroke-width: 2px;
+ stroke-linecap: butt;
&.minor {
stroke-opacity: 0.5;
diff --git a/frontend/src/app/components/clock/clock.component.html b/frontend/src/app/components/clock/clock.component.html
index 74e06418d..ee62dd521 100644
--- a/frontend/src/app/components/clock/clock.component.html
+++ b/frontend/src/app/components/clock/clock.component.html
@@ -31,4 +31,32 @@
+
+
+
priority rate
+
{{ recommendedFees.fastestFee }} sat/vB
+
+
+
+
{{ block.tx_count | number }}
+
transactions
+
+
+
+
+
{{ mempoolInfo.size | number }}
+
unconfirmed
+
+
\ No newline at end of file
diff --git a/frontend/src/app/components/clock/clock.component.scss b/frontend/src/app/components/clock/clock.component.scss
index a27c62499..3ccf6c0df 100644
--- a/frontend/src/app/components/clock/clock.component.scss
+++ b/frontend/src/app/components/clock/clock.component.scss
@@ -10,6 +10,7 @@
flex-direction: column;
justify-content: flex-start;
+ --chain-height: 60px;
--clock-width: 300px;
.clockchain-bar, .clock-face {
@@ -37,6 +38,38 @@
align-items: center;
z-index: 1;
}
+
+ .stats {
+ position: absolute;
+ z-index: 3;
+
+ p {
+ margin: 0;
+ font-size: calc(0.05 * var(--clock-width));
+ line-height: calc(0.07 * var(--clock-width));
+ opacity: 0.8;
+
+ ::ng-deep .symbol {
+ font-size: inherit;
+ color: white;
+ }
+ }
+
+ &.top {
+ top: calc(var(--chain-height) + 2%);
+ }
+ &.bottom {
+ bottom: 2%;
+ }
+ &.left {
+ left: 5%;
+ }
+ &.right {
+ right: 5%;
+ text-align: end;
+ text-align: right;
+ }
+ }
}
.title-wrapper {
diff --git a/frontend/src/app/components/clock/clock.component.ts b/frontend/src/app/components/clock/clock.component.ts
index c804860af..bc4e5625e 100644
--- a/frontend/src/app/components/clock/clock.component.ts
+++ b/frontend/src/app/components/clock/clock.component.ts
@@ -1,8 +1,9 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Input, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
import { StateService } from '../../services/state.service';
import { BlockExtended } from '../../interfaces/node-api.interface';
import { WebsocketService } from '../../services/websocket.service';
+import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interface';
@Component({
selector: 'app-clock',
@@ -11,8 +12,10 @@ import { WebsocketService } from '../../services/websocket.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ClockComponent implements OnInit {
- @Input() mode: string = 'block';
+ @Input() mode: 'block' | 'mempool' = 'block';
blocksSubscription: Subscription;
+ recommendedFees$: Observable;
+ mempoolInfo$: Observable;
block: BlockExtended;
clockSize: number = 300;
chainWidth: number = 384;
@@ -47,6 +50,8 @@ export class ClockComponent implements OnInit {
this.cd.markForCheck();
}
});
+ this.recommendedFees$ = this.stateService.recommendedFees$;
+ this.mempoolInfo$ = this.stateService.mempoolInfo$;
}
getStyleForBlock(block: BlockExtended) {
@@ -75,7 +80,8 @@ export class ClockComponent implements OnInit {
height: `${size}px`,
};
this.wrapperStyle = {
- '--clock-width': `${this.clockSize}px`
+ '--clock-width': `${this.clockSize}px`,
+ '--chain-height': `${this.chainHeight}px`
};
this.cd.markForCheck();
}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index fbaaa5ed2..e58bcdc6a 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -285,6 +285,10 @@ body {
color: #fff;
}
+.white-color {
+ color: white;
+}
+
.green-color {
color: #3bcc49;
}