diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html index 516ad5ba6..0f04f3a03 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -13,7 +13,10 @@
{{ block?.extras?.feeRange[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange.length - 1] | number:feeRounding }} sat/vB
-
+
+ +
+
{{ i }} transaction diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html index 23846128d..2eff96bca 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html @@ -12,7 +12,10 @@
{{ projectedBlock.feeRange[0] | number:feeRounding }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:feeRounding }} sat/vB
-
+
+ +
+
{{ i }} transaction diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index de345a7d8..6fe2a155c 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -7,6 +7,7 @@ import { take, map, switchMap } from 'rxjs/operators'; import { feeLevels, mempoolFeeColors } from 'src/app/app.constants'; import { specialBlocks } from 'src/app/app.constants'; import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe'; +import { Location } from '@angular/common'; @Component({ selector: 'app-mempool-blocks', @@ -32,6 +33,8 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { networkSubscription: Subscription; network = ''; now = new Date().getTime(); + showMiningInfo = false; + blockSubsidy = 50; blockWidth = 125; blockPadding = 30; @@ -54,9 +57,20 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { public stateService: StateService, private cd: ChangeDetectorRef, private relativeUrlPipe: RelativeUrlPipe, + private location: Location ) { } + enabledMiningInfoIfNeeded(url) { + this.showMiningInfo = url === '/mining'; + this.cd.markForCheck(); // Need to update the view asap + } + ngOnInit() { + if (['', 'testnet', 'signet'].includes(this.stateService.network)) { + this.enabledMiningInfoIfNeeded(this.location.path()); + this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url)); + } + if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') { this.feeRounding = '1.0-1'; } @@ -97,6 +111,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { if (this.stateService.network === '') { block.blink = specialBlocks[block.height] ? true : false; } + this.setBlockSubsidy(block.height); }); const stringifiedBlocks = JSON.stringify(mempoolBlocks); @@ -197,6 +212,18 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { return block.index; } + setBlockSubsidy(blockHeight) { + if (!['', 'testnet', 'signet'].includes(this.stateService.network)) { + return; + } + this.blockSubsidy = 50; + let halvenings = Math.floor(blockHeight / 210000); + while (halvenings > 0) { + this.blockSubsidy = this.blockSubsidy / 2; + halvenings--; + } + } + reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] { const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2; const blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));