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

Merge branch 'master' into bugfix/blocks-list-css

Browse Source
This commit is contained in:
nymkappa 2022-03-23 19:10:55 +09:00 committed by GitHub
commit fae49ba66e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 345 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
backend/src/api/mining.ts
View File

@ -1,4 +1,4 @@
import { PoolInfo, PoolStats } from '../mempool.interfaces';
import { PoolInfo, PoolStats, RewardStats } from '../mempool.interfaces';
import BlocksRepository from '../repositories/BlocksRepository';
import PoolsRepository from '../repositories/PoolsRepository';
import HashratesRepository from '../repositories/HashratesRepository';
@ -70,6 +70,13 @@ class Mining {
};
}
/**
* Get miner reward stats
*/
public async $getRewardStats(blockCount: number): Promise<RewardStats> {
return await BlocksRepository.$getBlockStats(blockCount);
}
/**
* [INDEXING] Generate weekly mining pool hashrate history
*/

1
backend/src/index.ts
View File

@ -312,6 +312,7 @@ class Server {
.get(config.MEMPOOL.API_URL_PREFIX + 'mining/hashrate/pools/:interval', routes.$getPoolsHistoricalHashrate)
.get(config.MEMPOOL.API_URL_PREFIX + 'mining/hashrate', routes.$getHistoricalHashrate)
.get(config.MEMPOOL.API_URL_PREFIX + 'mining/hashrate/:interval', routes.$getHistoricalHashrate)
.get(config.MEMPOOL.API_URL_PREFIX + 'mining/reward-stats/:blockCount', routes.$getRewardStats)
;
}

6
backend/src/mempool.interfaces.ts
View File

@ -209,3 +209,9 @@ export interface IDifficultyAdjustment {
timeAvg: number;
timeOffset: number;
}
export interface RewardStats {
totalReward: number;
totalFee: number;
totalTx: number;
}

26
backend/src/repositories/BlocksRepository.ts
View File

@ -354,6 +354,9 @@ class BlocksRepository {
}
}
/**
* Return oldest blocks height
*/
public async $getOldestIndexedBlockHeight(): Promise<number> {
const connection = await DB.getConnection();
try {
@ -367,6 +370,29 @@ class BlocksRepository {
throw e;
}
}
/**
* Get general block stats
*/
public async $getBlockStats(blockCount: number): Promise<any> {
let connection;
try {
connection = await DB.getConnection();
// We need to use a subquery
const query = `SELECT SUM(reward) as totalReward, SUM(fees) as totalFee, SUM(tx_count) as totalTx
FROM (SELECT reward, fees, tx_count FROM blocks ORDER by height DESC LIMIT ${blockCount}) as sub`;
const [rows]: any = await connection.query(query);
connection.release();
return rows[0];
} catch (e) {
connection.release();
logger.err('$getBlockStats() error: ' + (e instanceof Error ? e.message : e));
throw e;
}
}
}
export default new BlocksRepository();

9
backend/src/routes.ts
View File

@ -935,6 +935,15 @@ class Routes {
res.status(500).end();
}
}
public async $getRewardStats(req: Request, res: Response) {
try {
const response = await mining.$getRewardStats(parseInt(req.params.blockCount))
res.json(response);
} catch (e) {
res.status(500).end();
}
}
}
export default new Routes();

2
frontend/src/app/app.module.ts
View File

@ -78,6 +78,7 @@ import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-st
import { GraphsComponent } from './components/graphs/graphs.component';
import { DifficultyAdjustmentsTable } from './components/difficulty-adjustments-table/difficulty-adjustments-table.components';
import { BlocksList } from './components/blocks-list/blocks-list.component';
import { RewardStatsComponent } from './components/reward-stats/reward-stats.component';
import { DataCyDirective } from './data-cy.directive';
@NgModule({
@ -139,6 +140,7 @@ import { DataCyDirective } from './data-cy.directive';
DifficultyAdjustmentsTable,
BlocksList,
DataCyDirective,
RewardStatsComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),

2
frontend/src/app/components/blocks-list/blocks-list.component.html
View File

@ -30,7 +30,7 @@
onError="this.src = './resources/mining-pools/default.svg'">
<span class="pool-name">{{ block.extras.pool.name }}</span>
</a>
<span class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
<span *ngIf="!widget" class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
</div>
</td>
<td class="timestamp" *ngIf="!widget">

3
frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
View File

@ -3,6 +3,7 @@ import { EChartsOption } from 'echarts';
import { OnChanges } from '@angular/core';
import { StorageService } from 'src/app/services/storage.service';
import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
import { formatNumber } from '@angular/common';
@Component({
selector: 'app-incoming-transactions-graph',
@ -116,7 +117,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
itemFormatted += `<div class="item">
<div class="indicator-container">${colorSpan(item.color)}</div>
<div class="grow"></div>
<div class="value">${item.value[1]} <span class="symbol">vB/s</span></div>
<div class="value">${formatNumber(item.value[1], this.locale, '1.0-0')}<span class="symbol">vB/s</span></div>
</div>`;
}
});

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

