diff --git a/frontend/server.ts b/frontend/server.ts index 97ad259b1..acf766ee6 100644 --- a/frontend/server.ts +++ b/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. diff --git a/frontend/src/app/components/qrcode/qrcode.component.ts b/frontend/src/app/components/qrcode/qrcode.component.ts index 9cabef088..2d40c0c96 100644 --- a/frontend/src/app/components/qrcode/qrcode.component.ts +++ b/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, diff --git a/frontend/src/app/components/statistics/chartist.component.ts b/frontend/src/app/components/statistics/chartist.component.ts index 0a414be20..b0e9aff3a 100644 --- a/frontend/src/app/components/statistics/chartist.component.ts +++ b/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 { + 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); } diff --git a/frontend/src/app/components/time-since/time-since.component.ts b/frontend/src/app/components/time-since/time-since.component.ts index b46882ff6..4371bf929 100644 --- a/frontend/src/app/components/time-since/time-since.component.ts +++ b/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; diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 100fca701..6e3291a08 100644 --- a/frontend/src/app/services/api.service.ts +++ b/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; } } diff --git a/frontend/src/app/services/assets.service.ts b/frontend/src/app/services/assets.service.ts index 2adf57211..9c3ac5de8 100644 --- a/frontend/src/app/services/assets.service.ts +++ b/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()); } } diff --git a/frontend/src/app/services/electrs-api.service.ts b/frontend/src/app/services/electrs-api.service.ts index e166b3eb7..0474987ee 100644 --- a/frontend/src/app/services/electrs-api.service.ts +++ b/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}', ''); diff --git a/frontend/src/app/services/websocket.service.ts b/frontend/src/app/services/websocket.service.ts index cd06bd21c..5e5edb0a1 100644 --- a/frontend/src/app/services/websocket.service.ts +++ b/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) { diff --git a/frontend/src/main.server.ts b/frontend/src/main.server.ts index f8a0a6b0f..952db9ea7 100644 --- a/frontend/src/main.server.ts +++ b/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;