Address
- + {{ addressString | shortenString : 24 }} {{ addressString }} diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts index 0293de689..197a4fadf 100644 --- a/frontend/src/app/components/address/address.component.ts +++ b/frontend/src/app/components/address/address.component.ts @@ -9,7 +9,6 @@ import { AudioService } from 'src/app/services/audio.service'; import { ApiService } from 'src/app/services/api.service'; import { of, merge, Subscription } from 'rxjs'; import { SeoService } from 'src/app/services/seo.service'; -import { environment } from 'src/environments/environment'; @Component({ selector: 'app-address', @@ -17,7 +16,7 @@ import { environment } from 'src/environments/environment'; styleUrls: ['./address.component.scss'] }) export class AddressComponent implements OnInit, OnDestroy { - network = environment.network; + network = ''; address: Address; addressString: string; @@ -48,6 +47,7 @@ export class AddressComponent implements OnInit, OnDestroy { ) { } ngOnInit() { + this.stateService.networkChanged$.subscribe((network) => this.network = network); this.websocketService.want(['blocks', 'stats', 'mempool-blocks']); this.mainSubscription = this.route.paramMap diff --git a/frontend/src/app/components/amount/amount.component.html b/frontend/src/app/components/amount/amount.component.html index b8d632b02..8f19fa758 100644 --- a/frontend/src/app/components/amount/amount.component.html +++ b/frontend/src/app/components/amount/amount.component.html @@ -6,6 +6,7 @@ ConfidentialAsset
- + {{ assetString | shortenString : 24 }} {{ assetString }} @@ -30,7 +30,7 @@
- Block
+ Block
Block {{ blockHeight }}
+ Block {{ blockHeight }}
-
+
diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html
index d8d7c3882..1f630e49d 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.html
+++ b/frontend/src/app/components/blockchain/blockchain.component.html
@@ -1,11 +1,13 @@
-
+
diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts index 80901c0bc..48e0f2bb1 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.ts +++ b/frontend/src/app/components/blockchain/blockchain.component.ts @@ -1,6 +1,4 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { Subscription } from 'rxjs'; -import { take } from 'rxjs/operators'; +import { Component, OnInit } from '@angular/core'; import { StateService } from 'src/app/services/state.service'; @Component({ @@ -8,9 +6,7 @@ import { StateService } from 'src/app/services/state.service'; templateUrl: './blockchain.component.html', styleUrls: ['./blockchain.component.scss'] }) -export class BlockchainComponent implements OnInit, OnDestroy { - blocksSubscription: Subscription; - +export class BlockchainComponent implements OnInit { txTrackingLoading = false; txShowTxNotFound = false; isLoading = true; @@ -20,14 +16,7 @@ export class BlockchainComponent implements OnInit, OnDestroy { ) {} ngOnInit() { - this.blocksSubscription = this.stateService.blocks$ - .pipe( - take(1) - ) - .subscribe(() => this.isLoading = false); - } - - ngOnDestroy() { - this.blocksSubscription.unsubscribe(); + this.stateService.blocks$.subscribe(() => this.isLoading = false); + this.stateService.networkChanged$.subscribe(() => this.isLoading = true); } } diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html index 14f0a6172..794747579 100644 --- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html +++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html @@ -1,5 +1,5 @@ -
Waiting for blocks...
diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts index 80901c0bc..48e0f2bb1 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.ts +++ b/frontend/src/app/components/blockchain/blockchain.component.ts @@ -1,6 +1,4 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { Subscription } from 'rxjs'; -import { take } from 'rxjs/operators'; +import { Component, OnInit } from '@angular/core'; import { StateService } from 'src/app/services/state.service'; @Component({ @@ -8,9 +6,7 @@ import { StateService } from 'src/app/services/state.service'; templateUrl: './blockchain.component.html', styleUrls: ['./blockchain.component.scss'] }) -export class BlockchainComponent implements OnInit, OnDestroy { - blocksSubscription: Subscription; - +export class BlockchainComponent implements OnInit { txTrackingLoading = false; txShowTxNotFound = false; isLoading = true; @@ -20,14 +16,7 @@ export class BlockchainComponent implements OnInit, OnDestroy { ) {} ngOnInit() { - this.blocksSubscription = this.stateService.blocks$ - .pipe( - take(1) - ) - .subscribe(() => this.isLoading = false); - } - - ngOnDestroy() { - this.blocksSubscription.unsubscribe(); + this.stateService.blocks$.subscribe(() => this.isLoading = false); + this.stateService.networkChanged$.subscribe(() => this.isLoading = true); } } diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html index 14f0a6172..794747579 100644 --- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html +++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html @@ -1,5 +1,5 @@ -
+
Quantitative Hardening in {{ 630000 - latestBlockHeight }} blocks (~
@@ -17,7 +17,7 @@
- {{ block.height }}
+ {{ block.height }}
{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
{{ block.tx_count | number }}
diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.ts b/frontend/src/app/components/latest-blocks/latest-blocks.component.ts
index 6cb223b91..893cce888 100644
--- a/frontend/src/app/components/latest-blocks/latest-blocks.component.ts
+++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.ts
@@ -4,7 +4,6 @@ import { StateService } from '../../services/state.service';
import { Block } from '../../interfaces/electrs.interface';
import { Subscription } from 'rxjs';
import { SeoService } from 'src/app/services/seo.service';
-import { environment } from 'src/environments/environment';
@Component({
selector: 'app-latest-blocks',
@@ -12,7 +11,7 @@ import { environment } from 'src/environments/environment';
styleUrls: ['./latest-blocks.component.scss'],
})
export class LatestBlocksComponent implements OnInit, OnDestroy {
- network = environment.network;
+ network = '';
blocks: any[] = [];
blockSubscription: Subscription;
@@ -32,6 +31,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
ngOnInit() {
this.seoService.resetTitle();
+ this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.blockSubscription = this.stateService.blocks$
.subscribe((block) => {
diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index cd24fb27f..5bcf92717 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -5,27 +5,38 @@
Quantitative Hardening in {{ 630000 - latestBlockHeight }} blocks (~
Offline
Reconnecting...
-
+
+
+
+
+
+
-
-
+
-
+
~{{ projectedBlock.medianFee | number:'1.0-0' }} sat/vB
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index 1b1c7d993..38a3c111f 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -4,7 +4,7 @@ import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router';
import { take } from 'rxjs/operators';
-import { environment } from '../../../environments/environment';
+
@Component({
selector: 'app-mempool-blocks',
templateUrl: './mempool-blocks.component.html',
@@ -14,7 +14,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
mempoolBlocks: MempoolBlock[];
mempoolBlocksFull: MempoolBlock[];
mempoolBlocksSubscription: Subscription;
- network = environment.network;
+ network = '';
blockWidth = 125;
blockPadding = 30;
@@ -54,6 +54,9 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
}
this.calculateTransactionPosition();
});
+
+ this.stateService.networkChanged$
+ .subscribe((network) => this.network = network);
}
@HostListener('window:resize', ['$event'])
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index e9b815dab..08f1ea99f 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -2,8 +2,8 @@ import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, O
import { formatDate } from '@angular/common';
import { VbytesPipe } from 'src/app/pipes/bytes-pipe/vbytes.pipe';
import * as Chartist from 'chartist';
-import { environment } from 'src/environments/environment';
import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
+import { StateService } from 'src/app/services/state.service';
@Component({
selector: 'app-mempool-graph',
@@ -13,16 +13,18 @@ import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
export class MempoolGraphComponent implements OnInit, OnChanges {
@Input() data;
- network = environment.network;
+ network = '';
mempoolVsizeFeesOptions: any;
mempoolVsizeFeesData: any;
constructor(
private vbytesPipe: VbytesPipe,
+ private stateService: StateService,
@Inject(LOCALE_ID) private locale: string,
) { }
ngOnInit(): void {
+ this.stateService.networkChanged$.subscribe((network) => this.network = network);
const labelInterpolationFnc = (value: any, index: any) => {
return index % 6 === 0 ? formatDate(value, 'HH:mm', this.locale) : null;
};
diff --git a/frontend/src/app/components/search-form/search-form.component.ts b/frontend/src/app/components/search-form/search-form.component.ts
index 4500a6dd6..8b43fa751 100644
--- a/frontend/src/app/components/search-form/search-form.component.ts
+++ b/frontend/src/app/components/search-form/search-form.component.ts
@@ -1,8 +1,8 @@
import { Component, OnInit, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
-import { environment } from 'src/environments/environment';
import { AssetsService } from 'src/app/services/assets.service';
+import { StateService } from 'src/app/services/state.service';
@Component({
selector: 'app-search-form',
@@ -11,7 +11,7 @@ import { AssetsService } from 'src/app/services/assets.service';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SearchFormComponent implements OnInit {
- network = environment.network;
+ network = '';
assets: object;
searchForm: FormGroup;
@@ -25,9 +25,12 @@ export class SearchFormComponent implements OnInit {
private formBuilder: FormBuilder,
private router: Router,
private assetsService: AssetsService,
+ private stateService: StateService,
) { }
ngOnInit() {
+ this.stateService.networkChanged$.subscribe((network) => this.network = network);
+
this.searchForm = this.formBuilder.group({
searchText: ['', Validators.required],
});
@@ -43,16 +46,16 @@ export class SearchFormComponent implements OnInit {
const searchText = this.searchForm.value.searchText.trim();
if (searchText) {
if (this.regexAddress.test(searchText)) {
- this.router.navigate(['/address/', searchText]);
+ this.router.navigate([(this.network ? '/' + this.network : '') + '/address/', searchText]);
this.searchTriggered.emit();
} else if (this.regexBlockhash.test(searchText)) {
- this.router.navigate(['/block/', searchText]);
+ this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', searchText]);
this.searchTriggered.emit();
} else if (this.regexTransaction.test(searchText)) {
if (this.network === 'liquid' && this.assets[searchText]) {
- this.router.navigate(['/asset/', searchText]);
+ this.router.navigate([(this.network ? '/' + this.network : '') + '/asset/', searchText]);
} else {
- this.router.navigate(['/tx/', searchText]);
+ this.router.navigate([(this.network ? '/' + this.network : '') + '/tx/', searchText]);
}
this.searchTriggered.emit();
} else {
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 53c28a5be..5ed3bb051 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -19,25 +19,25 @@
diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts
index 7ec2c9ada..dce1c4cf1 100644
--- a/frontend/src/app/components/statistics/statistics.component.ts
+++ b/frontend/src/app/components/statistics/statistics.component.ts
@@ -12,7 +12,6 @@ import { ApiService } from '../../services/api.service';
import * as Chartist from 'chartist';
import { StateService } from 'src/app/services/state.service';
import { SeoService } from 'src/app/services/seo.service';
-import { environment } from 'src/environments/environment';
@Component({
selector: 'app-statistics',
@@ -20,7 +19,7 @@ import { environment } from 'src/environments/environment';
styleUrls: ['./statistics.component.scss']
})
export class StatisticsComponent implements OnInit {
- network = environment.network;
+ network = '';
loading = true;
spinnerLoading = false;
@@ -52,6 +51,8 @@ export class StatisticsComponent implements OnInit {
ngOnInit() {
this.seoService.setTitle('Graphs');
+ this.stateService.networkChanged$.subscribe((network) => this.network = network);
+
const labelInterpolationFnc = (value: any, index: any) => {
const nr = 6;
diff --git a/frontend/src/app/components/television/television.component.ts b/frontend/src/app/components/television/television.component.ts
index db141a02f..0c5b2a920 100644
--- a/frontend/src/app/components/television/television.component.ts
+++ b/frontend/src/app/components/television/television.component.ts
@@ -4,7 +4,6 @@ import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
import { StateService } from 'src/app/services/state.service';
import { ApiService } from 'src/app/services/api.service';
import { SeoService } from 'src/app/services/seo.service';
-import { environment } from 'src/environments/environment';
@Component({
selector: 'app-television',
@@ -13,7 +12,6 @@ import { environment } from 'src/environments/environment';
})
export class TelevisionComponent implements OnInit {
loading = true;
- network = environment.network;
mempoolStats: OptimizedMempoolStats[] = [];
mempoolVsizeFeesData: any;
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 8ff5bd3b6..6baff8c56 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -11,7 +11,7 @@
-
+
{{ txId | shortenString : 24 }}
{{ txId }}
@@ -33,7 +33,7 @@
Included in block
- {{ tx.status.block_height }}
+ {{ tx.status.block_height }}
(
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index 78eacbed6..8b48be2c6 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -9,7 +9,6 @@ import { WebsocketService } from '../../services/websocket.service';
import { AudioService } from 'src/app/services/audio.service';
import { ApiService } from 'src/app/services/api.service';
import { SeoService } from 'src/app/services/seo.service';
-import { environment } from '../../../environments/environment';
@Component({
selector: 'app-transaction',
@@ -17,7 +16,7 @@ import { environment } from '../../../environments/environment';
styleUrls: ['./transaction.component.scss']
})
export class TransactionComponent implements OnInit, OnDestroy {
- network = environment.network;
+ network = '';
tx: Transaction;
txId: string;
feeRating: number;
@@ -44,6 +43,8 @@ export class TransactionComponent implements OnInit, OnDestroy {
) { }
ngOnInit() {
+ this.stateService.networkChanged$.subscribe((network) => this.network = network);
+
this.subscription = this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
this.txId = params.get('id') || '';
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 867963730..72aa5ef00 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -1,6 +1,6 @@
-
+
{{ tx.txid | shortenString : 16 }}
{{ tx.txid }}
@@ -18,21 +18,28 @@
-
+
-
+
+
+
+
+
+
Coinbase (Newly Generated Coins)
- PEG IN
+
+ Peg-in
+
-
+
{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}
{{ vin.prevout.scriptpubkey_address | shortenString : 42 }}
@@ -60,13 +67,16 @@
-
+
{{ vout.scriptpubkey_address | shortenString : 16 }}
{{ vout.scriptpubkey_address | shortenString : 42 }}
- PEG OUT
+ Peg-out to
+ {{ vout.pegout.scriptpubkey_address | shortenString : 16 }}
+ {{ vout.pegout.scriptpubkey_address | shortenString : 42 }}
+
{{ vout.scriptpubkey_type | scriptpubkeyType }}
@@ -80,7 +90,7 @@
{{ assetsMinimal[vout.asset][0] }}
- {{ vout.asset | shortenString : 13 }} + {{ vout.asset | shortenString : 13 }}
@@ -93,7 +103,7 @@
-
+
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.ts b/frontend/src/app/components/transactions-list/transactions-list.component.ts
index edd98eb68..b861920fe 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -13,7 +13,7 @@ import { AssetsService } from 'src/app/services/assets.service';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TransactionsListComponent implements OnInit, OnChanges {
- network = environment.network;
+ network = '';
nativeAssetId = environment.nativeAssetId;
@Input() transactions: Transaction[];
@@ -35,6 +35,8 @@ export class TransactionsListComponent implements OnInit, OnChanges {
ngOnInit() {
this.latestBlock$ = this.stateService.blocks$;
+ this.stateService.networkChanged$.subscribe((network) => this.network = network);
+
if (this.network === 'liquid') {
this.assetsService.getAssetsMinimalJson$.subscribe((assets) => {
this.assetsMinimal = assets;
diff --git a/frontend/src/app/interfaces/electrs.interface.ts b/frontend/src/app/interfaces/electrs.interface.ts
index 1cd2d4b8a..cff0483e0 100644
--- a/frontend/src/app/interfaces/electrs.interface.ts
+++ b/frontend/src/app/interfaces/electrs.interface.ts
@@ -68,7 +68,7 @@ interface Pegout {
genesis_hash: string;
scriptpubkey: string;
scriptpubkey_asm: string;
- scriptpubkey_addres: string;
+ scriptpubkey_address: string;
}
export interface Status {
diff --git a/frontend/src/app/pipes/relative-url/relative-url.pipe.spec.ts b/frontend/src/app/pipes/relative-url/relative-url.pipe.spec.ts
new file mode 100644
index 000000000..5bc82d35f
--- /dev/null
+++ b/frontend/src/app/pipes/relative-url/relative-url.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { RelativeUrlPipe } from './relative-url.pipe';
+
+describe('RelativeUrlPipe', () => {
+ it('create an instance', () => {
+ const pipe = new RelativeUrlPipe();
+ expect(pipe).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/pipes/relative-url/relative-url.pipe.ts b/frontend/src/app/pipes/relative-url/relative-url.pipe.ts
new file mode 100644
index 000000000..779268416
--- /dev/null
+++ b/frontend/src/app/pipes/relative-url/relative-url.pipe.ts
@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
+
+@Pipe({
+ name: 'relativeUrl'
+})
+export class RelativeUrlPipe implements PipeTransform {
+
+ constructor(
+ private stateService: StateService,
+ ) { }
+
+ transform(value: string): string {
+ return (this.stateService.network ? '/' + this.stateService.network : '') + value;
+ }
+
+}
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index 7078aa551..61f14dcb3 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -2,43 +2,52 @@ import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
import { Observable } from 'rxjs';
+import { StateService } from './state.service';
-const API_BASE_URL = '/api/v1';
+const API_BASE_URL = '/api{network}/v1';
@Injectable({
providedIn: 'root'
})
export class ApiService {
+ apiBaseUrl: string;
+
constructor(
private httpClient: HttpClient,
- ) { }
+ private stateService: StateService,
+ ) {
+ this.apiBaseUrl = API_BASE_URL.replace('{network}', '');
+ this.stateService.networkChanged$.subscribe((network) => {
+ this.apiBaseUrl = API_BASE_URL.replace('{network}', network ? '/' + network : '');
+ });
+ }
list2HStatistics$(): Observable {
- return this.httpClient.get(API_BASE_URL + '/statistics/2h');
+ return this.httpClient.get(this.apiBaseUrl + '/statistics/2h');
}
list24HStatistics$(): Observable {
- return this.httpClient.get(API_BASE_URL + '/statistics/24h');
+ return this.httpClient.get(this.apiBaseUrl + '/statistics/24h');
}
list1WStatistics$(): Observable {
- return this.httpClient.get(API_BASE_URL + '/statistics/1w');
+ return this.httpClient.get(this.apiBaseUrl + '/statistics/1w');
}
list1MStatistics$(): Observable {
- return this.httpClient.get(API_BASE_URL + '/statistics/1m');
+ return this.httpClient.get(this.apiBaseUrl + '/statistics/1m');
}
list3MStatistics$(): Observable {
- return this.httpClient.get(API_BASE_URL + '/statistics/3m');
+ return this.httpClient.get(this.apiBaseUrl + '/statistics/3m');
}
list6MStatistics$(): Observable {
- return this.httpClient.get(API_BASE_URL + '/statistics/6m');
+ return this.httpClient.get(this.apiBaseUrl + '/statistics/6m');
}
list1YStatistics$(): Observable {
- return this.httpClient.get(API_BASE_URL + '/statistics/1y');
+ return this.httpClient.get(this.apiBaseUrl + '/statistics/1y');
}
getTransactionTimes$(txIds: string[]): Observable {
@@ -46,6 +55,6 @@ export class ApiService {
txIds.forEach((txId: string) => {
params = params.append('txId[]', txId);
});
- return this.httpClient.get(API_BASE_URL + '/transaction-times', { params });
+ return this.httpClient.get(this.apiBaseUrl + '/transaction-times', { params });
}
}
diff --git a/frontend/src/app/services/assets.service.ts b/frontend/src/app/services/assets.service.ts
index dc8bf867e..4023f048d 100644
--- a/frontend/src/app/services/assets.service.ts
+++ b/frontend/src/app/services/assets.service.ts
@@ -1,15 +1,12 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
-import { ReplaySubject, Observable } from 'rxjs';
-import { environment } from 'src/environments/environment';
+import { Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AssetsService {
- network = environment.network;
-
getAssetsJson$: Observable;
getAssetsMinimalJson$: Observable;
diff --git a/frontend/src/app/services/electrs-api.service.ts b/frontend/src/app/services/electrs-api.service.ts
index 9896e1f15..9e72cb2cc 100644
--- a/frontend/src/app/services/electrs-api.service.ts
+++ b/frontend/src/app/services/electrs-api.service.ts
@@ -2,6 +2,7 @@ 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';
+import { StateService } from './state.service';
const API_BASE_URL = document.location.protocol + '//' + document.location.hostname + ':' + document.location.port + '/electrs';
@@ -9,61 +10,68 @@ const API_BASE_URL = document.location.protocol + '//' + document.location.hostn
providedIn: 'root'
})
export class ElectrsApiService {
+ apiBaseUrl: string;
+
constructor(
private httpClient: HttpClient,
+ private stateService: StateService,
) {
+ this.apiBaseUrl = API_BASE_URL;
+ this.stateService.networkChanged$.subscribe((network) => {
+ this.apiBaseUrl = API_BASE_URL + '/' + network;
+ });
}
getBlock$(hash: string): Observable {
- return this.httpClient.get(API_BASE_URL + '/block/' + hash);
+ return this.httpClient.get(this.apiBaseUrl + '/block/' + hash);
}
listBlocks$(height?: number): Observable {
- return this.httpClient.get(API_BASE_URL + '/blocks/' + (height || ''));
+ return this.httpClient.get(this.apiBaseUrl + '/blocks/' + (height || ''));
}
getTransaction$(txId: string): Observable {
- return this.httpClient.get(API_BASE_URL + '/tx/' + txId);
+ return this.httpClient.get(this.apiBaseUrl + '/tx/' + txId);
}
getRecentTransaction$(): Observable {
- return this.httpClient.get(API_BASE_URL + '/mempool/recent');
+ return this.httpClient.get(this.apiBaseUrl + '/mempool/recent');
}
getOutspend$(hash: string, vout: number): Observable {
- return this.httpClient.get(API_BASE_URL + '/tx/' + hash + '/outspend/' + vout);
+ return this.httpClient.get(this.apiBaseUrl + '/tx/' + hash + '/outspend/' + vout);
}
getOutspends$(hash: string): Observable {
- return this.httpClient.get(API_BASE_URL + '/tx/' + hash + '/outspends');
+ return this.httpClient.get(this.apiBaseUrl + '/tx/' + hash + '/outspends');
}
getBlockTransactions$(hash: string, index: number = 0): Observable {
- return this.httpClient.get(API_BASE_URL + '/block/' + hash + '/txs/' + index);
+ return this.httpClient.get(this.apiBaseUrl + '/block/' + hash + '/txs/' + index);
}
getAddress$(address: string): Observable {
- return this.httpClient.get(API_BASE_URL + '/address/' + address);
+ return this.httpClient.get(this.apiBaseUrl + '/address/' + address);
}
getAddressTransactions$(address: string): Observable {
- return this.httpClient.get(API_BASE_URL + '/address/' + address + '/txs');
+ return this.httpClient.get(this.apiBaseUrl + '/address/' + address + '/txs');
}
getAddressTransactionsFromHash$(address: string, txid: string): Observable {
- return this.httpClient.get(API_BASE_URL + '/address/' + address + '/txs/chain/' + txid);
+ return this.httpClient.get(this.apiBaseUrl + '/address/' + address + '/txs/chain/' + txid);
}
getAsset$(assetId: string): Observable {
- return this.httpClient.get(API_BASE_URL + '/asset/' + assetId);
+ return this.httpClient.get(this.apiBaseUrl + '/asset/' + assetId);
}
getAssetTransactions$(assetId: string): Observable {
- return this.httpClient.get(API_BASE_URL + '/asset/' + assetId + '/txs');
+ return this.httpClient.get(this.apiBaseUrl + '/asset/' + assetId + '/txs');
}
getAssetTransactionsFromHash$(assetId: string, txid: string): Observable {
- return this.httpClient.get(API_BASE_URL + '/asset/' + assetId + '/txs/chain/' + txid);
+ return this.httpClient.get(this.apiBaseUrl + '/asset/' + assetId + '/txs/chain/' + txid);
}
}
diff --git a/frontend/src/app/services/seo.service.ts b/frontend/src/app/services/seo.service.ts
index 574f70af4..f07359a4e 100644
--- a/frontend/src/app/services/seo.service.ts
+++ b/frontend/src/app/services/seo.service.ts
@@ -1,17 +1,20 @@
import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
-import { environment } from 'src/environments/environment';
+import { StateService } from './state.service';
@Injectable({
providedIn: 'root'
})
export class SeoService {
- network = environment.network;
+ network = '';
defaultTitle = 'mempool - Bitcoin Explorer';
constructor(
private titleService: Title,
- ) { }
+ private stateService: StateService,
+ ) {
+ this.stateService.networkChanged$.subscribe((network) => this.network = network);
+ }
setTitle(newTitle: string, prependNetwork = false) {
let networkName = '';
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index e2b8c7687..c54a914f9 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -3,6 +3,7 @@ import { ReplaySubject, BehaviorSubject, Subject } from 'rxjs';
import { Block, Transaction } from '../interfaces/electrs.interface';
import { MempoolBlock, MemPoolState } from '../interfaces/websocket.interface';
import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
+import { Router, NavigationStart } from '@angular/router';
interface MarkBlockState {
blockHeight?: number;
@@ -14,10 +15,13 @@ interface MarkBlockState {
providedIn: 'root'
})
export class StateService {
+ network = '';
latestBlockHeight = 0;
+
+ networkChanged$ = new ReplaySubject(1);
blocks$ = new ReplaySubject(8);
conversions$ = new ReplaySubject(1);
- mempoolStats$ = new ReplaySubject();
+ mempoolStats$ = new ReplaySubject(1);
mempoolBlocks$ = new ReplaySubject(1);
txConfirmed$ = new Subject();
mempoolTransactions$ = new Subject();
@@ -30,4 +34,34 @@ export class StateService {
connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
markBlock$ = new Subject();
+
+ constructor(
+ private router: Router,
+ ) {
+ this.router.events.subscribe((event) => {
+ if (event instanceof NavigationStart) {
+ switch (event.url.split('/')[1]) {
+ case 'liquid':
+ case 'liquid-tv':
+ if (this.network !== 'liquid') {
+ this.network = 'liquid';
+ this.networkChanged$.next('liquid');
+ }
+ return;
+ case 'testnet':
+ case 'testnet-tv':
+ if (this.network !== 'testnet') {
+ this.network = 'testnet';
+ this.networkChanged$.next('testnet');
+ }
+ return;
+ default:
+ if (this.network !== '') {
+ this.network = '';
+ this.networkChanged$.next('');
+ }
+ }
+ }
+ });
+ }
}
diff --git a/frontend/src/app/services/websocket.service.ts b/frontend/src/app/services/websocket.service.ts
index 2141535ea..5d60ce248 100644
--- a/frontend/src/app/services/websocket.service.ts
+++ b/frontend/src/app/services/websocket.service.ts
@@ -16,7 +16,7 @@ const EXPECT_PING_RESPONSE_AFTER_MS = 1000;
providedIn: 'root'
})
export class WebsocketService {
- private websocketSubject: WebSocketSubject = webSocket(WEB_SOCKET_URL);
+ private websocketSubject: WebSocketSubject;
private goneOffline = false;
private lastWant: string[] | null = null;
private isTrackingTx = false;
@@ -28,7 +28,22 @@ export class WebsocketService {
constructor(
private stateService: StateService,
) {
+ this.websocketSubject = webSocket(WEB_SOCKET_URL + '/' + this.stateService.network);
this.startSubscription();
+
+ this.stateService.networkChanged$.subscribe((network) => {
+ clearTimeout(this.onlineCheckTimeout);
+ clearTimeout(this.onlineCheckTimeoutTwo);
+
+ this.stateService.latestBlockHeight = 0;
+
+ this.websocketSubject.complete();
+ this.subscription.unsubscribe();
+ this.websocketSubject = webSocket(WEB_SOCKET_URL + '/' + network);
+
+ this.startSubscription();
+ });
+
}
startSubscription(retrying = false) {
diff --git a/frontend/src/environments/environment.prod.ts b/frontend/src/environments/environment.prod.ts
index 9683e3f3e..5c0708478 100644
--- a/frontend/src/environments/environment.prod.ts
+++ b/frontend/src/environments/environment.prod.ts
@@ -1,9 +1,4 @@
-const full = window.location.host;
-const parts = full.split('.');
-const sub = parts[0];
-
export const environment = {
production: true,
- network: sub,
nativeAssetId: '6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d',
};
diff --git a/frontend/src/environments/environment.ts b/frontend/src/environments/environment.ts
index f8ca8345f..0e0068f3c 100644
--- a/frontend/src/environments/environment.ts
+++ b/frontend/src/environments/environment.ts
@@ -4,7 +4,6 @@
export const environment = {
production: false,
- network: 'mainnet',
nativeAssetId: '6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d',
};
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index f6d26936a..5ae98698d 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -56,6 +56,14 @@ body {
}
}
+.navbar-nav.liquid > .active {
+ background-color: #116761 !important;
+}
+
+.navbar-nav.testnet > .active {
+ background-color: #1d486f !important;
+}
+
.form-control {
color: #495057;
}
{{ assetsMinimal[vout.asset][0] }}
- {{ vout.asset | shortenString : 13 }} + {{ vout.asset | shortenString : 13 }}