mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-28 09:14:26 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into bugfix/pie-chart-click-fix

Browse Source
This commit is contained in:
softsimon 2022-03-07 20:35:49 +01:00 committed by GitHub
commit 81a82b619e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 181 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
backend/src/api/websocket-handler.ts
View File

@ -332,11 +332,18 @@ class WebsocketHandler {
} }
if (client['track-tx']) { if (client['track-tx']) {
const utxoSpent = newTransactions.some((tx) => { const outspends: object = {};
return tx.vin.some((vin) => vin.txid === client['track-tx']); newTransactions.forEach((tx) => tx.vin.forEach((vin, i) => {
}); if (vin.txid === client['track-tx']) {
if (utxoSpent) { outspends[vin.vout] = {
response['utxoSpent'] = true; vin: i,
txid: tx.txid,
};
}
}));
if (Object.keys(outspends).length) {
response['utxoSpent'] = outspends;
} }
if (rbfTransactions[client['track-tx']]) { if (rbfTransactions[client['track-tx']]) {
@ -414,7 +421,6 @@ class WebsocketHandler {
} }
if (client['track-tx'] && txIds.indexOf(client['track-tx']) > -1) { if (client['track-tx'] && txIds.indexOf(client['track-tx']) > -1) {
client['track-tx'] = null;
response['txConfirmed'] = true; response['txConfirmed'] = true;
} }

4
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
View File

@ -25,13 +25,13 @@
</form> </form>
</div> </div>
<div *ngIf="(hashrateObservable$ | async) && !tableOnly" [class]="!widget ? 'chart' : 'chart-widget'" <div *ngIf="!tableOnly" [class]="!widget ? 'chart' : 'chart-widget'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div> echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading"> <div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>
<div [class]="!widget ? 'mt-3 p-2' : 'ml-4 mr-4 mt-1'" *ngIf="tableOnly"> <div [class]="!widget ? 'mt-3 p-2' : 'ml-4 mr-4 mt-1'" *ngIf="tableOnly" style="min-height: 295px">
<table class="table table-borderless table-sm text-left" [class]="widget ? 'compact' : ''"> <table class="table table-borderless table-sm text-left" [class]="widget ? 'compact' : ''">
<thead> <thead>
<tr> <tr>

2
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View File

@ -15,7 +15,7 @@ import { selectPowerOfTen } from 'src/app/bitcoin.utils';
styles: [` styles: [`
.loadingGraphs { .loadingGraphs {
position: absolute; position: absolute;
top: 38%; top: 50%;
left: calc(50% - 15px); left: calc(50% - 15px);
z-index: 100; z-index: 100;
} }

2
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
View File

@ -25,7 +25,7 @@
</form> </form>
</div> </div>
<div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'" <div [class]="!widget ? 'chart' : 'chart-widget'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div> echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading"> <div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>

30
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
View File

@ -2,11 +2,12 @@
<div class="row row-cols-1 row-cols-md-2"> <div class="row row-cols-1 row-cols-md-2">
<!-- Temporary stuff here - Will be moved to a component once we have more useful data to show -->
<div class="col"> <div class="col">
<div class="main-title">Reward stats</div> <div class="main-title">Reward stats</div>
<div class="card" style="height: 123px"> <div class="card" style="height: 123px">
<div class="card-body more-padding"> <div class="card-body more-padding">
<div class="difficulty-adjustment-container" *ngIf="$rewardStats | async as rewardStats"> <div class="fee-estimation-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<div class="item"> <div class="item">
<h5 class="card-title" i18n="">Miners Reward</h5> <h5 class="card-title" i18n="">Miners Reward</h5>
<div class="card-text"> <div class="card-text">
@ -34,6 +35,31 @@
</div> </div>
</div> </div>
</div> </div>
<ng-template #loadingReward>
<div class="fee-estimation-container">
<div class="item">
<h5 class="card-title" i18n="">Miners Reward</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="">Reward Per Tx</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="">Average Fee</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
</div>
</ng-template>
<!-- difficulty adjustment --> <!-- difficulty adjustment -->
<div class="col"> <div class="col">
@ -96,4 +122,4 @@
</div> </div>
</div> </div>
</div> </div>

104
frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
View File

@ -44,7 +44,7 @@
.fade-border { .fade-border {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 80%, transparent 100%) -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 80%, transparent 100%)
} }
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: #ffffff91;
@ -56,39 +56,22 @@
padding-bottom: 3px; padding-bottom: 3px;
} }
.general-stats { .fee-estimation-container {
min-height: 56px; display: flex;
display: block; justify-content: space-between;
@media (min-width: 485px) { @media (min-width: 376px) {
display: flex;
flex-direction: row; flex-direction: row;
} }
h5 {
margin-bottom: 10px;
}
.item { .item {
width: 50%; max-width: 150px;
margin: 0px auto 10px; margin: 0;
display: inline-block; width: -webkit-fill-available;
@media (min-width: 485px) { @media (min-width: 376px) {
margin: 0px auto 10px; margin: 0 auto 0px;
} }
@media (min-width: 785px) { &:first-child{
margin: 0px auto 0px; display: none;
}
&:last-child {
margin: 0px auto 0px;
}
&:nth-child(2) {
order: 2;
@media (min-width: 485px) { @media (min-width: 485px) {
order: 3;
}
}
&:nth-child(3) {
order: 3;
@media (min-width: 485px) {
order: 2;
display: block; display: block;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -98,48 +81,37 @@
display: block; display: block;
} }
} }
.card-title { &:last-child {
font-size: 1rem; margin-bottom: 0;
color: #4a68b9;
} }
.card-text { .card-text span {
font-size: 18px; color: #ffffff66;
span { font-size: 12px;
color: #ffffff66; top: 0px;
font-size: 12px; }
} .fee-text{
border-bottom: 1px solid #ffffff1c;
width: fit-content;
margin: auto;
line-height: 1.45;
padding: 0px 2px;
}
.fiat {
display: block;
font-size: 14px !important;
} }
} }
} }
.difficulty-adjustment-container { .skeleton-loader {
display: flex; width: 100%;
flex-direction: row; display: block;
justify-content: space-around; &:first-child {
height: 76px; max-width: 90px;
.shared-block { margin: 15px auto 3px;
color: #ffffff66;
font-size: 12px;
} }
.item { &:last-child {
padding: 0 5px; margin: 10px auto 3px;
width: 100%; max-width: 55px;
&:nth-child(1) {
display: none;
@media (min-width: 485px) {
display: table-cell;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: table-cell;
}
}
}
.card-text {
font-size: 22px;
margin-top: -9px;
position: relative;
} }
} }

