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

Basic address tracking.

Browse Source
This commit is contained in:
Simon Lindh
2020-02-23 19:16:50 +07:00
committed by wiz
parent 5186f81d56
commit 3453e84889
18 changed files with 181 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/address/address.component.html
View File

@@ -40,7 +40,7 @@
<br>
<h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ address.chain_stats.tx_count + address.mempool_stats.tx_count }} transactions</h2>
<h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ address.chain_stats.tx_count + address.mempool_stats.tx_count + addedTransactions }} transactions</h2>
<app-transactions-list [transactions]="transactions" [showConfirmations]="true"></app-transactions-list>

38
frontend/src/app/components/address/address.component.ts
View File

@@ -1,28 +1,35 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { switchMap } from 'rxjs/operators';
import { Address, Transaction } from '../../interfaces/electrs.interface';
import { WebsocketService } from 'src/app/services/websocket.service';
import { StateService } from 'src/app/services/state.service';
@Component({
selector: 'app-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.scss']
})
export class AddressComponent implements OnInit {
export class AddressComponent implements OnInit, OnDestroy {
address: Address;
addressString: string;
isLoadingAddress = true;
transactions: Transaction[];
isLoadingTransactions = true;
error: any;
addedTransactions = 0;
constructor(
private route: ActivatedRoute,
private electrsApiService: ElectrsApiService,
private websocketService: WebsocketService,
private stateService: StateService,
) { }
ngOnInit() {
this.websocketService.want(['blocks', 'mempool-blocks']);
this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
this.error = undefined;
@@ -35,6 +42,7 @@ export class AddressComponent implements OnInit {
)
.subscribe((address) => {
this.address = address;
this.websocketService.startTrackAddress(address.address);
this.isLoadingAddress = false;
document.body.scrollTo({ top: 0, behavior: 'smooth' });
this.getAddressTransactions(address.address);
@@ -44,6 +52,28 @@ export class AddressComponent implements OnInit {
this.error = error;
this.isLoadingAddress = false;
});
this.stateService.mempoolTransactions$
.subscribe((transaction) => {
this.transactions.unshift(transaction);
this.addedTransactions++;
});
this.stateService.blockTransactions$
.subscribe((transaction) => {
const tx = this.transactions.find((t) => t.txid === transaction.txid);
if (tx) {
tx.status = transaction.status;
}
});
this.stateService.isOffline$
.subscribe((state) => {
if (!state && this.transactions && this.transactions.length) {
this.isLoadingTransactions = true;
this.getAddressTransactions(this.address.address);
}
});
}
getAddressTransactions(address: string) {
@@ -62,4 +92,8 @@ export class AddressComponent implements OnInit {
this.isLoadingTransactions = false;
});
}
ngOnDestroy() {
this.websocketService.startTrackAddress('stop');
}
}

4
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -69,13 +69,13 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (window.innerWidth <= 768) {
return {
top: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
} else {
return {
left: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
}

17
frontend/src/app/components/blockchain/blockchain.component.html
View File

@@ -1,14 +1,17 @@
<div *ngIf="isLoading" class="loading-block">
<h3>Waiting for blocks...</h3>
<br>
<div class="spinner-border text-light"></div>
</div>
<div class="text-center" class="blockchain-wrapper">
<div class="position-container" [ngStyle]="{'top': position === 'top' ? '75px' : 'calc(50% - 60px)'}">
<app-mempool-blocks [txFeePerVSize]="txFeePerVSize"></app-mempool-blocks>
<app-blockchain-blocks [markHeight]="markHeight"></app-blockchain-blocks>
<div id="divider" *ngIf="!isLoading"></div>
</div>
<div id="divider" *ngIf="!isLoading; else loadingTmpl"></div>
<ng-template #loadingTmpl>
<div class="loading-block">
<h3>Waiting for blocks...</h3>
<br>
<div class="spinner-border text-light"></div>
</div>
</ng-template>
</div>
</div>

5
frontend/src/app/components/blockchain/blockchain.component.scss
View File

@@ -51,6 +51,7 @@
position: absolute;
text-align: center;
margin: auto;
width: 100%;
top: 80px;
width: 300px;
left: -150px;
top: 0px;
}

1
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@@ -76,7 +76,6 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
const blockedFilledPercentage = (block.blockVSize > 1000000 ? 1000000 : block.blockVSize) / 1000000;
console.log(txInBlockIndex);
const arrowRightPosition = txInBlockIndex * (this.blockWidth + this.blockPadding)
+ ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);

2
frontend/src/app/components/search-form/search-form.component.html
View File

@@ -1,4 +1,4 @@
<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" class="mr-4" novalidate>
<div class="form-row">
<div style="width: 350px;" class="mr-2">
<input formControlName="searchText" type="text" class="form-control" [placeholder]="searchBoxPlaceholderText">

2
frontend/src/app/components/transaction/transaction.component.html
View File

@@ -11,7 +11,7 @@
<button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2" style="margin-top: 0.75rem;">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
</ng-template>
<ng-template #unconfirmedBtn>
<button type="button" class="btn btn-sm btn-danger float-right mr-2" style="margin-top: 0.75rem;">Unconfirmed</button>
<button type="button" class="btn btn-sm btn-danger float-right mr-2" style="margin-top: 0.75rem;">Unconfirmed</button>
</ng-template>
</div>

2
frontend/src/app/components/transaction/transaction.component.ts
View File

@@ -65,7 +65,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
this.stateService.blocks$
.subscribe((block) => this.latestBlock = block);
this.stateService.txConfirmed
this.stateService.txConfirmed$
.subscribe((block) => {
this.tx.status = {
confirmed: true,

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

@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { ReplaySubject, BehaviorSubject, Subject } from 'rxjs';
import { Block } from '../interfaces/electrs.interface';
import { Block, Transaction } from '../interfaces/electrs.interface';
import { MempoolBlock, MemPoolState } from '../interfaces/websocket.interface';
import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
@@ -13,7 +13,10 @@ export class StateService {
conversions$ = new ReplaySubject<any>(1);
mempoolStats$ = new ReplaySubject<MemPoolState>();
mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
txConfirmed = new Subject<Block>();
txConfirmed$ = new Subject<Block>();
mempoolTransactions$ = new Subject<Transaction>();
blockTransactions$ = new Subject<Transaction>();
live2Chart$ = new Subject<OptimizedMempoolStats>();
viewFiat$ = new BehaviorSubject<boolean>(false);

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

@@ -3,7 +3,7 @@ import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { WebsocketResponse } from '../interfaces/websocket.interface';
import { retryWhen, tap, delay } from 'rxjs/operators';
import { StateService } from './state.service';
import { Block } from '../interfaces/electrs.interface';
import { Block, Transaction } from '../interfaces/electrs.interface';
const WEB_SOCKET_PROTOCOL = (document.location.protocol === 'https:') ? 'wss:' : 'ws:';
const WEB_SOCKET_URL = WEB_SOCKET_PROTOCOL + '//' + document.location.hostname + ':8999';
@@ -58,7 +58,7 @@ export class WebsocketService {
if (response.txConfirmed) {
this.trackingTxId = null;
this.stateService.txConfirmed.next(response.block);
this.stateService.txConfirmed$.next(response.block);
}
}
@@ -70,6 +70,18 @@ export class WebsocketService {
this.stateService.mempoolBlocks$.next(response['mempool-blocks']);
}
if (response['address-transactions']) {
response['address-transactions'].forEach((addressTransaction: Transaction) => {
this.stateService.mempoolTransactions$.next(addressTransaction);
});
}
if (response['address-block-transactions']) {
response['address-block-transactions'].forEach((addressTransaction: Transaction) => {
this.stateService.blockTransactions$.next(addressTransaction);
});
}
if (response['live-2h-chart']) {
this.stateService.live2Chart$.next(response['live-2h-chart']);
}