@ -4,64 +4,18 @@
<!-- Temporary stuff here - Will be moved to a component once we have more useful data to show -->
<div class="col">
<div class="main-title">Reward stats</div>
<div class="main-title">
<span i18n="mining.reward-stats">Reward stats</span>&nbsp;
<span style="font-size: xx-small" i18n="mining.144-blocks">(144 blocks)</span>
</div>
<div class="card-wrapper">
<div class="card" style="height: 123px">
<div class="card-body more-padding">
<div class="reward-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
<div class="card-text">
<app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
<div class="symbol">in the last 8 blocks</div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
<div class="card-text">
{{ rewardStats.rewardPerTx | amountShortener }}
<span class="symbol">sats/tx</span>
<div class="symbol">in the last 8 blocks</div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
<div class="card-text">
{{ rewardStats.feePerTx | amountShortener}}
<span class="symbol">sats/tx</span>
<div class="symbol">in the last 8 blocks</div>
</div>
</div>
</div>
<app-reward-stats></app-reward-stats>
</div>
</div>
</div>
</div>
<ng-template #loadingReward>
<div class="reward-container">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
<div class="card-text skeleton">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
<div class="card-text skeleton">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
<div class="card-text skeleton">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
</div>
</ng-template>
<!-- difficulty adjustment -->
<div class="col">

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

@ -59,42 +59,6 @@
padding-bottom: 3px;
}
.reward-container {
display: flex;
flex-direction: row;
justify-content: space-around;
height: 76px;
.shared-block {
color: #ffffff66;
font-size: 12px;
}
.item {
display: table-cell;
padding: 0 5px;
width: 100%;
&: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;
}
.card-text.skeleton {
margin-top: 0px;
}
}
.more-padding {
padding: 18px;
}

22
frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
View File