62
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View File

@ -1,23 +1,25 @@
<div [class]="widget === false ? 'container-xl' : ''"> <div [class]="widget === false ? 'container-xl' : ''">
<div class="pool-distribution" *ngIf="widget && (miningStatsObservable$ | async) as miningStats"> <div *ngIf="widget">
<div class="item"> <div class="pool-distribution" *ngIf="(miningStatsObservable$ | async) as miningStats; else loadingReward">
<h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</h5> <div class="item">
<p class="card-text"> <h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</h5>
{{ miningStats['minersLuck'] }}% <p class="card-text">
</p> {{ miningStats['minersLuck'] }}%
</div> </p>
<div class="item"> </div>
<h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5> <div class="item">
<p class="card-text"> <h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5>
{{ miningStats.blockCount }} <p class="card-text">
</p> {{ miningStats.blockCount }}
</div> </p>
<div class="item"> </div>
<h5 class="card-title" i18n="mining.miners-count">Pools count (1w)</h5> <div class="item">
<p class="card-text"> <h5 class="card-title" i18n="mining.miners-count">Pools count (1w)</h5>
{{ miningStats.pools.length }} <p class="card-text">
</p> {{ miningStats.pools.length }}
</p>
</div>
</div> </div>
</div> </div>
@ -96,3 +98,27 @@
</table> </table>
</div> </div>
<ng-template #loadingReward>
<div class="pool-distribution">
<div class="item">
<h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.miners-count">Pools count (1w)</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
</div>
</ng-template>

