replace client recent blocks on reorg

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

@@ -18,6 +18,7 @@ export class CacheService {
   txCache: { [txid: string]: Transaction } = {};
 
   network: string;
+  blockHashCache: { [hash: string]: BlockExtended } = {};
   blockCache: { [height: number]: BlockExtended } = {};
   blockLoading: { [height: number]: boolean } = {};
   copiesInBlockQueue: { [height: number]: number } = {};
@@ -27,8 +28,10 @@ export class CacheService {
     private stateService: StateService,
     private apiService: ApiService,
   ) {
-    this.stateService.blocks$.subscribe(([block]) => {
-      this.addBlockToCache(block);
+    this.stateService.blocks$.subscribe((blocks) => {
+      for (const block of blocks) {
+        this.addBlockToCache(block);
+      }
       this.clearBlocks();
     });
     this.stateService.chainTip$.subscribe((height) => {
@@ -56,8 +59,11 @@ export class CacheService {
   }
 
   addBlockToCache(block: BlockExtended) {
-    this.blockCache[block.height] = block;
-    this.bumpBlockPriority(block.height);
+    if (!this.blockHashCache[block.id]) {
+      this.blockHashCache[block.id] = block;
+      this.blockCache[block.height] = block;
+      this.bumpBlockPriority(block.height);
+    }
   }
 
   async loadBlock(height) {
@@ -105,7 +111,9 @@ export class CacheService {
       } else if ((this.tip - height) < KEEP_RECENT_BLOCKS) {
         this.bumpBlockPriority(height);
       } else {
+        const block = this.blockCache[height];
         delete this.blockCache[height];
+        delete this.blockHashCache[block.id];
         delete this.copiesInBlockQueue[height];
       }
     }
@@ -113,6 +121,7 @@ export class CacheService {
 
   // remove all blocks from the cache
   resetBlockCache() {
+    this.blockHashCache = {};
     this.blockCache = {};
     this.blockLoading = {};
     this.copiesInBlockQueue = {};

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

@@ -90,10 +90,11 @@ export class StateService {
   blockVSize: number;
   env: Env;
   latestBlockHeight = -1;
+  blocks: BlockExtended[] = [];
 
   networkChanged$ = new ReplaySubject<string>(1);
   lightningChanged$ = new ReplaySubject<boolean>(1);
-  blocks$: ReplaySubject<[BlockExtended, string]>;
+  blocks$ = new BehaviorSubject<BlockExtended[]>([]);
   transactions$ = new ReplaySubject<TransactionStripped>(6);
   conversions$ = new ReplaySubject<any>(1);
   bsqPrice$ = new ReplaySubject<number>(1);
@@ -102,6 +103,7 @@ export class StateService {
   mempoolBlockTransactions$ = new Subject<TransactionStripped[]>();
   mempoolBlockDelta$ = new Subject<MempoolBlockDelta>();
   liveMempoolBlockTransactions$: Observable<{ [txid: string]: TransactionStripped}>;
+  txConfirmed$ = new Subject<[string, BlockExtended]>();
   txReplaced$ = new Subject<ReplacedTransaction>();
   txRbfInfo$ = new Subject<RbfTree>();
   rbfLatest$ = new Subject<RbfTree[]>();
@@ -167,8 +169,6 @@ export class StateService {
       }
     });
 
-    this.blocks$ = new ReplaySubject<[BlockExtended, string]>(this.env.KEEP_BLOCKS_AMOUNT);
-
     this.liveMempoolBlockTransactions$ = merge(
       this.mempoolBlockTransactions$.pipe(map(transactions => { return { transactions }; })),
       this.mempoolBlockDelta$.pipe(map(delta => { return { delta }; })),
@@ -341,4 +341,15 @@ export class StateService {
       this.chainTip$.next(height);
     }
   }
+
+  resetBlocks(blocks: BlockExtended[]): void {
+    this.blocks = blocks.reverse();
+    this.blocks$.next(blocks);
+  }
+
+  addBlock(block: BlockExtended): void {
+    this.blocks.unshift(block);
+    this.blocks = this.blocks.slice(0, this.env.KEEP_BLOCKS_AMOUNT);
+    this.blocks$.next(this.blocks);
+  }
 }

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

@@ -239,13 +239,8 @@ export class WebsocketService {
 
     if (response.blocks && response.blocks.length) {
       const blocks = response.blocks;
-      let maxHeight = 0;
-      blocks.forEach((block: BlockExtended) => {
-        if (block.height > this.stateService.latestBlockHeight) {
-          maxHeight = Math.max(maxHeight, block.height);
-          this.stateService.blocks$.next([block, '']);
-        }
-      });
+      this.stateService.resetBlocks(blocks);
+      const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), this.stateService.latestBlockHeight);
       this.stateService.updateChainTip(maxHeight);
     }
 
@@ -260,7 +255,8 @@ export class WebsocketService {
     if (response.block) {
       if (response.block.height === this.stateService.latestBlockHeight + 1) {
         this.stateService.updateChainTip(response.block.height);
-        this.stateService.blocks$.next([response.block, response.txConfirmed || '']);
+        this.stateService.addBlock(response.block);
+        this.stateService.txConfirmed$.next([response.txConfirmed, response.block]);
       } else if (response.block.height > this.stateService.latestBlockHeight + 1) {
         reinitBlocks = true;
       }