diff --git a/backend/src/api/blocks.ts b/backend/src/api/blocks.ts index 9ea215f90..65889ab0f 100644 --- a/backend/src/api/blocks.ts +++ b/backend/src/api/blocks.ts @@ -64,7 +64,7 @@ class Blocks { transactions.sort((a, b) => b.feePerVsize - a.feePerVsize); block.medianFee = transactions.length ? this.median(transactions.map((tx) => tx.feePerVsize)) : 0; - block.feeRange = transactions.length ? this.getFeesInRange(transactions, 8) : []; + block.feeRange = transactions.length ? this.getFeesInRange(transactions, 8) : [0, 0]; this.blocks.push(block); if (this.blocks.length > config.KEEP_BLOCK_AMOUNT) { diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 995e77a1f..8f8779772 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -24,7 +24,7 @@ const routes: Routes = [ component: StatisticsComponent, }, { - path: 'team', + path: 'contributors', component: AboutComponent, }, { diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index 19345033d..3b4098fbc 100644 --- a/frontend/src/app/components/about/about.component.html +++ b/frontend/src/app/components/about/about.component.html @@ -4,7 +4,7 @@

-

Team

+

Contributors

Mempool.Space is a realtime Bitcoin blockchain explorer and mempool visualizer.

Lead Developer @softbtc @@ -39,7 +39,7 @@ - Upon connection, send object {{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }} + Default push: {{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }} to express what you want pushed. Available: 'blocks', 'mempool-blocks', 'live-2h-chart' and 'stats'. @@ -49,7 +49,21 @@ + + + + Push transactions related to address: {{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }} + to receive all new transactions containing that address as input or output. Returns an array of transactions. 'address-transactions' for new mempool transactions and 'address-block-transactions' for new block confirmed transactions. + + + +

+ +
+ + +

diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts index 4a9679213..5e0dfb4a0 100644 --- a/frontend/src/app/components/address/address.component.ts +++ b/frontend/src/app/components/address/address.component.ts @@ -28,7 +28,7 @@ export class AddressComponent implements OnInit, OnDestroy { ) { } ngOnInit() { - this.websocketService.want(['blocks', 'mempool-blocks']); + this.websocketService.want(['blocks', 'stats', 'mempool-blocks']); this.route.paramMap.pipe( switchMap((params: ParamMap) => { diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index ec7bfccf6..0b2cc3ca2 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -33,7 +33,7 @@ Status - + {{ (latestBlock.height - block.height + 1) }} confirmation{{ (latestBlock.height - block.height + 1) === 1 ? '' : 's' }} @@ -49,6 +49,10 @@ Previous Block {{ block.previousblockhash | shortenString : 32 }} + + Block subsidy + {{ blockSubsidy | number: '1.2-2' }} BTC ({{ conversions.USD * blockSubsidy | currency:'USD':'symbol':'1.0-0' }}) + diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 5bb0b6cfa..64953f16b 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -21,6 +21,8 @@ export class BlockComponent implements OnInit { transactions: Transaction[]; isLoadingTransactions = true; error: any; + blockSubsidy = 50; + conversions: any; constructor( private route: ActivatedRoute, @@ -30,7 +32,7 @@ export class BlockComponent implements OnInit { ) { } ngOnInit() { - this.websocketService.want(['blocks', 'mempool-blocks']); + this.websocketService.want(['blocks', 'stats', 'mempool-blocks']); this.route.paramMap.pipe( switchMap((params: ParamMap) => { @@ -66,6 +68,17 @@ export class BlockComponent implements OnInit { this.stateService.blocks$ .subscribe((block) => this.latestBlock = block); + + this.stateService.conversions$ + .subscribe((conversions) => { + this.conversions = conversions; + }); + + let halvenings = Math.floor(this.block.height / 210000); + while (halvenings > 0) { + this.blockSubsidy = this.blockSubsidy / 2; + halvenings--; + } } getBlockTransactions(hash: string) { 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 9ccba9c52..94e95c2b1 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -18,5 +18,5 @@ -
+
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss index 7e96cb8c0..7c804bb67 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -104,7 +104,7 @@ #arrow-up { position: relative; - right: 30px; + left: 30px; top: 140px; transition: 1s; width: 0; diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts index 44d3725ec..d9dedd870 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -10,18 +10,15 @@ import { StateService } from 'src/app/services/state.service'; }) export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { @Input() markHeight = 0; - @Input() txFeePerVSize: number; blocks: Block[] = []; blocksSubscription: Subscription; interval: any; trigger = 0; - blockWidth = 125; - blockPadding = 30; - arrowLeftPx = 30; - rightPosition = 0; + arrowVisible = false; + arrowLeftPx = 30; constructor( private stateService: StateService, @@ -56,38 +53,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { this.arrowVisible = false; return; } - const block = this.blocks.find((b) => b.height === this.markHeight); - if (!block) { - return; - } - const blockindex = this.blocks.indexOf(block); - - this.arrowVisible = true; - this.rightPosition = blockindex * -(this.blockWidth + this.blockPadding) - 30; - - if (!this.txFeePerVSize) { - return; - } - - for (let i = 0; i < block.feeRange.length - 1; i++) { - if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) { - const feeRangeIndex = block.feeRange.findIndex((val, index) => this.txFeePerVSize < block.feeRange[index + 1]); - const feeRangeChunkSize = 1 / (block.feeRange.length - 1); - - const txFee = this.txFeePerVSize - block.feeRange[i]; - const max = block.feeRange[i + 1] - block.feeRange[i]; - const blockLocation = txFee / max; - - const chunkPositionOffset = blockLocation * feeRangeChunkSize; - const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset; - - const blockedFilledPercentage = (block.weight > 4000000 ? 4000000 : block.weight) / 4000000; - const arrowRightPosition = blockindex * (-this.blockWidth + this.blockPadding) - + ((1 - feePosition) * blockedFilledPercentage * this.blockWidth); - - this.rightPosition = arrowRightPosition - 93; - break; - } + const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight); + if (blockindex !== -1) { + this.arrowVisible = true; + this.arrowLeftPx = blockindex * 155 + 30; } } @@ -100,13 +69,13 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { if (window.innerWidth <= 768) { return { top: 155 * this.blocks.indexOf(block) + 'px', - background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%, + background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%, #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`, }; } else { return { left: 155 * this.blocks.indexOf(block) + 'px', - background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%, + background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%, #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`, }; } diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html index f9e9e2d75..78822a560 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.html +++ b/frontend/src/app/components/blockchain/blockchain.component.html @@ -1,7 +1,7 @@
- +
diff --git a/frontend/src/app/components/footer/footer.component.html b/frontend/src/app/components/footer/footer.component.html index 981f3c2de..d4000e0d9 100644 --- a/frontend/src/app/components/footer/footer.component.html +++ b/frontend/src/app/components/footer/footer.component.html @@ -1,6 +1,6 @@