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 @@ +
+

fiat price

+

+ +

+
+
+

priority rate

+

{{ recommendedFees.fastestFee }} sat/vB

+
+
+

+

block size

+
+
+

{{ block.tx_count | number }}

+

transactions

+
+ +
+

+

memory usage

+
+
+

{{ 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; }