From 942e1a7d68caff8b62fa5ed7601aec2690ba212c Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 21 Jul 2020 12:47:51 +0700
Subject: [PATCH] Fix for weird block animation when navigating back to main
 page.

---
 .../blockchain-blocks/blockchain-blocks.component.ts | 12 +++++++-----
 frontend/src/app/services/state.service.ts           |  2 +-
 frontend/src/app/services/websocket.service.ts       |  4 ++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
index 7f25d5ff7..dfdebb26d 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -4,6 +4,7 @@ import { Block } from 'src/app/interfaces/electrs.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
 import { AudioService } from 'src/app/services/audio.service';
+import { env } from 'src/app/app.constants';
 
 @Component({
   selector: 'app-blockchain-blocks',
@@ -21,7 +22,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
 
   arrowVisible = false;
   arrowLeftPx = 30;
-
+  blocksFilled = false;
   transition = '1s';
 
   gradientColors = {
@@ -34,7 +35,6 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   constructor(
     private stateService: StateService,
     private router: Router,
-    private audioService: AudioService,
   ) { }
 
   ngOnInit() {
@@ -42,15 +42,14 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
     this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
 
     this.blocksSubscription = this.stateService.blocks$
-      .subscribe(([block, txConfirmed, refilling]) => {
+      .subscribe(([block, txConfirmed]) => {
         if (this.blocks.some((b) => b.height === block.height)) {
           return;
         }
         this.blocks.unshift(block);
         this.blocks = this.blocks.slice(0, 8);
 
-        if (!refilling && !this.tabHidden) {
-          // setTimeout(() => this.audioService.playSound('bright-harmony'));
+        if (this.blocksFilled && !this.tabHidden) {
           block.stage = block.matchRate >= 66 ? 1 : 2;
         }
 
@@ -68,6 +67,9 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
           this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
         }, 50);
 
+        if (this.blocks.length === env.KEEP_BLOCKS_AMOUNT) {
+          this.blocksFilled = true;
+        }
       });
 
     this.stateService.markBlock$
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 031ee8902..f9a1ea541 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -21,7 +21,7 @@ export class StateService {
   latestBlockHeight = 0;
 
   networkChanged$ = new ReplaySubject<string>(1);
-  blocks$ = new ReplaySubject<[Block, boolean, boolean]>(env.KEEP_BLOCKS_AMOUNT);
+  blocks$ = new ReplaySubject<[Block, boolean]>(env.KEEP_BLOCKS_AMOUNT);
   conversions$ = new ReplaySubject<any>(1);
   bsqPrice$ = new ReplaySubject<number>(1);
   mempoolStats$ = new ReplaySubject<MemPoolState>(1);
diff --git a/frontend/src/app/services/websocket.service.ts b/frontend/src/app/services/websocket.service.ts
index 01f319b20..2aad766ef 100644
--- a/frontend/src/app/services/websocket.service.ts
+++ b/frontend/src/app/services/websocket.service.ts
@@ -67,7 +67,7 @@ export class WebsocketService {
           blocks.forEach((block: Block) => {
             if (block.height > this.stateService.latestBlockHeight) {
               this.stateService.latestBlockHeight = block.height;
-              this.stateService.blocks$.next([block, false, true]);
+              this.stateService.blocks$.next([block, false]);
             }
           });
         }
@@ -79,7 +79,7 @@ export class WebsocketService {
         if (response.block) {
           if (response.block.height > this.stateService.latestBlockHeight) {
             this.stateService.latestBlockHeight = response.block.height;
-            this.stateService.blocks$.next([response.block, !!response.txConfirmed, false]);
+            this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
           }
 
           if (response.txConfirmed) {