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

Use bitcoin RPC getblock because esplora returns int for difficulty - Fix some css in mining dashboard

Browse Source
This commit is contained in:
nymkappa 2022-03-13 11:38:45 +01:00
parent bec3f214b5
commit 0730053d5d
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
5 changed files with 94 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
backend/src/api/bitcoin/bitcoin-api.ts
View File

@ -70,7 +70,7 @@ class BitcoinApi implements AbstractBitcoinApi {
} }
return this.bitcoindClient.getBlock(hash) return this.bitcoindClient.getBlock(hash)
.then((block: IBitcoinApi.Block) => this.convertBlock(block)); .then((block: IBitcoinApi.Block) => BitcoinApi.convertBlock(block));
} }
$getAddress(address: string): Promise<IEsploraApi.Address> { $getAddress(address: string): Promise<IEsploraApi.Address> {
@ -186,7 +186,7 @@ class BitcoinApi implements AbstractBitcoinApi {
return esploraTransaction; return esploraTransaction;
} }
private convertBlock(block: IBitcoinApi.Block): IEsploraApi.Block { static convertBlock(block: IBitcoinApi.Block): IEsploraApi.Block {
return { return {
id: block.hash, id: block.hash,
height: block.height, height: block.height,

37
backend/src/api/blocks.ts
View File

@ -11,6 +11,7 @@ import { IEsploraApi } from './bitcoin/esplora-api.interface';
import poolsRepository from '../repositories/PoolsRepository'; import poolsRepository from '../repositories/PoolsRepository';
import blocksRepository from '../repositories/BlocksRepository'; import blocksRepository from '../repositories/BlocksRepository';
import loadingIndicators from './loading-indicators'; import loadingIndicators from './loading-indicators';
import BitcoinApi from './bitcoin/bitcoin-api';
class Blocks { class Blocks {
private blocks: BlockExtended[] = []; private blocks: BlockExtended[] = [];
@ -103,8 +104,8 @@ class Blocks {
* @param transactions * @param transactions
* @returns BlockExtended * @returns BlockExtended
*/ */
private async $getBlockExtended(block: IEsploraApi.Block, transactions: TransactionExtended[]): Promise<BlockExtended> { private async $getBlockExtended(block: IEsploraApi.Block, transactions: TransactionExtended[]): Promise<BlockExtended> {
const blockExtended: BlockExtended = Object.assign({extras: {}}, block); const blockExtended: BlockExtended = Object.assign({ extras: {} }, block);
blockExtended.extras.reward = transactions[0].vout.reduce((acc, curr) => acc + curr.value, 0); blockExtended.extras.reward = transactions[0].vout.reduce((acc, curr) => acc + curr.value, 0);
blockExtended.extras.coinbaseTx = transactionUtils.stripCoinbaseTransaction(transactions[0]); blockExtended.extras.coinbaseTx = transactionUtils.stripCoinbaseTransaction(transactions[0]);
@ -112,19 +113,19 @@ class Blocks {
blockExtended.extras.coinbaseRaw = coinbaseRaw.hex; blockExtended.extras.coinbaseRaw = coinbaseRaw.hex;
if (block.height === 0) { if (block.height === 0) {
blockExtended.extras.medianFee = 0; // 50th percentiles blockExtended.extras.medianFee = 0; // 50th percentiles
blockExtended.extras.feeRange = [0, 0, 0, 0, 0, 0, 0]; blockExtended.extras.feeRange = [0, 0, 0, 0, 0, 0, 0];
blockExtended.extras.totalFees = 0; blockExtended.extras.totalFees = 0;
blockExtended.extras.avgFee = 0; blockExtended.extras.avgFee = 0;
blockExtended.extras.avgFeeRate = 0; blockExtended.extras.avgFeeRate = 0;
} else { } else {
const stats = await bitcoinClient.getBlockStats(block.id); const stats = await bitcoinClient.getBlockStats(block.id);
blockExtended.extras.medianFee = stats.feerate_percentiles[2]; // 50th percentiles blockExtended.extras.medianFee = stats.feerate_percentiles[2]; // 50th percentiles
blockExtended.extras.feeRange = [stats.minfeerate, stats.feerate_percentiles, stats.maxfeerate].flat(); blockExtended.extras.feeRange = [stats.minfeerate, stats.feerate_percentiles, stats.maxfeerate].flat();
blockExtended.extras.totalFees = stats.totalfee; blockExtended.extras.totalFees = stats.totalfee;
blockExtended.extras.avgFee = stats.avgfee; blockExtended.extras.avgFee = stats.avgfee;
blockExtended.extras.avgFeeRate = stats.avgfeerate; blockExtended.extras.avgFeeRate = stats.avgfeerate;
} }
if (Common.indexingEnabled()) { if (Common.indexingEnabled()) {
let pool: PoolTag; let pool: PoolTag;
@ -239,7 +240,7 @@ class Blocks {
indexedThisRun = 0; indexedThisRun = 0;
} }
const blockHash = await bitcoinApi.$getBlockHash(blockHeight); const blockHash = await bitcoinApi.$getBlockHash(blockHeight);
const block = await bitcoinApi.$getBlock(blockHash); const block = BitcoinApi.convertBlock(await bitcoinClient.getBlock(blockHash));
const transactions = await this.$getTransactionsExtended(blockHash, block.height, true, true); const transactions = await this.$getTransactionsExtended(blockHash, block.height, true, true);
const blockExtended = await this.$getBlockExtended(block, transactions); const blockExtended = await this.$getBlockExtended(block, transactions);
await blocksRepository.$saveBlockInDatabase(blockExtended); await blocksRepository.$saveBlockInDatabase(blockExtended);
@ -276,7 +277,7 @@ class Blocks {
if (blockchainInfo.blocks === blockchainInfo.headers) { if (blockchainInfo.blocks === blockchainInfo.headers) {
const heightDiff = blockHeightTip % 2016; const heightDiff = blockHeightTip % 2016;
const blockHash = await bitcoinApi.$getBlockHash(blockHeightTip - heightDiff); const blockHash = await bitcoinApi.$getBlockHash(blockHeightTip - heightDiff);
const block = await bitcoinApi.$getBlock(blockHash); const block = BitcoinApi.convertBlock(await bitcoinClient.getBlock(blockHash));
this.lastDifficultyAdjustmentTime = block.timestamp; this.lastDifficultyAdjustmentTime = block.timestamp;
this.currentDifficulty = block.difficulty; this.currentDifficulty = block.difficulty;
@ -300,7 +301,7 @@ class Blocks {
} }
const blockHash = await bitcoinApi.$getBlockHash(this.currentBlockHeight); const blockHash = await bitcoinApi.$getBlockHash(this.currentBlockHeight);
const block = await bitcoinApi.$getBlock(blockHash); const block = BitcoinApi.convertBlock(await bitcoinClient.getBlock(blockHash));
const txIds: string[] = await bitcoinApi.$getTxIdsForBlock(blockHash); const txIds: string[] = await bitcoinApi.$getTxIdsForBlock(blockHash);
const transactions = await this.$getTransactionsExtended(blockHash, block.height, false); const transactions = await this.$getTransactionsExtended(blockHash, block.height, false);
const blockExtended: BlockExtended = await this.$getBlockExtended(block, transactions); const blockExtended: BlockExtended = await this.$getBlockExtended(block, transactions);
@ -332,14 +333,14 @@ class Blocks {
/** /**
* Index a block if it's missing from the database. Returns the block after indexing * Index a block if it's missing from the database. Returns the block after indexing
*/ */
public async $indexBlock(height: number): Promise<BlockExtended> { public async $indexBlock(height: number): Promise<BlockExtended> {
const dbBlock = await blocksRepository.$getBlockByHeight(height); const dbBlock = await blocksRepository.$getBlockByHeight(height);
if (dbBlock != null) { if (dbBlock != null) {
return this.prepareBlock(dbBlock); return this.prepareBlock(dbBlock);
} }
const blockHash = await bitcoinApi.$getBlockHash(height); const blockHash = await bitcoinApi.$getBlockHash(height);
const block = await bitcoinApi.$getBlock(blockHash); const block = BitcoinApi.convertBlock(await bitcoinClient.getBlock(blockHash));
const transactions = await this.$getTransactionsExtended(blockHash, block.height, true); const transactions = await this.$getTransactionsExtended(blockHash, block.height, true);
const blockExtended = await this.$getBlockExtended(block, transactions); const blockExtended = await this.$getBlockExtended(block, transactions);

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

@ -5,30 +5,32 @@
<!-- Temporary stuff here - Will be moved to a component once we have more useful data to show --> <!-- 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-wrapper">
<div class="card-body more-padding"> <div class="card" style="height: 123px">
<div class="fee-estimation-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward"> <div class="card-body more-padding">
<div class="item"> <div class="reward-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<h5 class="card-title mb-1" i18n="mining.rewards">Miners Reward</h5> <div class="item">
<div class="card-text"> <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
<app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount> <div class="card-text">
<div class="symbol">in the last 8 blocks</div> <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>
</div> <div class="item">
<div class="item"> <h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
<h5 class="card-title mb-1" i18n="mining.rewards-per-tx">Reward Per Tx</h5> <div class="card-text">
<div class="card-text"> {{ rewardStats.rewardPerTx | amountShortener }}
{{ rewardStats.rewardPerTx | amountShortener }} <span class="symbol">sats/tx</span>
<span class="symbol">sats/tx</span> <div class="symbol">in the last 8 blocks</div>
<div class="symbol">in the last 8 blocks</div> </div>
</div> </div>
</div> <div class="item">
<div class="item"> <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
<h5 class="card-title mb-1" i18n="mining.average-fee">Average Fee</h5> <div class="card-text">
<div class="card-text"> {{ rewardStats.feePerTx | amountShortener}}
{{ rewardStats.feePerTx | amountShortener}} <span class="symbol">sats/tx</span>
<span class="symbol">sats/tx</span> <div class="symbol">in the last 8 blocks</div>
<div class="symbol">in the last 8 blocks</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -36,24 +38,24 @@
</div> </div>
</div> </div>
<ng-template #loadingReward> <ng-template #loadingReward>
<div class="fee-estimation-container"> <div class="reward-container">
<div class="item"> <div class="item">
<h5 class="card-title" i18n="">Miners Reward</h5> <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
<div class="card-text"> <div class="card-text skeleton">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<h5 class="card-title" i18n="">Reward Per Tx</h5> <h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
<div class="card-text"> <div class="card-text skeleton">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<h5 class="card-title" i18n="">Average Fee</h5> <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
<div class="card-text"> <div class="card-text skeleton">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</div> </div>
@ -136,4 +138,4 @@
</div> </div>
</div> </div>
</div> </div>

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

@ -59,50 +59,57 @@
padding-bottom: 3px; padding-bottom: 3px;
} }
.fee-estimation-container { .reward-container {
display: flex; display: flex;
justify-content: space-between; flex-direction: row;
@media (min-width: 376px) { justify-content: space-around;
flex-direction: row; height: 76px;
.shared-block {
color: #ffffff66;
font-size: 12px;
} }
.item { .item {
max-width: 150px; display: table-cell;
margin: 0; padding: 0 5px;
width: -webkit-fill-available; width: 100%;
@media (min-width: 376px) { &:nth-child(1) {
margin: 0 auto 0px;
}
&:first-child{
display: none; display: none;
@media (min-width: 485px) { @media (min-width: 485px) {
display: block; display: table-cell;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
display: none; display: none;
} }
@media (min-width: 992px) { @media (min-width: 992px) {
display: block; display: table-cell;
} }
} }
&:last-child { }
margin-bottom: 0; .card-text {
} font-size: 22px;
.card-text span { margin-top: -9px;
color: #ffffff66; position: relative;
font-size: 12px; }
top: 0px; .card-text.skeleton {
} margin-top: 0px;
.fee-text{ }
border-bottom: 1px solid #ffffff1c; }
width: fit-content;
margin: auto; .more-padding {
line-height: 1.45; padding: 18px;
padding: 0px 2px; }
}
.fiat { .card-wrapper {
display: block; .card {
font-size: 14px !important; height: auto !important;
} }
.card-body {
display: flex;
flex: inherit;
text-align: center;
flex-direction: column;
justify-content: space-around;
padding: 22px 20px;
} }
} }

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

@ -36,8 +36,8 @@ export class MiningDashboardComponent implements OnInit {
return { return {
'totalReward': totalReward, 'totalReward': totalReward,
'rewardPerTx': totalReward / totalTx, 'rewardPerTx': Math.round(totalReward / totalTx),
'feePerTx': totalFee / totalTx, 'feePerTx': Math.round(totalFee / totalTx),
} }
}) })
); );