Highlight accelerations in blocks in previews & non-audit mode

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html

@@ -58,6 +58,10 @@
           <td *ngSwitchCase="'accelerated'"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></td>
         </ng-container>
       </tr>
+      <tr *ngIf="!auditEnabled && tx && tx.status === 'accelerated'">
+        <td class="td-width"></td>
+        <td><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></td>
+      </tr>
     </tbody>
   </table>
 </div>

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

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/co
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, tap, throttleTime, catchError, shareReplay, startWith, pairwise, filter } from 'rxjs/operators';
-import { of, Subscription, asyncScheduler } from 'rxjs';
+import { of, Subscription, asyncScheduler, forkJoin } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { SeoService } from '../../services/seo.service';
 import { OpenGraphService } from '../../services/opengraph.service';
@@ -121,21 +121,37 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
     this.overviewSubscription = block$.pipe(
       startWith(null),
       pairwise(),
-      switchMap(([prevBlock, block]) => this.apiService.getStrippedBlockTransactions$(block.id)
+      switchMap(([prevBlock, block]) => {
-        .pipe(
+          return forkJoin([
-          catchError((err) => {
+            this.apiService.getStrippedBlockTransactions$(block.id)
-            this.overviewError = err;
+              .pipe(
-            this.openGraphService.fail('block-viz-' + this.rawId);
+                catchError((err) => {
-            return of([]);
+                  this.overviewError = err;
-          }),
+                  this.openGraphService.fail('block-viz-' + this.rawId);
-          switchMap((transactions) => {
+                  return of([]);
-            return of({ transactions, direction: 'down' });
+                }),
-          })
+                switchMap((transactions) => {
-        )
+                  return of(transactions);
+                })
+              ),
+            block.height > 819500 ? this.apiService.getAccelerationHistory$({ blockHash: block.id }) : of([])
+          ]);
+        }
       ),
     )
-    .subscribe(({transactions, direction}: {transactions: TransactionStripped[], direction: string}) => {
+    .subscribe(([transactions, accelerations]) => {
       this.strippedTransactions = transactions;
+
+      const acceleratedInBlock = {};
+      for (const acc of accelerations) {
+        acceleratedInBlock[acc.txid] = acc;
+      }
+      for (const tx of transactions) {
+        if (acceleratedInBlock[tx.txid]) {
+          tx.acc = true;
+        }
+      }
+
       this.isLoadingOverview = false;
       if (this.blockGraph) {
         this.blockGraph.destroy();

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

@@ -328,17 +328,28 @@ export class BlockComponent implements OnInit, OnDestroy {
                 this.overviewError = err;
                 return of(null);
               })
-            )
+            ),
+          block.height > 819500 ? this.apiService.getAccelerationHistory$({ blockHash: block.id }) : of([])
         ]);
       })
     )
-    .subscribe(([transactions, blockAudit]) => {
+    .subscribe(([transactions, blockAudit, accelerations]) => {
       if (transactions) {
         this.strippedTransactions = transactions;
       } else {
         this.strippedTransactions = [];
       }
 
+      const acceleratedInBlock = {};
+      for (const acc of accelerations) {
+        acceleratedInBlock[acc.txid] = acc;
+      }
+      for (const tx of transactions) {
+        if (acceleratedInBlock[tx.txid]) {
+          tx.acc = true;
+        }
+      }
+
       this.blockAudit = null;
       if (transactions && blockAudit) {
         const inTemplate = {};