clocktower top blocks & layout adjustment

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

@@ -0,0 +1,11 @@
+<div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
+  <div class="position-container" [ngClass]="network ? network : ''">
+    <span>
+      <div class="blocks-wrapper">
+        <app-mempool-blocks [tiny]="true" [count]="3"></app-mempool-blocks>
+        <app-blockchain-blocks [tiny]="true"></app-blockchain-blocks>
+      </div>
+      <div class="divider"></div>
+    </span>
+  </div>
+</div>

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

@@ -0,0 +1,120 @@
+.divider {
+  width: 4px;
+  height: 180px;
+  left: 0;
+  top: -40px;
+  position: absolute;
+  margin-bottom: 120px;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='0' x2='0' y2='100%' stroke='white' stroke-width='8' stroke-dasharray='18%2c32' stroke-dashoffset='-5' stroke-linecap='square'/%3e%3c/svg%3e");
+}
+
+.blockchain-wrapper {
+  height: 250px;
+
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
+
+.position-container {
+  position: absolute;
+  left: 0;
+  top: 75px;
+  transform: translateX(50vw);
+}
+
+.position-container.liquid, .position-container.liquidtestnet {
+  transform: translateX(420px);
+}
+
+.blockchain-wrapper {
+  .position-container {
+    transform: translateX(95vw);
+  }
+  .position-container.liquid, .position-container.liquidtestnet {
+    transform: translateX(50vw);
+  }
+  .position-container.loading {
+    transform: translateX(50vw);
+  }
+}
+.blockchain-wrapper.time-ltr {
+  .position-container {
+    transform: translateX(5vw);
+  }
+  .position-container.liquid, .position-container.liquidtestnet {
+    transform: translateX(50vw);
+  }
+  .position-container.loading {
+    transform: translateX(50vw);
+  }
+}
+
+.black-background {
+  background-color: #11131f;
+  z-index: 100;
+  position: relative;
+}
+
+.scroll-spacer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+.loading-block {
+  position: absolute;
+  text-align: center;
+  margin: auto;
+  width: 300px;
+  left: -150px;
+  top: 0px;
+}
+
+.time-toggle {
+  color: white;
+  font-size: 0.8rem;
+  position: absolute;
+  bottom: -1.8em;
+  left: 1px;
+  transform: translateX(-50%);
+  background: none;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+}
+
+.blockchain-wrapper.ltr-transition .blocks-wrapper,
+.blockchain-wrapper.ltr-transition .position-container,
+.blockchain-wrapper.ltr-transition .time-toggle {
+  transition: transform 1s;
+}
+
+.blockchain-wrapper.time-ltr {
+  .blocks-wrapper {
+    transform: scaleX(-1);
+  }
+
+  .time-toggle {
+    transform: translateX(-50%) scaleX(-1);
+  }
+}
+
+:host-context(.ltr-layout) {
+  .blockchain-wrapper.time-ltr .blocks-wrapper,
+  .blockchain-wrapper .blocks-wrapper {
+    direction: ltr;
+  }
+}
+
+:host-context(.rtl-layout) {
+  .blockchain-wrapper.time-ltr .blocks-wrapper,
+  .blockchain-wrapper .blocks-wrapper {
+    direction: rtl;
+  }
+}

frontend/src/app/components/clockchain/clockchain.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input } from '@angular/core';
+import { firstValueFrom, Subscription } from 'rxjs';
+import { StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-clockchain',
+  templateUrl: './clockchain.component.html',
+  styleUrls: ['./clockchain.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClockchainComponent implements OnInit, OnDestroy {
+  network: string;
+  timeLtrSubscription: Subscription;
+  timeLtr: boolean = this.stateService.timeLtr.value;
+  ltrTransitionEnabled = false;
+  connectionStateSubscription: Subscription;
+  loadingTip: boolean = true;
+  connected: boolean = true;
+
+  constructor(
+    public stateService: StateService,
+  ) {}
+
+  ngOnInit() {
+    this.network = this.stateService.network;
+    this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
+      this.timeLtr = !!ltr;
+    });
+    this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
+      this.connected = (state === 2);
+    })
+    firstValueFrom(this.stateService.chainTip$).then(tip => {
+      this.loadingTip = false;
+    });
+  }
+
+  ngOnDestroy() {
+    this.timeLtrSubscription.unsubscribe();
+    this.connectionStateSubscription.unsubscribe();
+  }
+
+  trackByPageFn(index: number, item: { index: number }) {
+    return item.index;
+  }
+
+  toggleTimeDirection() {
+    this.ltrTransitionEnabled = true;
+    this.stateService.timeLtr.next(!this.timeLtr);
+  }
+}