@ -14,14 +14,8 @@ import { WebsocketService } from 'src/app/services/websocket.service';
export class MiningDashboardComponent implements OnInit {
private blocks = [];
public $rewardStats: Observable<any>;
public totalReward = 0;
public rewardPerTx = '~';
public feePerTx = '~';
constructor(
private seoService: SeoService,
public stateService: StateService,
private websocketService: WebsocketService,
) {
this.seoService.setTitle($localize`:@@mining.mining-dashboard:Mining Dashboard`);
@ -29,21 +23,5 @@ export class MiningDashboardComponent implements OnInit {
ngOnInit(): void {
this.websocketService.want(['blocks', 'mempool-blocks']);
this.$rewardStats = this.stateService.blocks$.pipe(
map(([block]) => {
this.blocks.unshift(block);
this.blocks = this.blocks.slice(0, 8);
const totalTx = this.blocks.reduce((acc, b) => acc + b.tx_count, 0);
const totalFee = this.blocks.reduce((acc, b) => acc + b.extras?.totalFees ?? 0, 0);
const totalReward = this.blocks.reduce((acc, b) => acc + b.extras?.reward ?? 0, 0);
return {
'totalReward': totalReward,
'rewardPerTx': Math.round(totalReward / totalTx),
'feePerTx': Math.round(totalFee / totalTx),
};
})
);
}
}

16
frontend/src/app/components/pool/pool.component.html
View File

@ -1,9 +1,9 @@
<div class="container-xl">
<div *ngIf="poolStats$ | async as poolStats; else loadingMain">
<div style="display:flex">
<div style="display:flex" class="mb-3">
<img width="50" height="50" src="{{ poolStats['logo'] }}"
onError="this.src = './resources/mining-pools/default.svg'" class="mr-3 mb-3">
onError="this.src = './resources/mining-pools/default.svg'" class="mr-3">
<h1 class="m-0 pt-1 pt-md-0">{{ poolStats.pool.name }}</h1>
</div>
@ -111,7 +111,7 @@
</tbody>
<ng-template #skeleton>
<tbody>
<tr *ngFor="let item of skeletonLines">
<tr *ngFor="let item of [1,2,3,4,5]">
<td class="height">
<span class="skeleton-loader"></span>
</td>
@ -145,15 +145,15 @@
<ng-template #loadingMain>
<div>
<div style="display:flex">
<img width="50" height="50" src="./resources/mining-pools/default.svg" class="mr-3 mb-3">
<h1 class="m-0 pt-1 pt-md-0"><div class="skeleton-loader"></div></h1>
<div class="mb-3" style="display:flex; position: relative">
<div class="skeleton-loader mr-3" style="width: 50px; height: 50px"></div>
<h1 class="m-0 pt-1 pt-md-0"><div class="skeleton-loader" style="position: absolute; top: 32%; width: 150px; height: 20px"></div></h1>
</div>
<div class="box">
<div class="row">
<div class="col-lg-9">
<table class="table table-borderless table-striped" style="table-layout: fixed;">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td class="label">Tags</td>
@ -176,7 +176,7 @@
</table>
</div>
<div class="col-lg-3">
<table class="table table-borderless table-striped">
<table class="table table-borderless table-striped" >
<tbody>
<tr>
<td class="label">Mined Blocks</td>

18
frontend/src/app/components/pool/pool.component.scss
View File

@ -45,7 +45,7 @@ div.scrollable {
}
.label {
width: 30%;
width: 35%;
}
.data {
@ -136,4 +136,18 @@ div.scrollable {
@media (max-width: 450px) {
text-align: right;
}
}
}
.skeleton-loader {
max-width: 200px;
}
.loadingGraphs {
position: absolute;
left: calc(50% - 15px);
z-index: 100;
top: 475px;
@media (max-width: 992px) {
top: 600px;
}
}

21
frontend/src/app/components/pool/pool.component.ts
View File

@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { EChartsOption, graphic } from 'echarts';
import { BehaviorSubject, Observable } from 'rxjs';
import { BehaviorSubject, Observable, timer } from 'rxjs';
import { map, switchMap, tap } from 'rxjs/operators';
import { BlockExtended, PoolStat } from 'src/app/interfaces/node-api.interface';
import { ApiService } from 'src/app/services/api.service';
@ -13,14 +13,6 @@ import { formatNumber } from '@angular/common';
selector: 'app-pool',
templateUrl: './pool.component.html',
styleUrls: ['./pool.component.scss'],
styles: [`
.loadingGraphs {
position: absolute;
top: 50%;
left: calc(50% - 15px);
z-index: 100;
}
`],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PoolComponent implements OnInit {
@ -31,7 +23,6 @@ export class PoolComponent implements OnInit {
poolStats$: Observable<PoolStat>;
blocks$: Observable<BlockExtended[]>;
isLoading = true;
skeletonLines: number[] = [...Array(5).keys()];
chartOptions: EChartsOption = {};
chartInitOptions = {
@ -40,11 +31,11 @@ export class PoolComponent implements OnInit {
height: 'auto',
};
loadMoreSubject: BehaviorSubject<undefined> = new BehaviorSubject(undefined);
blocks: BlockExtended[] = [];
poolId: number = undefined;
loadMoreSubject: BehaviorSubject<number> = new BehaviorSubject(this.poolId);
constructor(
@Inject(LOCALE_ID) public locale: string,
private apiService: ApiService,
@ -59,6 +50,7 @@ export class PoolComponent implements OnInit {
switchMap((poolId: any) => {
this.isLoading = true;
this.poolId = poolId;
this.loadMoreSubject.next(this.poolId);
return this.apiService.getPoolHashrate$(this.poolId)
.pipe(
switchMap((data) => {
@ -88,6 +80,9 @@ export class PoolComponent implements OnInit {
this.blocks$ = this.loadMoreSubject
.pipe(
switchMap((flag) => {
if (this.poolId === undefined) {
return [];
}
return this.apiService.getPoolBlocks$(this.poolId, this.blocks[this.blocks.length - 1]?.height);
}),
tap((newBlocks) => {
@ -187,7 +182,7 @@ export class PoolComponent implements OnInit {
}
loadMore() {
this.loadMoreSubject.next(undefined);
this.loadMoreSubject.next(this.poolId);
}
trackByBlock(index: number, block: BlockExtended) {

119
frontend/src/app/components/reward-stats/reward-stats.component.html Normal file
View File

@ -0,0 +1,119 @@
<div class="fee-estimation-wrapper" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<div class="fee-estimation-container">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
<div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
ngbTooltip="Amount being paid to miners in the past 144 blocks" placement="bottom">
<div class="fee-text">
<app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
</div>
<span class="fiat">
<app-fiat [value]="rewardStats.totalReward"></app-fiat>
</span>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
<div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
ngbTooltip="Average miners' reward per transaction in the past 144 blocks" placement="bottom">
<div class="fee-text">
{{ rewardStats.rewardPerTx | amountShortener }}
<span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
</div>
<span class="fiat">
<app-fiat [value]="rewardStats.rewardPerTx"></app-fiat>
</span>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
<div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
<div class="fee-text">{{ rewardStats.feePerTx | amountShortener }}
<span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
</div>
<span class="fiat">
<app-fiat [value]="rewardStats.feePerTx"></app-fiat>
</span>
</div>
</div>
</div>
</div>
<ng-template #loadingReward>
<div class="fee-estimation-container loading-container">
<div class="item">
<h5 class="card-title" i18n="fees-box.low-priority">Low priority</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="fees-box.medium-priority">Medium priority</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="fees-box.high-priority">High priority</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
</div>
</ng-template>
<!-- <div class="reward-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
<div class="card-text">
<app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
<div class="symbol" i18n="rewardStats.totalReward-desc">were rewarded to miners</div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
<div class="card-text">
{{ rewardStats.rewardPerTx | amountShortener }}
<span class="symbol" i18n="mining.sats-per-tx">sats/tx</span>
<div class="symbol" i18n="mining.rewards-per-tx-desc">miners reward / tx count</div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
<div class="card-text">
{{ rewardStats.feePerTx | amountShortener}}
<span class="symbol">sats/tx</span>
<div class="symbol" i18n="mining.average-fee-desc">were paid per tx</div>
</div>
</div>
</div>
<ng-template #loadingReward>
<div class="reward-container">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
<div class="card-text skeleton">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
<div class="card-text skeleton">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
<div class="card-text skeleton">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
</div>
</ng-template> -->

85
frontend/src/app/components/reward-stats/reward-stats.component.scss Normal file
View File

@ -0,0 +1,85 @@
.card-title {
color: #4a68b9;
font-size: 10px;
margin-bottom: 4px;
font-size: 1rem;
}
.card-text {
font-size: 22px;
span {
font-size: 11px;
position: relative;
top: -2px;
display: inline-flex;
}
.green-color {
display: block;
}
}
.fee-estimation-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;
}
}
}

37
frontend/src/app/components/reward-stats/reward-stats.component.ts Normal file
View File

@ -0,0 +1,37 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { map, skip, switchMap } from 'rxjs/operators';
import { ApiService } from 'src/app/services/api.service';
import { StateService } from 'src/app/services/state.service';
@Component({
selector: 'app-reward-stats',
templateUrl: './reward-stats.component.html',
styleUrls: ['./reward-stats.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RewardStatsComponent implements OnInit {
public $rewardStats: Observable<any>;
constructor(private apiService: ApiService, private stateService: StateService) { }
ngOnInit(): void {
this.$rewardStats = this.stateService.blocks$
.pipe(
// (we always receives some blocks at start so only trigger for the last one)
skip(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT - 1),
switchMap(() => {
return this.apiService.getRewardStats$()
.pipe(
map((stats) => {
return {
totalReward: stats.totalReward,
rewardPerTx: stats.totalReward / stats.totalTx,
feePerTx: stats.totalFee / stats.totalTx,
};
})
);
})
);
}
}

6
frontend/src/app/interfaces/node-api.interface.ts
View File

@ -115,3 +115,9 @@ export interface BlockExtension {
export interface BlockExtended extends Block {
extras?: BlockExtension;
}
export interface RewardStats {
totalReward: number;
totalFee: number;
totalTx: number;
}

6
frontend/src/app/services/api.service.ts
View File

@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { CpfpInfo, OptimizedMempoolStats, AddressInformation, LiquidPegs, ITranslators, PoolsStats, PoolStat, BlockExtended } from '../interfaces/node-api.interface';
import { CpfpInfo, OptimizedMempoolStats, AddressInformation, LiquidPegs, ITranslators, PoolsStats, PoolStat, BlockExtended, RewardStats } from '../interfaces/node-api.interface';
import { Observable } from 'rxjs';
import { StateService } from './state.service';
import { WebsocketResponse } from '../interfaces/websocket.interface';
@ -174,4 +174,8 @@ export class ApiService {
(interval !== undefined ? `/${interval}` : '')
);
}
getRewardStats$(blockCount: number = 144): Observable<RewardStats> {
return this.httpClient.get<RewardStats>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/reward-stats/${blockCount}`);
}
}

1
production/nginx-cache-warmer
View File

@ -33,6 +33,7 @@ do for url in / \
'/api/v1/mining/hashrate/pools/2y' \
'/api/v1/mining/hashrate/pools/3y' \
'/api/v1/mining/hashrate/pools/all' \
'/api/v1/mining/reward-stats/144' \
do
curl -s "https://${hostname}${url}" >/dev/null