Fix liquid audit expired UTXO detection and re-indexing

Knorrium/increase language selector width

.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@bb45937a053e097f8591208d8e74c90db1873d07
         with:
           toolchain: ${{ steps.gettoolchain.outputs.toolchain }}
 

.github/workflows/on-tag.yml

@@ -101,5 +101,7 @@ jobs:
           --platform linux/amd64,linux/arm64 \
           --tag ${{ secrets.DOCKER_HUB_USER }}/${{ matrix.service }}:$TAG \
           --tag ${{ secrets.DOCKER_HUB_USER }}/${{ matrix.service }}:latest \
+          --build-context rustgbt=./rust \
+          --build-context backend=./backend \
           --output "type=registry" ./${{ matrix.service }}/ \
           --build-arg commitHash=$SHORT_SHA

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",
@@ -151,6 +152,7 @@
   },
   "FIAT_PRICE": {
     "ENABLED": true,
+    "PAID": false,
     "API_KEY": "your-api-key-from-freecurrencyapi.com"
   }
 }

backend/npm_package_rm_build_deps.sh

@@ -3,7 +3,7 @@ set -e
 
 # Cleaning up inside the node_modules folder
 cd package/node_modules
-rm -r \
+rm -rf \
   typescript \
   @typescript-eslint \
   @napi-rs

backend/package-lock.json

@@ -18,12 +18,12 @@
         "crypto-js": "~4.2.0",
         "express": "~4.19.2",
         "maxmind": "~4.3.11",
-        "mysql2": "~3.9.1",
+        "mysql2": "~3.9.4",
         "redis": "^4.6.6",
         "rust-gbt": "file:./rust-gbt",
         "socks-proxy-agent": "~7.0.0",
         "typescript": "~4.9.3",
-        "ws": "~8.13.0"
+        "ws": "~8.16.0"
       },
       "devDependencies": {
         "@babel/code-frame": "^7.18.6",
@@ -32,7 +32,7 @@
         "@types/crypto-js": "^4.1.1",
         "@types/express": "^4.17.17",
         "@types/jest": "^29.5.0",
-        "@types/ws": "~8.5.5",
+        "@types/ws": "~8.5.10",
         "@typescript-eslint/eslint-plugin": "^5.55.0",
         "@typescript-eslint/parser": "^5.55.0",
         "eslint": "^8.36.0",
@@ -1858,9 +1858,9 @@
       "dev": true
     },
     "node_modules/@types/ws": {
-      "version": "8.5.5",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
-      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
       "dev": true,
       "dependencies": {
         "@types/node": "*"
@@ -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.4",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.4.tgz",
+      "integrity": "sha512-OEESQuwxMza803knC1YSt7NMuc1BrK9j7gZhCSs2WAyxr1vfiI7QLaLOKTh5c9SWGz98qVyQUbK8/WckevNQhg==",
       "dependencies": {
         "denque": "^2.1.0",
         "generate-function": "^2.3.1",
@@ -7690,9 +7690,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -9198,9 +9198,9 @@
       "dev": true
     },
     "@types/ws": {
-      "version": "8.5.5",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
-      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -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.4",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.4.tgz",
+      "integrity": "sha512-OEESQuwxMza803knC1YSt7NMuc1BrK9j7gZhCSs2WAyxr1vfiI7QLaLOKTh5c9SWGz98qVyQUbK8/WckevNQhg==",
       "requires": {
         "denque": "^2.1.0",
         "generate-function": "^2.3.1",
@@ -13424,9 +13424,9 @@
       }
     },
     "ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
       "requires": {}
     },
     "y18n": {

backend/package.json

@@ -47,12 +47,12 @@
     "crypto-js": "~4.2.0",
     "express": "~4.19.2",
     "maxmind": "~4.3.11",
-    "mysql2": "~3.9.1",
+    "mysql2": "~3.9.4",
     "rust-gbt": "file:./rust-gbt",
     "redis": "^4.6.6",
     "socks-proxy-agent": "~7.0.0",
     "typescript": "~4.9.3",
-    "ws": "~8.13.0"
+    "ws": "~8.16.0"
   },
   "devDependencies": {
     "@babel/code-frame": "^7.18.6",
@@ -61,7 +61,7 @@
     "@types/crypto-js": "^4.1.1",
     "@types/express": "^4.17.17",
     "@types/jest": "^29.5.0",
-    "@types/ws": "~8.5.5",
+    "@types/ws": "~8.5.10",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
     "eslint": "^8.36.0",

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,
@@ -143,6 +144,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,
@@ -150,6 +151,7 @@ describe('Mempool Backend Config', () => {
 
       expect(config.FIAT_PRICE).toStrictEqual({
         ENABLED: true,
+        PAID: false,
         API_KEY: '',
       });
     });

backend/src/api/about.routes.ts

@@ -0,0 +1,87 @@
+import { Application } from "express";
+import config from "../config";
+import axios from "axios";
+import logger from "../logger";
+
+class AboutRoutes {
+  public initRoutes(app: Application) {
+    app
+      .get(config.MEMPOOL.API_URL_PREFIX + 'donations', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/donations`, { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'donations/images/:id', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/donations/images/${req.params.id}`, {
+            responseType: 'stream', timeout: 10000
+          });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'contributors', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/contributors`, { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'contributors/images/:id', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/contributors/images/${req.params.id}`, {
+            responseType: 'stream', timeout: 10000
+          });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'translators', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/translators`, { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'translators/images/:id', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/translators/images/${req.params.id}`, {
+            responseType: 'stream', timeout: 10000
+          });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/sponsors', async (req, res) => {
+        const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
+        try {
+          const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          logger.err(`Unable to fetch sponsors from ${url}. ${e}`, 'About Page');
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/account/images/:username', async (req, res) => {
+        const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
+        try {
+          const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          logger.err(`Unable to fetch sponsor profile image from ${url}. ${e}`, 'About Page');
+          res.status(500).end();
+        }
+      })
+    ;
+  }
+}
+
+export default new AboutRoutes();

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

@@ -0,0 +1,69 @@
+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): 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))
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/accelerator/accelerations/history/aggregated', this.$getAcceleratorAccelerationsHistoryAggregated.bind(this))
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/accelerator/accelerations/stats', this.$getAcceleratorAccelerationsStats.bind(this))
+    ;
+  }
+
+  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): 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): 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]);
+      }
+      response.data.pipe(res);
+    } catch (e) {
+      logger.err(`Unable to get aggregated acceleration history from ${url} in $getAcceleratorAccelerationsHistoryAggregated(), ${e}`, this.tag);
+      res.status(500).end();
+    }
+  }
+
+  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]);
+      }
+      response.data.pipe(res);
+    } catch (e) {
+      logger.err(`Unable to get acceleration stats from ${url} in $getAcceleratorAccelerationsStats(), ${e}`, this.tag);
+      res.status(500).end();
+    }
+  }
+}
+
+export default new AccelerationRoutes();

backend/src/api/acceleration/acceleration.ts

@@ -1,6 +1,6 @@
-import logger from '../logger';
-import { MempoolTransactionExtended } from '../mempool.interfaces';
-import { IEsploraApi } from './bitcoin/esplora-api.interface';
+import logger from '../../logger';
+import { MempoolTransactionExtended } from '../../mempool.interfaces';
+import { IEsploraApi } from '../bitcoin/esplora-api.interface';
 
 const BLOCK_WEIGHT_UNITS = 4_000_000;
 const BLOCK_SIGOPS = 80_000;

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.routes.ts

