Add clock statistics

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;

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

@@ -31,4 +31,32 @@
       </div>
     </app-clock-face>
   </div>
+  <div class="stats top left">
+    <p>fiat price</p>
+    <p>
+      <app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="white-color"></app-fiat>
+    </p>
+  </div>
+  <div class="stats top right">
+    <p>priority rate</p>
+    <p *ngIf="recommendedFees$ | async as recommendedFees;">{{ recommendedFees.fastestFee }} sat/vB</p>
+  </div>
+  <div *ngIf="mode !== 'mempool'" class="stats bottom left">
+    <p [innerHTML]="block.size | bytes: 2"></p>
+    <p>block size</p>
+  </div>
+  <div *ngIf="mode !== 'mempool'" class="stats bottom right">
+    <p>{{ block.tx_count | number }}</p>
+    <p class="label">transactions</p>
+  </div>
+  <ng-container *ngIf="mempoolInfo$ | async as mempoolInfo;">
+    <div *ngIf="mode === 'mempool'" class="stats bottom left">
+      <p [innerHTML]="mempoolInfo.usage | bytes: 0"></p>
+      <p>memory usage</p>
+    </div>
+    <div *ngIf="mode === 'mempool'" class="stats bottom right">
+      <p>{{ mempoolInfo.size | number }}</p>
+      <p class="label">unconfirmed</p>
+    </div>
+  </ng-container>
 </div>

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 {

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<Recommendedfees>;
+  mempoolInfo$: Observable<MempoolInfo>;
   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();
   }

frontend/src/styles.scss

@@ -285,6 +285,10 @@ body {
   color: #fff;
 }
 
+.white-color {
+  color: white;
+}
+
 .green-color {
   color: #3bcc49;
 }