Fix routes for /mining - Share blockchain component instances - remove animations

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

@@ -59,6 +59,10 @@ let routes: Routes = [
             path: 'mempool-block/:id',
             component: MempoolBlockComponent
           },
+          {
+            path: 'mining',
+            component: MiningDashboardComponent,
+          },
         ],
       },
       {
@@ -73,10 +77,6 @@ let routes: Routes = [
         path: 'mining/pools',
         component: PoolRankingComponent,
       },
-      {
-        path: 'mining',
-        component: MiningDashboardComponent,
-      },
       {
         path: 'mining/pool/:poolId',
         component: PoolComponent,
@@ -159,6 +159,10 @@ let routes: Routes = [
                 path: 'mempool-block/:id',
                 component: MempoolBlockComponent
               },
+              {
+                path: 'mining',
+                component: MiningDashboardComponent,
+              },
             ],
           },
           {
@@ -173,10 +177,6 @@ let routes: Routes = [
             path: 'mining/pools',
             component: PoolRankingComponent,
           },
-          {
-            path: 'mining',
-            component: MiningDashboardComponent,
-          },
           {
             path: 'mining/pool/:poolId',
             component: PoolComponent,
@@ -253,6 +253,10 @@ let routes: Routes = [
                 path: 'mempool-block/:id',
                 component: MempoolBlockComponent
               },
+              {
+                path: 'mining',
+                component: MiningDashboardComponent,
+              },
             ],
           },
           {
@@ -267,10 +271,6 @@ let routes: Routes = [
             path: 'mining/pools',
             component: PoolRankingComponent,
           },
-          {
-            path: 'mining',
-            component: MiningDashboardComponent,
-          },
           {
             path: 'mining/pool/:poolId',
             component: PoolComponent,

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

@@ -21,7 +21,7 @@
         </div>
         <div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
       </div>
-    <div class="" *ngIf="miningInfo === true">
+    <div class="" *ngIf="showMiningInfo === true">
       <a class="badge badge-primary" [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">
         {{ block.extras.pool.name}}</a>
     </div>

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

@@ -12,7 +12,7 @@ import { BlockExtended } from 'src/app/interfaces/node-api.interface';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainBlocksComponent implements OnInit, OnDestroy {
-  @Input() miningInfo: boolean = false;
+  @Input() showMiningInfo: boolean = false;
   specialBlocks = specialBlocks;
   network = '';
   blocks: BlockExtended[] = [];

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

@@ -1,8 +1,8 @@
-<div class="text-center" class="blockchain-wrapper animate" #container [class]="stateService.blockShifted ? 'move-left' : ''">
+<div class="text-center" class="blockchain-wrapper animate" #container>
   <div class="position-container {{ network }}">
     <span>
       <app-mempool-blocks></app-mempool-blocks>
-      <app-blockchain-blocks [miningInfo]="miningInfo"></app-blockchain-blocks>
+      <app-blockchain-blocks [showMiningInfo]="showMiningInfo"></app-blockchain-blocks>
       <div id="divider"></div>
     </span>
   </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
 
 @Component({
@@ -8,8 +8,7 @@ import { StateService } from 'src/app/services/state.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainComponent implements OnInit {
-  @Input() miningInfo: boolean = false;
+  showMiningInfo: boolean = false;
-  @ViewChild('container') container: ElementRef;
   network: string;
 
   constructor(
@@ -18,15 +17,5 @@ export class BlockchainComponent implements OnInit {
 
   ngOnInit() {
     this.network = this.stateService.network;
-
-    setTimeout(() => {
-      if (this.miningInfo) {
-        this.container.nativeElement.className += ' move-left';
-        this.stateService.blockShifted = true;
-      } else if (this.stateService.blockShifted) {
-        this.container.nativeElement.className = this.container.nativeElement.className.replace(' move-left', '');
-        this.stateService.blockShifted = false;
-      }
-    }, 250);
   }
 }

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -1,11 +1,5 @@
-<!-- lastest blocks -->
-<div id="blockchain-container" class="fade-border" dir="ltr" #blockchainContainer>
-  <app-blockchain [miningInfo]=true></app-blockchain>
-</div>
-
 <div class="container-xl">
   
-
   <div class="row row-cols-1 row-cols-md-2 mt-3">
 
     <!-- pool distribution -->
@@ -26,8 +20,6 @@
           <app-difficulty-chart [widget]=true></app-difficulty-chart>
           <div class=""><a href="" [routerLink]="['/mining/difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
               &raquo;</a></div>
-          <!-- <app-difficulty [showProgress]=false [showHalving]=true></app-difficulty>
-          Imagine more stuff down there -->
         </div>
       </div>
     </div>

frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-mining-dashboard',
   templateUrl: './mining-dashboard.component.html',
-  styleUrls: ['./mining-dashboard.component.scss']
+  styleUrls: ['./mining-dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MiningDashboardComponent implements OnInit {
 

frontend/src/app/services/state.service.ts

@@ -100,7 +100,6 @@ export class StateService {
   keyNavigation$ = new Subject<KeyboardEvent>();
 
   blockScrolling$: Subject<boolean> = new Subject<boolean>();
-  public blockShifted: boolean = false;
 
   constructor(
     @Inject(PLATFORM_ID) private platformId: any,