Return HTTP 503 from Fee Api when mempool is still syncing.

Fix for displaying git commit on About page.

backend/src/routes.ts

@@ -57,6 +57,11 @@ class Routes {
   }
 
   public async getRecommendedFees(req: Request, res: Response) {
+    if (!mempool.isInSync()) {
+      res.statusCode = 503;
+      res.send('Service Unavailable');
+      return;
+    }
     const result = feeApi.getRecommendedFee();
     res.json(result);
   }

frontend/src/app/components/about/about.component.html

@@ -115,10 +115,7 @@
   <br>
 
   <div class="text-small text-center">
-    Git commit: 
+    Git commit: {{ gitCommit$ | async }}
-    <ng-container *ngIf="(mempoolStats$ | async) as mempoolStats">
-      {{ mempoolStats.gitCommit }}
-    </ng-container>
   </div>
 
   <br>

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

@@ -3,7 +3,6 @@ import { WebsocketService } from '../../services/websocket.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { StateService } from 'src/app/services/state.service';
 import { Observable } from 'rxjs';
-import { MemPoolState } from 'src/app/interfaces/websocket.interface';
 
 @Component({
   selector: 'app-about',
@@ -14,7 +13,7 @@ import { MemPoolState } from 'src/app/interfaces/websocket.interface';
 export class AboutComponent implements OnInit {
   active = 1;
   hostname = document.location.hostname;
-  mempoolStats$: Observable<MemPoolState>;
+  gitCommit$: Observable<string>;
 
   constructor(
     private websocketService: WebsocketService,
@@ -23,7 +22,7 @@ export class AboutComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.mempoolStats$ = this.stateService.mempoolStats$;
+    this.gitCommit$ = this.stateService.gitCommit$;
     this.seoService.setTitle('Contributors');
     this.websocketService.want(['blocks']);
     if (this.stateService.network === 'bisq') {

frontend/src/app/components/footer/footer.component.html

@@ -3,18 +3,18 @@
     <div class="row text-center" *ngIf="mempoolInfoData$ | async as mempoolInfoData">
       <div class="col d-none d-sm-block">
         <span class="txPerSecond">Tx weight per second:</span>
-        <span *ngIf="mempoolInfoData.memPoolInfo.vBytesPerSecond === 0; else inSync">
+        <span *ngIf="mempoolInfoData.vBytesPerSecond === 0; else inSync">
           &nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
         </span>
         <ng-template #inSync>
           <div class="progress sub-text">
-            <div class="progress-bar {{ mempoolInfoData.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.memPoolInfo.vBytesPerSecond | ceil | number }} vBytes/s</div>
+            <div class="progress-bar {{ mempoolInfoData.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.vBytesPerSecond | ceil | number }} vBytes/s</div>
           </div>
         </ng-template>    
       </div>
       <div class="col">
         <span class="unconfirmedTx">Unconfirmed<span class="extra-text"> transactions</span>:</span>
-        <div class="sub-text">{{ mempoolInfoData.memPoolInfo.memPoolInfo.size | number }}</div>
+        <div class="sub-text">{{ mempoolInfoData.memPoolInfo.size | number }}</div>
       </div>
       <div class="col">
         <span class="mempoolSize">Mempool size:</span>

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

@@ -1,8 +1,8 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
-import { MemPoolState } from 'src/app/interfaces/websocket.interface';
+import { Observable, combineLatest } from 'rxjs';
-import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { MempoolInfo } from 'src/app/interfaces/websocket.interface';
 
 interface MempoolBlocksData {
   blocks: number;
@@ -10,7 +10,8 @@ interface MempoolBlocksData {
 }
 
 interface MempoolInfoData {
-  memPoolInfo: MemPoolState;
+  memPoolInfo: MempoolInfo;
+  vBytesPerSecond: number;
   progressWidth: string;
   progressClass: string;
 }
@@ -30,31 +31,35 @@ export class FooterComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.mempoolInfoData$ = this.stateService.mempoolStats$
+    this.mempoolInfoData$ = combineLatest([
-      .pipe(
+      this.stateService.mempoolInfo$,
-        map((mempoolState) => {
+      this.stateService.vbytesPerSecond$
-          const vBytesPerSecondLimit = 1667;
+    ])
-          let vBytesPerSecond = mempoolState.vBytesPerSecond;
+    .pipe(
-          if (vBytesPerSecond > 1667) {
+      map(([mempoolInfo, vbytesPerSecond]) => {
-            vBytesPerSecond = 1667;
+        const vBytesPerSecondLimit = 1667;
-          }
+        let vBytesPerSecond = vbytesPerSecond;
+        if (vBytesPerSecond > 1667) {
+          vBytesPerSecond = 1667;
+        }
 
-          const percent = Math.round((vBytesPerSecond / vBytesPerSecondLimit) * 100);
+        const percent = Math.round((vBytesPerSecond / vBytesPerSecondLimit) * 100);
 
-          let progressClass = 'bg-danger';
+        let progressClass = 'bg-danger';
-          if (percent <= 75) {
+        if (percent <= 75) {
-            progressClass = 'bg-success';
+          progressClass = 'bg-success';
-          } else if (percent <= 99) {
+        } else if (percent <= 99) {
-            progressClass = 'bg-warning';
+          progressClass = 'bg-warning';
-          }
+        }
 
-          return {
+        return {
-            memPoolInfo: mempoolState,
+          memPoolInfo: mempoolInfo,
-            progressWidth: percent + '%',
+          vBytesPerSecond: vBytesPerSecond,
-            progressClass: progressClass,
+          progressWidth: percent + '%',
-          };
+          progressClass: progressClass,
-        })
+        };
-      );
+      })
+    );
 
     this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
       .pipe(

frontend/src/app/interfaces/websocket.interface.ts

@@ -28,12 +28,6 @@ export interface MempoolBlock {
   index: number;
 }
 
-export interface MemPoolState {
-  memPoolInfo: MempoolInfo;
-  vBytesPerSecond: number;
-  gitCommit: string;
-}
-
 export interface MempoolInfo {
   size: number;
   bytes: number;

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ReplaySubject, BehaviorSubject, Subject, fromEvent } from 'rxjs';
 import { Block, Transaction } from '../interfaces/electrs.interface';
-import { MempoolBlock, MemPoolState } from '../interfaces/websocket.interface';
+import { MempoolBlock, MempoolInfo } from '../interfaces/websocket.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { Router, NavigationStart } from '@angular/router';
 import { env } from '../app.constants';
@@ -24,12 +24,14 @@ export class StateService {
   blocks$ = new ReplaySubject<[Block, boolean]>(env.KEEP_BLOCKS_AMOUNT);
   conversions$ = new ReplaySubject<any>(1);
   bsqPrice$ = new ReplaySubject<number>(1);
-  mempoolStats$ = new ReplaySubject<MemPoolState>(1);
+  mempoolInfo$ = new ReplaySubject<MempoolInfo>(1);
   mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
   txReplaced$ = new Subject<Transaction>();
   mempoolTransactions$ = new Subject<Transaction>();
   blockTransactions$ = new Subject<Transaction>();
   isLoadingWebSocket$ = new ReplaySubject<boolean>(1);
+  vbytesPerSecond$ = new ReplaySubject<number>(1);
+  gitCommit$ = new ReplaySubject<string>(1);
 
   live2Chart$ = new Subject<OptimizedMempoolStats>();
 

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

@@ -134,11 +134,15 @@ export class WebsocketService {
         }
 
         if (response.mempoolInfo) {
-          this.stateService.mempoolStats$.next({
+          this.stateService.mempoolInfo$.next(response.mempoolInfo);
-            memPoolInfo: response.mempoolInfo,
+        }
-            vBytesPerSecond: response.vBytesPerSecond,
+
-            gitCommit: response['git-commit']
+        if (response.vBytesPerSecond !== undefined) {
-          });
+          this.stateService.vbytesPerSecond$.next(response.vBytesPerSecond);
+        }
+
+        if (response['git-commit']) {
+          this.stateService.gitCommit$.next(response['git-commit']);
         }
 
         if (this.goneOffline === true) {