Transition new blocks from the mempool onto the blockchain.

Chime on new blocks.
fixes #47
fixes #84

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

@@ -5,17 +5,20 @@ import { Injectable } from '@angular/core';
 })
 export class AudioService {
   audio = new Audio();
+  isPlaying = false;
 
   constructor() { }
 
-  public playSound(name: 'magic' | 'chime' | 'cha-ching') {
-    try {
-      this.audio.src = '../../../resources/sounds/' + name + '.mp3';
-      this.audio.load();
-      this.audio.play();
-    } catch (e) {
-      console.log('Play sound failed', e);
+  public playSound(name: 'magic' | 'chime' | 'cha-ching' | 'bright-harmony') {
+    if (this.isPlaying) {
+      return;
     }
+    this.isPlaying = true;
+    this.audio.src = '../../../resources/sounds/' + name + '.mp3';
+    this.audio.load();
+    this.audio.play().catch((e) => {
+      console.log('Play sound failed', e);
+    });
+    setTimeout(() => this.isPlaying = false, 100);
   }
-
 }

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

@@ -4,6 +4,7 @@ import { Block, Transaction } from '../interfaces/electrs.interface';
 import { MempoolBlock, MemPoolState } from '../interfaces/websocket.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { Router, NavigationStart } from '@angular/router';
+import { KEEP_BLOCKS_AMOUNT } from '../app.constants';
 
 interface MarkBlockState {
   blockHeight?: number;
@@ -19,11 +20,10 @@ export class StateService {
   latestBlockHeight = 0;
 
   networkChanged$ = new ReplaySubject<string>(1);
-  blocks$ = new ReplaySubject<Block>(8);
+  blocks$ = new ReplaySubject<[Block, boolean]>(KEEP_BLOCKS_AMOUNT);
   conversions$ = new ReplaySubject<any>(1);
   mempoolStats$ = new ReplaySubject<MemPoolState>(1);
   mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
-  txConfirmed$ = new Subject<Block>();
   txReplaced$ = new Subject<Transaction>();
   mempoolTransactions$ = new Subject<Transaction>();
   blockTransactions$ = new Subject<Transaction>();

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

@@ -64,7 +64,7 @@ export class WebsocketService {
           blocks.forEach((block: Block) => {
             if (block.height > this.stateService.latestBlockHeight) {
               this.stateService.latestBlockHeight = block.height;
-              this.stateService.blocks$.next(block);
+              this.stateService.blocks$.next([block, false]);
             }
           });
         }
@@ -76,12 +76,11 @@ 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);
+            this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
           }
 
           if (response.txConfirmed) {
             this.isTrackingTx = false;
-            this.stateService.txConfirmed$.next(response.block);
           }
         }