diff --git a/backend/src/api/blocks.ts b/backend/src/api/blocks.ts index 0fd49b612..447165b66 100644 --- a/backend/src/api/blocks.ts +++ b/backend/src/api/blocks.ts @@ -60,6 +60,8 @@ class Blocks { } } + console.log(`${found} of ${txIds.length} found in mempool. ${notFound} not found.`); + transactions.sort((a, b) => b.feePerVsize - a.feePerVsize); block.medianFee = this.median(transactions.map((tx) => tx.feePerVsize)); block.feeRange = this.getFeesInRange(transactions, 8); diff --git a/backend/src/api/mempool.ts b/backend/src/api/mempool.ts index a7b48d9e9..45ef521b6 100644 --- a/backend/src/api/mempool.ts +++ b/backend/src/api/mempool.ts @@ -104,7 +104,7 @@ class Mempool { } // Replace mempool to clear already confirmed transactions - const newMempool: any = {}; + const newMempool = {}; transactions.forEach((tx) => { if (this.mempoolCache[tx]) { newMempool[tx] = this.mempoolCache[tx]; @@ -113,6 +113,9 @@ class Mempool { } }); + console.log(`New mempool size: ${Object.keys(newMempool).length} ` + + ` Change: ${transactions.length - Object.keys(newMempool).length}`); + this.mempoolCache = newMempool; if (hasChange && this.mempoolChangedCallback) { diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 715ec3ef4..995e77a1f 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -19,16 +19,12 @@ const routes: Routes = [ path: '', component: StartComponent, }, - { - path: 'explorer', - component: ExplorerComponent, - }, { path: 'graphs', component: StatisticsComponent, }, { - path: 'about', + path: 'team', component: AboutComponent, }, { diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index c6cee8cc3..19345033d 100644 --- a/frontend/src/app/components/about/about.component.html +++ b/frontend/src/app/components/about/about.component.html @@ -1,14 +1,15 @@
+


-

About

+

Team

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

-

Created by @softbtc -
Hosted by @wiz -
Designed by @markjborg +

Lead Developer @softbtc +
Backend Operator @wiz +
Frontend Designer @markjborg

HTTP API

diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts index 329b82aea..4a9679213 100644 --- a/frontend/src/app/components/address/address.component.ts +++ b/frontend/src/app/components/address/address.component.ts @@ -36,6 +36,7 @@ export class AddressComponent implements OnInit, OnDestroy { this.isLoadingAddress = true; this.isLoadingTransactions = true; this.transactions = null; + document.body.scrollTo(0, 0); this.addressString = params.get('id') || ''; return this.electrsApiService.getAddress$(this.addressString); }) @@ -44,7 +45,6 @@ export class AddressComponent implements OnInit, OnDestroy { this.address = address; this.websocketService.startTrackAddress(address.address); this.isLoadingAddress = false; - document.body.scrollTo({ top: 0, behavior: 'smooth' }); this.getAddressTransactions(address.address); }, (error) => { diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index aaa18fc1a..5bb0b6cfa 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -42,6 +42,7 @@ export class BlockComponent implements OnInit { } this.blockHash = blockHash; + document.body.scrollTo(0, 0); if (history.state.data && history.state.data.block) { this.blockHeight = history.state.data.block.height; @@ -57,7 +58,6 @@ export class BlockComponent implements OnInit { this.blockHeight = block.height; this.isLoadingBlock = false; this.getBlockTransactions(block.id); - document.body.scrollTo({ top: 0, behavior: 'smooth' }); }, (error) => { this.error = error; 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 94e95c2b1..9ccba9c52 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 7c804bb67..7e96cb8c0 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; - left: 30px; + right: 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 c80a0ce33..44d3725ec 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -10,15 +10,18 @@ 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; - - arrowVisible = false; + blockWidth = 125; + blockPadding = 30; arrowLeftPx = 30; + rightPosition = 0; + arrowVisible = false; constructor( private stateService: StateService, @@ -53,10 +56,38 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { this.arrowVisible = false; return; } - const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight); - if (blockindex !== -1) { - this.arrowVisible = true; - this.arrowLeftPx = blockindex * 155 + 30; + 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; + } } } diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html index 48b4e7990..f9e9e2d75 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/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss index d1da713b9..8cb1b3cc7 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.scss +++ b/frontend/src/app/components/blockchain/blockchain.component.scss @@ -23,6 +23,7 @@ .position-container { position: absolute; left: 50%; + top: 75px; } @media (max-width: 767.98px) { diff --git a/frontend/src/app/components/explorer/explorer.component.html b/frontend/src/app/components/explorer/explorer.component.html index ca7c97f3c..445e3c16f 100644 --- a/frontend/src/app/components/explorer/explorer.component.html +++ b/frontend/src/app/components/explorer/explorer.component.html @@ -1,20 +1,14 @@ -
- -
- - - - - - - -
+ + + + +
diff --git a/frontend/src/app/components/explorer/explorer.component.ts b/frontend/src/app/components/explorer/explorer.component.ts index fb4924df2..ef31fbdd6 100644 --- a/frontend/src/app/components/explorer/explorer.component.ts +++ b/frontend/src/app/components/explorer/explorer.component.ts @@ -1,10 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-explorer', templateUrl: './explorer.component.html', - styleUrls: ['./explorer.component.scss'] + styleUrls: ['./explorer.component.scss'], }) export class ExplorerComponent implements OnInit { view: 'blocks' | 'transactions' = 'blocks'; diff --git a/frontend/src/app/components/footer/footer.component.html b/frontend/src/app/components/footer/footer.component.html index 13a303a68..981f3c2de 100644 --- a/frontend/src/app/components/footer/footer.component.html +++ b/frontend/src/app/components/footer/footer.component.html @@ -1,17 +1,18 @@