mirror of
https://github.com/mempool/mempool.git
synced 2025-04-08 03:48:31 +02:00
Add multi-address wallet page
This commit is contained in:
Mononaut
parent
54c2d7efe5
commit
a7ba4a0be8
@ -31,7 +31,7 @@ let routes: Routes = [
|
||||
data: { preload: true },
|
||||
},
|
||||
{
|
||||
path: 'wallet',
|
||||
path: 'widget/wallet',
|
||||
children: [],
|
||||
component: AddressGroupComponent,
|
||||
data: {
|
||||
@ -112,7 +112,7 @@ let routes: Routes = [
|
||||
data: { preload: true },
|
||||
},
|
||||
{
|
||||
path: 'wallet',
|
||||
path: 'widget/wallet',
|
||||
children: [],
|
||||
component: AddressGroupComponent,
|
||||
data: {
|
||||
@ -153,7 +153,7 @@ let routes: Routes = [
|
||||
data: { preload: true },
|
||||
},
|
||||
{
|
||||
path: 'wallet',
|
||||
path: 'widget/wallet',
|
||||
children: [],
|
||||
component: AddressGroupComponent,
|
||||
data: {
|
||||
@ -234,7 +234,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
|
||||
data: { preload: true },
|
||||
},
|
||||
{
|
||||
path: 'wallet',
|
||||
path: 'widget/wallet',
|
||||
children: [],
|
||||
component: AddressGroupComponent,
|
||||
data: {
|
||||
@ -269,7 +269,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
|
||||
data: { preload: true },
|
||||
},
|
||||
{
|
||||
path: 'wallet',
|
||||
path: 'widget/wallet',
|
||||
children: [],
|
||||
component: AddressGroupComponent,
|
||||
data: {
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<app-transactions-list [transactions]="transactions" [showConfirmations]="true" [address]="address.address" (loadMore)="loadMore()"></app-transactions-list>
|
||||
<app-transactions-list [transactions]="transactions" [showConfirmations]="true" [addresses]="[address.address]" (loadMore)="loadMore()"></app-transactions-list>
|
||||
|
||||
<div class="text-center">
|
||||
<ng-template [ngIf]="isLoadingTransactions">
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="addresses-treemap-container">
|
||||
<div *ngIf="addresses" style="height: 300px">
|
||||
<div *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!stateService.isBrowser || isLoading" class="text-center loading-spinner">
|
||||
<div class="spinner-border text-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
.node-channels-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
position: relative;
|
||||
top: 225px;
|
||||
}
|
||||
@ -0,0 +1,145 @@
|
||||
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { EChartsOption, TreemapSeriesOption } from '../../graphs/echarts';
|
||||
import { lerpColor } from '../../shared/graphs.utils';
|
||||
import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
|
||||
import { LightningApiService } from '../../lightning/lightning-api.service';
|
||||
import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
|
||||
import { StateService } from '../../services/state.service';
|
||||
import { Address } from '../../interfaces/electrs.interface';
|
||||
import { formatNumber } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-addresses-treemap',
|
||||
templateUrl: './addresses-treemap.component.html',
|
||||
styleUrls: ['./addresses-treemap.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AddressesTreemap implements OnChanges {
|
||||
@Input() addresses: Address[];
|
||||
@Input() isLoading: boolean = false;
|
||||
|
||||
chartInstance: any;
|
||||
chartOptions: EChartsOption = {};
|
||||
chartInitOptions = {
|
||||
renderer: 'svg',
|
||||
};
|
||||
|
||||
constructor(
|
||||
@Inject(LOCALE_ID) public locale: string,
|
||||
private lightningApiService: LightningApiService,
|
||||
private amountShortenerPipe: AmountShortenerPipe,
|
||||
private zone: NgZone,
|
||||
private router: Router,
|
||||
public stateService: StateService,
|
||||
) {}
|
||||
|
||||
ngOnChanges(): void {
|
||||
this.prepareChartOptions();
|
||||
}
|
||||
|
||||
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),
|
||||
}
|
||||
}));
|
||||
this.chartOptions = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle: {
|
||||
align: 'left',
|
||||
}
|
||||
},
|
||||
series: <TreemapSeriesOption[]>[
|
||||
{
|
||||
height: 300,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
roam: false,
|
||||
type: 'treemap',
|
||||
data: data,
|
||||
nodeClick: 'link',
|
||||
progressive: 100,
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: 'rgba(17, 19, 31, 1)',
|
||||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: (value): string => {
|
||||
if (!value.data.address) {
|
||||
return '';
|
||||
}
|
||||
return `
|
||||
<table style="table-layout: fixed;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="2"><b style="color: white; margin-left: 2px">${value.data.address}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Recieved</td>
|
||||
<td style="text-align: right">${this.formatValue(value.data.stats.funded_txo_sum)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sent</td>
|
||||
<td style="text-align: right">${this.formatValue(value.data.stats.spent_txo_sum)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Balance</td>
|
||||
<td style="text-align: right">${this.formatValue(value.data.stats.funded_txo_sum - value.data.stats.spent_txo_sum)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Transaction count</td>
|
||||
<td style="text-align: right">${value.data.stats.tx_count}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: 'black',
|
||||
borderWidth: 1,
|
||||
},
|
||||
breadcrumb: {
|
||||
show: false,
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
formatValue(sats: number): string {
|
||||
if (sats > 100000000) {
|
||||
return formatNumber(sats / 100000000, this.locale, '1.2-2') + ' BTC';
|
||||
} else {
|
||||
return this.amountShortenerPipe.transform(sats, 2) + ' sats';
|
||||
}
|
||||
}
|
||||
|
||||
onChartInit(ec: any): void {
|
||||
this.chartInstance = ec;
|
||||
|
||||
this.chartInstance.on('click', (e) => {
|
||||
//@ts-ignore
|
||||
if (!e.data.address) {
|
||||
return;
|
||||
}
|
||||
this.zone.run(() => {
|
||||
//@ts-ignore
|
||||
const url = new RelativeUrlPipe(this.stateService).transform(`/address/${e.data.address}`);
|
||||
this.router.navigate([url]);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -23,7 +23,7 @@
|
||||
<ng-template ngFor let-vin let-vindex="index" [ngForOf]="tx.vin.slice(0, getVinLimit(tx))" [ngForTrackBy]="trackByIndexFn">
|
||||
<tr [ngClass]="{
|
||||
'assetBox': (assetsMinimal && vin.prevout && assetsMinimal[vin.prevout.asset] && !vin.is_coinbase && vin.prevout.scriptpubkey_address && tx._unblinded) || inputIndex === vindex,
|
||||
'highlight': this.address !== '' && (vin.prevout?.scriptpubkey_address === this.address || (vin.prevout?.scriptpubkey_type === 'p2pk' && vin.prevout?.scriptpubkey.slice(2, -2) === this.address))
|
||||
'highlight': this.addresses.length && ((vin.prevout?.scriptpubkey_type !== 'p2pk' && addresses.includes(vin.prevout?.scriptpubkey_address)) || this.addresses.includes(vin.prevout?.scriptpubkey.slice(2, -2)))
|
||||
}">
|
||||
<td class="arrow-td">
|
||||
<ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
|
||||
@ -214,7 +214,7 @@
|
||||
<ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx.vout.slice(0, getVoutLimit(tx))" [ngForTrackBy]="trackByIndexFn">
|
||||
<tr [ngClass]="{
|
||||
'assetBox': assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded || outputIndex === vindex,
|
||||
'highlight': this.address !== '' && (vout.scriptpubkey_address === this.address || (vout.scriptpubkey_type === 'p2pk' && vout.scriptpubkey.slice(2, -2) === this.address))
|
||||
'highlight': this.addresses.length && ((vout.scriptpubkey_type !== 'p2pk' && addresses.includes(vout.scriptpubkey_address)) || this.addresses.includes(vout.scriptpubkey.slice(2, -2)))
|
||||
}">
|
||||
<td class="address-cell">
|
||||
<a class="address" *ngIf="vout.scriptpubkey_address; else pubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
|
||||
@ -353,7 +353,7 @@
|
||||
<ng-container *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
|
||||
<app-confirmations [chainTip]="latestBlock?.height" [height]="tx?.status?.block_height" buttonClass="mt-2"></app-confirmations>
|
||||
</ng-container>
|
||||
<button *ngIf="address === ''; else viewingAddress" type="button" class="btn btn-sm btn-primary mt-2 ml-2" (click)="switchCurrency()">
|
||||
<button *ngIf="addresses.length === 0; else viewingAddress" type="button" class="btn btn-sm btn-primary mt-2 ml-2" (click)="switchCurrency()">
|
||||
<ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && haveBlindedOutputValues(tx)" [ngIfElse]="defaultAmount" i18n="shared.confidential">Confidential</ng-template>
|
||||
<ng-template #defaultAmount>
|
||||
<app-amount [blockConversion]="tx.price" [satoshis]="getTotalTxOutput(tx)"></app-amount>
|
||||
|
||||
@ -34,7 +34,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
|
||||
@Input() paginated = false;
|
||||
@Input() inputIndex: number;
|
||||
@Input() outputIndex: number;
|
||||
@Input() address: string = '';
|
||||
@Input() addresses: string[] = [];
|
||||
@Input() rowLimit = 12;
|
||||
@Input() blockTime: number = 0; // Used for price calculation if all the transactions are in the same block
|
||||
|
||||
@ -181,7 +181,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
if (changes.transactions || changes.address) {
|
||||
if (changes.transactions || changes.addresses) {
|
||||
if (!this.transactions || !this.transactions.length) {
|
||||
return;
|
||||
}
|
||||
@ -197,46 +197,52 @@ export class TransactionsListComponent implements OnInit, OnChanges {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.address) {
|
||||
const isP2PKUncompressed = this.address.length === 130;
|
||||
const isP2PKCompressed = this.address.length === 66;
|
||||
if (isP2PKCompressed) {
|
||||
const addressIn = tx.vout
|
||||
.filter((v: Vout) => v.scriptpubkey === '21' + this.address + 'ac')
|
||||
.map((v: Vout) => v.value || 0)
|
||||
.reduce((a: number, b: number) => a + b, 0);
|
||||
|
||||
const addressOut = tx.vin
|
||||
.filter((v: Vin) => v.prevout && v.prevout.scriptpubkey === '21' + this.address + 'ac')
|
||||
.map((v: Vin) => v.prevout.value || 0)
|
||||
.reduce((a: number, b: number) => a + b, 0);
|
||||
|
||||
tx['addressValue'] = addressIn - addressOut;
|
||||
} else if (isP2PKUncompressed) {
|
||||
const addressIn = tx.vout
|
||||
.filter((v: Vout) => v.scriptpubkey === '41' + this.address + 'ac')
|
||||
.map((v: Vout) => v.value || 0)
|
||||
.reduce((a: number, b: number) => a + b, 0);
|
||||
|
||||
const addressOut = tx.vin
|
||||
.filter((v: Vin) => v.prevout && v.prevout.scriptpubkey === '41' + this.address + 'ac')
|
||||
.map((v: Vin) => v.prevout.value || 0)
|
||||
.reduce((a: number, b: number) => a + b, 0);
|
||||
|
||||
tx['addressValue'] = addressIn - addressOut;
|
||||
} else {
|
||||
const addressIn = tx.vout
|
||||
.filter((v: Vout) => v.scriptpubkey_address === this.address)
|
||||
.map((v: Vout) => v.value || 0)
|
||||
.reduce((a: number, b: number) => a + b, 0);
|
||||
|
||||
const addressOut = tx.vin
|
||||
.filter((v: Vin) => v.prevout && v.prevout.scriptpubkey_address === this.address)
|
||||
.map((v: Vin) => v.prevout.value || 0)
|
||||
.reduce((a: number, b: number) => a + b, 0);
|
||||
|
||||
tx['addressValue'] = addressIn - addressOut;
|
||||
}
|
||||
if (this.addresses?.length) {
|
||||
const addressIn = tx.vout.map(v => {
|
||||
for (const address of this.addresses) {
|
||||
switch (address.length) {
|
||||
case 130: {
|
||||
if (v.scriptpubkey === '21' + address + 'ac') {
|
||||
return v.value;
|
||||
}
|
||||
} break;
|
||||
case 66: {
|
||||
if (v.scriptpubkey === '41' + address + 'ac') {
|
||||
return v.value;
|
||||
}
|
||||
} break;
|
||||
default:{
|
||||
if (v.scriptpubkey_address === address) {
|
||||
return v.value;
|
||||
}
|
||||
} break;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}).reduce((acc, v) => acc + v, 0);
|
||||
const addressOut = tx.vin.map(v => {
|
||||
for (const address of this.addresses) {
|
||||
switch (address.length) {
|
||||
case 130: {
|
||||
if (v.prevout?.scriptpubkey === '21' + address + 'ac') {
|
||||
return v.prevout?.value;
|
||||
}
|
||||
} break;
|
||||
case 66: {
|
||||
if (v.prevout?.scriptpubkey === '41' + address + 'ac') {
|
||||
return v.prevout?.value;
|
||||
}
|
||||
} break;
|
||||
default:{
|
||||
if (v.prevout?.scriptpubkey_address === address) {
|
||||
return v.prevout?.value;
|
||||
}
|
||||
} break;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}).reduce((acc, v) => acc + v, 0);
|
||||
tx['addressValue'] = addressIn - addressOut;
|
||||
}
|
||||
|
||||
if (!this.blockTime && tx.status.block_time && this.currency) {
|
||||
|
||||
183
frontend/src/app/components/wallet/wallet.component.html
Normal file
183
frontend/src/app/components/wallet/wallet.component.html
Normal 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
117
frontend/src/app/components/wallet/wallet.component.scss
Normal 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
360
frontend/src/app/components/wallet/wallet.component.ts
Normal 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();
|
||||
}
|
||||
}
|
||||
@ -35,9 +35,11 @@ import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-ch
|
||||
import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
|
||||
import { BlockHealthGraphComponent } from '../components/block-health-graph/block-health-graph.component';
|
||||
import { AddressComponent } from '../components/address/address.component';
|
||||
import { WalletComponent } from '../components/wallet/wallet.component';
|
||||
import { AddressGraphComponent } from '../components/address-graph/address-graph.component';
|
||||
import { UtxoGraphComponent } from '../components/utxo-graph/utxo-graph.component';
|
||||
import { ActiveAccelerationBox } from '../components/acceleration/active-acceleration-box/active-acceleration-box.component';
|
||||
import { AddressesTreemap } from '../components/addresses-treemap/addresses-treemap.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@NgModule({
|
||||
@ -46,6 +48,7 @@ import { CommonModule } from '@angular/common';
|
||||
CustomDashboardComponent,
|
||||
MempoolBlockComponent,
|
||||
AddressComponent,
|
||||
WalletComponent,
|
||||
|
||||
MiningDashboardComponent,
|
||||
AcceleratorDashboardComponent,
|
||||
@ -79,6 +82,7 @@ import { CommonModule } from '@angular/common';
|
||||
AddressGraphComponent,
|
||||
UtxoGraphComponent,
|
||||
ActiveAccelerationBox,
|
||||
AddressesTreemap,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
@ -22,6 +22,7 @@ import { CustomDashboardComponent } from '../components/custom-dashboard/custom-
|
||||
import { AccelerationFeesGraphComponent } from '../components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component';
|
||||
import { AccelerationsListComponent } from '../components/acceleration/accelerations-list/accelerations-list.component';
|
||||
import { AddressComponent } from '../components/address/address.component';
|
||||
import { WalletComponent } from '../components/wallet/wallet.component';
|
||||
|
||||
const browserWindow = window || {};
|
||||
// @ts-ignore
|
||||
@ -88,6 +89,15 @@ const routes: Routes = [
|
||||
networkSpecific: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'wallet',
|
||||
children: [],
|
||||
component: WalletComponent,
|
||||
data: {
|
||||
ogImage: true,
|
||||
networkSpecific: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'graphs',
|
||||
data: { networks: ['bitcoin', 'liquid'] },
|
||||
|
||||
@ -142,6 +142,14 @@ export class ElectrsApiService {
|
||||
return this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + '/api/address/' + address + '/txs', { params });
|
||||
}
|
||||
|
||||
getAddressesTransactions$(addresses: string[], txid?: string): Observable<Transaction[]> {
|
||||
let params = new HttpParams();
|
||||
if (txid) {
|
||||
params = params.append('after_txid', txid);
|
||||
}
|
||||
return this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + `/api/addresses/txs?addresses=${addresses.join(',')}`, { params });
|
||||
}
|
||||
|
||||
getAddressSummary$(address: string, txid?: string): Observable<AddressTxSummary[]> {
|
||||
let params = new HttpParams();
|
||||
if (txid) {
|
||||
@ -150,6 +158,14 @@ export class ElectrsApiService {
|
||||
return this.httpClient.get<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + '/api/address/' + address + '/txs/summary', { params });
|
||||
}
|
||||
|
||||
getAddressesSummary$(addresses: string[], txid?: string): Observable<AddressTxSummary[]> {
|
||||
let params = new HttpParams();
|
||||
if (txid) {
|
||||
params = params.append('after_txid', txid);
|
||||
}
|
||||
return this.httpClient.get<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + `/api/addresses/txs/summary?addresses=${addresses.join(',')}`, { params });
|
||||
}
|
||||
|
||||
getScriptHashTransactions$(script: string, txid?: string): Observable<Transaction[]> {
|
||||
let params = new HttpParams();
|
||||
if (txid) {
|
||||
@ -160,6 +176,16 @@ export class ElectrsApiService {
|
||||
);
|
||||
}
|
||||
|
||||
getScriptHashesTransactions$(scripts: string[], txid?: string): Observable<Transaction[]> {
|
||||
let params = new HttpParams();
|
||||
if (txid) {
|
||||
params = params.append('after_txid', txid);
|
||||
}
|
||||
return from(Promise.all(scripts.map(script => calcScriptHash$(script)))).pipe(
|
||||
switchMap(scriptHashes => this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + `/api/scripthashes/txs?scripthashes=${scriptHashes.join(',')}`, { params })),
|
||||
);
|
||||
}
|
||||
|
||||
getScriptHashSummary$(script: string, txid?: string): Observable<AddressTxSummary[]> {
|
||||
let params = new HttpParams();
|
||||
if (txid) {
|
||||
@ -180,6 +206,16 @@ export class ElectrsApiService {
|
||||
);
|
||||
}
|
||||
|
||||
getScriptHashesSummary$(scripts: string[], txid?: string): Observable<AddressTxSummary[]> {
|
||||
let params = new HttpParams();
|
||||
if (txid) {
|
||||
params = params.append('after_txid', txid);
|
||||
}
|
||||
return from(Promise.all(scripts.map(script => calcScriptHash$(script)))).pipe(
|
||||
switchMap(scriptHashes => this.httpClient.get<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + `/api/scripthashes/txs/summary?scripthashes=${scriptHashes.join(',')}`, { params })),
|
||||
);
|
||||
}
|
||||
|
||||
getAsset$(assetId: string): Observable<Asset> {
|
||||
return this.httpClient.get<Asset>(this.apiBaseUrl + this.apiBasePath + '/api/asset/' + assetId);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user