Add explanatory tooltips in incoming txs widget

Graphs loading indicators update

.github/workflows/ci.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Install ${{ steps.gettoolchain.outputs.toolchain }} Rust toolchain
         # Latest version available on this commit is 1.71.1
         # Commit date is Aug 3, 2023
-        uses: dtolnay/rust-toolchain@dc6353516c68da0f06325f42ad880f76a5e77ec9
+        uses: dtolnay/rust-toolchain@d8352f6b1d2e870bc5716e7a6d9b65c4cc244a1a
         with:
           toolchain: ${{ steps.gettoolchain.outputs.toolchain }}
 
@@ -257,7 +257,7 @@ jobs:
             spec: |
               cypress/e2e/mainnet/*.spec.ts
               cypress/e2e/signet/*.spec.ts
-              cypress/e2e/testnet/*.spec.ts
+              cypress/e2e/testnet4/*.spec.ts
           - module: "liquid"
             spec: |
               cypress/e2e/liquid/liquid.spec.ts

backend/.eslintrc

@@ -20,6 +20,7 @@
     "@typescript-eslint/no-this-alias": 1,
     "@typescript-eslint/no-var-requires": 1,
     "@typescript-eslint/explicit-function-return-type": 1,
+    "@typescript-eslint/no-unused-vars": 1,
     "no-console": 1,
     "no-constant-condition": 1,
     "no-dupe-else-if": 1,
@@ -32,6 +33,7 @@
     "prefer-rest-params": 1,
     "quotes": [1, "single", { "allowTemplateLiterals": true }],
     "semi": 1,
+    "curly": [1, "all"],
     "eqeqeq": 1
   }
 }

backend/README.md

@@ -103,7 +103,7 @@ In particular, make sure:
 - the correct Bitcoin Core RPC credentials are specified in `CORE_RPC`
 - the correct `BACKEND` is specified in `MEMPOOL`:
   - "electrum" if you're using [romanz/electrs](https://github.com/romanz/electrs) or [cculianu/Fulcrum](https://github.com/cculianu/Fulcrum)
-  - "esplora" if you're using [Blockstream/electrs](https://github.com/Blockstream/electrs)
+  - "esplora" if you're using [mempool/electrs](https://github.com/mempool/electrs)
   - "none" if you're not using any Electrum Server
 
 ### 6. Run Mempool Backend

backend/mempool-config.sample.json

@@ -35,7 +35,8 @@
     "MAX_PUSH_TX_SIZE_WEIGHT": 4000000,
     "ALLOW_UNREACHABLE": true,
     "PRICE_UPDATES_PER_HOUR": 1,
-    "MAX_TRACKED_ADDRESSES": 100
+    "MAX_TRACKED_ADDRESSES": 100,
+    "UNIX_SOCKET_PATH": ""
   },
   "CORE_RPC": {
     "HOST": "127.0.0.1",
@@ -138,6 +139,8 @@
     "ENABLED": false,
     "AUDIT": false,
     "AUDIT_START_HEIGHT": 774000,
+    "STATISTICS": false,
+    "STATISTICS_START_TIME": 1481932800,
     "SERVERS": [
       "list",
       "of",
@@ -151,6 +154,7 @@
   },
   "FIAT_PRICE": {
     "ENABLED": true,
+    "PAID": false,
     "API_KEY": "your-api-key-from-freecurrencyapi.com"
   }
 }

backend/package-lock.json

@@ -13,17 +13,17 @@
         "@babel/core": "^7.24.0",
         "@mempool/electrum-client": "1.1.9",
         "@types/node": "^18.15.3",
-        "axios": "~1.6.1",
+        "axios": "~1.7.2",
         "bitcoinjs-lib": "~6.1.3",
         "crypto-js": "~4.2.0",
         "express": "~4.19.2",
         "maxmind": "~4.3.11",
-        "mysql2": "~3.9.1",
+        "mysql2": "~3.9.7",
         "redis": "^4.6.6",
         "rust-gbt": "file:./rust-gbt",
         "socks-proxy-agent": "~7.0.0",
         "typescript": "~4.9.3",
-        "ws": "~8.16.0"
+        "ws": "~8.17.0"
       },
       "devDependencies": {
         "@babel/code-frame": "^7.18.6",
@@ -2318,11 +2318,11 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/axios": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
-      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
       "dependencies": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -6197,9 +6197,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mysql2": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.1.tgz",
-      "integrity": "sha512-3njoWAAhGBYy0tWBabqUQcLtczZUxrmmtc2vszQUekg3kTJyZ5/IeLC3Fo04u6y6Iy5Sba7pIIa2P/gs8D3ZeQ==",
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.7.tgz",
+      "integrity": "sha512-KnJT8vYRcNAZv73uf9zpXqNbvBG7DJrs+1nACsjZP1HMJ1TgXEy8wnNilXAn/5i57JizXKtrUtwDB7HxT9DDpw==",
       "dependencies": {
         "denque": "^2.1.0",
         "generate-function": "^2.3.1",
@@ -7690,9 +7690,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -9509,11 +9509,11 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "axios": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
-      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
       "requires": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -12382,9 +12382,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "mysql2": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.1.tgz",
-      "integrity": "sha512-3njoWAAhGBYy0tWBabqUQcLtczZUxrmmtc2vszQUekg3kTJyZ5/IeLC3Fo04u6y6Iy5Sba7pIIa2P/gs8D3ZeQ==",
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.7.tgz",
+      "integrity": "sha512-KnJT8vYRcNAZv73uf9zpXqNbvBG7DJrs+1nACsjZP1HMJ1TgXEy8wnNilXAn/5i57JizXKtrUtwDB7HxT9DDpw==",
       "requires": {
         "denque": "^2.1.0",
         "generate-function": "^2.3.1",
@@ -13424,9 +13424,9 @@
       }
     },
     "ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
       "requires": {}
     },
     "y18n": {

backend/package.json

@@ -42,17 +42,17 @@
     "@babel/core": "^7.24.0",
     "@mempool/electrum-client": "1.1.9",
     "@types/node": "^18.15.3",
-    "axios": "~1.6.1",
+    "axios": "~1.7.2",
     "bitcoinjs-lib": "~6.1.3",
     "crypto-js": "~4.2.0",
     "express": "~4.19.2",
     "maxmind": "~4.3.11",
-    "mysql2": "~3.9.1",
+    "mysql2": "~3.9.7",
     "rust-gbt": "file:./rust-gbt",
     "redis": "^4.6.6",
     "socks-proxy-agent": "~7.0.0",
     "typescript": "~4.9.3",
-    "ws": "~8.16.0"
+    "ws": "~8.17.0"
   },
   "devDependencies": {
     "@babel/code-frame": "^7.18.6",

backend/src/__fixtures__/mempool-config.template.json

@@ -7,6 +7,7 @@
     "BLOCKS_SUMMARIES_INDEXING": true,
     "GOGGLES_INDEXING": false,
     "HTTP_PORT": 1,
+    "UNIX_SOCKET_PATH": "/mempool/socket/mempool-bitcoin-mainnet",
     "SPAWN_CLUSTER_PROCS": 2,
     "API_URL_PREFIX": "__MEMPOOL_API_URL_PREFIX__",
     "AUTOMATIC_BLOCK_REINDEXING": false,
@@ -130,6 +131,8 @@
     "ENABLED": false,
     "AUDIT": false,
     "AUDIT_START_HEIGHT": 774000,
+    "STATISTICS": false,
+    "STATISTICS_START_TIME": 1481932800,
     "SERVERS": []
   },
   "MEMPOOL_SERVICES": {
@@ -143,6 +146,7 @@
   },
   "FIAT_PRICE": {
     "ENABLED": true,
+    "PAID": false,
     "API_KEY": "__MEMPOOL_CURRENCY_API_KEY__"
   }
 }

backend/src/__tests__/config.test.ts

@@ -20,6 +20,7 @@ describe('Mempool Backend Config', () => {
         BLOCKS_SUMMARIES_INDEXING: false,
         GOGGLES_INDEXING: false,
         HTTP_PORT: 8999,
+        UNIX_SOCKET_PATH: '',
         SPAWN_CLUSTER_PROCS: 0,
         API_URL_PREFIX: '/api/v1/',
         AUTOMATIC_BLOCK_REINDEXING: false,
@@ -134,6 +135,8 @@ describe('Mempool Backend Config', () => {
         ENABLED: false,
         AUDIT: false,
         AUDIT_START_HEIGHT: 774000,
+        STATISTICS: false,
+        STATISTICS_START_TIME: 1481932800,
         SERVERS: []
       });
 
@@ -150,6 +153,7 @@ describe('Mempool Backend Config', () => {
 
       expect(config.FIAT_PRICE).toStrictEqual({
         ENABLED: true,
+        PAID: false,
         API_KEY: '',
       });
     });

backend/src/api/acceleration/acceleration.routes.ts

@@ -1,12 +1,14 @@
-import { Application, Request, Response } from "express";
-import config from "../../config";
-import axios from "axios";
-import logger from "../../logger";
+import { Application, Request, Response } from 'express';
+import config from '../../config';
+import axios from 'axios';
+import logger from '../../logger';
+import mempool from '../mempool';
+import AccelerationRepository from '../../repositories/AccelerationRepository';
 
 class AccelerationRoutes {
   private tag = 'Accelerator';
 
-  public initRoutes(app: Application) {
+  public initRoutes(app: Application): void {
     app
       .get(config.MEMPOOL.API_URL_PREFIX + 'services/accelerator/accelerations', this.$getAcceleratorAccelerations.bind(this))
       .get(config.MEMPOOL.API_URL_PREFIX + 'services/accelerator/accelerations/history', this.$getAcceleratorAccelerationsHistory.bind(this))
@@ -15,41 +17,33 @@ class AccelerationRoutes {
     ;
   }
 
-  private async $getAcceleratorAccelerations(req: Request, res: Response) {
-    const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
-    try {
-      const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
-      for (const key in response.headers) {
-        res.setHeader(key, response.headers[key]); 
-      }      
-      response.data.pipe(res);
-    } catch (e) {
-      logger.err(`Unable to get current accelerations from ${url} in $getAcceleratorAccelerations(), ${e}`, this.tag);
-      res.status(500).end();
-    }
+  private async $getAcceleratorAccelerations(req: Request, res: Response): Promise<void> {
+    const accelerations = mempool.getAccelerations();
+    res.status(200).send(Object.values(accelerations));
   }
 
-  private async $getAcceleratorAccelerationsHistory(req: Request, res: Response) {
-    const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
-    try {
-      const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
-      for (const key in response.headers) {
-        res.setHeader(key, response.headers[key]); 
-      }      
-      response.data.pipe(res);
-    } catch (e) {
-      logger.err(`Unable to get acceleration history from ${url} in $getAcceleratorAccelerationsHistory(), ${e}`, this.tag);
-      res.status(500).end();
-    }
+  private async $getAcceleratorAccelerationsHistory(req: Request, res: Response): Promise<void> {
+    const history = await AccelerationRepository.$getAccelerationInfo(null, req.query.blockHeight ? parseInt(req.query.blockHeight as string, 10) : null);
+    res.status(200).send(history.map(accel => ({
+      txid: accel.txid,
+      added: accel.added,
+      status: 'completed',
+      effectiveFee: accel.effective_fee,
+      effectiveVsize: accel.effective_vsize,
+      boostRate: accel.boost_rate,
+      boostCost: accel.boost_cost,
+      blockHeight: accel.height,
+      pools: [accel.pool],
+    })));
   }
 
-  private async $getAcceleratorAccelerationsHistoryAggregated(req: Request, res: Response) {
+  private async $getAcceleratorAccelerationsHistoryAggregated(req: Request, res: Response): Promise<void> {
     const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
     try {
       const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
       for (const key in response.headers) {
-        res.setHeader(key, response.headers[key]); 
-      }      
+        res.setHeader(key, response.headers[key]);
+      }
       response.data.pipe(res);
     } catch (e) {
       logger.err(`Unable to get aggregated acceleration history from ${url} in $getAcceleratorAccelerationsHistoryAggregated(), ${e}`, this.tag);
@@ -57,13 +51,13 @@ class AccelerationRoutes {
     }
   }
 
-  private async $getAcceleratorAccelerationsStats(req: Request, res: Response) {
+  private async $getAcceleratorAccelerationsStats(req: Request, res: Response): Promise<void> {
     const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
     try {
       const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
       for (const key in response.headers) {
-        res.setHeader(key, response.headers[key]); 
-      }      
+        res.setHeader(key, response.headers[key]);
+      }
       response.data.pipe(res);
     } catch (e) {
       logger.err(`Unable to get acceleration stats from ${url} in $getAcceleratorAccelerationsStats(), ${e}`, this.tag);

backend/src/api/audit.ts

@@ -75,10 +75,6 @@ class Audit {
     let failures = 0;
     let blockIndex = 1;
     while (projectedBlocks[blockIndex] && failures < 500) {
-      if (index >= projectedBlocks[blockIndex].transactionIds.length) {
-        index = 0;
-        blockIndex++;
-      }
       const txid = projectedBlocks[blockIndex].transactionIds[index];
       const tx = mempool[txid];
       if (tx) {
@@ -102,6 +98,10 @@ class Audit {
         logger.warn('projected transaction missing from mempool cache');
       }
       index++;
+      if (index >= projectedBlocks[blockIndex].transactionIds.length) {
+        index = 0;
+        blockIndex++;
+      }
     }
 
     // mark unexpected transactions in the mined block as 'added'

backend/src/api/bitcoin/bitcoin-api-abstract-factory.ts

@@ -1,4 +1,4 @@
-import { IBitcoinApi } from './bitcoin-api.interface';
+import { IBitcoinApi, TestMempoolAcceptResult } from './bitcoin-api.interface';
 import { IEsploraApi } from './esplora-api.interface';
 
 export interface AbstractBitcoinApi {
@@ -22,6 +22,7 @@ export interface AbstractBitcoinApi {
   $getScriptHash(scripthash: string): Promise<IEsploraApi.ScriptHash>;
   $getScriptHashTransactions(address: string, lastSeenTxId: string): Promise<IEsploraApi.Transaction[]>;
   $sendRawTransaction(rawTransaction: string): Promise<string>;
+  $testMempoolAccept(rawTransactions: string[], maxfeerate?: number): Promise<TestMempoolAcceptResult[]>;
   $getOutspend(txId: string, vout: number): Promise<IEsploraApi.Outspend>;
   $getOutspends(txId: string): Promise<IEsploraApi.Outspend[]>;
   $getBatchedOutspends(txId: string[]): Promise<IEsploraApi.Outspend[][]>;

backend/src/api/bitcoin/bitcoin-api.interface.ts

@@ -205,3 +205,16 @@ export namespace IBitcoinApi {
     "utxo_size_inc": number;
   }
 }
+
+export interface TestMempoolAcceptResult {
+  txid: string,
+  wtxid: string,
+  allowed?: boolean,
+  vsize?: number,
+  fees?: {
+    base: number,
+    "effective-feerate": number,
+    "effective-includes": string[],
+  },
+  ['reject-reason']?: string,
+}

backend/src/api/bitcoin/bitcoin-api.ts

@@ -1,6 +1,6 @@
 import * as bitcoinjs from 'bitcoinjs-lib';
 import { AbstractBitcoinApi, HealthCheckHost } from './bitcoin-api-abstract-factory';
-import { IBitcoinApi } from './bitcoin-api.interface';
+import { IBitcoinApi, TestMempoolAcceptResult } from './bitcoin-api.interface';
 import { IEsploraApi } from './esplora-api.interface';
 import blocks from '../blocks';
 import mempool from '../mempool';
@@ -174,6 +174,14 @@ class BitcoinApi implements AbstractBitcoinApi {
     return this.bitcoindClient.sendRawTransaction(rawTransaction);
   }
 
+  async $testMempoolAccept(rawTransactions: string[], maxfeerate?: number): Promise<TestMempoolAcceptResult[]> {
+    if (rawTransactions.length) {
+      return this.bitcoindClient.testMempoolAccept(rawTransactions, maxfeerate ?? undefined);
+    } else {
+      return [];
+    }
+  }
+
   async $getOutspend(txId: string, vout: number): Promise<IEsploraApi.Outspend> {
     const txOut = await this.bitcoindClient.getTxOut(txId, vout, false);
     return {

backend/src/api/bitcoin/bitcoin.routes.ts

@@ -55,6 +55,7 @@ class BitcoinRoutes {
           .get(config.MEMPOOL.API_URL_PREFIX + 'mempool/recent', this.getRecentMempoolTransactions)
           .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId', this.getTransaction)
           .post(config.MEMPOOL.API_URL_PREFIX + 'tx', this.$postTransaction)
+          .post(config.MEMPOOL.API_URL_PREFIX + 'txs/test', this.$testTransactions)
           .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/hex', this.getRawTransaction)
           .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/status', this.getTransactionStatus)
           .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/outspends', this.getTransactionOutspends)
@@ -749,6 +750,19 @@ class BitcoinRoutes {
     }
   }
 
+  private async $testTransactions(req: Request, res: Response) {
+    try {
+      const rawTxs = Common.getTransactionsFromRequest(req);
+      const maxfeerate = parseFloat(req.query.maxfeerate as string);
+      const result = await bitcoinApi.$testMempoolAccept(rawTxs, maxfeerate);
+      res.send(result);
+    } catch (e: any) {
+      res.setHeader('content-type', 'text/plain');
+      res.status(400).send(e.message && e.code ? 'testmempoolaccept RPC error: ' + JSON.stringify({ code: e.code, message: e.message })
+        : (e.message || 'Error'));
+    }
+  }
+
 }
 
 export default new BitcoinRoutes();

backend/src/api/bitcoin/esplora-api.ts

@@ -5,6 +5,7 @@ import { AbstractBitcoinApi, HealthCheckHost } from './bitcoin-api-abstract-fact
 import { IEsploraApi } from './esplora-api.interface';
 import logger from '../../logger';
 import { Common } from '../common';
+import { TestMempoolAcceptResult } from './bitcoin-api.interface';
 
 interface FailoverHost {
   host: string,
@@ -327,6 +328,10 @@ class ElectrsApi implements AbstractBitcoinApi {
     throw new Error('Method not implemented.');
   }
 
+  $testMempoolAccept(rawTransactions: string[], maxfeerate?: number): Promise<TestMempoolAcceptResult[]> {
+    throw new Error('Method not implemented.');
+  }
+
   $getOutspend(txId: string, vout: number): Promise<IEsploraApi.Outspend> {
     return this.failoverRouter.$get<IEsploraApi.Outspend>('/tx/' + txId + '/outspend/' + vout);
   }

backend/src/api/blocks.ts

@@ -29,6 +29,7 @@ import websocketHandler from './websocket-handler';
 import redisCache from './redis-cache';
 import rbfCache from './rbf-cache';
 import { calcBitsDifference } from './difficulty-adjustment';
+import AccelerationRepository from '../repositories/AccelerationRepository';
 
 class Blocks {
   private blocks: BlockExtended[] = [];
@@ -838,8 +839,11 @@ class Blocks {
       } else {
         this.currentBlockHeight++;
         logger.debug(`New block found (#${this.currentBlockHeight})!`);
-        this.updateTimerProgress(timer, `getting orphaned blocks for ${this.currentBlockHeight}`);
-        await chainTips.updateOrphanedBlocks();
+        // skip updating the orphan block cache if we've fallen behind the chain tip
+        if (this.currentBlockHeight >= blockHeightTip - 2) {
+          this.updateTimerProgress(timer, `getting orphaned blocks for ${this.currentBlockHeight}`);
+          await chainTips.updateOrphanedBlocks();
+        }
       }
 
       this.updateTimerProgress(timer, `getting block data for ${this.currentBlockHeight}`);
@@ -872,6 +876,7 @@ class Blocks {
             await BlocksRepository.$deleteBlocksFrom(lastBlock.height - 10);
             await HashratesRepository.$deleteLastEntries();
             await cpfpRepository.$deleteClustersFrom(lastBlock.height - 10);
+            await AccelerationRepository.$deleteAccelerationsFrom(lastBlock.height - 10);
             this.blocks = this.blocks.slice(0, -10);
             this.updateTimerProgress(timer, `rolled back chain divergence from ${this.currentBlockHeight}`);
             for (let i = 10; i >= 0; --i) {
@@ -974,6 +979,9 @@ class Blocks {
       if (this.blocks.length > config.MEMPOOL.INITIAL_BLOCKS_AMOUNT * 4) {
         this.blocks = this.blocks.slice(-config.MEMPOOL.INITIAL_BLOCKS_AMOUNT * 4);
       }
+      blockSummary.transactions.forEach(tx => {
+        delete tx.acc;
+      });
       this.blockSummaries.push(blockSummary);
       if (this.blockSummaries.length > config.MEMPOOL.INITIAL_BLOCKS_AMOUNT * 4) {
         this.blockSummaries = this.blockSummaries.slice(-config.MEMPOOL.INITIAL_BLOCKS_AMOUNT * 4);
@@ -1117,6 +1125,7 @@ class Blocks {
           }
           return {
             txid: tx.txid,
+            time: tx.firstSeen,
             fee: tx.fee || 0,
             vsize: tx.vsize,
             value: Math.round(tx.vout.reduce((acc, vout) => acc + (vout.value ? vout.value : 0), 0)),

backend/src/api/chain-tips.ts

@@ -12,32 +12,68 @@ export interface OrphanedBlock {
   height: number;
   hash: string;
   status: 'valid-fork' | 'valid-headers' | 'headers-only';
+  prevhash: string;
 }
 
 class ChainTips {
   private chainTips: ChainTip[] = [];
-  private orphanedBlocks: OrphanedBlock[] = [];
+  private orphanedBlocks: { [hash: string]: OrphanedBlock } = {};
+  private blockCache: { [hash: string]: OrphanedBlock } = {};
+  private orphansByHeight: { [height: number]: OrphanedBlock[] } = {};
 
   public async updateOrphanedBlocks(): Promise<void> {
     try {
       this.chainTips = await bitcoinClient.getChainTips();
-      this.orphanedBlocks = [];
+
+      const start = Date.now();
+      const breakAt = start + 10000;
+      let newOrphans = 0;
+      this.orphanedBlocks = {};
 
       for (const chain of this.chainTips) {
         if (chain.status === 'valid-fork' || chain.status === 'valid-headers') {
-          let block = await bitcoinClient.getBlock(chain.hash);
-          while (block && block.confirmations === -1) {
-            this.orphanedBlocks.push({
-              height: block.height,
-              hash: block.hash,
-              status: chain.status
-            });
-            block = await bitcoinClient.getBlock(block.previousblockhash);
+          const orphans: OrphanedBlock[] = [];
+          let hash = chain.hash;
+          do {
+            let orphan = this.blockCache[hash];
+            if (!orphan) {
+              const block = await bitcoinClient.getBlock(hash);
+              if (block && block.confirmations === -1) {
+                newOrphans++;
+                orphan = {
+                  height: block.height,
+                  hash: block.hash,
+                  status: chain.status,
+                  prevhash: block.previousblockhash,
+                };
+                this.blockCache[hash] = orphan;
+              }
+            }
+            if (orphan) {
+              orphans.push(orphan);
+            }
+            hash = orphan?.prevhash;
+          } while (hash && (Date.now() < breakAt));
+          for (const orphan of orphans) {
+            this.orphanedBlocks[orphan.hash] = orphan;
           }
         }
+        if (Date.now() >= breakAt) {
+          logger.debug(`Breaking orphaned blocks updater after 10s, will continue next block`);
+          break;
+        }
       }
 
-      logger.debug(`Updated orphaned blocks cache. Found ${this.orphanedBlocks.length} orphaned blocks`);
+      this.orphansByHeight = {};
+      const allOrphans = Object.values(this.orphanedBlocks);
+      for (const orphan of allOrphans) {
+        if (!this.orphansByHeight[orphan.height]) {
+          this.orphansByHeight[orphan.height] = [];
+        }
+        this.orphansByHeight[orphan.height].push(orphan);
+      }
+
+      logger.debug(`Updated orphaned blocks cache. Fetched ${newOrphans} new orphaned blocks. Total ${allOrphans.length}`);
     } catch (e) {
       logger.err(`Cannot get fetch orphaned blocks. Reason: ${e instanceof Error ? e.message : e}`);
     }
@@ -48,13 +84,7 @@ class ChainTips {
       return [];
     }
 
-    const orphans: OrphanedBlock[] = [];
-    for (const block of this.orphanedBlocks) {
-      if (block.height === height) {
-        orphans.push(block);
-      }
-    }
-    return orphans;
+    return this.orphansByHeight[height] || [];
   }
 }
 

backend/src/api/common.ts

@@ -373,6 +373,21 @@ export class Common {
     ].includes(pubkey);
   }
 
+  static isInscription(vin, flags): bigint {
+    // in taproot, if the last witness item begins with 0x50, it's an annex
+    const hasAnnex = vin.witness?.[vin.witness.length - 1].startsWith('50');
+    // script spends have more than one witness item, not counting the annex (if present)
+    if (vin.witness.length > (hasAnnex ? 2 : 1)) {
+      // the script itself is the second-to-last witness item, not counting the annex
+      const asm = vin.inner_witnessscript_asm || transactionUtils.convertScriptSigAsm(vin.witness[vin.witness.length - (hasAnnex ? 3 : 2)]);
+      // inscriptions smuggle data within an 'OP_0 OP_IF ... OP_ENDIF' envelope
+      if (asm?.includes('OP_0 OP_IF')) {
+        flags |= TransactionFlags.inscription;
+      }
+    }
+    return flags;
+  }
+
   static getTransactionFlags(tx: TransactionExtended): number {
     let flags = tx.flags ? BigInt(tx.flags) : 0n;
 
@@ -409,30 +424,31 @@ export class Common {
       if (vin.sequence < 0xfffffffe) {
         rbf = true;
       }
-      switch (vin.prevout?.scriptpubkey_type) {
-        case 'p2pk': flags |= TransactionFlags.p2pk; break;
-        case 'multisig': flags |= TransactionFlags.p2ms; break;
-        case 'p2pkh': flags |= TransactionFlags.p2pkh; break;
-        case 'p2sh': flags |= TransactionFlags.p2sh; break;
-        case 'v0_p2wpkh': flags |= TransactionFlags.p2wpkh; break;
-        case 'v0_p2wsh': flags |= TransactionFlags.p2wsh; break;
-        case 'v1_p2tr': {
-          if (!vin.witness?.length) {
-            throw new Error('Taproot input missing witness data');
-          }
-          flags |= TransactionFlags.p2tr;
-          // in taproot, if the last witness item begins with 0x50, it's an annex
-          const hasAnnex = vin.witness?.[vin.witness.length - 1].startsWith('50');
-          // script spends have more than one witness item, not counting the annex (if present)
-          if (vin.witness.length > (hasAnnex ? 2 : 1)) {
-            // the script itself is the second-to-last witness item, not counting the annex
-            const asm = vin.inner_witnessscript_asm || transactionUtils.convertScriptSigAsm(vin.witness[vin.witness.length - (hasAnnex ? 3 : 2)]);
-            // inscriptions smuggle data within an 'OP_0 OP_IF ... OP_ENDIF' envelope
-            if (asm?.includes('OP_0 OP_IF')) {
-              flags |= TransactionFlags.inscription;
+      if (vin.prevout?.scriptpubkey_type) {
+        switch (vin.prevout?.scriptpubkey_type) {
+          case 'p2pk': flags |= TransactionFlags.p2pk; break;
+          case 'multisig': flags |= TransactionFlags.p2ms; break;
+          case 'p2pkh': flags |= TransactionFlags.p2pkh; break;
+          case 'p2sh': flags |= TransactionFlags.p2sh; break;
+          case 'v0_p2wpkh': flags |= TransactionFlags.p2wpkh; break;
+          case 'v0_p2wsh': flags |= TransactionFlags.p2wsh; break;
+          case 'v1_p2tr': {
+            if (!vin.witness?.length) {
+              throw new Error('Taproot input missing witness data');
             }
+            flags |= TransactionFlags.p2tr;
+            flags = Common.isInscription(vin, flags);
+          } break;
+        }
+      } else {
+        // no prevouts, optimistically check witness-bearing inputs
+        if (vin.witness?.length >= 2) {
+          try {
+            flags = Common.isInscription(vin, flags);
+          } catch {
+            // witness script parsing will fail if this isn't really a taproot output
           }
-        } break;
+        }
       }
 
       // sighash flags
@@ -930,6 +946,33 @@ export class Common {
     return this.validateTransactionHex(matches[1].toLowerCase());
   }
 
+  static getTransactionsFromRequest(req: Request, limit: number = 25): string[] {
+    if (!Array.isArray(req.body) || req.body.some(hex => typeof hex !== 'string')) {
+      throw Object.assign(new Error('Invalid request body (should be an array of hexadecimal strings)'), { code: -1 });
+    }
+
+    if (limit && req.body.length > limit) {
+      throw Object.assign(new Error('Exceeded maximum of 25 transactions'), { code: -1 });
+    }
+
+    const txs = req.body;
+
+    return txs.map(rawTx => {
+      // Support both upper and lower case hex
+      // Support both txHash= Form and direct API POST
+      const reg = /^((?:[a-fA-F0-9]{2})+)$/;
+      const matches = reg.exec(rawTx);
+      if (!matches || !matches[1]) {
+        throw Object.assign(new Error('Invalid hex string'), { code: -2 });
+      }
+
+      // Guaranteed to be a hex string of multiple of 2
+      // Guaranteed to be lower case
+      // Guaranteed to pass validation (see function below)
+      return this.validateTransactionHex(matches[1].toLowerCase());
+    });
+  }
+
   private static validateTransactionHex(txhex: string): string {
     // Do not mutate txhex
 

backend/src/api/database-migration.ts

@@ -7,7 +7,7 @@ import cpfpRepository from '../repositories/CpfpRepository';
 import { RowDataPacket } from 'mysql2';
 
 class DatabaseMigration {
-  private static currentVersion = 76;
+  private static currentVersion = 79;
   private queryTimeout = 3600_000;
   private statisticsAddedIndexed = false;
   private uniqueLogs: string[] = [];
@@ -664,6 +664,28 @@ class DatabaseMigration {
       await this.$executeQuery('ALTER TABLE `blocks_audits` ADD prioritized_txs JSON DEFAULT "[]"');
       await this.updateToSchemaVersion(76);
     }
+
+    if (databaseSchemaVersion < 77 && config.MEMPOOL.NETWORK === 'mainnet') {
+      await this.$executeQuery('ALTER TABLE `accelerations` ADD requested datetime DEFAULT NULL');
+      await this.updateToSchemaVersion(77);
+    }
+
+    if (databaseSchemaVersion < 78) {
+      await this.$executeQuery('ALTER TABLE `prices` CHANGE `time` `time` datetime NOT NULL');
+      await this.updateToSchemaVersion(78);
+    }
+
+    if (databaseSchemaVersion < 79 && config.MEMPOOL.NETWORK === 'mainnet') {
+      // Clear bad data
+      await this.$executeQuery(`TRUNCATE accelerations`);
+      this.uniqueLog(logger.notice, `'accelerations' table has been truncated`);
+      await this.$executeQuery(`
+        UPDATE state
+        SET number = 0
+        WHERE name = 'last_acceleration_block'
+      `);
+      await this.updateToSchemaVersion(79);
+    }
   }
 
   /**

backend/src/api/explorer/channels.routes.ts

@@ -54,9 +54,11 @@ class ChannelsRoutes {
 
       if (index < -1) {
         res.status(400).send('Invalid index');
+        return;
       }
       if (['open', 'active', 'closed'].includes(status) === false) {
         res.status(400).send('Invalid status');
+        return;
       }
 
       const channels = await channelsApi.$getChannelsForNode(req.query.public_key, index, 10, status);

backend/src/api/explorer/nodes.api.ts

@@ -666,7 +666,9 @@ class NodesApi {
         node.last_update = null;
       }
   
-      const sockets = (node.addresses?.map(a => a.addr).join(',')) ?? '';
+      const uniqueAddr = [...new Set(node.addresses?.map(a => a.addr))];
+      const formattedSockets = (uniqueAddr.join(',')) ?? '';
+
       const query = `INSERT INTO nodes(
           public_key,
           first_seen,
@@ -695,13 +697,13 @@ class NodesApi {
         node.alias,
         this.aliasToSearchText(node.alias),
         node.color,
-        sockets,
+        formattedSockets,
         JSON.stringify(node.features),
         node.last_update,
         node.alias,
         this.aliasToSearchText(node.alias),
         node.color,
-        sockets,
+        formattedSockets,
         JSON.stringify(node.features),
       ]);
     } catch (e) {
@@ -713,7 +715,9 @@ class NodesApi {
    * Update node sockets
    */
   public async $updateNodeSockets(publicKey: string, sockets: {network: string; addr: string}[]): Promise<void> {
-    const formattedSockets = (sockets.map(a => a.addr).join(',')) ?? '';
+    const uniqueAddr = [...new Set(sockets.map(a => a.addr))];
+
+    const formattedSockets = (uniqueAddr.join(',')) ?? '';
     try {
       await DB.query(`UPDATE nodes SET sockets = ? WHERE public_key = ?`, [formattedSockets, publicKey]);
     } catch (e) {

backend/src/api/explorer/nodes.routes.ts

@@ -48,6 +48,14 @@ class NodesRoutes {
             '032850492ee61a5f7006a2fda6925e4b4ec3782f2b6de2ff0e439ef5a38c3b2470',
             '022c80bace98831c44c32fb69755f2b353434e0ee9e7fbda29507f7ef8abea1421',
             '02c3559c833e6f99f9ca05fe503e0b4e7524dea9121344edfd3e811101e0c28680',
+            '02b36a324fa2dd3af2a63ac65f241907882829bed5002b4e14171d25c219e0d470',
+            '0231b6e8f21f9f6c057f6bf8a812f79e396ee16a66ece91939a1576ce9fb9e87a5',
+            '034b6aac206bffcbd651b7ead1ab8a0991c945dfafe19ff27dcdeadc6843ebd15c',
+            '039c065f7e344acd969ebdd4a94550915b6f24e8782ae2be540bb96c8a4fcfb86b',
+            '03d9f9f4803fc75920f14dd13d83fbecc53229a65d4ee4cd2d86fdf211f7337576',
+            '0357fe48c4dece744f70865eda66e396aab5d05e09e1145cd3b7da83f11446d4cf',
+            '02bca4d642eda631f2c8659758e2a2868e518b93503f2bfcd767749c6530a10679',
+            '03f32c99c0bb9f62dae53671d1d300565773455248f34134cc02779b881561174e',
             '032c7c7819276c4f706a04df1a0f1e10a5495994a7be4c1d3d28ca766e5a2b957b',
             '025a7e38c2834dd843591a4d23d5f09cdeb77ddca85f673c2d944a14220ff14cf7',
             '0395e2731a1673ef21d7a16a727c4fc4d4c35a861c428ce2c819c53d2b81c8bd55',
@@ -60,6 +68,14 @@ class NodesRoutes {
             '039c14fdec2d958e3d14cebf657451bbd9e039196615785e82c917f274e3fb2205',
             '033589bbcb233ffc416cefd5437c7f37e9d7cb7942d405e39e72c4c846d9b37f18',
             '029293110441c6e2eacb57e1255bf6ef05c41a6a676fe474922d33c19f98a7d584',
+            '038eb09bed4532ff36d12acc1279f55cbe8d95212d19f809e057bb50de00051fba',
+            '027b7c0278366a0268e8bd0072b14539f6cb455a7bd588ae22d888bed541f65311',
+            '02f4dd78f6eda8838029b2cdbaaea6e875e2fa373cd348ee41a7c1bb177d3fca66',
+            '036b3fb692da214a3edaac5b67903b958f5ccd8712e09aa61b67ea7acfd94b40c2',
+            '023bc8915d308e0b65f8de6867f95960141372436fce3edad5cec3f364d6ac948f',
+            '0341690503ef21d0e203dddd9e62646380d0dfc32c499e055e7f698b9064d1c736',
+            '0355d573805c018a37a5b2288378d70e9b5b438f7394abd6f467cb9b47c90eeb93',
+            '0361aa68deb561a8b47b41165848edcccb98a1b56a5ea922d9d5b30a09bb7282ea',
             '0235ad0b56ed8c42c4354444c24e971c05e769ec0b5fb0ccea42880095dc02ea2c',
             '029700819a37afea630f80e6cc461f3fd3c4ace2598a21cfbbe64d1c78d0ee69a5',
             '02c2d8b2dbf87c7894af2f1d321290e2fe6db5446cd35323987cee98f06e2e0075',
@@ -76,6 +92,14 @@ class NodesRoutes {
             '0243348cb3741cfe2d8485fa8375c29c7bc7cbb67577c363cb6987a5e5fd0052cc',
             '02cb73e631af44bee600d80f8488a9194c9dc5c7590e575c421a070d1be05bc8e9',
             '0306f55ee631aa1e2cd4d9b2bfcbc14404faec5c541cef8b2e6f779061029d09c4',
+            '030bbbd8495561a894e301fe6ba5b22f8941fc661cc0e673e0206158231d8ac130',
+            '03ee1f08e516ed083475f39c6cae4fa1eec686d004d2f105218269e27d7f2da5a4',
+            '028c378b998f476ed22d6815c170dd2a3388a43fdf791a7cff70b9997349b8447a',
+            '036f19f044d19cb1b04f14d91b6e7e5443ce337217a8c14d43861f3e86dd07bd7f',
+            '03058d61869e8b88436493648b2e3e530627edf5a0b253c285cd565c1477a5c237',
+            '0279dfedc87b47a941f1797f2c422c03aa3108914ea6b519d76537d60860535a9a',
+            '0353486b8016761e58ec8aee7305ee58d5dc66b55ef5bd8cbaf49508f66d52d62e',
+            '03df5db8eccfabcae47ff15553cfdecb2d3f56979f43a0c3578f28d056b5e35104',
             '03ddab321b760433cbf561b615ef62ac7d318630c5f51d523aaf5395b90b751956',
             '033d92c7bfd213ef1b34c90e985fb5dc77f9ec2409d391492484e57a44c4aca1de',
             '02ad010dda54253c1eb9efe38b0760657a3b43ecad62198c359c051c9d99d45781',
@@ -88,6 +112,14 @@ class NodesRoutes {
             '038310e3a786340f2bd7770704c7ccfe560fd163d9a1c99d67894597419d12cbf7',
             '03e5e9d879b72c7d67ecd483bae023bd33e695bb32b981a4021260f7b9d62bc761',
             '028d16e1a0ace4c0c0a421536d8d32ce484dfe6e2f726b7b0e7c30f12a195f8cc7',
+            '0326cf9a4ca67a5b9cdffae57293dbd6f7c5113b93010dc6f6fe4af3afde1a1739',
+            '034867e16f62cebb8c2c2c22b91117c173bbece9c8a1e5bd001374a3699551cd8f',
+            '038dfb1f1b637a8c27e342ffc6f9feca20e0b47be3244e09ae78df4998e2ae83b9',
+            '03cb1cea3394d973355c11bc61c2f689f9d3e1c3db60d205f27770f5ad83200f77',
+            '03535447b592cbdb153189b3e06a455452b1011380cb3e6511a31090c15d8efc9f',
+            '028e90e9984d262ebfa3c23fb3f335a2ae061a0bdedee03f45f72b438d9e7d2ce3',
+            '03ee0176289dc4a6111fa5ef22eed5273758c420fbe58cc1d2d76def75dd7e640c',
+            '0370b2cd9f0eaf436d5c25c93fb39210d8cc06b31f688fc2f54418aabe394aed79',
             '02ff690d06c187ab994bf83c5a2114fe5bf50112c2c817af0f788f736be9fa2070',
             '02a9f570c51a2526a5ee85802e88f9281bed771eb66a0c8a7d898430dd5d0eae45',
             '038c3de773255d3bd7a50e31e58d423baac5c90826a74d75e64b74c95475de1097',
@@ -104,6 +136,14 @@ class NodesRoutes {
             '03229ab4b7f692753e094b93df90530150680f86b535b5183b0cffd75b3df583fc',
             '03a696eb7acde991c1be97a58a9daef416659539ae462b897f5e9ae361f990228e',
             '0248bf26cf3a63ab8870f34dc0ec9e6c8c6288cdba96ba3f026f34ec0f13ac4055',
+            '021b28ecdd782fd909705d6be354db268977b1a2ac5a5275186fc19e08bb8fca93',
+            '031bec1fbd8eb7fe94d2bda108c9c3cc8c22ecfc1c3a5c11d36f5881b01b4a81a6',
+            '03879c4f827a3188574d5757e002f574265a966d70aea942169785b31369b067d5',
+            '0228d4b5a4fd73a03967b76f8b8cb37b9d0b6e7039126a9397bb732c15bed78e9b',
+            '03f58dbb629f4427f5a1dbc02e6a7ec79345fdf13a0e4163d4f3b7aea2539cf095',
+            '021cdcb8123aa670cdfc9f43909dbb297363c093883409e9e7fc82e7267f7c72bd',
+            '02f2aa2c2b7b432a70dc4d0b04afa19d48715ed3b90594d49c1c8744f2e9ebb030',
+            '03709a02fb3ab4857689a8ea0bd489a6ab6f56f8a397be578bc6d5ad22efbe3756',
             '03fbc17549ec667bccf397ababbcb4cdc0e3394345e4773079ab2774612ec9be61',
             '03da9a8623241ccf95f19cd645c6cecd4019ac91570e976eb0a128bebbc4d8a437',
             '03ca5340cf85cb2e7cf076e489f785410838de174e40be62723e8a60972ad75144',
@@ -116,6 +156,14 @@ class NodesRoutes {
             '02b6b1640fe029e304c216951af9fbefdb23b0bdc9baaf327540d31b6107841fdf',
             '03694289827203a5b3156d753071ddd5bf92e371f5a462943f9555eef6d2d6606c',
             '0283d850db7c3e8ea7cc9c4abc7afaab12bbdf72b677dcba1d608350d2537d7d43',
+            '03b4dda7878d3b7b71ecd6d4738322c7f9a9c1fb583374d2724f4ccc4947f37570',
+            '0279a35f05b5acf159429549e56fd426685c4fec191431c58738968bbc77a39f25',
+            '03cb102d796ddcf08610cd03fae8b7a1df69ff48e9e8a152af315f9edf71762eb8',
+            '036b89526f4d5ac4c317f4fd23cb9f8e4ad844498bc7950a41114d060101d995d4',
+            '0313eade145959d7036db009fd5b0bf1947a739c7c3c790b491ec9161b94e6ad1e',
+            '02b670ca4c4bb2c5ea89c3b691da98a194cfc48fcd5c072df02a20290bddd60610',
+            '02a9196d5e08598211397a83cf013a5962b84bd61198abfdd204dff987e54f7a0d',
+            '036d015cd2f486fb38348182980b7e596e6c9733873102ea126fed7b4152be03b8',
             '02521287789f851268a39c9eccc9d6180d2c614315b583c9e6ae0addbd6d79df06',
             '0258c2a7b7f8af2585b4411b1ec945f70988f30412bb1df179de941f14d0b1bc3e',
             '03c3389ff1a896f84d921ed01a19fc99c6724ce8dc4b960cd3b7b2362b62cd60d7',

backend/src/api/mempool-blocks.ts

@@ -343,7 +343,7 @@ class MempoolBlocks {
       if (txid in mempool) {
         mempool[txid].cpfpDirty = (rate !== mempool[txid].effectiveFeePerVsize);
         mempool[txid].effectiveFeePerVsize = rate;
-        mempool[txid].cpfpChecked = false;
+        mempool[txid].cpfpChecked = true;
       }
     }
 

backend/src/api/mempool.ts

@@ -404,6 +404,10 @@ class Mempool {
 
       const newAccelerationMap: { [txid: string]: Acceleration } = {};
       for (const acceleration of newAccelerations) {
+        // skip transactions we don't know about
+        if (!this.mempoolCache[acceleration.txid]) {
+          continue;
+        }
         newAccelerationMap[acceleration.txid] = acceleration;
         if (this.accelerations[acceleration.txid] == null) {
           // new acceleration

backend/src/api/mining/mining-routes.ts

@@ -24,6 +24,7 @@ class MiningRoutes {
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/difficulty-adjustments', this.$getDifficultyAdjustments)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/reward-stats/:blockCount', this.$getRewardStats)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees/:interval', this.$getHistoricalBlockFees)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees', this.$getBlockFeesTimespan)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/rewards/:interval', this.$getHistoricalBlockRewards)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fee-rates/:interval', this.$getHistoricalBlockFeeRates)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/sizes-weights/:interval', this.$getHistoricalBlockSizeAndWeight)
@@ -217,6 +218,26 @@ class MiningRoutes {
     }
   }
 
+  private async $getBlockFeesTimespan(req: Request, res: Response) {
+    try {
+      if (!parseInt(req.query.from as string, 10) || !parseInt(req.query.to as string, 10)) {
+        throw new Error('Invalid timestamp range');
+      }
+      if (parseInt(req.query.from as string, 10) > parseInt(req.query.to as string, 10)) {
+        throw new Error('from must be less than to');
+      }
+      const blockFees = await mining.$getBlockFeesTimespan(parseInt(req.query.from as string, 10), parseInt(req.query.to as string, 10));
+      const blockCount = await BlocksRepository.$blockCount(null, null);
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.header('X-total-count', blockCount.toString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
+      res.json(blockFees);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
   private async $getHistoricalBlockRewards(req: Request, res: Response) {
     try {
       const blockRewards = await mining.$getHistoricalBlockRewards(req.params.interval);

backend/src/api/mining/mining.ts

@@ -45,11 +45,22 @@ class Mining {
    */
   public async $getHistoricalBlockFees(interval: string | null = null): Promise<any> {
     return await BlocksRepository.$getHistoricalBlockFees(
-      this.getTimeRange(interval, 5),
+      this.getTimeRange(interval),
       Common.getSqlInterval(interval)
     );
   }
 
+  /**
+   * Get timespan block total fees
+   */
+  public async $getBlockFeesTimespan(from: number, to: number): Promise<number> {
+    return await BlocksRepository.$getHistoricalBlockFees(
+      this.getTimeRangeFromTimespan(from, to),
+      null,
+      {from, to}
+    );
+  }
+  
   /**
    * Get historical block rewards
    */
@@ -646,6 +657,24 @@ class Mining {
     }
   }
 
+  private getTimeRangeFromTimespan(from: number, to: number, scale = 1): number {
+    const timespan = to - from;
+    switch (true) {
+      case timespan > 3600 * 24 * 365 * 4: return 86400 * scale; // 24h
+      case timespan > 3600 * 24 * 365 * 3: return 43200 * scale; // 12h
+      case timespan > 3600 * 24 * 365 * 2: return 43200 * scale; // 12h
+      case timespan > 3600 * 24 * 365: return 28800 * scale; // 8h
+      case timespan > 3600 * 24 * 30 * 6: return 28800 * scale; // 8h
+      case timespan > 3600 * 24 * 30 * 3: return 10800 * scale; // 3h
+      case timespan > 3600 * 24 * 30: return 7200 * scale; // 2h
+      case timespan > 3600 * 24 * 7: return 1800 * scale; // 30min
+      case timespan > 3600 * 24 * 3: return 300 * scale; // 5min
+      case timespan > 3600 * 24: return 1 * scale;
+      default: return 1 * scale;
+    }
+  }
+  
+
   // Finds the oldest block in a consecutive chain back from the tip
   // assumes `blocks` is sorted in ascending height order
   private getOldestConsecutiveBlock(blocks: DifficultyBlock[]): DifficultyBlock {

backend/src/api/pools-parser.ts

@@ -52,6 +52,28 @@ class PoolsParser {
         continue;
       }
 
+      // One of the two fields 'addresses' or 'regexes' must be a non-empty array
+      if (!pool.addresses && !pool.regexes) {
+        logger.err(`Mining pool ${pool.name} must have at least one of the fields 'addresses' or 'regexes'. Skipping.`);
+        continue;
+      }
+      
+      pool.addresses = pool.addresses || [];
+      pool.regexes = pool.regexes || [];
+      
+      if (pool.addresses.length === 0 && pool.regexes.length === 0) {
+        logger.err(`Mining pool ${pool.name} has no 'addresses' nor 'regexes' defined. Skipping.`);
+        continue;
+      }
+      
+      if (pool.addresses.length === 0) {
+        logger.warn(`Mining pool ${pool.name} has no 'addresses' defined.`);
+      }
+      
+      if (pool.regexes.length === 0) {
+        logger.warn(`Mining pool ${pool.name} has no 'regexes' defined.`);
+      }      
+
       const poolDB = await PoolsRepository.$getPoolByUniqueId(pool.id, false);
       if (!poolDB) {
         // New mining pool

backend/src/api/services/acceleration.ts

@@ -5,6 +5,9 @@ import axios from 'axios';
 
 export interface Acceleration {
   txid: string,
+  added: number,
+  effectiveVsize: number,
+  effectiveFee: number,
   feeDelta: number,
   pools: number[],
 };

backend/src/api/statistics/statistics-api.ts

@@ -64,7 +64,7 @@ class StatisticsApi {
     }
   }
 
-  public async $create(statistics: Statistic): Promise<number | undefined> {
+  public async $create(statistics: Statistic, convertToDatetime = false): Promise<number | undefined> {
     try {
       const query = `INSERT INTO statistics(
               added,
@@ -114,7 +114,7 @@ class StatisticsApi {
               vsize_1800,
               vsize_2000
             )
-            VALUES (${statistics.added}, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,
+            VALUES (${convertToDatetime ? `FROM_UNIXTIME(${statistics.added})` : statistics.added}, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,
                ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
 
       const params: (string | number)[] = [
@@ -456,6 +456,59 @@ class StatisticsApi {
       };
     });
   }
+
+  public mapOptimizedStatisticToStatistic(statistic: OptimizedStatistic[]): Statistic[] {
+    return statistic.map((s) => {
+      return {
+        added: s.added,
+        unconfirmed_transactions: s.count,
+        tx_per_second: 0,
+        vbytes_per_second: s.vbytes_per_second,
+        mempool_byte_weight: s.mempool_byte_weight || 0,
+        total_fee: s.total_fee || 0,
+        min_fee: s.min_fee,
+        fee_data: '',
+        vsize_1: s.vsizes[0],
+        vsize_2: s.vsizes[1],
+        vsize_3: s.vsizes[2],
+        vsize_4: s.vsizes[3],
+        vsize_5: s.vsizes[4],
+        vsize_6: s.vsizes[5],
+        vsize_8: s.vsizes[6],
+        vsize_10: s.vsizes[7],
+        vsize_12: s.vsizes[8],
+        vsize_15: s.vsizes[9],
+        vsize_20: s.vsizes[10],
+        vsize_30: s.vsizes[11],
+        vsize_40: s.vsizes[12],
+        vsize_50: s.vsizes[13],
+        vsize_60: s.vsizes[14],
+        vsize_70: s.vsizes[15],
+        vsize_80: s.vsizes[16],
+        vsize_90: s.vsizes[17],
+        vsize_100: s.vsizes[18],
+        vsize_125: s.vsizes[19],
+        vsize_150: s.vsizes[20],
+        vsize_175: s.vsizes[21],
+        vsize_200: s.vsizes[22],
+        vsize_250: s.vsizes[23],
+        vsize_300: s.vsizes[24],
+        vsize_350: s.vsizes[25],
+        vsize_400: s.vsizes[26],
+        vsize_500: s.vsizes[27],
+        vsize_600: s.vsizes[28],
+        vsize_700: s.vsizes[29],
+        vsize_800: s.vsizes[30],
+        vsize_900: s.vsizes[31],
+        vsize_1000: s.vsizes[32],
+        vsize_1200: s.vsizes[33],
+        vsize_1400: s.vsizes[34],
+        vsize_1600: s.vsizes[35],
+        vsize_1800: s.vsizes[36],
+        vsize_2000: s.vsizes[37],
+      }
+    });
+  }
 }
 
 export default new StatisticsApi();

backend/src/api/websocket-handler.ts

@@ -3,6 +3,7 @@ import * as WebSocket from 'ws';
 import {
   BlockExtended, TransactionExtended, MempoolTransactionExtended, WebsocketResponse,
   OptimizedStatistic, ILoadingIndicators, GbtCandidates, TxTrackingInfo,
+  MempoolBlockDelta, MempoolDelta, MempoolDeltaTxids
 } from '../mempool.interfaces';
 import blocks from './blocks';
 import memPool from './mempool';
@@ -44,7 +45,7 @@ const wantable = [
 ];
 
 class WebsocketHandler {
-  private wss: WebSocket.Server | undefined;
+  private webSocketServers: WebSocket.Server[] = [];
   private extraInitProperties = {};
 
   private numClients = 0;
@@ -54,11 +55,12 @@ class WebsocketHandler {
   private socketData: { [key: string]: string } = {};
   private serializedInitData: string = '{}';
   private lastRbfSummary: ReplacementInfo[] | null = null;
+  private mempoolSequence: number = 0;
 
   constructor() { }
 
-  setWebsocketServer(wss: WebSocket.Server) {
-    this.wss = wss;
+  addWebsocketServer(wss: WebSocket.Server) {
+    this.webSocketServers.push(wss);
   }
 
   setExtraInitData(property: string, value: any) {
@@ -102,11 +104,13 @@ class WebsocketHandler {
   }
 
   setupConnectionHandling() {
-    if (!this.wss) {
-      throw new Error('WebSocket.Server is not set');
+    if (!this.webSocketServers.length) {
+      throw new Error('No WebSocket.Server have been set');
     }
 
-    this.wss.on('connection', (client: WebSocket, req) => {
+    // TODO - Fix indentation after PR is merged
+    for (const server of this.webSocketServers) {
+    server.on('connection', (client: WebSocket, req) => {
       this.numConnected++;
       client['remoteAddress'] = req.headers['x-forwarded-for'] || req.socket?.remoteAddress || 'unknown';
       client.on('error', (e) => {
@@ -315,6 +319,7 @@ class WebsocketHandler {
               const mBlocksWithTransactions = mempoolBlocks.getMempoolBlocksWithTransactions();
               response['projected-block-transactions'] = JSON.stringify({
                 index: index,
+                sequence: this.mempoolSequence,
                 blockTransactions: (mBlocksWithTransactions[index]?.transactions || []).map(mempoolBlocks.compressTx),
               });
             } else {
@@ -342,6 +347,17 @@ class WebsocketHandler {
             }
           }
 
+          if (parsedMessage && parsedMessage['track-accelerations'] != null) {
+            if (parsedMessage['track-accelerations']) {
+              client['track-accelerations'] = true;
+              response['accelerations'] = JSON.stringify({
+                accelerations: Object.values(memPool.getAccelerations()),
+              });
+            } else {
+              client['track-accelerations'] = false;
+            }
+          }
+
           if (parsedMessage.action === 'init') {
             if (!this.socketData['blocks']?.length || !this.socketData['da'] || !this.socketData['backendInfo'] || !this.socketData['conversions']) {
               this.updateSocketData();
@@ -360,6 +376,18 @@ class WebsocketHandler {
             client['track-donation'] = parsedMessage['track-donation'];
           }
 
+          if (parsedMessage['track-mempool-txids'] === true) {
+            client['track-mempool-txids'] = true;
+          } else if (parsedMessage['track-mempool-txids'] === false) {
+            delete client['track-mempool-txids'];
+          }
+
+          if (parsedMessage['track-mempool'] === true) {
+            client['track-mempool'] = true;
+          } else if (parsedMessage['track-mempool'] === false) {
+            delete client['track-mempool'];
+          }
+
           if (Object.keys(response).length) {
             client.send(this.serializeResponse(response));
           }
@@ -369,14 +397,17 @@ class WebsocketHandler {
         }
       });
     });
+    }
   }
 
   handleNewDonation(id: string) {
-    if (!this.wss) {
-      throw new Error('WebSocket.Server is not set');
+    if (!this.webSocketServers.length) {
+      throw new Error('No WebSocket.Server have been set');
     }
 
-    this.wss.clients.forEach((client) => {
+    // TODO - Fix indentation after PR is merged
+    for (const server of this.webSocketServers) {
+    server.clients.forEach((client) => {
       if (client.readyState !== WebSocket.OPEN) {
         return;
       }
@@ -384,43 +415,50 @@ class WebsocketHandler {
         client.send(JSON.stringify({ donationConfirmed: true }));
       }
     });
+    }
   }
 
   handleLoadingChanged(indicators: ILoadingIndicators) {
-    if (!this.wss) {
-      throw new Error('WebSocket.Server is not set');
+    if (!this.webSocketServers.length) {
+      throw new Error('No WebSocket.Server have been set');
     }
 
     this.updateSocketDataFields({ 'loadingIndicators': indicators });
 
     const response = JSON.stringify({ loadingIndicators: indicators });
-    this.wss.clients.forEach((client) => {
+    // TODO - Fix indentation after PR is merged
+    for (const server of this.webSocketServers) {
+    server.clients.forEach((client) => {
       if (client.readyState !== WebSocket.OPEN) {
         return;
       }
       client.send(response);
     });
+    }
   }
 
   handleNewConversionRates(conversionRates: ApiPrice) {
-    if (!this.wss) {
-      throw new Error('WebSocket.Server is not set');
+    if (!this.webSocketServers.length) {
+      throw new Error('No WebSocket.Server have been set');
     }
 
     this.updateSocketDataFields({ 'conversions': conversionRates });
 
     const response = JSON.stringify({ conversions: conversionRates });
-    this.wss.clients.forEach((client) => {
+    // TODO - Fix indentation after PR is merged
+    for (const server of this.webSocketServers) {
+    server.clients.forEach((client) => {
       if (client.readyState !== WebSocket.OPEN) {
         return;
       }
       client.send(response);
     });
+    }
   }
 
   handleNewStatistic(stats: OptimizedStatistic) {
-    if (!this.wss) {
-      throw new Error('WebSocket.Server is not set');
+    if (!this.webSocketServers.length) {
+      throw new Error('No WebSocket.Server have been set');
     }
 
     this.printLogs();
@@ -429,7 +467,9 @@ class WebsocketHandler {
       'live-2h-chart': stats
     });
 
-    this.wss.clients.forEach((client) => {
+    // TODO - Fix indentation after PR is merged
+    for (const server of this.webSocketServers) {
+    server.clients.forEach((client) => {
       if (client.readyState !== WebSocket.OPEN) {
         return;
       }
@@ -440,11 +480,12 @@ class WebsocketHandler {
 
       client.send(response);
     });
+    }
   }
 
   handleReorg(): void {
-    if (!this.wss) {
-      throw new Error('WebSocket.Server is not set');
+    if (!this.webSocketServers.length) {
+      throw new Error('No WebSocket.Server have been set');
     }
 
     const da = difficultyAdjustment.getDifficultyAdjustment();
@@ -455,7 +496,9 @@ class WebsocketHandler {
       'da': da?.previousTime ? da : undefined,
     });
 
-    this.wss.clients.forEach((client) => {
+    // TODO - Fix indentation after PR is merged
+    for (const server of this.webSocketServers) {
+    server.clients.forEach((client) => {
       if (client.readyState !== WebSocket.OPEN) {
         return;
       }
@@ -473,13 +516,14 @@ class WebsocketHandler {
         client.send(this.serializeResponse(response));
       }
     });
+    }
   }
 
   async $handleMempoolChange(newMempool: { [txid: string]: MempoolTransactionExtended }, mempoolSize: number,
     newTransactions: MempoolTransactionExtended[], deletedTransactions: MempoolTransactionExtended[], accelerationDelta: string[],
     candidates?: GbtCandidates): Promise<void> {
-    if (!this.wss) {
-      throw new Error('WebSocket.Server is not set');
+    if (!this.webSocketServers.length) {
+      throw new Error('No WebSocket.Server have been set');
     }
 
     this.printLogs();
@@ -504,6 +548,7 @@ class WebsocketHandler {
     const vBytesPerSecond = memPool.getVBytesPerSecond();
     const rbfTransactions = Common.findRbfTransactions(newTransactions, deletedTransactions);
     const da = difficultyAdjustment.getDifficultyAdjustment();
+    const accelerations = memPool.getAccelerations();
     memPool.handleRbfTransactions(rbfTransactions);
     const rbfChanges = rbfCache.getRbfChanges();
     let rbfReplacements;
@@ -525,6 +570,33 @@ class WebsocketHandler {
 
     const latestTransactions = memPool.getLatestTransactions();
 
+    if (memPool.isInSync()) {
+      this.mempoolSequence++;
+    }
+
+    const replacedTransactions: { replaced: string, by: TransactionExtended }[] = [];
+    for (const tx of newTransactions) {
+      if (rbfTransactions[tx.txid]) {
+        for (const replaced of rbfTransactions[tx.txid]) {
+          replacedTransactions.push({ replaced: replaced.txid, by: tx });
+        }
+      }
+    }
+    const mempoolDeltaTxids: MempoolDeltaTxids = {
+      sequence: this.mempoolSequence,
+      added: newTransactions.map(tx => tx.txid),
+      removed: deletedTransactions.map(tx => tx.txid),
+      mined: [],
+      replaced: replacedTransactions.map(replacement => ({ replaced: replacement.replaced, by: replacement.by.txid })),
+    };
+    const mempoolDelta: MempoolDelta = {
+      sequence: this.mempoolSequence,
+      added: newTransactions,
+      removed: deletedTransactions.map(tx => tx.txid),
+      mined: [],
+      replaced: replacedTransactions,
+    };
+
     // update init data
     const socketDataFields = {
       'mempoolInfo': mempoolInfo,
@@ -552,7 +624,9 @@ class WebsocketHandler {
     // pre-compute new tracked outspends
     const outspendCache: { [txid: string]: { [vout: number]: { vin: number, txid: string } } } = {};
     const trackedTxs = new Set<string>();
-    this.wss.clients.forEach((client) => {
+    // TODO - Fix indentation after PR is merged
+    for (const server of this.webSocketServers) {
+    server.clients.forEach((client) => {
       if (client['track-tx']) {
         trackedTxs.add(client['track-tx']);
       }
@@ -562,6 +636,7 @@ class WebsocketHandler {
         }
       }
     });
+    }
     if (trackedTxs.size > 0) {
       for (const tx of newTransactions) {
         for (let i = 0; i < tx.vin.length; i++) {
@@ -581,7 +656,15 @@ class WebsocketHandler {
     const addressCache = this.makeAddressCache(newTransactions);
     const removedAddressCache = this.makeAddressCache(deletedTransactions);
 
-    this.wss.clients.forEach(async (client) => {
+    // pre-compute acceleration delta
+    const accelerationUpdate = {
+      added: accelerationDelta.map(txid => accelerations[txid]).filter(acc => acc != null),
+      removed: accelerationDelta.filter(txid => !accelerations[txid]),
+    };
+
+    // TODO - Fix indentation after PR is merged
+    for (const server of this.webSocketServers) {
+    server.clients.forEach(async (client) => {
       if (client.readyState !== WebSocket.OPEN) {
         return;
       }
@@ -739,7 +822,7 @@ class WebsocketHandler {
               accelerated: mempoolTx.acceleration || undefined,
             }
           };
-          if (!mempoolTx.cpfpChecked) {
+          if (!mempoolTx.cpfpChecked && !mempoolTx.acceleration) {
             calculateCpfp(mempoolTx, newMempool);
           }
           if (mempoolTx.cpfpDirty) {
@@ -802,6 +885,7 @@ class WebsocketHandler {
         if (mBlockDeltas[index]) {
           response['projected-block-transactions'] = getCachedResponse(`projected-block-transactions-${index}`, {
             index: index,
+            sequence: this.mempoolSequence,
             delta: mBlockDeltas[index],
           });
         }
@@ -817,15 +901,28 @@ class WebsocketHandler {
         response['rbfLatestSummary'] = getCachedResponse('rbfLatestSummary', rbfSummary);
       }
 
+      if (client['track-mempool-txids']) {
+        response['mempool-txids'] = getCachedResponse('mempool-txids', mempoolDeltaTxids);
+      }
+
+      if (client['track-mempool']) {
+        response['mempool-transactions'] = getCachedResponse('mempool-transactions', mempoolDelta);
+      }
+
+      if (client['track-accelerations'] && (accelerationUpdate.added.length || accelerationUpdate.removed.length)) {
+        response['accelerations'] = getCachedResponse('accelerations', accelerationUpdate);
+      }
+
       if (Object.keys(response).length) {
         client.send(this.serializeResponse(response));
       }
     });
+    }
   }
  
   async handleNewBlock(block: BlockExtended, txIds: string[], transactions: MempoolTransactionExtended[]): Promise<void> {
-    if (!this.wss) {
-      throw new Error('WebSocket.Server is not set');
+    if (!this.webSocketServers.length) {
+      throw new Error('No WebSocket.Server have been set');
     }
 
     this.printLogs();
@@ -961,6 +1058,31 @@ class WebsocketHandler {
 
     const mBlocksWithTransactions = mempoolBlocks.getMempoolBlocksWithTransactions();
 
+    if (memPool.isInSync()) {
+      this.mempoolSequence++;
+    }
+
+    const replacedTransactions: { replaced: string, by: TransactionExtended }[] = [];
+    for (const txid of Object.keys(rbfTransactions)) {
+      for (const replaced of rbfTransactions[txid].replaced) {
+        replacedTransactions.push({ replaced: replaced.txid, by: rbfTransactions[txid].replacedBy });
+      }
+    }
+    const mempoolDeltaTxids: MempoolDeltaTxids = {
+      sequence: this.mempoolSequence,
+      added: [],
+      removed: [],
+      mined: transactions.map(tx => tx.txid),
+      replaced: replacedTransactions.map(replacement => ({ replaced: replacement.replaced, by: replacement.by.txid })),
+    };
+    const mempoolDelta: MempoolDelta = {
+      sequence: this.mempoolSequence,
+      added: [],
+      removed: [],
+      mined: transactions.map(tx => tx.txid),
+      replaced: replacedTransactions,
+    };
+
     const responseCache = { ...this.socketData };
     function getCachedResponse(key, data): string {
       if (!responseCache[key]) {
@@ -969,7 +1091,9 @@ class WebsocketHandler {
       return responseCache[key];
     }
 
-    this.wss.clients.forEach((client) => {
+    // TODO - Fix indentation after PR is merged
+    for (const server of this.webSocketServers) {
+    server.clients.forEach((client) => {
       if (client.readyState !== WebSocket.OPEN) {
         return;
       }
@@ -1135,21 +1259,32 @@ class WebsocketHandler {
           if (mBlockDeltas[index].added.length > (mBlocksWithTransactions[index]?.transactions.length / 2)) {
             response['projected-block-transactions'] = getCachedResponse(`projected-block-transactions-full-${index}`, {
               index: index,
+              sequence: this.mempoolSequence,
               blockTransactions: mBlocksWithTransactions[index].transactions.map(mempoolBlocks.compressTx),
             });
           } else {
             response['projected-block-transactions'] = getCachedResponse(`projected-block-transactions-delta-${index}`, {
               index: index,
+              sequence: this.mempoolSequence,
               delta: mBlockDeltas[index],
             });
           }
         }
       }
 
+      if (client['track-mempool-txids']) {
+        response['mempool-txids'] = getCachedResponse('mempool-txids', mempoolDeltaTxids);
+      }
+
+      if (client['track-mempool']) {
+        response['mempool-transactions'] = getCachedResponse('mempool-transactions', mempoolDelta);
+      }
+
       if (Object.keys(response).length) {
         client.send(this.serializeResponse(response));
       }
     });
+    }
 
     await statistics.runStatistics();
   }
@@ -1231,13 +1366,15 @@ class WebsocketHandler {
   }
 
   private printLogs(): void {
-    if (this.wss) {
+    if (this.webSocketServers.length) {
       let numTxSubs = 0;
       let numTxsSubs = 0;
       let numProjectedSubs = 0;
       let numRbfSubs = 0;
 
-      this.wss.clients.forEach((client) => {
+      // TODO - Fix indentation after PR is merged
+      for (const server of this.webSocketServers) {
+      server.clients.forEach((client) => {
         if (client['track-tx']) {
           numTxSubs++;
         }
@@ -1251,8 +1388,12 @@ class WebsocketHandler {
           numRbfSubs++;
         }
       })
+      }
 
-      const count = this.wss?.clients?.size || 0;
+      let count = 0;
+      for (const server of this.webSocketServers) {
+        count += server.clients?.size || 0;
+      }
       const diff = count - this.numClients;
       this.numClients = count;
       logger.debug(`${count} websocket clients | ${this.numConnected} connected | ${this.numDisconnected} disconnected | (${diff >= 0 ? '+' : ''}${diff})`);

backend/src/config.ts

@@ -9,6 +9,7 @@ interface IConfig {
     NETWORK: 'mainnet' | 'testnet' | 'signet' | 'liquid' | 'liquidtestnet';
     BACKEND: 'esplora' | 'electrum' | 'none';
     HTTP_PORT: number;
+    UNIX_SOCKET_PATH: string;
     SPAWN_CLUSTER_PROCS: number;
     API_URL_PREFIX: string;
     POLL_RATE_MS: number;
@@ -140,6 +141,8 @@ interface IConfig {
     ENABLED: boolean;
     AUDIT: boolean;
     AUDIT_START_HEIGHT: number;
+    STATISTICS: boolean;
+    STATISTICS_START_TIME: number | string;
     SERVERS: string[];
   },
   MEMPOOL_SERVICES: {
@@ -153,6 +156,7 @@ interface IConfig {
   },
   FIAT_PRICE: {
     ENABLED: boolean;
+    PAID: boolean;
     API_KEY: string;
   },
 }
@@ -164,6 +168,7 @@ const defaults: IConfig = {
     'NETWORK': 'mainnet',
     'BACKEND': 'none',
     'HTTP_PORT': 8999,
+    'UNIX_SOCKET_PATH': '',
     'SPAWN_CLUSTER_PROCS': 0,
     'API_URL_PREFIX': '/api/v1/',
     'POLL_RATE_MS': 2000,
@@ -295,6 +300,8 @@ const defaults: IConfig = {
     'ENABLED': false,
     'AUDIT': false,
     'AUDIT_START_HEIGHT': 774000,
+    'STATISTICS': false,
+    'STATISTICS_START_TIME': 1481932800,
     'SERVERS': [],
   },
   'MEMPOOL_SERVICES': {
@@ -308,6 +315,7 @@ const defaults: IConfig = {
   },
   'FIAT_PRICE': {
     'ENABLED': true,
+    'PAID': false,
     'API_KEY': '',
   },
 };

backend/src/index.ts

@@ -48,7 +48,9 @@ import aboutRoutes from './api/about.routes';
 
 class Server {
   private wss: WebSocket.Server | undefined;
+  private wssUnixSocket: WebSocket.Server | undefined;
   private server: http.Server | undefined;
+  private serverUnixSocket: http.Server | undefined;
   private app: Application;
   private currentBackendRetryInterval = 1;
   private backendRetryCount = 0;
@@ -129,6 +131,7 @@ class Server {
       })
       .use(express.urlencoded({ extended: true }))
       .use(express.text({ type: ['text/plain', 'application/base64'] }))
+      .use(express.json())
       ;
 
     if (config.DATABASE.ENABLED && config.FIAT_PRICE.ENABLED) {
@@ -137,6 +140,10 @@ class Server {
 
     this.server = http.createServer(this.app);
     this.wss = new WebSocket.Server({ server: this.server });
+    if (config.MEMPOOL.UNIX_SOCKET_PATH) {
+      this.serverUnixSocket = http.createServer(this.app);
+      this.wssUnixSocket = new WebSocket.Server({ server: this.serverUnixSocket });
+    }
 
     this.setUpWebsocketHandling();
 
@@ -192,6 +199,16 @@ class Server {
         logger.notice(`Mempool Server is running on port ${config.MEMPOOL.HTTP_PORT}`);
       }
     });
+
+    if (this.serverUnixSocket) {
+      this.serverUnixSocket.listen(config.MEMPOOL.UNIX_SOCKET_PATH, () => {
+        if (worker) {
+          logger.info(`Mempool Server worker #${process.pid} started`);
+        } else {
+          logger.notice(`Mempool Server is listening on ${config.MEMPOOL.UNIX_SOCKET_PATH}`);
+        }
+      });
+    }
   }
 
   async runMainUpdateLoop(): Promise<void> {
@@ -265,8 +282,12 @@ class Server {
 
   setUpWebsocketHandling(): void {
     if (this.wss) {
-      websocketHandler.setWebsocketServer(this.wss);
+      websocketHandler.addWebsocketServer(this.wss);
     }
+    if (this.wssUnixSocket) {
+      websocketHandler.addWebsocketServer(this.wssUnixSocket);
+    }
+
     if (Common.isLiquid() && config.DATABASE.ENABLED) {
       blocks.setNewBlockCallback(async () => {
         try {
@@ -338,6 +359,12 @@ class Server {
     if (config.DATABASE.ENABLED) {
       DB.releasePidLock();
     }
+    this.server?.close();
+    this.serverUnixSocket?.close();
+    this.wss?.close();
+    if (this.wssUnixSocket) {
+      this.wssUnixSocket.close();
+    }
     process.exit(code);
   }
 

backend/src/indexer.ts

@@ -8,6 +8,7 @@ import priceUpdater from './tasks/price-updater';
 import PricesRepository from './repositories/PricesRepository';
 import config from './config';
 import auditReplicator from './replication/AuditReplication';
+import statisticsReplicator from './replication/StatisticsReplication';
 import AccelerationRepository from './repositories/AccelerationRepository';
 
 export interface CoreIndex {
@@ -188,6 +189,7 @@ class Indexer {
       await blocks.$generateCPFPDatabase();
       await blocks.$generateAuditStats();
       await auditReplicator.$sync();
+      await statisticsReplicator.$sync();
       await AccelerationRepository.$indexPastAccelerations();
       // do not wait for classify blocks to finish
       blocks.$classifyBlocks();

backend/src/mempool.interfaces.ts

@@ -71,6 +71,22 @@ export interface MempoolBlockDelta {
   changed: MempoolDeltaChange[];
 }
 
+export interface MempoolDeltaTxids {
+  sequence: number,
+  added: string[];
+  removed: string[];
+  mined: string[];
+  replaced: { replaced: string, by: string }[];
+}
+
+export interface MempoolDelta {
+  sequence: number,
+  added: MempoolTransactionExtended[];
+  removed: string[];
+  mined: string[];
+  replaced: { replaced: string, by: TransactionExtended }[];
+}
+
 interface VinStrippedToScriptsig {
   scriptsig: string;
 }
@@ -406,6 +422,7 @@ export interface Statistic {
 
 export interface OptimizedStatistic {
   added: string;
+  count: number;
   vbytes_per_second: number;
   total_fee: number;
   mempool_byte_weight: number;

backend/src/replication/StatisticsReplication.ts

@@ -0,0 +1,228 @@
+import DB from '../database';
+import logger from '../logger';
+import { $sync } from './replicator';
+import config from '../config';
+import { Common } from '../api/common';
+import statistics from '../api/statistics/statistics-api';
+
+interface MissingStatistics {
+  '24h': Set<number>;
+  '1w': Set<number>;
+  '1m': Set<number>;
+  '3m': Set<number>;
+  '6m': Set<number>;
+  '2y': Set<number>;
+  'all': Set<number>;
+}
+
+const steps = {
+  '24h': 60,
+  '1w': 300,
+  '1m': 1800,
+  '3m': 7200,
+  '6m': 10800,
+  '2y': 28800,
+  'all': 43200,
+};
+
+/**
+ * Syncs missing statistics data from trusted servers
+ */
+class StatisticsReplication {
+  inProgress: boolean = false;
+
+  public async $sync(): Promise<void> {
+    if (!config.REPLICATION.ENABLED || !config.REPLICATION.STATISTICS || !config.STATISTICS.ENABLED) {
+      // replication not enabled, or statistics not enabled
+      return;
+    }
+    if (this.inProgress) {
+      logger.info(`StatisticsReplication sync already in progress`, 'Replication');
+      return;
+    }
+    this.inProgress = true;
+
+    const missingStatistics = await this.$getMissingStatistics();
+    const missingIntervals = Object.keys(missingStatistics).filter(key => missingStatistics[key].size > 0);
+    const totalMissing =  missingIntervals.reduce((total, key) => total + missingStatistics[key].size, 0);
+
+    if (totalMissing === 0) {
+      this.inProgress = false;
+      logger.info(`Statistics table is complete, no replication needed`, 'Replication');
+      return;
+    }
+    
+    for (const interval of missingIntervals) {
+      logger.debug(`Missing ${missingStatistics[interval].size} statistics rows in '${interval}' timespan`, 'Replication');
+    }
+    logger.debug(`Fetching ${missingIntervals.join(', ')} statistics endpoints from trusted servers to fill ${totalMissing} rows missing in statistics`, 'Replication');
+    
+    let totalSynced = 0;
+    let totalMissed = 0;
+
+    for (const interval of missingIntervals) {
+      const results = await this.$syncStatistics(interval, missingStatistics[interval]);
+      totalSynced += results.synced;
+      totalMissed += results.missed;
+
+      logger.info(`Found ${totalSynced} / ${totalSynced + totalMissed} of ${totalMissing} missing statistics rows`, 'Replication');
+      await Common.sleep$(3000);
+    }
+
+    logger.debug(`Synced ${totalSynced} statistics rows, ${totalMissed} still missing`, 'Replication');
+
+    this.inProgress = false;
+  }
+
+  private async $syncStatistics(interval: string, missingTimes: Set<number>): Promise<any> {
+  
+    let success = false;
+    let synced = 0;
+    let missed = new Set(missingTimes);
+    const syncResult = await $sync(`/api/v1/statistics/${interval}`);
+    if (syncResult && syncResult.data?.length) {
+      success = true;
+      logger.info(`Fetched /api/v1/statistics/${interval} from ${syncResult.server}`);     
+    
+      for (const stat of syncResult.data) {
+        const time = this.roundToNearestStep(stat.added, steps[interval]);
+        if (missingTimes.has(time)) {
+          try {
+            await statistics.$create(statistics.mapOptimizedStatisticToStatistic([stat])[0], true);
+            if (missed.delete(time)) {
+              synced++;
+            }
+          } catch (e: any) {
+            logger.err(`Failed to insert statistics row at ${stat.added} (${interval}) from ${syncResult.server}. Reason: ` + (e instanceof Error ? e.message : e));
+          }
+        }
+      }
+
+    } else {
+      logger.warn(`An error occured when trying to fetch /api/v1/statistics/${interval}`);
+    }
+
+    return { success, synced, missed: missed.size };
+  }
+
+  private async $getMissingStatistics(): Promise<MissingStatistics> {
+    try {
+      const now = Math.floor(Date.now() / 1000);
+      const day = 60 * 60 * 24;
+
+      const startTime = this.getStartTimeFromConfig();
+
+      const missingStatistics: MissingStatistics = {
+        '24h': new Set<number>(),
+        '1w': new Set<number>(),
+        '1m': new Set<number>(),
+        '3m': new Set<number>(),
+        '6m': new Set<number>(),
+        '2y': new Set<number>(),
+        'all': new Set<number>()
+      };
+
+      const intervals = [              // [start,               end,                 label ]
+                                          [now - day,           now - 60,            '24h']       , // from 24 hours ago to now = 1 minute granularity
+        startTime < now - day ?           [now - day * 7,       now - day,           '1w' ] : null, // from 1 week ago to 24 hours ago = 5 minutes granularity
+        startTime < now - day * 7 ?       [now - day * 30,      now - day * 7,       '1m' ] : null, // from 1 month ago to 1 week ago = 30 minutes granularity
+        startTime < now - day * 30 ?      [now - day * 90,      now - day * 30,      '3m' ] : null, // from 3 months ago to 1 month ago = 2 hours granularity
+        startTime < now - day * 90 ?      [now - day * 180,     now - day * 90,      '6m' ] : null, // from 6 months ago to 3 months ago = 3 hours granularity
+        startTime < now - day * 180 ?     [now - day * 365 * 2, now - day * 180,     '2y' ] : null, // from 2 years ago to 6 months ago = 8 hours granularity
+        startTime < now - day * 365 * 2 ? [startTime,           now - day * 365 * 2, 'all'] : null, // from start of statistics to 2 years ago = 12 hours granularity   
+      ];
+
+      for (const interval of intervals) {
+        if (!interval) {
+          continue;
+        }
+        missingStatistics[interval[2] as string] = await this.$getMissingStatisticsInterval(interval, startTime);
+      }
+      
+      return missingStatistics;
+    } catch (e: any) {
+      logger.err(`Cannot fetch missing statistics times from db. Reason: ` + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
+
+  private async $getMissingStatisticsInterval(interval: any, startTime: number): Promise<Set<number>> {
+    try {
+      const start = interval[0];
+      const end = interval[1];
+      const step = steps[interval[2]];
+
+      const [rows]: any[] = await DB.query(`
+        SELECT UNIX_TIMESTAMP(added) as added
+        FROM statistics
+        WHERE added >= FROM_UNIXTIME(?) AND added <= FROM_UNIXTIME(?)
+        GROUP BY UNIX_TIMESTAMP(added) DIV ${step} ORDER BY statistics.added DESC
+      `, [start, end]);
+
+      const startingTime = Math.max(startTime, start) - Math.max(startTime, start) % step;
+
+      const timeSteps: number[] = [];
+      for (let time = startingTime; time < end; time += step) {
+        timeSteps.push(time);
+      }
+
+      if (timeSteps.length === 0) {
+        return new Set<number>();
+      }
+      
+      const roundedTimesAlreadyHere = new Set(rows.map(row => this.roundToNearestStep(row.added, step)));
+      const missingTimes = new Set(timeSteps.filter(time => !roundedTimesAlreadyHere.has(time)));
+
+      // Don't bother fetching if very few rows are missing
+      if (missingTimes.size < timeSteps.length * 0.005) {
+        return new Set();
+      }
+
+      return missingTimes;
+    } catch (e: any) {
+      logger.err(`Cannot fetch missing statistics times from db. Reason: ` + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
+
+  private roundToNearestStep(time: number, step: number): number {
+    const remainder = time % step;
+    if (remainder < step / 2) {
+      return time - remainder;
+    } else {
+      return time + (step - remainder);
+    }
+  }
+
+  private getStartTimeFromConfig(): number {
+    const now = Math.floor(Date.now() / 1000);
+    const day = 60 * 60 * 24;
+
+    let startTime: number;
+    if (typeof(config.REPLICATION.STATISTICS_START_TIME) === 'string' && ['24h', '1w', '1m', '3m', '6m', '2y', 'all'].includes(config.REPLICATION.STATISTICS_START_TIME)) {
+      if (config.REPLICATION.STATISTICS_START_TIME === 'all') {
+        startTime = 1481932800;
+      } else if (config.REPLICATION.STATISTICS_START_TIME === '2y') {
+        startTime = now - day * 365 * 2;
+      } else if (config.REPLICATION.STATISTICS_START_TIME === '6m') {
+        startTime = now - day * 180;
+      } else if (config.REPLICATION.STATISTICS_START_TIME === '3m') {
+        startTime = now - day * 90;
+      } else if (config.REPLICATION.STATISTICS_START_TIME === '1m') {
+        startTime = now - day * 30;
+      } else if (config.REPLICATION.STATISTICS_START_TIME === '1w') {
+        startTime = now - day * 7;
+      } else {
+        startTime = now - day;
+      }
+    } else {
+      startTime = Math.max(config.REPLICATION.STATISTICS_START_TIME as number || 1481932800, 1481932800);
+    }
+
+    return startTime;
+  }
+
+}
+
+export default new StatisticsReplication();
+

backend/src/repositories/AccelerationRepository.ts

@@ -6,7 +6,7 @@ import { IEsploraApi } from '../api/bitcoin/esplora-api.interface';
 import { Common } from '../api/common';
 import config from '../config';
 import blocks from '../api/blocks';
-import accelerationApi, { Acceleration } from '../api/services/acceleration';
+import accelerationApi, { Acceleration, AccelerationHistory } from '../api/services/acceleration';
 import accelerationCosts from '../api/acceleration/acceleration';
 import bitcoinApi from '../api/bitcoin/bitcoin-api-factory';
 import transactionUtils from '../api/transaction-utils';
@@ -15,6 +15,7 @@ import { BlockExtended, MempoolTransactionExtended } from '../mempool.interfaces
 export interface PublicAcceleration {
   txid: string,
   height: number,
+  added: number,
   pool: {
     id: number,
     slug: string,
@@ -29,15 +30,20 @@ export interface PublicAcceleration {
 class AccelerationRepository {
   private bidBoostV2Activated = 831580;
 
-  public async $saveAcceleration(acceleration: AccelerationInfo, block: IEsploraApi.Block, pool_id: number): Promise<void> {
+  public async $saveAcceleration(acceleration: AccelerationInfo, block: IEsploraApi.Block, pool_id: number, accelerationData: Acceleration[]): Promise<void> {
+    const accelerationMap: { [txid: string]: Acceleration } = {};
+    for (const acc of accelerationData) {
+      accelerationMap[acc.txid] = acc;
+    }
     try {
       await DB.query(`
-        INSERT INTO accelerations(txid, added, height, pool, effective_vsize, effective_fee, boost_rate, boost_cost)
-        VALUE (?, FROM_UNIXTIME(?), ?, ?, ?, ?, ?, ?)
+        INSERT INTO accelerations(txid, requested, added, height, pool, effective_vsize, effective_fee, boost_rate, boost_cost)
+        VALUE (?, FROM_UNIXTIME(?), FROM_UNIXTIME(?), ?, ?, ?, ?, ?, ?)
         ON DUPLICATE KEY UPDATE
           height = ?
       `, [
         acceleration.txSummary.txid,
+        accelerationMap[acceleration.txSummary.txid].added,
         block.timestamp,
         block.height,
         pool_id,
@@ -64,7 +70,7 @@ class AccelerationRepository {
     }
 
     let query = `
-      SELECT * FROM accelerations
+      SELECT *, UNIX_TIMESTAMP(requested) as requested_timestamp, UNIX_TIMESTAMP(added) as block_timestamp FROM accelerations
       JOIN pools on pools.unique_id = accelerations.pool
     `;
     let params: any[] = [];
@@ -99,6 +105,7 @@ class AccelerationRepository {
         return rows.map(row => ({
           txid: row.txid,
           height: row.height,
+          added: row.requested_timestamp || row.block_timestamp,
           pool: {
             id: row.id,
             slug: row.slug,
@@ -202,7 +209,7 @@ class AccelerationRepository {
         const tx = blockTxs[acc.txid];
         const accelerationInfo = accelerationCosts.getAccelerationInfo(tx, boostRate, transactions);
         accelerationInfo.cost = Math.max(0, Math.min(acc.feeDelta, accelerationInfo.cost));
-        this.$saveAcceleration(accelerationInfo, block, block.extras.pool.id);
+        this.$saveAcceleration(accelerationInfo, block, block.extras.pool.id, successfulAccelerations);
       }
     }
     const lastSyncedHeight = await this.$getLastSyncedHeight();
@@ -230,13 +237,15 @@ class AccelerationRepository {
     logger.debug(`Fetching accelerations between block ${lastSyncedHeight} and ${currentHeight}`);
 
     // Fetch accelerations from mempool.space since the last synced block;
-    const accelerationsByBlock = {};
+    const accelerationsByBlock: {[height: number]: AccelerationHistory[]} = {};
     const blockHashes = {};
     let done = false;
     let page = 1;
     let count = 0;
     try {
       while (!done) {
+        // don't DDoS the services backend
+        Common.sleep$(500 + (Math.random() * 1000));
         const accelerations = await accelerationApi.$fetchAccelerationHistory(page);
         page++;
         if (!accelerations?.length) {
@@ -297,12 +306,16 @@ class AccelerationRepository {
           const feeStats = Common.calcEffectiveFeeStatistics(template);
           boostRate = feeStats.medianFee;
         }
+        const accelerationSummaries = accelerations.map(acc => ({
+          ...acc,
+          pools: acc.pools.map(pool => pool.pool_unique_id),
+        }))
         for (const acc of accelerations) {
-          if (blockTxs[acc.txid]) {
+          if (blockTxs[acc.txid] && acc.pools.some(pool => pool.pool_unique_id === block.extras.pool.id)) {
             const tx = blockTxs[acc.txid];
             const accelerationInfo = accelerationCosts.getAccelerationInfo(tx, boostRate, transactions);
             accelerationInfo.cost = Math.max(0, Math.min(acc.feeDelta, accelerationInfo.cost));
-            await this.$saveAcceleration(accelerationInfo, block, block.extras.pool.id);
+            await this.$saveAcceleration(accelerationInfo, block, block.extras.pool.id, accelerationSummaries);
           }
         }
         await this.$setLastSyncedHeight(height);
@@ -317,6 +330,26 @@ class AccelerationRepository {
 
     logger.debug(`Indexing accelerations completed`);
   }
+
+  /**
+   * Delete accelerations from the database above blockHeight
+   */
+  public async $deleteAccelerationsFrom(blockHeight: number): Promise<void> {
+    logger.info(`Delete newer accelerations from height ${blockHeight} from the database`);
+    try {
+      const currentSyncedHeight = await this.$getLastSyncedHeight();
+      if (currentSyncedHeight >= blockHeight) {
+        await DB.query(`
+          UPDATE state
+          SET number = ?
+          WHERE name = 'last_acceleration_block'
+        `, [blockHeight - 1]);
+      }
+      await DB.query(`DELETE FROM accelerations where height >= ${blockHeight}`);
+    } catch (e) {
+      logger.err('Cannot delete indexed accelerations. Reason: ' + (e instanceof Error ? e.message : e));
+    }
+  }
 }
 
 export default new AccelerationRepository();

backend/src/repositories/BlocksRepository.ts

@@ -663,7 +663,7 @@ class BlocksRepository {
   /**
    * Get the historical averaged block fees
    */
-  public async $getHistoricalBlockFees(div: number, interval: string | null): Promise<any> {
+  public async $getHistoricalBlockFees(div: number, interval: string | null, timespan?: {from: number, to: number}): Promise<any> {
     try {
       let query = `SELECT
         CAST(AVG(blocks.height) as INT) as avgHeight,
@@ -677,6 +677,8 @@ class BlocksRepository {
 
       if (interval !== null) {
         query += ` WHERE blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`;
+      } else if (timespan) {
+        query += ` WHERE blockTimestamp BETWEEN FROM_UNIXTIME(${timespan.from}) AND FROM_UNIXTIME(${timespan.to})`;
       }
 
       query += ` GROUP BY UNIX_TIMESTAMP(blockTimestamp) DIV ${div}`;

backend/src/tasks/price-feeds/free-currency-api.ts

@@ -1,3 +1,4 @@
+import config from '../../config';
 import { query } from '../../utils/axios-query';
 import { ConversionFeed, ConversionRates } from '../price-updater';
 
@@ -37,15 +38,26 @@ const emptyRates = {
   ZAR: -1,
 };
 
-class FreeCurrencyApi implements ConversionFeed {
-  private API_KEY: string;
-
-  constructor(apiKey: string) {
-    this.API_KEY = apiKey;
+type PaidCurrencyData = {
+  [key: string]: {
+      code: string;
+      value: number;
   }
+};
+
+type FreeCurrencyData = {
+  [key: string]: number;
+};
+
+class FreeCurrencyApi implements ConversionFeed {
+  private API_KEY = config.FIAT_PRICE.API_KEY;
+  private PAID = config.FIAT_PRICE.PAID;
+  private API_URL_PREFIX: string = this.PAID ? `https://api.currencyapi.com/v3/` : `https://api.freecurrencyapi.com/v1/`;
+
+  constructor() { }
 
   public async $getQuota(): Promise<any> {
-    const response = await query(`https://api.freecurrencyapi.com/v1/status?apikey=${this.API_KEY}`);
+    const response = await query(`${this.API_URL_PREFIX}status?apikey=${this.API_KEY}`);
     if (response && response['quotas']) {
       return response['quotas'];
     }
@@ -53,21 +65,36 @@ class FreeCurrencyApi implements ConversionFeed {
   }
 
   public async $fetchLatestConversionRates(): Promise<ConversionRates> {
-    const response = await query(`https://api.freecurrencyapi.com/v1/latest?apikey=${this.API_KEY}`);
+    const response = await query(`${this.API_URL_PREFIX}latest?apikey=${this.API_KEY}`);
     if (response && response['data']) {
+      if (this.PAID) {
+        response['data'] = this.convertData(response['data']);
+      }
       return response['data'];
     }
     return emptyRates;
   }
 
   public async $fetchConversionRates(date: string): Promise<ConversionRates> {
-    const response = await query(`https://api.freecurrencyapi.com/v1/historical?date=${date}&apikey=${this.API_KEY}`);
-    if (response && response['data'] && response['data'][date]) {
+    const response = await query(`${this.API_URL_PREFIX}historical?date=${date}&apikey=${this.API_KEY}`);
+    if (response && response['data'] && (response['data'][date] || this.PAID)) {
+      if (this.PAID) {
+        response['data'] = this.convertData(response['data']);
+        response['data'][response['meta'].last_updated_at.substr(0, 10)] = response['data'];
+      }
       return response['data'][date];
     }
     return emptyRates;
   }
 
+  private convertData(data: PaidCurrencyData): FreeCurrencyData {
+    const simplifiedData: FreeCurrencyData = {};
+    for (const key in data) {
+      simplifiedData[key] = data[key].value;
+    }
+    return simplifiedData;
+  }
+
 }
 
 export default FreeCurrencyApi;

backend/src/tasks/price-updater.ts

@@ -71,7 +71,7 @@ class PriceUpdater {
     this.feeds.push(new BitfinexApi());
     this.feeds.push(new GeminiApi());
 
-    this.currencyConversionFeed = new FreeCurrencyApi(config.FIAT_PRICE.API_KEY);
+    this.currencyConversionFeed = new FreeCurrencyApi();
     this.setCyclePosition();
   }
 

contributors/bitcoinmechanic.txt

@@ -0,0 +1,3 @@
+I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of January 25, 2022.
+
+Signed: bitcoinmechanic

contributors/daweilv.txt

@@ -0,0 +1,3 @@
+I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of April 7, 2024.
+
+Signed: daweilv

contributors/henrialb.txt

@@ -0,0 +1,3 @@
+I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of April 12, 2024.
+
+Signed: henrialb

docker/backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20.12.0-buster-slim AS builder
+FROM node:20.13.1-buster-slim AS builder
 
 ARG commitHash
 ENV MEMPOOL_COMMIT_HASH=${commitHash}
@@ -24,7 +24,7 @@ RUN npm install --omit=dev --omit=optional
 WORKDIR /build
 RUN npm run package
 
-FROM node:20.12.0-buster-slim
+FROM node:20.13.1-buster-slim
 
 WORKDIR /backend
 

docker/backend/mempool-config.json

@@ -6,6 +6,7 @@
     "OFFICIAL": __MEMPOOL_OFFICIAL__,
     "HTTP_PORT": __MEMPOOL_HTTP_PORT__,
     "SPAWN_CLUSTER_PROCS": __MEMPOOL_SPAWN_CLUSTER_PROCS__,
+    "UNIX_SOCKET_PATH": "__MEMPOOL_UNIX_SOCKET_PATH__",
     "API_URL_PREFIX": "__MEMPOOL_API_URL_PREFIX__",
     "POLL_RATE_MS": __MEMPOOL_POLL_RATE_MS__,
     "CACHE_DIR": "__MEMPOOL_CACHE_DIR__",
@@ -136,6 +137,8 @@
     "ENABLED": __REPLICATION_ENABLED__,
     "AUDIT": __REPLICATION_AUDIT__,
     "AUDIT_START_HEIGHT": __REPLICATION_AUDIT_START_HEIGHT__,
+    "STATISTICS": __REPLICATION_STATISTICS__,
+    "STATISTICS_START_TIME": __REPLICATION_STATISTICS_START_TIME__,
     "SERVERS": __REPLICATION_SERVERS__
   },
   "MEMPOOL_SERVICES": {
@@ -149,6 +152,7 @@
   },
   "FIAT_PRICE": {
     "ENABLED": __FIAT_PRICE_ENABLED__,
+    "PAID": __FIAT_PRICE_PAID__,
     "API_KEY": "__FIAT_PRICE_API_KEY__"
   }
 }

docker/backend/start.sh

@@ -7,6 +7,7 @@ __MEMPOOL_ENABLED__=${MEMPOOL_ENABLED:=true}
 __MEMPOOL_OFFICIAL__=${MEMPOOL_OFFICIAL:=false}
 __MEMPOOL_HTTP_PORT__=${BACKEND_HTTP_PORT:=8999}
 __MEMPOOL_SPAWN_CLUSTER_PROCS__=${MEMPOOL_SPAWN_CLUSTER_PROCS:=0}
+__MEMPOOL_UNIX_SOCKET_PATH__=${MEMPOOL_UNIX_SOCKET_PATH:=""}
 __MEMPOOL_API_URL_PREFIX__=${MEMPOOL_API_URL_PREFIX:=/api/v1/}
 __MEMPOOL_POLL_RATE_MS__=${MEMPOOL_POLL_RATE_MS:=2000}
 __MEMPOOL_CACHE_DIR__=${MEMPOOL_CACHE_DIR:=./cache}
@@ -137,6 +138,8 @@ __MAXMIND_GEOIP2_ISP__=${MAXMIND_GEOIP2_ISP:=""}
 __REPLICATION_ENABLED__=${REPLICATION_ENABLED:=false}
 __REPLICATION_AUDIT__=${REPLICATION_AUDIT:=false}
 __REPLICATION_AUDIT_START_HEIGHT__=${REPLICATION_AUDIT_START_HEIGHT:=774000}
+__REPLICATION_STATISTICS__=${REPLICATION_STATISTICS:=false}
+__REPLICATION_STATISTICS_START_TIME__=${REPLICATION_STATISTICS_START_TIME:=1481932800}
 __REPLICATION_SERVERS__=${REPLICATION_SERVERS:=[]}
 
 # MEMPOOL_SERVICES
@@ -150,6 +153,7 @@ __REDIS_BATCH_QUERY_BASE_SIZE__=${REDIS_BATCH_QUERY_BASE_SIZE:=5000}
 
 # FIAT_PRICE
 __FIAT_PRICE_ENABLED__=${FIAT_PRICE_ENABLED:=true}
+__FIAT_PRICE_PAID__=${FIAT_PRICE_PAID:=false}
 __FIAT_PRICE_API_KEY__=${FIAT_PRICE_API_KEY:=""}
 
 mkdir -p "${__MEMPOOL_CACHE_DIR__}"
@@ -160,6 +164,7 @@ sed -i "s!__MEMPOOL_ENABLED__!${__MEMPOOL_ENABLED__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_OFFICIAL__!${__MEMPOOL_OFFICIAL__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_HTTP_PORT__!${__MEMPOOL_HTTP_PORT__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_SPAWN_CLUSTER_PROCS__!${__MEMPOOL_SPAWN_CLUSTER_PROCS__}!g" mempool-config.json
+sed -i "s!__MEMPOOL_UNIX_SOCKET_PATH__!${__MEMPOOL_UNIX_SOCKET_PATH__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_API_URL_PREFIX__!${__MEMPOOL_API_URL_PREFIX__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_POLL_RATE_MS__!${__MEMPOOL_POLL_RATE_MS__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_CACHE_DIR__!${__MEMPOOL_CACHE_DIR__}!g" mempool-config.json
@@ -281,6 +286,8 @@ sed -i "s!__MAXMIND_GEOIP2_ISP__!${__MAXMIND_GEOIP2_ISP__}!g" mempool-config.jso
 sed -i "s!__REPLICATION_ENABLED__!${__REPLICATION_ENABLED__}!g" mempool-config.json
 sed -i "s!__REPLICATION_AUDIT__!${__REPLICATION_AUDIT__}!g" mempool-config.json
 sed -i "s!__REPLICATION_AUDIT_START_HEIGHT__!${__REPLICATION_AUDIT_START_HEIGHT__}!g" mempool-config.json
+sed -i "s!__REPLICATION_STATISTICS__!${__REPLICATION_STATISTICS__}!g" mempool-config.json
+sed -i "s!__REPLICATION_STATISTICS_START_TIME__!${__REPLICATION_STATISTICS_START_TIME__}!g" mempool-config.json
 sed -i "s!__REPLICATION_SERVERS__!${__REPLICATION_SERVERS__}!g" mempool-config.json
 
 # MEMPOOL_SERVICES
@@ -294,6 +301,7 @@ sed -i "s!__REDIS_BATCH_QUERY_BASE_SIZE__!${__REDIS_BATCH_QUERY_BASE_SIZE__}!g"
 
 # FIAT_PRICE
 sed -i "s!__FIAT_PRICE_ENABLED__!${__FIAT_PRICE_ENABLED__}!g" mempool-config.json
+sed -i "s!__FIAT_PRICE_PAID__!${__FIAT_PRICE_PAID__}!g" mempool-config.json
 sed -i "s!__FIAT_PRICE_API_KEY__!${__FIAT_PRICE_API_KEY__}!g" mempool-config.json
 
 node /backend/package/index.js

docker/frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20.12.0-buster-slim AS builder
+FROM node:20.13.1-buster-slim AS builder
 
 ARG commitHash
 ENV DOCKER_COMMIT_HASH=${commitHash}
@@ -13,7 +13,7 @@ RUN npm install --omit=dev --omit=optional
 
 RUN npm run build
 
-FROM nginx:1.25.4-alpine
+FROM nginx:1.26.0-alpine
 
 WORKDIR /patch
 

frontend/.eslintrc

@@ -34,6 +34,7 @@
     "prefer-rest-params": 1,
     "quotes": [1, "single", { "allowTemplateLiterals": true }],
     "semi": 1,
+    "curly": [1, "all"],
     "eqeqeq": 1
   }
 }

frontend/.gitignore

@@ -63,6 +63,7 @@ src/resources/pools.json
 src/resources/mining-pools/*
 src/resources/**/*.mp4
 src/resources/**/*.vtt
+src/resources/customize.js
 
 # environment config
 mempool-frontend-config.json

frontend/angular.json

@@ -166,10 +166,26 @@
               "src/resources",
               "src/robots.txt",
               "src/config.js",
+              "src/customize.js",
               "src/config.template.js"
             ],
             "styles": [
               "src/styles.scss",
+              {
+                "input": "src/theme-contrast.scss",
+                "bundleName": "contrast",
+                "inject": false
+              },
+              {
+                "input": "src/theme-wiz.scss",
+                "bundleName": "wiz",
+                "inject": false
+              },
+              {
+                "input": "src/theme-bukele.scss",
+                "bundleName": "bukele",
+                "inject": false
+              },
               "node_modules/@fortawesome/fontawesome-svg-core/styles.css"
             ],
             "vendorChunk": true,

frontend/custom-sv-config.json

@@ -0,0 +1,52 @@
+{
+  "theme": "bukele",
+  "enterprise": "onbtc",
+  "branding": {
+    "name": "onbtc",
+    "title": "Bitcoin Office",
+    "site_id": 19,
+    "header_img": "/resources/onbtclogo.svg",
+    "footer_img": "/resources/onbtclogo.svg",
+    "rounded_corner": true
+  },
+  "dashboard": {
+    "widgets": [
+      {
+        "component": "fees",
+        "mobileOrder": 4
+      },
+      {
+        "component": "balance",
+        "mobileOrder": 1,
+        "props": {
+          "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo"
+        }
+      },
+      {
+        "component": "twitter",
+        "mobileOrder": 5,
+        "props": {
+          "handle": "nayibbukele"
+        }
+      },
+      {
+        "component": "address",
+        "mobileOrder": 2,
+        "props": {
+          "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo",
+          "period": "1m"
+        }
+      },
+      {
+        "component": "blocks"
+      },
+      {
+        "component": "addressTransactions",
+        "mobileOrder": 3,
+        "props": {
+          "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo"
+        }
+      }
+    ]
+  }
+}

frontend/cypress/e2e/liquid/liquid.spec.ts

@@ -45,6 +45,7 @@ describe('Liquid', () => {
 
     it('loads a specific block page', () => {
       cy.visit(`${basePath}/block/7e1369a23a5ab861e7bdede2aadcccae4ea873ffd9caf11c7c5541eb5bcdff54`);
+      cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
       cy.waitForSkeletonGone();
     });
 

frontend/cypress/e2e/liquidtestnet/liquidtestnet.spec.ts

@@ -46,7 +46,8 @@ describe('Liquid Testnet', () => {
     });
 
     it('loads a specific block page', () => {
-      cy.visit(`${basePath}/block/7e1369a23a5ab861e7bdede2aadcccae4ea873ffd9caf11c7c5541eb5bcdff54`);
+      cy.visit(`${basePath}/block/fb4cbcbff3993ca4bf8caf657d55a23db5ed4ab1cfa33c489303c2e04e1c38e0`);
+      cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
       cy.waitForSkeletonGone();
     });
 

frontend/cypress/e2e/mainnet/mainnet.spec.ts

@@ -103,6 +103,7 @@ describe('Mainnet', () => {
 
     it('check op_return tx tooltip', () => {
       cy.visit('/block/00000000000000000003c5f542bed265319c6cf64238cf1f1bb9bca3ebf686d2');
+      cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
       cy.waitForSkeletonGone();
       cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('onmouseover');
       cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('mouseenter');
@@ -111,9 +112,10 @@ describe('Mainnet', () => {
 
     it('check op_return coinbase tooltip', () => {
       cy.visit('/block/00000000000000000003c5f542bed265319c6cf64238cf1f1bb9bca3ebf686d2');
+      cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
       cy.waitForSkeletonGone();
-      cy.get('div > a > .badge').first().trigger('onmouseover');
-      cy.get('div > a > .badge').first().trigger('mouseenter');
+      cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('onmouseover');
+      cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('mouseenter');
       cy.get('.tooltip-inner').should('be.visible');
     });
 
@@ -283,6 +285,7 @@ describe('Mainnet', () => {
         it('loads genesis block and keypress arrow right', () => {
           cy.viewport('macbook-16');
           cy.visit('/block/0');
+          cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
           cy.waitForSkeletonGone();
           cy.waitForPageIdle();
 
@@ -295,6 +298,7 @@ describe('Mainnet', () => {
         it('loads genesis block and keypress arrow left', () => {
           cy.viewport('macbook-16');
           cy.visit('/block/0');
+          cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
           cy.waitForSkeletonGone();
           cy.waitForPageIdle();
 
@@ -323,6 +327,7 @@ describe('Mainnet', () => {
         it('loads genesis block and click on the arrow left', () => {
           cy.viewport('macbook-16');
           cy.visit('/block/0');
+          cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
           cy.waitForSkeletonGone();
           cy.waitForPageIdle();
           cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
@@ -339,7 +344,7 @@ describe('Mainnet', () => {
       cy.visit('/');
       cy.waitForSkeletonGone();
 
-      cy.changeNetwork('testnet');
+      cy.changeNetwork('testnet4');
       cy.changeNetwork('signet');
       cy.changeNetwork('mainnet');
     });
@@ -439,6 +444,7 @@ describe('Mainnet', () => {
     describe('blocks', () => {
       it('shows empty blocks properly', () => {
         cy.visit('/block/0000000000000000000bd14f744ef2e006e61c32214670de7eb891a5732ee775');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.waitForPageIdle();
         cy.get('h2').invoke('text').should('equal', '1 transaction');
@@ -446,6 +452,7 @@ describe('Mainnet', () => {
 
       it('expands and collapses the block details', () => {
         cy.visit('/block/0');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.waitForPageIdle();
         cy.get('.btn.btn-outline-info').click().then(() => {
@@ -458,6 +465,7 @@ describe('Mainnet', () => {
       });
       it('shows blocks with no pagination', () => {
         cy.visit('/block/00000000000000000001ba40caf1ad4cec0ceb77692662315c151953bfd7c4c4');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.waitForPageIdle();
         cy.get('.block-tx-title h2').invoke('text').should('equal', '19 transactions');
@@ -467,6 +475,7 @@ describe('Mainnet', () => {
       it('supports pagination on the block screen', () => {
         // 41 txs
         cy.visit('/block/00000000000000000009f9b7b0f63ad50053ad12ec3b7f5ca951332f134f83d8');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('.pagination-container a').invoke('text').then((text1) => {
           cy.get('.active + li').first().click().then(() => {
@@ -482,6 +491,7 @@ describe('Mainnet', () => {
       it('shows blocks pagination with 5 pages (desktop)', () => {
         cy.viewport(760, 800);
         cy.visit('/block/000000000000000000049281946d26fcba7d99fdabc1feac524bc3a7003d69b3').then(() => {
+          cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
           cy.waitForSkeletonGone();
           cy.waitForPageIdle();
         });
@@ -493,6 +503,7 @@ describe('Mainnet', () => {
       it('shows blocks pagination with 3 pages (mobile)', () => {
         cy.viewport(669, 800);
         cy.visit('/block/000000000000000000049281946d26fcba7d99fdabc1feac524bc3a7003d69b3').then(() => {
+          cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
           cy.waitForSkeletonGone();
           cy.waitForPageIdle();
         });

frontend/cypress/e2e/signet/signet.spec.ts

@@ -95,12 +95,14 @@ describe('Signet', () => {
     describe('blocks', () => {
       it('shows empty blocks properly', () => {
         cy.visit('/signet/block/00000133d54e4589f6436703b067ec23209e0a21b8a9b12f57d0592fd85f7a42');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('h2').invoke('text').should('equal', '1 transaction');
       });
 
       it('expands and collapses the block details', () => {
         cy.visit('/signet/block/0');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('.btn.btn-outline-info').click().then(() => {
           cy.get('#details').should('be.visible');
@@ -113,6 +115,7 @@ describe('Signet', () => {
 
       it('shows blocks with no pagination', () => {
         cy.visit('/signet/block/00000078f920a96a69089877b934ce7fd009ab55e3170920a021262cb258e7cc');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('h2').invoke('text').should('equal', '13 transactions');
         cy.get('ul.pagination').first().children().should('have.length', 5);
@@ -121,6 +124,7 @@ describe('Signet', () => {
       it('supports pagination on the block screen', () => {
         // 43 txs
         cy.visit('/signet/block/00000094bd52f73bdbfc4bece3a94c21fec2dc968cd54210496e69e4059d66a6');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('.header-bg.box > a').invoke('text').then((text1) => {
           cy.get('.active + li').first().click().then(() => {

frontend/cypress/e2e/testnet4/testnet4.spec.ts

@@ -2,7 +2,7 @@ import { emitMempoolInfo } from '../../support/websocket';
 
 const baseModule = Cypress.env('BASE_MODULE');
 
-describe('Testnet', () => {
+describe('Testnet4', () => {
   beforeEach(() => {
     cy.intercept('/api/block-height/*').as('block-height');
     cy.intercept('/api/block/*').as('block');
@@ -13,7 +13,7 @@ describe('Testnet', () => {
   if (baseModule === 'mempool') {
 
     it('loads the dashboard', () => {
-      cy.visit('/testnet');
+      cy.visit('/testnet4');
       cy.waitForSkeletonGone();
     });
 
@@ -25,7 +25,7 @@ describe('Testnet', () => {
 
     it.skip('loads the dashboard with the skeleton blocks', () => {
       cy.mockMempoolSocket();
-      cy.visit('/testnet');
+      cy.visit('/testnet4');
       cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
       cy.get(':nth-child(2) > #bitcoin-block-0').should('be.visible');
       cy.get(':nth-child(3) > #bitcoin-block-0').should('be.visible');
@@ -45,7 +45,7 @@ describe('Testnet', () => {
     });
 
     it('loads the pools screen', () => {
-      cy.visit('/testnet');
+      cy.visit('/testnet4');
       cy.waitForSkeletonGone();
       cy.get('#btn-pools').click().then(() => {
         cy.wait(1000);
@@ -53,7 +53,7 @@ describe('Testnet', () => {
     });
 
     it('loads the graphs screen', () => {
-      cy.visit('/testnet');
+      cy.visit('/testnet4');
       cy.waitForSkeletonGone();
       cy.get('#btn-graphs').click().then(() => {
         cy.wait(1000);
@@ -63,7 +63,7 @@ describe('Testnet', () => {
     describe('tv mode', () => {
       it('loads the tv screen - desktop', () => {
         cy.viewport('macbook-16');
-        cy.visit('/testnet/graphs');
+        cy.visit('/testnet4/graphs');
         cy.waitForSkeletonGone();
         cy.get('#btn-tv').click().then(() => {
           cy.wait(1000);
@@ -73,7 +73,7 @@ describe('Testnet', () => {
       });
 
       it('loads the tv screen - mobile', () => {
-        cy.visit('/testnet/graphs');
+        cy.visit('/testnet4/graphs');
         cy.waitForSkeletonGone();
         cy.get('#btn-tv').click().then(() => {
           cy.viewport('iphone-6');
@@ -85,7 +85,7 @@ describe('Testnet', () => {
 
 
     it('loads the api screen', () => {
-      cy.visit('/testnet');
+      cy.visit('/testnet4');
       cy.waitForSkeletonGone();
       cy.get('#btn-docs').click().then(() => {
         cy.wait(1000);
@@ -94,13 +94,15 @@ describe('Testnet', () => {
 
     describe('blocks', () => {
       it('shows empty blocks properly', () => {
-        cy.visit('/testnet/block/0');
+        cy.visit('/testnet4/block/0');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('h2').invoke('text').should('equal', '1 transaction');
       });
 
       it('expands and collapses the block details', () => {
-        cy.visit('/testnet/block/0');
+        cy.visit('/testnet4/block/0');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('.btn.btn-outline-info').click().then(() => {
           cy.get('#details').should('be.visible');
@@ -112,15 +114,17 @@ describe('Testnet', () => {
       });
 
       it('shows blocks with no pagination', () => {
-        cy.visit('/testnet/block/000000000000002f8ce27716e74ecc7ad9f7b5101fed12d09e28bb721b9460ea');
+        cy.visit('/testnet4/block/000000000066e8b6cc78a93f8989587f5819624bae2eb1c05f535cadded19f99');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
-        cy.get('h2').invoke('text').should('equal', '11 transactions');
+        cy.get('h2').invoke('text').should('equal', '18 transactions');
         cy.get('ul.pagination').first().children().should('have.length', 5);
       });
 
       it('supports pagination on the block screen', () => {
         // 48 txs
-        cy.visit('/testnet/block/000000000000002ca3878ebd98b313a1c2d531f2e70a6575d232ca7564dea7a9');
+        cy.visit('/testnet4/block/000000000000006982d53f8273bdff21dafc380c292eabc669b5ab6d732311c3');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('.header-bg.box > a').invoke('text').then((text1) => {
           cy.get('.active + li').first().click().then(() => {

frontend/cypress/support/commands.ts

@@ -72,7 +72,7 @@ Cypress.Commands.add('mockMempoolSocket', () => {
   mockWebSocket();
 });
 
-Cypress.Commands.add('changeNetwork', (network: "testnet" | "signet" | "liquid" | "mainnet") => {
+Cypress.Commands.add('changeNetwork', (network: "testnet" | "testnet4" | "signet" | "liquid" | "mainnet") => {
   cy.get('.dropdown-toggle').click().then(() => {
     cy.get(`a.${network}`).click().then(() => {
       cy.waitForPageIdle();

frontend/cypress/support/index.d.ts

@@ -5,6 +5,6 @@ declare namespace Cypress {
         waitForSkeletonGone(): Chainable<any>
         waitForPageIdle(): Chainable<any>
         mockMempoolSocket(): Chainable<any>
-        changeNetwork(network: "testnet"|"signet"|"liquid"|"mainnet"): Chainable<any>
+        changeNetwork(network: "testnet"|"testnet4"|"signet"|"liquid"|"mainnet"): Chainable<any>
     }
 }

frontend/generate-config.js

@@ -4,11 +4,14 @@ const { spawnSync } = require('child_process');
 const CONFIG_FILE_NAME = 'mempool-frontend-config.json';
 const GENERATED_CONFIG_FILE_NAME = 'src/resources/config.js';
 const GENERATED_TEMPLATE_CONFIG_FILE_NAME = 'src/resources/config.template.js';
+const GENERATED_CUSTOMIZATION_FILE_NAME = 'src/resources/customize.js';
 
 let settings = [];
 let configContent = {};
 let gitCommitHash = '';
 let packetJsonVersion = '';
+let customConfig;
+let customConfigContent;
 
 try {
   const rawConfig = fs.readFileSync(CONFIG_FILE_NAME);
@@ -22,7 +25,18 @@ try {
   }
 }
 
-const indexFilePath = configContent.BASE_MODULE ? 'src/index.' + configContent.BASE_MODULE + '.html' : 'src/index.mempool.html';
+if (configContent && configContent.CUSTOMIZATION) {
+  try {
+    customConfig = readConfig(configContent.CUSTOMIZATION);
+    customConfigContent = JSON.parse(customConfig);
+  } catch (e) {
+    console.log(`failed to load customization config from ${configContent.CUSTOMIZATION}`);
+  }
+}
+
+const baseModuleName = configContent.BASE_MODULE || 'mempool';
+const customBuildName = (customConfigContent && customConfigContent.enterprise) ? ('.' + customConfigContent.enterprise) : '';
+const indexFilePath = 'src/index.' + baseModuleName + customBuildName + '.html';
 
 try {
   fs.copyFileSync(indexFilePath, 'src/index.html');
@@ -109,6 +123,17 @@ writeConfigTemplate(GENERATED_TEMPLATE_CONFIG_FILE_NAME, newConfigTemplate);
 
 const currentConfig = readConfig(GENERATED_CONFIG_FILE_NAME);
 
+let customConfigJs = '';
+if (customConfig) {
+  console.log(`Customizing frontend using ${configContent.CUSTOMIZATION}`);
+  customConfigJs = `(function (window) {
+    window.__env = window.__env || {};
+    window.__env.customize = ${customConfig};
+    }((typeof global !== 'undefined') ? global : this));
+  `;
+}
+writeConfig(GENERATED_CUSTOMIZATION_FILE_NAME, customConfigJs);
+
 if (currentConfig && currentConfig === newConfig) {
   console.log(`No configuration updates, skipping ${GENERATED_CONFIG_FILE_NAME} file update`);
   return;

frontend/mempool-frontend-config.sample.json

@@ -1,5 +1,6 @@
 {
   "TESTNET_ENABLED": false,
+  "TESTNET4_ENABLED": false,
   "SIGNET_ENABLED": false,
   "LIQUID_ENABLED": false,
   "LIQUID_TESTNET_ENABLED": false,

frontend/package-lock.json

@@ -34,9 +34,9 @@
         "clipboard": "^2.0.11",
         "domino": "^2.1.6",
         "echarts": "~5.5.0",
-        "esbuild": "^0.20.2",
+        "esbuild": "^0.21.1",
         "lightweight-charts": "~3.8.0",
-        "ngx-echarts": "~17.1.0",
+        "ngx-echarts": "~17.2.0",
         "ngx-infinite-scroll": "^17.0.0",
         "qrcode": "1.5.1",
         "rxjs": "~7.8.1",
@@ -62,7 +62,7 @@
       "optionalDependencies": {
         "@cypress/schematic": "^2.5.0",
         "@types/cypress": "^1.1.3",
-        "cypress": "^13.7.0",
+        "cypress": "^13.10.0",
         "cypress-fail-on-console-error": "~5.1.0",
         "cypress-wait-until": "^2.0.1",
         "mock-socket": "~9.3.1",
@@ -3196,9 +3196,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
-      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.1.tgz",
+      "integrity": "sha512-O7yppwipkXvnEPjzkSXJRk2g4bS8sUx9p9oXHq9MU/U7lxUzZVsnFZMDTmeeX9bfQxrFcvOacl/ENgOh0WP9pA==",
       "cpu": [
         "ppc64"
       ],
@@ -3211,9 +3211,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
-      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.1.tgz",
+      "integrity": "sha512-hh3jKWikdnTtHCglDAeVO3Oyh8MaH8xZUaWMiCCvJ9/c3NtPqZq+CACOlGTxhddypXhl+8B45SeceYBfB/e8Ow==",
       "cpu": [
         "arm"
       ],
@@ -3226,9 +3226,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
-      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.1.tgz",
+      "integrity": "sha512-jXhccq6es+onw7x8MxoFnm820mz7sGa9J14kLADclmiEUH4fyj+FjR6t0M93RgtlI/awHWhtF0Wgfhqgf9gDZA==",
       "cpu": [
         "arm64"
       ],
@@ -3241,9 +3241,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
-      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.1.tgz",
+      "integrity": "sha512-NPObtlBh4jQHE01gJeucqEhdoD/4ya2owSIS8lZYS58aR0x7oZo9lB2lVFxgTANSa5MGCBeoQtr+yA9oKCGPvA==",
       "cpu": [
         "x64"
       ],
@@ -3256,9 +3256,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
-      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.1.tgz",
+      "integrity": "sha512-BLT7TDzqsVlQRmJfO/FirzKlzmDpBWwmCUlyggfzUwg1cAxVxeA4O6b1XkMInlxISdfPAOunV9zXjvh5x99Heg==",
       "cpu": [
         "arm64"
       ],
@@ -3271,9 +3271,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
-      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.1.tgz",
+      "integrity": "sha512-D3h3wBQmeS/vp93O4B+SWsXB8HvRDwMyhTNhBd8yMbh5wN/2pPWRW5o/hM3EKgk9bdKd9594lMGoTCTiglQGRQ==",
       "cpu": [
         "x64"
       ],
@@ -3286,9 +3286,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
-      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.1.tgz",
+      "integrity": "sha512-/uVdqqpNKXIxT6TyS/oSK4XE4xWOqp6fh4B5tgAwozkyWdylcX+W4YF2v6SKsL4wCQ5h1bnaSNjWPXG/2hp8AQ==",
       "cpu": [
         "arm64"
       ],
@@ -3301,9 +3301,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
-      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.1.tgz",
+      "integrity": "sha512-paAkKN1n1jJitw+dAoR27TdCzxRl1FOEITx3h201R6NoXUojpMzgMLdkXVgCvaCSCqwYkeGLoe9UVNRDKSvQgw==",
       "cpu": [
         "x64"
       ],
@@ -3316,9 +3316,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
-      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.1.tgz",
+      "integrity": "sha512-tRHnxWJnvNnDpNVnsyDhr1DIQZUfCXlHSCDohbXFqmg9W4kKR7g8LmA3kzcwbuxbRMKeit8ladnCabU5f2traA==",
       "cpu": [
         "arm"
       ],
@@ -3331,9 +3331,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
-      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.1.tgz",
+      "integrity": "sha512-G65d08YoH00TL7Xg4LaL3gLV21bpoAhQ+r31NUu013YB7KK0fyXIt05VbsJtpqh/6wWxoLJZOvQHYnodRrnbUQ==",
       "cpu": [
         "arm64"
       ],
@@ -3346,9 +3346,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
-      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.1.tgz",
+      "integrity": "sha512-tt/54LqNNAqCz++QhxoqB9+XqdsaZOtFD/srEhHYwBd3ZUOepmR1Eeot8bS+Q7BiEvy9vvKbtpHf+r6q8hF5UA==",
       "cpu": [
         "ia32"
       ],
@@ -3361,9 +3361,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
-      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.1.tgz",
+      "integrity": "sha512-MhNalK6r0nZD0q8VzUBPwheHzXPr9wronqmZrewLfP7ui9Fv1tdPmg6e7A8lmg0ziQCziSDHxh3cyRt4YMhGnQ==",
       "cpu": [
         "loong64"
       ],
@@ -3376,9 +3376,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
-      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.1.tgz",
+      "integrity": "sha512-YCKVY7Zen5rwZV+nZczOhFmHaeIxR4Zn3jcmNH53LbgF6IKRwmrMywqDrg4SiSNApEefkAbPSIzN39FC8VsxPg==",
       "cpu": [
         "mips64el"
       ],
@@ -3391,9 +3391,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
-      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.1.tgz",
+      "integrity": "sha512-bw7bcQ+270IOzDV4mcsKAnDtAFqKO0jVv3IgRSd8iM0ac3L8amvCrujRVt1ajBTJcpDaFhIX+lCNRKteoDSLig==",
       "cpu": [
         "ppc64"
       ],
@@ -3406,9 +3406,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
-      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.1.tgz",
+      "integrity": "sha512-ARmDRNkcOGOm1AqUBSwRVDfDeD9hGYRfkudP2QdoonBz1ucWVnfBPfy7H4JPI14eYtZruRSczJxyu7SRYDVOcg==",
       "cpu": [
         "riscv64"
       ],
@@ -3421,9 +3421,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
-      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.1.tgz",
+      "integrity": "sha512-o73TcUNMuoTZlhwFdsgr8SfQtmMV58sbgq6gQq9G1xUiYnHMTmJbwq65RzMx89l0iya69lR4bxBgtWiiOyDQZA==",
       "cpu": [
         "s390x"
       ],
@@ -3436,9 +3436,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
-      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.1.tgz",
+      "integrity": "sha512-da4/1mBJwwgJkbj4fMH7SOXq2zapgTo0LKXX1VUZ0Dxr+e8N0WbS80nSZ5+zf3lvpf8qxrkZdqkOqFfm57gXwA==",
       "cpu": [
         "x64"
       ],
@@ -3451,9 +3451,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.1.tgz",
+      "integrity": "sha512-CPWs0HTFe5woTJN5eKPvgraUoRHrCtzlYIAv9wBC+FAyagBSaf+UdZrjwYyTGnwPGkThV4OCI7XibZOnPvONVw==",
       "cpu": [
         "x64"
       ],
@@ -3466,9 +3466,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.1.tgz",
+      "integrity": "sha512-xxhTm5QtzNLc24R0hEkcH+zCx/o49AsdFZ0Cy5zSd/5tOj4X2g3/2AJB625NoadUuc4A8B3TenLJoYdWYOYCew==",
       "cpu": [
         "x64"
       ],
@@ -3481,9 +3481,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
-      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.1.tgz",
+      "integrity": "sha512-CWibXszpWys1pYmbr9UiKAkX6x+Sxw8HWtw1dRESK1dLW5fFJ6rMDVw0o8MbadusvVQx1a8xuOxnHXT941Hp1A==",
       "cpu": [
         "x64"
       ],
@@ -3496,9 +3496,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
-      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.1.tgz",
+      "integrity": "sha512-jb5B4k+xkytGbGUS4T+Z89cQJ9DJ4lozGRSV+hhfmCPpfJ3880O31Q1srPCimm+V6UCbnigqD10EgDNgjvjerQ==",
       "cpu": [
         "arm64"
       ],
@@ -3511,9 +3511,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
-      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.1.tgz",
+      "integrity": "sha512-PgyFvjJhXqHn1uxPhyN1wZ6dIomKjiLUQh1LjFvjiV1JmnkZ/oMPrfeEAZg5R/1ftz4LZWZr02kefNIQ5SKREQ==",
       "cpu": [
         "ia32"
       ],
@@ -3526,9 +3526,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
-      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.1.tgz",
+      "integrity": "sha512-W9NttRZQR5ehAiqHGDnvfDaGmQOm6Fi4vSlce8mjM75x//XKuVAByohlEX6N17yZnVXxQFuh4fDRunP8ca6bfA==",
       "cpu": [
         "x64"
       ],
@@ -8028,9 +8028,9 @@
       "peer": true
     },
     "node_modules/cypress": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.7.0.tgz",
-      "integrity": "sha512-UimjRSJJYdTlvkChcdcfywKJ6tUYuwYuk/n1uMMglrvi+ZthNhoRYcxnWgTqUtkl17fXrPAsD5XT2rcQYN1xKA==",
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.10.0.tgz",
+      "integrity": "sha512-tOhwRlurVOQbMduX+KonoMeQILs2cwR3yHGGENoFvvSoLUBHmJ8b9/n21gFSDqjlOJ+SRVcwuh+fG/JDsHsT6Q==",
       "hasInstallScript": true,
       "optional": true,
       "dependencies": {
@@ -9196,9 +9196,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
-      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.1.tgz",
+      "integrity": "sha512-GPqx+FX7mdqulCeQ4TsGZQ3djBJkx5k7zBGtqt9ycVlWNg8llJ4RO9n2vciu8BN2zAEs6lPbPl0asZsAh7oWzg==",
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -9207,29 +9207,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.20.2",
-        "@esbuild/android-arm": "0.20.2",
-        "@esbuild/android-arm64": "0.20.2",
-        "@esbuild/android-x64": "0.20.2",
-        "@esbuild/darwin-arm64": "0.20.2",
-        "@esbuild/darwin-x64": "0.20.2",
-        "@esbuild/freebsd-arm64": "0.20.2",
-        "@esbuild/freebsd-x64": "0.20.2",
-        "@esbuild/linux-arm": "0.20.2",
-        "@esbuild/linux-arm64": "0.20.2",
-        "@esbuild/linux-ia32": "0.20.2",
-        "@esbuild/linux-loong64": "0.20.2",
-        "@esbuild/linux-mips64el": "0.20.2",
-        "@esbuild/linux-ppc64": "0.20.2",
-        "@esbuild/linux-riscv64": "0.20.2",
-        "@esbuild/linux-s390x": "0.20.2",
-        "@esbuild/linux-x64": "0.20.2",
-        "@esbuild/netbsd-x64": "0.20.2",
-        "@esbuild/openbsd-x64": "0.20.2",
-        "@esbuild/sunos-x64": "0.20.2",
-        "@esbuild/win32-arm64": "0.20.2",
-        "@esbuild/win32-ia32": "0.20.2",
-        "@esbuild/win32-x64": "0.20.2"
+        "@esbuild/aix-ppc64": "0.21.1",
+        "@esbuild/android-arm": "0.21.1",
+        "@esbuild/android-arm64": "0.21.1",
+        "@esbuild/android-x64": "0.21.1",
+        "@esbuild/darwin-arm64": "0.21.1",
+        "@esbuild/darwin-x64": "0.21.1",
+        "@esbuild/freebsd-arm64": "0.21.1",
+        "@esbuild/freebsd-x64": "0.21.1",
+        "@esbuild/linux-arm": "0.21.1",
+        "@esbuild/linux-arm64": "0.21.1",
+        "@esbuild/linux-ia32": "0.21.1",
+        "@esbuild/linux-loong64": "0.21.1",
+        "@esbuild/linux-mips64el": "0.21.1",
+        "@esbuild/linux-ppc64": "0.21.1",
+        "@esbuild/linux-riscv64": "0.21.1",
+        "@esbuild/linux-s390x": "0.21.1",
+        "@esbuild/linux-x64": "0.21.1",
+        "@esbuild/netbsd-x64": "0.21.1",
+        "@esbuild/openbsd-x64": "0.21.1",
+        "@esbuild/sunos-x64": "0.21.1",
+        "@esbuild/win32-arm64": "0.21.1",
+        "@esbuild/win32-ia32": "0.21.1",
+        "@esbuild/win32-x64": "0.21.1"
       }
     },
     "node_modules/esbuild-wasm": {
@@ -13289,9 +13289,9 @@
       "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
     },
     "node_modules/ngx-echarts": {
-      "version": "17.1.0",
-      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-17.1.0.tgz",
-      "integrity": "sha512-DSNF/aKmJSxJWb9UwPUgNtY8Ma9SmViDBRacvAwpakc/5mJerunxndDgoBQkYk5JFKAjXX6bp4ZWLRKL3/5AGA==",
+      "version": "17.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-17.2.0.tgz",
+      "integrity": "sha512-i3XDE9d53zmJH4bp8RQ/271oPlhBkczO1M3VtWk8nCXdxQq9qx8UckjWEQ7oV1AbSDLGK5sRiFu5EaY5hvdWPA==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -20562,141 +20562,141 @@
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="
     },
     "@esbuild/aix-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
-      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.1.tgz",
+      "integrity": "sha512-O7yppwipkXvnEPjzkSXJRk2g4bS8sUx9p9oXHq9MU/U7lxUzZVsnFZMDTmeeX9bfQxrFcvOacl/ENgOh0WP9pA==",
       "optional": true
     },
     "@esbuild/android-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
-      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.1.tgz",
+      "integrity": "sha512-hh3jKWikdnTtHCglDAeVO3Oyh8MaH8xZUaWMiCCvJ9/c3NtPqZq+CACOlGTxhddypXhl+8B45SeceYBfB/e8Ow==",
       "optional": true
     },
     "@esbuild/android-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
-      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.1.tgz",
+      "integrity": "sha512-jXhccq6es+onw7x8MxoFnm820mz7sGa9J14kLADclmiEUH4fyj+FjR6t0M93RgtlI/awHWhtF0Wgfhqgf9gDZA==",
       "optional": true
     },
     "@esbuild/android-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
-      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.1.tgz",
+      "integrity": "sha512-NPObtlBh4jQHE01gJeucqEhdoD/4ya2owSIS8lZYS58aR0x7oZo9lB2lVFxgTANSa5MGCBeoQtr+yA9oKCGPvA==",
       "optional": true
     },
     "@esbuild/darwin-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
-      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.1.tgz",
+      "integrity": "sha512-BLT7TDzqsVlQRmJfO/FirzKlzmDpBWwmCUlyggfzUwg1cAxVxeA4O6b1XkMInlxISdfPAOunV9zXjvh5x99Heg==",
       "optional": true
     },
     "@esbuild/darwin-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
-      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.1.tgz",
+      "integrity": "sha512-D3h3wBQmeS/vp93O4B+SWsXB8HvRDwMyhTNhBd8yMbh5wN/2pPWRW5o/hM3EKgk9bdKd9594lMGoTCTiglQGRQ==",
       "optional": true
     },
     "@esbuild/freebsd-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
-      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.1.tgz",
+      "integrity": "sha512-/uVdqqpNKXIxT6TyS/oSK4XE4xWOqp6fh4B5tgAwozkyWdylcX+W4YF2v6SKsL4wCQ5h1bnaSNjWPXG/2hp8AQ==",
       "optional": true
     },
     "@esbuild/freebsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
-      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.1.tgz",
+      "integrity": "sha512-paAkKN1n1jJitw+dAoR27TdCzxRl1FOEITx3h201R6NoXUojpMzgMLdkXVgCvaCSCqwYkeGLoe9UVNRDKSvQgw==",
       "optional": true
     },
     "@esbuild/linux-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
-      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.1.tgz",
+      "integrity": "sha512-tRHnxWJnvNnDpNVnsyDhr1DIQZUfCXlHSCDohbXFqmg9W4kKR7g8LmA3kzcwbuxbRMKeit8ladnCabU5f2traA==",
       "optional": true
     },
     "@esbuild/linux-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
-      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.1.tgz",
+      "integrity": "sha512-G65d08YoH00TL7Xg4LaL3gLV21bpoAhQ+r31NUu013YB7KK0fyXIt05VbsJtpqh/6wWxoLJZOvQHYnodRrnbUQ==",
       "optional": true
     },
     "@esbuild/linux-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
-      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.1.tgz",
+      "integrity": "sha512-tt/54LqNNAqCz++QhxoqB9+XqdsaZOtFD/srEhHYwBd3ZUOepmR1Eeot8bS+Q7BiEvy9vvKbtpHf+r6q8hF5UA==",
       "optional": true
     },
     "@esbuild/linux-loong64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
-      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.1.tgz",
+      "integrity": "sha512-MhNalK6r0nZD0q8VzUBPwheHzXPr9wronqmZrewLfP7ui9Fv1tdPmg6e7A8lmg0ziQCziSDHxh3cyRt4YMhGnQ==",
       "optional": true
     },
     "@esbuild/linux-mips64el": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
-      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.1.tgz",
+      "integrity": "sha512-YCKVY7Zen5rwZV+nZczOhFmHaeIxR4Zn3jcmNH53LbgF6IKRwmrMywqDrg4SiSNApEefkAbPSIzN39FC8VsxPg==",
       "optional": true
     },
     "@esbuild/linux-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
-      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.1.tgz",
+      "integrity": "sha512-bw7bcQ+270IOzDV4mcsKAnDtAFqKO0jVv3IgRSd8iM0ac3L8amvCrujRVt1ajBTJcpDaFhIX+lCNRKteoDSLig==",
       "optional": true
     },
     "@esbuild/linux-riscv64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
-      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.1.tgz",
+      "integrity": "sha512-ARmDRNkcOGOm1AqUBSwRVDfDeD9hGYRfkudP2QdoonBz1ucWVnfBPfy7H4JPI14eYtZruRSczJxyu7SRYDVOcg==",
       "optional": true
     },
     "@esbuild/linux-s390x": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
-      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.1.tgz",
+      "integrity": "sha512-o73TcUNMuoTZlhwFdsgr8SfQtmMV58sbgq6gQq9G1xUiYnHMTmJbwq65RzMx89l0iya69lR4bxBgtWiiOyDQZA==",
       "optional": true
     },
     "@esbuild/linux-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
-      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.1.tgz",
+      "integrity": "sha512-da4/1mBJwwgJkbj4fMH7SOXq2zapgTo0LKXX1VUZ0Dxr+e8N0WbS80nSZ5+zf3lvpf8qxrkZdqkOqFfm57gXwA==",
       "optional": true
     },
     "@esbuild/netbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.1.tgz",
+      "integrity": "sha512-CPWs0HTFe5woTJN5eKPvgraUoRHrCtzlYIAv9wBC+FAyagBSaf+UdZrjwYyTGnwPGkThV4OCI7XibZOnPvONVw==",
       "optional": true
     },
     "@esbuild/openbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.1.tgz",
+      "integrity": "sha512-xxhTm5QtzNLc24R0hEkcH+zCx/o49AsdFZ0Cy5zSd/5tOj4X2g3/2AJB625NoadUuc4A8B3TenLJoYdWYOYCew==",
       "optional": true
     },
     "@esbuild/sunos-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
-      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.1.tgz",
+      "integrity": "sha512-CWibXszpWys1pYmbr9UiKAkX6x+Sxw8HWtw1dRESK1dLW5fFJ6rMDVw0o8MbadusvVQx1a8xuOxnHXT941Hp1A==",
       "optional": true
     },
     "@esbuild/win32-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
-      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.1.tgz",
+      "integrity": "sha512-jb5B4k+xkytGbGUS4T+Z89cQJ9DJ4lozGRSV+hhfmCPpfJ3880O31Q1srPCimm+V6UCbnigqD10EgDNgjvjerQ==",
       "optional": true
     },
     "@esbuild/win32-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
-      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.1.tgz",
+      "integrity": "sha512-PgyFvjJhXqHn1uxPhyN1wZ6dIomKjiLUQh1LjFvjiV1JmnkZ/oMPrfeEAZg5R/1ftz4LZWZr02kefNIQ5SKREQ==",
       "optional": true
     },
     "@esbuild/win32-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
-      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.1.tgz",
+      "integrity": "sha512-W9NttRZQR5ehAiqHGDnvfDaGmQOm6Fi4vSlce8mjM75x//XKuVAByohlEX6N17yZnVXxQFuh4fDRunP8ca6bfA==",
       "optional": true
     },
     "@eslint-community/eslint-utils": {
@@ -24111,9 +24111,9 @@
       "peer": true
     },
     "cypress": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.7.0.tgz",
-      "integrity": "sha512-UimjRSJJYdTlvkChcdcfywKJ6tUYuwYuk/n1uMMglrvi+ZthNhoRYcxnWgTqUtkl17fXrPAsD5XT2rcQYN1xKA==",
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.10.0.tgz",
+      "integrity": "sha512-tOhwRlurVOQbMduX+KonoMeQILs2cwR3yHGGENoFvvSoLUBHmJ8b9/n21gFSDqjlOJ+SRVcwuh+fG/JDsHsT6Q==",
       "optional": true,
       "requires": {
         "@cypress/request": "^3.0.0",
@@ -25031,33 +25031,33 @@
       }
     },
     "esbuild": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
-      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.1.tgz",
+      "integrity": "sha512-GPqx+FX7mdqulCeQ4TsGZQ3djBJkx5k7zBGtqt9ycVlWNg8llJ4RO9n2vciu8BN2zAEs6lPbPl0asZsAh7oWzg==",
       "requires": {
-        "@esbuild/aix-ppc64": "0.20.2",
-        "@esbuild/android-arm": "0.20.2",
-        "@esbuild/android-arm64": "0.20.2",
-        "@esbuild/android-x64": "0.20.2",
-        "@esbuild/darwin-arm64": "0.20.2",
-        "@esbuild/darwin-x64": "0.20.2",
-        "@esbuild/freebsd-arm64": "0.20.2",
-        "@esbuild/freebsd-x64": "0.20.2",
-        "@esbuild/linux-arm": "0.20.2",
-        "@esbuild/linux-arm64": "0.20.2",
-        "@esbuild/linux-ia32": "0.20.2",
-        "@esbuild/linux-loong64": "0.20.2",
-        "@esbuild/linux-mips64el": "0.20.2",
-        "@esbuild/linux-ppc64": "0.20.2",
-        "@esbuild/linux-riscv64": "0.20.2",
-        "@esbuild/linux-s390x": "0.20.2",
-        "@esbuild/linux-x64": "0.20.2",
-        "@esbuild/netbsd-x64": "0.20.2",
-        "@esbuild/openbsd-x64": "0.20.2",
-        "@esbuild/sunos-x64": "0.20.2",
-        "@esbuild/win32-arm64": "0.20.2",
-        "@esbuild/win32-ia32": "0.20.2",
-        "@esbuild/win32-x64": "0.20.2"
+        "@esbuild/aix-ppc64": "0.21.1",
+        "@esbuild/android-arm": "0.21.1",
+        "@esbuild/android-arm64": "0.21.1",
+        "@esbuild/android-x64": "0.21.1",
+        "@esbuild/darwin-arm64": "0.21.1",
+        "@esbuild/darwin-x64": "0.21.1",
+        "@esbuild/freebsd-arm64": "0.21.1",
+        "@esbuild/freebsd-x64": "0.21.1",
+        "@esbuild/linux-arm": "0.21.1",
+        "@esbuild/linux-arm64": "0.21.1",
+        "@esbuild/linux-ia32": "0.21.1",
+        "@esbuild/linux-loong64": "0.21.1",
+        "@esbuild/linux-mips64el": "0.21.1",
+        "@esbuild/linux-ppc64": "0.21.1",
+        "@esbuild/linux-riscv64": "0.21.1",
+        "@esbuild/linux-s390x": "0.21.1",
+        "@esbuild/linux-x64": "0.21.1",
+        "@esbuild/netbsd-x64": "0.21.1",
+        "@esbuild/openbsd-x64": "0.21.1",
+        "@esbuild/sunos-x64": "0.21.1",
+        "@esbuild/win32-arm64": "0.21.1",
+        "@esbuild/win32-ia32": "0.21.1",
+        "@esbuild/win32-x64": "0.21.1"
       }
     },
     "esbuild-wasm": {
@@ -28068,9 +28068,9 @@
       "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
     },
     "ngx-echarts": {
-      "version": "17.1.0",
-      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-17.1.0.tgz",
-      "integrity": "sha512-DSNF/aKmJSxJWb9UwPUgNtY8Ma9SmViDBRacvAwpakc/5mJerunxndDgoBQkYk5JFKAjXX6bp4ZWLRKL3/5AGA==",
+      "version": "17.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-17.2.0.tgz",
+      "integrity": "sha512-i3XDE9d53zmJH4bp8RQ/271oPlhBkczO1M3VtWk8nCXdxQq9qx8UckjWEQ7oV1AbSDLGK5sRiFu5EaY5hvdWPA==",
       "requires": {
         "tslib": "^2.3.0"
       }

frontend/package.json

@@ -50,16 +50,16 @@
     "dev:ssr": "npm run generate-config && ng run mempool:serve-ssr",
     "serve:ssr": "npm run generate-config && node server.run.js",
     "build:ssr": "npm run build && ng run mempool:server:production && ./node_modules/typescript/bin/tsc server.run.ts",
-    "config:defaults:mempool": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true LIQUID_TESTNET_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=mempool BLOCK_WEIGHT_UNITS=4000000 && npm run generate-config",
-    "config:defaults:liquid": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true LIQUID_TESTNET_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=liquid BLOCK_WEIGHT_UNITS=300000 && npm run generate-config",
+    "config:defaults:mempool": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true LIQUID_TESTNET_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=mempool BLOCK_WEIGHT_UNITS=4000000 && npm run generate-config",
+    "config:defaults:liquid": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true LIQUID_TESTNET_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=liquid BLOCK_WEIGHT_UNITS=300000 && npm run generate-config",
     "prerender": "npm run ng -- run mempool:prerender",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "cypress:run:record": "cypress run --record",
-    "cypress:open:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:open",
-    "cypress:run:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:run:record",
-    "cypress:open:ci:staging": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:open",
-    "cypress:run:ci:staging": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:run:record"
+    "cypress:open:ci": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:open",
+    "cypress:run:ci": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:run:record",
+    "cypress:open:ci:staging": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:open",
+    "cypress:run:ci:staging": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:run:record"
   },
   "dependencies": {
     "@angular-devkit/build-angular": "^17.3.1",
@@ -88,11 +88,11 @@
     "domino": "^2.1.6",
     "echarts": "~5.5.0",
     "lightweight-charts": "~3.8.0",
-    "ngx-echarts": "~17.1.0",
+    "ngx-echarts": "~17.2.0",
     "ngx-infinite-scroll": "^17.0.0",
     "qrcode": "1.5.1",
     "rxjs": "~7.8.1",
-    "esbuild": "^0.20.2",
+    "esbuild": "^0.21.1",
     "tinyify": "^4.0.0",
     "tlite": "^0.1.9",
     "tslib": "~2.6.0",
@@ -115,7 +115,7 @@
   "optionalDependencies": {
     "@cypress/schematic": "^2.5.0",
     "@types/cypress": "^1.1.3",
-    "cypress": "^13.7.0",
+    "cypress": "^13.10.0",
     "cypress-fail-on-console-error": "~5.1.0",
     "cypress-wait-until": "^2.0.1",
     "mock-socket": "~9.3.1",

frontend/proxy.conf.js

@@ -24,7 +24,7 @@ PROXY_CONFIG = [
         '/api/**', '!/api/v1/ws',
         '!/liquid', '!/liquid/**', '!/liquid/',
         '!/liquidtestnet', '!/liquidtestnet/**', '!/liquidtestnet/',
-        '/testnet/api/**', '/signet/api/**'
+        '/testnet/api/**', '/signet/api/**', '/testnet4/api/**'
         ],
         target: "https://mempool.space",
         ws: true,

frontend/src/app/app-routing.module.ts

@@ -7,6 +7,8 @@ import { MempoolBlockViewComponent } from './components/mempool-block-view/mempo
 import { ClockComponent } from './components/clock/clock.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
 import { AddressGroupComponent } from './components/address-group/address-group.component';
+import { TrackerComponent } from './components/tracker/tracker.component';
+import { AccelerateCheckout } from './components/accelerate-checkout/accelerate-checkout.component';
 
 const browserWindow = window || {};
 // @ts-ignore
@@ -51,6 +53,44 @@ let routes: Routes = [
       },
     ]
   },
+  {
+    path: 'testnet4',
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        data: { preload: true },
+      },
+      {
+        path: '',
+        loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
+        data: { preload: true },
+      },
+      {
+        path: 'wallet',
+        children: [],
+        component: AddressGroupComponent,
+        data: {
+          networkSpecific: true,
+        }
+      },
+      {
+        path: 'status',
+        data: { networks: ['bitcoin', 'liquid'] },
+        component: StatusViewComponent
+      },
+      {
+        path: '',
+        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        data: { preload: true },
+      },
+      {
+        path: '**',
+        redirectTo: '/testnet4'
+      },
+    ]
+  },
   {
     path: 'signet',
     children: [
@@ -105,6 +145,10 @@ let routes: Routes = [
     loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
     data: { preload: true },
   },
+  {
+    path: 'tracker/:id',
+    component: TrackerComponent,
+  },
   {
     path: 'wallet',
     children: [],
@@ -124,6 +168,10 @@ let routes: Routes = [
         path: 'testnet',
         loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
       },
+      {
+        path: 'testnet4',
+        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
+      },
       {
         path: 'signet',
         loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)

frontend/src/app/app.constants.ts

@@ -1,4 +1,4 @@
-export const mempoolFeeColors = [
+export const defaultMempoolFeeColors = [
   '557d00',
   '5d7d01',
   '637d02',
@@ -39,6 +39,47 @@ export const mempoolFeeColors = [
   'ae005b',
 ];
 
+export const contrastMempoolFeeColors = [
+  '0082e6',
+  '0984df',
+  '1285d9',
+  '1a87d2',
+  '2388cb',
+  '2c8ac5',
+  '358bbe',
+  '3e8db7',
+  '468eb0',
+  '4f90aa',
+  '5892a3',
+  '61939c',
+  '6a9596',
+  '72968f',
+  '7b9888',
+  '849982',
+  '8d9b7b',
+  '959c74',
+  '9e9e6e',
+  'a79f67',
+  'b0a160',
+  'b9a35a',
+  'c1a453',
+  'caa64c',
+  'd3a745',
+  'dca93f',
+  'e5aa38',
+  'edac31',
+  'f6ad2b',
+  'ffaf24',
+  'ffb01e',
+  'ffb118',
+  'ffb212',
+  'ffb30c',
+  'ffb406',
+  'ffb500',
+  'ffb600',
+  'ffb700',
+ ];
+
 export const chartColors = [
   "#D81B60",
   "#8E24AA",
@@ -148,22 +189,22 @@ export const specialBlocks = {
   '0': {
     labelEvent: 'Genesis',
     labelEventCompleted: 'The Genesis of Bitcoin',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '210000': {
     labelEvent: 'Bitcoin\'s 1st Halving',
     labelEventCompleted: 'Block Subsidy has halved to 25 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '420000': {
     labelEvent: 'Bitcoin\'s 2nd Halving',
     labelEventCompleted: 'Block Subsidy has halved to 12.5 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '630000': {
     labelEvent: 'Bitcoin\'s 3rd Halving',
     labelEventCompleted: 'Block Subsidy has halved to 6.25 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '709632': {
     labelEvent: 'Taproot 🌱 activation',
@@ -173,62 +214,62 @@ export const specialBlocks = {
   '840000': {
     labelEvent: 'Bitcoin\'s 4th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 3.125 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '1050000': {
     labelEvent: 'Bitcoin\'s 5th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 1.5625 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '1260000': {
     labelEvent: 'Bitcoin\'s 6th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.78125 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '1470000': {
     labelEvent: 'Bitcoin\'s 7th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.390625 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '1680000': {
     labelEvent: 'Bitcoin\'s 8th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.1953125 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '1890000': {
     labelEvent: 'Bitcoin\'s 9th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.09765625 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '2100000': {
     labelEvent: 'Bitcoin\'s 10th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.04882812 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '2310000': {
     labelEvent: 'Bitcoin\'s 11th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.02441406 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '2520000': {
     labelEvent: 'Bitcoin\'s 12th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.01220703 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '2730000': {
     labelEvent: 'Bitcoin\'s 13th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.00610351 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '2940000': {
     labelEvent: 'Bitcoin\'s 14th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.00305175 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '3150000': {
     labelEvent: 'Bitcoin\'s 15th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.00152587 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   }
 };
 

frontend/src/app/app.module.ts

@@ -12,6 +12,7 @@ import { PriceService } from './services/price.service';
 import { EnterpriseService } from './services/enterprise.service';
 import { WebsocketService } from './services/websocket.service';
 import { AudioService } from './services/audio.service';
+import { PreloadService } from './services/preload.service';
 import { SeoService } from './services/seo.service';
 import { OpenGraphService } from './services/opengraph.service';
 import { ZoneService } from './services/zone-shim.service';
@@ -19,6 +20,7 @@ import { SharedModule } from './shared/shared.module';
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 import { LanguageService } from './services/language.service';
+import { ThemeService } from './services/theme.service';
 import { FiatShortenerPipe } from './shared/pipes/fiat-shortener.pipe';
 import { FiatCurrencyPipe } from './shared/pipes/fiat-currency.pipe';
 import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
@@ -38,12 +40,14 @@ const providers = [
   StorageService,
   EnterpriseService,
   LanguageService,
+  ThemeService,
   ShortenStringPipe,
   FiatShortenerPipe,
   FiatCurrencyPipe,
   CapAddressPipe,
   AppPreloadingStrategy,
   ServicesApiServices,
+  PreloadService,
   { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true },
   { provide: ZONE_SERVICE, useClass: ZoneService },
 ];

frontend/src/app/bitcoin.utils.ts

@@ -266,6 +266,11 @@ const featureActivation = {
     segwit: 872730,
     taproot: 2032291,
   },
+  testnet4: {
+    rbf: 0,
+    segwit: 0,
+    taproot: 0,
+  },
   signet: {
     rbf: 0,
     segwit: 0,

frontend/src/app/components/about/about-sponsors.component.scss

@@ -14,7 +14,7 @@
 }
 
 .become-sponsor {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   border-radius: 16px;
   padding: 12px 20px;
   width: 400px;

frontend/src/app/components/about/about.component.html

@@ -32,7 +32,7 @@
     <track label="Português" kind="captions" srclang="pt" src="/resources/promo-video/pt.vtt" [attr.default]="showSubtitles('pt') ? '' : null">
   </video>
 
-  <ng-container *ngIf="officialMempoolSpace">
+  <ng-container>
     <app-about-sponsors></app-about-sponsors>
   </ng-container>
 
@@ -181,7 +181,7 @@
     </div>
   </div>
 
-  <ng-container *ngIf="officialMempoolSpace">
+  <ng-container>
     <div *ngIf="profiles$ | async as profiles" id="community-sponsors-anchor">
       <div class="community-sponsor" style="margin-bottom: 68px" *ngIf="profiles.whales.length > 0">
         <h3 i18n="about.sponsors.withHeart">Whale Sponsors</h3>
@@ -343,8 +343,8 @@
       <a href="https://opencrypto.org/" title="Coppa - Crypto Open Patent Alliance">
         <img class="copa" src="/resources/profile/copa.png" />
       </a>
-      <a href="https://bisq.network/" title="Bisq Network">
-        <img class="bisq" src="/resources/profile/bisq.svg" />
+      <a href="https://bitcoin.gob.sv" title="Oficina Nacional del Bitcoin">
+        <img class="sv" src="/resources/profile/onbtc-full.svg" />
       </a>
     </div>
   </div>
@@ -380,7 +380,7 @@
       <h3 i18n="about.project_members">Project Members</h3>
       <div class="wrapper">
         <ng-template ngFor let-contributor [ngForOf]="contributors.core">
-          <a [href]="'https://github.com/' + contributor.name" target="_blank" [title]="contributor.name">
+          <a [href]="'https://github.com/' + contributor.name" target="_blank" [title]="contributor.name" [class]="'project-member-avatar'">
             <img class="image" [src]="'/api/v1/contributors/images/' + contributor.id" onError="this.src = '/resources/profile/unknown.svg'; this.className = 'image unknown'"/>
             <span>{{ contributor.name }}</span>
           </a>

frontend/src/app/components/about/about.component.scss

@@ -129,8 +129,9 @@
       position: relative;
       width: 300px;
     }
-    .bisq {
-      top: 3px;
+    .sv {
+      height: 85px;
+      width: auto;
       position: relative;
     }
   }
@@ -177,6 +178,10 @@
     }
   }
 
+  #project-members a.project-member-avatar img {
+    margin: 40px 20px 10px;
+  }
+
   .copyright {
     text-align: left;
     max-width: 620px;

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html

@@ -0,0 +1,139 @@
+<div class="container-md card w-100" style="padding: 1em; background: var(--box-bg)" id=acceleratePreviewAnchor>
+
+  @if (error) {
+    <div class="mt-2">
+      <app-mempool-error [error]="error"></app-mempool-error>
+    </div>
+  } 
+
+  @else if (step === 'cta') {
+    <!-- Show A/B CTAs -->
+    <div class="row mb-1">
+      <div class="col-sm">
+        <h1 style="font-size: larger;">Accelerate your Bitcoin transaction?</h1>
+      </div>
+    </div>
+
+    <form>
+      <div class="row">
+        <div class="col-sm">
+          <div class="form-group form-check mb-2">
+            <input type="radio" class="form-check-input" id="accelerate" name="accelerate" (change)="selectedOptionChanged($event)">
+            <label class="form-check-label d-flex flex-column" for="accelerate">
+              <span class="font-weight-bold">Accelerate</span>
+              <span style="color: rgb(186, 186, 186); font-size: 14px;">Confirmation expected within ~30 minutes<br>
+                @if (!calculating) {
+                  <app-fiat [value]="cost"></app-fiat>fee (<span><small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span>)
+                } @else {
+                  <span class="estimating">Calculating cost...</span>
+                }
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm">
+          <div class="form-group form-check mb-2">
+            <input type="radio" class="form-check-input" id="wait" name="accelerate" (change)="selectedOptionChanged($event)">
+            <label class="form-check-label d-flex flex-column" for="wait">
+              <span class="font-weight-bold">Wait</span>
+              @if (eta) {
+                <span style="color: rgb(186, 186, 186); font-size: 14px;">Confirmation expected <app-time kind="within" [time]="eta" [fastRender]="false" [fixedRender]="true"></app-time></span>
+              } @else {
+                <span style="color: rgb(186, 186, 186); font-size: 14px;">
+                  <span>Settlement expected within several hours</span>
+                </span>
+              }
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="row mt-2 mb-2" [style]="(choosenOption === 'wait' || calculating) ? 'opacity: 0.25; pointer-events: none' : ''">
+        <div class="col-sm d-flex flex-row justify-content-center">
+          <button type="button" class="mt-1 btn btn-purple rounded-pill align-self-center d-flex flex-row justify-content-center align-items-center" style="width: 200px" (click)="enableCheckoutPage()">
+            <img src="/resources/mempool-accelerator-sparkles-light.svg" height="20" class="mr-2" style="margin-left: -10px">
+            <span>Accelerate</span>
+          </button>
+        </div>
+      </div>
+    </form>
+  }
+    
+  @else if (step === 'checkout') {
+    <!-- Show checkout page -->
+    <div class="row mb-md-1 text-center">
+      <div class="col-sm">
+        <h1 style="font-size: larger;">Confirm your payment</h1>
+      </div>
+    </div>
+
+    <div class="row text-center">
+      <div class="col-sm">
+        <div class="form-group w-100" style="font-size: 14px">
+          Payment to mempool.space for acceleration of txid <a [routerLink]="'/tx/' + txid" target="_blank">{{ txid.substr(0, 10) }}..{{ txid.substr(-10) }}</a>
+        </div>
+      </div>
+    </div>
+
+    @if (!loadingCashapp) {
+      <div class="row text-center mt-1">
+        <div class="col-sm">
+          <div class="form-group w-100">
+            <span><u><strong>Total additional cost</strong></u><br>
+              <span style="font-size: 16px" class="d-block mt-2">
+                Pay
+                <strong><app-fiat [value]="cost"></app-fiat></strong>
+                with
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    }
+
+    <div class="row text-center mt-1">
+      <div class="col-sm">
+        <div class="form-group w-100">
+          <div id="cash-app-pay" class="d-inline-block" [style]="loadingCashapp ? 'opacity: 0; width: 0px; height: 0px; pointer-events: none;' : ''"></div>
+          @if (loadingCashapp) {
+          <div display="d-flex flex-row justify-content-center">
+            <span>Loading payment method...</span>
+            <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
+          </div>
+          }
+        </div>
+      </div>
+    </div>
+
+    <hr>
+    <div class="row mt-2 mb-2 text-center">
+      <div class="col-sm d-flex flex-column">
+        <small>Changed your mind?</small>
+        <button type="button" class="mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style="width: 200px" (click)="step = 'cta'">Go Back</button>
+      </div>
+    </div>
+  }
+
+  @else if (step === 'processing') {
+    <div class="row mb-1 text-center">
+      <div class="col-sm">
+        <h1 style="font-size: larger;">Confirm your payment</h1>
+      </div>
+    </div>
+
+    <div class="row text-center mt-1">
+      <div class="col-sm">
+        <div class="form-group w-100">
+          <!-- Processing payment -->
+          <div id="cash-app-pay" class="d-inline-block" [style]="'opacity: 0; width: 0px; height: 0px; pointer-events: none;'"></div>
+          <div display="d-flex flex-row justify-content-center">
+            <span>We are processing your payment...</span>
+            <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+  
+</div>

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss

@@ -0,0 +1,9 @@
+.close-button {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+}
+
+.estimating {
+  color: var(--green)
+}

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts

@@ -0,0 +1,277 @@
+import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef, SimpleChanges } from '@angular/core';
+import { Subscription, tap, of, catchError } from 'rxjs';
+import { ServicesApiServices } from '../../services/services-api.service';
+import { nextRoundNumber } from '../../shared/common.utils';
+import { StateService } from '../../services/state.service';
+import { AudioService } from '../../services/audio.service';
+
+@Component({
+  selector: 'app-accelerate-checkout',
+  templateUrl: './accelerate-checkout.component.html',
+  styleUrls: ['./accelerate-checkout.component.scss']
+})
+export class AccelerateCheckout implements OnInit, OnDestroy {
+  @Input() eta: number | null = null;
+  @Input() txid: string = '70c18d76cdb285a1b5bd87fdaae165880afa189809c30b4083ff7c0e69ee09ad';
+  @Input() scrollEvent: boolean;
+  @Output() close = new EventEmitter<null>();
+
+  calculating = true;
+  choosenOption: 'wait' | 'accelerate' = 'wait';
+  error = '';
+
+  // accelerator stuff
+  square: { appId: string, locationId: string};
+  accelerationUUID: string;
+  estimateSubscription: Subscription;
+  maxBidBoost: number; // sats
+  cost: number; // sats
+
+  // square
+  loadingCashapp = false;
+  cashappSubmit: any;
+  payments: any;
+  cashAppPay: any;
+  cashAppSubscription: Subscription;
+  conversionsSubscription: Subscription;
+  step: 'cta' | 'checkout' | 'processing' = 'cta';
+
+  constructor(
+    private servicesApiService: ServicesApiServices,
+    private stateService: StateService,
+    private audioService: AudioService,
+    private cd: ChangeDetectorRef
+  ) {
+    this.accelerationUUID = window.crypto.randomUUID();
+  }
+
+  ngOnInit() {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('cash_request_id')) { // Redirected from cashapp
+      this.insertSquare();
+      this.setupSquare();
+      this.step = 'processing';
+    }
+
+    this.servicesApiService.setupSquare$().subscribe(ids => {
+      this.square = {
+        appId: ids.squareAppId,
+        locationId: ids.squareLocationId
+      };
+      if (this.step === 'cta') {
+        this.estimate();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.estimateSubscription) {
+      this.estimateSubscription.unsubscribe();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.scrollEvent) {
+      this.scrollToPreview('acceleratePreviewAnchor', 'start');
+    }
+  }
+
+  /**
+  * Scroll to element id with or without setTimeout
+  */
+  scrollToPreviewWithTimeout(id: string, position: ScrollLogicalPosition) {
+    setTimeout(() => {
+      this.scrollToPreview(id, position);
+    }, 1000);
+  }
+  scrollToPreview(id: string, position: ScrollLogicalPosition) {
+    const acceleratePreviewAnchor = document.getElementById(id);
+    if (acceleratePreviewAnchor) {
+      this.cd.markForCheck();
+      acceleratePreviewAnchor.scrollIntoView({
+        behavior: 'smooth',
+        inline: position,
+        block: position,
+      });
+    }
+  }
+
+  /**
+   * Accelerator
+   */
+  estimate() {
+    if (this.estimateSubscription) {
+      this.estimateSubscription.unsubscribe();
+    }
+    this.calculating = true;
+    this.estimateSubscription = this.servicesApiService.estimate$(this.txid).pipe(
+      tap((response) => {
+        this.calculating = false;
+        if (response.status === 204) {
+          this.error = `cannot_accelerate_tx`;
+        } else {
+          const estimation = response.body;
+          if (!estimation) {
+            this.error = `cannot_accelerate_tx`;
+            return;
+          }
+          // Make min extra fee at least 50% of the current tx fee
+          const minExtraBoost = nextRoundNumber(Math.max(estimation.cost * 2, estimation.txSummary.effectiveFee));
+          const DEFAULT_BID_RATIO = 2;
+          this.maxBidBoost = minExtraBoost * DEFAULT_BID_RATIO;
+          this.cost = this.maxBidBoost + estimation.mempoolBaseFee + estimation.vsizeFee;
+        }
+      }),
+
+      catchError((response) => {
+        this.error = `cannot_accelerate_tx`;
+        return of(null);
+      })
+    ).subscribe();
+  }
+
+  /**
+   * Square
+   */
+  insertSquare(): void {
+    //@ts-ignore
+    if (window.Square) {
+      return;
+    }
+    let statsUrl = 'https://sandbox.web.squarecdn.com/v1/square.js';
+    if (document.location.hostname === 'mempool-staging.fmt.mempool.space' ||
+        document.location.hostname === 'mempool-staging.va1.mempool.space' ||
+        document.location.hostname === 'mempool-staging.fra.mempool.space' ||
+        document.location.hostname === 'mempool-staging.tk7.mempool.space' ||
+        document.location.hostname === 'mempool.space') {
+      statsUrl = 'https://web.squarecdn.com/v1/square.js';
+    }
+
+    (function() {
+      const d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+      // @ts-ignore
+      g.type='text/javascript'; g.src=statsUrl; s.parentNode.insertBefore(g, s);
+    })();
+  }
+  setupSquare() {
+    const init = () => {
+      this.initSquare();
+    };
+
+    //@ts-ignore
+    if (!window.Square) {
+      console.debug('Square.js failed to load properly. Retrying in 1 second.');
+      setTimeout(init, 1000);
+    } else {
+      init();
+    }
+  }
+  async initSquare(): Promise<void> {
+    try {
+      //@ts-ignore
+      this.payments = window.Square.payments(this.square.appId, this.square.locationId)
+      await this.requestCashAppPayment();
+    } catch (e) {
+      console.debug('Error loading Square Payments', e);
+      return;
+    }
+  }
+  async requestCashAppPayment() {
+    if (this.cashAppSubscription) {
+      this.cashAppSubscription.unsubscribe();
+    }
+    if (this.conversionsSubscription) {
+      this.conversionsSubscription.unsubscribe();
+    }
+    
+    this.conversionsSubscription = this.stateService.conversions$.subscribe(
+      async (conversions) => {
+        if (this.cashAppPay) {
+          this.cashAppPay.destroy();
+        }
+
+        const redirectHostname = document.location.hostname === 'localhost' ? `http://localhost:4200`: `https://${document.location.hostname}`;
+        const costUSD = this.step === 'processing' ? 69.69 : (this.cost / 100_000_000 * conversions.USD); // When we're redirected to this component, the payment data is already linked to the payment token, so does not matter what amonut we put in there, therefore it's 69.69
+        const paymentRequest = this.payments.paymentRequest({
+          countryCode: 'US',
+          currencyCode: 'USD',
+          total: {
+            amount: costUSD.toString(),
+            label: 'Total',
+            pending: true,
+            productUrl: `${redirectHostname}/tracker/${this.txid}`,
+          },
+          button: { shape: 'semiround', size: 'small', theme: 'light'}
+        });
+        this.cashAppPay = await this.payments.cashAppPay(paymentRequest, {
+          redirectURL: `${redirectHostname}/tracker/${this.txid}`,
+          referenceId: `accelerator-${this.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
+          button: { shape: 'semiround', size: 'small', theme: 'light'}
+        });
+
+        if (this.step === 'checkout') {
+          await this.cashAppPay.attach(`#cash-app-pay`, { theme: 'light', size: 'small', shape: 'semiround' })
+        }
+        this.loadingCashapp = false;
+
+        const that = this;
+        this.cashAppPay.addEventListener('ontokenization', function (event) {
+          const { tokenResult, error } = event.detail;
+          if (error) {
+            this.error = error;
+          } else if (tokenResult.status === 'OK') {
+            that.servicesApiService.accelerateWithCashApp$(
+              that.txid,
+              tokenResult.token,
+              tokenResult.details.cashAppPay.cashtag,
+              tokenResult.details.cashAppPay.referenceId,
+              that.accelerationUUID
+            ).subscribe({
+              next: () => {
+                that.audioService.playSound('ascend-chime-cartoon');
+                if (that.cashAppPay) {
+                  that.cashAppPay.destroy();
+                }
+                setTimeout(() => {
+                  that.closeModal();
+                  if (window.history.replaceState) {
+                    const urlParams = new URLSearchParams(window.location.search);
+                    window.history.replaceState(null, null, window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ''));
+                  }
+                }, 1000);
+              },
+              error: (response) => {
+                if (response.status === 403 && response.error === 'not_available') {
+                  that.error = 'waitlisted';
+                } else {
+                  that.error = response.error;
+                  setTimeout(() => {
+                    // Reset everything by reloading the page :D, can be improved
+                    const urlParams = new URLSearchParams(window.location.search);
+                    window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
+                  }, 3000);
+                }
+              }
+            });
+          }
+        });
+      }
+    );
+  }
+
+  /**
+   * UI events
+   */
+  enableCheckoutPage() {
+    this.step = 'checkout';
+    this.loadingCashapp = true;
+    this.insertSquare();
+    this.setupSquare();
+  }
+  selectedOptionChanged(event) {
+    this.choosenOption = event.target.id;
+  }
+  closeModal(): void {
+    this.close.emit();
+  }
+}

frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss

@@ -10,7 +10,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    background: #181b2d;
+    background: var(--stat-box-bg);
 
     .bar {
       position: absolute;
@@ -76,7 +76,7 @@
 
       &.tx {
         .fill {
-          background: #3bcc49;
+          background: var(--green);
         }
         .line {
           .fee-rate {
@@ -92,7 +92,7 @@
 
       &.target {
         .fill {
-          background: #653b9c;
+          background: var(--tertiary);
         }
         .fee {
           position: absolute;
@@ -114,7 +114,7 @@
         }
         &.active, &:hover {
           .fill {
-            background: #105fb0;
+            background: var(--primary);
           }
           .line {
             .fee-rate .label {

frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.ts

@@ -52,7 +52,7 @@ export class AccelerateFeeGraphComponent implements OnInit, OnChanges {
         rate: option.rate,
         style: this.getStyle(option.rate, maxRate, baseHeight),
         class: 'max',
-        label: 'maximum',
+        label: $localize`maximum`,
         active: option.index === this.maxRateIndex,
         rateIndex: option.index,
         fee: option.fee,
@@ -63,7 +63,7 @@ export class AccelerateFeeGraphComponent implements OnInit, OnChanges {
         rate: this.estimate.targetFeeRate,
         style: this.getStyle(this.estimate.targetFeeRate, maxRate, baseHeight),
         class: 'target',
-        label: 'next block',
+        label: $localize`:@@bdf0e930eb22431140a2eaeacd809cc5f8ebd38c:Next Block`.toLowerCase(),
         fee: this.estimate.nextBlockFee - this.estimate.txSummary.effectiveFee
       });
     }

frontend/src/app/components/accelerate-preview/accelerate-preview.component.html

@@ -26,42 +26,38 @@
   </ng-container>
 
   <ng-container *ngIf="estimate else loadingEstimate">
-    <div [class]="{estimateDisabled: error}">
+    <div [class]="{estimateDisabled: error || showSuccess }">
 
       <div *ngIf="user && !estimate.hasAccess">
         <div class="alert alert-mempool">You are currently on the waitlist</div>
       </div>
 
-      <h5>Your transaction</h5>
+      <h5 i18n="accelerator.your-transaction">Your transaction</h5>
       <div class="row">
         <div class="col">
           <small *ngIf="hasAncestors" class="form-text text-muted mb-2">
-            Plus {{ estimate.txSummary.ancestorCount - 1 }} unconfirmed ancestor{{ estimate.txSummary.ancestorCount > 2 ? 's' : ''}}.
+            <ng-container i18n="accelerator.plus-unconfirmed-ancestors">Plus {{ estimate.txSummary.ancestorCount - 1 }} unconfirmed ancestor(s)</ng-container>
           </small>
-          <table class="table table-borderless table-border table-dark table-accelerator">
+          <table class="table table-borderless table-border table-dark table-background table-accelerator">
             <tbody>
               <tr class="group-first">
-                <td class="item">
-                  Virtual size
-                </td>
+                <td class="item" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
                 <td style="text-align: end;" [innerHTML]="'&lrm;' + (estimate.txSummary.effectiveVsize | vbytes: 2)"></td>
               </tr>
               <tr class="info">
                 <td class="info" colspan=3>
-                  <i><small>Size in vbytes of this transaction<span *ngIf="hasAncestors"> and its unconfirmed ancestors</span></small></i>
+                  <i><small i18n="accelerator.transaction-vbytes-size-description">Size in vbytes of this transaction (including unconfirmed ancestors)</small></i>
                 </td>
               </tr>
               <tr>
-                <td class="item">
-                  In-band fees
-                </td>
+                <td class="item" i18n="accelerator.in-band-fees">In-band fees</td>
                 <td style="text-align: end;">
                   {{ estimate.txSummary.effectiveFee | number : '1.0-0' }} <span class="symbol" i18n="shared.sats">sats</span>
                 </td>
               </tr>
               <tr class="info group-last">
                 <td class="info" colspan=3>
-                  <i><small>Fees already paid by this transaction<span *ngIf="hasAncestors"> and its unconfirmed ancestors</span></small></i>
+                  <i><small i18n="accelerator.fees-already-paid-description">Fees already paid by this transaction (including unconfirmed ancestors)</small></i>
                 </td>
               </tr>
             </tbody>
@@ -69,13 +65,10 @@
         </div>
       </div>
       <br>
-      <h5>How much more are you willing to pay?</h5>
+      <h5 i18n="accelerator.pay-how-much">How much more are you willing to pay?</h5>
       <div class="row">
         <div class="col">
-          <small class="form-text text-muted mb-2">
-            Choose the maximum extra transaction fee you're willing to pay to get into the next block.<br>
-            If the estimated next block rate rises beyond this limit, we will automatically cancel your acceleration request.
-          </small>
+          <small class="form-text text-muted mb-2" i18n="accelerator.transaction-fee-description">Choose the maximum extra transaction fee you're willing to pay to get into the next block.</small>
           <div class="form-group">
             <div class="fee-card">
               <div class="d-flex mb-0">
@@ -94,14 +87,12 @@
       <h5>Acceleration summary</h5>
       <div class="row mb-3">
         <div class="col">
-          <table class="table table-borderless table-border table-dark table-accelerator">
+          <table class="table table-borderless table-border table-dark table-background table-accelerator">
             <tbody>
               <!-- ESTIMATED FEE -->
               <ng-container>
                 <tr class="group-first">
-                  <td class="item">
-                    Next block market rate
-                  </td>
+                  <td class="item" i18n="accelerator.next-block-rate">Next block market rate</td>
                   <td class="amt" style="font-size: 16px">
                     {{ estimate.targetFeeRate | number : '1.0-0' }}
                   </td>
@@ -109,7 +100,7 @@
                 </tr>
                 <tr class="info">
                   <td class="info">
-                    <i><small>Estimated extra fee required</small></i>
+                    <i><small i18n="accelerator.estimated-extra-fee-required">Estimated extra fee required</small></i>
                   </td>
                   <td class="amt">
                     {{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }}
@@ -123,13 +114,11 @@
   
               <!-- MEMPOOL BASE FEE -->
               <tr>
-                <td class="item">
-                  Mempool Accelerator™ fees
-                </td>
+                <td class="item" i18n="accelerator.mempool-accelerator-fees">Mempool Accelerator™ fees</td>
               </tr>
               <tr class="info">
                 <td class="info">
-                  <i><small>Accelerator Service Fee</small></i>
+                  <i><small i18n="accelerator.service-fee">Accelerator Service Fee</small></i>
                 </td>
                 <td class="amt">
                   +{{ estimate.mempoolBaseFee | number }}
@@ -141,7 +130,7 @@
               </tr>
               <tr class="info group-last">
                 <td class="info">
-                  <i><small>Transaction Size Surcharge</small></i>
+                  <i><small i18n="accelerator.tx-size-surcharge">Transaction Size Surcharge</small></i>
                 </td>
                 <td class="amt">
                   +{{ estimate.vsizeFee | number }}
@@ -152,11 +141,12 @@
                 </td>
               </tr>
 
+              
               <!-- NEXT BLOCK ESTIMATE -->
               <ng-container>
                 <tr class="group-first" style="border-top: 1px dashed grey; border-collapse: collapse;">
                   <td class="item">
-                    <b style="background-color: #5E35B1" class="p-1 pl-0">Estimated acceleration cost</b>
+                    <b style="background-color: #5E35B1" class="p-1 pl-0" i18n="accelerator.estimated-cost">Estimated acceleration cost</b>
                   </td>
                   <td class="amt">
                     <span style="background-color: #5E35B1" class="p-1 pl-0">
@@ -170,19 +160,19 @@
                 </tr>
                 <tr class="info group-last" style="border-bottom: 1px solid lightgrey">
                   <td class="info" colspan=3>
-                    <i><small>If your tx is accelerated to </small><small>{{ estimate.targetFeeRate | number : '1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></small></i>
+                    <i><small><ng-container *ngTemplateOutlet="acceleratedTo; context: {$implicit: estimate.targetFeeRate }"></ng-container></small></i>
                   </td>
                 </tr>
               </ng-container>
-  
+
               <!-- MAX COST -->
               <ng-container>
                 <tr class="group-first">
                   <td class="item">
-                    <b style="background-color: #105fb0;" class="p-1 pl-0">Maximum acceleration cost</b>
+                    <b style="background-color: var(--primary);" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b>
                   </td>
                   <td class="amt">
-                    <span style="background-color: #105fb0" class="p-1 pl-0">
+                    <span style="background-color: var(--primary)" class="p-1 pl-0">
                       {{ maxCost | number }}
                     </span>
                   </td>
@@ -195,7 +185,7 @@
                 </tr>
                 <tr class="info group-last">
                   <td class="info" colspan=3>
-                    <i><small>If your tx is accelerated to </small><small>~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }}  <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></small></i>
+                    <i><small><ng-container *ngTemplateOutlet="acceleratedTo; context: {$implicit: (estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize }"></ng-container></small></i>
                   </td>
                 </tr>
               </ng-container>
@@ -203,9 +193,7 @@
               <!-- USER BALANCE -->
               <ng-container *ngIf="isLoggedIn() && estimate.userBalance < maxCost">
                 <tr class="group-first group-last" style="border-top: 1px dashed grey">
-                  <td class="item">
-                    Available balance
-                  </td>
+                  <td class="item" i18n="accelerator.available-balance">Available balance</td>
                   <td class="amt">
                     {{ estimate.userBalance | number }}
                   </td>
@@ -224,7 +212,7 @@
                   <td class="item"></td>
                   <td class="amt"></td>
                   <td class="units d-flex">
-                    <a [routerLink]="['/login']" [queryParams]="{redirectTo: '/tx/' + tx.txid + '#accelerate'}" class="btn btn-purple flex-grow-1">Login</a>
+                    <a [routerLink]="['/login']" [queryParams]="{redirectTo: '/tx/' + tx.txid + '#accelerate'}" class="btn btn-purple flex-grow-1" i18n="shared.sign-in">Sign In</a>
                   </td>
                 </tr>
               </ng-container>
@@ -233,7 +221,7 @@
                   <td class="item"></td>
                   <td class="amt"></td>
                   <td class="units d-flex">
-                    <a [href]="'https://mempool.space/tx/' + tx.txid + '#accelerate'" class="btn btn-purple flex-grow-1">Accelerate on mempool.space</a>
+                    <a [href]="'https://mempool.space/tx/' + tx.txid + '#accelerate'" class="btn btn-purple flex-grow-1" i18n="accelerator.accelerate-on-mempoolspace">Accelerate on mempool.space</a>
                   </td>
                 </tr>
               </ng-container>
@@ -245,7 +233,7 @@
       <div class="row mb-3" *ngIf="isLoggedIn()">
         <div class="col">
           <div class="d-flex justify-content-end" *ngIf="user && estimate.hasAccess">
-            <button class="btn btn-sm btn-primary btn-success" style="width: 150px" (click)="accelerate()">Accelerate</button>
+            <button class="btn btn-sm btn-primary btn-success" style="width: 150px" (click)="accelerate()" i18n="transaction.accelerate|Accelerate button label">Accelerate</button>
           </div>
         </div>
       </div>
@@ -257,4 +245,6 @@
 <ng-template #loadingEstimate>
   <div class="skeleton-loader"></div>
   <br>
-</ng-template>
+</ng-template>
+
+<ng-template #acceleratedTo let-i i18n="accelerator.accelerated-to-description">If your tx is accelerated to ~{{ i | number : '1.0-0' }} sat/vB</ng-template>

frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss

@@ -1,6 +1,6 @@
 .fee-card {
   padding: 15px;
-  background-color: #1d1f31;
+  background-color: var(--bg);
 
   .feerate {
     display: flex;
@@ -23,7 +23,7 @@
 }
 
 .feerate.active {
-  background-color: #105fb0 !important;
+  background-color: var(--primary) !important;
   opacity: 1;
   border: 1px solid #007fff !important;
 }
@@ -109,4 +109,8 @@
 
 .item {
   white-space: initial;
+}
+
+.table-background {
+  background-color: var(--bg);
 }

frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef } from '@angular/core';
-import { ApiService } from '../../services/api.service';
 import { Subscription, catchError, of, tap } from 'rxjs';
 import { StorageService } from '../../services/storage.service';
 import { Transaction } from '../../interfaces/electrs.interface';
@@ -57,6 +56,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   defaultBid = 0;
   maxCost = 0;
   userBid = 0;
+  accelerationUUID: string;
   selectFeeRateIndex = 1;
   isMobile: boolean = window.innerWidth <= 767.98;
   user: any = undefined;
@@ -69,7 +69,8 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
     private storageService: StorageService,
     private audioService: AudioService,
     private cd: ChangeDetectorRef
-  ) { }
+  ) {
+  }
 
   ngOnDestroy(): void {
     if (this.estimateSubscription) {
@@ -77,13 +78,17 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
     }
   }
 
+  ngOnInit() {
+    this.accelerationUUID = window.crypto.randomUUID();
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.scrollEvent) {
       this.scrollToPreview('acceleratePreviewAnchor', 'start');
     }
   }
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this.user = this.storageService.getAuth()?.user ?? null;
 
     this.estimateSubscription = this.servicesApiService.estimate$(this.tx.txid).pipe(
@@ -135,6 +140,10 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
 
           if (!this.error) {
             this.scrollToPreview('acceleratePreviewAnchor', 'start');
+
+            setTimeout(() => {
+              this.onScroll();
+            }, 100);
           }
         }
       }),
@@ -188,7 +197,8 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
     }
     this.accelerationSubscription = this.servicesApiService.accelerate$(
       this.tx.txid,
-      this.userBid
+      this.userBid,
+      this.accelerationUUID
     ).subscribe({
       next: () => {
         this.audioService.playSound('ascend-chime-cartoon');
@@ -216,4 +226,15 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   onResize(): void {
     this.isMobile = window.innerWidth <= 767.98;
   }
+
+
+  @HostListener('window:scroll', ['$event']) // for window scroll events
+  onScroll() {
+    if (this.estimate) {
+      setTimeout(() => {
+        this.onScroll();
+      }, 200);
+      return;
+    }
+  }
 }

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html

@@ -10,7 +10,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="daysAvailable">
-      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
+      <div class="btn-group btn-group-toggle" name="radioBasic">
         <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" formControlName="dateSpan"> 24H
         </label>
@@ -45,8 +45,8 @@
     </form>
   </div>
 
-  <div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+  <div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
   </div>
   <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
     <div class="spinner-border text-light"></div>

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss

@@ -11,7 +11,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;
@@ -62,10 +63,5 @@ h5 {
 
 .card-title {
   font-size: 1rem;
-  color: #4a68b9;
+  color: var(--title-fg);
 }
-
-.disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { EChartsOption } from '../../../graphs/echarts';
-import { Observable, Subscription, combineLatest, fromEvent, share } from 'rxjs';
+import { Observable, Subject, Subscription, combineLatest, fromEvent, merge, share } from 'rxjs';
 import { startWith, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from '../../../services/seo.service';
 import { formatNumber } from '@angular/common';
@@ -27,11 +27,12 @@ import { StateService } from '../../../services/state.service';
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
+export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDestroy {
   @Input() widget: boolean = false;
   @Input() height: number = 300;
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
+  @Input() period: '3d' | '1w' | '1m' = '1w';
   @Input() accelerations$: Observable<Acceleration[]>;
 
   miningWindowPreference: string;
@@ -47,9 +48,8 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
   isLoading = true;
   formatNumber = formatNumber;
   timespan = '';
+  periodSubject$: Subject<'3d' | '1w' | '1m'> = new Subject();
   chartInstance: any = undefined;
-
-  currency: string;
   daysAvailable: number = 0;
 
   constructor(
@@ -63,17 +63,16 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
     public stateService: StateService,
     private cd: ChangeDetectorRef,
   ) {
-    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
-    this.radioGroupForm.controls.dateSpan.setValue('1y');
-    this.currency = 'USD';
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1w' });
+    this.radioGroupForm.controls.dateSpan.setValue('1w');
   }
 
   ngOnInit(): void {
     if (this.widget) {
-      this.miningWindowPreference = '3m';
+      this.miningWindowPreference = this.period;
     } else {
       this.seoService.setTitle($localize`:@@bcf34abc2d9ed8f45a2f65dd464c46694e9a181e:Acceleration Fees`);
-      this.miningWindowPreference = this.miningService.getDefaultTimespan('3m');
+      this.miningWindowPreference = this.miningService.getDefaultTimespan('1w');
     }
     this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
     this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
@@ -84,8 +83,12 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
       }
     });
     this.aggregatedHistory$ = combineLatest([
-      this.radioGroupForm.get('dateSpan').valueChanges.pipe(
-        startWith(this.radioGroupForm.controls.dateSpan.value),
+      merge(
+        this.radioGroupForm.get('dateSpan').valueChanges.pipe(
+          startWith(this.radioGroupForm.controls.dateSpan.value),
+        ),
+        this.periodSubject$
+      ).pipe(
         switchMap((timespan) => {
           if (!this.widget) {
             this.storageService.setValue('miningWindowPreference', timespan);
@@ -110,6 +113,12 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
     this.aggregatedHistory$.subscribe();
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.period) {
+      this.periodSubject$.next(this.period);
+    }
+  }
+
   prepareChartOptions(data) {
     let title: object;
     if (data.length === 0) {
@@ -221,7 +230,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },

frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html

@@ -17,10 +17,10 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="accelerator.success-rate">Success Rate</h5>
+      <h5 class="card-title" i18n="accelerator.total-vsize">Total vSize</h5>
       <div class="card-text">
-        <div>{{ stats.successRate.toFixed(2) }} %</div>
-        <div class="symbol" i18n="accelerator.mined-next-block">mined</div>
+        <div [innerHTML]="'&lrm;' + (stats.totalVsize | vbytes: 2)"></div>
+        <div class="symbol">{{ (stats.totalVsize / (1_000_000 * blocksInPeriod) * 100).toFixed(2) }}% <span i18n="accelerator.percent-of-blocks"> of blocks</span></div>
       </div>
     </div>
   </div>
@@ -43,7 +43,7 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="accelerator.success-rate">Success Rate</h5>
+      <h5 class="card-title" i18n="accelerator.total-vsize">Total vSize</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>

frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss

@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 10px;
   margin-bottom: 4px;  
   font-size: 1rem;
@@ -34,7 +34,7 @@
     @media (min-width: 376px) {
       margin: 0 auto 0px;
     }    
-    &:first-child{
+    &:last-child{
       display: none;
       @media (min-width: 485px) {
         display: block;
@@ -50,7 +50,7 @@
       margin-bottom: 0;
     }
     .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
       font-size: 12px;
       top: 0px;
     }

frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ServicesApiServices } from '../../../services/services-api.service';
 
@@ -6,6 +6,7 @@ export type AccelerationStats = {
   totalRequested: number;
   totalBidBoost: number;
   successRate: number;
+  totalVsize: number;
 }
 
 @Component({
@@ -14,14 +15,35 @@ export type AccelerationStats = {
   styleUrls: ['./acceleration-stats.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccelerationStatsComponent implements OnInit {
+export class AccelerationStatsComponent implements OnInit, OnChanges {
+  @Input() timespan: '3d' | '1w' | '1m' = '1w';
   accelerationStats$: Observable<AccelerationStats>;
+  blocksInPeriod: number = 7 * 144;
 
   constructor(
     private servicesApiService: ServicesApiServices
   ) { }
 
   ngOnInit(): void {
-    this.accelerationStats$ = this.servicesApiService.getAccelerationStats$();
+    this.updateStats();
+  }
+
+  ngOnChanges(): void {
+    this.updateStats();
+  }
+
+  updateStats(): void {
+    this.accelerationStats$ = this.servicesApiService.getAccelerationStats$({ timeframe: this.timespan });
+    switch (this.timespan) {
+      case '3d':
+        this.blocksInPeriod = 3 * 144;
+        break;
+      case '1w':
+        this.blocksInPeriod = 7 * 144;
+        break;
+      case '1m':
+        this.blocksInPeriod = 30 * 144;
+        break;
+    }
   }
 }

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html

@@ -1,5 +1,5 @@
 <div class="container-lg widget-container" [class.widget]="widget" [class.full-height]="!widget">
-  <h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Accelerations</h1>
+  <h1 *ngIf="!widget" class="float-left" i18n="accelerator.accelerations">Accelerations</h1>
   <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
 
   <div class="clearfix"></div>
@@ -9,15 +9,15 @@
       <thead>
         <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
         <ng-container *ngIf="pending">
-          <th class="fee-rate text-right" i18n="transaction.fee|Transaction fee">Fee Rate</th>
-          <th class="bid text-right" i18n="transaction.fee|Transaction fee">Acceleration Bid</th>
-          <th class="time text-right" i18n="accelerator.block">Requested</th>
+          <th class="fee-rate text-right" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
+          <th class="bid text-right" i18n="accelerator.bid">Bid</th>
+          <th class="time text-right" i18n="accelerator.requested">Requested</th>
         </ng-container>
         <ng-container *ngIf="!pending">
           <th class="fee text-right" i18n="transaction.bid-boost|Bid Boost">Bid Boost</th>
-          <th class="block text-right" i18n="accelerator.block">Block</th>
+          <th class="block text-right" i18n="shared.block-title">Block</th>
           <th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
-          <th class="date text-right" i18n="" *ngIf="!this.widget">Requested</th>
+          <th class="date text-right" i18n="accelerator.requested" *ngIf="!this.widget">Requested</th>
         </ng-container>
       </thead>
       <tbody *ngIf="accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
@@ -39,10 +39,10 @@
             </td>
           </ng-container>
           <ng-container *ngIf="!pending">
-            <td *ngIf="acceleration.feePaid" class="fee text-right">
-              {{ (acceleration.boost) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+            <td *ngIf="acceleration.boost != null" class="fee text-right">
+              {{ acceleration.boost | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
             </td>
-            <td *ngIf="!acceleration.feePaid" class="fee text-right">
+            <td *ngIf="acceleration.boost == null" class="fee text-right">
               ~
             </td>
             <td class="block text-right">

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss

@@ -59,7 +59,7 @@ tr, td, th {
 }
 
 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }
 
 .txid {
@@ -148,7 +148,7 @@ tr, td, th {
 
 .tooltip-custom .tooltiptext {
   visibility: hidden;
-  color: #fff;
+  color: var(--fg);
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
-import { combineLatest, BehaviorSubject, Observable, catchError, of, switchMap, tap } from 'rxjs';
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { BehaviorSubject, Observable, catchError, of, switchMap, tap } from 'rxjs';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
 import { WebsocketService } from '../../../services/websocket.service';
@@ -11,7 +11,7 @@ import { ServicesApiServices } from '../../../services/services-api.service';
   styleUrls: ['./accelerations-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccelerationsListComponent implements OnInit {
+export class AccelerationsListComponent implements OnInit, OnDestroy {
   @Input() widget: boolean = false;
   @Input() pending: boolean = false;
   @Input() accelerations$: Observable<Acceleration[]>;
@@ -44,7 +44,10 @@ export class AccelerationsListComponent implements OnInit {
     
     this.accelerationList$ = this.pageSubject.pipe(
       switchMap((page) => {
-        const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistoryObserveResponse$({ page: page }));
+        const accelerationObservable$ = this.accelerations$ || (this.pending ? this.stateService.liveAccelerations$ : this.servicesApiService.getAccelerationHistoryObserveResponse$({ page: page }));
+        if (!this.accelerations$ && this.pending) {
+          this.websocketService.ensureTrackAccelerations();
+        }
         return accelerationObservable$.pipe(
           switchMap(response => {
             let accelerations = response;
@@ -58,7 +61,7 @@ export class AccelerationsListComponent implements OnInit {
               }
             }
             for (const acc of accelerations) {
-              acc.boost = acc.feePaid - acc.baseFee - acc.vsizeFee;
+              acc.boost = acc.boostCost != null ? acc.boostCost : acc.bidBoost;
             }
             if (this.widget) {
               return of(accelerations.slice(0, 6));
@@ -85,4 +88,8 @@ export class AccelerationsListComponent implements OnInit {
   trackByBlock(index: number, block: BlockExtended): number {
     return block.height;
   }
+
+  ngOnDestroy(): void {
+    this.websocketService.stopTrackAccelerations();
+  }
 }

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html

@@ -22,12 +22,26 @@
     <div class="col">
       <div class="main-title">
         <span [attr.data-cy]="'acceleration-stats'" i18n="accelerator.acceleration-stats">Acceleration stats</span>&nbsp;
-        <span style="font-size: xx-small" i18n="mining.3-months">(3 months)</span>
+        @switch (timespan) {
+          @case ('1w') {
+            <span style="font-size: xx-small" i18n="mining.1-week">(1 week)</span>
+          }
+          @case ('1m') {
+            <span style="font-size: xx-small" i18n="mining.1-month">(1 month)</span>
+          }
+        }
       </div>
       <div class="card-wrapper">
         <div class="card">
           <div class="card-body more-padding">
-            <app-acceleration-stats></app-acceleration-stats>
+            <app-acceleration-stats [timespan]="timespan"></app-acceleration-stats>
+            <div class="widget-toggler">
+              <a href="" (click)="setTimespan('1w')" class="toggler-option"
+                [ngClass]="{'inactive': timespan === '1w'}"><small>1w</small></a>
+              <span style="color: #ffffff66; font-size: 8px"> | </span>
+              <a href="" (click)="setTimespan('1m')" class="toggler-option"
+              [ngClass]="{'inactive': timespan === '1m'}"><small>1m</small></a>
+            </div>
           </div>
         </div>
       </div>
@@ -38,9 +52,9 @@
       <div class="card">
         <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
           <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
-            <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-accelerations">Mempool Goggles: Accelerations</h5>
+            <h5 class="card-title d-inline">Mempool Goggles&trade; : <ng-container i18n="accelerator.accelerations">Accelerations</ng-container></h5>
             <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <div class="mempool-block-wrapper" *ngIf="webGlEnabled">
             <app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview>
@@ -59,6 +73,7 @@
               [height]="graphHeight"
               [attr.data-cy]="'acceleration-fees'"
               [widget]=true
+              [period]="timespan"
             ></app-acceleration-fees-graph>
           </div>
           <div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
@@ -85,7 +100,7 @@
           <a class="title-link" href="" [routerLink]="['/acceleration/list' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Recent Accelerations</h5>
             <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="minedAccelerations$"></app-accelerations-list>
         </div>

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss

@@ -7,7 +7,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }
 
 .graph-card {
@@ -29,10 +29,10 @@
 
 .card-title {
   font-size: 1rem;
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 .card-title > a {
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 
 .card-body.pool-ranking {
@@ -60,7 +60,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;
@@ -172,4 +173,20 @@
     max-height: 430px;
     max-width: 430px;
   }
+}
+
+.widget-toggler {
+  font-size: 12px;
+  position: absolute;
+  top: -20px;
+  right: 3px;
+  text-align: right;
+}
+
+.toggler-option {
+  text-decoration: none;
+}
+
+.inactive {
+  color: #ffffff66;
 }

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -1,19 +1,22 @@
-import { ChangeDetectionStrategy, Component, HostListener, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { OpenGraphService } from '../../../services/opengraph.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
-import { Observable, catchError, combineLatest, distinctUntilChanged, interval, map, of, share, startWith, switchMap, tap } from 'rxjs';
+import { Observable, Subscription, catchError, combineLatest, distinctUntilChanged, map, of, share, switchMap, tap } from 'rxjs';
 import { Color } from '../../block-overview-graph/sprite-types';
 import { hexToColor } from '../../block-overview-graph/utils';
 import TxView from '../../block-overview-graph/tx-view';
-import { feeLevels, mempoolFeeColors } from '../../../app.constants';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../../app.constants';
 import { ServicesApiServices } from '../../../services/services-api.service';
 import { detectWebGL } from '../../../shared/graphs.utils';
+import { AudioService } from '../../../services/audio.service';
+import { ThemeService } from '../../../services/theme.service';
 
 const acceleratedColor: Color = hexToColor('8F5FF6');
-const normalColors = mempoolFeeColors.map(hex => hexToColor(hex + '5F'));
+const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
+const contrastColors = contrastMempoolFeeColors.map(hex => hexToColor(hex.slice(0,6) + '5F'));
 
 interface AccelerationBlock extends BlockExtended {
   accelerationCount: number,
@@ -25,21 +28,28 @@ interface AccelerationBlock extends BlockExtended {
   styleUrls: ['./accelerator-dashboard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AcceleratorDashboardComponent implements OnInit {
+export class AcceleratorDashboardComponent implements OnInit, OnDestroy {
   blocks$: Observable<AccelerationBlock[]>;
   accelerations$: Observable<Acceleration[]>;
   pendingAccelerations$: Observable<Acceleration[]>;
   minedAccelerations$: Observable<Acceleration[]>;
   loadingBlocks: boolean = true;
   webGlEnabled = true;
+  seen: Set<string> = new Set();
+  firstLoad = true;
+  timespan: '3d' | '1w' | '1m' = '1w';
+
+  accelerationDeltaSubscription: Subscription;
 
   graphHeight: number = 300;
+  theme: ThemeService;
 
   constructor(
     private seoService: SeoService,
     private ogService: OpenGraphService,
     private websocketService: WebsocketService,
     private serviceApiServices: ServicesApiServices,
+    private audioService: AudioService,
     private stateService: StateService,
     @Inject(PLATFORM_ID) private platformId: Object,
   ) {
@@ -51,18 +61,28 @@ export class AcceleratorDashboardComponent implements OnInit {
   ngOnInit(): void {
     this.onResize();
     this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
+    this.websocketService.startTrackAccelerations();
 
-    this.pendingAccelerations$ = (this.stateService.isBrowser ? interval(30000) : of(null)).pipe(
-      startWith(true),
-      switchMap(() => {
-        return this.serviceApiServices.getAccelerations$().pipe(
-          catchError(() => {
-            return of([]);
-          }),
-        );
-      }),
+    this.pendingAccelerations$ = this.stateService.liveAccelerations$.pipe(
       share(),
     );
+    this.accelerationDeltaSubscription = this.stateService.accelerations$.subscribe((delta) => {
+      if (!delta.reset) {
+        let hasNewAcceleration = false;
+        for (const acc of delta.added) {
+          if (!this.seen.has(acc.txid)) {
+            hasNewAcceleration = true;
+          }
+          this.seen.add(acc.txid);
+        }
+        for (const txid of delta.removed) {
+          this.seen.delete(txid);
+        }
+        if (hasNewAcceleration) {
+          this.audioService.playSound('bright-harmony');
+        }
+      }
+    });
 
     this.accelerations$ = this.stateService.chainTip$.pipe(
       distinctUntilChanged(),
@@ -103,15 +123,15 @@ export class AcceleratorDashboardComponent implements OnInit {
       switchMap(([accelerations, blocks]) => {
         const blockMap = {};
         for (const block of blocks) {
-          blockMap[block.id] = block;
+          blockMap[block.height] = block;
         }
-        const accelerationsByBlock: { [ hash: string ]: Acceleration[] } = {};
+        const accelerationsByBlock: { [ height: number ]: Acceleration[] } = {};
         for (const acceleration of accelerations) {
-          if (['completed_provisional', 'failed_provisional', 'completed'].includes(acceleration.status) && acceleration.pools.includes(blockMap[acceleration.blockHash]?.extras.pool.id)) {
-            if (!accelerationsByBlock[acceleration.blockHash]) {
-              accelerationsByBlock[acceleration.blockHash] = [];
+          if (['completed_provisional', 'failed_provisional', 'completed'].includes(acceleration.status) && acceleration.pools.includes(blockMap[acceleration.blockHeight]?.extras.pool.id)) {
+            if (!accelerationsByBlock[acceleration.blockHeight]) {
+              accelerationsByBlock[acceleration.blockHeight] = [];
             }
-            accelerationsByBlock[acceleration.blockHash].push(acceleration);
+            accelerationsByBlock[acceleration.blockHeight].push(acceleration);
           }
         }
         return of(blocks.slice(0, 6).map(block => {
@@ -128,10 +148,20 @@ export class AcceleratorDashboardComponent implements OnInit {
     } else {
       const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
       const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
-      return normalColors[feeLevelIndex] || normalColors[mempoolFeeColors.length - 1];
+      return this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
     }
   }
 
+  setTimespan(timespan): boolean {
+    this.timespan = timespan;
+    return false;
+  }
+
+  ngOnDestroy(): void {
+    this.accelerationDeltaSubscription.unsubscribe();
+    this.websocketService.stopTrackAccelerations();
+  }
+
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {

frontend/src/app/components/acceleration/pending-stats/pending-stats.component.html

@@ -17,10 +17,10 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="accelerator.total-vsize">Total Vsize</h5>
+      <h5 class="card-title" i18n="accelerator.total-vsize">Total vSize</h5>
       <div class="card-text">
-        <div [innerHTML]="'&lrm;' + (stats.totalVsize * 4 | vbytes: 2)"></div>
-        <div class="symbol">{{ (stats.totalVsize / 1_000_000 * 100).toFixed(2) }}% <span i18n="accelerator.percent-of-next-block"> of next block</span></div>
+        <div [innerHTML]="'&lrm;' + (stats.totalVsize | vbytes: 2)"></div>
+        <div class="symbol">{{ (stats.totalVsize / 1_000_000 * 100).toFixed(2) }}% <span i18n="accelerator.percent-of-block"> of block</span></div>
       </div>
     </div>
   </div>
@@ -43,7 +43,7 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="accelerator.total-vsize">Total Vsize</h5>
+      <h5 class="card-title" i18n="accelerator.total-vsize">Total vSize</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>

frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss

@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 10px;
   margin-bottom: 4px;  
   font-size: 1rem;
@@ -34,7 +34,7 @@
     @media (min-width: 376px) {
       margin: 0 auto 0px;
     }    
-    &:first-child{
+    &:last-child{
       display: none;
       @media (min-width: 485px) {
         display: block;
@@ -50,7 +50,7 @@
       margin-bottom: 0;
     }
     .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
       font-size: 12px;
       top: 0px;
     }

frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts

@@ -2,7 +2,8 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { Observable, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { Acceleration } from '../../../interfaces/node-api.interface';
-import { ServicesApiServices } from '../../../services/services-api.service';
+import { StateService } from '../../../services/state.service';
+import { WebsocketService } from '../../../services/websocket.service';
 
 @Component({
   selector: 'app-pending-stats',
@@ -15,11 +16,12 @@ export class PendingStatsComponent implements OnInit {
   public accelerationStats$: Observable<any>;
 
   constructor(
-    private servicesApiService: ServicesApiServices,
+    private stateService: StateService,
+    private websocketService: WebsocketService,
   ) { }
 
   ngOnInit(): void {
-    this.accelerationStats$ = (this.accelerations$ || this.servicesApiService.getAccelerations$()).pipe(
+    this.accelerationStats$ = (this.accelerations$ || this.stateService.liveAccelerations$).pipe(
       switchMap(accelerations => {
         let totalAccelerations = 0;
         let totalFeeDelta = 0;

frontend/src/app/components/address-graph/address-graph.component.html

@@ -1,14 +1,8 @@
-<app-indexing-progress></app-indexing-progress>
-
-<div class="full-container">
-  <div class="card-header mb-0 mb-md-2">
-    <div class="d-flex d-md-block align-items-baseline">
-      <span i18n="address.balance-history">Balance History</span>
-    </div>  
-    </div>
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
 
+<div [class.full-container]="!widget">
   <ng-container *ngIf="!error">
-    <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
       (chartInit)="onChartInit($event)">
     </div>
     <div class="text-center loadingGraphs" *ngIf="isLoading">
@@ -20,4 +14,8 @@
       <p class="error">{{ error }}</p>
     </div>
   </ng-container>
+
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
 </div>

frontend/src/app/components/address-graph/address-graph.component.scss

@@ -11,7 +11,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;
@@ -45,28 +46,12 @@
   display: flex;
   flex: 1;
   width: 100%;
-  padding-bottom: 20px;
+  padding-bottom: 10px;
   padding-right: 10px;
-  @media (max-width: 992px) {
-    padding-bottom: 25px;
-  }
-  @media (max-width: 829px) {
-    padding-bottom: 50px;
-  }
-  @media (max-width: 767px) {
-    padding-bottom: 25px;
-  }
-  @media (max-width: 629px) {
-    padding-bottom: 55px;
-  }
-  @media (max-width: 567px) {
-    padding-bottom: 55px;
-  }
 }
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 270px;
 }
 
 .disabled {

frontend/src/app/components/address-graph/address-graph.component.ts

@@ -1,11 +1,22 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnChanges, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { echarts, EChartsOption } from '../../graphs/echarts';
-import { of } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription, combineLatest, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import { ChainStats } from '../../interfaces/electrs.interface';
+import { AddressTxSummary, ChainStats } from '../../interfaces/electrs.interface';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
 import { Router } from '@angular/router';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '../../services/state.service';
+
+const periodSeconds = {
+  '1d': (60 * 60 * 24),
+  '3d': (60 * 60 * 24 * 3),
+  '1w': (60 * 60 * 24 * 7),
+  '1m': (60 * 60 * 24 * 30),
+  '6m': (60 * 60 * 24 * 180),
+  '1y': (60 * 60 * 24 * 365),
+};
 
 @Component({
   selector: 'app-address-graph',
@@ -21,16 +32,23 @@ import { Router } from '@angular/router';
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AddressGraphComponent implements OnChanges {
+export class AddressGraphComponent implements OnChanges, OnDestroy {
   @Input() address: string;
   @Input() isPubkey: boolean = false;
   @Input() stats: ChainStats;
+  @Input() addressSummary$: Observable<AddressTxSummary[]> | null;
+  @Input() period: '1d' | '3d' | '1w' | '1m' | '6m' | '1y' | 'all' = 'all';
+  @Input() height: number = 200;
   @Input() right: number | string = 10;
   @Input() left: number | string = 70;
+  @Input() widget: boolean = false;
 
   data: any[] = [];
   hoverData: any[] = [];
 
+  subscription: Subscription;
+  redraw$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
   chartOptions: EChartsOption = {};
   chartInitOptions = {
     renderer: 'svg',
@@ -42,40 +60,69 @@ export class AddressGraphComponent implements OnChanges {
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
+    public stateService: StateService,
     private electrsApiService: ElectrsApiService,
     private router: Router,
     private amountShortenerPipe: AmountShortenerPipe,
     private cd: ChangeDetectorRef,
+    private relativeUrlPipe: RelativeUrlPipe,
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     this.isLoading = true;
-    (this.isPubkey
-      ? this.electrsApiService.getScriptHashSummary$((this.address.length === 66 ? '21' : '41') + this.address + 'ac')
-      : this.electrsApiService.getAddressSummary$(this.address)).pipe(
-      catchError(e => {
-        this.error = `Failed to fetch address balance history: ${e?.status || ''} ${e?.statusText || 'unknown error'}`;
-        return of(null);
-      }),
-    ).subscribe(addressSummary => {
-      if (addressSummary) {
-        this.error = null;
-        this.prepareChartOptions(addressSummary);
+    if (!this.address || !this.stats) {
+      return;
+    }
+    if (changes.address || changes.isPubkey || changes.addressSummary$ || changes.stats) {
+      if (this.subscription) {
+        this.subscription.unsubscribe();
       }
-      this.isLoading = false;
-      this.cd.markForCheck();
-    });
+      this.subscription = combineLatest([
+        this.redraw$,
+        (this.addressSummary$ || (this.isPubkey
+          ? this.electrsApiService.getScriptHashSummary$((this.address.length === 66 ? '21' : '41') + this.address + 'ac')
+          : this.electrsApiService.getAddressSummary$(this.address)).pipe(
+          catchError(e => {
+            this.error = `Failed to fetch address balance history: ${e?.status || ''} ${e?.statusText || 'unknown error'}`;
+            return of(null);
+          }),
+        ))
+      ]).subscribe(([redraw, addressSummary]) => {
+        if (addressSummary) {
+          this.error = null;
+          this.prepareChartOptions(addressSummary);
+        }
+        this.isLoading = false;
+        this.cd.markForCheck();
+      });
+    } else {
+      // re-trigger subscription
+      this.redraw$.next(true);
+    }
   }
 
   prepareChartOptions(summary): void {
-    let total = (this.stats.funded_txo_sum - this.stats.spent_txo_sum); // + (summary[0]?.value || 0);
+    if (!summary || !this.stats) {
+      return;
+    }
+    let total = (this.stats.funded_txo_sum - this.stats.spent_txo_sum);
     this.data = summary.map(d => {
       const balance = total;
       total -= d.value;
       return [d.time * 1000, balance, d];
     }).reverse();
 
-    const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1])), 0);
+    if (this.period !== 'all') {
+      const now = Date.now();
+      const start = now - (periodSeconds[this.period] * 1000);
+      this.data = this.data.filter(d => d[0] >= start);
+      this.data.push(
+        {value: [now, this.stats.funded_txo_sum - this.stats.spent_txo_sum], symbol: 'none', tooltip: { show: false }}
+      );
+    }
+
+    const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1] ?? d.value[1])), 0);
+    const minValue = this.data.reduce((acc, d) => Math.min(acc, Math.abs(d[1] ?? d.value[1])), maxValue);
 
     this.chartOptions = {
       color: [
@@ -106,12 +153,15 @@ export class AddressGraphComponent implements OnChanges {
         },
         borderColor: '#000',
         formatter: function (data): string {
+          if (!data?.length || !data[0]?.data?.[2]?.txid) {
+            return '';
+          }
           const header = data.length === 1
             ? `${data[0].data[2].txid.slice(0, 6)}...${data[0].data[2].txid.slice(-6)}`
             : `${data.length} transactions`;
           const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
           const val = data.reduce((total, d) => total + d.data[2].value, 0);
-          const color = val === 0 ? '' : (val > 0 ? '#1a9436' : '#dc3545');
+          const color = val === 0 ? '' : (val > 0 ? 'var(--green)' : 'var(--red)');
           const symbol = val > 0 ? '+' : '';
           return `
             <div>
@@ -122,7 +172,7 @@ export class AddressGraphComponent implements OnChanges {
               </div>
               <span>${date}</span>
             </div>
-          `; 
+          `;
         }.bind(this)
       },
       xAxis: {
@@ -139,13 +189,17 @@ export class AddressGraphComponent implements OnChanges {
           axisLabel: {
             color: 'rgb(110, 112, 121)',
             formatter: (val): string => {
-              if (maxValue > 1_000_000_000) {
+              let valSpan = maxValue - (this.period === 'all' ? 0 : minValue);
+              if (valSpan > 100_000_000_000) {
                 return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0)} BTC`;
-              } else if (maxValue > 100_000_000) {
+              }
+              else if (valSpan > 1_000_000_000) {
+                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2)} BTC`;
+              } else if (valSpan > 100_000_000) {
                 return `${(val / 100_000_000).toFixed(1)} BTC`;
-              } else if (maxValue > 10_000_000) {
+              } else if (valSpan > 10_000_000) {
                 return `${(val / 100_000_000).toFixed(2)} BTC`;
-              } else if (maxValue > 1_000_000) {
+              } else if (valSpan > 1_000_000) {
                 return `${(val / 100_000_000).toFixed(3)} BTC`;
               } else {
                 return `${this.amountShortenerPipe.transform(val, 0)} sats`;
@@ -155,11 +209,12 @@ export class AddressGraphComponent implements OnChanges {
           splitLine: {
             show: false,
           },
+          min: this.period === 'all' ? 0 : 'dataMin'
         },
       ],
       series: [
         {
-          name: $localize`Balance:Balance`,
+          name: $localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`,
           showSymbol: false,
           symbol: 'circle',
           symbolSize: 8,
@@ -178,7 +233,7 @@ export class AddressGraphComponent implements OnChanges {
 
   onChartClick(e) {
     if (this.hoverData?.length && this.hoverData[0]?.[2]?.txid) {
-      this.router.navigate(['/tx/', this.hoverData[0][2].txid]);
+      this.router.navigate([this.relativeUrlPipe.transform('/tx/'), this.hoverData[0][2].txid]);
     }
   }
 
@@ -192,6 +247,12 @@ export class AddressGraphComponent implements OnChanges {
     this.chartInstance.on('click', 'series', this.onChartClick.bind(this));
   }
 
+  ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
   isMobile() {
     return (window.innerWidth <= 767.98);
   }

frontend/src/app/components/address-group/address-group.component.scss

@@ -1,6 +1,6 @@
 .frame {
   position: relative;
-  background: #24273e;
+  background: var(--box-bg);
   padding: 0.5rem;
   height: calc(100% + 60px);
 }
@@ -62,7 +62,7 @@
       }
     }
     &:nth-child(even) {
-      background: #181b2d;
+      background: var(--stat-box-bg);
     }
   }
 

frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html

@@ -0,0 +1,32 @@
+<table class="table latest-transactions">
+  <thead>
+    <th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
+    <th class="table-cell-satoshis" i18n="dashboard.latest-transactions.amount">Amount</th>
+    <th class="table-cell-fiat">{{ currency }}</th>
+    <th class="table-cell-date" i18n="shared.date">Date</th>
+  </thead>
+  <tbody *ngIf="transactions$ | async as transactions else recentTransactionsSkeleton">
+    <tr *ngFor="let transaction of transactions; let i = index;">
+      <td class="table-cell-txid">
+        <a [routerLink]="['/tx' | relativeUrl, transaction.txid]">
+          <app-truncate [text]="transaction.txid" [lastChars]="5"></app-truncate>
+        </a>
+      </td>
+      <td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" digitsInfo="1.2-4" [noFiat]="true"></app-amount></td>
+      <td class="table-cell-fiat" ><app-fiat [value]="transaction.value" [blockConversion]="transaction.price" digitsInfo="1.0-0"></app-fiat></td>
+      <td class="table-cell-date"><app-time kind="since" [time]="transaction.time" [fastRender]="true"></app-time></td>
+    </tr>
+  </tbody>
+  <div class="">&nbsp;</div>
+</table>
+
+<ng-template #recentTransactionsSkeleton>
+  <tbody>
+    <tr *ngFor="let i of [1,2,3,4,5,6]">
+      <td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
+      <td class="table-cell-satoshis"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-fiat"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-fees"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+    </tr>
+  </tbody>
+</ng-template>

frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss

@@ -0,0 +1,50 @@
+.latest-transactions {
+  width: 100%;
+  text-align: left;
+  table-layout:fixed;
+  tr, td, th {
+    border: 0px;
+    padding-top: 0.71rem !important;
+    padding-bottom: 0.75rem !important;
+  }
+  td {
+    overflow:hidden;
+    width: 25%;
+  }
+  .table-cell-satoshis {
+    display: none;
+    text-align: right;
+    @media (min-width: 576px) {
+      display: table-cell;
+    }
+    @media (min-width: 768px) {
+      display: none;
+    }
+    @media (min-width: 1100px) {
+      display: table-cell;
+    }
+  }
+  .table-cell-fiat {
+    display: none;
+    text-align: right;
+    @media (min-width: 485px) {
+      display: table-cell;
+    }
+    @media (min-width: 768px) {
+      display: none;
+    }
+    @media (min-width: 992px) {
+      display: table-cell;
+    }
+  }
+  .table-cell-date {
+    text-align: right;
+  }
+}
+.skeleton-loader-transactions {
+  max-width: 250px;
+  position: relative;
+  top: 2px;
+  margin-bottom: -3px;
+  height: 18px;
+}

frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.ts

@@ -0,0 +1,76 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { StateService } from '../../services/state.service';
+import { Address, AddressTxSummary } from '../../interfaces/electrs.interface';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { Observable, Subscription, catchError, map, of, switchMap, zip } from 'rxjs';
+import { PriceService } from '../../services/price.service';
+
+@Component({
+  selector: 'app-address-transactions-widget',
+  templateUrl: './address-transactions-widget.component.html',
+  styleUrls: ['./address-transactions-widget.component.scss'],
+})
+export class AddressTransactionsWidgetComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() address: string;
+  @Input() addressInfo: Address;
+  @Input() addressSummary$: Observable<AddressTxSummary[]> | null;
+  @Input() isPubkey: boolean = false;
+  
+  currencySubscription: Subscription;
+  currency: string;
+
+  transactions$: Observable<any[]>;
+
+  isLoading: boolean = true;
+  error: any;
+
+  constructor(
+    public stateService: StateService,
+    private electrsApiService: ElectrsApiService,
+    private priceService: PriceService,
+  ) { }
+
+  ngOnInit(): void {
+    this.currencySubscription = this.stateService.fiatCurrency$.subscribe((fiat) => {
+      this.currency = fiat;
+    });
+    this.startAddressSubscription();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.startAddressSubscription();
+  }
+
+  startAddressSubscription(): void {
+    this.isLoading = true;
+    if (!this.address || !this.addressInfo) {
+      return;
+    }
+    this.transactions$ = (this.addressSummary$ || (this.isPubkey
+      ? this.electrsApiService.getScriptHashSummary$((this.address.length === 66 ? '21' : '41') + this.address + 'ac')
+      : this.electrsApiService.getAddressSummary$(this.address)).pipe(
+      catchError(e => {
+        this.error = `Failed to fetch address history: ${e?.status || ''} ${e?.statusText || 'unknown error'}`;
+        return of(null);
+      })
+    )).pipe(
+      map(summary => {
+        return summary?.slice(0, 6);
+      }),
+      switchMap(txs => {
+        return (zip(txs.map(tx => this.priceService.getBlockPrice$(tx.time, true, this.currency).pipe(
+          map(price => {
+            return {
+              ...tx,
+              price,
+            };
+          })
+        ))));
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.currencySubscription.unsubscribe();
+  }
+}

frontend/src/app/components/address/address-preview.component.scss

@@ -3,7 +3,7 @@
 }
 
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: #fff;
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;