Reversible blockchain components

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -1,4 +1,4 @@
-<div class="blocks-container blockchain-blocks-container" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
+<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
     <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
       <a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
@@ -34,7 +34,7 @@
 </div>
 
 <ng-template #loadingBlocksTemplate>
-  <div class="blocks-container">
+  <div class="blocks-container" [class.time-ltr]="timeLtr">
     <div class="flashing">
       <div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn" >
         <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="emptyBlockStyles[i]"></div>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -22,7 +22,7 @@
 .mined-block {
   position: absolute;
   top: 0px;
-  transition: 2s;
+  transition: background 2s, left 2s, transform 1s;
 }
 
 .block-size {
@@ -34,6 +34,7 @@
   position: absolute;
   top: 0px;
   left: 40px;
+  transition: left 2s;
 }
 
 .block-body {
@@ -145,3 +146,9 @@
   opacity: 0;
   pointer-events : none;
 }
+
+.time-ltr {
+  .bitcoin-block {
+    transform: scaleX(-1);
+  }
+}

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -33,6 +33,8 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   blocksFilled = false;
   transition = '1s';
   showMiningInfo = false;
+  timeLtrSubscription: Subscription;
+  timeLtr: boolean;
 
   gradientColors = {
     '': ['#9339f4', '#105fb0'],
@@ -61,6 +63,11 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
       this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
     }
 
+    this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
+      this.timeLtr = !!ltr;
+      this.cd.markForCheck();
+    });
+
     if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
       this.feeRounding = '1.0-1';
     }
@@ -123,6 +130,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
     this.networkSubscription.unsubscribe();
     this.tabHiddenSubscription.unsubscribe();
     this.markBlockSubscription.unsubscribe();
+    this.timeLtrSubscription.unsubscribe();
     clearInterval(this.interval);
   }