rename clock components

frontend/src/app/app-routing.module.ts

@@ -4,8 +4,8 @@ import { AppPreloadingStrategy } from './app.preloading-strategy'
 import { StartComponent } from './components/start/start.component';
 import { TransactionComponent } from './components/transaction/transaction.component';
 import { BlockComponent } from './components/block/block.component';
-import { ClockAComponent } from './components/clock/clock-a.component';
-import { ClockBComponent } from './components/clock/clock-b.component';
+import { ClockMinedComponent as ClockMinedComponent } from './components/clock/clock-mined.component';
+import { ClockMempoolComponent as ClockMempoolComponent } from './components/clock/clock-mempool.component';
 import { AddressComponent } from './components/address/address.component';
 import { MasterPageComponent } from './components/master-page/master-page.component';
 import { AboutComponent } from './components/about/about.component';
@@ -358,12 +358,12 @@ let routes: Routes = [
     ],
   },
   {
-    path: 'clock-face-a',
-    component: ClockAComponent,
+    path: 'clock-mined',
+    component: ClockMinedComponent,
   },
   {
-    path: 'clock-face-b',
-    component: ClockBComponent,
+    path: 'clock-mempool',
+    component: ClockMempoolComponent,
   },
   {
     path: 'status',

frontend/src/app/components/clock-face/clock-face.component.ts

@@ -39,7 +39,6 @@ export class ClockFaceComponent implements OnInit, OnChanges, OnDestroy {
         this.updateTime();
       })
     ).subscribe();
-    this.websocketService.want(['blocks']);
     this.blocksSubscription = this.stateService.blocks$
       .subscribe(([block]) => {
         if (block) {

frontend/src/app/components/clock/clock-a.component.ts

@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-clock-a',
-  templateUrl: './clock-a.component.html',
-})
-export class ClockAComponent {}

frontend/src/app/components/clock/clock-b.component.ts

@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-clock-b',
-  templateUrl: './clock-b.component.html',
-})
-export class ClockBComponent {}

frontend/src/app/components/clock/clock-mempool.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-clock-mempool',
+  templateUrl: './clock-mempool.component.html',
+})
+export class ClockMempoolComponent {}

frontend/src/app/components/clock/clock-mined.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-clock-mined',
+  templateUrl: './clock-mined.component.html',
+})
+export class ClockMinedComponent {}

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

@@ -42,11 +42,11 @@
       <p i18n="clock.priority-rate|priority fee rate">priority rate</p>
       <p *ngIf="recommendedFees$ | async as recommendedFees;" i18n="shared.sat-vbyte|sat/vB">{{ recommendedFees.fastestFee }} sat/vB</p>
     </div>
-    <div *ngIf="mode !== 'mempool'" class="stats bottom left">
+    <div *ngIf="mode !== 'mempool' && block" class="stats bottom left">
       <p [innerHTML]="block.size | bytes: 2"></p>
       <p i18n="clock.block-size">block size</p>
     </div>
-    <div *ngIf="mode !== 'mempool'" class="stats bottom right">
+    <div *ngIf="mode !== 'mempool' && block" class="stats bottom right">
       <p class="force-wrap">
         <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
         <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>

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

@@ -50,7 +50,7 @@
       opacity: 0.8;
 
       &.force-wrap {
-        word-spacing: 1000px;
+        word-spacing: 10000px;
       }
 
       ::ng-deep .symbol {

frontend/src/app/shared/shared.module.ts

@@ -94,8 +94,8 @@ import { MempoolBlockOverviewComponent } from '../components/mempool-block-overv
 import { ClockchainComponent } from '../components/clockchain/clockchain.component';
 import { ClockFaceComponent } from '../components/clock-face/clock-face.component';
 import { ClockComponent } from '../components/clock/clock.component';
-import { ClockAComponent } from '../components/clock/clock-a.component';
-import { ClockBComponent } from '../components/clock/clock-b.component';
+import { ClockMinedComponent } from '../components/clock/clock-mined.component';
+import { ClockMempoolComponent } from '../components/clock/clock-mempool.component';
 
 @NgModule({
   declarations: [
@@ -183,8 +183,8 @@ import { ClockBComponent } from '../components/clock/clock-b.component';
     MempoolBlockOverviewComponent,
     ClockchainComponent,
     ClockComponent,
-    ClockAComponent,
-    ClockBComponent,
+    ClockMinedComponent,
+    ClockMempoolComponent,
     ClockFaceComponent,
   ],
   imports: [
@@ -297,8 +297,8 @@ import { ClockBComponent } from '../components/clock/clock-b.component';
     MempoolBlockOverviewComponent,
     ClockchainComponent,
     ClockComponent,
-    ClockAComponent,
-    ClockBComponent,
+    ClockMinedComponent,
+    ClockMempoolComponent,
     ClockFaceComponent,
   ]
 })