machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

angular universal WIP

Browse Source 
refs #104
This commit is contained in:
softsimon
2020-11-07 04:30:52 +07:00
parent 989b58ce4a
commit dfad5ede74
25 changed files with 18061 additions and 758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/app/services/api.service.ts
View File

@@ -1,9 +1,11 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
import { Inject, Injectable, PLATFORM_ID } 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';
const API_BASE_URL = '{network}/api/v1';
@@ -11,19 +13,28 @@ const API_BASE_URL = '{network}/api/v1';
providedIn: 'root'
})
export class ApiService {
apiBaseUrl: string;
private apiBaseUrl: string;
private isBrowser: boolean = isPlatformBrowser(this.platformId);
constructor(
private httpClient: HttpClient,
private stateService: StateService,
@Inject(PLATFORM_ID) private platformId: any,
) {
this.apiBaseUrl = API_BASE_URL.replace('{network}', '');
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) {
this.apiBaseUrl = 'http://localhost:8999' + this.apiBaseUrl;
}
});
this.apiBaseUrl = API_BASE_URL.replace('{network}', '');
if (!this.isBrowser) {
this.apiBaseUrl = 'http://localhost:8999' + this.apiBaseUrl;
}
}
list2HStatistics$(): Observable<OptimizedMempoolStats[]> {
@@ -73,4 +84,8 @@ export class ApiService {
getDonation$(): Observable<any[]> {
return this.httpClient.get<any[]>(this.apiBaseUrl + '/donations');
}
getInitData$(): Observable<WebsocketResponse> {
return this.httpClient.get<WebsocketResponse>(this.apiBaseUrl + '/init-data');
}
}

10
frontend/src/app/services/audio.service.ts
View File

@@ -4,13 +4,17 @@ import { Injectable } from '@angular/core';
providedIn: 'root'
})
export class AudioService {
audio = new Audio();
audio: HTMLAudioElement;
isPlaying = false;
constructor() { }
constructor() {
try {
this.audio = new Audio();
} catch (e) {}
}
public playSound(name: 'magic' | 'chime' | 'cha-ching' | 'bright-harmony') {
if (this.isPlaying) {
if (this.isPlaying || !this.audio) {
return;
}
this.isPlaying = true;

13
frontend/src/app/services/electrs-api.service.ts
View File

@@ -1,22 +1,27 @@
import { Injectable } from '@angular/core';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Block, Transaction, Address, Outspend, Recent, Asset } from '../interfaces/electrs.interface';
import { StateService } from './state.service';
import { env } from '../app.constants';
const API_BASE_URL = '{network}/api';
let API_BASE_URL = '{network}/api';
@Injectable({
providedIn: 'root'
})
export class ElectrsApiService {
apiBaseUrl: string;
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) {
API_BASE_URL = 'http://localhost:4200/api';
}
this.apiBaseUrl = API_BASE_URL.replace('{network}', '');
this.stateService.networkChanged$.subscribe((network) => {
if (network === 'bisq') {

21
frontend/src/app/services/state.service.ts
View File

@@ -1,11 +1,12 @@
import { Injectable } from '@angular/core';
import { ReplaySubject, BehaviorSubject, Subject, fromEvent } from 'rxjs';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { ReplaySubject, BehaviorSubject, Subject, fromEvent, Observable } from 'rxjs';
import { Block, Transaction } from '../interfaces/electrs.interface';
import { MempoolBlock, MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
import { Router, NavigationStart } from '@angular/router';
import { env } from '../app.constants';
import { shareReplay, map } from 'rxjs/operators';
import { isPlatformBrowser } from '@angular/common';
import { map, shareReplay } from 'rxjs/operators';
interface MarkBlockState {
blockHeight?: number;
@@ -17,6 +18,7 @@ interface MarkBlockState {
providedIn: 'root'
})
export class StateService {
isBrowser: boolean = isPlatformBrowser(this.platformId);
network = '';
latestBlockHeight = 0;
@@ -40,21 +42,28 @@ export class StateService {
viewFiat$ = new BehaviorSubject<boolean>(false);
connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
isTabHidden$ = fromEvent(document, 'visibilitychange').pipe(map((event) => this.isHidden()), shareReplay());
isTabHidden$: Observable<boolean>;
markBlock$ = new ReplaySubject<MarkBlockState>();
keyNavigation$ = new Subject<KeyboardEvent>();
constructor(
@Inject(PLATFORM_ID) private platformId: any,
private router: Router,
) {
this.setNetworkBasedonUrl(window.location.pathname);
this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
this.setNetworkBasedonUrl(event.url);
}
});
if (this.isBrowser) {
this.setNetworkBasedonUrl(window.location.pathname);
this.isTabHidden$ = fromEvent(document, 'visibilitychange').pipe(map(() => this.isHidden()), shareReplay());
} else {
this.setNetworkBasedonUrl('/');
this.isTabHidden$ = new BehaviorSubject(false);
}
}
setNetworkBasedonUrl(url: string) {

8
frontend/src/app/services/storage.service.ts
View File

@@ -7,16 +7,12 @@ export class StorageService {
getValue(key: string): string {
try {
return localStorage.getItem(key);
} catch (e) {
console.log(e);
}
} catch (e) { }
}
setValue(key: string, value: any): void {
try {
localStorage.setItem(key, value);
} catch (e) {
console.log(e);
}
} catch (e) { }
}
}

255
frontend/src/app/services/websocket.service.ts
View File

@@ -1,13 +1,16 @@
import { Injectable } from '@angular/core';
import { Inject, Injectable, PLATFORM_ID } 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';
const WEB_SOCKET_PROTOCOL = (document.location.protocol === 'https:') ? 'wss:' : 'ws:';
const WEB_SOCKET_URL = WEB_SOCKET_PROTOCOL + '//' + document.location.hostname + ':' + document.location.port + '{network}/api/v1/ws';
const WEB_SOCKET_PROTOCOL = 'ws:';
const WEB_SOCKET_URL = WEB_SOCKET_PROTOCOL + '//localhost:8999{network}/api/v1/ws';
const OFFLINE_RETRY_AFTER_MS = 10000;
const OFFLINE_PING_CHECK_AFTER_MS = 30000;
@@ -26,33 +29,44 @@ 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,
) {
this.network = this.stateService.network === 'bisq' && !env.BISQ_SEPARATE_BACKEND ? '' : this.stateService.network;
this.websocketSubject = webSocket<WebsocketResponse>(WEB_SOCKET_URL.replace('{network}', this.network ? '/' + this.network : ''));
this.startSubscription();
if (!this.isBrowser) {
this.stateService.isLoadingWebSocket$.next(false);
this.apiService.getInitData$()
.pipe(take(1))
.subscribe((response) => this.handleResponse(response));
this.stateService.networkChanged$.subscribe((network) => {
if (network === 'bisq' && !env.BISQ_SEPARATE_BACKEND) {
network = '';
}
if (network === this.network) {
return;
}
this.network = network;
clearTimeout(this.onlineCheckTimeout);
clearTimeout(this.onlineCheckTimeoutTwo);
this.stateService.latestBlockHeight = 0;
this.websocketSubject.complete();
this.subscription.unsubscribe();
} else {
this.network = this.stateService.network === 'bisq' && !env.BISQ_SEPARATE_BACKEND ? '' : this.stateService.network;
this.websocketSubject = webSocket<WebsocketResponse>(WEB_SOCKET_URL.replace('{network}', this.network ? '/' + this.network : ''));
this.startSubscription();
});
this.stateService.networkChanged$.subscribe((network) => {
if (network === 'bisq' && !env.BISQ_SEPARATE_BACKEND) {
network = '';
}
if (network === this.network) {
return;
}
this.network = network;
clearTimeout(this.onlineCheckTimeout);
clearTimeout(this.onlineCheckTimeoutTwo);
this.stateService.latestBlockHeight = 0;
this.websocketSubject.complete();
this.subscription.unsubscribe();
this.websocketSubject = webSocket<WebsocketResponse>(WEB_SOCKET_URL.replace('{network}', this.network ? '/' + this.network : ''));
this.startSubscription();
});
}
}
startSubscription(retrying = false) {
@@ -64,100 +78,7 @@ export class WebsocketService {
this.subscription = this.websocketSubject
.subscribe((response: WebsocketResponse) => {
this.stateService.isLoadingWebSocket$.next(false);
if (response.blocks && response.blocks.length) {
const blocks = response.blocks;
blocks.forEach((block: Block) => {
if (block.height > this.stateService.latestBlockHeight) {
this.stateService.latestBlockHeight = block.height;
this.stateService.blocks$.next([block, false]);
}
});
}
if (response.tx) {
this.stateService.mempoolTransactions$.next(response.tx);
}
if (response.block) {
if (response.block.height > this.stateService.latestBlockHeight) {
this.stateService.latestBlockHeight = response.block.height;
this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
}
if (response.txConfirmed) {
this.isTrackingTx = false;
}
}
if (response.conversions) {
this.stateService.conversions$.next(response.conversions);
}
if (response.rbfTransaction) {
this.stateService.txReplaced$.next(response.rbfTransaction);
}
if (response['mempool-blocks']) {
this.stateService.mempoolBlocks$.next(response['mempool-blocks']);
}
if (response.transactions) {
response.transactions.forEach((tx) => this.stateService.transactions$.next(tx));
}
if (response['bsq-price']) {
this.stateService.bsqPrice$.next(response['bsq-price']);
}
if (response['git-commit']) {
this.stateService.gitCommit$.next(response['git-commit']);
if (!this.latestGitCommit) {
this.latestGitCommit = response['git-commit'];
} else {
if (this.latestGitCommit !== response['git-commit']) {
setTimeout(() => {
window.location.reload();
}, Math.floor(Math.random() * 60000) + 60000);
}
}
}
if (response['address-transactions']) {
response['address-transactions'].forEach((addressTransaction: Transaction) => {
this.stateService.mempoolTransactions$.next(addressTransaction);
});
}
if (response['block-transactions']) {
response['block-transactions'].forEach((addressTransaction: Transaction) => {
this.stateService.blockTransactions$.next(addressTransaction);
});
}
if (response['live-2h-chart']) {
this.stateService.live2Chart$.next(response['live-2h-chart']);
}
if (response.mempoolInfo) {
this.stateService.mempoolInfo$.next(response.mempoolInfo);
}
if (response.vBytesPerSecond !== undefined) {
this.stateService.vbytesPerSecond$.next(response.vBytesPerSecond);
}
if (response.lastDifficultyAdjustment !== undefined) {
this.stateService.lastDifficultyAdjustment$.next(response.lastDifficultyAdjustment);
}
if (response['git-commit']) {
this.stateService.gitCommit$.next(response['git-commit']);
}
if (response.donationConfirmed) {
this.stateService.donationConfirmed$.next(true);
}
this.handleResponse(response);
if (this.goneOffline === true) {
this.goneOffline = false;
@@ -226,6 +147,9 @@ export class WebsocketService {
}
want(data: string[], force = false) {
if (!this.isBrowser) {
return;
}
if (data === this.lastWant && !force) {
return;
}
@@ -257,4 +181,101 @@ export class WebsocketService {
}, EXPECT_PING_RESPONSE_AFTER_MS);
}, OFFLINE_PING_CHECK_AFTER_MS);
}
handleResponse(response: WebsocketResponse) {
if (response.blocks && response.blocks.length) {
const blocks = response.blocks;
blocks.forEach((block: Block) => {
if (block.height > this.stateService.latestBlockHeight) {
this.stateService.latestBlockHeight = block.height;
this.stateService.blocks$.next([block, false]);
}
});
}
if (response.tx) {
this.stateService.mempoolTransactions$.next(response.tx);
}
if (response.block) {
if (response.block.height > this.stateService.latestBlockHeight) {
this.stateService.latestBlockHeight = response.block.height;
this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
}
if (response.txConfirmed) {
this.isTrackingTx = false;
}
}
if (response.conversions) {
this.stateService.conversions$.next(response.conversions);
}
if (response.rbfTransaction) {
this.stateService.txReplaced$.next(response.rbfTransaction);
}
if (response['mempool-blocks']) {
this.stateService.mempoolBlocks$.next(response['mempool-blocks']);
}
if (response.transactions) {
response.transactions.forEach((tx) => this.stateService.transactions$.next(tx));
}
if (response['bsq-price']) {
this.stateService.bsqPrice$.next(response['bsq-price']);
}
if (response['git-commit']) {
this.stateService.gitCommit$.next(response['git-commit']);
if (!this.latestGitCommit) {
this.latestGitCommit = response['git-commit'];
} else {
if (this.latestGitCommit !== response['git-commit']) {
setTimeout(() => {
window.location.reload();
}, Math.floor(Math.random() * 60000) + 60000);
}
}
}
if (response['address-transactions']) {
response['address-transactions'].forEach((addressTransaction: Transaction) => {
this.stateService.mempoolTransactions$.next(addressTransaction);
});
}
if (response['block-transactions']) {
response['block-transactions'].forEach((addressTransaction: Transaction) => {
this.stateService.blockTransactions$.next(addressTransaction);
});
}
if (response['live-2h-chart']) {
this.stateService.live2Chart$.next(response['live-2h-chart']);
}
if (response.mempoolInfo) {
this.stateService.mempoolInfo$.next(response.mempoolInfo);
}
if (response.vBytesPerSecond !== undefined) {
this.stateService.vbytesPerSecond$.next(response.vBytesPerSecond);
}
if (response.lastDifficultyAdjustment !== undefined) {
this.stateService.lastDifficultyAdjustment$.next(response.lastDifficultyAdjustment);
}
if (response['git-commit']) {
this.stateService.gitCommit$.next(response['git-commit']);
}
if (response.donationConfirmed) {
this.stateService.donationConfirmed$.next(true);
}
}
}