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

Add multi-address wallet page

Browse Source
This commit is contained in:
Mononaut
2024-03-28 08:27:57 +00:00
parent 54c2d7efe5
commit a7ba4a0be8
13 changed files with 939 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
frontend/src/app/components/wallet/wallet.component.html Normal file
View File

@@ -0,0 +1,183 @@
<div class="container-xl" [class.liquid-address]="network === 'liquid' || network === 'liquidtestnet'">
<div class="title-address">
<h1 i18n="shared.wallet">Wallet</h1>
</div>
<div class="clearfix"></div>
<ng-template [ngIf]="!isLoadingAddress && !error">
<div class="box">
<div class="row">
<div class="col-md">
<table class="table table-borderless table-striped address-table">
<tbody>
<tr>
<td i18n="address.number-addresses">Addresses</td>
<td *ngIf="addressStrings.length" class="address-list">
<app-truncate [text]="addressStrings[0]" [lastChars]="8" [link]="['/address/' | relativeUrl, addressStrings[0]]"></app-truncate>
<ng-container *ngIf="addressStrings.length > 1">
<app-truncate [text]="addressStrings[1]" [lastChars]="8" [link]="['/address/' | relativeUrl, addressStrings[1]]"></app-truncate>
</ng-container>
<div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="collapseAddresses">
<app-truncate
*ngFor="let address of addressStrings | slice: (addressStrings.length > 1 ? 2 : 1)"
[text]="address" [lastChars]="8" [link]="['/address/' | relativeUrl, address]"
></app-truncate>
</div>
<button *ngIf="addressStrings.length > 2" type="button"
class="btn btn-sm btn-primary small-button" (click)="collapse.toggle()"
[attr.aria-expanded]="!collapseAddresses" aria-controls="collapseExample">
<div *ngIf="collapseAddresses"><span i18n="show-all">Show all</span> ({{ addressStrings.length }})</div>
<span *ngIf="!collapseAddresses" i18n="hide">Hide</span>
</button>
</div>
</td>
</tr>
<ng-template [ngIf]="!addresses[0].electrum">
<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>
</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>
</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>
</div>
</div>
</div>
<ng-container *ngIf="addresses && addresses.length && transactions && transactions.length > 2">
<br>
<div class="title-tx">
<h2 class="text-left" i18n="address.balance-history">Balance History</h2>
</div>
<div class="box">
<div class="row">
<div class="col-md">
<app-address-graph [addresses]="addressStrings" [isPubkey]="addresses[0]?.is_pubkey" [balance]="chainBalance" />
</div>
</div>
</div>
</ng-container>
<br>
<div class="title-tx">
<h2 class="text-left" i18n="address.transactions">
Transactions
</h2>
</div>
<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="row">
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="w-100 d-block d-md-none"></div>
<div class="col">
</div>
</div>
</div>
</ng-template>
<ng-template [ngIf]="error">
<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>
</ng-template>
<ng-template #displayServerError>
<app-http-error [error]="error">
<span i18n="address.error.loading-wallet-data">Error loading wallet data.</span>
</app-http-error>
</ng-template>
</ng-template>
</div>
<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>
</div>
</ng-template>

117
frontend/src/app/components/wallet/wallet.component.scss Normal file
View File

@@ -0,0 +1,117 @@
.qr-wrapper {
background-color: #FFF;
padding: 10px;
padding-bottom: 5px;
display: inline-block;
}
.treemap-col {
width: 45%;
height: 300px;
}
.fiat {
display: block;
@media (min-width: 992px){
display: inline-block;
margin-left: 10px;
}
}
.table {
tr td {
&:last-child {
text-align: right;
@media (min-width: 576px) {
text-align: left;
}
}
}
}
.address-list {
width: 100%;
max-width: 200px;
}
h1 {
margin: 0px;
padding: 0px;
margin-right: 10px;
font-size: 1.9rem;
@media (min-width: 576px) {
font-size: 2rem;
float: left;
}
@media (min-width: 768px) {
font-size: 2.5rem;
}
}
.title-address {
align-items: baseline;
}
.address-link {
line-height: 56px;
margin-left: 0px;
top: -2px;
position: relative;
@media (min-width: 768px) {
line-height: 69px;
}
}
.row{
flex-direction: column;
@media (min-width: 576px) {
flex-direction: row;
}
}
@media (max-width: 767.98px) {
.mobile-bottomcol {
margin-top: 15px;
}
.details-table td:first-child {
white-space: pre-wrap;
}
}
.tx-link {
display: block;
height: 100%;
top: 9px;
position: relative;
@media (min-width: 576px) {
top: 11px;
}
@media (min-width: 768px) {
max-width: calc(100% - 180px);
top: 17px;
}
}
.title-tx {
h2 {
line-height: 1;
margin-bottom: 10px;
}
}
.liquid-address {
.address-table {
table-layout: fixed;
tr td:first-child {
width: 170px;
}
tr td:last-child {
width: 80%;
}
}
.qrcode-col {
flex-grow: 0.5;
}
}

360
frontend/src/app/components/wallet/wallet.component.ts Normal file
View File

@@ -0,0 +1,360 @@
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 { 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 { SeoService } from '../../services/seo.service';
import { seoDescriptionNetwork } from '../../shared/common.utils';
@Component({
selector: 'app-wallet',
templateUrl: './wallet.component.html',
styleUrls: ['./wallet.component.scss']
})
export class WalletComponent implements OnInit, OnDestroy {
network = '';
addresses: Address[];
addressStrings: string[];
isLoadingAddress = true;
transactions: Transaction[];
isLoadingTransactions = true;
retryLoadMore = false;
error: any;
mainSubscription: Subscription;
wsSubscription: Subscription;
addressLoadingStatus$: Observable<number>;
collapseAddresses: boolean = true;
fullyLoaded = false;
txCount = 0;
received = 0;
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,
) { }
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:.`);
}),
share()
);
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;
}
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 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 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([]);
})
).subscribe((transactions: Transaction[]) => {
if (transactions && transactions.length) {
this.lastTransactionTxId = transactions[transactions.length - 1].txid;
this.transactions = this.transactions.concat(transactions);
} else {
this.fullyLoaded = true;
}
this.isLoadingTransactions = false;
});
}
normalizeAddress(address: string): string {
if (/^[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100}|04[a-fA-F0-9]{128}|(02|03)[a-fA-F0-9]{64}$/.test(address)) {
return address.toLowerCase();
} else {
return address;
}
}
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();
}
}