mirror of
https://github.com/mempool/mempool.git
synced 2025-01-18 21:32:55 +01:00
Refactored frontend data handling.
This commit is contained in:
Simon Lindh
parent
1d65ae533b
commit
9898996d6c
@ -24,7 +24,7 @@ export class AppComponent implements OnInit {
|
||||
txId: ['', Validators.pattern('^[a-fA-F0-9]{64}$')],
|
||||
});
|
||||
|
||||
this.memPoolService.isOffline
|
||||
this.memPoolService.isOffline$
|
||||
.subscribe((state) => {
|
||||
this.isOffline = state;
|
||||
});
|
||||
@ -42,7 +42,7 @@ export class AppComponent implements OnInit {
|
||||
} else {
|
||||
this.router.navigate(['/tx/', txId]);
|
||||
}
|
||||
this.memPoolService.txIdSearch.next(txId);
|
||||
this.memPoolService.txIdSearch$.next(txId);
|
||||
this.searchForm.setValue({
|
||||
txId: '',
|
||||
});
|
||||
|
||||
@ -56,7 +56,7 @@ export class BlockModalComponent implements OnInit {
|
||||
]
|
||||
};
|
||||
|
||||
this.memPoolService.conversions
|
||||
this.memPoolService.conversions$
|
||||
.subscribe((conversions) => {
|
||||
this.conversions = conversions;
|
||||
});
|
||||
|
||||
@ -1,21 +1,33 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { IBlock } from '../blockchain/interfaces';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { BlockModalComponent } from './block-modal/block-modal.component';
|
||||
import { MemPoolService } from '../services/mem-pool.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blockchain-blocks',
|
||||
templateUrl: './blockchain-blocks.component.html',
|
||||
styleUrls: ['./blockchain-blocks.component.scss']
|
||||
})
|
||||
export class BlockchainBlocksComponent {
|
||||
|
||||
@Input() blocks: IBlock[];
|
||||
export class BlockchainBlocksComponent implements OnInit, OnDestroy {
|
||||
blocks: IBlock[] = [];
|
||||
blocksSubscription: Subscription;
|
||||
|
||||
constructor(
|
||||
private modalService: NgbModal,
|
||||
private memPoolService: MemPoolService,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.blocksSubscription = this.memPoolService.blocks$
|
||||
.subscribe((block) => this.blocks.unshift(block));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.blocksSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
getTimeSinceMined(block: IBlock): string {
|
||||
const minutes = ((new Date().getTime()) - (new Date(block.time * 1000).getTime())) / 1000 / 60;
|
||||
if (minutes >= 120) {
|
||||
|
||||
@ -9,12 +9,6 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.blocks-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.projected-blocks-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
||||
@ -1,21 +1,33 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { IProjectedBlock, IBlock } from '../blockchain/interfaces';
|
||||
import { ProjectedBlockModalComponent } from './projected-block-modal/projected-block-modal.component';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { MemPoolService } from '../services/mem-pool.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blockchain-projected-blocks',
|
||||
templateUrl: './blockchain-projected-blocks.component.html',
|
||||
styleUrls: ['./blockchain-projected-blocks.component.scss']
|
||||
})
|
||||
export class BlockchainProjectedBlocksComponent {
|
||||
|
||||
@Input() projectedBlocks: IProjectedBlock[];
|
||||
export class BlockchainProjectedBlocksComponent implements OnInit, OnDestroy {
|
||||
projectedBlocks: IProjectedBlock[];
|
||||
subscription: Subscription;
|
||||
|
||||
constructor(
|
||||
private modalService: NgbModal,
|
||||
private memPoolService: MemPoolService,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.subscription = this.memPoolService.projectedBlocks$
|
||||
.subscribe((projectedblocks) => this.projectedBlocks = projectedblocks);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
|
||||
trackByProjectedFn(index: number) {
|
||||
return index;
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@ export class ProjectedBlockModalComponent implements OnInit {
|
||||
]
|
||||
};
|
||||
|
||||
this.memPoolService.conversions
|
||||
this.memPoolService.conversions$
|
||||
.subscribe((conversions) => {
|
||||
this.conversions = conversions;
|
||||
});
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<div *ngIf="blocks.length === 0" class="text-center">
|
||||
<div *ngIf="isLoading" class="text-center">
|
||||
<h3>Loading blocks...</h3>
|
||||
<br>
|
||||
<div class="spinner-border text-light"></div>
|
||||
</div>
|
||||
<div *ngIf="blocks.length !== 0 && txTrackingLoading" class="text-center black-background">
|
||||
<div *ngIf="!isLoading && txTrackingLoading" class="text-center black-background">
|
||||
<h3>Locating transaction...</h3>
|
||||
</div>
|
||||
<div *ngIf="txShowTxNotFound" class="text-center black-background">
|
||||
@ -11,15 +11,14 @@
|
||||
</div>
|
||||
<div class="text-center" class="blockchain-wrapper">
|
||||
<div class="position-container">
|
||||
<app-blockchain-projected-blocks></app-blockchain-projected-blocks>
|
||||
<app-blockchain-blocks></app-blockchain-blocks>
|
||||
|
||||
<app-blockchain-projected-blocks [projectedBlocks]="projectedBlocks"></app-blockchain-projected-blocks>
|
||||
<app-blockchain-blocks [blocks]="blocks"></app-blockchain-blocks>
|
||||
|
||||
<div id="divider" *ngIf="blocks.length"></div>
|
||||
<div id="divider" *ngIf="!isLoading"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<app-tx-bubble *ngIf="blocks?.length && txTrackingTx" [tx]="txTrackingTx" [arrowPosition]="txBubbleArrowPosition" [ngStyle]="txBubbleStyle" [latestBlockHeight]="blocks[0].height" [txTrackingBlockHeight]="txTrackingBlockHeight"></app-tx-bubble>
|
||||
<app-tx-bubble></app-tx-bubble>
|
||||
|
||||
<app-footer></app-footer>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Component, OnInit, OnDestroy, Renderer2, HostListener } from '@angular/core';
|
||||
import { IMempoolDefaultResponse, IBlock, IProjectedBlock, ITransaction } from './interfaces';
|
||||
import { retryWhen, tap } from 'rxjs/operators';
|
||||
import { MemPoolService } from '../services/mem-pool.service';
|
||||
import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
|
||||
import { MemPoolService, ITxTracking } from '../services/mem-pool.service';
|
||||
import { ApiService } from '../services/api.service';
|
||||
import { ActivatedRoute, ParamMap } from '@angular/router';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { take } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blockchain',
|
||||
@ -11,23 +11,12 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
|
||||
styleUrls: ['./blockchain.component.scss']
|
||||
})
|
||||
export class BlockchainComponent implements OnInit, OnDestroy {
|
||||
blocks: IBlock[] = [];
|
||||
projectedBlocks: IProjectedBlock[] = [];
|
||||
subscription: any;
|
||||
socket: any;
|
||||
txBubbleStyle: any = {};
|
||||
txTrackingSubscription: Subscription;
|
||||
blocksSubscription: Subscription;
|
||||
|
||||
txTrackingLoading = false;
|
||||
txTrackingEnabled = false;
|
||||
txTrackingTx: ITransaction | null = null;
|
||||
txTrackingBlockHeight = 0;
|
||||
txShowTxNotFound = false;
|
||||
txBubbleArrowPosition = 'top';
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event: Event) {
|
||||
this.moveTxBubbleToPosition();
|
||||
}
|
||||
isLoading = true;
|
||||
|
||||
constructor(
|
||||
private memPoolService: MemPoolService,
|
||||
@ -37,72 +26,15 @@ export class BlockchainComponent implements OnInit, OnDestroy {
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.txTrackingSubscription = this.memPoolService.txTracking$
|
||||
.subscribe((response: ITxTracking) => {
|
||||
this.txTrackingLoading = false;
|
||||
this.txShowTxNotFound = response.notFound;
|
||||
if (this.txShowTxNotFound) {
|
||||
setTimeout(() => { this.txShowTxNotFound = false; }, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
this.txBubbleStyle = {
|
||||
'position': 'absolute',
|
||||
'top': '425px',
|
||||
'visibility': 'hidden',
|
||||
};
|
||||
this.socket = this.apiService.websocketSubject;
|
||||
this.subscription = this.socket
|
||||
.pipe(
|
||||
retryWhen((errors: any) => errors.pipe(
|
||||
tap(() => this.memPoolService.isOffline.next(true))))
|
||||
)
|
||||
.subscribe((response: IMempoolDefaultResponse) => {
|
||||
this.memPoolService.isOffline.next(false);
|
||||
if (response.mempoolInfo && response.txPerSecond !== undefined) {
|
||||
this.memPoolService.loaderSubject.next({
|
||||
memPoolInfo: response.mempoolInfo,
|
||||
txPerSecond: response.txPerSecond,
|
||||
vBytesPerSecond: response.vBytesPerSecond,
|
||||
});
|
||||
}
|
||||
if (response.blocks && response.blocks.length) {
|
||||
this.blocks = response.blocks;
|
||||
this.blocks.reverse();
|
||||
}
|
||||
if (response.block) {
|
||||
if (!this.blocks.some((block) => response.block !== undefined && response.block.height === block.height )) {
|
||||
this.blocks.unshift(response.block);
|
||||
if (this.blocks.length >= 8) {
|
||||
this.blocks.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (response.conversions) {
|
||||
this.memPoolService.conversions.next(response.conversions);
|
||||
}
|
||||
if (response.projectedBlocks) {
|
||||
this.projectedBlocks = response.projectedBlocks;
|
||||
const mempoolWeight = this.projectedBlocks.map((block) => block.blockWeight).reduce((a, b) => a + b);
|
||||
this.memPoolService.mempoolWeight.next(mempoolWeight);
|
||||
}
|
||||
if (response['track-tx']) {
|
||||
if (response['track-tx'].tracking) {
|
||||
this.txTrackingEnabled = true;
|
||||
this.txTrackingBlockHeight = response['track-tx'].blockHeight;
|
||||
if (response['track-tx'].tx) {
|
||||
this.txTrackingTx = response['track-tx'].tx;
|
||||
this.txTrackingLoading = false;
|
||||
}
|
||||
} else {
|
||||
this.txTrackingEnabled = false;
|
||||
this.txTrackingTx = null;
|
||||
this.txTrackingBlockHeight = 0;
|
||||
}
|
||||
if (response['track-tx'].message && response['track-tx'].message === 'not-found') {
|
||||
this.txTrackingLoading = false;
|
||||
this.txShowTxNotFound = true;
|
||||
setTimeout(() => { this.txShowTxNotFound = false; }, 2000);
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.moveTxBubbleToPosition();
|
||||
});
|
||||
}
|
||||
},
|
||||
(err: Error) => console.log(err)
|
||||
);
|
||||
this.renderer.addClass(document.body, 'disable-scroll');
|
||||
|
||||
this.route.paramMap
|
||||
@ -112,73 +44,27 @@ export class BlockchainComponent implements OnInit, OnDestroy {
|
||||
return;
|
||||
}
|
||||
this.txTrackingLoading = true;
|
||||
this.socket.next({'action': 'track-tx', 'txId': txId});
|
||||
this.apiService.sendWebSocket({'action': 'track-tx', 'txId': txId});
|
||||
});
|
||||
|
||||
this.memPoolService.txIdSearch
|
||||
this.memPoolService.txIdSearch$
|
||||
.subscribe((txId) => {
|
||||
if (txId) {
|
||||
this.txTrackingLoading = true;
|
||||
this.socket.next({'action': 'track-tx', 'txId': txId});
|
||||
this.apiService.sendWebSocket({'action': 'track-tx', 'txId': txId});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
moveTxBubbleToPosition() {
|
||||
let element: HTMLElement | null = null;
|
||||
if (this.txTrackingBlockHeight === 0) {
|
||||
const index = this.projectedBlocks.findIndex((pB) => pB.hasMytx);
|
||||
if (index > -1) {
|
||||
element = document.getElementById('projected-block-' + index);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
element = document.getElementById('bitcoin-block-' + this.txTrackingBlockHeight);
|
||||
}
|
||||
|
||||
this.txBubbleStyle['visibility'] = 'visible';
|
||||
this.txBubbleStyle['position'] = 'absolute';
|
||||
|
||||
if (!element) {
|
||||
if (window.innerWidth <= 768) {
|
||||
this.txBubbleArrowPosition = 'bottom';
|
||||
this.txBubbleStyle['left'] = window.innerWidth / 2 - 50 + 'px';
|
||||
this.txBubbleStyle['bottom'] = '270px';
|
||||
this.txBubbleStyle['top'] = 'inherit';
|
||||
this.txBubbleStyle['position'] = 'fixed';
|
||||
} else {
|
||||
this.txBubbleStyle['left'] = window.innerWidth - 220 + 'px';
|
||||
this.txBubbleArrowPosition = 'right';
|
||||
this.txBubbleStyle['top'] = '425px';
|
||||
}
|
||||
} else {
|
||||
this.txBubbleArrowPosition = 'top';
|
||||
const domRect: DOMRect | ClientRect = element.getBoundingClientRect();
|
||||
this.txBubbleStyle['left'] = domRect.left - 50 + 'px';
|
||||
this.txBubbleStyle['top'] = domRect.top + 125 + window.scrollY + 'px';
|
||||
|
||||
if (domRect.left + 100 > window.innerWidth) {
|
||||
this.txBubbleStyle['left'] = window.innerWidth - 220 + 'px';
|
||||
this.txBubbleArrowPosition = 'right';
|
||||
} else if (domRect.left + 220 > window.innerWidth) {
|
||||
this.txBubbleStyle['left'] = window.innerWidth - 240 + 'px';
|
||||
this.txBubbleArrowPosition = 'top-right';
|
||||
} else {
|
||||
this.txBubbleStyle['left'] = domRect.left + 15 + 'px';
|
||||
}
|
||||
|
||||
if (domRect.left < 86) {
|
||||
this.txBubbleArrowPosition = 'top-left';
|
||||
this.txBubbleStyle['left'] = 125 + 'px';
|
||||
}
|
||||
}
|
||||
this.blocksSubscription = this.memPoolService.blocks$
|
||||
.pipe(
|
||||
take(1)
|
||||
)
|
||||
.subscribe((block) => this.isLoading = false);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
this.blocksSubscription.unsubscribe();
|
||||
this.txTrackingSubscription.unsubscribe();
|
||||
this.renderer.removeClass(document.body, 'disable-scroll');
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MemPoolService, MemPoolState } from '../services/mem-pool.service';
|
||||
import { MemPoolService, IMemPoolState } from '../services/mem-pool.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
@ -7,7 +7,7 @@ import { MemPoolService, MemPoolState } from '../services/mem-pool.service';
|
||||
styleUrls: ['./footer.component.scss']
|
||||
})
|
||||
export class FooterComponent implements OnInit {
|
||||
memPoolInfo: MemPoolState | undefined;
|
||||
memPoolInfo: IMemPoolState | undefined;
|
||||
mempoolBlocks = 0;
|
||||
progressWidth = '';
|
||||
progressClass: string;
|
||||
@ -17,12 +17,12 @@ export class FooterComponent implements OnInit {
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.memPoolService.loaderSubject
|
||||
this.memPoolService.mempoolStats$
|
||||
.subscribe((mempoolState) => {
|
||||
this.memPoolInfo = mempoolState;
|
||||
this.updateProgress();
|
||||
});
|
||||
this.memPoolService.mempoolWeight
|
||||
this.memPoolService.mempoolWeight$
|
||||
.subscribe((mempoolWeight) => {
|
||||
this.mempoolBlocks = Math.ceil(mempoolWeight / 4000000);
|
||||
});
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { environment } from '../../environments/environment';
|
||||
import { webSocket } from 'rxjs/webSocket';
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
import { IMempoolDefaultResponse, IMempoolStats, IBlockTransaction } from '../blockchain/interfaces';
|
||||
import { IMempoolDefaultResponse, IMempoolStats, IBlockTransaction, IBlock } from '../blockchain/interfaces';
|
||||
import { Observable } from 'rxjs';
|
||||
import { MemPoolService } from './mem-pool.service';
|
||||
import { tap, retryWhen } from 'rxjs/operators';
|
||||
|
||||
const WEB_SOCKET_URL = 'ws://' + document.location.hostname + ':8999';
|
||||
const API_BASE_URL = '/api/v1';
|
||||
@ -12,11 +13,95 @@ const API_BASE_URL = '/api/v1';
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ApiService {
|
||||
private websocketSubject: Observable<IMempoolDefaultResponse> = webSocket<IMempoolDefaultResponse | any>(WEB_SOCKET_URL)
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
) { }
|
||||
private memPoolService: MemPoolService,
|
||||
) {
|
||||
this.startSubscription();
|
||||
}
|
||||
|
||||
websocketSubject = webSocket<IMempoolDefaultResponse>(WEB_SOCKET_URL);
|
||||
startSubscription() {
|
||||
this.websocketSubject
|
||||
.pipe(
|
||||
retryWhen((errors: any) => errors
|
||||
.pipe(
|
||||
tap(() => this.memPoolService.isOffline$.next(true))
|
||||
)
|
||||
),
|
||||
)
|
||||
.subscribe((response: IMempoolDefaultResponse) => {
|
||||
this.memPoolService.isOffline$.next(false);
|
||||
|
||||
if (response.blocks && response.blocks.length) {
|
||||
const blocks = response.blocks;
|
||||
// blocks.reverse();
|
||||
blocks.forEach((block: IBlock) => this.memPoolService.blocks$.next(block));
|
||||
}
|
||||
if (response.block) {
|
||||
this.memPoolService.blocks$.next(response.block);
|
||||
}
|
||||
|
||||
if (response.projectedBlocks) {
|
||||
this.memPoolService.projectedBlocks$.next(response.projectedBlocks);
|
||||
}
|
||||
|
||||
if (response.mempoolInfo && response.txPerSecond !== undefined) {
|
||||
this.memPoolService.mempoolStats$.next({
|
||||
memPoolInfo: response.mempoolInfo,
|
||||
txPerSecond: response.txPerSecond,
|
||||
vBytesPerSecond: response.vBytesPerSecond,
|
||||
});
|
||||
}
|
||||
|
||||
if (response.conversions) {
|
||||
this.memPoolService.conversions$.next(response.conversions);
|
||||
}
|
||||
|
||||
if (response.projectedBlocks) {
|
||||
const mempoolWeight = response.projectedBlocks.map((block: any) => block.blockWeight).reduce((a: any, b: any) => a + b);
|
||||
this.memPoolService.mempoolWeight$.next(mempoolWeight);
|
||||
}
|
||||
|
||||
if (response['track-tx']) {
|
||||
let txTrackingEnabled;
|
||||
let txTrackingBlockHeight;
|
||||
let txTrackingTx = null;
|
||||
let txShowTxNotFound = false;
|
||||
if (response['track-tx'].tracking) {
|
||||
txTrackingEnabled = true;
|
||||
txTrackingBlockHeight = response['track-tx'].blockHeight;
|
||||
if (response['track-tx'].tx) {
|
||||
txTrackingTx = response['track-tx'].tx;
|
||||
}
|
||||
} else {
|
||||
txTrackingEnabled = false;
|
||||
txTrackingTx = null;
|
||||
txTrackingBlockHeight = 0;
|
||||
}
|
||||
if (response['track-tx'].message && response['track-tx'].message === 'not-found') {
|
||||
txShowTxNotFound = true;
|
||||
}
|
||||
this.memPoolService.txTracking$.next({
|
||||
enabled: txTrackingEnabled,
|
||||
tx: txTrackingTx,
|
||||
blockHeight: txTrackingBlockHeight,
|
||||
notFound: txShowTxNotFound,
|
||||
});
|
||||
}
|
||||
}),
|
||||
(err: Error) => {
|
||||
console.log(err);
|
||||
console.log('Error, retrying in 10 sec');
|
||||
setTimeout(() => this.startSubscription(), 10000);
|
||||
};
|
||||
}
|
||||
|
||||
sendWebSocket(data: any) {
|
||||
// @ts-ignore
|
||||
this.websocketSubject.next(data);
|
||||
}
|
||||
|
||||
listTransactionsForBlock$(height: number): Observable<IBlockTransaction[]> {
|
||||
return this.httpClient.get<IBlockTransaction[]>(API_BASE_URL + '/transactions/height/' + height);
|
||||
|
||||
@ -1,20 +1,35 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Subject, ReplaySubject } from 'rxjs';
|
||||
import { IMempoolInfo } from '../blockchain/interfaces';
|
||||
import { ReplaySubject, BehaviorSubject } from 'rxjs';
|
||||
import { IMempoolInfo, IBlock, IProjectedBlock, ITransaction } from '../blockchain/interfaces';
|
||||
|
||||
export interface MemPoolState {
|
||||
export interface IMemPoolState {
|
||||
memPoolInfo: IMempoolInfo;
|
||||
txPerSecond: number;
|
||||
vBytesPerSecond: number;
|
||||
}
|
||||
|
||||
export interface ITxTracking {
|
||||
enabled: boolean;
|
||||
tx: ITransaction | null;
|
||||
blockHeight: number;
|
||||
notFound: boolean;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MemPoolService {
|
||||
loaderSubject = new Subject<MemPoolState>();
|
||||
isOffline = new Subject<boolean>();
|
||||
txIdSearch = new Subject<string>();
|
||||
conversions = new ReplaySubject<any>();
|
||||
mempoolWeight = new Subject<number>();
|
||||
mempoolStats$ = new ReplaySubject<IMemPoolState>();
|
||||
isOffline$ = new ReplaySubject<boolean>();
|
||||
txIdSearch$ = new ReplaySubject<string>();
|
||||
conversions$ = new ReplaySubject<any>();
|
||||
mempoolWeight$ = new ReplaySubject<number>();
|
||||
txTracking$ = new BehaviorSubject<ITxTracking>({
|
||||
enabled: false,
|
||||
tx: null,
|
||||
blockHeight: 0,
|
||||
notFound: false,
|
||||
});
|
||||
blocks$ = new ReplaySubject<IBlock>(8);
|
||||
projectedBlocks$ = new BehaviorSubject<IProjectedBlock[]>([]);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="txBubble" *ngIf="tx">
|
||||
<div class="txBubble" [ngStyle]="txBubbleStyle" *ngIf="txTrackingEnabled && tx">
|
||||
<span class="txBubbleText" ngClass="arrow-{{ arrowPosition }}">
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
@ -6,8 +6,8 @@
|
||||
<td class="text-right"><a href="https://www.blockstream.info/tx/{{ tx?.txid }}" target="_blank">{{ txIdShort }}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left"><b>Fees:</b></td>
|
||||
<td class="text-right">{{ tx?.fee }} BTC</td>
|
||||
<td class="text-left"><b>Fee:</b></td>
|
||||
<td class="text-right">{{ tx?.fee * 100000000 | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx?.fee | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left"><b>Fee per vByte:</b></td>
|
||||
|
||||
@ -63,3 +63,7 @@
|
||||
.txBubble .arrow-top-left.txBubbleText::after {
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
.green-color {
|
||||
color: #3bcc49;
|
||||
}
|
||||
|
||||
@ -1,26 +1,144 @@
|
||||
import { Component, OnInit, Input, OnChanges } from '@angular/core';
|
||||
import { ITransaction } from '../blockchain/interfaces';
|
||||
import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
|
||||
import { ITransaction, IProjectedBlock } from '../blockchain/interfaces';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { ITxTracking, MemPoolService } from '../services/mem-pool.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tx-bubble',
|
||||
templateUrl: './tx-bubble.component.html',
|
||||
styleUrls: ['./tx-bubble.component.scss']
|
||||
})
|
||||
export class TxBubbleComponent implements OnChanges {
|
||||
@Input() tx: ITransaction | null = null;
|
||||
@Input() txTrackingBlockHeight = 0;
|
||||
@Input() latestBlockHeight = 0;
|
||||
@Input() arrowPosition: 'top' | 'right' | 'bottom' | 'top-right' | 'top-left' = 'top';
|
||||
export class TxBubbleComponent implements OnInit, OnDestroy {
|
||||
tx: ITransaction | null = null;
|
||||
txTrackingBlockHeight = 0;
|
||||
latestBlockHeight = 0;
|
||||
arrowPosition: 'top' | 'right' | 'bottom' | 'top-right' | 'top-left' = 'top';
|
||||
|
||||
txTrackingSubscription: Subscription;
|
||||
projectedBlocksSubscription: Subscription;
|
||||
blocksSubscription: Subscription;
|
||||
|
||||
projectedBlocks: IProjectedBlock[] = [];
|
||||
|
||||
txIdShort = '';
|
||||
confirmations = 0;
|
||||
conversions: any;
|
||||
|
||||
constructor() { }
|
||||
txBubbleStyle: any = {
|
||||
'position': 'absolute',
|
||||
'top': '425px',
|
||||
'visibility': 'hidden',
|
||||
};
|
||||
|
||||
ngOnChanges() {
|
||||
if (this.tx) {
|
||||
this.txIdShort = this.tx.txid.substring(0, 6) + '...' + this.tx.txid.substring(this.tx.txid.length - 6);
|
||||
txTrackingLoading = false;
|
||||
txTrackingEnabled = false;
|
||||
txTrackingTx: ITransaction | null = null;
|
||||
txShowTxNotFound = false;
|
||||
|
||||
txBubbleArrowPosition = 'top';
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event: Event) {
|
||||
this.moveTxBubbleToPosition();
|
||||
}
|
||||
|
||||
constructor(
|
||||
private memPoolService: MemPoolService,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.txTrackingSubscription = this.memPoolService.txTracking$
|
||||
.subscribe((response: ITxTracking) => {
|
||||
this.txTrackingBlockHeight = response.blockHeight;
|
||||
this.txTrackingEnabled = response.enabled;
|
||||
if (response.tx) {
|
||||
this.tx = response.tx;
|
||||
}
|
||||
if (this.txTrackingEnabled) {
|
||||
setTimeout(() => this.moveTxBubbleToPosition());
|
||||
}
|
||||
if (this.txShowTxNotFound) {
|
||||
setTimeout(() => { this.txShowTxNotFound = false; }, 2000);
|
||||
}
|
||||
if (this.tx) {
|
||||
this.txIdShort = this.tx.txid.substring(0, 6) + '...' + this.tx.txid.substring(this.tx.txid.length - 6);
|
||||
}
|
||||
if (this.latestBlockHeight) {
|
||||
this.confirmations = (this.latestBlockHeight - this.txTrackingBlockHeight) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
this.projectedBlocksSubscription = this.memPoolService.projectedBlocks$
|
||||
.subscribe((projectedblocks) => this.projectedBlocks = projectedblocks);
|
||||
|
||||
this.blocksSubscription = this.memPoolService.blocks$
|
||||
.subscribe((block) => {
|
||||
this.latestBlockHeight = block.height;
|
||||
if (this.txTrackingBlockHeight) {
|
||||
this.confirmations = (this.latestBlockHeight - this.txTrackingBlockHeight) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
this.memPoolService.conversions$
|
||||
.subscribe((conversions) => {
|
||||
this.conversions = conversions;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.projectedBlocksSubscription.unsubscribe();
|
||||
this.txTrackingSubscription.unsubscribe();
|
||||
this.blocksSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
moveTxBubbleToPosition() {
|
||||
let element: HTMLElement | null = null;
|
||||
if (this.txTrackingBlockHeight === 0) {
|
||||
const index = this.projectedBlocks.findIndex((pB) => pB.hasMytx);
|
||||
if (index > -1) {
|
||||
element = document.getElementById('projected-block-' + index);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
element = document.getElementById('bitcoin-block-' + this.txTrackingBlockHeight);
|
||||
}
|
||||
|
||||
this.txBubbleStyle['visibility'] = 'visible';
|
||||
this.txBubbleStyle['position'] = 'absolute';
|
||||
|
||||
if (!element) {
|
||||
if (window.innerWidth <= 768) {
|
||||
this.txBubbleArrowPosition = 'bottom';
|
||||
this.txBubbleStyle['left'] = window.innerWidth / 2 - 50 + 'px';
|
||||
this.txBubbleStyle['bottom'] = '270px';
|
||||
this.txBubbleStyle['top'] = 'inherit';
|
||||
this.txBubbleStyle['position'] = 'fixed';
|
||||
} else {
|
||||
this.txBubbleStyle['left'] = window.innerWidth - 220 + 'px';
|
||||
this.txBubbleArrowPosition = 'right';
|
||||
this.txBubbleStyle['top'] = '425px';
|
||||
}
|
||||
} else {
|
||||
this.txBubbleArrowPosition = 'top';
|
||||
const domRect: DOMRect | ClientRect = element.getBoundingClientRect();
|
||||
this.txBubbleStyle['left'] = domRect.left - 50 + 'px';
|
||||
this.txBubbleStyle['top'] = domRect.top + 140 + window.scrollY + 'px';
|
||||
|
||||
if (domRect.left + 100 > window.innerWidth) {
|
||||
this.txBubbleStyle['left'] = window.innerWidth - 220 + 'px';
|
||||
this.txBubbleArrowPosition = 'right';
|
||||
} else if (domRect.left + 220 > window.innerWidth) {
|
||||
this.txBubbleStyle['left'] = window.innerWidth - 240 + 'px';
|
||||
this.txBubbleArrowPosition = 'top-right';
|
||||
} else {
|
||||
this.txBubbleStyle['left'] = domRect.left + 15 + 'px';
|
||||
}
|
||||
|
||||
if (domRect.left < 86) {
|
||||
this.txBubbleArrowPosition = 'top-left';
|
||||
this.txBubbleStyle['left'] = 125 + 'px';
|
||||
}
|
||||
}
|
||||
this.confirmations = (this.latestBlockHeight - this.txTrackingBlockHeight) + 1;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user