You can manually install Mempool on your own server, but this requires advanced sysadmin skills since you will be manually configuring everything. You could also use our Docker images.
In any case, we only provide support for manual deployments to enterprise sponsors.
+For casual users, we strongly suggest installing Mempool using one of the 1-click install methods.
Below is a reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }}
Note that we enforce rate limits. If you exceed these limits, you will get an HTTP 429 error. If you repeatedly exceed the limits, you may be banned from accessing the service altogether. Consider an enterprise sponsorship if you need higher API limits.
+Note that we enforce rate limits. If you exceed these limits, you will get an HTTP 429 error. If you repeatedly exceed the limits, you may be banned from accessing the service altogether. Consider an enterprise sponsorship if you need higher API limits.
{{ item.title }}
@@ -268,7 +268,7 @@You can manually install Mempool on your own server, but this requires advanced sysadmin skills since you will be manually configuring everything. You could also use our Docker images.
In any case, we only provide support for manual deployments to enterprise sponsors.
+You can manually install Mempool on your own server, but this requires advanced sysadmin skills since you will be manually configuring everything. You could also use our Docker images.
In any case, we only provide support for manual deployments to enterprise sponsors.
For casual users, we strongly suggest installing Mempool using one of the 1-click install methods.
| Reward | -Hashrate (24h) | -Avg Health | +Reward | +Hashrate (24h) | +Avg Health |
|---|
| Reward | -Hashrate (24h) | -Avg Health | +Reward | +Hashrate (24h) | +Avg Health |
|---|
| Blocks 24h | -1w | -All | +Blocks 24h | +1w | +All |
|---|
| Blocks 24h | -1w | -All | +Blocks 24h | +1w | +All |
|---|
| Reward | -Hashrate (24h) | -Avg Health | +Reward | +Hashrate (24h) | +Avg Health |
|---|
| Reward | -Hashrate (24h) | -Avg Health | +Reward | +Hashrate (24h) | +Avg Health |
|---|
| Blocks 24h | -1w | -All | +Blocks 24h | +1w | +All |
|---|
| Blocks 24h | -1w | -All | +Blocks 24h | +1w | +All |
|---|
-
+
Date: Fri, 16 Jun 2023 12:44:55 -0400
Subject: [PATCH 034/255] scroll selected mempool block into view
---
.../app/components/start/start.component.ts | 40 ++++++++++++++-----
1 file changed, 31 insertions(+), 9 deletions(-)
diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts
index 1793818a9..7a3b6b492 100644
--- a/frontend/src/app/components/start/start.component.ts
+++ b/frontend/src/app/components/start/start.component.ts
@@ -40,7 +40,7 @@ export class StartComponent implements OnInit, OnDestroy {
minScrollWidth: number;
pageIndex: number = 0;
pages: any[] = [];
- pendingMark: number | void = null;
+ pendingMark: number | null = null;
lastUpdate: number = 0;
lastMouseX: number;
velocity: number = 0;
@@ -71,19 +71,29 @@ export class StartComponent implements OnInit, OnDestroy {
this.chainTip = height;
this.tipIsSet = true;
this.updatePages();
- if (this.pendingMark != null) {
- this.scrollToBlock(this.pendingMark);
- this.pendingMark = null;
- }
+ this.applyPendingMarkArrow();
});
this.markBlockSubscription = this.stateService.markBlock$.subscribe((mark) => {
+ let blockHeight;
if (mark?.blockHeight != null) {
+ blockHeight = mark.blockHeight;
+ } else if (mark?.mempoolBlockIndex != null) {
+ blockHeight = -1 - mark.mempoolBlockIndex;
+ } else if (mark?.mempoolPosition?.block != null) {
+ blockHeight = -1 - mark.mempoolPosition.block;
+ }
+ if (blockHeight != null) {
if (this.tipIsSet) {
- if (!this.blockInViewport(mark.blockHeight)) {
- this.scrollToBlock(mark.blockHeight);
+ let scrollToHeight = blockHeight;
+ if (blockHeight < 0) {
+ scrollToHeight = this.chainTip - blockHeight;
}
- } else {
- this.pendingMark = mark.blockHeight;
+ if (!this.blockInViewport(scrollToHeight)) {
+ this.scrollToBlock(scrollToHeight);
+ }
+ }
+ if (!this.tipIsSet || (blockHeight < 0 && !this.mempoolOffset)) {
+ this.pendingMark = blockHeight;
}
}
});
@@ -122,6 +132,18 @@ export class StartComponent implements OnInit, OnDestroy {
const delta = offset - this.mempoolOffset;
this.addConvertedScrollOffset(delta);
this.mempoolOffset = offset;
+ this.applyPendingMarkArrow();
+ }
+
+ applyPendingMarkArrow(): void {
+ if (this.pendingMark != null) {
+ if (this.pendingMark < 0) {
+ this.scrollToBlock(this.chainTip - this.pendingMark);
+ } else {
+ this.scrollToBlock(this.pendingMark);
+ }
+ this.pendingMark = null;
+ }
}
@HostListener('window:resize', ['$event'])
From 58b805253029f71bd1ce98dd5d160231e48fceb4 Mon Sep 17 00:00:00 2001
From: Mononaut
Date: Mon, 19 Jun 2023 15:19:34 -0400
Subject: [PATCH 035/255] don't reset blockchain position on every mempool
update
---
.../src/app/components/start/start.component.ts | 16 ++++++++++++++--
.../transaction/transaction.component.ts | 2 ++
frontend/src/app/services/state.service.ts | 3 ++-
3 files changed, 18 insertions(+), 3 deletions(-)
diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts
index 7a3b6b492..22d3d6350 100644
--- a/frontend/src/app/components/start/start.component.ts
+++ b/frontend/src/app/components/start/start.component.ts
@@ -1,6 +1,6 @@
import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild, Input } from '@angular/core';
import { Subscription } from 'rxjs';
-import { StateService } from '../../services/state.service';
+import { MarkBlockState, StateService } from '../../services/state.service';
import { specialBlocks } from '../../app.constants';
@Component({
@@ -24,6 +24,7 @@ export class StartComponent implements OnInit, OnDestroy {
chainTipSubscription: Subscription;
chainTip: number = -1;
tipIsSet: boolean = false;
+ lastMark: MarkBlockState;
markBlockSubscription: Subscription;
blockCounterSubscription: Subscription;
@ViewChild('blockchainContainer') blockchainContainer: ElementRef;
@@ -75,20 +76,31 @@ export class StartComponent implements OnInit, OnDestroy {
});
this.markBlockSubscription = this.stateService.markBlock$.subscribe((mark) => {
let blockHeight;
+ let newMark = true;
if (mark?.blockHeight != null) {
+ if (this.lastMark?.blockHeight === mark.blockHeight) {
+ newMark = false;
+ }
blockHeight = mark.blockHeight;
} else if (mark?.mempoolBlockIndex != null) {
+ if (this.lastMark?.mempoolBlockIndex === mark.mempoolBlockIndex || (mark.txid && this.lastMark?.txid === mark.txid)) {
+ newMark = false;
+ }
blockHeight = -1 - mark.mempoolBlockIndex;
} else if (mark?.mempoolPosition?.block != null) {
+ if (this.lastMark?.txid === mark.txid) {
+ newMark = false;
+ }
blockHeight = -1 - mark.mempoolPosition.block;
}
+ this.lastMark = mark;
if (blockHeight != null) {
if (this.tipIsSet) {
let scrollToHeight = blockHeight;
if (blockHeight < 0) {
scrollToHeight = this.chainTip - blockHeight;
}
- if (!this.blockInViewport(scrollToHeight)) {
+ if (newMark && !this.blockInViewport(scrollToHeight)) {
this.scrollToBlock(scrollToHeight);
}
}
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index dd32b05e8..85b90a378 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -240,6 +240,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.mempoolPosition = txPosition.position;
if (this.tx && !this.tx.status.confirmed) {
this.stateService.markBlock$.next({
+ txid: txPosition.txid,
mempoolPosition: this.mempoolPosition
});
this.txInBlockIndex = this.mempoolPosition.block;
@@ -359,6 +360,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
} else {
if (tx.cpfpChecked) {
this.stateService.markBlock$.next({
+ txid: tx.txid,
txFeePerVSize: tx.effectiveFeePerVsize,
mempoolPosition: this.mempoolPosition,
});
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 31f5f3aab..4f00622a8 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -8,8 +8,9 @@ import { isPlatformBrowser } from '@angular/common';
import { map, shareReplay } from 'rxjs/operators';
import { StorageService } from './storage.service';
-interface MarkBlockState {
+export interface MarkBlockState {
blockHeight?: number;
+ txid?: string;
mempoolBlockIndex?: number;
txFeePerVSize?: number;
mempoolPosition?: MempoolPosition;
From 22baf4186e04c221634aa1ba0d28b4dcb0995d3f Mon Sep 17 00:00:00 2001
From: Mononaut
Date: Mon, 19 Jun 2023 12:46:10 -0400
Subject: [PATCH 036/255] Add 'all time' option for mempool graph
---
backend/src/api/statistics/statistics-api.ts | 15 +++++++++++++--
backend/src/api/statistics/statistics.routes.ts | 12 +++++++-----
.../statistics/statistics.component.html | 3 +++
.../components/statistics/statistics.component.ts | 11 +++++++++--
frontend/src/app/services/api.service.ts | 4 ++++
5 files changed, 36 insertions(+), 9 deletions(-)
diff --git a/backend/src/api/statistics/statistics-api.ts b/backend/src/api/statistics/statistics-api.ts
index 1e8b0b7bb..77bf66a2c 100644
--- a/backend/src/api/statistics/statistics-api.ts
+++ b/backend/src/api/statistics/statistics-api.ts
@@ -211,7 +211,7 @@ class StatisticsApi {
CAST(avg(vsize_1800) as DOUBLE) as vsize_1800,
CAST(avg(vsize_2000) as DOUBLE) as vsize_2000 \
FROM statistics \
- WHERE added BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW() \
+ ${interval === 'ALL TIME' ? '' : `WHERE added BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`} \
GROUP BY UNIX_TIMESTAMP(added) DIV ${div} \
ORDER BY statistics.added DESC;`;
}
@@ -259,7 +259,7 @@ class StatisticsApi {
vsize_1800,
vsize_2000 \
FROM statistics \
- WHERE added BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW() \
+ ${interval === 'ALL TIME' ? '' : `WHERE added BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`} \
GROUP BY UNIX_TIMESTAMP(added) DIV ${div} \
ORDER BY statistics.added DESC;`;
}
@@ -386,6 +386,17 @@ class StatisticsApi {
}
}
+ public async $listAll(): Promise {
+ try {
+ const query = this.getQueryForDays(43200, 'ALL TIME'); // 12h interval
+ const [rows] = await DB.query({ sql: query, timeout: this.queryTimeout });
+ return this.mapStatisticToOptimizedStatistic(rows as Statistic[]);
+ } catch (e) {
+ logger.err('$listAll() error' + (e instanceof Error ? e.message : e));
+ return [];
+ }
+ }
+
private mapStatisticToOptimizedStatistic(statistic: Statistic[]): OptimizedStatistic[] {
return statistic.map((s) => {
return {
diff --git a/backend/src/api/statistics/statistics.routes.ts b/backend/src/api/statistics/statistics.routes.ts
index 2a5871dd6..31db5198c 100644
--- a/backend/src/api/statistics/statistics.routes.ts
+++ b/backend/src/api/statistics/statistics.routes.ts
@@ -15,10 +15,11 @@ class StatisticsRoutes {
.get(config.MEMPOOL.API_URL_PREFIX + 'statistics/2y', this.$getStatisticsByTime.bind(this, '2y'))
.get(config.MEMPOOL.API_URL_PREFIX + 'statistics/3y', this.$getStatisticsByTime.bind(this, '3y'))
.get(config.MEMPOOL.API_URL_PREFIX + 'statistics/4y', this.$getStatisticsByTime.bind(this, '4y'))
+ .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/all', this.$getStatisticsByTime.bind(this, 'all'))
;
}
- private async $getStatisticsByTime(time: '2h' | '24h' | '1w' | '1m' | '3m' | '6m' | '1y' | '2y' | '3y' | '4y', req: Request, res: Response) {
+ private async $getStatisticsByTime(time: '2h' | '24h' | '1w' | '1m' | '3m' | '6m' | '1y' | '2y' | '3y' | '4y' | 'all', req: Request, res: Response) {
res.header('Pragma', 'public');
res.header('Cache-control', 'public');
res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
@@ -26,10 +27,6 @@ class StatisticsRoutes {
try {
let result;
switch (time as string) {
- case '2h':
- result = await statisticsApi.$list2H();
- res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
- break;
case '24h':
result = await statisticsApi.$list24H();
res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
@@ -58,8 +55,13 @@ class StatisticsRoutes {
case '4y':
result = await statisticsApi.$list4Y();
break;
+ case 'all':
+ result = await statisticsApi.$listAll();
+ break;
default:
result = await statisticsApi.$list2H();
+ res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
+ break;
}
res.json(result);
} catch (e) {
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 1b291e978..f36d74963 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -53,6 +53,9 @@
+
-
= new EventEmitter();
network: string;
timeLtrSubscription: Subscription;
timeLtr: boolean = this.stateService.timeLtr.value;
ltrTransitionEnabled = false;
+ flipping = false;
connectionStateSubscription: Subscription;
loadingTip: boolean = true;
connected: boolean = true;
+ dividerOffset: number = 0;
+ mempoolOffset: number = 0;
+
constructor(
public stateService: StateService,
+ private cd: ChangeDetectorRef,
) {}
- ngOnInit() {
+ ngOnInit(): void {
+ this.onResize();
this.network = this.stateService.network;
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
});
this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
this.connected = (state === 2);
- })
- firstValueFrom(this.stateService.chainTip$).then(tip => {
+ });
+ firstValueFrom(this.stateService.chainTip$).then(() => {
this.loadingTip = false;
});
}
- ngOnDestroy() {
+ ngOnDestroy(): void {
this.timeLtrSubscription.unsubscribe();
this.connectionStateSubscription.unsubscribe();
}
- trackByPageFn(index: number, item: { index: number }) {
+ trackByPageFn(index: number, item: { index: number }): number {
return item.index;
}
- toggleTimeDirection() {
- this.ltrTransitionEnabled = true;
- this.stateService.timeLtr.next(!this.timeLtr);
+ toggleTimeDirection(): void {
+ this.ltrTransitionEnabled = false;
+ const prevOffset = this.mempoolOffset;
+ this.mempoolOffset = 0;
+ this.mempoolOffsetChange.emit(0);
+ setTimeout(() => {
+ this.ltrTransitionEnabled = true;
+ this.flipping = true;
+ this.stateService.timeLtr.next(!this.timeLtr);
+ setTimeout(() => {
+ this.ltrTransitionEnabled = false;
+ this.flipping = false;
+ this.mempoolOffset = prevOffset;
+ this.mempoolOffsetChange.emit(this.mempoolOffset);
+ }, 1000);
+ }, 0);
+ this.cd.markForCheck();
+ }
+
+ onMempoolWidthChange(width): void {
+ if (this.flipping) {
+ return;
+ }
+ this.mempoolOffset = Math.max(0, width - this.dividerOffset);
+ this.cd.markForCheck();
+ setTimeout(() => {
+ this.mempoolOffsetChange.emit(this.mempoolOffset);
+ }, 0);
+ }
+
+ @HostListener('window:resize', ['$event'])
+ onResize(): void {
+ if (window.innerWidth >= 768) {
+ if (this.stateService.isLiquid()) {
+ this.dividerOffset = 420;
+ } else {
+ this.dividerOffset = window.innerWidth * 0.5;
+ }
+ } else {
+ if (this.stateService.isLiquid()) {
+ this.dividerOffset = window.innerWidth * 0.5;
+ } else {
+ this.dividerOffset = window.innerWidth * 0.95;
+ }
+ }
+ this.cd.markForCheck();
}
}
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 561f01585..3e7ba310a 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -1,9 +1,9 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
import { Subscription, Observable, fromEvent, merge, of, combineLatest } from 'rxjs';
import { MempoolBlock } from '../../interfaces/websocket.interface';
import { StateService } from '../../services/state.service';
import { Router } from '@angular/router';
-import { take, map, switchMap } from 'rxjs/operators';
+import { take, map, switchMap, tap } from 'rxjs/operators';
import { feeLevels, mempoolFeeColors } from '../../app.constants';
import { specialBlocks } from '../../app.constants';
import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
@@ -29,6 +29,9 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() count: number = null;
@Input() spotlight: number = 0;
@Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`;
+ @Input() allBlocks: boolean = false;
+
+ @Output() widthChange: EventEmitter = new EventEmitter();
specialBlocks = specialBlocks;
mempoolBlocks: MempoolBlock[] = [];
@@ -145,7 +148,12 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.updateMempoolBlockStyles();
this.calculateTransactionPosition();
+
return this.mempoolBlocks;
+ }),
+ tap(() => {
+ this.cd.markForCheck();
+ this.widthChange.emit(this.containerOffset + this.mempoolBlocks.length * this.blockOffset);
})
);
@@ -254,7 +262,10 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
reduceEmptyBlocksToFitScreen(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)));
+ let blocksAmount = this.stateService.env.MEMPOOL_BLOCKS_AMOUNT;
+ if (!this.allBlocks) {
+ blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
+ }
while (blocks.length < blocksAmount) {
blocks.push({
blockSize: 0,
@@ -274,10 +285,10 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2;
- let blocksAmount;
+ let blocksAmount = this.stateService.env.MEMPOOL_BLOCKS_AMOUNT;
if (this.count) {
blocksAmount = 8;
- } else {
+ } else if (!this.allBlocks) {
blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
}
while (blocks.length > blocksAmount) {
diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html
index ec4bf4805..5cf7b4fd9 100644
--- a/frontend/src/app/components/start/start.component.html
+++ b/frontend/src/app/components/start/start.component.html
@@ -18,7 +18,7 @@
(dragstart)="onDragStart($event)"
(scroll)="onScroll($event)"
>
-