Transaction, address and block page now works.

frontend/server.ts

@@ -26,10 +26,20 @@ win.matchMedia = () => {
 // @ts-ignore
 win.setTimeout = (fn) => { fn(); };
 win.document.body.scrollTo = (() => {});
-
+// @ts-ignore
 global['window'] = win;
 global['document'] = win.document;
-global['history'] = { state: { data: {} } };
+// @ts-ignore
+global['history'] = { state: { } };
+
+global['localStorage'] = {
+  getItem: () => '',
+  setItem: () => {},
+  removeItem: () => {},
+  clear: () => {},
+  length: 0,
+  key: () => '',
+};
 
 
 // The Express app is exported so that it can be used by serverless Functions.

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

@@ -1,5 +1,6 @@
 import { Component, Input, AfterViewInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import * as QRCode from 'qrcode/build/qrcode.js';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-qrcode',
@@ -14,9 +15,14 @@ export class QrcodeComponent implements AfterViewInit {
 
   qrcodeObject: any;
 
-  constructor() { }
+  constructor(
+    private stateService: StateService,
+  ) { }
 
   ngAfterViewInit() {
+    if (!this.stateService.isBrowser) {
+      return;
+    }
     const opts = {
       errorCorrectionLevel: 'H',
       margin: 0,

frontend/src/app/components/statistics/chartist.component.ts

@@ -1,14 +1,18 @@
 import {
   Component,
   ElementRef,
+  Inject,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
+  PLATFORM_ID,
   SimpleChanges,
   ViewEncapsulation
 } from '@angular/core';
 
+import { isPlatformBrowser } from '@angular/common';
+
 import * as Chartist from '@mempool/chartist';
 
 /**
@@ -63,16 +67,25 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
   // @ts-ignore
   @Input() public events: ChartEvent;
 
+  isBrowser: boolean = isPlatformBrowser(this.platformId);
+
   // @ts-ignore
   public chart: ChartInterfaces;
 
   private element: HTMLElement;
 
-  constructor(element: ElementRef) {
+  constructor(
+    element: ElementRef,
+    @Inject(PLATFORM_ID) private platformId: any,
+  ) {
     this.element = element.nativeElement;
   }
 
   public ngOnInit(): Promise<ChartInterfaces> {
+    if (!this.isBrowser) {
+      return;
+    }
+
     if (!this.type || !this.data) {
       Promise.reject('Expected at least type and data.');
     }
@@ -87,6 +100,10 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   public ngOnChanges(changes: SimpleChanges): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
     this.update(changes);
   }
 

frontend/src/app/components/time-since/time-since.component.ts

@@ -1,5 +1,5 @@
-import { isPlatformBrowser } from '@angular/common';
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges, PLATFORM_ID, Inject } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-time-since',
@@ -7,7 +7,6 @@ import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDet
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
-  isBrowser: boolean = isPlatformBrowser(this.platformId);
   interval: number;
   text: string;
   intervals = {};
@@ -17,7 +16,7 @@ export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
 
   constructor(
     private ref: ChangeDetectorRef,
-    @Inject(PLATFORM_ID) private platformId: any,
+    private stateService: StateService,
   ) {
     if (document.body.clientWidth < 768) {
       this.intervals = {
@@ -43,7 +42,7 @@ export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
-    if (!this.isBrowser) {
+    if (!this.stateService.isBrowser) {
       this.text = this.calculate();
       this.ref.markForCheck();
       return;

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

@@ -1,8 +1,7 @@
-import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { Observable } from 'rxjs';
-import { isPlatformBrowser } from '@angular/common';
 import { StateService } from './state.service';
 import { env } from '../app.constants';
 import { WebsocketResponse } from '../interfaces/websocket.interface';
@@ -14,25 +13,23 @@ const API_BASE_URL = '{network}/api/v1';
 })
 export class ApiService {
   private apiBaseUrl: string;
-  private isBrowser: boolean = isPlatformBrowser(this.platformId);
 
   constructor(
     private httpClient: HttpClient,
     private stateService: StateService,
-    @Inject(PLATFORM_ID) private platformId: any,
   ) {
     this.stateService.networkChanged$.subscribe((network) => {
       if (network === 'bisq' && !env.BISQ_SEPARATE_BACKEND) {
         network = '';
       }
       this.apiBaseUrl = API_BASE_URL.replace('{network}', network ? '/' + network : '');
-      if (!this.isBrowser) {
+      if (!stateService.isBrowser) {
         this.apiBaseUrl = 'http://localhost:8999' + this.apiBaseUrl;
       }
     });
 
     this.apiBaseUrl = API_BASE_URL.replace('{network}', '');
-    if (!this.isBrowser) {
+    if (!stateService.isBrowser) {
       this.apiBaseUrl = 'http://localhost:8999' + this.apiBaseUrl;
     }
   }

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

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
+import { StateService } from './state.service';
 
 @Injectable({
   providedIn: 'root'
@@ -13,9 +14,15 @@ export class AssetsService {
 
   constructor(
     private httpClient: HttpClient,
+    private stateService: StateService,
   ) {
-    this.getAssetsJson$ = this.httpClient.get('/resources/assets.json').pipe(shareReplay());
-    this.getAssetsMinimalJson$ = this.httpClient.get('/resources/assets.minimal.json').pipe(shareReplay());
-    this.getMiningPools$ = this.httpClient.get('/resources/pools.json').pipe(shareReplay());
+    let baseApiUrl = '';
+    if (!this.stateService.isBrowser) {
+      baseApiUrl = 'http://localhost:4200/';
+    }
+
+    this.getAssetsJson$ = this.httpClient.get(baseApiUrl + '/resources/assets.json').pipe(shareReplay());
+    this.getAssetsMinimalJson$ = this.httpClient.get(baseApiUrl + '/resources/assets.minimal.json').pipe(shareReplay());
+    this.getMiningPools$ = this.httpClient.get(baseApiUrl + '/resources/pools.json').pipe(shareReplay());
   }
 }

frontend/src/app/services/electrs-api.service.ts

@@ -1,5 +1,4 @@
-import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Block, Transaction, Address, Outspend, Recent, Asset } from '../interfaces/electrs.interface';
@@ -12,14 +11,12 @@ let API_BASE_URL = '{network}/api';
 })
 export class ElectrsApiService {
   private apiBaseUrl: string;
-  private isBrowser: boolean = isPlatformBrowser(this.platformId);
 
   constructor(
     private httpClient: HttpClient,
     private stateService: StateService,
-    @Inject(PLATFORM_ID) private platformId: any,
   ) {
-    if (!this.isBrowser) {
+    if (!stateService.isBrowser) {
       API_BASE_URL = 'http://localhost:4200/api';
     }
     this.apiBaseUrl = API_BASE_URL.replace('{network}', '');

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

@@ -1,11 +1,10 @@
-import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
 import { WebsocketResponse } from '../interfaces/websocket.interface';
 import { StateService } from './state.service';
 import { Block, Transaction } from '../interfaces/electrs.interface';
 import { Subscription } from 'rxjs';
 import { env } from '../app.constants';
-import { isPlatformBrowser } from '@angular/common';
 import { ApiService } from './api.service';
 import { take } from 'rxjs/operators';
 
@@ -29,14 +28,14 @@ export class WebsocketService {
   private onlineCheckTimeoutTwo: number;
   private subscription: Subscription;
   private network = '';
-  private isBrowser: boolean = isPlatformBrowser(this.platformId);
 
   constructor(
     private stateService: StateService,
     private apiService: ApiService,
-    @Inject(PLATFORM_ID) private platformId: any,
   ) {
-    if (!this.isBrowser) {
+    if (!this.stateService.isBrowser) {
+      // @ts-ignore
+      this.websocketSubject = { next: () => {}};
       this.stateService.isLoadingWebSocket$.next(false);
       this.apiService.getInitData$()
         .pipe(take(1))
@@ -147,7 +146,7 @@ export class WebsocketService {
   }
 
   want(data: string[], force = false) {
-    if (!this.isBrowser) {
+    if (!this.stateService.isBrowser) {
       return;
     }
     if (data === this.lastWant && !force) {

frontend/src/main.server.ts

@@ -5,7 +5,7 @@
 import * as domino from 'domino';
 
 const win = domino.createWindow();
-
+// @ts-ignore
 global['window'] = win;
 global['document'] = win.document;