Fix displaying error message with Firefox

frontend/src/app/backend.service.ts

@@ -1,112 +1,177 @@
 import { Injectable, NgModule } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
 
-import { ConfigService } from './config.service';
+import { Config, ConfigService } from './config.service';
 
 @Injectable({ providedIn: 'root' })
 @NgModule()
 export class BackendService {
-  backendUrl = 'http://localhost:3001';
-  constructor(private http: HttpClient, private configService: ConfigService) {
-    if (configService.config && configService.config.backendUrl) {
-      this.backendUrl = configService.config.backendUrl;
-    }
-  }
+  constructor(private http: HttpClient, private configService: ConfigService) {}
 
   getBlocks(page: number, perPage: number): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/blocks`, {
-      params: new HttpParams({
-        fromObject: { page: page.toString(), perPage: perPage.toString() }
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/blocks`, {
+          params: new HttpParams({
+            fromObject: { page: page.toString(), perPage: perPage.toString() }
+          })
+        });
       })
-    });
+    );
   }
 
   searchBlock(query: string): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/block/${query}`);
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/block/${query}`);
+      })
+    );
   }
 
   getBlock(blockHash: string): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/block/${blockHash}`);
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/block/${blockHash}`);
+      })
+    );
   }
 
   getBlockByHeight(height: number): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/block/height/${height}`);
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/block/height/${height}`);
+      })
+    );
   }
 
   getRawBlock(blockHash: string): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/block/${blockHash}/raw`);
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/block/${blockHash}/raw`);
+      })
+    );
   }
 
   getBlockTransactions(
     blockHash: string,
     page: number,
     perPage: number
   ): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/block/${blockHash}/txns`, {
-      params: new HttpParams({
-        fromObject: { page: page.toString(), perPage: perPage.toString() }
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(
+          `${config.backendUrl}/api/block/${blockHash}/txns`,
+          {
+            params: new HttpParams({
+              fromObject: { page: page.toString(), perPage: perPage.toString() }
+            })
+          }
+        );
       })
-    });
+    );
   }
 
   getTransactions(page: number, perPage: number): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/transactions`, {
-      params: new HttpParams({
-        fromObject: { page: page.toString(), perPage: perPage.toString() }
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/transactions`, {
+          params: new HttpParams({
+            fromObject: { page: page.toString(), perPage: perPage.toString() }
+          })
+        });
       })
-    });
+    );
   }
 
   getTransaction(txId: string): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/tx/${txId}`);
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/tx/${txId}`);
+      })
+    );
   }
 
   getRawTransaction(txId: string): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/tx/${txId}/rawData`);
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/tx/${txId}/rawData`);
+      })
+    );
   }
 
   getAddressInfo(address: string, lastSeenTxid?: string): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/address/${address}`, {
-      params: new HttpParams({
-        fromObject: {
-          lastSeenTxid: (lastSeenTxid || '').toString()
-        }
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/address/${address}`, {
+          params: new HttpParams({
+            fromObject: {
+              lastSeenTxid: (lastSeenTxid || '').toString()
+            }
+          })
+        });
       })
-    });
+    );
   }
 
   searchTransaction(query: string): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/tx/${query}/get`);
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/tx/${query}/get`);
+      })
+    );
   }
 
   getColors(lastSeenColorId?: string): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/colors`, {
-      params: new HttpParams({
-        fromObject: {
-          lastSeenColorId: (lastSeenColorId || '').toString()
-        }
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/colors`, {
+          params: new HttpParams({
+            fromObject: {
+              lastSeenColorId: (lastSeenColorId || '').toString()
+            }
+          })
+        });
       })
-    });
+    );
   }
 
   getColor(colorId: string, lastSeenTxid?: string): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/color/${colorId}`, {
-      params: new HttpParams({
-        fromObject: {
-          lastSeenTxid: (lastSeenTxid || '').toString()
-        }
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(`${config.backendUrl}/api/color/${colorId}`, {
+          params: new HttpParams({
+            fromObject: {
+              lastSeenTxid: (lastSeenTxid || '').toString()
+            }
+          })
+        });
       })
-    });
+    );
   }
 
   validateOpenedValue(opened_value: string): Observable<any> {
-    return this.http.get(`${this.backendUrl}/api/validate/${opened_value}`);
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(
+          `${config.backendUrl}/api/validate/${opened_value}`
+        );
+      })
+    );
   }
 
   checkMaterialTrackingTransaction(txId: string): Observable<any> {
-    return this.http.get(
-      `${this.backendUrl}/api/check_material_tracking_balance/${txId}`
+    return this.getConfig().pipe(
+      mergeMap((config: Config) => {
+        return this.http.get(
+          `${config.backendUrl}/api/check_material_tracking_balance/${txId}`
+        );
+      })
     );
   }
+
+  private getConfig(): Observable<Config> {
+    return this.configService.getConfig();
+  }
 }

frontend/src/app/config.service.ts

@@ -34,10 +34,17 @@ export class ConfigService {
   }
 
   getConfig(): Observable<Config> {
-    return this.http.get<Config>(this.configUrl).pipe(
-      retry(3), // retry a failed request up to 3 times
-      catchError(this.handleError) // then handle the error
-    );
+    if (this.config) {
+      return new Observable(observer => {
+        observer.next(this.config);
+        observer.complete();
+      });
+    } else {
+      return this.http.get<Config>(this.configUrl).pipe(
+        retry(3), // retry a failed request up to 3 times
+        catchError(this.handleError) // then handle the error
+      );
+    }
   }
 
   private handleError(error: HttpErrorResponse) {