Add block display mode toggle button

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

@@ -12,6 +12,7 @@
         class="text-center bitcoin-block mined-block blockchain-blocks-offset-{{ offset }}-index-{{ i }}"
         [class.offscreen]="!static && count && i >= count"
         id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"
+        [style]="blockTransformation"
         [class.blink-bg]="isSpecial(block.height)">
         <a draggable="false" [routerLink]="[getHref(i, block) | relativeUrl]" [state]="{ data: { block: block } }"
           class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
@@ -40,7 +41,7 @@
                 <app-fee-rate unitClass=""></app-fee-rate>
               </div>
             </ng-template>
-            <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo$ | async; else noMiningInfo"
+            <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="blockDisplayMode === 'fees'; else noMiningInfo"
               class="block-size">
               <app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
             </div>

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

@@ -45,7 +45,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   markBlockSubscription: Subscription;
   txConfirmedSubscription: Subscription;
   loadingBlocks$: Observable<boolean>;
-  showMiningInfo$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  showMiningInfoSubscription: Subscription;
+  blockDisplayModeSubscription: Subscription;
+  blockDisplayMode: 'size' | 'fees';
+  blockTransformation = {};
   blockStyles = [];
   emptyBlockStyles = [];
   interval: any;
@@ -78,22 +81,15 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   ) {
   }
 
-  enabledMiningInfoIfNeeded(url) {
-    const urlParts = url.split('/');
-    const onDashboard = ['','testnet','signet','mining','acceleration'].includes(urlParts[urlParts.length - 1]);
-    if (onDashboard) { // Only update showMiningInfo if we are on the main, mining or acceleration dashboards
-      this.stateService.showMiningInfo$.next(url.includes('/mining') || url.includes('/acceleration'));
-    }
-  }
-
   ngOnInit() {
     this.dynamicBlocksAmount = Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT);
 
-    if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
-      this.enabledMiningInfoIfNeeded(this.location.path());
-      this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
-      this.showMiningInfo$ = this.stateService.showMiningInfo$;
-    }
+    this.blockDisplayMode = this.stateService.blockDisplayMode$.value as 'size' | 'fees';
+    this.blockDisplayModeSubscription = this.stateService.blockDisplayMode$.subscribe((mode: 'size' | 'fees') => {
+      if (mode !== this.blockDisplayMode) {
+        this.applyAnimation(mode);
+      }
+    });
 
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
       this.timeLtr = !!ltr;
@@ -204,6 +200,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     this.networkSubscription.unsubscribe();
     this.tabHiddenSubscription.unsubscribe();
     this.markBlockSubscription.unsubscribe();
+    this.blockDisplayModeSubscription.unsubscribe();
     this.timeLtrSubscription.unsubscribe();
     clearInterval(this.interval);
   }
@@ -243,6 +240,29 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  applyAnimation(mode: 'size' | 'fees') {
+    this.blockTransformation = this.timeLtr ? {
+      transform: 'scaleX(-1) rotateX(90deg)',
+      transition: 'transform 0.375s'
+    } : {
+      transform: 'rotateX(90deg)',
+      transition: 'transform 0.375s'
+    };
+    setTimeout(() => {
+      this.blockDisplayMode = mode;
+      this.blockTransformation = this.timeLtr ? {
+        transform: 'scaleX(-1)',
+        transition: 'transform 0.375s'
+      } : {
+        transition: 'transform 0.375s'
+      };
+      this.cd.markForCheck();
+      setTimeout(() => {
+        this.blockTransformation = {};
+      }, 375);
+    }, 375);
+  }
+
   trackByBlocksFn(index: number, item: BlockchainBlock) {
     return item.height;
   }