9
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

@ -102,4 +102,11 @@
} }
} }
} }
} }
.skeleton-loader {
width: 100%;
display: block;
max-width: 80px;
margin: 15px auto 3px;
}

8
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@ -186,16 +186,16 @@
<app-amount [satoshis]="vout.value"></app-amount> <app-amount [satoshis]="vout.value"></app-amount>
</ng-template> </ng-template>
</td> </td>
<td class="arrow-td" *ngIf="{ value: (outspends$ | async) } as outspends"> <td class="arrow-td">
<span *ngIf="!outspends.value || !outspends.value[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="grey"> <span *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="grey">
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
</span> </span>
<ng-template #outspend> <ng-template #outspend>
<span *ngIf="!outspends.value[i][vindex] || !outspends.value[i][vindex].spent; else spent" class="green"> <span *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="green">
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
</span> </span>
<ng-template #spent> <ng-template #spent>
<a *ngIf="outspends.value[i][vindex].txid else outputNoTxId" [routerLink]="['/tx/' | relativeUrl, outspends.value[i][vindex].txid]" class="red"> <a *ngIf="outspends[i][vindex].txid else outputNoTxId" [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]" class="red">
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
</a> </a>
<ng-template #outputNoTxId> <ng-template #outputNoTxId>

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

@ -1,11 +1,11 @@
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
import { Observable, forkJoin, ReplaySubject, BehaviorSubject, merge } from 'rxjs'; import { Observable, forkJoin, ReplaySubject, BehaviorSubject, merge, of, Subject, Subscription } from 'rxjs';
import { Outspend, Transaction } from '../../interfaces/electrs.interface'; import { Outspend, Transaction } from '../../interfaces/electrs.interface';
import { ElectrsApiService } from '../../services/electrs-api.service'; import { ElectrsApiService } from '../../services/electrs-api.service';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { AssetsService } from 'src/app/services/assets.service'; import { AssetsService } from 'src/app/services/assets.service';
import { map, share, switchMap } from 'rxjs/operators'; import { map, share, switchMap, tap } from 'rxjs/operators';
import { BlockExtended } from 'src/app/interfaces/node-api.interface'; import { BlockExtended } from 'src/app/interfaces/node-api.interface';
@Component({ @Component({
@ -27,41 +27,18 @@ export class TransactionsListComponent implements OnInit, OnChanges {
@Output() loadMore = new EventEmitter(); @Output() loadMore = new EventEmitter();
latestBlock$: Observable<BlockExtended>; latestBlock$: Observable<BlockExtended>;
outspends$: Observable<Outspend[]>; outspendsSubscription: Subscription;
refreshOutspends$: ReplaySubject<object> = new ReplaySubject(); refreshOutspends$: ReplaySubject<object> = new ReplaySubject();
showDetails$ = new BehaviorSubject<boolean>(false); showDetails$ = new BehaviorSubject<boolean>(false);
_outspends: Outspend[] = []; outspends: Outspend[][] = [];
assetsMinimal: any; assetsMinimal: any;
constructor( constructor(
public stateService: StateService, public stateService: StateService,
private electrsApiService: ElectrsApiService, private electrsApiService: ElectrsApiService,
private assetsService: AssetsService, private assetsService: AssetsService,
) { private ref: ChangeDetectorRef,
this.outspends$ = merge( ) { }
this.refreshOutspends$,
this.stateService.utxoSpent$
.pipe(
map(() => {
this._outspends = [];
return { 0: this.electrsApiService.getOutspends$(this.transactions[0].txid) };
}),
)
).pipe(
switchMap((observableObject) => forkJoin(observableObject)),
map((outspends: any) => {
const newOutspends = [];
for (const i in outspends) {
if (outspends.hasOwnProperty(i)) {
newOutspends.push(outspends[i]);
}
}
this._outspends = this._outspends.concat(newOutspends);
return this._outspends;
}),
share(),
);
}
ngOnInit() { ngOnInit() {
this.latestBlock$ = this.stateService.blocks$.pipe(map(([block]) => block)); this.latestBlock$ = this.stateService.blocks$.pipe(map(([block]) => block));
@ -72,6 +49,34 @@ export class TransactionsListComponent implements OnInit, OnChanges {
this.assetsMinimal = assets; this.assetsMinimal = assets;
}); });
} }
this.outspendsSubscription = merge(
this.refreshOutspends$
.pipe(
switchMap((observableObject) => forkJoin(observableObject)),
map((outspends: any) => {
const newOutspends: Outspend[] = [];
for (const i in outspends) {
if (outspends.hasOwnProperty(i)) {
newOutspends.push(outspends[i]);
}
}
this.outspends = this.outspends.concat(newOutspends);
}),
),
this.stateService.utxoSpent$
.pipe(
map((utxoSpent) => {
for (const i in utxoSpent) {
this.outspends[0][i] = {
spent: true,
txid: utxoSpent[i].txid,
vin: utxoSpent[i].vin,
};
}
}),
)
).subscribe(() => this.ref.markForCheck());
} }
ngOnChanges() { ngOnChanges() {
@ -90,7 +95,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
this.transactions.forEach((tx, i) => { this.transactions.forEach((tx, i) => {
tx['@voutLimit'] = true; tx['@voutLimit'] = true;
tx['@vinLimit'] = true; tx['@vinLimit'] = true;
if (this._outspends[i]) { if (this.outspends[i]) {
return; return;
} }
observableObject[i] = this.electrsApiService.getOutspends$(tx.txid); observableObject[i] = this.electrsApiService.getOutspends$(tx.txid);
@ -149,4 +154,8 @@ export class TransactionsListComponent implements OnInit, OnChanges {
this.showDetails$.next(true); this.showDetails$.next(true);
} }
} }
ngOnDestroy() {
this.outspendsSubscription.unsubscribe();
}
} }

2
frontend/src/app/interfaces/websocket.interface.ts
View File

@ -16,7 +16,7 @@ export interface WebsocketResponse {
data?: string[]; data?: string[];
tx?: Transaction; tx?: Transaction;
rbfTransaction?: Transaction; rbfTransaction?: Transaction;
utxoSpent?: boolean; utxoSpent?: object;
transactions?: TransactionStripped[]; transactions?: TransactionStripped[];
loadingIndicators?: ILoadingIndicators; loadingIndicators?: ILoadingIndicators;
backendInfo?: IBackendInfo; backendInfo?: IBackendInfo;

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

@ -81,7 +81,7 @@ export class StateService {
mempoolInfo$ = new ReplaySubject<MempoolInfo>(1); mempoolInfo$ = new ReplaySubject<MempoolInfo>(1);
mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1); mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
txReplaced$ = new Subject<Transaction>(); txReplaced$ = new Subject<Transaction>();
utxoSpent$ = new Subject<null>(); utxoSpent$ = new Subject<object>();
mempoolTransactions$ = new Subject<Transaction>(); mempoolTransactions$ = new Subject<Transaction>();
blockTransactions$ = new Subject<Transaction>(); blockTransactions$ = new Subject<Transaction>();
isLoadingWebSocket$ = new ReplaySubject<boolean>(1); isLoadingWebSocket$ = new ReplaySubject<boolean>(1);

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

@ -252,7 +252,7 @@ export class WebsocketService {
} }
if (response.utxoSpent) { if (response.utxoSpent) {
this.stateService.utxoSpent$.next(); this.stateService.utxoSpent$.next(response.utxoSpent);
} }
if (response.backendInfo) { if (response.backendInfo) {