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

Refactor accelerator dashboard

Browse Source
This commit is contained in:
Mononaut 2023-12-07 08:26:32 +00:00
parent e34ee3a34d
commit 8599876b26
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
22 changed files with 373 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/app/components/acceleration-stats/acceleration-stats.component.ts
View File

@ -1,64 +0,0 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { ApiService } from '../../services/api.service';
@Component({
selector: 'app-acceleration-stats',
templateUrl: './acceleration-stats.component.html',
styleUrls: ['./acceleration-stats.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AccelerationStatsComponent implements OnInit {
@Input() timespan: 'now' | '24h' | '1w' = '24h';
public accelerationStats$: Observable<any>;
constructor(
private apiService: ApiService,
) { }
ngOnInit(): void {
if (this.timespan === 'now') {
this.accelerationStats$ = this.apiService.getAccelerations$().pipe(
switchMap(accelerations => {
let totalAccelerations = 0;
let totalFeeDelta = 0;
let totalVsize = 0;
for (const acceleration of accelerations) {
totalAccelerations++;
totalFeeDelta += acceleration.feeDelta || 0;
totalVsize += acceleration.effectiveVsize || 0;
}
return of({
count: totalAccelerations,
totalFeeDelta,
totalVsize,
});
})
);
} else {
this.accelerationStats$ = this.apiService.getAccelerationHistory$(this.timespan).pipe(
switchMap(accelerations => {
let totalFeeDelta = 0;
let totalMined = 0;
let totalCanceled = 0;
for (const acceleration of accelerations) {
if (acceleration.status === 'completed') {
totalMined++;
totalFeeDelta += acceleration.feeDelta || 0;
} else if (acceleration.status === 'failed') {
totalCanceled++;
}
}
return of({
count: totalMined,
totalFeeDelta,
successRate: (totalMined + totalCanceled > 0) ? ((totalMined / (totalMined + totalCanceled)) * 100) : 0.0,
});
})
);
}
}
}

12
frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.html → frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html
View File

@ -30,15 +30,15 @@
<div *ngIf="widget">
<div class="acceleration-fees">
<div class="item" *ngIf="(hrStatsObservable$ | async) as stats; else loadingHrStats">
<h5 class="card-title" i18n="mining.avg-fee-delta-24h">Avg Fee Delta (24h)</h5>
<h5 class="card-title" i18n="mining.avg-oob-fees-24h">Avg Out-of-band Fees (24h)</h5>
<p class="card-text">
{{ stats.avgFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
<app-btc [satoshis]="stats.avgFeesPaid"></app-btc>
</p>
</div>
<div class="item" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
<h5 class="card-title" i18n="mining.avg-fee-delta-1w">Avg Fee Delta (1w)</h5>
<h5 class="card-title" i18n="mining.avg-oob-fees-1w">Avg Out-of-band Fees (1w)</h5>
<p class="card-text">
{{ stats.avgFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
<app-btc [satoshis]="stats.avgFeesPaid"></app-btc>
</p>
</div>
</div>
@ -55,7 +55,7 @@
<ng-template #loadingHrStats>
<div class="item">
<h5 class="card-title" i18n="mining.avg-fee-delta-24h">Avg Fee Delta (24h)</h5>
<h5 class="card-title" i18n="mining.avg-oob-fees-24h">Avg Out-of-band Fees (24h)</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
@ -63,7 +63,7 @@
</ng-template>
<ng-template #loadingStats>
<div class="item">
<h5 class="card-title" i18n="mining.avg-fee-delta-1w">Avg Fee Delta (1w)</h5>
<h5 class="card-title" i18n="mining.avg-oob-fees-1w">Avg Out-of-band Fees (1w)</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>

0
frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.scss → frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
View File

35
frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.ts → frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
View File

@ -2,14 +2,15 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, L
import { EChartsOption, graphic } from 'echarts';
import { Observable, combineLatest } from 'rxjs';
import { map, startWith, switchMap, tap } from 'rxjs/operators';
import { ApiService } from '../../services/api.service';
import { SeoService } from '../../services/seo.service';
import { ApiService } from '../../../services/api.service';
import { SeoService } from '../../../services/seo.service';
import { formatNumber } from '@angular/common';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { download, formatterXAxis } from '../../shared/graphs.utils';
import { StorageService } from '../../services/storage.service';
import { MiningService } from '../../services/mining.service';
import { download, formatterXAxis } from '../../../shared/graphs.utils';
import { StorageService } from '../../../services/storage.service';
import { MiningService } from '../../../services/mining.service';
import { ActivatedRoute } from '@angular/router';
import { Acceleration } from '../../../interfaces/node-api.interface';
@Component({
selector: 'app-acceleration-fees-graph',
@ -29,6 +30,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
@Input() widget: boolean = false;
@Input() right: number | string = 45;
@Input() left: number | string = 75;
@Input() accelerations$: Observable<Acceleration[]>;
miningWindowPreference: string;
radioGroupForm: UntypedFormGroup;
@ -69,16 +71,16 @@ export class AccelerationFeesGraphComponent implements OnInit {
this.isLoading = true;
this.timespan = this.miningWindowPreference;
this.hrStatsObservable$ = this.apiService.getAccelerationHistory$('24h').pipe(
this.hrStatsObservable$ = (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: '24h' })).pipe(
map((accelerations) => {
return {
avgFeeDelta: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length
avgFeesPaid: accelerations.filter(acc => acc.status === 'completed' && acc.lastUpdated < (Date.now() - (24 * 60 * 60 * 1000))).reduce((total, acc) => total + acc.feePaid, 0) / accelerations.length
};
})
);
this.statsObservable$ = combineLatest([
this.apiService.getAccelerationHistory$(this.miningWindowPreference),
(this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })),
this.apiService.getHistoricalBlockFees$(this.miningWindowPreference),
]).pipe(
tap(([accelerations, blockFeesResponse]) => {
@ -87,7 +89,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
}),
map(([accelerations, blockFeesResponse]) => {
return {
avgFeeDelta: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length
avgFeesPaid: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feePaid, 0) / accelerations.length
};
}),
);
@ -107,7 +109,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
this.isLoading = true;
this.storageService.setValue('miningWindowPreference', timespan);
this.timespan = timespan;
return this.apiService.getAccelerationHistory$();
return this.apiService.getAccelerationHistory$({});
})
),
this.radioGroupForm.get('dateSpan').valueChanges.pipe(
@ -147,15 +149,18 @@ export class AccelerationFeesGraphComponent implements OnInit {
last = val.avgHeight;
}
let totalFeeDelta = 0;
let totalFeePaid = 0;
let totalCount = 0;
while (last <= val.avgHeight) {
totalFeeDelta += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feeDelta, 0);
totalFeePaid += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feePaid, 0);
totalCount += (blockAccelerations[last] || []).length;
last++;
}
data.push({
...val,
feeDelta: totalFeeDelta,
feePaid: totalFeePaid,
accelerations: totalCount,
});
}
@ -236,7 +241,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
icon: 'roundRect',
},
{
name: 'Total fee delta',
name: 'Out-of-band fees paid',
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
@ -251,8 +256,8 @@ export class AccelerationFeesGraphComponent implements OnInit {
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
if (val >= 1_000_000) {
return `${(val / 100_000_000).toPrecision(5)} BTC`;
if (val >= 100_000) {
return `${(val / 100_000_000).toFixed(3)} BTC`;
} else {
return `${val} sats`;
}
@ -303,8 +308,8 @@ export class AccelerationFeesGraphComponent implements OnInit {
legendHoverLink: false,
zlevel: 1,
yAxisIndex: 0,
name: 'Total fee delta',
data: data.map(block => [block.timestamp * 1000, block.feeDelta, block.avgHeight]),
name: 'Out-of-band fees paid',
data: data.map(block => [block.timestamp * 1000, block.feePaid, block.avgHeight]),
type: 'line',
smooth: 0.25,
symbol: 'none',

53
frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html Normal file
View File

@ -0,0 +1,53 @@
<div class="stats-wrapper" *ngIf="accelerationStats$ | async as stats; else loading">
<div class="stats-container">
<div class="item">
<h5 class="card-title" i18n="address.transactions">Transactions</h5>
<div class="card-text">
<div>{{ stats.count }}</div>
<div class="symbol" i18n="accelerator.total-accelerated">accelerated</div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="accelerator.out-of-band-fees">Out-of-band Fees</h5>
<div class="card-text">
<div>{{ stats.totalFeesPaid / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
<span class="fiat">
<app-fiat [value]="stats.totalFeesPaid"></app-fiat>
</span>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="accelerator.success-rate">Success rate</h5>
<div class="card-text">
<div>{{ stats.successRate.toFixed(2) }} %</div>
<div class="symbol" i18n="accelerator.mined-next-block">mined</div>
</div>
</div>
</div>
</div>
<ng-template #loading>
<div class="stats-container loading-container">
<div class="item">
<h5 class="card-title" i18n="address.transactions">Transactions</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="accelerator.out-of-band-fees">Out-of-band Fees</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="accelerator.success-rate">Success rate</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
</div>
</ng-template>

0
frontend/src/app/components/acceleration-stats/acceleration-stats.component.scss → frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
View File

46
frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts Normal file
View File

@ -0,0 +1,46 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { ApiService } from '../../../services/api.service';
import { StateService } from '../../../services/state.service';
import { Acceleration } from '../../../interfaces/node-api.interface';
@Component({
selector: 'app-acceleration-stats',
templateUrl: './acceleration-stats.component.html',
styleUrls: ['./acceleration-stats.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AccelerationStatsComponent implements OnInit {
@Input() timespan: '24h' | '1w' = '24h';
@Input() accelerations$: Observable<Acceleration[]>;
public accelerationStats$: Observable<any>;
constructor(
private apiService: ApiService,
private stateService: StateService,
) { }
ngOnInit(): void {
this.accelerationStats$ = this.accelerations$.pipe(
switchMap(accelerations => {
let totalFeesPaid = 0;
let totalSucceeded = 0;
let totalCanceled = 0;
for (const acceleration of accelerations) {
if (acceleration.status === 'completed') {
totalSucceeded++;
totalFeesPaid += acceleration.feePaid || 0;
} else if (acceleration.status === 'failed') {
totalCanceled++;
}
}
return of({
count: totalSucceeded,
totalFeesPaid,
successRate: (totalSucceeded + totalCanceled > 0) ? ((totalSucceeded / (totalSucceeded + totalCanceled)) * 100) : 0.0,
});
})
);
}
}

13
frontend/src/app/components/accelerations-list/accelerations-list.component.html → frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
View File

@ -10,19 +10,22 @@
<table class="table table-borderless table-fixed">
<thead>
<th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
<th class="fee" i18n="transaction.fee|Transaction fee">Fee</th>
<th class="fee-delta text-right" i18n="accelerator.fee-delta">Fee delta</th>
<th class="fee text-right" i18n="transaction.fee|Transaction fee">Final Fee</th>
<th class="fee-delta text-right" i18n="accelerator.fee-delta">Max Bid</th>
<th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
</thead>
<tbody *ngIf="accelerations$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tbody *ngIf="accelerationList$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let acceleration of accelerations; let i= index;">
<td class="txid text-left">
<a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
<app-truncate [text]="acceleration.txid" [lastChars]="5"></app-truncate>
</a>
</td>
<td class="fee text-right">
{{ acceleration.feePaid | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
<td *ngIf="acceleration.feePaid" class="fee text-right">
{{ (acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
</td>
<td *ngIf="!acceleration.feePaid" class="fee text-right">
~
</td>
<td class="fee-delta text-right">
{{ acceleration.feeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>

0
frontend/src/app/components/accelerations-list/accelerations-list.component.scss → frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
View File

18
frontend/src/app/components/accelerations-list/accelerations-list.component.ts → frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
View File

@ -1,9 +1,9 @@
import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
import { Observable, catchError, of, switchMap } from 'rxjs';
import { Acceleration, BlockExtended } from '../../interfaces/node-api.interface';
import { ApiService } from '../../services/api.service';
import { StateService } from '../../services/state.service';
import { WebsocketService } from '../../services/websocket.service';
import { Observable, catchError, of, switchMap, tap } from 'rxjs';
import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
import { ApiService } from '../../../services/api.service';
import { StateService } from '../../../services/state.service';
import { WebsocketService } from '../../../services/websocket.service';
@Component({
selector: 'app-accelerations-list',
@ -13,8 +13,9 @@ import { WebsocketService } from '../../services/websocket.service';
})
export class AccelerationsListComponent implements OnInit {
@Input() widget: boolean = false;
@Input() accelerations$: Observable<Acceleration[]>;
accelerations$: Observable<Acceleration[]> = undefined;
accelerationList$: Observable<Acceleration[]> = undefined;
isLoading = true;
paginationMaxSize: number;
@ -39,7 +40,7 @@ export class AccelerationsListComponent implements OnInit {
this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
this.accelerations$ = this.apiService.getAccelerationHistory$().pipe(
this.accelerationList$ = (this.apiService.getAccelerationHistory$({ timeframe: '1m' }) || this.accelerations$).pipe(
switchMap(accelerations => {
if (this.widget) {
return of(accelerations.slice(-6).reverse());
@ -50,6 +51,9 @@ export class AccelerationsListComponent implements OnInit {
catchError((err) => {
this.isLoading = false;
return of([]);
}),
tap(() => {
this.isLoading = false;
})
);
}

10
frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.html → frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
View File

@ -4,7 +4,7 @@
<div class="row row-cols-1 row-cols-md-2">
<!-- 24h stats -->
<!-- pending stats -->
<div class="col">
<div class="main-title">
<span [attr.data-cy]="'pending-accelerations'" i18n="accelerator.pending-accelerations">Pending accelerations</span>
@ -12,7 +12,7 @@
<div class="card-wrapper">
<div class="card">
<div class="card-body more-padding">
<app-acceleration-stats timespan="now"></app-acceleration-stats>
<app-pending-stats></app-pending-stats>
</div>
</div>
</div>
@ -27,7 +27,7 @@
<div class="card-wrapper">
<div class="card">
<div class="card-body more-padding">
<app-acceleration-stats timespan="1w"></app-acceleration-stats>
<app-acceleration-stats timespan="1w" [accelerations$]="accelerations$"></app-acceleration-stats>
</div>
</div>
</div>
@ -37,7 +37,7 @@
<div class="col" style="margin-bottom: 1.47rem">
<div class="card graph-card">
<div class="card-body pl-2 pr-2">
<app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true></app-acceleration-fees-graph>
<app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true [accelerations$]="accelerations$"></app-acceleration-fees-graph>
<div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
</div>
</div>
@ -62,7 +62,7 @@
<span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
</a>
<app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true></app-accelerations-list>
<app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="accelerations$"></app-accelerations-list>
</div>
</div>
</div>

4
frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.scss → frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
View File

@ -120,6 +120,10 @@
text-align: left;
width: 30%;
@media (max-width: 875px) {
display: none;
}
.pool-name {
margin-left: 1em;
}

35
frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.ts → frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
View File

@ -1,10 +1,10 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { SeoService } from '../../services/seo.service';
import { WebsocketService } from '../../services/websocket.service';
import { Acceleration, BlockExtended } from '../../interfaces/node-api.interface';
import { StateService } from '../../services/state.service';
import { Observable, catchError, combineLatest, of, switchMap } from 'rxjs';
import { ApiService } from '../../services/api.service';
import { SeoService } from '../../../services/seo.service';
import { WebsocketService } from '../../../services/websocket.service';
import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
import { StateService } from '../../../services/state.service';
import { Observable, Subject, catchError, combineLatest, distinctUntilChanged, of, share, switchMap, tap } from 'rxjs';
import { ApiService } from '../../../services/api.service';
interface AccelerationBlock extends BlockExtended {
accelerationCount: number,
@ -18,7 +18,7 @@ interface AccelerationBlock extends BlockExtended {
})
export class AcceleratorDashboardComponent implements OnInit {
blocks$: Observable<AccelerationBlock[]>;
accelerations$: Observable<Acceleration[]>;
loadingBlocks: boolean = true;
constructor(
@ -33,7 +33,19 @@ export class AcceleratorDashboardComponent implements OnInit {
ngOnInit(): void {
this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
this.accelerations$ = this.stateService.chainTip$.pipe(
distinctUntilChanged(),
switchMap((chainTip) => {
return this.apiService.getAccelerationHistory$({ timeframe: '1w' });
}),
catchError((e) => {
return of([]);
}),
share(),
);
this.blocks$ = combineLatest([
this.accelerations$,
this.stateService.blocks$.pipe(
switchMap((blocks) => {
if (this.stateService.env.MINING_DASHBOARD === true) {
@ -44,16 +56,13 @@ export class AcceleratorDashboardComponent implements OnInit {
}
}
return of(blocks as AccelerationBlock[]);
})
),
this.apiService.getAccelerationHistory$('24h').pipe(
catchError((err) => {
}),
tap(() => {
this.loadingBlocks = false;
return of([]);
})
)
]).pipe(
switchMap(([blocks, accelerations]) => {
switchMap(([accelerations, blocks]) => {
const blockMap = {};
for (const block of blocks) {
blockMap[block.id] = block;

26
frontend/src/app/components/acceleration-stats/acceleration-stats.component.html → frontend/src/app/components/acceleration/pending-stats/pending-stats.component.html
View File

@ -8,22 +8,15 @@
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="accelerator.fee-delta">Fee delta</h5>
<h5 class="card-title" i18n="accelerator.average-max-bid">Avg Max Bid</h5>
<div class="card-text">
<div>{{ stats.totalFeeDelta / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
<div>{{ stats.avgFeeDelta / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
<span class="fiat">
<app-fiat [value]="stats.totalFeeDelta"></app-fiat>
<app-fiat [value]="stats.avgFeeDelta"></app-fiat>
</span>
</div>
</div>
<div class="item" *ngIf="timespan !== 'now'">
<h5 class="card-title" i18n="accelerator.success-rate">Success rate</h5>
<div class="card-text">
<div>{{ stats.successRate.toFixed(2) }} %</div>
<div class="symbol" i18n="accelerator.mined-next-block">mined in the next block</div>
</div>
</div>
<div class="item" *ngIf="timespan === 'now'">
<div class="item">
<h5 class="card-title" i18n="accelerator.total-vsize">Total vsize</h5>
<div class="card-text">
<div [innerHTML]="'&lrm;' + (stats.totalVsize * 4 | vbytes: 2)"></div>
@ -43,20 +36,13 @@
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="accelerator.fee-delta">Fee delta</h5>
<h5 class="card-title" i18n="accelerator.average-max-bid">Avg Max Bid</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item" *ngIf="timespan !== 'now'">
<h5 class="card-title" i18n="accelerator.success-rate">Success rate</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item" *ngIf="timespan === 'now'">
<div class="item">
<h5 class="card-title" i18n="accelerator.total-vsize">Total vsize</h5>
<div class="card-text">
<div class="skeleton-loader"></div>

88
frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss Normal file
View File

@ -0,0 +1,88 @@
.card-title {
color: #4a68b9;
font-size: 10px;
margin-bottom: 4px;
font-size: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-text {
font-size: 22px;
span {
font-size: 11px;
position: relative;
top: -2px;
display: inline-flex;
}
.green-color {
display: block;
}
}
.stats-container {
display: flex;
justify-content: space-between;
@media (min-width: 376px) {
flex-direction: row;
}
.item {
max-width: 150px;
margin: 0;
width: -webkit-fill-available;
@media (min-width: 376px) {
margin: 0 auto 0px;
}
&:first-child{
display: none;
@media (min-width: 485px) {
display: block;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: block;
}
}
&:last-child {
margin-bottom: 0;
}
.card-text span {
color: #ffffff66;
font-size: 12px;
top: 0px;
}
.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;
}
}
}
.loading-container{
min-height: 76px;
}
.card-text {
.skeleton-loader {
width: 100%;
display: block;
&:first-child {
max-width: 90px;
margin: 15px auto 3px;
}
&:last-child {
margin: 10px auto 3px;
max-width: 55px;
}
}
}

39
frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts Normal file
View File

@ -0,0 +1,39 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { ApiService } from '../../../services/api.service';
@Component({
selector: 'app-pending-stats',
templateUrl: './pending-stats.component.html',
styleUrls: ['./pending-stats.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PendingStatsComponent implements OnInit {
public accelerationStats$: Observable<any>;
constructor(
private apiService: ApiService,
) { }
ngOnInit(): void {
this.accelerationStats$ = this.apiService.getAccelerations$().pipe(
switchMap(accelerations => {
let totalAccelerations = 0;
let totalFeeDelta = 0;
let totalVsize = 0;
for (const acceleration of accelerations) {
totalAccelerations++;
totalFeeDelta += acceleration.feeDelta || 0;
totalVsize += acceleration.effectiveVsize || 0;
}
return of({
count: totalAccelerations,
totalFeeDelta,
avgFeeDelta: totalAccelerations ? totalFeeDelta / totalAccelerations : 0,
totalVsize,
});
})
);
}
}

4
frontend/src/app/graphs/graphs.module.ts
View File

@ -3,7 +3,7 @@ import { NgxEchartsModule } from 'ngx-echarts';
import { GraphsRoutingModule } from './graphs.routing.module';
import { SharedModule } from '../shared/shared.module';
import { AccelerationFeesGraphComponent } from '../components/acceleration-fees-graph/acceleration-fees-graph.component';
import { AccelerationFeesGraphComponent } from '../components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component';
import { BlockFeesGraphComponent } from '../components/block-fees-graph/block-fees-graph.component';
import { BlockRewardsGraphComponent } from '../components/block-rewards-graph/block-rewards-graph.component';
import { BlockFeeRatesGraphComponent } from '../components/block-fee-rates-graph/block-fee-rates-graph.component';
@ -20,7 +20,7 @@ import { PoolComponent } from '../components/pool/pool.component';
import { TelevisionComponent } from '../components/television/television.component';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
import { AcceleratorDashboardComponent } from '../components/accelerator-dashboard/accelerator-dashboard.component';
import { AcceleratorDashboardComponent } from '../components/acceleration/accelerator-dashboard/accelerator-dashboard.component';
import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-chart.component';
import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
import { BlockHealthGraphComponent } from '../components/block-health-graph/block-health-graph.component';

6
frontend/src/app/graphs/graphs.routing.module.ts
View File

@ -10,15 +10,15 @@ import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-ch
import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
import { AcceleratorDashboardComponent } from '../components/accelerator-dashboard/accelerator-dashboard.component';
import { AcceleratorDashboardComponent } from '../components/acceleration/accelerator-dashboard/accelerator-dashboard.component';
import { PoolRankingComponent } from '../components/pool-ranking/pool-ranking.component';
import { PoolComponent } from '../components/pool/pool.component';
import { StartComponent } from '../components/start/start.component';
import { StatisticsComponent } from '../components/statistics/statistics.component';
import { TelevisionComponent } from '../components/television/television.component';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { AccelerationFeesGraphComponent } from '../components/acceleration-fees-graph/acceleration-fees-graph.component';
import { AccelerationsListComponent } from '../components/accelerations-list/accelerations-list.component';
import { AccelerationFeesGraphComponent } from '../components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component';
import { AccelerationsListComponent } from '../components/acceleration/accelerations-list/accelerations-list.component';
const routes: Routes = [
{

8
frontend/src/app/shared/components/btc/btc.component.html Normal file
View File

@ -0,0 +1,8 @@
<span *ngIf="valueOverride !== undefined">{{ valueOverride }}</span>
<span *ngIf="valueOverride === undefined">&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ value | number }} </span>
<span class="symbol">
<ng-template [ngIf]="network === 'liquid'">L-</ng-template>
<ng-template [ngIf]="network === 'liquidtestnet'">tL-</ng-template>
<ng-template [ngIf]="network === 'testnet'">t-</ng-template>
<ng-template [ngIf]="network === 'signet'">s-</ng-template>{{ unit }}
</span>

0
frontend/src/app/shared/components/btc/btc.component.scss Normal file
View File

44
frontend/src/app/shared/components/btc/btc.component.ts Normal file
View File

@ -0,0 +1,44 @@
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import { StateService } from '../../../services/state.service';
@Component({
selector: 'app-btc',
templateUrl: './btc.component.html',
styleUrls: ['./btc.component.scss']
})
export class BtcComponent implements OnInit, OnChanges {
@Input() satoshis: number;
@Input() addPlus = false;
@Input() valueOverride: string | undefined = undefined;
value: number;
unit: string;
network = '';
stateSubscription: Subscription;
constructor(
private stateService: StateService,
) { }
ngOnInit() {
this.stateSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
}
ngOnDestroy() {
if (this.stateSubscription) {
this.stateSubscription.unsubscribe();
}
}
ngOnChanges(changes: SimpleChanges): void {
if (this.satoshis >= 1_000_000) {
this.value = (this.satoshis / 100_000_000);
this.unit = 'BTC'
} else {
this.value = Math.round(this.satoshis);
this.unit = 'sats'
}
}
}

10
frontend/src/app/shared/shared.module.ts
View File

@ -73,6 +73,7 @@ import { IndexingProgressComponent } from '../components/indexing-progress/index
import { SvgImagesComponent } from '../components/svg-images/svg-images.component';
import { ChangeComponent } from '../components/change/change.component';
import { SatsComponent } from './components/sats/sats.component';
import { BtcComponent } from './components/btc/btc.component';
import { FeeRateComponent } from './components/fee-rate/fee-rate.component';
import { TruncateComponent } from './components/truncate/truncate.component';
import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
@ -85,8 +86,9 @@ import { GlobalFooterComponent } from './components/global-footer/global-footer.
import { AcceleratePreviewComponent } from '../components/accelerate-preview/accelerate-preview.component';
import { AccelerateFeeGraphComponent } from '../components/accelerate-preview/accelerate-fee-graph.component';
import { MempoolErrorComponent } from './components/mempool-error/mempool-error.component';
import { AccelerationsListComponent } from '../components/accelerations-list/accelerations-list.component';
import { AccelerationStatsComponent } from '../components/acceleration-stats/acceleration-stats.component';
import { AccelerationsListComponent } from '../components/acceleration/accelerations-list/accelerations-list.component';
import { PendingStatsComponent } from '../components/acceleration/pending-stats/pending-stats.component';
import { AccelerationStatsComponent } from '../components/acceleration/acceleration-stats/acceleration-stats.component';
import { BlockViewComponent } from '../components/block-view/block-view.component';
import { EightBlocksComponent } from '../components/eight-blocks/eight-blocks.component';
@ -169,6 +171,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
SvgImagesComponent,
ChangeComponent,
SatsComponent,
BtcComponent,
FeeRateComponent,
TruncateComponent,
SearchResultsComponent,
@ -194,6 +197,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
MempoolErrorComponent,
AccelerationsListComponent,
AccelerationStatsComponent,
PendingStatsComponent,
],
imports: [
CommonModule,
@ -291,6 +295,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
SvgImagesComponent,
ChangeComponent,
SatsComponent,
BtcComponent,
FeeRateComponent,
TruncateComponent,
SearchResultsComponent,
@ -306,6 +311,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
MempoolErrorComponent,
AccelerationsListComponent,
AccelerationStatsComponent,
PendingStatsComponent,
MempoolBlockOverviewComponent,
ClockchainComponent,