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

Merge branch 'master' into nymkappa/feature/hashrate-moving-average

Browse Source
This commit is contained in:
wiz
2022-06-23 19:20:31 +09:00
committed by GitHub
parent 6b05dd232b f34685a51b
commit c989bbec1b
11 changed files with 149 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
View File

@@ -26,6 +26,7 @@
.loader-wrapper {
position: absolute;
background: #181b2d7f;
left: 0;
right: 0;
top: 0;

15
frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
View File

@@ -68,6 +68,21 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
this.start();
}
destroy(): void {
if (this.scene) {
this.scene.destroy();
this.start();
}
}
// initialize the scene without any entry transition
setup(transactions: TransactionStripped[]): void {
if (this.scene) {
this.scene.setup(transactions);
this.start();
}
}
enter(transactions: TransactionStripped[], direction: string): void {
if (this.scene) {
this.scene.enter(transactions, direction);

34
frontend/src/app/components/block-overview-graph/block-scene.ts
View File

@@ -29,10 +29,6 @@ export default class BlockScene {
this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray });
}
destroy(): void {
Object.values(this.txs).forEach(tx => tx.destroy());
}
resize({ width = this.width, height = this.height }: { width?: number, height?: number}): void {
this.width = width;
this.height = height;
@@ -46,6 +42,36 @@ export default class BlockScene {
}
}
// Destroy the current layout and clean up graphics sprites without any exit animation
destroy(): void {
Object.values(this.txs).forEach(tx => tx.destroy());
this.txs = {};
this.layout = null;
}
// set up the scene with an initial set of transactions, without any transition animation
setup(txs: TransactionStripped[]) {
// clean up any old transactions
Object.values(this.txs).forEach(tx => {
tx.destroy();
delete this.txs[tx.txid];
});
this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
txs.forEach(tx => {
const txView = new TxView(tx, this.vertexArray);
this.txs[tx.txid] = txView;
this.place(txView);
this.saveGridToScreenPosition(txView);
this.applyTxUpdate(txView, {
display: {
position: txView.screenPosition,
color: txView.getColor()
},
duration: 0
});
});
}
// Animate new block entering scene
enter(txs: TransactionStripped[], direction) {
this.replace(txs, direction);

56
frontend/src/app/components/block/block.component.ts
View File

@@ -2,9 +2,9 @@ import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/co
import { Location } from '@angular/common';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { switchMap, tap, debounceTime, catchError, map, shareReplay, startWith, pairwise } from 'rxjs/operators';
import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, pairwise } from 'rxjs/operators';
import { Transaction, Vout } from '../../interfaces/electrs.interface';
import { Observable, of, Subscription } from 'rxjs';
import { Observable, of, Subscription, asyncScheduler } from 'rxjs';
import { StateService } from '../../services/state.service';
import { SeoService } from 'src/app/services/seo.service';
import { WebsocketService } from 'src/app/services/websocket.service';
@@ -33,7 +33,6 @@ export class BlockComponent implements OnInit, OnDestroy {
strippedTransactions: TransactionStripped[];
overviewTransitionDirection: string;
isLoadingOverview = true;
isAwaitingOverview = true;
error: any;
blockSubsidy: number;
fees: number;
@@ -54,6 +53,9 @@ export class BlockComponent implements OnInit, OnDestroy {
blocksSubscription: Subscription;
networkChangedSubscription: Subscription;
queryParamsSubscription: Subscription;
nextBlockSubscription: Subscription = undefined;
nextBlockSummarySubscription: Subscription = undefined;
nextBlockTxListSubscription: Subscription = undefined;
@ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;
@@ -124,6 +126,7 @@ export class BlockComponent implements OnInit, OnDestroy {
return of(history.state.data.block);
} else {
this.isLoadingBlock = true;
this.isLoadingOverview = true;
let blockInCache: BlockExtended;
if (isBlockHeight) {
@@ -152,6 +155,14 @@ export class BlockComponent implements OnInit, OnDestroy {
}
}),
tap((block: BlockExtended) => {
// Preload previous block summary (execute the http query so the response will be cached)
this.unsubscribeNextBlockSubscriptions();
setTimeout(() => {
this.nextBlockSubscription = this.apiService.getBlock$(block.previousblockhash).subscribe();
this.nextBlockTxListSubscription = this.electrsApiService.getBlockTransactions$(block.previousblockhash).subscribe();
this.nextBlockSummarySubscription = this.apiService.getStrippedBlockTransactions$(block.previousblockhash).subscribe();
}, 100);
this.block = block;
this.blockHeight = block.height;
const direction = (this.lastBlockHeight < this.blockHeight) ? 'right' : 'left';
@@ -170,13 +181,9 @@ export class BlockComponent implements OnInit, OnDestroy {
this.transactions = null;
this.transactionsError = null;
this.isLoadingOverview = true;
this.isAwaitingOverview = true;
this.overviewError = true;
if (this.blockGraph) {
this.blockGraph.exit(direction);
}
this.overviewError = null;
}),
debounceTime(300),
throttleTime(300, asyncScheduler, { leading: true, trailing: true }),
shareReplay(1)
);
this.transactionSubscription = block$.pipe(
@@ -194,11 +201,6 @@ export class BlockComponent implements OnInit, OnDestroy {
}
this.transactions = transactions;
this.isLoadingTransactions = false;
if (!this.isAwaitingOverview && this.blockGraph && this.strippedTransactions && this.overviewTransitionDirection) {
this.isLoadingOverview = false;
this.blockGraph.replace(this.strippedTransactions, this.overviewTransitionDirection, false);
}
},
(error) => {
this.error = error;
@@ -226,18 +228,19 @@ export class BlockComponent implements OnInit, OnDestroy {
),
)
.subscribe(({transactions, direction}: {transactions: TransactionStripped[], direction: string}) => {
this.isAwaitingOverview = false;
this.strippedTransactions = transactions;
this.overviewTransitionDirection = direction;
if (!this.isLoadingTransactions && this.blockGraph) {
this.isLoadingOverview = false;
this.blockGraph.replace(this.strippedTransactions, this.overviewTransitionDirection, false);
this.isLoadingOverview = false;
if (this.blockGraph) {
this.blockGraph.destroy();
this.blockGraph.setup(this.strippedTransactions);
}
},
(error) => {
this.error = error;
this.isLoadingOverview = false;
this.isAwaitingOverview = false;
if (this.blockGraph) {
this.blockGraph.destroy();
}
});
this.networkChangedSubscription = this.stateService.networkChanged$
@@ -273,6 +276,19 @@ export class BlockComponent implements OnInit, OnDestroy {
this.blocksSubscription.unsubscribe();
this.networkChangedSubscription.unsubscribe();
this.queryParamsSubscription.unsubscribe();
this.unsubscribeNextBlockSubscriptions();
}
unsubscribeNextBlockSubscriptions() {
if (this.nextBlockSubscription !== undefined) {
this.nextBlockSubscription.unsubscribe();
}
if (this.nextBlockSummarySubscription !== undefined) {
this.nextBlockSummarySubscription.unsubscribe();
}
if (this.nextBlockTxListSubscription !== undefined) {
this.nextBlockTxListSubscription.unsubscribe();
}
}
// TODO - Refactor this.fees/this.reward for liquid because it is not

27
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@@ -5,8 +5,9 @@ import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.inter
import { ElectrsApiService } from '../../services/electrs-api.service';
import { environment } from 'src/environments/environment';
import { AssetsService } from 'src/app/services/assets.service';
import { map, switchMap } from 'rxjs/operators';
import { map, tap, switchMap } from 'rxjs/operators';
import { BlockExtended } from 'src/app/interfaces/node-api.interface';
import { ApiService } from 'src/app/services/api.service';
@Component({
selector: 'app-transactions-list',
@@ -30,7 +31,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
latestBlock$: Observable<BlockExtended>;
outspendsSubscription: Subscription;
refreshOutspends$: ReplaySubject<{ [str: string]: Observable<Outspend[]>}> = new ReplaySubject();
refreshOutspends$: ReplaySubject<string[]> = new ReplaySubject();
showDetails$ = new BehaviorSubject<boolean>(false);
outspends: Outspend[][] = [];
assetsMinimal: any;
@@ -38,6 +39,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
constructor(
public stateService: StateService,
private electrsApiService: ElectrsApiService,
private apiService: ApiService,
private assetsService: AssetsService,
private ref: ChangeDetectorRef,
) { }
@@ -55,20 +57,14 @@ export class TransactionsListComponent implements OnInit, OnChanges {
this.outspendsSubscription = merge(
this.refreshOutspends$
.pipe(
switchMap((observableObject) => forkJoin(observableObject)),
map((outspends: any) => {
const newOutspends: Outspend[] = [];
for (const i in outspends) {
if (outspends.hasOwnProperty(i)) {
newOutspends.push(outspends[i]);
}
}
this.outspends = this.outspends.concat(newOutspends);
switchMap((txIds) => this.apiService.getOutspendsBatched$(txIds)),
tap((outspends: Outspend[][]) => {
this.outspends = this.outspends.concat(outspends);
}),
),
this.stateService.utxoSpent$
.pipe(
map((utxoSpent) => {
tap((utxoSpent) => {
for (const i in utxoSpent) {
this.outspends[0][i] = {
spent: true,
@@ -96,7 +92,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
}
}, 10);
}
const observableObject = {};
this.transactions.forEach((tx, i) => {
tx['@voutLimit'] = true;
tx['@vinLimit'] = true;
@@ -117,10 +113,9 @@ export class TransactionsListComponent implements OnInit, OnChanges {
tx['addressValue'] = addressIn - addressOut;
}
observableObject[i] = this.electrsApiService.getOutspends$(tx.txid);
});
this.refreshOutspends$.next(observableObject);
this.refreshOutspends$.next(this.transactions.map((tx) => tx.txid));
}
onScroll() {

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

@@ -5,6 +5,7 @@ import { CpfpInfo, OptimizedMempoolStats, AddressInformation, LiquidPegs, ITrans
import { Observable } from 'rxjs';
import { StateService } from './state.service';
import { WebsocketResponse } from '../interfaces/websocket.interface';
import { Outspend } from '../interfaces/electrs.interface';
@Injectable({
providedIn: 'root'
@@ -74,6 +75,14 @@ export class ApiService {
return this.httpClient.get<number[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/transaction-times', { params });
}
getOutspendsBatched$(txIds: string[]): Observable<Outspend[][]> {
let params = new HttpParams();
txIds.forEach((txId: string) => {
params = params.append('txId[]', txId);
});
return this.httpClient.get<Outspend[][]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/outspends', { params });
}
requestDonation$(amount: number, orderId: string): Observable<any> {
const params = {
amount: amount,