@@ -37,60 +37,6 @@ class BitcoinRoutes {
       .get(config.MEMPOOL.API_URL_PREFIX + 'replacements', this.getRbfReplacements)
       .get(config.MEMPOOL.API_URL_PREFIX + 'fullrbf/replacements', this.getFullRbfReplacements)
       .post(config.MEMPOOL.API_URL_PREFIX + 'tx/push', this.$postTransactionForm)
-      .get(config.MEMPOOL.API_URL_PREFIX + 'donations', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/donations`, { responseType: 'stream', timeout: 10000 });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'donations/images/:id', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/donations/images/${req.params.id}`, {
-            responseType: 'stream', timeout: 10000
-          });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'contributors', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/contributors`, { responseType: 'stream', timeout: 10000 });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'contributors/images/:id', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/contributors/images/${req.params.id}`, {
-            responseType: 'stream', timeout: 10000
-          });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'translators', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/translators`, { responseType: 'stream', timeout: 10000 });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'translators/images/:id', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/translators/images/${req.params.id}`, {
-            responseType: 'stream', timeout: 10000
-          });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
       .get(config.MEMPOOL.API_URL_PREFIX + 'blocks', this.getBlocks.bind(this))
       .get(config.MEMPOOL.API_URL_PREFIX + 'blocks/:height', this.getBlocks.bind(this))
       .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash', this.getBlock)

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[] = [];
@@ -872,6 +873,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 +976,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 +1122,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/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

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[] = [];
@@ -652,6 +652,11 @@ class DatabaseMigration {
       await this.$executeQuery('ALTER TABLE `prices` ADD `THB` float DEFAULT "-1"');
       await this.$executeQuery('ALTER TABLE `prices` ADD `TRY` float DEFAULT "-1"');
       await this.$executeQuery('ALTER TABLE `prices` ADD `ZAR` float DEFAULT "-1"');
+
+      await this.$executeQuery('TRUNCATE hashrates');
+      await this.$executeQuery('TRUNCATE difficulty_adjustments');
+      await this.$executeQuery(`UPDATE state SET string = NULL WHERE name = 'pools_json_sha'`);
+
       await this.updateToSchemaVersion(75);
     }
 
