Detect stale blocks from client blockchain cache

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

@@ -14,6 +14,7 @@ import { ApiService } from '../../services/api.service';
 import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
 import { detectWebGL } from '../../shared/graphs.utils';
 import { PriceService, Price } from '../../services/price.service';
+import { CacheService } from '../../services/cache.service';
 
 @Component({
   selector: 'app-block',
@@ -72,6 +73,7 @@ export class BlockComponent implements OnInit, OnDestroy {
   auditSubscription: Subscription;
   keyNavigationSubscription: Subscription;
   blocksSubscription: Subscription;
+  cacheBlocksSubscription: Subscription;
   networkChangedSubscription: Subscription;
   queryParamsSubscription: Subscription;
   nextBlockSubscription: Subscription = undefined;
@@ -99,6 +101,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     private relativeUrlPipe: RelativeUrlPipe,
     private apiService: ApiService,
     private priceService: PriceService,
+    private cacheService: CacheService,
   ) {
     this.webGlEnabled = detectWebGL();
   }
@@ -128,6 +131,10 @@ export class BlockComponent implements OnInit, OnDestroy {
         map((indicators) => indicators['blocktxs-' + this.blockHash] !== undefined ? indicators['blocktxs-' + this.blockHash] : 0)
       );
 
+    this.cacheBlocksSubscription = this.cacheService.loadedBlocks$.subscribe((block) => {
+      this.loadedCacheBlock(block);
+    });
+
     this.blocksSubscription = this.stateService.blocks$
       .subscribe((blocks) => {
         this.latestBlock = blocks[0];
@@ -258,6 +265,13 @@ export class BlockComponent implements OnInit, OnDestroy {
         this.transactionsError = null;
         this.isLoadingOverview = true;
         this.overviewError = null;
+
+        const cachedBlock = this.cacheService.getCachedBlock(block.height);
+        if (!cachedBlock) {
+          this.cacheService.loadBlock(block.height);
+        } else {
+          this.loadedCacheBlock(cachedBlock);
+        }
       }),
       throttleTime(300, asyncScheduler, { leading: true, trailing: true }),
       shareReplay(1)
@@ -463,6 +477,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     this.auditSubscription?.unsubscribe();
     this.keyNavigationSubscription?.unsubscribe();
     this.blocksSubscription?.unsubscribe();
+    this.cacheBlocksSubscription?.unsubscribe();
     this.networkChangedSubscription?.unsubscribe();
     this.queryParamsSubscription?.unsubscribe();
     this.timeLtrSubscription?.unsubscribe();
@@ -683,4 +698,11 @@ export class BlockComponent implements OnInit, OnDestroy {
     }
     return 0;
   }
+
+  loadedCacheBlock(block: BlockExtended): void {
+    if (block.height === this.block.height && block.id !== this.block.id) {
+      this.block.stale = true;
+      this.block.canonical = block.id;
+    }
+  }
 }