mirror of
https://github.com/mempool/mempool.git
synced 2025-02-24 06:47:52 +01:00
address wallet page by name
This commit is contained in:
Mononaut
parent
a7ba4a0be8
commit
9c303e8c23
7 changed files with 319 additions and 400 deletions
|
|
@ -39,14 +39,19 @@ export class AddressesTreemap implements OnChanges {
|
|||
}
|
||||
|
||||
prepareChartOptions(): void {
|
||||
const maxTxs = this.addresses.reduce((max, address) => Math.max(max, address.chain_stats.tx_count), 0);
|
||||
const data = this.addresses.map(address => ({
|
||||
address: address.address,
|
||||
value: address.chain_stats.funded_txo_sum - address.chain_stats.spent_txo_sum,
|
||||
stats: address.chain_stats,
|
||||
itemStyle: {
|
||||
color: lerpColor('#1E88E5', '#D81B60', address.chain_stats.tx_count / maxTxs),
|
||||
}
|
||||
address: address.address,
|
||||
value: address.chain_stats.funded_txo_sum - address.chain_stats.spent_txo_sum,
|
||||
stats: address.chain_stats,
|
||||
}));
|
||||
// only consider visible items for the color gradient
|
||||
const totalValue = data.reduce((acc, address) => acc + address.value, 0);
|
||||
const maxTxs = data.filter(address => address.value > (totalValue / 2000)).reduce((max, address) => Math.max(max, address.stats.tx_count), 0);
|
||||
const dataItems = data.map(address => ({
|
||||
...address,
|
||||
itemStyle: {
|
||||
color: lerpColor('#1E88E5', '#D81B60', address.stats.tx_count / maxTxs),
|
||||
}
|
||||
}));
|
||||
this.chartOptions = {
|
||||
tooltip: {
|
||||
|
|
@ -64,7 +69,7 @@ export class AddressesTreemap implements OnChanges {
|
|||
top: 0,
|
||||
roam: false,
|
||||
type: 'treemap',
|
||||
data: data,
|
||||
data: dataItems,
|
||||
nodeClick: 'link',
|
||||
progressive: 100,
|
||||
tooltip: {
|
||||
|
|
@ -87,7 +92,7 @@ export class AddressesTreemap implements OnChanges {
|
|||
<td colspan="2"><b style="color: white; margin-left: 2px">${value.data.address}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Recieved</td>
|
||||
<td>Received</td>
|
||||
<td style="text-align: right">${this.formatValue(value.data.stats.funded_txo_sum)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -370,23 +370,47 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
|
|||
const walletName = this.stateService.env.customize.dashboard.widgets.find(w => w.props?.wallet).props.wallet;
|
||||
this.websocketService.startTrackingWallet(walletName);
|
||||
|
||||
this.walletSummary$ = this.apiService.getWallet$(walletName).pipe(
|
||||
this.walletSummary$ = this.apiService.getWallet$(walletName).pipe(
|
||||
catchError(e => {
|
||||
return of(null);
|
||||
return of({});
|
||||
}),
|
||||
map((walletTransactions) => {
|
||||
const transactions = Object.values(walletTransactions).flatMap(wallet => wallet.transactions);
|
||||
return this.deduplicateWalletTransactions(transactions);
|
||||
}),
|
||||
switchMap(initial => this.stateService.walletTransactions$.pipe(
|
||||
startWith(null),
|
||||
scan((summary, walletTransactions) => {
|
||||
if (walletTransactions) {
|
||||
const transactions: AddressTxSummary[] = [...summary, ...Object.values(walletTransactions).flat()];
|
||||
return this.deduplicateWalletTransactions(transactions);
|
||||
switchMap(wallet => this.stateService.walletTransactions$.pipe(
|
||||
startWith([]),
|
||||
scan((summaries, newTransactions) => {
|
||||
const newSummaries: AddressTxSummary[] = [];
|
||||
for (const tx of newTransactions) {
|
||||
const funded: Record<string, number> = {};
|
||||
const spent: Record<string, number> = {};
|
||||
const fundedCount: Record<string, number> = {};
|
||||
const spentCount: Record<string, number> = {};
|
||||
for (const vin of tx.vin) {
|
||||
const address = vin.prevout?.scriptpubkey_address;
|
||||
if (address && wallet[address]) {
|
||||
spent[address] = (spent[address] ?? 0) + (vin.prevout?.value ?? 0);
|
||||
spentCount[address] = (spentCount[address] ?? 0) + 1;
|
||||
}
|
||||
}
|
||||
for (const vout of tx.vout) {
|
||||
const address = vout.scriptpubkey_address;
|
||||
if (address && wallet[address]) {
|
||||
funded[address] = (funded[address] ?? 0) + (vout.value ?? 0);
|
||||
fundedCount[address] = (fundedCount[address] ?? 0) + 1;
|
||||
}
|
||||
}
|
||||
for (const address of Object.keys({ ...funded, ...spent })) {
|
||||
// add tx to summary
|
||||
const txSummary: AddressTxSummary = {
|
||||
txid: tx.txid,
|
||||
value: (funded[address] ?? 0) - (spent[address] ?? 0),
|
||||
height: tx.status.block_height,
|
||||
time: tx.status.block_time,
|
||||
};
|
||||
wallet[address].transactions?.push(txSummary);
|
||||
newSummaries.push(txSummary);
|
||||
}
|
||||
}
|
||||
return summary;
|
||||
}, initial)
|
||||
return [...summaries, ...this.deduplicateWalletTransactions(newSummaries)];
|
||||
}, this.deduplicateWalletTransactions(Object.values(wallet).flatMap(address => address.transactions)))
|
||||
)),
|
||||
share(),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<ng-template [ngIf]="!isLoadingAddress && !error">
|
||||
<ng-container *ngIf="(walletAddresses$ | async) as walletAddresses; else loadingTemplate">
|
||||
<div class="box">
|
||||
|
||||
<div class="row">
|
||||
|
|
@ -35,31 +35,31 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<ng-template [ngIf]="!addresses[0].electrum">
|
||||
<ng-container *ngIf="(walletStats$ | async) as walletStats">
|
||||
<tr>
|
||||
<td i18n="address.confirmed-balance">Confirmed balance</td>
|
||||
<td class="wrap-cell"><app-amount [satoshis]="walletStats.balance" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="walletStats.balance"></app-fiat></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="address.confirmed-utxos">Confirmed UTXOs</td>
|
||||
<td class="wrap-cell">{{ walletStats.utxos }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="address.total-received">Total received</td>
|
||||
<td *ngIf="addresses[0].chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="received" [noFiat]="true"></app-amount></td>
|
||||
<td class="wrap-cell"><app-amount [satoshis]="walletStats.totalReceived"></app-amount></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="address.total-sent">Total sent</td>
|
||||
<td *ngIf="addresses[0].chain_stats.spent_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="sent" [noFiat]="true"></app-amount></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<tr>
|
||||
<td i18n="address.balance">Balance</td>
|
||||
<td *ngIf="addresses[0].chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="received - sent" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="received - sent"></app-fiat></span></td>
|
||||
</tr>
|
||||
</ng-container>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="w-100 d-block d-md-none"></div>
|
||||
<div class="col-md treemap-col">
|
||||
<app-addresses-treemap [addresses]="addresses" [isLoading]="isLoadingAddress"></app-addresses-treemap>
|
||||
<app-addresses-treemap [addresses]="addresses" [isLoading]="isLoadingWallet"></app-addresses-treemap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="addresses && addresses.length && transactions && transactions.length > 2">
|
||||
<ng-container *ngIf="(walletStats$ | async) as walletStats">
|
||||
<br>
|
||||
<div class="title-tx">
|
||||
<h2 class="text-left" i18n="address.balance-history">Balance History</h2>
|
||||
|
|
@ -67,56 +67,16 @@
|
|||
<div class="box">
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<app-address-graph [addresses]="addressStrings" [isPubkey]="addresses[0]?.is_pubkey" [balance]="chainBalance" />
|
||||
<app-address-graph [addressSummary$]="walletSummary$" period="all" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<br>
|
||||
<div class="title-tx">
|
||||
<h2 class="text-left" i18n="address.transactions">
|
||||
Transactions
|
||||
</h2>
|
||||
</div>
|
||||
<ng-template #loadingTemplate>
|
||||
|
||||
<app-transactions-list [transactions]="transactions" [showConfirmations]="true" [addresses]="addressStrings" (loadMore)="loadMore()"></app-transactions-list>
|
||||
|
||||
<div class="text-center">
|
||||
<ng-template [ngIf]="isLoadingTransactions">
|
||||
|
||||
<ng-container *ngIf="addressLoadingStatus$ as addressLoadingStatus">
|
||||
<div class="header-bg box" style="padding: 12px; margin-bottom: 10px;">
|
||||
<div class="progress progress-dark">
|
||||
<div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div class="header-bg box">
|
||||
<div class="row" style="height: 107px;">
|
||||
<div class="col-sm">
|
||||
<span class="skeleton-loader"></span>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<span class="skeleton-loader"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
<ng-template [ngIf]="retryLoadMore">
|
||||
<br>
|
||||
<button type="button" class="btn btn-outline-info btn-sm" (click)="loadMore()"><fa-icon [icon]="['fas', 'redo-alt']" [fixedWidth]="true"></fa-icon></button>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
<ng-template [ngIf]="isLoadingAddress && !error">
|
||||
|
||||
<div class="box">
|
||||
<div class="box" *ngIf="!error; else errorTemplate">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<table class="table table-borderless table-striped">
|
||||
|
|
@ -142,21 +102,11 @@
|
|||
|
||||
</ng-template>
|
||||
|
||||
<ng-template [ngIf]="error">
|
||||
<ng-template #errorTemplate>
|
||||
<br>
|
||||
<ng-template [ngIf]="error.status === 413 || error.status === 405 || error.status === 504" [ngIfElse]="displayServerError">
|
||||
<div class="text-center">
|
||||
<span i18n="address.error.loading-wallet-data">Error loading wallet data.</span>
|
||||
<br>
|
||||
<ng-container i18n="Electrum server limit exceeded error">
|
||||
<i>There many transactions in this wallet, more than your backend can handle. See more on <a href="/docs/faq#address-lookup-issues">setting up a stronger backend</a>.</i>
|
||||
<br><br>
|
||||
Consider viewing this wallet on the official Mempool website instead:
|
||||
</ng-container>
|
||||
<br>
|
||||
<a href="https://mempool.space/wallet?addresses={{ addressStrings.join(',') }}" target="_blank">https://mempool.space/wallet?addresses={{ addressStrings.join(',') }}</a>
|
||||
<br>
|
||||
<a href="http://mempoolhqx4isw62xs7abwphsq7ldayuidyx2v2oethdhhj6mlo2r6ad.onion/wallet?addresses={{ addressStrings.join(',') }}" target="_blank">http://mempoolhqx4isw62xs7abwphsq7ldayuidyx2v2oethdhhj6mlo2r6ad.onion/wallet?addresses={{ addressStrings.join(',') }}</a>
|
||||
<br><br>
|
||||
<i class="small">({{ error | httpErrorMsg }})</i>
|
||||
</div>
|
||||
|
|
@ -172,10 +122,6 @@
|
|||
|
||||
<br>
|
||||
|
||||
<ng-template #confidentialTd>
|
||||
<td i18n="shared.confidential">Confidential</td>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #headerLoader>
|
||||
<div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
|
||||
<span class="skeleton-loader"></span>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,101 @@
|
|||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { ElectrsApiService } from '../../services/electrs-api.service';
|
||||
import { switchMap, filter, catchError, map, tap, share } from 'rxjs/operators';
|
||||
import { Address, Transaction } from '../../interfaces/electrs.interface';
|
||||
import { ActivatedRoute, ParamMap } from '@angular/router';
|
||||
import { switchMap, catchError, map, tap, shareReplay, startWith, scan } from 'rxjs/operators';
|
||||
import { Address, AddressTxSummary, ChainStats, Transaction } from '../../interfaces/electrs.interface';
|
||||
import { WebsocketService } from '../../services/websocket.service';
|
||||
import { StateService } from '../../services/state.service';
|
||||
import { AudioService } from '../../services/audio.service';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
import { of, merge, Subscription, Observable, combineLatest, forkJoin } from 'rxjs';
|
||||
import { of, Observable, Subscription } from 'rxjs';
|
||||
import { SeoService } from '../../services/seo.service';
|
||||
import { seoDescriptionNetwork } from '../../shared/common.utils';
|
||||
import { WalletAddress } from '../../interfaces/node-api.interface';
|
||||
|
||||
class WalletStats implements ChainStats {
|
||||
addresses: string[];
|
||||
funded_txo_count: number;
|
||||
funded_txo_sum: number;
|
||||
spent_txo_count: number;
|
||||
spent_txo_sum: number;
|
||||
tx_count: number;
|
||||
|
||||
constructor (stats: ChainStats[], addresses: string[]) {
|
||||
Object.assign(this, stats.reduce((acc, stat) => {
|
||||
acc.funded_txo_count += stat.funded_txo_count;
|
||||
acc.funded_txo_sum += stat.funded_txo_sum;
|
||||
acc.spent_txo_count += stat.spent_txo_count;
|
||||
acc.spent_txo_sum += stat.spent_txo_sum;
|
||||
return acc;
|
||||
}, {
|
||||
funded_txo_count: 0,
|
||||
funded_txo_sum: 0,
|
||||
spent_txo_count: 0,
|
||||
spent_txo_sum: 0,
|
||||
tx_count: 0,
|
||||
})
|
||||
);
|
||||
this.addresses = addresses;
|
||||
}
|
||||
|
||||
public addTx(tx: Transaction): void {
|
||||
for (const vin of tx.vin) {
|
||||
if (this.addresses.includes(vin.prevout?.scriptpubkey_address)) {
|
||||
this.spendTxo(vin.prevout.value);
|
||||
}
|
||||
}
|
||||
for (const vout of tx.vout) {
|
||||
if (this.addresses.includes(vout.scriptpubkey_address)) {
|
||||
this.fundTxo(vout.value);
|
||||
}
|
||||
}
|
||||
this.tx_count++;
|
||||
}
|
||||
|
||||
public removeTx(tx: Transaction): void {
|
||||
for (const vin of tx.vin) {
|
||||
if (this.addresses.includes(vin.prevout?.scriptpubkey_address)) {
|
||||
this.unspendTxo(vin.prevout.value);
|
||||
}
|
||||
}
|
||||
for (const vout of tx.vout) {
|
||||
if (this.addresses.includes(vout.scriptpubkey_address)) {
|
||||
this.unfundTxo(vout.value);
|
||||
}
|
||||
}
|
||||
this.tx_count--;
|
||||
}
|
||||
|
||||
private fundTxo(value: number): void {
|
||||
this.funded_txo_sum += value;
|
||||
this.funded_txo_count++;
|
||||
}
|
||||
|
||||
private unfundTxo(value: number): void {
|
||||
this.funded_txo_sum -= value;
|
||||
this.funded_txo_count--;
|
||||
}
|
||||
|
||||
private spendTxo(value: number): void {
|
||||
this.spent_txo_sum += value;
|
||||
this.spent_txo_count++;
|
||||
}
|
||||
|
||||
private unspendTxo(value: number): void {
|
||||
this.spent_txo_sum -= value;
|
||||
this.spent_txo_count--;
|
||||
}
|
||||
|
||||
get balance(): number {
|
||||
return this.funded_txo_sum - this.spent_txo_sum;
|
||||
}
|
||||
|
||||
get totalReceived(): number {
|
||||
return this.funded_txo_sum;
|
||||
}
|
||||
|
||||
get utxos(): number {
|
||||
return this.funded_txo_count - this.spent_txo_count;
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-wallet',
|
||||
|
|
@ -19,16 +105,16 @@ import { seoDescriptionNetwork } from '../../shared/common.utils';
|
|||
export class WalletComponent implements OnInit, OnDestroy {
|
||||
network = '';
|
||||
|
||||
addresses: Address[];
|
||||
addressStrings: string[];
|
||||
isLoadingAddress = true;
|
||||
transactions: Transaction[];
|
||||
isLoadingTransactions = true;
|
||||
retryLoadMore = false;
|
||||
addresses: Address[] = [];
|
||||
addressStrings: string[] = [];
|
||||
walletName: string;
|
||||
isLoadingWallet = true;
|
||||
wallet$: Observable<Record<string, WalletAddress>>;
|
||||
walletAddresses$: Observable<Record<string, Address>>;
|
||||
walletSummary$: Observable<AddressTxSummary[]>;
|
||||
walletStats$: Observable<WalletStats>;
|
||||
error: any;
|
||||
mainSubscription: Subscription;
|
||||
wsSubscription: Subscription;
|
||||
addressLoadingStatus$: Observable<number>;
|
||||
walletSubscription: Subscription;
|
||||
|
||||
collapseAddresses: boolean = true;
|
||||
|
||||
|
|
@ -38,16 +124,10 @@ export class WalletComponent implements OnInit, OnDestroy {
|
|||
sent = 0;
|
||||
chainBalance = 0;
|
||||
|
||||
private tempTransactions: Transaction[];
|
||||
private timeTxIndexes: number[];
|
||||
private lastTransactionTxId: string;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private electrsApiService: ElectrsApiService,
|
||||
private websocketService: WebsocketService,
|
||||
private stateService: StateService,
|
||||
private audioService: AudioService,
|
||||
private apiService: ApiService,
|
||||
private seoService: SeoService,
|
||||
) { }
|
||||
|
|
@ -55,275 +135,156 @@ export class WalletComponent implements OnInit, OnDestroy {
|
|||
ngOnInit(): void {
|
||||
this.stateService.networkChanged$.subscribe((network) => this.network = network);
|
||||
this.websocketService.want(['blocks']);
|
||||
|
||||
const addresses$ = this.route.queryParamMap.pipe(
|
||||
map((queryParams) => (queryParams.get('addresses') as string)?.split(',').map(this.normalizeAddress)),
|
||||
tap(addresses => {
|
||||
this.addressStrings = addresses;
|
||||
this.error = undefined;
|
||||
this.isLoadingAddress = true;
|
||||
this.fullyLoaded = false;
|
||||
this.addresses = [];
|
||||
this.isLoadingTransactions = true;
|
||||
this.transactions = null;
|
||||
document.body.scrollTo(0, 0);
|
||||
const titleLabel = addresses[0] + (addresses.length > 1 ? ` +${addresses.length - 1} addresses` : '');
|
||||
this.seoService.setTitle($localize`:@@address.component.browser-title:Address: ${titleLabel}}:INTERPOLATION:`);
|
||||
this.seoService.setDescription($localize`:@@meta.description.bitcoin.address:See mempool transactions, confirmed transactions, balance, and more for ${this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet'?'Liquid':'Bitcoin'}${seoDescriptionNetwork(this.stateService.network)} address ${titleLabel}:INTERPOLATION:.`);
|
||||
this.wallet$ = this.route.paramMap.pipe(
|
||||
map((params: ParamMap) => params.get('wallet') as string),
|
||||
tap((walletName: string) => {
|
||||
this.walletName = walletName;
|
||||
this.websocketService.startTrackingWallet(walletName);
|
||||
this.seoService.setTitle($localize`:@@wallet.component.browser-title:Wallet: ${walletName}:INTERPOLATION:`);
|
||||
this.seoService.setDescription($localize`:@@meta.description.bitcoin.wallet:See mempool transactions, confirmed transactions, balance, and more for ${this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet'?'Liquid':'Bitcoin'}${seoDescriptionNetwork(this.stateService.network)} wallet ${walletName}:INTERPOLATION:.`);
|
||||
}),
|
||||
share()
|
||||
switchMap((walletName: string) => this.apiService.getWallet$(walletName).pipe(
|
||||
catchError((err) => {
|
||||
this.error = err;
|
||||
this.seoService.logSoft404();
|
||||
console.log(err);
|
||||
return of({});
|
||||
})
|
||||
)),
|
||||
shareReplay(1),
|
||||
);
|
||||
|
||||
this.addressLoadingStatus$ = addresses$
|
||||
.pipe(
|
||||
switchMap(() => this.stateService.loadingIndicators$),
|
||||
map((indicators) => indicators['address-' + this.addressStrings.join(',')] !== undefined ? indicators['address-' + this.addressStrings.join(',')] : 0)
|
||||
);
|
||||
|
||||
this.mainSubscription = combineLatest([
|
||||
addresses$,
|
||||
merge(
|
||||
of(true),
|
||||
this.stateService.connectionState$.pipe(filter((state) => state === 2 && this.transactions && this.transactions.length > 0)),
|
||||
),
|
||||
]).pipe(
|
||||
switchMap(([addresses]) => {
|
||||
return forkJoin(
|
||||
addresses.map((address) =>
|
||||
address.match(/04[a-fA-F0-9]{128}|(02|03)[a-fA-F0-9]{64}/)
|
||||
? this.electrsApiService.getPubKeyAddress$(address)
|
||||
: this.electrsApiService.getAddress$(address)
|
||||
)
|
||||
);
|
||||
}),
|
||||
tap((addresses: Address[]) => {
|
||||
this.addresses = addresses;
|
||||
this.updateChainStats();
|
||||
this.isLoadingAddress = false;
|
||||
this.isLoadingTransactions = true;
|
||||
this.websocketService.startTrackAddresses(addresses.map(address => address.address));
|
||||
}),
|
||||
switchMap((addresses) => {
|
||||
return addresses[0].is_pubkey
|
||||
? this.electrsApiService.getScriptHashesTransactions$(addresses.map(address => (address.address.length === 66 ? '21' : '41') + address.address + 'ac'))
|
||||
: this.electrsApiService.getAddressesTransactions$(addresses.map(address => address.address));
|
||||
}),
|
||||
switchMap((transactions) => {
|
||||
this.tempTransactions = transactions;
|
||||
if (transactions.length) {
|
||||
this.lastTransactionTxId = transactions[transactions.length - 1].txid;
|
||||
}
|
||||
|
||||
const fetchTxs: string[] = [];
|
||||
this.timeTxIndexes = [];
|
||||
transactions.forEach((tx, index) => {
|
||||
if (!tx.status.confirmed) {
|
||||
fetchTxs.push(tx.txid);
|
||||
this.timeTxIndexes.push(index);
|
||||
}
|
||||
});
|
||||
if (!fetchTxs.length) {
|
||||
return of([]);
|
||||
}
|
||||
return this.apiService.getTransactionTimes$(fetchTxs).pipe(
|
||||
catchError((err) => {
|
||||
this.isLoadingAddress = false;
|
||||
this.isLoadingTransactions = false;
|
||||
this.error = err;
|
||||
this.seoService.logSoft404();
|
||||
console.log(err);
|
||||
return of([]);
|
||||
})
|
||||
);
|
||||
})
|
||||
)
|
||||
.subscribe((times: number[] | null) => {
|
||||
if (!times) {
|
||||
return;
|
||||
this.walletAddresses$ = this.wallet$.pipe(
|
||||
map(wallet => {
|
||||
const walletInfo: Record<string, Address> = {};
|
||||
for (const address of Object.keys(wallet)) {
|
||||
walletInfo[address] = {
|
||||
address,
|
||||
chain_stats: wallet[address].stats,
|
||||
mempool_stats: {
|
||||
funded_txo_count: 0,
|
||||
funded_txo_sum: 0,
|
||||
spent_txo_count: 0, spent_txo_sum: 0, tx_count: 0
|
||||
},
|
||||
};
|
||||
}
|
||||
times.forEach((time, index) => {
|
||||
this.tempTransactions[this.timeTxIndexes[index]].firstSeen = time;
|
||||
});
|
||||
this.tempTransactions.sort((a, b) => {
|
||||
if (b.status.confirmed) {
|
||||
if (b.status.block_height === a.status.block_height) {
|
||||
return b.status.block_time - a.status.block_time;
|
||||
return walletInfo;
|
||||
}),
|
||||
switchMap(initial => this.stateService.walletTransactions$.pipe(
|
||||
startWith(null),
|
||||
scan((wallet, walletTransactions) => {
|
||||
for (const tx of (walletTransactions || [])) {
|
||||
const funded: Record<string, number> = {};
|
||||
const spent: Record<string, number> = {};
|
||||
const fundedCount: Record<string, number> = {};
|
||||
const spentCount: Record<string, number> = {};
|
||||
for (const vin of tx.vin) {
|
||||
const address = vin.prevout?.scriptpubkey_address;
|
||||
if (address && wallet[address]) {
|
||||
spent[address] = (spent[address] ?? 0) + (vin.prevout?.value ?? 0);
|
||||
spentCount[address] = (spentCount[address] ?? 0) + 1;
|
||||
}
|
||||
}
|
||||
return b.status.block_height - a.status.block_height;
|
||||
}
|
||||
return b.firstSeen - a.firstSeen;
|
||||
});
|
||||
|
||||
this.transactions = this.tempTransactions;
|
||||
this.isLoadingTransactions = false;
|
||||
},
|
||||
(error) => {
|
||||
console.log(error);
|
||||
this.error = error;
|
||||
this.seoService.logSoft404();
|
||||
this.isLoadingAddress = false;
|
||||
});
|
||||
|
||||
this.wsSubscription = this.stateService.multiAddressTransactions$.subscribe(update => {
|
||||
for (const address of Object.keys(update)) {
|
||||
for (const transaction of update[address].mempool) {
|
||||
this.addTransaction(transaction);
|
||||
}
|
||||
for (const transaction of update[address].confirmed) {
|
||||
const tx = this.transactions.find((t) => t.txid === transaction.txid);
|
||||
if (tx) {
|
||||
this.removeTransaction(tx);
|
||||
tx.status = transaction.status;
|
||||
this.transactions = this.transactions.slice();
|
||||
this.audioService.playSound('magic');
|
||||
} else {
|
||||
if (this.addTransaction(transaction, false)) {
|
||||
this.audioService.playSound('magic');
|
||||
for (const vout of tx.vout) {
|
||||
const address = vout.scriptpubkey_address;
|
||||
if (address && wallet[address]) {
|
||||
funded[address] = (funded[address] ?? 0) + (vout.value ?? 0);
|
||||
fundedCount[address] = (fundedCount[address] ?? 0) + 1;
|
||||
}
|
||||
}
|
||||
for (const address of Object.keys({ ...funded, ...spent })) {
|
||||
// update address stats
|
||||
wallet[address].chain_stats.tx_count++;
|
||||
wallet[address].chain_stats.funded_txo_count += fundedCount[address] || 0;
|
||||
wallet[address].chain_stats.spent_txo_count += spentCount[address] || 0;
|
||||
wallet[address].chain_stats.funded_txo_sum += funded[address] || 0;
|
||||
wallet[address].chain_stats.spent_txo_sum += spent[address] || 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const transaction of update[address].removed) {
|
||||
this.removeTransaction(transaction);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addTransaction(transaction: Transaction, playSound: boolean = true): boolean {
|
||||
if (this.transactions.some((t) => t.txid === transaction.txid)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.transactions.unshift(transaction);
|
||||
this.transactions = this.transactions.slice();
|
||||
this.txCount++;
|
||||
|
||||
if (playSound) {
|
||||
if (transaction.vout.some((vout) => this.addressStrings.includes(vout?.scriptpubkey_address))) {
|
||||
this.audioService.playSound('cha-ching');
|
||||
} else {
|
||||
this.audioService.playSound('chime');
|
||||
}
|
||||
}
|
||||
|
||||
for (const address of this.addresses) {
|
||||
let match = false;
|
||||
transaction.vin.forEach((vin) => {
|
||||
if (vin?.prevout?.scriptpubkey_address === address.address) {
|
||||
match = true;
|
||||
this.sent += vin.prevout.value;
|
||||
if (transaction.status?.confirmed) {
|
||||
address.chain_stats.funded_txo_count++;
|
||||
address.chain_stats.funded_txo_sum += vin.prevout.value;
|
||||
} else {
|
||||
address.mempool_stats.funded_txo_count++;
|
||||
address.mempool_stats.funded_txo_sum += vin.prevout.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
transaction.vout.forEach((vout) => {
|
||||
match = true;
|
||||
if (vout?.scriptpubkey_address === address.address) {
|
||||
this.received += vout.value;
|
||||
}
|
||||
if (transaction.status?.confirmed) {
|
||||
address.chain_stats.spent_txo_count++;
|
||||
address.chain_stats.spent_txo_sum += vout.value;
|
||||
} else {
|
||||
address.mempool_stats.spent_txo_count++;
|
||||
address.mempool_stats.spent_txo_sum += vout.value;
|
||||
}
|
||||
});
|
||||
if (match) {
|
||||
if (transaction.status?.confirmed) {
|
||||
address.chain_stats.tx_count++;
|
||||
} else {
|
||||
address.mempool_stats.tx_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
removeTransaction(transaction: Transaction): boolean {
|
||||
const index = this.transactions.findIndex(((tx) => tx.txid === transaction.txid));
|
||||
if (index === -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.transactions.splice(index, 1);
|
||||
this.transactions = this.transactions.slice();
|
||||
this.txCount--;
|
||||
|
||||
for (const address of this.addresses) {
|
||||
let match = false;
|
||||
transaction.vin.forEach((vin) => {
|
||||
if (vin?.prevout?.scriptpubkey_address === address.address) {
|
||||
match = true;
|
||||
this.sent -= vin.prevout.value;
|
||||
if (transaction.status?.confirmed) {
|
||||
address.chain_stats.funded_txo_count--;
|
||||
address.chain_stats.funded_txo_sum -= vin.prevout.value;
|
||||
} else {
|
||||
address.mempool_stats.funded_txo_count--;
|
||||
address.mempool_stats.funded_txo_sum -= vin.prevout.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
transaction.vout.forEach((vout) => {
|
||||
match = true;
|
||||
if (vout?.scriptpubkey_address === address.address) {
|
||||
this.received -= vout.value;
|
||||
}
|
||||
if (transaction.status?.confirmed) {
|
||||
address.chain_stats.spent_txo_count--;
|
||||
address.chain_stats.spent_txo_sum -= vout.value;
|
||||
} else {
|
||||
address.mempool_stats.spent_txo_count--;
|
||||
address.mempool_stats.spent_txo_sum -= vout.value;
|
||||
}
|
||||
});
|
||||
if (match) {
|
||||
if (transaction.status?.confirmed) {
|
||||
address.chain_stats.tx_count--;
|
||||
} else {
|
||||
address.mempool_stats.tx_count--;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
loadMore(): void {
|
||||
if (this.isLoadingTransactions || this.fullyLoaded) {
|
||||
return;
|
||||
}
|
||||
this.isLoadingTransactions = true;
|
||||
this.retryLoadMore = false;
|
||||
|
||||
(this.addresses[0].is_pubkey
|
||||
? this.electrsApiService.getScriptHashesTransactions$(this.addresses.map(address => (address.address.length === 66 ? '21' : '41') + address.address + 'ac'), this.lastTransactionTxId)
|
||||
: this.electrsApiService.getAddressesTransactions$(this.addresses.map(address => address.address), this.lastTransactionTxId)
|
||||
).pipe(
|
||||
catchError((error) => {
|
||||
this.isLoadingTransactions = false;
|
||||
this.retryLoadMore = true;
|
||||
// In the unlikely event of the txid wasn't found in the mempool anymore and we must reload the page.
|
||||
if (error.status === 422) {
|
||||
window.location.reload();
|
||||
}
|
||||
return of([]);
|
||||
return wallet;
|
||||
}, initial)
|
||||
)),
|
||||
tap(() => {
|
||||
this.isLoadingWallet = false;
|
||||
})
|
||||
).subscribe((transactions: Transaction[]) => {
|
||||
if (transactions && transactions.length) {
|
||||
this.lastTransactionTxId = transactions[transactions.length - 1].txid;
|
||||
this.transactions = this.transactions.concat(transactions);
|
||||
);
|
||||
|
||||
this.walletSubscription = this.walletAddresses$.subscribe(wallet => {
|
||||
this.addressStrings = Object.keys(wallet);
|
||||
this.addresses = Object.values(wallet);
|
||||
});
|
||||
|
||||
this.walletSummary$ = this.wallet$.pipe(
|
||||
switchMap(wallet => this.stateService.walletTransactions$.pipe(
|
||||
startWith([]),
|
||||
scan((summaries, newTransactions) => {
|
||||
const newSummaries: AddressTxSummary[] = [];
|
||||
for (const tx of newTransactions) {
|
||||
const funded: Record<string, number> = {};
|
||||
const spent: Record<string, number> = {};
|
||||
const fundedCount: Record<string, number> = {};
|
||||
const spentCount: Record<string, number> = {};
|
||||
for (const vin of tx.vin) {
|
||||
const address = vin.prevout?.scriptpubkey_address;
|
||||
if (address && wallet[address]) {
|
||||
spent[address] = (spent[address] ?? 0) + (vin.prevout?.value ?? 0);
|
||||
spentCount[address] = (spentCount[address] ?? 0) + 1;
|
||||
}
|
||||
}
|
||||
for (const vout of tx.vout) {
|
||||
const address = vout.scriptpubkey_address;
|
||||
if (address && wallet[address]) {
|
||||
funded[address] = (funded[address] ?? 0) + (vout.value ?? 0);
|
||||
fundedCount[address] = (fundedCount[address] ?? 0) + 1;
|
||||
}
|
||||
}
|
||||
for (const address of Object.keys({ ...funded, ...spent })) {
|
||||
// add tx to summary
|
||||
const txSummary: AddressTxSummary = {
|
||||
txid: tx.txid,
|
||||
value: (funded[address] ?? 0) - (spent[address] ?? 0),
|
||||
height: tx.status.block_height,
|
||||
time: tx.status.block_time,
|
||||
};
|
||||
wallet[address].transactions?.push(txSummary);
|
||||
newSummaries.push(txSummary);
|
||||
}
|
||||
}
|
||||
return [...summaries, ...this.deduplicateWalletTransactions(newSummaries)];
|
||||
}, this.deduplicateWalletTransactions(Object.values(wallet).flatMap(address => address.transactions)))
|
||||
)),
|
||||
);
|
||||
|
||||
this.walletStats$ = this.wallet$.pipe(
|
||||
switchMap(wallet => {
|
||||
const walletStats = new WalletStats(Object.values(wallet).map(w => w.stats), Object.keys(wallet));
|
||||
return this.stateService.walletTransactions$.pipe(
|
||||
startWith([]),
|
||||
scan((stats, newTransactions) => {
|
||||
for (const tx of newTransactions) {
|
||||
stats.addTx(tx);
|
||||
}
|
||||
return stats;
|
||||
}, walletStats),
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
deduplicateWalletTransactions(walletTransactions: AddressTxSummary[]): AddressTxSummary[] {
|
||||
const transactions = new Map<string, AddressTxSummary>();
|
||||
for (const tx of walletTransactions) {
|
||||
if (transactions.has(tx.txid)) {
|
||||
transactions.get(tx.txid).value += tx.value;
|
||||
} else {
|
||||
this.fullyLoaded = true;
|
||||
transactions.set(tx.txid, tx);
|
||||
}
|
||||
this.isLoadingTransactions = false;
|
||||
}
|
||||
return Array.from(transactions.values()).sort((a, b) => {
|
||||
if (a.height === b.height) {
|
||||
return b.tx_position - a.tx_position;
|
||||
}
|
||||
return b.height - a.height;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -335,26 +296,8 @@ export class WalletComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
}
|
||||
|
||||
updateChainStats(): void {
|
||||
let received = 0;
|
||||
let sent = 0;
|
||||
let txCount = 0;
|
||||
let chainBalance = 0;
|
||||
for (const address of this.addresses) {
|
||||
received += address.chain_stats.funded_txo_sum + address.mempool_stats.funded_txo_sum;
|
||||
sent += address.chain_stats.spent_txo_sum + address.mempool_stats.spent_txo_sum;
|
||||
txCount += address.chain_stats.tx_count + address.mempool_stats.tx_count;
|
||||
chainBalance += (address.chain_stats.funded_txo_sum - address.chain_stats.spent_txo_sum);
|
||||
}
|
||||
this.received = received;
|
||||
this.sent = sent;
|
||||
this.txCount = txCount;
|
||||
this.chainBalance = chainBalance;
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.mainSubscription.unsubscribe();
|
||||
this.websocketService.stopTrackingAddresses();
|
||||
this.wsSubscription.unsubscribe();
|
||||
this.websocketService.stopTrackingWallet();
|
||||
this.walletSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ const routes: Routes = [
|
|||
}
|
||||
},
|
||||
{
|
||||
path: 'wallet',
|
||||
path: 'wallet/:wallet',
|
||||
children: [],
|
||||
component: WalletComponent,
|
||||
data: {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { AddressTxSummary, Block, Transaction } from "./electrs.interface";
|
||||
import { AddressTxSummary, Block, ChainStats, Transaction } from "./electrs.interface";
|
||||
|
||||
export interface OptimizedMempoolStats {
|
||||
added: number;
|
||||
|
|
@ -474,5 +474,6 @@ export interface TxResult {
|
|||
export interface WalletAddress {
|
||||
address: string;
|
||||
active: boolean;
|
||||
transactions?: AddressTxSummary[];
|
||||
stats: ChainStats;
|
||||
transactions: AddressTxSummary[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ export class StateService {
|
|||
mempoolRemovedTransactions$ = new Subject<Transaction>();
|
||||
multiAddressTransactions$ = new Subject<{ [address: string]: { mempool: Transaction[], confirmed: Transaction[], removed: Transaction[] }}>();
|
||||
blockTransactions$ = new Subject<Transaction>();
|
||||
walletTransactions$ = new Subject<Record<string, AddressTxSummary[]>>();
|
||||
walletTransactions$ = new Subject<Transaction[]>();
|
||||
isLoadingWebSocket$ = new ReplaySubject<boolean>(1);
|
||||
isLoadingMempool$ = new BehaviorSubject<boolean>(true);
|
||||
vbytesPerSecond$ = new ReplaySubject<number>(1);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue