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,

11
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[] = [];
@ -104,7 +105,7 @@ class Blocks {
* @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]);
@ -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);
@ -339,7 +340,7 @@ class Blocks {
} }
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);

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

@ -5,18 +5,19 @@
<!-- 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-wrapper">
<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="fee-estimation-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward"> <div class="reward-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<div class="item"> <div class="item">
<h5 class="card-title mb-1" i18n="mining.rewards">Miners Reward</h5> <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
<div class="card-text"> <div class="card-text">
<app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount> <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
<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 mb-1" i18n="mining.rewards-per-tx">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">
{{ rewardStats.rewardPerTx | amountShortener }} {{ rewardStats.rewardPerTx | amountShortener }}
<span class="symbol">sats/tx</span> <span class="symbol">sats/tx</span>
@ -24,7 +25,7 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<h5 class="card-title mb-1" i18n="mining.average-fee">Average Fee</h5> <h5 class="card-title" 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>
@ -35,25 +36,26 @@
</div> </div>
</div> </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>

61
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;
@media (min-width: 376px) {
flex-direction: row; flex-direction: row;
justify-content: space-around;
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 span { .card-text {
color: #ffffff66; font-size: 22px;
font-size: 12px; margin-top: -9px;
top: 0px; position: relative;
} }
.fee-text{ .card-text.skeleton {
border-bottom: 1px solid #ffffff1c; margin-top: 0px;
width: fit-content;
margin: auto;
line-height: 1.45;
padding: 0px 2px;
} }
.fiat { }
display: block;
font-size: 14px !important; .more-padding {
padding: 18px;
}
.card-wrapper {
.card {
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),
} }
}) })
); );