@@ -659,6 +664,29 @@ 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 === 'liquid') {
+      await this.$executeQuery('TRUNCATE TABLE elements_pegs');
+      await this.$executeQuery('TRUNCATE TABLE federation_txos');
+      await this.$executeQuery('SET FOREIGN_KEY_CHECKS = 0');
+      await this.$executeQuery('TRUNCATE TABLE federation_addresses');
+      await this.$executeQuery('SET FOREIGN_KEY_CHECKS = 1');
+      await this.$executeQuery(`INSERT INTO federation_addresses (bitcoinaddress) VALUES ('bc1qxvay4an52gcghxq5lavact7r6qe9l4laedsazz8fj2ee2cy47tlqff4aj4')`); // Federation change address
+      await this.$executeQuery(`INSERT INTO federation_addresses (bitcoinaddress) VALUES ('3EiAcrzq1cELXScc98KeCswGWZaPGceT1d')`); // Federation change address
+      await this.$executeQuery(`UPDATE state SET number = 0 WHERE name = 'last_elements_block';`);
+      await this.$executeQuery(`UPDATE state SET number = 0 WHERE name = 'last_bitcoin_block_audit';`);
+      await this.updateToSchemaVersion(79);
+    }
   }
 
   /**

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

@@ -713,7 +713,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/liquid/elements-parser.ts

@@ -306,7 +306,7 @@ class ElementsParser {
 
     for (const utxo of unspentAsTip) {
       if (utxo.expiredAt === 0 && block.height >= utxo.blocknumber + utxo.timelock) { // The UTXO is expiring in this block
-        await DB.query(`UPDATE federation_txos SET unspent = 0, lastblockupdate = ?, expiredAt = ? WHERE txid = ? AND txindex = ?`, [confirmedTip, block.time, utxo.txid, utxo.txindex]);
+        await DB.query(`UPDATE federation_txos SET lastblockupdate = ?, expiredAt = ? WHERE txid = ? AND txindex = ?`, [confirmedTip, block.time, utxo.txid, utxo.txindex]);
       } else if (utxo.expiredAt === 0 && confirmedTip >= utxo.blocknumber + utxo.timelock) { // The UTXO is expiring before the tip: we need to keep track of it
         await DB.query(`UPDATE federation_txos SET lastblockupdate = ? WHERE txid = ? AND txindex = ?`, [utxo.blocknumber + utxo.timelock - 1, utxo.txid, utxo.txindex]); 
       } else {

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/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/websocket-handler.ts

@@ -44,7 +44,7 @@ const wantable = [
 ];
 
 class WebsocketHandler {
-  private wss: WebSocket.Server | undefined;
+  private webSocketServers: WebSocket.Server[] = [];
   private extraInitProperties = {};
 
   private numClients = 0;
@@ -54,11 +54,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 +103,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 +318,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 {
@@ -369,14 +373,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 +391,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 +443,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 +456,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 +472,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 +492,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();
@@ -552,7 +572,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 +584,7 @@ class WebsocketHandler {
         }
       }
     });
+    }
     if (trackedTxs.size > 0) {
       for (const tx of newTransactions) {
         for (let i = 0; i < tx.vin.length; i++) {
@@ -581,7 +604,13 @@ class WebsocketHandler {
     const addressCache = this.makeAddressCache(newTransactions);
     const removedAddressCache = this.makeAddressCache(deletedTransactions);
 
-    this.wss.clients.forEach(async (client) => {
+    if (memPool.isInSync()) {
+      this.mempoolSequence++;
+    }
+
+    // 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 +768,7 @@ class WebsocketHandler {
               accelerated: mempoolTx.acceleration || undefined,
             }
           };
-          if (!mempoolTx.cpfpChecked) {
+          if (!mempoolTx.cpfpChecked && !mempoolTx.acceleration) {
             calculateCpfp(mempoolTx, newMempool);
           }
           if (mempoolTx.cpfpDirty) {
@@ -802,6 +831,7 @@ class WebsocketHandler {
         if (mBlockDeltas[index]) {
           response['projected-block-transactions'] = getCachedResponse(`projected-block-transactions-${index}`, {
             index: index,
+            sequence: this.mempoolSequence,
             delta: mBlockDeltas[index],
           });
         }
@@ -821,11 +851,12 @@ class WebsocketHandler {
         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();
@@ -969,7 +1000,13 @@ class WebsocketHandler {
       return responseCache[key];
     }
 
-    this.wss.clients.forEach((client) => {
+    if (memPool.isInSync()) {
+      this.mempoolSequence++;
+    }
+
+    // TODO - Fix indentation after PR is merged
+    for (const server of this.webSocketServers) {
+    server.clients.forEach((client) => {
       if (client.readyState !== WebSocket.OPEN) {
         return;
       }
@@ -1135,11 +1172,13 @@ 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],
             });
           }
@@ -1150,6 +1189,7 @@ class WebsocketHandler {
         client.send(this.serializeResponse(response));
       }
     });
+    }
 
     await statistics.runStatistics();
   }
@@ -1231,13 +1271,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 +1293,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;
@@ -153,6 +154,7 @@ interface IConfig {
   },
   FIAT_PRICE: {
     ENABLED: boolean;
+    PAID: boolean;
     API_KEY: string;
   },
 }
@@ -164,6 +166,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,
@@ -308,6 +311,7 @@ const defaults: IConfig = {
   },
   'FIAT_PRICE': {
     'ENABLED': true,
+    'PAID': false,
     'API_KEY': '',
   },
 };

backend/src/index.ts

@@ -43,10 +43,14 @@ import redisCache from './api/redis-cache';
 import accelerationApi from './api/services/acceleration';
 import bitcoinCoreRoutes from './api/bitcoin/bitcoin-core.routes';
 import bitcoinSecondClient from './api/bitcoin/bitcoin-second-client';
+import accelerationRoutes from './api/acceleration/acceleration.routes';
+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;
@@ -135,6 +139,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();
 
@@ -190,6 +198,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> {
@@ -263,8 +281,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 {
@@ -305,6 +327,10 @@ class Server {
       nodesRoutes.initRoutes(this.app);
       channelsRoutes.initRoutes(this.app);
     }
+    if (config.MEMPOOL_SERVICES.ACCELERATIONS) {
+      accelerationRoutes.initRoutes(this.app);
+    }
+    aboutRoutes.initRoutes(this.app);
   }
 
   healthCheck(): void {
@@ -332,6 +358,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/repositories/AccelerationRepository.ts

@@ -1,4 +1,4 @@
-import { AccelerationInfo, makeBlockTemplate } from '../api/acceleration';
+import { AccelerationInfo, makeBlockTemplate } from '../api/acceleration/acceleration';
 import { RowDataPacket } from 'mysql2';
 import DB from '../database';
 import logger from '../logger';
@@ -6,8 +6,8 @@ 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 accelerationCosts from '../api/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';
 import { BlockExtended, MempoolTransactionExtended } from '../mempool.interfaces';
@@ -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,7 +237,7 @@ 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;
@@ -297,12 +304,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]) {
             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 +328,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/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/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

@@ -11,10 +11,17 @@ RUN apt-get install -y build-essential python3 pkg-config curl ca-certificates
 
 # Install Rust via rustup
 RUN CPU_ARCH=$(uname -m); if [ "$CPU_ARCH" = "armv7l" ]; then c_rehash; fi
-RUN curl https://sh.rustup.rs -sSf | sh -s -- -y --default-toolchain stable
+#RUN curl https://sh.rustup.rs -sSf | sh -s -- -y --default-toolchain stable
+#Workaround to run on github actions from https://github.com/rust-lang/rustup/issues/2700#issuecomment-1367488985
+RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sed 's#/proc/self/exe#\/bin\/sh#g' | sh -s -- -y --default-toolchain stable
 ENV PATH="/root/.cargo/bin:$PATH"
 
+COPY --from=backend . .
+COPY --from=rustgbt . ../rust/
+ENV FD=/build/rust-gbt
 RUN npm install --omit=dev --omit=optional
+
+WORKDIR /build
 RUN npm run package
 
 FROM node:20.12.0-buster-slim

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__",
@@ -149,6 +150,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}
@@ -134,8 +135,8 @@ __MAXMIND_GEOLITE2_ASN__=${MAXMIND_GEOLITE2_ASN:="/backend/GeoIP/GeoLite2-ASN.mm
 __MAXMIND_GEOIP2_ISP__=${MAXMIND_GEOIP2_ISP:=""}
 
 # REPLICATION
-__REPLICATION_ENABLED__=${REPLICATION_ENABLED:=true}
-__REPLICATION_AUDIT__=${REPLICATION_AUDIT:=true}
+__REPLICATION_ENABLED__=${REPLICATION_ENABLED:=false}
+__REPLICATION_AUDIT__=${REPLICATION_AUDIT:=false}
 __REPLICATION_AUDIT_START_HEIGHT__=${REPLICATION_AUDIT_START_HEIGHT:=774000}
 __REPLICATION_SERVERS__=${REPLICATION_SERVERS:=[]}
 
@@ -150,6 +151,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 +162,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
@@ -294,6 +297,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/entrypoint.sh

@@ -37,6 +37,7 @@ __MAINNET_BLOCK_AUDIT_START_HEIGHT__=${MAINNET_BLOCK_AUDIT_START_HEIGHT:=0}
 __TESTNET_BLOCK_AUDIT_START_HEIGHT__=${TESTNET_BLOCK_AUDIT_START_HEIGHT:=0}
 __SIGNET_BLOCK_AUDIT_START_HEIGHT__=${SIGNET_BLOCK_AUDIT_START_HEIGHT:=0}
 __ACCELERATOR__=${ACCELERATOR:=false}
+__PUBLIC_ACCELERATIONS__=${PUBLIC_ACCELERATIONS:=false}
 __HISTORICAL_PRICE__=${HISTORICAL_PRICE:=true}
 __ADDITIONAL_CURRENCIES__=${ADDITIONAL_CURRENCIES:=false}
 
@@ -62,6 +63,7 @@ export __MAINNET_BLOCK_AUDIT_START_HEIGHT__
 export __TESTNET_BLOCK_AUDIT_START_HEIGHT__
 export __SIGNET_BLOCK_AUDIT_START_HEIGHT__
 export __ACCELERATOR__
+export __PUBLIC_ACCELERATIONS__
 export __HISTORICAL_PRICE__
 export __ADDITIONAL_CURRENCIES__
 

frontend/angular.json

@@ -170,6 +170,16 @@
             ],
             "styles": [
               "src/styles.scss",
+              {
+                "input": "src/theme-contrast.scss",
+                "bundleName": "contrast",
+                "inject": false
+              },
+              {
+                "input": "src/theme-wiz.scss",
+                "bundleName": "wiz",
+                "inject": false
+              },
               "node_modules/@fortawesome/fontawesome-svg-core/styles.css"
             ],
             "vendorChunk": true,

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

@@ -67,7 +67,7 @@ describe('Mainnet', () => {
       cy.get('[id^="bitcoin-block-"]').should('have.length', 22);
       cy.get('.footer').should('be.visible');
       cy.get('.row > :nth-child(1)').invoke('text').then((text) => {
-        expect(text).to.match(/Incoming transactions.* vB\/s/);
+        expect(text).to.match(/Incoming Transactions.* vB\/s/);
       });
       cy.get('.row > :nth-child(2)').invoke('text').then((text) => {
         expect(text).to.match(/Unconfirmed:(.*)/);

frontend/mempool-frontend-config.sample.json

@@ -21,5 +21,6 @@
   "LIGHTNING": false,
   "HISTORICAL_PRICE": true,
   "ADDITIONAL_CURRENCIES": false,
-  "ACCELERATOR": false
+  "ACCELERATOR": false,
+  "PUBLIC_ACCELERATIONS": false
 }

frontend/package-lock.json

@@ -32,6 +32,7 @@
         "bootstrap": "~4.6.2",
         "browserify": "^17.0.0",
         "clipboard": "^2.0.11",
+        "cypress": "^13.8.0",
         "domino": "^2.1.6",
         "echarts": "~5.5.0",
         "esbuild": "^0.20.2",
@@ -62,7 +63,7 @@
       "optionalDependencies": {
         "@cypress/schematic": "^2.5.0",
         "@types/cypress": "^1.1.3",
-        "cypress": "^13.7.0",
+        "cypress": "^13.8.0",
         "cypress-fail-on-console-error": "~5.1.0",
         "cypress-wait-until": "^2.0.1",
         "mock-socket": "~9.3.1",
@@ -8028,9 +8029,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.8.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.8.0.tgz",
+      "integrity": "sha512-Qau//mtrwEGOU9cn2YjavECKyDUwBh8J2tit+y9s1wsv6C3BX+rlv6I9afmQnL8PmEEzJ6be7nppMHacFzZkTw==",
       "hasInstallScript": true,
       "optional": true,
       "dependencies": {
@@ -24111,9 +24112,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.8.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.8.0.tgz",
+      "integrity": "sha512-Qau//mtrwEGOU9cn2YjavECKyDUwBh8J2tit+y9s1wsv6C3BX+rlv6I9afmQnL8PmEEzJ6be7nppMHacFzZkTw==",
       "optional": true,
       "requires": {
         "@cypress/request": "^3.0.0",

frontend/package.json

@@ -115,7 +115,7 @@
   "optionalDependencies": {
     "@cypress/schematic": "^2.5.0",
     "@types/cypress": "^1.1.3",
-    "cypress": "^13.7.0",
+    "cypress": "^13.8.0",
     "cypress-fail-on-console-error": "~5.1.0",
     "cypress-wait-until": "^2.0.1",
     "mock-socket": "~9.3.1",

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
@@ -105,6 +107,10 @@ let routes: Routes = [
     loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
     data: { preload: true },
   },
+  {
+    path: 'tracker/:id',
+    component: TrackerComponent,
+  },
   {
     path: 'wallet',
     children: [],
@@ -263,7 +269,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
   imports: [RouterModule.forRoot(routes, {
     initialNavigation: 'enabledBlocking',
     scrollPositionRestoration: 'enabled',
-    anchorScrolling: 'enabled',
+    anchorScrolling: 'disabled',
     preloadingStrategy: AppPreloadingStrategy
   })],
 })

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",

frontend/src/app/app.module.ts

@@ -19,6 +19,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,6 +39,7 @@ const providers = [
   StorageService,
   EnterpriseService,
   LanguageService,
+  ThemeService,
   ShortenStringPipe,
   FiatShortenerPipe,
   FiatCurrencyPipe,

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>
@@ -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

@@ -177,6 +177,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">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

@@ -45,7 +45,7 @@
     </form>
   </div>
 
-  <div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">

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

@@ -62,7 +62,7 @@ h5 {
 
 .card-title {
   font-size: 1rem;
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 
 .disabled {

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

@@ -58,7 +58,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));

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 {
@@ -172,4 +172,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

@@ -8,12 +8,15 @@ import { Observable, catchError, combineLatest, distinctUntilChanged, interval,
 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,
@@ -32,14 +35,19 @@ export class AcceleratorDashboardComponent implements OnInit {
   minedAccelerations$: Observable<Acceleration[]>;
   loadingBlocks: boolean = true;
   webGlEnabled = true;
+  seen: Set<string> = new Set();
+  firstLoad = true;
+  timespan: '3d' | '1w' | '1m' = '1w';
 
   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,
   ) {
@@ -61,6 +69,15 @@ export class AcceleratorDashboardComponent implements OnInit {
           }),
         );
       }),
+      tap(accelerations => {
+        if (!this.firstLoad && accelerations.some(acc => !this.seen.has(acc.txid))) {
+          this.audioService.playSound('bright-harmony');
+        }
+        for(const acc of accelerations) {
+          this.seen.add(acc.txid);
+        }
+        this.firstLoad = false;
+      }),
       share(),
     );
 
@@ -103,15 +120,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 +145,15 @@ 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' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
     }
   }
 
+  setTimespan(timespan): boolean {
+    this.timespan = timespan;
+    return false;
+  }
+
   @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/address-graph/address-graph.component.ts

@@ -6,6 +6,7 @@ import { 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';
 
 @Component({
   selector: 'app-address-graph',
@@ -46,6 +47,7 @@ export class AddressGraphComponent implements OnChanges {
     private router: Router,
     private amountShortenerPipe: AmountShortenerPipe,
     private cd: ChangeDetectorRef,
+    private relativeUrlPipe: RelativeUrlPipe,
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -111,7 +113,7 @@ export class AddressGraphComponent implements OnChanges {
             : `${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 +124,7 @@ export class AddressGraphComponent implements OnChanges {
               </div>
               <span>${date}</span>
             </div>
-          `; 
+          `;
         }.bind(this)
       },
       xAxis: {
@@ -159,7 +161,7 @@ export class AddressGraphComponent implements OnChanges {
       ],
       series: [
         {
-          name: $localize`Balance:Balance`,
+          name: $localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`,
           showSymbol: false,
           symbol: 'circle',
           symbolSize: 8,
@@ -178,7 +180,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]);
     }
   }
 

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/address-preview.component.scss

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

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

@@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;

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

@@ -28,6 +28,9 @@ export class AddressComponent implements OnInit, OnDestroy {
   retryLoadMore = false;
   error: any;
   mainSubscription: Subscription;
+  mempoolTxSubscription: Subscription;
+  mempoolRemovedTxSubscription: Subscription;
+  blockTxSubscription: Subscription;
   addressLoadingStatus$: Observable<number>;
   addressInfo: null | AddressInformation = null;
 
@@ -179,17 +182,17 @@ export class AddressComponent implements OnInit, OnDestroy {
         this.isLoadingAddress = false;
       });
 
-    this.stateService.mempoolTransactions$
+    this.mempoolTxSubscription = this.stateService.mempoolTransactions$
       .subscribe(tx => {
         this.addTransaction(tx);
       });
 
-    this.stateService.mempoolRemovedTransactions$
+    this.mempoolRemovedTxSubscription = this.stateService.mempoolRemovedTransactions$
       .subscribe(tx => {
         this.removeTransaction(tx);
       });
 
-    this.stateService.blockTransactions$
+    this.blockTxSubscription = this.stateService.blockTransactions$
       .subscribe((transaction) => {
         const tx = this.transactions.find((t) => t.txid === transaction.txid);
         if (tx) {
@@ -295,6 +298,9 @@ export class AddressComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.mainSubscription.unsubscribe();
+    this.mempoolTxSubscription.unsubscribe();
+    this.mempoolRemovedTxSubscription.unsubscribe();
+    this.blockTxSubscription.unsubscribe();
     this.websocketService.stopTrackingAddress();
   }
 }

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

@@ -20,8 +20,7 @@
   <ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && (satoshis === undefined || satoshis === null)" [ngIfElse]="default">
     <span i18n="shared.confidential">Confidential</span>
   </ng-template>
-  <ng-template #default>
-    &lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
+  <ng-template #default>&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
     <span class="symbol"><ng-template [ngIf]="network === 'liquid' && !forceBtc">L-</ng-template>
     <ng-template [ngIf]="network === 'liquidtestnet'">tL-</ng-template>
     <ng-template [ngIf]="network === 'testnet'">t</ng-template>

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

@@ -1,3 +1,3 @@
 .green-color {
-  color: #3bcc49;
+  color: var(--green);
 }

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

@@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;

frontend/src/app/components/assets/asset-group/asset-group.component.scss

@@ -19,7 +19,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   width: 200px;
   height: 200px;
   align-items: center;

frontend/src/app/components/assets/assets-featured/assets-featured.component.scss

@@ -7,7 +7,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   width: 200px;
   height: 200px;
   align-items: center;

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

@@ -18,7 +18,7 @@
 
   <br>
 
-  <ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="ellipses"></ngb-pagination>
+  <ngb-pagination class="pagination-container" [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="ellipses"></ngb-pagination>
 
   <div class="clearfix"></div>
   <br>

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss

@@ -95,12 +95,12 @@
     }
     .card-title {
       font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
     }
     .card-text {
       font-size: 18px;
       span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
         font-size: 12px;
       }
     }

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts

@@ -233,7 +233,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -309,7 +309,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
             opacity: 0.25,
           }
         },
@@ -376,7 +376,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

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

@@ -151,7 +151,7 @@ export class BlockFeesGraphComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -214,7 +214,7 @@ export class BlockFeesGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -305,7 +305,7 @@ export class BlockFeesGraphComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/block-filters/block-filters.component.html

@@ -1,10 +1,10 @@
 <div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.any-mode]="filterMode === 'or'" [class.menu-open]="menuOpen" [class.small]="cssWidth < 500" [class.vsmall]="cssWidth < 400" [class.tiny]="cssWidth < 200">
-  <a *ngIf="menuOpen" [routerLink]="['/docs/faq' | relativeUrl]" fragment="how-do-mempool-goggles-work" class="info-badges" i18n-ngbTooltip="Mempool Goggles tooltip" ngbTooltip="select filter categories to highlight matching transactions">
+  <a *ngIf="menuOpen" [routerLink]="['/docs/faq' | relativeUrl]" fragment="how-do-mempool-goggles-work" class="info-badges" i18n-ngbTooltip="Mempool Goggles&trade; tooltip" ngbTooltip="select filter categories to highlight matching transactions">
     <span class="badge badge-pill badge-warning beta" i18n="beta">beta</span>
     <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" size="lg"></fa-icon>
   </a>
   <div class="filter-bar">
-    <button class="menu-toggle" (click)="menuOpen = !menuOpen" title="Mempool Goggles">
+    <button class="menu-toggle" (click)="menuOpen = !menuOpen" title="Mempool Goggles&trade;">
       <app-svg-images name="goggles" width="100%" height="100%"></app-svg-images>
     </button>
     <div class="active-tags">
@@ -14,14 +14,29 @@
     </div>
   </div>
   <div class="filter-menu" *ngIf="menuOpen && cssWidth > 280">
-    <h5>Match</h5>
-    <div class="btn-group btn-group-toggle">
-      <label class="btn btn-xs blue mode-toggle" [class.active]="filterMode === 'and'">
-        <input type="radio" [value]="'all'" fragment="all" (click)="setFilterMode('and')">All
-      </label>
-      <label class="btn btn-xs green mode-toggle" [class.active]="filterMode === 'or'">
-        <input type="radio" [value]="'any'" fragment="any" (click)="setFilterMode('or')">Any
-      </label>
+    <div class="filter-row">
+      <div class="filter-element">
+        <h5 i18n="mempool-goggles.match">Match</h5>
+        <div class="btn-group btn-group-toggle">
+          <label class="btn btn-xs blue mode-toggle" [class.active]="filterMode === 'and'">
+            <input type="radio" [value]="'all'" fragment="all" (click)="setFilterMode('and')"><ng-container i18n>All</ng-container>
+          </label>
+          <label class="btn btn-xs green mode-toggle" [class.active]="filterMode === 'or'">
+            <input type="radio" [value]="'any'" fragment="any" (click)="setFilterMode('or')"><ng-container i18n="mempool-goggles.any">Any</ng-container>
+          </label>
+        </div>
+      </div>
+      <div class="filter-element">
+        <h5 i18n="mempool-goggles.tint">Tint</h5>
+        <div class="btn-group btn-group-toggle">
+          <label class="btn btn-xs yellow mode-toggle" [class.active]="gradientMode === 'fee'">
+            <input type="radio" [value]="'fee'" fragment="classic" (click)="setGradientMode('fee')"><ng-container i18n="mempool-goggles.classic">Classic</ng-container>
+          </label>
+          <label class="btn btn-xs blue mode-toggle" [class.active]="gradientMode === 'age'">
+            <input type="radio" [value]="'age'" fragment="age" (click)="setGradientMode('age')"><ng-container i18n="mempool-goggles.age">Age</ng-container>
+          </label>
+        </div>
+      </div>
     </div>
     <ng-container *ngFor="let group of filterGroups;">
       <h5>{{ group.label }}</h5>

frontend/src/app/components/block-filters/block-filters.component.scss

@@ -45,6 +45,13 @@
   }
 
   .filter-menu {
+    .filter-row {
+      display: flex;
+      flex-direction: row;
+      justify-content: start;
+      align-items: baseline;
+    }
+
     h5 {
       font-size: 0.8rem;
       color: white;
@@ -64,7 +71,7 @@
   .filter-tag {
     font-size: 0.9em;
     background: #181b2daf;
-    border: solid 1px #105fb0;
+    border: solid 1px var(--primary);
     color: white;
     border-radius: 0.2rem;
     padding: 0.2em 0.5em;
@@ -73,15 +80,15 @@
     pointer-events: all;
 
     &.selected {
-      background-color: #105fb0;
+      background-color: var(--primary);
     }
   }
 
   &.any-mode {
     .filter-tag {
-      border: solid 1px #1a9436;
+      border: solid 1px var(--success);
       &.selected {
-        background-color: #1a9436;
+        background-color: var(--success);
       }
     }
   }
@@ -107,15 +114,21 @@
     }
 
     &.blue {
-      border: solid 1px #105fb0;
+      border: solid 1px var(--primary);
       &.active {
-        background: #105fb0;
+        background: var(--primary);
       }
     }
     &.green {
-      border: solid 1px #1a9436;
+      border: solid 1px var(--success);
       &.active {
-        background: #1a9436;
+        background: var(--success);
+      }
+    }
+    &.yellow {
+      border: solid 1px #bf7815;
+      &.active {
+        background: #bf7815;
       }
     }
   }
@@ -123,7 +136,7 @@
   :host-context(.block-overview-graph:hover) &, &:hover, &:active {
     .menu-toggle {
       opacity: 0.5;
-      background: #181b2d;
+      background: var(--stat-box-bg);
 
       &:hover {
         opacity: 1;

frontend/src/app/components/block-filters/block-filters.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef, OnChanges, SimpleChanges, OnInit, OnDestroy } from '@angular/core';
-import { ActiveFilter, FilterGroups, FilterMode, TransactionFilters } from '../../shared/filters.utils';
+import { ActiveFilter, FilterGroups, FilterMode, GradientMode, TransactionFilters } from '../../shared/filters.utils';
 import { StateService } from '../../services/state.service';
 import { Subscription } from 'rxjs';
 
@@ -22,6 +22,7 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
   activeFilters: string[] = [];
   filterFlags: { [key: string]: boolean } = {};
   filterMode: FilterMode = 'and';
+  gradientMode: GradientMode = 'fee';
   menuOpen: boolean = false;
 
   constructor(
@@ -32,6 +33,7 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
   ngOnInit(): void {
     this.filterSubscription = this.stateService.activeGoggles$.subscribe((active: ActiveFilter) => {
       this.filterMode = active.mode;
+      this.gradientMode = active.gradient;
       for (const key of Object.keys(this.filterFlags)) {
         this.filterFlags[key] = false;
       }
@@ -39,7 +41,7 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
         this.filterFlags[key] = !this.disabledFilters[key];
       }
       this.activeFilters = [...active.filters.filter(key => !this.disabledFilters[key])];
-      this.onFilterChanged.emit({ mode: active.mode, filters: this.activeFilters });
+      this.onFilterChanged.emit({ mode: active.mode, filters: this.activeFilters, gradient: this.gradientMode });
     });
   }
 
@@ -57,8 +59,14 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
 
   setFilterMode(mode): void {
     this.filterMode = mode;
-    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters });
-    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters] });
+    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters, gradient: this.gradientMode });
+    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters], gradient: this.gradientMode });
+  }
+
+  setGradientMode(mode): void {
+    this.gradientMode = mode;
+    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters, gradient: this.gradientMode });
+    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters], gradient: this.gradientMode });
   }
 
   toggleFilter(key): void {
@@ -81,8 +89,8 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
       this.activeFilters = this.activeFilters.filter(f => f != key);
     }
     const booleanFlags = this.getBooleanFlags();
-    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters });
-    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters] });
+    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters, gradient: this.gradientMode });
+    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters], gradient: this.gradientMode });
   }
   
   getBooleanFlags(): bigint | null {

frontend/src/app/components/block-health-graph/block-health-graph.component.ts

@@ -131,7 +131,7 @@ export class BlockHealthGraphComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -178,7 +178,7 @@ export class BlockHealthGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -187,7 +187,7 @@ export class BlockHealthGraphComponent implements OnInit {
       series: data.length === 0 ? undefined : [
         {
           zlevel: 0,
-          name: $localize`Health`,
+          name: $localize`:@@d2bcd3296d2850de762fb943060b7e086a893181:Health`,
           data: data.map(health => ({
             value: health[2],
             block: health[1],
@@ -290,7 +290,7 @@ export class BlockHealthGraphComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss

@@ -2,7 +2,7 @@
   position: relative;
   width: 100%;
   padding-bottom: 100%;
-  background: #181b2d;
+  background: var(--stat-box-bg);
   display: flex;
   justify-content: center;
   align-items: center;

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -7,15 +7,13 @@ import TxView from './tx-view';
 import { Color, Position } from './sprite-types';
 import { Price } from '../../services/price.service';
 import { StateService } from '../../services/state.service';
+import { ThemeService } from '../../services/theme.service';
 import { Subscription } from 'rxjs';
-import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors } from './utils';
+import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from './utils';
 import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
 import { detectWebGL } from '../../shared/graphs.utils';
 
 const unmatchedOpacity = 0.2;
-const unmatchedFeeColors = defaultFeeColors.map(c => setOpacity(c, unmatchedOpacity));
-const unmatchedAuditFeeColors = defaultAuditFeeColors.map(c => setOpacity(c, unmatchedOpacity));
-const unmatchedMarginalFeeColors = defaultMarginalFeeColors.map(c => setOpacity(c, unmatchedOpacity));
 const unmatchedAuditColors = {
   censored: setOpacity(defaultAuditColors.censored, unmatchedOpacity),
   missing: setOpacity(defaultAuditColors.missing, unmatchedOpacity),
@@ -23,6 +21,13 @@ const unmatchedAuditColors = {
   prioritized: setOpacity(defaultAuditColors.prioritized, unmatchedOpacity),
   accelerated: setOpacity(defaultAuditColors.accelerated, unmatchedOpacity),
 };
+const unmatchedContrastAuditColors = {
+  censored: setOpacity(contrastAuditColors.censored, unmatchedOpacity),
+  missing: setOpacity(contrastAuditColors.missing, unmatchedOpacity),
+  added: setOpacity(contrastAuditColors.added, unmatchedOpacity),
+  prioritized: setOpacity(contrastAuditColors.prioritized, unmatchedOpacity),
+  accelerated: setOpacity(contrastAuditColors.accelerated, unmatchedOpacity),
+};
 
 @Component({
   selector: 'app-block-overview-graph',
@@ -46,6 +51,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   @Input() excludeFilters: string[] = [];
   @Input() filterFlags: bigint | null = null;
   @Input() filterMode: FilterMode = 'and';
+  @Input() gradientMode: 'fee' | 'age' = 'fee';
   @Input() relativeTime: number | null;
   @Input() blockConversion: Price;
   @Input() overrideColors: ((tx: TxView) => Color) | null = null;
@@ -55,6 +61,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   @ViewChild('blockCanvas')
   canvas: ElementRef<HTMLCanvasElement>;
+  themeChangedSubscription: Subscription;
 
   gl: WebGLRenderingContext;
   animationFrameRequest: number;
@@ -86,6 +93,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     readonly ngZone: NgZone,
     readonly elRef: ElementRef,
     public stateService: StateService,
+    private themeService: ThemeService,
   ) {
     this.webGlEnabled = this.stateService.isBrowser && detectWebGL();
     this.vertexArray = new FastVertexArray(512, TxSprite.dataSize);
@@ -104,6 +112,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       if (this.gl) {
         this.initCanvas();
         this.resizeCanvas();
+        this.themeChangedSubscription = this.themeService.themeChanged$.subscribe(() => {
+          this.scene.setColorFunction(this.getColorFunction());
+        });
       }
     }
   }
@@ -121,21 +132,22 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       this.setHighlightingEnabled(this.auditHighlighting);
     }
     if (changes.overrideColor && this.scene) {
-      this.scene.setColorFunction(this.overrideColors);
+      this.scene.setColorFunction(this.getFilterColorFunction(0n, this.gradientMode));
     }
-    if ((changes.filterFlags || changes.showFilters || changes.filterMode)) {
+    if ((changes.filterFlags || changes.showFilters || changes.filterMode || changes.gradientMode)) {
       this.setFilterFlags();
     }
   }
 
   setFilterFlags(goggle?: ActiveFilter): void {
     this.filterMode = goggle?.mode || this.filterMode;
+    this.gradientMode = goggle?.gradient || this.gradientMode;
     this.activeFilterFlags = goggle?.filters ? toFlags(goggle.filters) : this.filterFlags;
     if (this.scene) {
       if (this.activeFilterFlags != null && this.filtersAvailable) {
-        this.scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags));
+        this.scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags, this.gradientMode));
       } else {
-        this.scene.setColorFunction(this.overrideColors);
+        this.scene.setColorFunction(this.getFilterColorFunction(0n, this.gradientMode));
       }
     }
     this.start();
@@ -149,6 +161,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.canvas) {
       this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
       this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
+      this.themeChangedSubscription?.unsubscribe();
     }
   }
 
@@ -212,6 +225,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       remove = remove.filter(txid => this.scene.txs[txid]);
       change = change.filter(tx => this.scene.txs[tx.txid]);
 
+      if (this.gradientMode === 'age') {
+        this.scene.updateAllColors();
+      }
       this.scene.update(add, remove, change, direction, resetLayout);
       this.start();
       this.updateSearchHighlight();
@@ -291,7 +307,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
         this.start();
       } else {
         this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution,
-          blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray,
+          blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, theme: this.themeService,
           highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset,
         colorFunction: this.getColorFunction() });
         this.start();
@@ -547,27 +563,41 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   }
 
   getColorFunction(): ((tx: TxView) => Color) {
-    if (this.filterFlags) {
-      return this.getFilterColorFunction(this.filterFlags);
-    } else if (this.activeFilterFlags) {
-      return this.getFilterColorFunction(this.activeFilterFlags);
-    } else {
+    if (this.overrideColors) {
       return this.overrideColors;
+    } else if (this.filterFlags) {
+      return this.getFilterColorFunction(this.filterFlags, this.gradientMode);
+    } else if (this.activeFilterFlags) {
+      return this.getFilterColorFunction(this.activeFilterFlags, this.gradientMode);
+    } else {
+      return this.getFilterColorFunction(0n, this.gradientMode);
     }
   }
 
-  getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
+  getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
     return (tx: TxView) => {
       if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
-        return defaultColorFunction(tx);
+        if (this.themeService.theme !== 'contrast') {
+          return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
+        } else {
+          return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000));
+        }
       } else {
-        return defaultColorFunction(
-          tx,
-          unmatchedFeeColors,
-          unmatchedAuditFeeColors,
-          unmatchedMarginalFeeColors,
-          unmatchedAuditColors
-        );
+        if (this.themeService.theme !== 'contrast') {
+          return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
+            tx,
+            defaultColors.unmatchedfee,
+            unmatchedAuditColors,
+            this.relativeTime || (Date.now() / 1000)
+          );
+        } else {
+          return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : contrastColorFunction(
+            tx,
+            contrastColors.unmatchedfee,
+            unmatchedContrastAuditColors,
+            this.relativeTime || (Date.now() / 1000)
+          );
+        }
       }
     };
   }

frontend/src/app/components/block-overview-graph/block-scene.ts

@@ -2,13 +2,15 @@ import { FastVertexArray } from './fast-vertex-array';
 import TxView from './tx-view';
 import { TransactionStripped } from '../../interfaces/node-api.interface';
 import { Color, Position, Square, ViewUpdateParams } from './sprite-types';
-import { defaultColorFunction } from './utils';
+import { defaultColorFunction, contrastColorFunction } from './utils';
+import { ThemeService } from '../../services/theme.service';
 
 export default class BlockScene {
   scene: { count: number, offset: { x: number, y: number}};
   vertexArray: FastVertexArray;
   txs: { [key: string]: TxView };
   getColor: ((tx: TxView) => Color) = defaultColorFunction;
+  theme: ThemeService;
   orientation: string;
   flip: boolean;
   animationDuration: number = 900;
@@ -29,11 +31,11 @@ export default class BlockScene {
   animateUntil = 0;
   dirty: boolean;
 
-  constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction }:
+  constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
       { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
-        orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
+        orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
   ) {
-    this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction });
+    this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction });
   }
 
   resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void {
@@ -67,7 +69,11 @@ export default class BlockScene {
   }
 
   setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void {
-    this.getColor = colorFunction || defaultColorFunction;
+    this.theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
+    this.updateAllColors();
+  }
+
+  updateAllColors(): void {
     this.dirty = true;
     if (this.initialised && this.scene) {
       this.updateColors(performance.now(), 50);
@@ -193,6 +199,7 @@ export default class BlockScene {
           this.txs[tx.txid].feerate = tx.rate || (this.txs[tx.txid].fee / this.txs[tx.txid].vsize);
           this.txs[tx.txid].rate = tx.rate;
           this.txs[tx.txid].dirty = true;
+          this.updateColor(this.txs[tx.txid], startTime, 50, true);
         }
       });
 
@@ -228,9 +235,9 @@ export default class BlockScene {
     this.animateUntil = Math.max(this.animateUntil, tx.setHighlight(value));
   }
 
-  private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction }:
+  private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
       { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
-        orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
+        orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
   ): void {
     this.animationDuration = animationDuration || 1000;
     this.configAnimationOffset = animationOffset;
@@ -239,7 +246,8 @@ export default class BlockScene {
     this.flip = flip;
     this.vertexArray = vertexArray;
     this.highlightingEnabled = highlighting;
-    this.getColor = colorFunction || defaultColorFunction;
+    theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
+    this.theme = theme;
 
     this.scene = {
       count: 0,

frontend/src/app/components/block-overview-graph/utils.ts

@@ -1,4 +1,4 @@
-import { feeLevels, mempoolFeeColors } from '../../app.constants';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../app.constants';
 import { Color } from './sprite-types';
 import TxView from './tx-view';
 
@@ -37,36 +37,91 @@ export function setOpacity(color: Color, opacity: number): Color {
   };
 }
 
+interface ColorPalette {
+  base: Color[],
+  audit: Color[],
+  marginal: Color[],
+  baseLevel: (tx: TxView, rate: number, time: number) => number,
+}
+
 // precomputed colors
-export const defaultFeeColors = mempoolFeeColors.map(hexToColor);
-export const defaultAuditFeeColors = defaultFeeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
-export const defaultMarginalFeeColors = defaultFeeColors.map((color) => darken(desaturate(color, 0.8), 1.1));
+const defaultColors: { [key: string]: ColorPalette } = {
+  fee: {
+    base: defaultMempoolFeeColors.map(hexToColor),
+    audit: [],
+    marginal: [],
+    baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1
+  },
+}
+for (const key in defaultColors) {
+  const base = defaultColors[key].base;
+  defaultColors[key].audit = base.map((color) => darken(desaturate(color, 0.3), 0.9));
+  defaultColors[key].marginal = base.map((color) => darken(desaturate(color, 0.8), 1.1));
+  defaultColors['unmatched' + key] = {
+    base: defaultColors[key].base.map(c => setOpacity(c, 0.2)),
+    audit: defaultColors[key].audit.map(c => setOpacity(c, 0.2)),
+    marginal: defaultColors[key].marginal.map(c => setOpacity(c, 0.2)),
+    baseLevel: defaultColors[key].baseLevel,
+  };
+}
+
+export { defaultColors as defaultColors };
+
 export const defaultAuditColors = {
   censored: hexToColor('f344df'),
   missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
   added: hexToColor('0099ff'),
   prioritized: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7),
-  accelerated: hexToColor('8F5FF6'),
+  accelerated: hexToColor('8f5ff6'),
+};
+
+const contrastColors: { [key: string]: ColorPalette } = {
+  fee: {
+    base: contrastMempoolFeeColors.map(hexToColor),
+    audit: [],
+    marginal: [],
+    baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1
+  },
+}
+for (const key in contrastColors) {
+  const base = contrastColors[key].base;
+  contrastColors[key].audit = base.map((color) => darken(desaturate(color, 0.3), 0.9));
+  contrastColors[key].marginal = base.map((color) => darken(desaturate(color, 0.8), 1.1));
+  contrastColors['unmatched' + key] = {
+    base: contrastColors[key].base.map(c => setOpacity(c, 0.2)),
+    audit: contrastColors[key].audit.map(c => setOpacity(c, 0.2)),
+    marginal: contrastColors[key].marginal.map(c => setOpacity(c, 0.2)),
+    baseLevel: contrastColors[key].baseLevel,
+  };
+}
+
+export { contrastColors as contrastColors };
+
+export const contrastAuditColors = {
+  censored: hexToColor('ffa8ff'),
+  missing: darken(desaturate(hexToColor('ffa8ff'), 0.3), 0.7),
+  added: hexToColor('00bb98'),
+  prioritized: darken(desaturate(hexToColor('00bb98'), 0.3), 0.7),
+  accelerated: hexToColor('8f5ff6'),
 };
 
 export function defaultColorFunction(
   tx: TxView,
-  feeColors: Color[] = defaultFeeColors,
-  auditFeeColors: Color[] = defaultAuditFeeColors,
-  marginalFeeColors: Color[] = defaultMarginalFeeColors,
-  auditColors: { [status: string]: Color } = defaultAuditColors
+  colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = defaultColors.fee,
+  auditColors: { [status: string]: Color } = defaultAuditColors,
+  relativeTime?: number,
 ): Color {
   const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
-  const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
-  const feeLevelColor = feeColors[feeLevelIndex] || feeColors[mempoolFeeColors.length - 1];
+  const levelIndex = colors.baseLevel(tx, rate, relativeTime || (Date.now() / 1000));
+  const levelColor = colors.base[levelIndex] || colors.base[defaultMempoolFeeColors.length - 1];
   // Normal mode
   if (!tx.scene?.highlightingEnabled) {
     if (tx.acc) {
       return auditColors.accelerated;
     } else {
-      return feeLevelColor;
+      return levelColor;
     }
-    return feeLevelColor;
+    return levelColor;
   }
   // Block audit
   switch(tx.status) {
@@ -75,7 +130,7 @@ export function defaultColorFunction(
     case 'missing':
     case 'sigop':
     case 'rbf':
-      return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+      return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1];
     case 'fresh':
     case 'freshcpfp':
       return auditColors.missing;
@@ -84,20 +139,51 @@ export function defaultColorFunction(
     case 'prioritized':
       return auditColors.prioritized;
     case 'selected':
-      return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+      return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1];
     case 'accelerated':
       return auditColors.accelerated;
     case 'found':
       if (tx.context === 'projected') {
-        return auditFeeColors[feeLevelIndex] || auditFeeColors[mempoolFeeColors.length - 1];
+        return colors.audit[levelIndex] || colors.audit[defaultMempoolFeeColors.length - 1];
       } else {
-        return feeLevelColor;
+        return levelColor;
       }
     default:
       if (tx.acc) {
         return auditColors.accelerated;
       } else {
-        return feeLevelColor;
+        return levelColor;
       }
   }
-}
+}
+
+export function contrastColorFunction(
+  tx: TxView,
+  colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = contrastColors.fee,
+  auditColors: { [status: string]: Color } = contrastAuditColors,
+  relativeTime?: number,
+): Color {
+  return defaultColorFunction(tx, colors, auditColors, relativeTime);
+}
+
+export function ageColorFunction(
+  tx: TxView,
+  colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = defaultColors.fee,
+  auditColors: { [status: string]: Color } = defaultAuditColors,
+  relativeTime?: number,
+  theme?: string,
+): Color {
+  if (tx.acc || tx.status === 'accelerated') {
+    return auditColors.accelerated;
+  }
+
+  const color = theme !== 'contrast' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime);
+
+  const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60)))))));
+  return {
+    r: color.r,
+    g: color.g,
+    b: color.b,
+    a: color.a * (1 - ageLevel)
+  };
+}

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html

@@ -3,7 +3,7 @@
   class="block-overview-tooltip"
   [class.clickable]="clickable"
   [style.visibility]="tx ? 'visible' : 'hidden'"
-  [style.left]="tooltipPosition.x + 'px'"
+  [style.left]="getTooltipLeftPosition()"
   [style.top]="tooltipPosition.y + 'px'"
 >
   <table class="table-fixed">
@@ -29,7 +29,7 @@
             <td class="value"><i><app-time kind="span" [time]="time - relativeTime"></app-time></i></td>
           </ng-container>
           <ng-container *ngSwitchCase="'mined'">
-            <td class="label" i18n="transaction.confirmed-after|Transaction confirmed after">Confirmed</td>
+            <td class="label" i18n="transaction.confirmed|Transaction confirmed state">Confirmed</td>
             <td class="value"><i><app-time kind="span" [time]="relativeTime - time"></app-time></i></td>
           </ng-container>
         </ng-container>
@@ -68,15 +68,15 @@
         <td class="value">
           <ng-container [ngSwitch]="tx?.status">
             <span *ngSwitchCase="'found'" class="badge badge-success" i18n="transaction.audit.match">Match</span>
-            <span *ngSwitchCase="'censored'" class="badge badge-danger" i18n="transaction.audit.removed">Removed</span>
+            <span *ngSwitchCase="'censored'" class="badge badge-danger" i18n="transaction.audit.removed|Transaction removed state">Removed</span>
             <span *ngSwitchCase="'missing'" class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span>
             <span *ngSwitchCase="'sigop'" class="badge badge-warning" i18n="transaction.audit.sigop">High sigop count</span>
             <span *ngSwitchCase="'fresh'" class="badge badge-warning" i18n="transaction.audit.recently-broadcasted">Recently broadcasted</span>
             <span *ngSwitchCase="'freshcpfp'" class="badge badge-warning" i18n="transaction.audit.recently-cpfped">Recently CPFP'd</span>
-            <span *ngSwitchCase="'added'" class="badge badge-warning" i18n="transaction.audit.added">Added</span>
-            <span *ngSwitchCase="'prioritized'" class="badge badge-warning" i18n="transaction.audit.prioritized">Prioritized</span>
+            <span *ngSwitchCase="'added'" class="badge badge-warning" i18n="tx-features.tag.added|Added">Added</span>
+            <span *ngSwitchCase="'prioritized'" class="badge badge-warning" i18n="tx-features.tag.prioritized|Prioritized">Prioritized</span>
             <span *ngSwitchCase="'selected'" class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span>
-            <span *ngSwitchCase="'rbf'" class="badge badge-warning" i18n="transaction.audit.conflicting">Conflicting</span>
+            <span *ngSwitchCase="'rbf'" class="badge badge-warning" i18n="tx-features.tag.conflict|Conflict">Conflict</span>
             <span *ngSwitchCase="'accelerated'" class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span>
           </ng-container>
         </td>

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss

@@ -3,14 +3,14 @@
   background: rgba(#11131f, 0.95);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 10px 15px;
   text-align: left;
   min-width: 340px;
-  max-width: 340px;
+  max-width: 400px;
   pointer-events: none;
   z-index: 11;
 
@@ -30,7 +30,7 @@ th, td {
 }
 
 .badge.badge-accelerated {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
   box-shadow: #ad7de57f 0px 0px 12px -2px;
   color: white;
   animation: acceleratePulse 1s infinite;
@@ -41,7 +41,7 @@ th, td {
   flex-wrap: wrap;
   row-gap: 0.25em;
   margin-top: 0.2em;
-  max-width: 100%;
+  max-width: 310px;
 
   .badge {
     border-radius: 0.2rem;
@@ -51,27 +51,27 @@ th, td {
 
   .filter-tag {
     background: #181b2daf;
-    border: solid 1px #105fb0;
+    border: solid 1px var(--primary);
     color: white;
     transition: background-color 300ms;
 
     &.matching {
-      background-color: #105fb0;
+      background-color: var(--primary);
     }
   }
 
   &.any-mode {
     .filter-tag {
-      border: solid 1px #1a9436;
+      border: solid 1px var(--success);
       &.matching {
-        background-color: #1a9436;
+        background-color: var(--success);
       }
     }
   }
 }
 
 @keyframes acceleratePulse {
-  0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
   50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}
-  100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
 }

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts

@@ -68,7 +68,7 @@ export class BlockOverviewTooltipComponent implements OnChanges {
       this.effectiveRate = this.tx.rate;
       const txFlags = BigInt(this.tx.flags) || 0n;
       this.acceleration = this.tx.acc || (txFlags & TransactionFlags.acceleration);
-      this.hasEffectiveRate = Math.abs((this.fee / this.vsize) - this.effectiveRate) > 0.05
+      this.hasEffectiveRate = this.tx.acc || Math.abs((this.fee / this.vsize) - this.effectiveRate) > 0.05
         || (txFlags && (txFlags & (TransactionFlags.cpfp_child | TransactionFlags.cpfp_parent)) > 0n);
       this.filters = this.tx.flags ? toFilters(txFlags).filter(f => f.tooltip) : [];
       this.activeFilters = {}
@@ -96,4 +96,8 @@ export class BlockOverviewTooltipComponent implements OnChanges {
       this.cd.markForCheck();
     }
   }
+
+  getTooltipLeftPosition(): string {
+    return window.innerWidth < 392 ? '-50px' : this.tooltipPosition.x + 'px';
+  }
 }

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts

@@ -150,7 +150,7 @@ export class BlockRewardsGraphComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -219,7 +219,7 @@ export class BlockRewardsGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -315,7 +315,7 @@ export class BlockRewardsGraphComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts

@@ -146,7 +146,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -230,7 +230,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -252,7 +252,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
             symbol: 'none',
             lineStyle: {
               type: 'solid',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 1,
               width: 1,
             },
@@ -342,7 +342,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/block-view/block-view.component.scss

@@ -1,7 +1,7 @@
 .block-wrapper {
   width: 100vw;
   height: 100vh;
-  background: #181b2d;
+  background: var(--stat-box-bg);
 }
 
 .block-container {

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

@@ -53,13 +53,13 @@
             <td i18n="block.miner">Miner</td>
             <td *ngIf="stateService.env.MINING_DASHBOARD">
               <a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
-                [class]="!block?.extras.pool.name || block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+                [class]="!block?.extras.pool.name || block?.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
                 {{ block?.extras.pool.name }}
               </a>
             </td>
             <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
               <span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
-                [class]="!block?.extras.pool.name || block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+                [class]="!block?.extras.pool.name || block?.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
                 {{ block?.extras.pool.name }}
             </span>
             </td>

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

@@ -136,7 +136,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
                   return of(transactions);
                 })
               ),
-            this.stateService.env.ACCELERATOR === true && block.height > 819500 ? this.servicesApiService.getAccelerationHistory$({ blockHash: block.id }) : of([])
+            this.stateService.env.ACCELERATOR === true && block.height > 819500 ? this.servicesApiService.getAccelerationHistory$({ blockHeight: block.height }) : of([])
           ]);
         }
       ),

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

@@ -182,13 +182,13 @@
         <td i18n="block.miner">Miner</td>
         <td *ngIf="stateService.env.MINING_DASHBOARD">
           <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge"
-            [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+            [class]="block.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
             {{ block.extras.pool.name }}
           </a>
         </td>
         <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
           <span placement="bottom" class="badge"
-            [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+            [class]="block.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
             {{ block.extras.pool.name }}
         </span>
         </td>

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

@@ -22,7 +22,7 @@
 }
 
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;
@@ -175,9 +175,7 @@ h1 {
   }
 
   a {
-    color: #1ad8f4;
     &:hover, &:focus {
-      color: #09a3ba;
       display: inline-block;
     }
   }
@@ -254,7 +252,7 @@ h1 {
   cursor: pointer;
 
   &.active {
-    background: #24273e;
+    background: var(--box-bg);
   }
 
   &.active, &:hover {

frontend/src/app/components/block/block.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, ViewChildren, QueryList, Inject, PLATFORM
 import { Location } from '@angular/common';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
-import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith } from 'rxjs/operators';
+import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, filter } from 'rxjs/operators';
 import { Transaction, Vout } from '../../interfaces/electrs.interface';
 import { Observable, of, Subscription, asyncScheduler, EMPTY, combineLatest, forkJoin } from 'rxjs';
 import { StateService } from '../../services/state.service';
@@ -345,7 +345,7 @@ export class BlockComponent implements OnInit, OnDestroy {
                 return of(null);
               })
             ),
-          this.stateService.env.ACCELERATOR === true && block.height > 819500 ? this.servicesApiService.getAccelerationHistory$({ blockHash: block.id }) : of([])
+          this.stateService.env.ACCELERATOR === true && block.height > 819500 ? this.servicesApiService.getAccelerationHistory$({ blockHeight: block.height }) : of([])
         ]);
       })
     )
@@ -358,11 +358,21 @@ export class BlockComponent implements OnInit, OnDestroy {
 
       const acceleratedInBlock = {};
       for (const acc of accelerations) {
-        acceleratedInBlock[acc.txid] = acc;
+        if (acc.pools?.some(pool => pool === this.block?.extras?.pool.id || pool?.['pool_unique_id'] === this.block?.extras?.pool.id)) {
+          acceleratedInBlock[acc.txid] = acc;
+        }
       }
       for (const tx of transactions) {
         if (acceleratedInBlock[tx.txid]) {
           tx.acc = true;
+          const acceleration = acceleratedInBlock[tx.txid];
+          const boostCost = acceleration.boostCost || acceleration.bidBoost;
+          const acceleratedFeeRate = Math.max(acceleration.effectiveFee, acceleration.effectiveFee + boostCost) / acceleration.effectiveVsize;
+          if (acceleratedFeeRate > tx.rate) {
+            tx.rate = acceleratedFeeRate;
+          }
+        } else {
+          tx.acc = false;
         }
       }
 
@@ -484,6 +494,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     });
 
     this.oobSubscription = block$.pipe(
+      filter(() => this.stateService.env.PUBLIC_ACCELERATIONS === true && this.stateService.network === ''),
       switchMap((block) => this.apiService.getAccelerationsByHeight$(block.height)
         .pipe(
           map(accelerations => {