Shades of green / red on DA blocks

Allow OP_0 in multisig scripts

LICENSE

@@ -1,5 +1,5 @@
 The Mempool Open Source Project®
-Copyright (c) 2019-2023 Mempool Space K.K. and other shadowy super-coders
+Copyright (c) 2019-2024 Mempool Space K.K. and other shadowy super-coders
 
 This program is free software; you can redistribute it and/or modify it under
 the terms of the GNU Affero General Public License as published by the Free
@@ -12,10 +12,12 @@ or any other contributor to The Mempool Open Source Project.
 
 The Mempool Open Source Project®, Mempool Accelerator™, Mempool Enterprise®, 
 Mempool Liquidity™, mempool.space®, Be your own explorer™, Explore the full 
-Bitcoin ecosystem™, Mempool Goggles™, the mempool Logo, the mempool Square logo, 
-the mempool Blocks logo, the mempool Blocks 3 | 2 logo, the mempool.space Vertical 
-Logo, and the mempool.space Horizontal logo are registered trademarks or trademarks 
-of Mempool Space K.K in Japan, the United States, and/or other countries.
+Bitcoin ecosystem™, Mempool Goggles™, the mempool Logo, the mempool Square Logo, 
+the mempool block visualization Logo, the mempool Blocks Logo, the mempool 
+transaction Logo, the mempool Blocks 3 | 2 Logo, the mempool research Logo, 
+the mempool.space Vertical Logo, and the mempool.space Horizontal Logo are 
+registered trademarks or trademarks of Mempool Space K.K in Japan, 
+the United States, and/or other countries.
 
 See our full Trademark Policy and Guidelines for more details, published on 
 <https://mempool.space/trademark-policy>.

backend/README.md

@@ -77,7 +77,7 @@ Query OK, 0 rows affected (0.00 sec)
 
 #### Build
 
-_Make sure to use Node.js 16.10 and npm 7._
+_Make sure to use Node.js 20.x and npm 9.x or newer_
 
 _The build process requires [Rust](https://www.rust-lang.org/tools/install) to be installed._
 

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-backend",
-  "version": "3.0.0-dev",
+  "version": "3.1.0-dev",
   "description": "Bitcoin mempool visualizer and blockchain explorer backend",
   "license": "GNU Affero General Public License v3.0",
   "homepage": "https://mempool.space",
@@ -39,24 +39,24 @@
     "prettier": "./node_modules/.bin/prettier --write \"src/**/*.{js,ts}\""
   },
   "dependencies": {
-    "@babel/core": "^7.24.0",
+    "@babel/core": "^7.25.2",
     "@mempool/electrum-client": "1.1.9",
     "@types/node": "^18.15.3",
-    "axios": "~1.7.2",
+    "axios": "~1.7.4",
     "bitcoinjs-lib": "~6.1.3",
     "crypto-js": "~4.2.0",
     "express": "~4.19.2",
     "maxmind": "~4.3.11",
-    "mysql2": "~3.10.0",
+    "mysql2": "~3.11.0",
     "rust-gbt": "file:./rust-gbt",
-    "redis": "^4.6.6",
+    "redis": "^4.7.0",
     "socks-proxy-agent": "~7.0.0",
     "typescript": "~4.9.3",
     "ws": "~8.18.0"
   },
   "devDependencies": {
     "@babel/code-frame": "^7.18.6",
-    "@babel/core": "^7.24.0",
+    "@babel/core": "^7.25.2",
     "@types/compression": "^1.7.2",
     "@types/crypto-js": "^4.1.1",
     "@types/express": "^4.17.17",

backend/src/api/about.routes.ts

@@ -70,7 +70,7 @@ class AboutRoutes {
           res.status(500).end();
         }
       })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'services/account/images/:username', async (req, res) => {
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/account/images/:username/:md5', 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 });

backend/src/api/audit.ts

@@ -2,24 +2,28 @@ import config from '../config';
 import logger from '../logger';
 import { MempoolTransactionExtended, MempoolBlockWithTransactions } from '../mempool.interfaces';
 import rbfCache from './rbf-cache';
+import transactionUtils from './transaction-utils';
 
 const PROPAGATION_MARGIN = 180; // in seconds, time since a transaction is first seen after which it is assumed to have propagated to all miners
 
 class Audit {
-  auditBlock(transactions: MempoolTransactionExtended[], projectedBlocks: MempoolBlockWithTransactions[], mempool: { [txId: string]: MempoolTransactionExtended }, useAccelerations: boolean = false)
-   : { censored: string[], added: string[], prioritized: string[], fresh: string[], sigop: string[], fullrbf: string[], accelerated: string[], score: number, similarity: number } {
+  auditBlock(height: number, transactions: MempoolTransactionExtended[], projectedBlocks: MempoolBlockWithTransactions[], mempool: { [txId: string]: MempoolTransactionExtended })
+   : { unseen: string[], censored: string[], added: string[], prioritized: string[], fresh: string[], sigop: string[], fullrbf: string[], accelerated: string[], score: number, similarity: number } {
     if (!projectedBlocks?.[0]?.transactionIds || !mempool) {
-      return { censored: [], added: [], prioritized: [], fresh: [], sigop: [], fullrbf: [], accelerated: [], score: 1, similarity: 1 };
+      return { unseen: [], censored: [], added: [], prioritized: [], fresh: [], sigop: [], fullrbf: [], accelerated: [], score: 1, similarity: 1 };
     }
 
     const matches: string[] = []; // present in both mined block and template
     const added: string[] = []; // present in mined block, not in template
-    const prioritized: string[] = [] // present in the mined block, not in the template, but further down in the mempool
+    const unseen: string[] = []; // present in the mined block, not in our mempool
+    let prioritized: string[] = []; // higher in the block than would be expected by in-band feerate alone
+    let deprioritized: string[] = []; // lower in the block than would be expected by in-band feerate alone
     const fresh: string[] = []; // missing, but firstSeen or lastBoosted within PROPAGATION_MARGIN
     const rbf: string[] = []; // either missing or present, and either part of a full-rbf replacement, or a conflict with the mined block
     const accelerated: string[] = []; // prioritized by the mempool accelerator
     const isCensored = {}; // missing, without excuse
     const isDisplaced = {};
+    const isAccelerated = {};
     let displacedWeight = 0;
     let matchedWeight = 0;
     let projectedWeight = 0;
@@ -32,6 +36,7 @@ class Audit {
       inBlock[tx.txid] = tx;
       if (mempool[tx.txid] && mempool[tx.txid].acceleration) {
         accelerated.push(tx.txid);
+        isAccelerated[tx.txid] = true;
       }
     }
     // coinbase is always expected
@@ -113,11 +118,16 @@ class Audit {
       } else {
         if (rbfCache.has(tx.txid)) {
           rbf.push(tx.txid);
-        } else if (!isDisplaced[tx.txid]) {
+          if (!mempool[tx.txid] && !rbfCache.getReplacedBy(tx.txid)) {
+            unseen.push(tx.txid);
+          }
+        } else {
           if (mempool[tx.txid]) {
-            prioritized.push(tx.txid);
+            if (isDisplaced[tx.txid]) {
+              added.push(tx.txid);
+            }
           } else {
-            added.push(tx.txid);
+            unseen.push(tx.txid);
           }
         }
         overflowWeight += tx.weight;
@@ -125,6 +135,8 @@ class Audit {
       totalWeight += tx.weight;
     }
 
+    ({ prioritized, deprioritized } = transactionUtils.identifyPrioritizedTransactions(transactions, 'effectiveFeePerVsize'));
+
     // transactions missing from near the end of our template are probably not being censored
     let overflowWeightRemaining = overflowWeight - (config.MEMPOOL.BLOCK_WEIGHT_UNITS - totalWeight);
     let maxOverflowRate = 0;
@@ -165,6 +177,7 @@ class Audit {
     const similarity = projectedWeight ? matchedWeight / projectedWeight : 1;
 
     return {
+      unseen,
       censored: Object.keys(isCensored),
       added,
       prioritized,

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

@@ -323,6 +323,7 @@ class BitcoinApi implements AbstractBitcoinApi {
       'witness_v1_taproot': 'v1_p2tr',
       'nonstandard': 'nonstandard',
       'multisig': 'multisig',
+      'anchor': 'anchor',
       'nulldata': 'op_return'
     };
 

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

@@ -165,6 +165,7 @@ class BitcoinRoutes {
           acceleration: tx.acceleration,
           acceleratedBy: tx.acceleratedBy || undefined,
           acceleratedAt: tx.acceleratedAt || undefined,
+          feeDelta: tx.feeDelta || undefined,
         });
         return;
       }

backend/src/api/blocks.ts

@@ -33,6 +33,7 @@ import AccelerationRepository from '../repositories/AccelerationRepository';
 import { calculateFastBlockCpfp, calculateGoodBlockCpfp } from './cpfp';
 import mempool from './mempool';
 import CpfpRepository from '../repositories/CpfpRepository';
+import accelerationApi from './services/acceleration';
 
 class Blocks {
   private blocks: BlockExtended[] = [];
@@ -218,10 +219,10 @@ class Blocks {
     };
   }
 
-  public summarizeBlockTransactions(hash: string, transactions: TransactionExtended[]): BlockSummary {
+  public summarizeBlockTransactions(hash: string, height: number, transactions: TransactionExtended[]): BlockSummary {
     return {
       id: hash,
-      transactions: Common.classifyTransactions(transactions),
+      transactions: Common.classifyTransactions(transactions, height),
     };
   }
 
@@ -439,7 +440,7 @@ class Blocks {
 
 
         if (config.MEMPOOL.BACKEND === 'esplora') {
-          const txs = (await bitcoinApi.$getTxsForBlock(block.hash)).map(tx => transactionUtils.extendTransaction(tx));
+          const txs = (await bitcoinApi.$getTxsForBlock(block.hash)).map(tx => transactionUtils.extendMempoolTransaction(tx));
           const cpfpSummary = await this.$indexCPFP(block.hash, block.height, txs);
           if (cpfpSummary) {
             await this.$getStrippedBlockTransactions(block.hash, true, true, cpfpSummary, block.height); // This will index the block summary
@@ -615,7 +616,7 @@ class Blocks {
           // add CPFP
           const cpfpSummary = calculateGoodBlockCpfp(height, txs, []);
           // classify
-          const { transactions: classifiedTxs } = this.summarizeBlockTransactions(blockHash, cpfpSummary.transactions);
+          const { transactions: classifiedTxs } = this.summarizeBlockTransactions(blockHash, height, cpfpSummary.transactions);
           await BlocksSummariesRepository.$saveTransactions(height, blockHash, classifiedTxs, 2);
           if (unclassifiedBlocks[height].version < 2 && targetSummaryVersion === 2) {
             const cpfpClusters = await CpfpRepository.$getClustersAt(height);
@@ -652,7 +653,7 @@ class Blocks {
             }
             const cpfpSummary = calculateGoodBlockCpfp(height, templateTxs?.filter(tx => tx['effectiveFeePerVsize'] != null) as MempoolTransactionExtended[], []);
             // classify
-            const { transactions: classifiedTxs } = this.summarizeBlockTransactions(blockHash, cpfpSummary.transactions);
+            const { transactions: classifiedTxs } = this.summarizeBlockTransactions(blockHash, height, cpfpSummary.transactions);
             const classifiedTxMap: { [txid: string]: TransactionClassified } = {};
             for (const tx of classifiedTxs) {
               classifiedTxMap[tx.txid] = tx;
@@ -904,9 +905,14 @@ class Blocks {
         }
       }
 
-      const cpfpSummary: CpfpSummary = calculateGoodBlockCpfp(block.height, transactions, Object.values(mempool.getAccelerations()).map(a => ({ txid: a.txid, max_bid: a.feeDelta })));
+      let accelerations = Object.values(mempool.getAccelerations());
+      if (accelerations?.length > 0) {
+        const pool = await this.$findBlockMiner(transactionUtils.stripCoinbaseTransaction(transactions[0]));
+        accelerations = accelerations.filter(a => a.pools.includes(pool.uniqueId));
+      }
+      const cpfpSummary: CpfpSummary = calculateGoodBlockCpfp(block.height, transactions, accelerations.map(a => ({ txid: a.txid, max_bid: a.feeDelta })));
       const blockExtended: BlockExtended = await this.$getBlockExtended(block, cpfpSummary.transactions);
-      const blockSummary: BlockSummary = this.summarizeBlockTransactions(block.id, cpfpSummary.transactions);
+      const blockSummary: BlockSummary = this.summarizeBlockTransactions(block.id, block.height, cpfpSummary.transactions);
       this.updateTimerProgress(timer, `got block data for ${this.currentBlockHeight}`);
 
       if (Common.indexingEnabled()) {
@@ -927,12 +933,12 @@ class Blocks {
               const newBlock = await this.$indexBlock(lastBlock.height - i);
               this.blocks.push(newBlock);
               this.updateTimerProgress(timer, `reindexed block`);
-              let cpfpSummary;
+              let newCpfpSummary;
               if (config.MEMPOOL.CPFP_INDEXING) {
-                cpfpSummary = await this.$indexCPFP(newBlock.id, lastBlock.height - i);
+                newCpfpSummary = await this.$indexCPFP(newBlock.id, lastBlock.height - i);
                 this.updateTimerProgress(timer, `reindexed block cpfp`);
               }
-              await this.$getStrippedBlockTransactions(newBlock.id, true, true, cpfpSummary, newBlock.height);
+              await this.$getStrippedBlockTransactions(newBlock.id, true, true, newCpfpSummary, newBlock.height);
               this.updateTimerProgress(timer, `reindexed block summary`);
             }
             await mining.$indexDifficultyAdjustments();
@@ -981,7 +987,7 @@ class Blocks {
 
       // start async callbacks
       this.updateTimerProgress(timer, `starting async callbacks for ${this.currentBlockHeight}`);
-      const callbackPromises = this.newAsyncBlockCallbacks.map((cb) => cb(blockExtended, txIds, transactions));
+      const callbackPromises = this.newAsyncBlockCallbacks.map((cb) => cb(blockExtended, txIds, cpfpSummary.transactions));
 
       if (block.height % 2016 === 0) {
         if (Common.indexingEnabled()) {
@@ -1163,7 +1169,7 @@ class Blocks {
         transactions: cpfpSummary.transactions.map(tx => {
           let flags: number = 0;
           try {
-            flags = Common.getTransactionFlags(tx);
+            flags = Common.getTransactionFlags(tx, height);
           } catch (e) {
             logger.warn('Failed to classify transaction: ' + (e instanceof Error ? e.message : e));
           }
@@ -1178,11 +1184,11 @@ class Blocks {
           };
         }),
       };
-      summaryVersion = 1;
+      summaryVersion = cpfpSummary.version;
     } else {
       if (config.MEMPOOL.BACKEND === 'esplora') {
         const txs = (await bitcoinApi.$getTxsForBlock(hash)).map(tx => transactionUtils.extendTransaction(tx));
-        summary = this.summarizeBlockTransactions(hash, txs);
+        summary = this.summarizeBlockTransactions(hash, height || 0, txs);
         summaryVersion = 1;
       } else {
         // Call Core RPC
@@ -1318,7 +1324,7 @@ class Blocks {
           let summaryVersion = 0;
           if (config.MEMPOOL.BACKEND === 'esplora') {
             const txs = (await bitcoinApi.$getTxsForBlock(cleanBlock.hash)).map(tx => transactionUtils.extendTransaction(tx));
-            summary = this.summarizeBlockTransactions(cleanBlock.hash, txs);
+            summary = this.summarizeBlockTransactions(cleanBlock.hash, cleanBlock.height, txs);
             summaryVersion = 1;
           } else {
             // Call Core RPC
@@ -1397,11 +1403,11 @@ class Blocks {
     return this.currentBlockHeight;
   }
 
-  public async $indexCPFP(hash: string, height: number, txs?: TransactionExtended[]): Promise<CpfpSummary | null> {
+  public async $indexCPFP(hash: string, height: number, txs?: MempoolTransactionExtended[]): Promise<CpfpSummary | null> {
     let transactions = txs;
     if (!transactions) {
       if (config.MEMPOOL.BACKEND === 'esplora') {
-        transactions = (await bitcoinApi.$getTxsForBlock(hash)).map(tx => transactionUtils.extendTransaction(tx));
+        transactions = (await bitcoinApi.$getTxsForBlock(hash)).map(tx => transactionUtils.extendMempoolTransaction(tx));
       }
       if (!transactions) {
         const block = await bitcoinClient.getBlock(hash, 2);
@@ -1413,7 +1419,7 @@ class Blocks {
     }
 
     if (transactions?.length != null) {
-      const summary = calculateFastBlockCpfp(height, transactions as TransactionExtended[]);
+      const summary = calculateFastBlockCpfp(height, transactions);
 
       await this.$saveCpfp(hash, height, summary);
 

backend/src/api/common.ts

@@ -1,6 +1,6 @@
 import * as bitcoinjs from 'bitcoinjs-lib';
 import { Request } from 'express';
-import { CpfpInfo, CpfpSummary, CpfpCluster, EffectiveFeeStats, MempoolBlockWithTransactions, TransactionExtended, MempoolTransactionExtended, TransactionStripped, WorkingEffectiveFeeStats, TransactionClassified, TransactionFlags } from '../mempool.interfaces';
+import { EffectiveFeeStats, MempoolBlockWithTransactions, TransactionExtended, MempoolTransactionExtended, TransactionStripped, WorkingEffectiveFeeStats, TransactionClassified, TransactionFlags } from '../mempool.interfaces';
 import config from '../config';
 import { NodeSocket } from '../repositories/NodesSocketsRepository';
 import { isIP } from 'net';
@@ -10,7 +10,6 @@ import logger from '../logger';
 import { getVarIntLength, opcodes, parseMultisigScript } from '../utils/bitcoin-script';
 
 // Bitcoin Core default policy settings
-const TX_MAX_STANDARD_VERSION = 2;
 const MAX_STANDARD_TX_WEIGHT = 400_000;
 const MAX_BLOCK_SIGOPS_COST = 80_000;
 const MAX_STANDARD_TX_SIGOPS_COST = (MAX_BLOCK_SIGOPS_COST / 5);
@@ -200,10 +199,13 @@ export class Common {
    *
    * returns true early if any standardness rule is violated, otherwise false
    * (except for non-mandatory-script-verify-flag and p2sh script evaluation rules which are *not* enforced)
+   *
+   * As standardness rules change, we'll need to apply the rules in force *at the time* to older blocks.
+   * For now, just pull out individual rules into versioned functions where necessary.
    */
-  static isNonStandard(tx: TransactionExtended): boolean {
+  static isNonStandard(tx: TransactionExtended, height?: number): boolean {
     // version
-    if (tx.version > TX_MAX_STANDARD_VERSION) {
+    if (this.isNonStandardVersion(tx, height)) {
       return true;
     }
 
@@ -250,6 +252,8 @@ export class Common {
         }
       } else if (['unknown', 'provably_unspendable', 'empty'].includes(vin.prevout?.scriptpubkey_type || '')) {
         return true;
+      } else if (this.isNonStandardAnchor(tx, height)) {
+        return true;
       }
       // TODO: bad-witness-nonstandard
     }
@@ -335,6 +339,49 @@ export class Common {
     return false;
   }
 
+  // Individual versioned standardness rules
+
+  static V3_STANDARDNESS_ACTIVATION_HEIGHT = {
+    'testnet4': 42_000,
+    'testnet': 2_900_000,
+    'signet': 211_000,
+    '': 863_500,
+  };
+  static isNonStandardVersion(tx: TransactionExtended, height?: number): boolean {
+    let TX_MAX_STANDARD_VERSION = 3;
+    if (
+      height != null
+      && this.V3_STANDARDNESS_ACTIVATION_HEIGHT[config.MEMPOOL.NETWORK]
+      && height <= this.V3_STANDARDNESS_ACTIVATION_HEIGHT[config.MEMPOOL.NETWORK]
+    ) {
+      // V3 transactions were non-standard to spend before v28.x (scheduled for 2024/09/30 https://github.com/bitcoin/bitcoin/issues/29891)
+      TX_MAX_STANDARD_VERSION = 2;
+    }
+
+    if (tx.version > TX_MAX_STANDARD_VERSION) {
+      return true;
+    }
+    return false;
+  }
+
+  static ANCHOR_STANDARDNESS_ACTIVATION_HEIGHT = {
+    'testnet4': 42_000,
+    'testnet': 2_900_000,
+    'signet': 211_000,
+    '': 863_500,
+  };
+  static isNonStandardAnchor(tx: TransactionExtended, height?: number): boolean {
+    if (
+      height != null
+      && this.ANCHOR_STANDARDNESS_ACTIVATION_HEIGHT[config.MEMPOOL.NETWORK]
+      && height <= this.ANCHOR_STANDARDNESS_ACTIVATION_HEIGHT[config.MEMPOOL.NETWORK]
+    ) {
+      // anchor outputs were non-standard to spend before v28.x (scheduled for 2024/09/30 https://github.com/bitcoin/bitcoin/issues/29891)
+      return true;
+    }
+    return false;
+  }
+
   static getNonWitnessSize(tx: TransactionExtended): number {
     let weight = tx.weight;
     let hasWitness = false;
@@ -415,7 +462,7 @@ export class Common {
     return flags;
   }
 
-  static getTransactionFlags(tx: TransactionExtended): number {
+  static getTransactionFlags(tx: TransactionExtended, height?: number): number {
     let flags = tx.flags ? BigInt(tx.flags) : 0n;
 
     // Update variable flags (CPFP, RBF)
@@ -548,7 +595,7 @@ export class Common {
     if (hasFakePubkey) {
       flags |= TransactionFlags.fake_pubkey;
     }
-    
+
     // fast but bad heuristic to detect possible coinjoins
     // (at least 5 inputs and 5 outputs, less than half of which are unique amounts, with no address reuse)
     const addressReuse = Object.keys(reusedOutputAddresses).reduce((acc, key) => Math.max(acc, (reusedInputAddresses[key] || 0) + (reusedOutputAddresses[key] || 0)), 0) > 1;
@@ -564,17 +611,17 @@ export class Common {
       flags |= TransactionFlags.batch_payout;
     }
 
-    if (this.isNonStandard(tx)) {
+    if (this.isNonStandard(tx, height)) {
       flags |= TransactionFlags.nonstandard;
     }
 
     return Number(flags);
   }
 
-  static classifyTransaction(tx: TransactionExtended): TransactionClassified {
+  static classifyTransaction(tx: TransactionExtended, height?: number): TransactionClassified {
     let flags = 0;
     try {
-      flags = Common.getTransactionFlags(tx);
+      flags = Common.getTransactionFlags(tx, height);
     } catch (e) {
       logger.warn('Failed to add classification flags to transaction: ' + (e instanceof Error ? e.message : e));
     }
@@ -585,8 +632,8 @@ export class Common {
     };
   }
 
-  static classifyTransactions(txs: TransactionExtended[]): TransactionClassified[] {
-    return txs.map(Common.classifyTransaction);
+  static classifyTransactions(txs: TransactionExtended[], height?: number): TransactionClassified[] {
+    return txs.map(tx => Common.classifyTransaction(tx, height));
   }
 
   static stripTransaction(tx: TransactionExtended): TransactionStripped {

backend/src/api/cpfp.ts

@@ -6,7 +6,7 @@ import { Acceleration } from './acceleration/acceleration';
 const CPFP_UPDATE_INTERVAL = 60_000; // update CPFP info at most once per 60s per transaction
 const MAX_CLUSTER_ITERATIONS = 100;
 
-export function calculateFastBlockCpfp(height: number, transactions: TransactionExtended[], saveRelatives: boolean = false): CpfpSummary {
+export function calculateFastBlockCpfp(height: number, transactions: MempoolTransactionExtended[], saveRelatives: boolean = false): CpfpSummary {
   const clusters: CpfpCluster[] = []; // list of all cpfp clusters in this block
   const clusterMap: { [txid: string]: CpfpCluster } = {}; // map transactions to their cpfp cluster
   let clusterTxs: TransactionExtended[] = []; // working list of elements of the current cluster
@@ -93,6 +93,7 @@ export function calculateFastBlockCpfp(height: number, transactions: Transaction
   return {
     transactions,
     clusters,
+    version: 1,
   };
 }
 
@@ -159,6 +160,7 @@ export function calculateGoodBlockCpfp(height: number, transactions: MempoolTran
   return {
     transactions: transactions.map(tx => txMap[tx.txid]),
     clusters: clusterArray,
+    version: 2,
   };
 }
 

backend/src/api/database-migration.ts

@@ -7,7 +7,7 @@ import cpfpRepository from '../repositories/CpfpRepository';
 import { RowDataPacket } from 'mysql2';
 
 class DatabaseMigration {
-  private static currentVersion = 80;
+  private static currentVersion = 82;
   private queryTimeout = 3600_000;
   private statisticsAddedIndexed = false;
   private uniqueLogs: string[] = [];
@@ -653,9 +653,11 @@ class DatabaseMigration {
       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'`);
+      if (isBitcoin === true) {
+        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);
     }
@@ -691,6 +693,18 @@ class DatabaseMigration {
       await this.$executeQuery('ALTER TABLE `blocks` ADD coinbase_addresses JSON DEFAULT NULL');
       await this.updateToSchemaVersion(80);
     }
+
+    if (databaseSchemaVersion < 81 && isBitcoin === true) {
+      await this.$executeQuery('ALTER TABLE `blocks_audits` ADD version INT NOT NULL DEFAULT 0');
+      await this.$executeQuery('ALTER TABLE `blocks_audits` ADD INDEX `version` (`version`)');
+      await this.$executeQuery('ALTER TABLE `blocks_audits` ADD unseen_txs JSON DEFAULT "[]"');
+      await this.updateToSchemaVersion(81);
+    }
+
+    if (databaseSchemaVersion < 82 && isBitcoin === true && config.MEMPOOL.NETWORK === 'mainnet') {
+      await this.$fixBadV1AuditBlocks();
+      await this.updateToSchemaVersion(82);
+    }
   }
 
   /**
@@ -1305,6 +1319,28 @@ class DatabaseMigration {
       logger.warn(`Failed to migrate cpfp transaction data`);
     }
   }
+
+  private async $fixBadV1AuditBlocks(): Promise<void> {
+    const badBlocks = [
+      '000000000000000000011ad49227fc8c9ba0ca96ad2ebce41a862f9a244478dc',
+      '000000000000000000010ac1f68b3080153f2826ffddc87ceffdd68ed97d6960',
+      '000000000000000000024cbdafeb2660ae8bd2947d166e7fe15d1689e86b2cf7',
+      '00000000000000000002e1dbfbf6ae057f331992a058b822644b368034f87286',
+      '0000000000000000000019973b2778f08ad6d21e083302ff0833d17066921ebb',
+    ];
+
+    for (const hash of badBlocks) {
+      try {
+        await this.$executeQuery(`
+          UPDATE blocks_audits
+          SET prioritized_txs = '[]'
+          WHERE hash = '${hash}'
+        `, true);
+      } catch (e) {
+        continue;
+      }
+    }
+  }
 }
 
 export default new DatabaseMigration();

backend/src/api/mempool-blocks.ts

@@ -453,6 +453,7 @@ class MempoolBlocks {
             mempoolTx.acceleration = true;
             mempoolTx.acceleratedBy = isAcceleratedBy[txid] || acceleration?.pools;
             mempoolTx.acceleratedAt = acceleration?.added;
+            mempoolTx.feeDelta = acceleration?.feeDelta;
             for (const ancestor of mempoolTx.ancestors || []) {
               if (!mempool[ancestor.txid].acceleration) {
                 mempool[ancestor.txid].cpfpDirty = true;
@@ -460,6 +461,7 @@ class MempoolBlocks {
               mempool[ancestor.txid].acceleration = true;
               mempool[ancestor.txid].acceleratedBy = mempoolTx.acceleratedBy;
               mempool[ancestor.txid].acceleratedAt = mempoolTx.acceleratedAt;
+              mempool[ancestor.txid].feeDelta = mempoolTx.feeDelta;
               isAcceleratedBy[ancestor.txid] = mempoolTx.acceleratedBy;
             }
           } else {

backend/src/api/mempool.ts

@@ -396,10 +396,6 @@ class Mempool {
   }
 
   public $updateAccelerations(newAccelerations: Acceleration[]): string[] {
-    if (!config.MEMPOOL_SERVICES.ACCELERATIONS) {
-      return [];
-    }
-
     try {
       const changed: string[] = [];
 

backend/src/api/mini-miner.ts

@@ -337,7 +337,7 @@ export function makeBlockTemplate(candidates: MempoolTransactionExtended[], acce
   let failures = 0;
   while (mempoolArray.length || modified.length) {
     // skip invalid transactions
-    while (mempoolArray[0].used || mempoolArray[0].modified) {
+    while (mempoolArray[0]?.used || mempoolArray[0]?.modified) {
       mempoolArray.shift();
     }
 

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

@@ -9,6 +9,7 @@ import bitcoinClient from '../bitcoin/bitcoin-client';
 import mining from "./mining";
 import PricesRepository from '../../repositories/PricesRepository';
 import AccelerationRepository from '../../repositories/AccelerationRepository';
+import accelerationApi from '../services/acceleration';
 
 class MiningRoutes {
   public initRoutes(app: Application) {
@@ -29,6 +30,7 @@ class MiningRoutes {
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fee-rates/:interval', this.$getHistoricalBlockFeeRates)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/sizes-weights/:interval', this.$getHistoricalBlockSizeAndWeight)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/difficulty-adjustments/:interval', this.$getDifficultyAdjustments)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'mining/difficulty-adjustment/:height', this.$getDifficultyAdjustment)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/predictions/:interval', this.$getHistoricalBlocksHealth)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/audit/scores', this.$getBlockAuditScores)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/audit/scores/:height', this.$getBlockAuditScores)
@@ -41,6 +43,8 @@ class MiningRoutes {
       .get(config.MEMPOOL.API_URL_PREFIX + 'accelerations/block/:height', this.$getAccelerationsByHeight)
       .get(config.MEMPOOL.API_URL_PREFIX + 'accelerations/recent/:interval', this.$getRecentAccelerations)
       .get(config.MEMPOOL.API_URL_PREFIX + 'accelerations/total', this.$getAccelerationTotals)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'accelerations', this.$getActiveAccelerations)
+      .post(config.MEMPOOL.API_URL_PREFIX + 'acceleration/request/:txid', this.$requestAcceleration)
     ;
   }
 
@@ -294,6 +298,18 @@ class MiningRoutes {
     }
   }
 
+  private async $getDifficultyAdjustment(req: Request, res: Response) {
+    try {
+      const adjustment = await DifficultyAdjustmentsRepository.$getAdjustmentAtHeight(parseInt(req.params.height, 10));
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.json(adjustment);
+    } catch (e) {
+      res.status(e instanceof Error && e.message === 'not found' ? 204 : 500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
   private async $getRewardStats(req: Request, res: Response) {
     try {
       const response = await mining.$getRewardStats(parseInt(req.params.blockCount, 10));
@@ -445,6 +461,33 @@ class MiningRoutes {
       res.status(500).send(e instanceof Error ? e.message : e);
     }
   }
+
+  private async $getActiveAccelerations(req: Request, res: Response): Promise<void> {
+    try {
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
+      if (!config.MEMPOOL_SERVICES.ACCELERATIONS || ['testnet', 'signet', 'liquidtestnet', 'liquid'].includes(config.MEMPOOL.NETWORK)) {
+        res.status(400).send('Acceleration data is not available.');
+        return;
+      }
+      res.status(200).send(accelerationApi.accelerations || []);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $requestAcceleration(req: Request, res: Response): Promise<void> {
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Cache-control', 'private, no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0');
+    res.setHeader('expires', -1);
+    try {
+      accelerationApi.accelerationRequested(req.params.txid);
+      res.status(200).send();
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
 }
 
 export default new MiningRoutes();

backend/src/api/services/acceleration.ts

@@ -1,8 +1,10 @@
 import config from '../../config';
 import logger from '../../logger';
-import { BlockExtended, PoolTag } from '../../mempool.interfaces';
+import { BlockExtended } from '../../mempool.interfaces';
 import axios from 'axios';
 
+type MyAccelerationStatus = 'requested' | 'accelerating' | 'done';
+
 export interface Acceleration {
   txid: string,
   added: number,
@@ -35,18 +37,91 @@ export interface AccelerationHistory {
 };
 
 class AccelerationApi {
-  public async $fetchAccelerations(): Promise<Acceleration[] | null> {
-    if (config.MEMPOOL_SERVICES.ACCELERATIONS) {
-      try {
-        const response = await axios.get(`${config.MEMPOOL_SERVICES.API}/accelerator/accelerations`, { responseType: 'json', timeout: 10000 });
-        return response.data as Acceleration[];
-      } catch (e) {
-        logger.warn('Failed to fetch current accelerations from the mempool services backend: ' + (e instanceof Error ? e.message : e));
-        return null;
+  private onDemandPollingEnabled = !config.MEMPOOL_SERVICES.ACCELERATIONS;
+  private apiPath = config.MEMPOOL.OFFICIAL ? (config.MEMPOOL_SERVICES.API + '/accelerator/accelerations') : (config.EXTERNAL_DATA_SERVER.MEMPOOL_API + '/accelerations');
+  private _accelerations: Acceleration[] | null = null;
+  private lastPoll = 0;
+  private forcePoll = false;
+  private myAccelerations: Record<string, { status: MyAccelerationStatus, added: number, acceleration?: Acceleration }> = {};
+
+  public get accelerations(): Acceleration[] | null {
+    return this._accelerations;
+  }
+
+  public countMyAccelerationsWithStatus(filter: MyAccelerationStatus): number {
+    return Object.values(this.myAccelerations).reduce((count, {status}) => { return count + (status === filter ? 1 : 0); }, 0);
+  }
+
+  public accelerationRequested(txid: string): void {
+    if (this.onDemandPollingEnabled) {
+      this.myAccelerations[txid] = { status: 'requested', added: Date.now() };
+    }
+  }
+
+  public accelerationConfirmed(): void {
+    this.forcePoll = true;
+  }
+
+  private async $fetchAccelerations(): Promise<Acceleration[] | null> {
+    try {
+      const response = await axios.get(this.apiPath, { responseType: 'json', timeout: 10000 });
+      return response?.data || [];
+    } catch (e) {
+      logger.warn('Failed to fetch current accelerations from the mempool services backend: ' + (e instanceof Error ? e.message : e));
+      return null;
+    }
+  }
+
+  public async $updateAccelerations(): Promise<Acceleration[] | null> {
+    if (!this.onDemandPollingEnabled) {
+      const accelerations = await this.$fetchAccelerations();
+      if (accelerations) {
+        this._accelerations = accelerations;
+        return this._accelerations;
       }
     } else {
-      return [];
+      return this.$updateAccelerationsOnDemand();
     }
+    return null;
+  }
+
+  private async $updateAccelerationsOnDemand(): Promise<Acceleration[] | null> {
+    const shouldUpdate = this.forcePoll
+      || this.countMyAccelerationsWithStatus('requested') > 0
+      || (this.countMyAccelerationsWithStatus('accelerating') > 0 && this.lastPoll < (Date.now() - (10 * 60 * 1000)));
+
+    // update accelerations if necessary
+    if (shouldUpdate) {
+      const accelerations = await this.$fetchAccelerations();
+      this.lastPoll = Date.now();
+      this.forcePoll = false;
+      if (accelerations) {
+        const latestAccelerations: Record<string, Acceleration> = {};
+        // set relevant accelerations to 'accelerating'
+        for (const acc of accelerations) {
+          if (this.myAccelerations[acc.txid]) {
+            latestAccelerations[acc.txid] = acc;
+            this.myAccelerations[acc.txid] = { status: 'accelerating', added: Date.now(), acceleration: acc };
+          }
+        }
+        // txs that are no longer accelerating are either confirmed or canceled, so mark for expiry
+        for (const [txid, { status, acceleration }] of Object.entries(this.myAccelerations)) {
+          if (status === 'accelerating' && !latestAccelerations[txid]) {
+            this.myAccelerations[txid] = { status: 'done', added: Date.now(), acceleration };
+          }
+        }
+      }
+    }
+
+    // clear expired accelerations (confirmed / failed / not accepted) after 10 minutes
+    for (const [txid, { status, added }] of Object.entries(this.myAccelerations)) {
+      if (['requested', 'done'].includes(status) && added < (Date.now() - (1000 * 60 * 10))) {
+        delete this.myAccelerations[txid];
+      }
+    }
+
+    this._accelerations = Object.values(this.myAccelerations).map(({ acceleration }) => acceleration).filter(acc => acc) as Acceleration[];
+    return this._accelerations;
   }
 
   public async $fetchAccelerationHistory(page?: number, status?: string): Promise<AccelerationHistory[] | null> {

backend/src/api/transaction-utils.ts

@@ -338,6 +338,87 @@ class TransactionUtils {
     const positionOfScript = hasAnnex ? witness.length - 3 : witness.length - 2;
     return witness[positionOfScript];
   }
+
+  // calculate the most parsimonious set of prioritizations given a list of block transactions
+  // (i.e. the most likely prioritizations and deprioritizations)
+  public identifyPrioritizedTransactions(transactions: any[], rateKey: string): { prioritized: string[], deprioritized: string[] } {
+    // find the longest increasing subsequence of transactions
+    // (adapted from https://en.wikipedia.org/wiki/Longest_increasing_subsequence#Efficient_algorithms)
+    // should be O(n log n)
+    const X = transactions.slice(1).reverse().map((tx) => ({ txid: tx.txid, rate: tx[rateKey] })); // standard block order is by *decreasing* effective fee rate, but we want to iterate in increasing order (and skip the coinbase)
+    if (X.length < 2) {
+      return { prioritized: [], deprioritized: [] };
+    }
+    const N = X.length;
+    const P: number[] = new Array(N);
+    const M: number[] = new Array(N + 1);
+    M[0] = -1; // undefined so can be set to any value
+
+    let L = 0;
+    for (let i = 0; i < N; i++) {
+      // Binary search for the smallest positive l ≤ L
+      // such that X[M[l]].effectiveFeePerVsize > X[i].effectiveFeePerVsize
+      let lo = 1;
+      let hi = L + 1;
+      while (lo < hi) {
+        const mid = lo + Math.floor((hi - lo) / 2); // lo <= mid < hi
+        if (X[M[mid]].rate > X[i].rate) {
+          hi = mid;
+        } else { // if X[M[mid]].effectiveFeePerVsize < X[i].effectiveFeePerVsize
+          lo = mid + 1;
+        }
+      }
+
+      // After searching, lo == hi is 1 greater than the
+      // length of the longest prefix of X[i]
+      const newL = lo;
+
+      // The predecessor of X[i] is the last index of
+      // the subsequence of length newL-1
+      P[i] = M[newL - 1];
+      M[newL] = i;
+
+      if (newL > L) {
+        // If we found a subsequence longer than any we've
+        // found yet, update L
+        L = newL;
+      }
+    }
+
+    // Reconstruct the longest increasing subsequence
+    // It consists of the values of X at the L indices:
+    // ..., P[P[M[L]]], P[M[L]], M[L]
+    const LIS: any[] = new Array(L);
+    let k = M[L];
+    for (let j = L - 1; j >= 0; j--) {
+      LIS[j] = X[k];
+      k = P[k];
+    }
+
+    const lisMap = new Map<string, number>();
+    LIS.forEach((tx, index) => lisMap.set(tx.txid, index));
+
+    const prioritized: string[] = [];
+    const deprioritized: string[] = [];
+
+    let lastRate = X[0].rate;
+
+    for (const tx of X) {
+      if (lisMap.has(tx.txid)) {
+        lastRate = tx.rate;
+      } else {
+        if (Math.abs(tx.rate - lastRate) < 0.1) {
+          // skip if the rate is almost the same as the previous transaction
+        } else if (tx.rate <= lastRate) {
+          prioritized.push(tx.txid);
+        } else {
+          deprioritized.push(tx.txid);
+        }
+      }
+    }
+
+    return { prioritized, deprioritized };
+  }
 }
 
 export default new TransactionUtils();

backend/src/api/websocket-handler.ts

@@ -3,7 +3,7 @@ import * as WebSocket from 'ws';
 import {
   BlockExtended, TransactionExtended, MempoolTransactionExtended, WebsocketResponse,
   OptimizedStatistic, ILoadingIndicators, GbtCandidates, TxTrackingInfo,
-  MempoolBlockDelta, MempoolDelta, MempoolDeltaTxids
+  MempoolDelta, MempoolDeltaTxids
 } from '../mempool.interfaces';
 import blocks from './blocks';
 import memPool from './mempool';
@@ -538,9 +538,9 @@ class WebsocketHandler {
     }
 
     if (config.MEMPOOL.RUST_GBT) {
-      await mempoolBlocks.$rustUpdateBlockTemplates(transactionIds, newMempool, added, removed, candidates, config.MEMPOOL_SERVICES.ACCELERATIONS);
+      await mempoolBlocks.$rustUpdateBlockTemplates(transactionIds, newMempool, added, removed, candidates, true);
     } else {
-      await mempoolBlocks.$updateBlockTemplates(transactionIds, newMempool, added, removed, candidates, accelerationDelta, true, config.MEMPOOL_SERVICES.ACCELERATIONS);
+      await mempoolBlocks.$updateBlockTemplates(transactionIds, newMempool, added, removed, candidates, accelerationDelta, true, true);
     }
 
     const mBlocks = mempoolBlocks.getMempoolBlocks();
@@ -823,6 +823,7 @@ class WebsocketHandler {
               accelerated: mempoolTx.acceleration || undefined,
               acceleratedBy: mempoolTx.acceleratedBy || undefined,
               acceleratedAt: mempoolTx.acceleratedAt || undefined,
+              feeDelta: mempoolTx.feeDelta || undefined,
             },
             accelerationPositions: memPool.getAccelerationPositions(mempoolTx.txid),
           };
@@ -864,6 +865,7 @@ class WebsocketHandler {
               accelerated: mempoolTx.acceleration || undefined,
               acceleratedBy: mempoolTx.acceleratedBy || undefined,
               acceleratedAt: mempoolTx.acceleratedAt || undefined,
+              feeDelta: mempoolTx.feeDelta || undefined,
             };
             if (!mempoolTx.cpfpChecked) {
               calculateMempoolTxCpfp(mempoolTx, newMempool);
@@ -931,6 +933,8 @@ class WebsocketHandler {
       throw new Error('No WebSocket.Server have been set');
     }
 
+    const blockTransactions = structuredClone(transactions);
+
     this.printLogs();
     await statistics.runStatistics();
 
@@ -940,7 +944,7 @@ class WebsocketHandler {
     let transactionIds: string[] = (memPool.limitGBT) ? Object.keys(candidates?.txs || {}) : Object.keys(_memPool);
 
     const accelerations = Object.values(mempool.getAccelerations());
-    await accelerationRepository.$indexAccelerationsForBlock(block, accelerations, transactions);
+    await accelerationRepository.$indexAccelerationsForBlock(block, accelerations, structuredClone(transactions));
 
     const rbfTransactions = Common.findMinedRbfTransactions(transactions, memPool.getSpendMap());
     memPool.handleMinedRbfTransactions(rbfTransactions);
@@ -949,22 +953,18 @@ class WebsocketHandler {
     if (config.MEMPOOL.AUDIT && memPool.isInSync()) {
       let projectedBlocks;
       const auditMempool = _memPool;
-      const isAccelerated = config.MEMPOOL_SERVICES.ACCELERATIONS && accelerationApi.isAcceleratedBlock(block, Object.values(mempool.getAccelerations()));
+      const isAccelerated = accelerationApi.isAcceleratedBlock(block, Object.values(mempool.getAccelerations()));
 
-      if ((config.MEMPOOL_SERVICES.ACCELERATIONS)) {
-        if (config.MEMPOOL.RUST_GBT) {
-          const added = memPool.limitGBT ? (candidates?.added || []) : [];
-          const removed = memPool.limitGBT ? (candidates?.removed || []) : [];
-          projectedBlocks = await mempoolBlocks.$rustUpdateBlockTemplates(transactionIds, auditMempool, added, removed, candidates, isAccelerated, block.extras.pool.id);
-        } else {
-          projectedBlocks = await mempoolBlocks.$makeBlockTemplates(transactionIds, auditMempool, candidates, false, isAccelerated, block.extras.pool.id);
-        }
+      if (config.MEMPOOL.RUST_GBT) {
+        const added = memPool.limitGBT ? (candidates?.added || []) : [];
+        const removed = memPool.limitGBT ? (candidates?.removed || []) : [];
+        projectedBlocks = await mempoolBlocks.$rustUpdateBlockTemplates(transactionIds, auditMempool, added, removed, candidates, isAccelerated, block.extras.pool.id);
       } else {
-        projectedBlocks = mempoolBlocks.getMempoolBlocksWithTransactions();
+        projectedBlocks = await mempoolBlocks.$makeBlockTemplates(transactionIds, auditMempool, candidates, false, isAccelerated, block.extras.pool.id);
       }
 
       if (Common.indexingEnabled()) {
-        const { censored, added, prioritized, fresh, sigop, fullrbf, accelerated, score, similarity } = Audit.auditBlock(transactions, projectedBlocks, auditMempool);
+        const { unseen, censored, added, prioritized, fresh, sigop, fullrbf, accelerated, score, similarity } = Audit.auditBlock(block.height, blockTransactions, projectedBlocks, auditMempool);
         const matchRate = Math.round(score * 100 * 100) / 100;
 
         const stripped = projectedBlocks[0]?.transactions ? projectedBlocks[0].transactions : [];
@@ -986,9 +986,11 @@ class WebsocketHandler {
         });
 
         BlocksAuditsRepository.$saveAudit({
+          version: 1,
           time: block.timestamp,
           height: block.height,
           hash: block.id,
+          unseenTxs: unseen,
           addedTxs: added,
           prioritizedTxs: prioritized,
           missingTxs: censored,
@@ -1040,7 +1042,7 @@ class WebsocketHandler {
       const removed = memPool.limitGBT ? (candidates?.removed || []) : transactions;
       await mempoolBlocks.$rustUpdateBlockTemplates(transactionIds, _memPool, added, removed, candidates, true);
     } else {
-      await mempoolBlocks.$makeBlockTemplates(transactionIds, _memPool, candidates, true, config.MEMPOOL_SERVICES.ACCELERATIONS);
+      await mempoolBlocks.$makeBlockTemplates(transactionIds, _memPool, candidates, true, true);
     }
     const mBlocks = mempoolBlocks.getMempoolBlocks();
     const mBlockDeltas = mempoolBlocks.getMempoolBlockDeltas();
@@ -1142,6 +1144,7 @@ class WebsocketHandler {
                 accelerated: mempoolTx.acceleration || undefined,
                 acceleratedBy: mempoolTx.acceleratedBy || undefined,
                 acceleratedAt: mempoolTx.acceleratedAt || undefined,
+                feeDelta: mempoolTx.feeDelta || undefined,
               },
               accelerationPositions: memPool.getAccelerationPositions(mempoolTx.txid),
             });
@@ -1164,6 +1167,7 @@ class WebsocketHandler {
                 accelerated: mempoolTx.acceleration || undefined,
                 acceleratedBy: mempoolTx.acceleratedBy || undefined,
                 acceleratedAt: mempoolTx.acceleratedAt || undefined,
+                feeDelta: mempoolTx.feeDelta || undefined,
               };
             }
           }

backend/src/index.ts

@@ -229,7 +229,7 @@ class Server {
       const newMempool = await bitcoinApi.$getRawMempool();
       const minFeeMempool = memPool.limitGBT ? await bitcoinSecondClient.getRawMemPool() : null;
       const minFeeTip = memPool.limitGBT ? await bitcoinSecondClient.getBlockCount() : -1;
-      const newAccelerations = await accelerationApi.$fetchAccelerations();
+      const newAccelerations = await accelerationApi.$updateAccelerations();
       const numHandledBlocks = await blocks.$updateBlocks();
       const pollRate = config.MEMPOOL.POLL_RATE_MS * (indexer.indexerIsRunning() ? 10 : 1);
       if (numHandledBlocks === 0) {

backend/src/indexer.ts

@@ -10,6 +10,7 @@ import config from './config';
 import auditReplicator from './replication/AuditReplication';
 import statisticsReplicator from './replication/StatisticsReplication';
 import AccelerationRepository from './repositories/AccelerationRepository';
+import BlocksAuditsRepository from './repositories/BlocksAuditsRepository';
 
 export interface CoreIndex {
   name: string;
@@ -192,6 +193,7 @@ class Indexer {
       await auditReplicator.$sync();
       await statisticsReplicator.$sync();
       await AccelerationRepository.$indexPastAccelerations();
+      await BlocksAuditsRepository.$migrateAuditsV0toV1();
       // do not wait for classify blocks to finish
       blocks.$classifyBlocks();
     } catch (e) {

backend/src/mempool.interfaces.ts

@@ -29,9 +29,11 @@ export interface PoolStats extends PoolInfo {
 }
 
 export interface BlockAudit {
+  version: number,
   time: number,
   height: number,
   hash: string,
+  unseenTxs: string[],
   missingTxs: string[],
   freshTxs: string[],
   sigopTxs: string[],
@@ -126,6 +128,7 @@ export interface TransactionExtended extends IEsploraApi.Transaction {
   acceleration?: boolean;
   acceleratedBy?: number[];
   acceleratedAt?: number;
+  feeDelta?: number;
   replacement?: boolean;
   uid?: number;
   flags?: number;
@@ -382,8 +385,9 @@ export interface CpfpCluster {
 }
 
 export interface CpfpSummary {
-  transactions: TransactionExtended[];
+  transactions: MempoolTransactionExtended[];
   clusters: CpfpCluster[];
+  version: number;
 }
 
 export interface Statistic {
@@ -449,7 +453,7 @@ export interface OptimizedStatistic {
 
 export interface TxTrackingInfo {
   replacedBy?: string,
-  position?: { block: number, vsize: number, accelerated?: boolean, acceleratedBy?: number[], acceleratedAt?: number },
+  position?: { block: number, vsize: number, accelerated?: boolean, acceleratedBy?: number[], acceleratedAt?: number, feeDelta?: number },
   cpfp?: {
     ancestors?: Ancestor[],
     bestDescendant?: Ancestor | null,
@@ -462,6 +466,7 @@ export interface TxTrackingInfo {
   accelerated?: boolean,
   acceleratedBy?: number[],
   acceleratedAt?: number,
+  feeDelta?: number,
   confirmed?: boolean
 }
 

backend/src/replication/AuditReplication.ts

@@ -31,11 +31,11 @@ class AuditReplication {
     const missingAudits = await this.$getMissingAuditBlocks();
 
     logger.debug(`Fetching missing audit data for ${missingAudits.length} blocks from trusted servers`, 'Replication');
-    
+
     let totalSynced = 0;
     let totalMissed = 0;
     let loggerTimer = Date.now();
-    // process missing audits in batches of 
+    // process missing audits in batches of BATCH_SIZE
     for (let i = 0; i < missingAudits.length; i += BATCH_SIZE) {
       const slice = missingAudits.slice(i, i + BATCH_SIZE);
       const results = await Promise.all(slice.map(hash => this.$syncAudit(hash)));
@@ -109,9 +109,11 @@ class AuditReplication {
       version: 1,
     });
     await blocksAuditsRepository.$saveAudit({
+      version: auditSummary.version || 0,
       hash: blockHash,
       height: auditSummary.height,
       time: auditSummary.timestamp || auditSummary.time,
+      unseenTxs: auditSummary.unseenTxs || [],
       missingTxs: auditSummary.missingTxs || [],
       addedTxs: auditSummary.addedTxs || [],
       prioritizedTxs: auditSummary.prioritizedTxs || [],

backend/src/repositories/AccelerationRepository.ts

@@ -192,6 +192,7 @@ class AccelerationRepository {
     }
   }
 
+  // modifies block transactions
   public async $indexAccelerationsForBlock(block: BlockExtended, accelerations: Acceleration[], transactions: MempoolTransactionExtended[]): Promise<void> {
     const blockTxs: { [txid: string]: MempoolTransactionExtended } = {};
     for (const tx of transactions) {
@@ -213,6 +214,15 @@ class AccelerationRepository {
         this.$saveAcceleration(accelerationInfo, block, block.extras.pool.id, successfulAccelerations);
       }
     }
+    let anyConfirmed = false;
+    for (const acc of accelerations) {
+      if (blockTxs[acc.txid]) {
+        anyConfirmed = true;
+      }
+    }
+    if (anyConfirmed) {
+      accelerationApi.accelerationConfirmed();
+    }
     const lastSyncedHeight = await this.$getLastSyncedHeight();
     // if we've missed any blocks, let the indexer catch up from the last synced height on the next run
     if (block.height === lastSyncedHeight + 1) {

backend/src/repositories/BlocksAuditsRepository.ts

@@ -1,13 +1,24 @@
-import blocks from '../api/blocks';
 import DB from '../database';
 import logger from '../logger';
-import { BlockAudit, AuditScore, TransactionAudit } from '../mempool.interfaces';
+import bitcoinApi from '../api/bitcoin/bitcoin-api-factory';
+import { BlockAudit, AuditScore, TransactionAudit, TransactionStripped } from '../mempool.interfaces';
+
+interface MigrationAudit {
+  version: number,
+  height: number,
+  id: string,
+  timestamp: number,
+  prioritizedTxs: string[],
+  acceleratedTxs: string[],
+  template: TransactionStripped[],
+  transactions: TransactionStripped[],
+}
 
 class BlocksAuditRepositories {
   public async $saveAudit(audit: BlockAudit): Promise<void> {
     try {
-      await DB.query(`INSERT INTO blocks_audits(time, height, hash, missing_txs, added_txs, prioritized_txs, fresh_txs, sigop_txs, fullrbf_txs, accelerated_txs, match_rate, expected_fees, expected_weight)
-        VALUE (FROM_UNIXTIME(?), ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [audit.time, audit.height, audit.hash, JSON.stringify(audit.missingTxs),
+      await DB.query(`INSERT INTO blocks_audits(version, time, height, hash, unseen_txs, missing_txs, added_txs, prioritized_txs, fresh_txs, sigop_txs, fullrbf_txs, accelerated_txs, match_rate, expected_fees, expected_weight)
+        VALUE (?, FROM_UNIXTIME(?), ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [audit.version, audit.time, audit.height, audit.hash, JSON.stringify(audit.unseenTxs), JSON.stringify(audit.missingTxs),
           JSON.stringify(audit.addedTxs), JSON.stringify(audit.prioritizedTxs), JSON.stringify(audit.freshTxs), JSON.stringify(audit.sigopTxs), JSON.stringify(audit.fullrbfTxs), JSON.stringify(audit.acceleratedTxs), audit.matchRate, audit.expectedFees, audit.expectedWeight]);
     } catch (e: any) {
       if (e.errno === 1062) { // ER_DUP_ENTRY - This scenario is possible upon node backend restart
@@ -62,24 +73,30 @@ class BlocksAuditRepositories {
   public async $getBlockAudit(hash: string): Promise<BlockAudit | null> {
     try {
       const [rows]: any[] = await DB.query(
-        `SELECT blocks_audits.height, blocks_audits.hash as id, UNIX_TIMESTAMP(blocks_audits.time) as timestamp,
-        template,
-        missing_txs as missingTxs,
-        added_txs as addedTxs,
-        prioritized_txs as prioritizedTxs,
-        fresh_txs as freshTxs,
-        sigop_txs as sigopTxs,
-        fullrbf_txs as fullrbfTxs,
-        accelerated_txs as acceleratedTxs,
-        match_rate as matchRate,
-        expected_fees as expectedFees,
-        expected_weight as expectedWeight
+        `SELECT
+          blocks_audits.version,
+          blocks_audits.height,
+          blocks_audits.hash as id,
+          UNIX_TIMESTAMP(blocks_audits.time) as timestamp,
+          template,
+          unseen_txs as unseenTxs,
+          missing_txs as missingTxs,
+          added_txs as addedTxs,
+          prioritized_txs as prioritizedTxs,
+          fresh_txs as freshTxs,
+          sigop_txs as sigopTxs,
+          fullrbf_txs as fullrbfTxs,
+          accelerated_txs as acceleratedTxs,
+          match_rate as matchRate,
+          expected_fees as expectedFees,
+          expected_weight as expectedWeight
         FROM blocks_audits
         JOIN blocks_templates ON blocks_templates.id = blocks_audits.hash
         WHERE blocks_audits.hash = ?
       `, [hash]);
       
       if (rows.length) {
+        rows[0].unseenTxs = JSON.parse(rows[0].unseenTxs);
         rows[0].missingTxs = JSON.parse(rows[0].missingTxs);
         rows[0].addedTxs = JSON.parse(rows[0].addedTxs);
         rows[0].prioritizedTxs = JSON.parse(rows[0].prioritizedTxs);
@@ -101,7 +118,7 @@ class BlocksAuditRepositories {
   public async $getBlockTxAudit(hash: string, txid: string): Promise<TransactionAudit | null> {
     try {
       const blockAudit = await this.$getBlockAudit(hash);
-      
+
       if (blockAudit) {
         const isAdded = blockAudit.addedTxs.includes(txid);
         const isPrioritized = blockAudit.prioritizedTxs.includes(txid);
@@ -115,16 +132,17 @@ class BlocksAuditRepositories {
             firstSeen = tx.time;
           }
         });
+        const wasSeen = blockAudit.version === 1 ? !blockAudit.unseenTxs.includes(txid) : (isExpected || isPrioritized || isAccelerated);
 
         return {
-          seen: isExpected || isPrioritized || isAccelerated,
+          seen: wasSeen,
           expected: isExpected,
-          added: isAdded,
+          added: isAdded && (blockAudit.version === 0 || !wasSeen),
           prioritized: isPrioritized,
           conflict: isConflict,
           accelerated: isAccelerated,
           firstSeen,
-        }
+        };
       }
       return null;
     } catch (e: any) {
@@ -186,6 +204,96 @@ class BlocksAuditRepositories {
       throw e;
     }
   }
+
+  /**
+   * [INDEXING] Migrate audits from v0 to v1
+   */
+  public async $migrateAuditsV0toV1(): Promise<void> {
+    try {
+      let done = false;
+      let processed = 0;
+      let lastHeight;
+      while (!done) {
+        const [toMigrate]: MigrationAudit[][] = await DB.query(
+          `SELECT
+            blocks_audits.height as height,
+            blocks_audits.hash as id,
+            UNIX_TIMESTAMP(blocks_audits.time) as timestamp,
+            blocks_summaries.transactions as transactions,
+            blocks_templates.template as template,
+            blocks_audits.prioritized_txs as prioritizedTxs,
+            blocks_audits.accelerated_txs as acceleratedTxs
+          FROM blocks_audits
+          JOIN blocks_summaries ON blocks_summaries.id = blocks_audits.hash
+          JOIN blocks_templates ON blocks_templates.id = blocks_audits.hash
+          WHERE blocks_audits.version = 0
+          AND blocks_summaries.version = 2
+          ORDER BY blocks_audits.height DESC
+          LIMIT 100
+        `) as any[];
+
+        if (toMigrate.length <= 0 || lastHeight === toMigrate[0].height) {
+          done = true;
+          break;
+        }
+        lastHeight = toMigrate[0].height;
+
+        logger.info(`migrating ${toMigrate.length} audits to version 1`);
+
+        for (const audit of toMigrate) {
+          // unpack JSON-serialized transaction lists
+          audit.transactions = JSON.parse((audit.transactions as any as string) || '[]');
+          audit.template = JSON.parse((audit.template as any as string) || '[]');
+
+          // we know transactions in the template, or marked "prioritized" or "accelerated"
+          // were seen in our mempool before the block was mined.
+          const isSeen = new Set<string>();
+          for (const tx of audit.template) {
+            isSeen.add(tx.txid);
+          }
+          for (const txid of audit.prioritizedTxs) {
+            isSeen.add(txid);
+          }
+          for (const txid of audit.acceleratedTxs) {
+            isSeen.add(txid);
+          }
+          const unseenTxs = audit.transactions.slice(0).map(tx => tx.txid).filter(txid => !isSeen.has(txid));
+
+          // identify "prioritized" transactions
+          const prioritizedTxs: string[] = [];
+          let lastEffectiveRate = 0;
+          // Iterate over the mined template from bottom to top (excluding the coinbase)
+          // Transactions should appear in ascending order of mining priority.
+          for (let i = audit.transactions.length - 1; i > 0; i--) {
+            const blockTx = audit.transactions[i];
+            // If a tx has a lower in-band effective fee rate than the previous tx,
+            // it must have been prioritized out-of-band (in order to have a higher mining priority)
+            // so exclude from the analysis.
+            if ((blockTx.rate || 0) < lastEffectiveRate) {
+              prioritizedTxs.push(blockTx.txid);
+            } else {
+              lastEffectiveRate = blockTx.rate || 0;
+            }
+          }
+
+          // Update audit in the database
+          await DB.query(`
+            UPDATE blocks_audits SET
+              version = ?,
+              unseen_txs = ?,
+              prioritized_txs = ?
+            WHERE hash = ?
+          `, [1, JSON.stringify(unseenTxs), JSON.stringify(prioritizedTxs), audit.id]);
+        }
+
+        processed += toMigrate.length;
+      }
+
+      logger.info(`migrated ${processed} audits to version 1`);
+    } catch (e: any) {
+      logger.err(`Error while migrating audits from v0 to v1. Will try again later. Reason: ` + (e instanceof Error ? e.message : e));
+    }
+  }
 }
 
 export default new BlocksAuditRepositories();

backend/src/repositories/BlocksRepository.ts

@@ -1106,7 +1106,7 @@ class BlocksRepository {
         let summaryVersion = 0;
         if (config.MEMPOOL.BACKEND === 'esplora') {
           const txs = (await bitcoinApi.$getTxsForBlock(dbBlk.id)).map(tx => transactionUtils.extendTransaction(tx));
-          summary = blocks.summarizeBlockTransactions(dbBlk.id, txs);
+          summary = blocks.summarizeBlockTransactions(dbBlk.id, dbBlk.height, txs);
           summaryVersion = 1;
         } else {
           // Call Core RPC

backend/src/repositories/DifficultyAdjustmentsRepository.ts

@@ -88,6 +88,22 @@ class DifficultyAdjustmentsRepository {
     }
   }
 
+  public async $getAdjustmentAtHeight(height: number): Promise<IndexedDifficultyAdjustment> {
+    try {
+      if (isNaN(height)) {
+        throw new Error(`argument must be a number`);
+      }
+      const [rows] = await DB.query(`SELECT * FROM difficulty_adjustments WHERE height = ?`, [height]);
+      if (!rows[0]) {
+        throw new Error(`not found`);
+      }
+      return rows[0] as IndexedDifficultyAdjustment;
+    } catch (e: any) {
+      logger.err(`Cannot get difficulty adjustment from the database. Reason: ${e instanceof Error ? e.message : e}`, logger.tags.mining);
+      throw e;
+    }
+  }
+
   public async $getAdjustmentsHeights(): Promise<number[]> {
     try {
       const [rows]: any[] = await DB.query(`SELECT height FROM difficulty_adjustments`);

backend/src/utils/bitcoin-script.ts

@@ -158,7 +158,7 @@ export function parseMultisigScript(script: string): void | { m: number, n: numb
   if (!opN) {
     return;
   }
-  if (!opN.startsWith('OP_PUSHNUM_')) {
+  if (opN !== 'OP_0' && !opN.startsWith('OP_PUSHNUM_')) {
     return;
   }
   const n = parseInt(opN.match(/[0-9]+/)?.[0] || '', 10);
@@ -178,7 +178,7 @@ export function parseMultisigScript(script: string): void | { m: number, n: numb
   if (!opM) {
     return;
   }
-  if (!opM.startsWith('OP_PUSHNUM_')) {
+  if (opM !== 'OP_0' && !opM.startsWith('OP_PUSHNUM_')) {
     return;
   }
   const m = parseInt(opM.match(/[0-9]+/)?.[0] || '', 10);

docker/backend/start.sh

@@ -144,7 +144,7 @@ __REPLICATION_STATISTICS_START_TIME__=${REPLICATION_STATISTICS_START_TIME:=14819
 __REPLICATION_SERVERS__=${REPLICATION_SERVERS:=[]}
 
 # MEMPOOL_SERVICES
-__MEMPOOL_SERVICES_API__=${MEMPOOL_SERVICES_API:=""}
+__MEMPOOL_SERVICES_API__=${MEMPOOL_SERVICES_API:="https://mempool.space/api/v1/services"}
 __MEMPOOL_SERVICES_ACCELERATIONS__=${MEMPOOL_SERVICES_ACCELERATIONS:=false}
 
 # REDIS

docker/frontend/entrypoint.sh

@@ -40,7 +40,8 @@ __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}
-__SERVICES_API__=${SERVICES_API:=false}
+__ACCELERATOR_BUTTON__=${ACCELERATOR_BUTTON:=true}
+__SERVICES_API__=${SERVICES_API:=https://mempool.space/api/v1/services}
 __PUBLIC_ACCELERATIONS__=${PUBLIC_ACCELERATIONS:=false}
 __HISTORICAL_PRICE__=${HISTORICAL_PRICE:=true}
 __ADDITIONAL_CURRENCIES__=${ADDITIONAL_CURRENCIES:=false}
@@ -70,6 +71,7 @@ export __MAINNET_BLOCK_AUDIT_START_HEIGHT__
 export __TESTNET_BLOCK_AUDIT_START_HEIGHT__
 export __SIGNET_BLOCK_AUDIT_START_HEIGHT__
 export __ACCELERATOR__
+export __ACCELERATOR_BUTTON__
 export __SERVICES_API__
 export __PUBLIC_ACCELERATIONS__
 export __HISTORICAL_PRICE__

frontend/README.md

@@ -33,7 +33,7 @@ $ npm run config:defaults:liquid
 
 ### 3. Run the Frontend
 
-_Make sure to use Node.js 16.10 and npm 7._
+_Make sure to use Node.js 20.x and npm 9.x or newer._
 
 Install project dependencies and run the frontend server:
 
@@ -70,7 +70,7 @@ Set up the [Mempool backend](../backend/) first, if you haven't already.
 
 ### 1. Build the Frontend
 
-_Make sure to use Node.js 16.10 and npm 7._
+_Make sure to use Node.js 20.x and npm 9.x or newer._
 
 Build the frontend:
 

frontend/angular.json

@@ -54,6 +54,10 @@
             "translation": "src/locale/messages.fr.xlf",
             "baseHref": "/fr/"
           },
+          "hr": {
+            "translation": "src/locale/messages.hr.xlf",
+            "baseHref": "/hr/"
+          },
           "ja": {
             "translation": "src/locale/messages.ja.xlf",
             "baseHref": "/ja/"

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

@@ -543,16 +543,7 @@ describe('Mainnet', () => {
           }
         });
 
-        cy.get('.alert').should('be.visible');
-        cy.get('.alert').invoke('css', 'width').then((alertWidth) => {
-          cy.get('.container-xl > :nth-child(3)').invoke('css', 'width').should('equal', alertWidth);
-        });
-
-        cy.get('.btn-warning').then(getRectangle).then((rectA) => {
-          cy.get('.alert').then(getRectangle).then((rectB) => {
-            expect(areOverlapping(rectA, rectB), 'Confirmations box and RBF alert are overlapping').to.be.false;
-          });
-        });
+        cy.get('.alert-replaced').should('be.visible');
       });
 
       it('shows RBF transactions properly (desktop)', () => {

frontend/cypress/fixtures/mainnet_mempoolInfo.json

@@ -750,7 +750,7 @@
     },
     "backendInfo": {
       "hostname": "node205.tk7.mempool.space",
-      "version": "3.0.0-dev",
+      "version": "3.1.0-dev",
       "gitCommit": "abbc8a134",
       "lightning": false
     },

frontend/mempool-frontend-config.sample.json

@@ -25,6 +25,7 @@
   "HISTORICAL_PRICE": true,
   "ADDITIONAL_CURRENCIES": false,
   "ACCELERATOR": false,
+  "ACCELERATOR_BUTTON": true,
   "PUBLIC_ACCELERATIONS": false,
   "SERVICES_API": "https://mempool.space/api/v1/services"
 }

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mempool-frontend",
-  "version": "3.0.0-dev",
+  "version": "3.1.0-dev",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "mempool-frontend",
-      "version": "3.0.0-dev",
+      "version": "3.1.0-dev",
       "license": "GNU Affero General Public License v3.0",
       "dependencies": {
         "@angular-devkit/build-angular": "^17.3.1",
@@ -32,6 +32,7 @@
         "bootstrap": "~4.6.2",
         "browserify": "^17.0.0",
         "clipboard": "^2.0.11",
+        "cypress": "^13.14.0",
         "domino": "^2.1.6",
         "echarts": "~5.5.0",
         "esbuild": "^0.23.0",
@@ -42,7 +43,7 @@
         "rxjs": "~7.8.1",
         "tinyify": "^4.0.0",
         "tlite": "^0.1.9",
-        "tslib": "~2.6.0",
+        "tslib": "~2.7.0",
         "zone.js": "~0.14.4"
       },
       "devDependencies": {
@@ -62,7 +63,7 @@
       "optionalDependencies": {
         "@cypress/schematic": "^2.5.0",
         "@types/cypress": "^1.1.3",
-        "cypress": "^13.13.0",
+        "cypress": "^13.14.0",
         "cypress-fail-on-console-error": "~5.1.0",
         "cypress-wait-until": "^2.0.1",
         "mock-socket": "~9.3.1",
@@ -699,6 +700,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/@angular-devkit/build-angular/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/@angular-devkit/build-webpack": {
       "version": "0.1703.1",
       "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1703.1.tgz",
@@ -8040,13 +8046,13 @@
       "peer": true
     },
     "node_modules/cypress": {
-      "version": "13.13.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.13.0.tgz",
-      "integrity": "sha512-ou/MQUDq4tcDJI2FsPaod2FZpex4kpIK43JJlcBgWrX8WX7R/05ZxGTuxedOuZBfxjZxja+fbijZGyxiLP6CFA==",
+      "version": "13.14.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.14.0.tgz",
+      "integrity": "sha512-r0+nhd033x883YL6068futewUsl02Q7rWiinyAAIBDW/OOTn+UMILWgNuCiY3vtJjd53efOqq5R9dctQk/rKiw==",
       "hasInstallScript": true,
       "optional": true,
       "dependencies": {
-        "@cypress/request": "^3.0.0",
+        "@cypress/request": "^3.0.1",
         "@cypress/xvfb": "^1.2.4",
         "@types/sinonjs__fake-timers": "8.1.1",
         "@types/sizzle": "^2.3.2",
@@ -8805,9 +8811,9 @@
       "integrity": "sha512-XzWNH4ZSa9BwVUQSDorPWAUQ5WGuYz7zJUNpNif40zFCiCl20t8zgylmreNmn26h5kiyw2lg7RfTmeMBsDklqg=="
     },
     "node_modules/elliptic": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "version": "6.5.7",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.7.tgz",
+      "integrity": "sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==",
       "dependencies": {
         "bn.js": "^4.11.9",
         "brorand": "^1.1.0",
@@ -16925,9 +16931,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
     },
     "node_modules/tuf-js": {
       "version": "2.2.0",
@@ -18849,6 +18855,11 @@
           "requires": {
             "lru-cache": "^6.0.0"
           }
+        },
+        "tslib": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
         }
       }
     },
@@ -24127,12 +24138,12 @@
       "peer": true
     },
     "cypress": {
-      "version": "13.13.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.13.0.tgz",
-      "integrity": "sha512-ou/MQUDq4tcDJI2FsPaod2FZpex4kpIK43JJlcBgWrX8WX7R/05ZxGTuxedOuZBfxjZxja+fbijZGyxiLP6CFA==",
+      "version": "13.14.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.14.0.tgz",
+      "integrity": "sha512-r0+nhd033x883YL6068futewUsl02Q7rWiinyAAIBDW/OOTn+UMILWgNuCiY3vtJjd53efOqq5R9dctQk/rKiw==",
       "optional": true,
       "requires": {
-        "@cypress/request": "^3.0.0",
+        "@cypress/request": "^3.0.1",
         "@cypress/xvfb": "^1.2.4",
         "@types/sinonjs__fake-timers": "8.1.1",
         "@types/sizzle": "^2.3.2",
@@ -24723,9 +24734,9 @@
       "integrity": "sha512-XzWNH4ZSa9BwVUQSDorPWAUQ5WGuYz7zJUNpNif40zFCiCl20t8zgylmreNmn26h5kiyw2lg7RfTmeMBsDklqg=="
     },
     "elliptic": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "version": "6.5.7",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.7.tgz",
+      "integrity": "sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==",
       "requires": {
         "bn.js": "^4.11.9",
         "brorand": "^1.1.0",
@@ -30763,9 +30774,9 @@
       }
     },
     "tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
     },
     "tuf-js": {
       "version": "2.2.0",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-frontend",
-  "version": "3.0.0-dev",
+  "version": "3.1.0-dev",
   "description": "Bitcoin mempool visualizer and blockchain explorer backend",
   "license": "GNU Affero General Public License v3.0",
   "homepage": "https://mempool.space",
@@ -95,7 +95,7 @@
     "esbuild": "^0.23.0",
     "tinyify": "^4.0.0",
     "tlite": "^0.1.9",
-    "tslib": "~2.6.0",
+    "tslib": "~2.7.0",
     "zone.js": "~0.14.4"
   },
   "devDependencies": {
@@ -115,7 +115,7 @@
   "optionalDependencies": {
     "@cypress/schematic": "^2.5.0",
     "@types/cypress": "^1.1.3",
-    "cypress": "^13.13.0",
+    "cypress": "^13.14.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

@@ -9,6 +9,7 @@ import { StatusViewComponent } from './components/status-view/status-view.compon
 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';
+import { TrackerGuard } from './route-guards';
 
 const browserWindow = window || {};
 // @ts-ignore
@@ -140,16 +141,17 @@ let routes: Routes = [
     loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
     data: { preload: true },
   },
+  {
+    path: 'tx',
+    canMatch: [TrackerGuard],
+    runGuardsAndResolvers: 'always',
+    loadChildren: () => import('./components/tracker/tracker.module').then(m => m.TrackerModule),
+  },
   {
     path: '',
     loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
     data: { preload: true },
   },
-  {
-    path: 'tracker',
-    data: { networkSpecific: true },
-    loadChildren: () => import('./components/tracker/tracker.module').then(m => m.TrackerModule),
-  },
   {
     path: 'wallet',
     children: [],
@@ -213,10 +215,6 @@ let routes: Routes = [
     loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
     data: { preload: true },
   },
-  {
-    path: '**',
-    redirectTo: ''
-  },
 ];
 
 if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
@@ -301,13 +299,16 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
       loadChildren: () => import('./liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
       data: { preload: true },
     },
-    {
-      path: '**',
-      redirectTo: ''
-    },
   ];
 }
 
+if (!window['isMempoolSpaceBuild']) {
+  routes.push({
+    path: '**',
+    redirectTo: ''
+  });
+}
+
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     initialNavigation: 'enabledBlocking',

frontend/src/app/app.constants.ts

@@ -151,7 +151,7 @@ export const languages: Language[] = [
    { code: 'fr', name: 'Français' },        // French
 // { code: 'gl', name: 'Galego' },          // Galician
    { code: 'ko', name: '한국어' },          // Korean
-// { code: 'hr', name: 'Hrvatski' },        // Croatian
+   { code: 'hr', name: 'Hrvatski' },        // Croatian
 // { code: 'id', name: 'Bahasa Indonesia' },// Indonesian
    { code: 'hi', name: 'हिन्दी' },             // Hindi
    { code: 'ne', name: 'नेपाली' },            // Nepalese

frontend/src/app/bitcoin.utils.ts

@@ -135,7 +135,7 @@ export function parseMultisigScript(script: string): void | { m: number, n: numb
     return;
   }
   const opN = ops.pop();
-  if (!opN.startsWith('OP_PUSHNUM_')) {
+  if (opN !== 'OP_0' && !opN.startsWith('OP_PUSHNUM_')) {
     return;
   }
   const n = parseInt(opN.match(/[0-9]+/)[0], 10);
@@ -152,7 +152,7 @@ export function parseMultisigScript(script: string): void | { m: number, n: numb
     }
   }
   const opM = ops.pop();
-  if (!opM.startsWith('OP_PUSHNUM_')) {
+  if (opM !== 'OP_0' && !opM.startsWith('OP_PUSHNUM_')) {
     return;
   }
   const m = parseInt(opM.match(/[0-9]+/)[0], 10);

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

@@ -53,7 +53,7 @@
         <span>Spiral</span>
       </a>
       <a href="https://foundrydigital.com/" target="_blank" title="Foundry">
-        <svg xmlns="http://www.w3.org/2000/svg" id="b" data-name="Layer 2" style="zoom: 1;" width="32" height="76" viewBox="0 0 32 76">
+        <svg xmlns="http://www.w3.org/2000/svg" id="b" data-name="Layer 2" style="zoom: 1;" width="32" height="76" viewBox="0 0 32 76" class="image">
           <defs>
             <style>
               .d {
@@ -125,7 +125,9 @@
         <span>Blockstream</span>
       </a>
       <a href="https://unchained.com/" target="_blank" title="Unchained">
-        <svg id="Layer_1" width="78" height="78" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156.68 156.68"><defs><style>.cls-unchained-1{fill:#fff;}</style></defs><path class="cls-unchained-1" d="m78.34,0C35.07,0,0,35.07,0,78.34s35.07,78.34,78.34,78.34,78.34-35.07,78.34-78.34S121.6,0,78.34,0ZM20.23,109.5c-4.99-9.28-7.81-19.89-7.81-31.16C12.42,41.93,41.93,12.42,78.34,12.42c33.15,0,60.58,24.46,65.23,56.32h-37.48c-45.29,0-71.19,20.05-85.85,40.76Zm58.11,34.76c-12.42,0-24.04-3.44-33.96-9.41,3.94-8.85,9.11-18.7,15.84-28.9,20.99-31.8,52.2-31.19,76.49-31.19h7.45c.06,1.18.1,2.38.1,3.58,0,36.41-29.51,65.92-65.92,65.92Z"/><path class="cls-unchained-1" d="m91.98,42.4l-3.62-1.18c-3.94-1.29-7.03-4.38-8.32-8.32l-1.18-3.63c-.13-.39-.68-.39-.81,0l-1.18,3.63c-1.29,3.94-4.38,7.03-8.32,8.32l-3.62,1.18c-.39.13-.39.68,0,.81l3.62,1.18c3.94,1.29,7.03,4.38,8.32,8.32l1.18,3.63c.13.39.68.39.81,0l1.18-3.63c1.29-3.94,4.38-7.03,8.32-8.32l3.62-1.18c.39-.13.39-.68,0-.81Z"/></svg>
+        <svg id="Layer_1" width="78" height="78" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156.68 156.68" class="image">
+          <defs><style>.cls-unchained-1{fill:#fff;}</style></defs><path class="cls-unchained-1" d="m78.34,0C35.07,0,0,35.07,0,78.34s35.07,78.34,78.34,78.34,78.34-35.07,78.34-78.34S121.6,0,78.34,0ZM20.23,109.5c-4.99-9.28-7.81-19.89-7.81-31.16C12.42,41.93,41.93,12.42,78.34,12.42c33.15,0,60.58,24.46,65.23,56.32h-37.48c-45.29,0-71.19,20.05-85.85,40.76Zm58.11,34.76c-12.42,0-24.04-3.44-33.96-9.41,3.94-8.85,9.11-18.7,15.84-28.9,20.99-31.8,52.2-31.19,76.49-31.19h7.45c.06,1.18.1,2.38.1,3.58,0,36.41-29.51,65.92-65.92,65.92Z"/><path class="cls-unchained-1" d="m91.98,42.4l-3.62-1.18c-3.94-1.29-7.03-4.38-8.32-8.32l-1.18-3.63c-.13-.39-.68-.39-.81,0l-1.18,3.63c-1.29,3.94-4.38,7.03-8.32,8.32l-3.62,1.18c-.39.13-.39.68,0,.81l3.62,1.18c3.94,1.29,7.03,4.38,8.32,8.32l1.18,3.63c.13.39.68.39.81,0l1.18-3.63c1.29-3.94,4.38-7.03,8.32-8.32l3.62-1.18c.39-.13.39-.68,0-.81Z"/>
+        </svg>
         <span>Unchained</span>
       </a>
       <a href="https://gemini.com/" target="_blank" title="Gemini">
@@ -150,7 +152,7 @@
         <span>Bull Bitcoin</span>
       </a>
       <a href="https://exodus.com/" target="_blank" title="Exodus">
-        <svg width="80" height="80" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg width="80" height="80" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg" class="image">
           <circle cx="250" cy="250" r="250" fill="#1F2033"/>
           <g clip-path="url(#clip0_2_14)">
             <path d="M411.042 178.303L271.79 87V138.048L361.121 196.097L350.612 229.351H271.79V271.648H350.612L361.121 304.903L271.79 362.952V414L411.042 322.989L388.271 250.646L411.042 178.303Z" fill="url(#paint0_linear_2_14)"/>
@@ -435,7 +437,7 @@
       Trademark Notice<br>
     </div>
     <p>
-      The Mempool Open Source Project&reg;, Mempool Accelerator&trade;, Mempool Enterprise&reg;, Mempool Liquidity&trade;, mempool.space&reg;, Be your own explorer&trade;, Explore the full Bitcoin ecosystem&reg;, Mempool Goggles&trade;, the mempool logo, the mempool Square logo, the mempool Blocks logo, the mempool Blocks 3 | 2 logo, the mempool.space Vertical Logo, and the mempool.space Horizontal logo are either registered trademarks or trademarks of Mempool Space K.K in Japan, the United States, and/or other countries.
+      The Mempool Open Source Project&reg;, Mempool Accelerator&trade;, Mempool Enterprise&reg;, Mempool Liquidity&trade;, mempool.space&reg;, Be your own explorer&trade;, Explore the full Bitcoin ecosystem&reg;, Mempool Goggles&trade;, the mempool Logo, the mempool Square Logo, the mempool block visualization Logo, the mempool Blocks Logo, the mempool transaction Logo, the mempool Blocks 3 | 2 Logo, the mempool research Logo, the mempool.space Vertical Logo, and the mempool.space Horizontal Logo are either registered trademarks or trademarks of Mempool Space K.K in Japan, the United States, and/or other countries.
     </p>
     <p>
       While our software is available under an open source software license, the copyright license does not include an implied right or license to use our trademarks. See our <a href="https://mempool.space/trademark-policy">Trademark Policy and Guidelines</a> for more details, published on &lt;https://mempool.space/trademark-policy&gt;.

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

@@ -13,8 +13,6 @@
 
   .image.not-rounded {
     border-radius: 0;
-    width: 60px;
-    height: 60px;
   }
 
   .intro {
@@ -158,9 +156,8 @@
           margin: 40px 29px 10px;
           &.image.coldcard {
             border-radius: 0;
-            width: auto;
-            max-height: 50px;
-            margin: 40px 29px 14px 29px;
+            height: auto;
+            margin: 20px 29px 20px;
           }
         }
       }

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

@@ -389,16 +389,30 @@
                   </div>
                 }
               </div>
-              @if (canPayWithCashapp) {
+              @if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay) {
                 <div class="col-sm text-center flex-grow-0  d-flex flex-column justify-content-center align-items-center">
                   <p class="text-nowrap">&mdash;<span i18n="or">OR</span>&mdash;</p>
                 </div>
               }
             }
-            @if (canPayWithCashapp) {
+            @if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay) {
               <div class="col-sm text-center d-flex flex-column justify-content-center align-items-center">
                 <p><ng-container i18n="transaction.pay|Pay button label">Pay</ng-container>&nbsp;<app-fiat [value]="cost"></app-fiat> with</p>
-                <img class="paymentMethod mx-2" src="/resources/cash-app.svg" height=55 (click)="moveToStep('cashapp')">
+                @if (canPayWithCashapp) {
+                  <img class="paymentMethod mx-2" style="width: 200px" src="/resources/cash-app.svg" height=55 (click)="moveToStep('cashapp')">
+                }
+                @if (canPayWithApplePay) {
+                  @if (canPayWithCashapp) { <span class="mt-1 mb-1"></span> }
+                  <div class="paymentMethod mx-2" style="width: 200px; height: 55px" (click)="moveToStep('applepay')">
+                    <img src="/resources/apple-pay.png" height=37>
+                  </div>
+                }
+                @if (canPayWithGooglePay) {
+                  @if (canPayWithCashapp || canPayWithApplePay) { <span class="mt-1 mb-1"></span> }
+                  <div class="paymentMethod mx-2" style="width: 200px; height: 55px" (click)="moveToStep('googlepay')">
+                    <img src="/resources/google-pay.png" height=37>
+                  </div>
+                }
               </div>
             }
           </div>
@@ -421,9 +435,9 @@
         <button type="button" class="mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style="width: 200px" (click)="moveToStep('summary')" i18n="go-back">Go back</button>
       </div>
     </div>
-  } @else if (step === 'cashapp') {
+  } @else if (step === 'cashapp' || step === 'applepay' || step === 'googlepay') {
     <!-- Show checkout page -->
-    <div class="row mb-md-1 text-center">
+    <div class="row mb-md-1 text-center" id="confirm-title">
       <div class="col-sm" id="confirm-payment-title">
         <h1 style="font-size: larger;"><ng-content select="[slot='checkout-title']"></ng-content><span class="default-slot" i18n="accelerator.confirm-your-payment">Confirm your payment</span></h1>
       </div>
@@ -437,7 +451,7 @@
       </div>
     </div>
 
-    @if (!loadingCashapp) {
+    @if (step === 'cashapp' && !loadingCashapp || step === 'applepay' && !loadingApplePay || step === 'googlepay' && !loadingGooglePay) {
       <div class="row text-center mt-1">
         <div class="col-sm">
           <div class="form-group w-100">
@@ -456,8 +470,14 @@
     <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) {
+          @if (step === 'applepay') {
+            <div id="apple-pay-button" class="apple-pay-button apple-pay-button-black" style="height: 50px"  [style]="loadingApplePay ? 'opacity: 0; width: 0px; height: 0px; pointer-events: none;' : ''"></div>
+          } @else if (step === 'cashapp') {          
+            <div id="cash-app-pay" class="d-inline-block" style="height: 50px" [style]="loadingCashapp ? 'opacity: 0; width: 0px; height: 0px; pointer-events: none;' : ''"></div>
+          } @else if (step === 'googlepay') {
+            <div id="google-pay-button" class="d-inline-block" style="height: 50px" [style]="loadingGooglePay ? 'opacity: 0; width: 0px; height: 0px; pointer-events: none;' : ''"></div>
+          }
+          @if (loadingCashapp || loadingApplePay || loadingGooglePay) {
           <div display="d-flex flex-row justify-content-center">
             <span i18n="accelerator.loading-payment-method">Loading payment method...</span>
             <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
@@ -505,7 +525,7 @@
       <div class="col-sm">
         <div class="d-flex flex-row flex-column justify-content-center align-items-center">
           <span i18n="accelerator.confirming-acceleration-with-miners">Confirming your acceleration with our mining pool partners...</span>
-          @if (timeSincePaid > 20000) {
+          @if (timeSincePaid > 30000) {
             <span i18n="accelerator.confirming-acceleration-with-miners">...sorry, this is taking longer than expected...</span>
           }
           <div class="m-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
@@ -549,7 +569,7 @@
   <button type="button" *ngIf="advancedEnabled" class="btn btn-sm btn-outline-info btn-small-height ml-2" (click)="moveToStep('quote')" i18n="accelerator.customize">customize</button>
 </ng-template>
 
-<ng-template #accelerateTo let-x i18n="accelerator.accelerate-to-x">Accelerate to ~{{ x | number : '1.0-0' }} sat/vB</ng-template>
+<ng-template id="accelerate-to" #accelerateTo let-x i18n="accelerator.accelerate-to-x">Accelerate to ~{{ x | number : '1.0-0' }} sat/vB</ng-template>
 
 <ng-template #accelerateButton>
   <div class="position-relative">

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

@@ -11,8 +11,7 @@
 .paymentMethod {
   padding: 10px;
   background-color: var(--secondary);
-  border-radius: 15px;
-  border: 2px solid var(--bg);
+  border-radius: 10px;
   cursor: pointer;
 }
 
@@ -202,4 +201,19 @@
 
 .btn-error-wrapper {
   height: 26px;
+}
+
+.apple-pay-button {
+    display: inline-block;
+    -webkit-appearance: -apple-pay-button;
+    -apple-pay-button-type: plain; /* Use any supported button type. */
+}
+.apple-pay-button-black {
+    -apple-pay-button-style: black;
+}
+.apple-pay-button-white {
+    -apple-pay-button-style: white;
+}
+.apple-pay-button-white-with-line {
+    -apple-pay-button-style: white-outline;
 }

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

@@ -1,7 +1,8 @@
+/* eslint-disable no-console */
 import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef, SimpleChanges, HostListener } from '@angular/core';
 import { Subscription, tap, of, catchError, Observable, switchMap } from 'rxjs';
 import { ServicesApiServices } from '../../services/services-api.service';
-import { nextRoundNumber, insecureRandomUUID } from '../../shared/common.utils';
+import { md5, insecureRandomUUID } from '../../shared/common.utils';
 import { StateService } from '../../services/state.service';
 import { AudioService } from '../../services/audio.service';
 import { ETA, EtaService } from '../../services/eta.service';
@@ -9,8 +10,10 @@ import { Transaction } from '../../interfaces/electrs.interface';
 import { MiningStats } from '../../services/mining.service';
 import { IAuth, AuthServiceMempool } from '../../services/auth.service';
 import { EnterpriseService } from '../../services/enterprise.service';
+import { ApiService } from '../../services/api.service';
+import { isDevMode } from '@angular/core';
 
-export type PaymentMethod = 'balance' | 'bitcoin' | 'cashapp';
+export type PaymentMethod = 'balance' | 'bitcoin' | 'cashapp' | 'applePay' | 'googlePay';
 
 export type AccelerationEstimate = {
   hasAccess: boolean;
@@ -23,7 +26,7 @@ export type AccelerationEstimate = {
   mempoolBaseFee: number;
   vsizeFee: number;
   pools: number[];
-  availablePaymentMethods: {[method: string]: {min: number, max: number}};
+  availablePaymentMethods: Record<PaymentMethod, {min: number, max: number}>;
   unavailable?: boolean;
   options: { // recommended bid options
     fee: number; // recommended userBid in sats
@@ -46,7 +49,7 @@ export const MIN_BID_RATIO = 1;
 export const DEFAULT_BID_RATIO = 2;
 export const MAX_BID_RATIO = 4;
 
-type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'processing' | 'paid' | 'success';
+type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'applepay' | 'googlepay' | 'processing' | 'paid' | 'success';
 
 @Component({
   selector: 'app-accelerate-checkout',
@@ -60,6 +63,8 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   @Input() eta: ETA;
   @Input() scrollEvent: boolean;
   @Input() cashappEnabled: boolean = true;
+  @Input() applePayEnabled: boolean = false;
+  @Input() googlePayEnabled: boolean = true;
   @Input() advancedEnabled: boolean = false;
   @Input() forceMobile: boolean = false;
   @Input() showDetails: boolean = false;
@@ -78,17 +83,22 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   timePaid: number = 0; // time acceleration requested
   math = Math;
   isMobile: boolean = window.innerWidth <= 767.98;
+  isProdDomain = ['mempool.space',
+    'mempool-staging.va1.mempool.space',
+    'mempool-staging.fmt.mempool.space',
+    'mempool-staging.fra.mempool.space',
+    'mempool-staging.tk7.mempool.space',
+    'mempool-staging.sg1.mempool.space'
+   ].indexOf(document.location.hostname) > -1;
 
   private _step: CheckoutStep = 'summary';
   simpleMode: boolean = true;
-  paymentMethod: 'cashapp' | 'btcpay';
   timeoutTimer: any;
 
   authSubscription$: Subscription;
   auth: IAuth | null = null;
 
   // accelerator stuff
-  square: { appId: string, locationId: string};
   accelerationUUID: string;
   accelerationSubscription: Subscription;
   difficultySubscription: Subscription;
@@ -109,20 +119,22 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
 
   // square
   loadingCashapp = false;
-  cashappError = false;
-  cashappSubmit: any;
+  loadingApplePay = false;
+  loadingGooglePay = false;
   payments: any;
   cashAppPay: any;
-  cashAppSubscription: Subscription;
+  applePay: any;
+  googlePay: any;
   conversionsSubscription: Subscription;
-  conversions: any;
-  
+  conversions: Record<string, number>;
+
   // btcpay
   loadingBtcpayInvoice = false;
   invoice = undefined;
 
   constructor(
     public stateService: StateService,
+    private apiService: ApiService,
     private servicesApiService: ServicesApiServices,
     private etaService: EtaService,
     private audioService: AudioService,
@@ -131,9 +143,15 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     private enterpriseService: EnterpriseService,
   ) {
     this.accelerationUUID = insecureRandomUUID();
+
+    // Check if Apple Pay available
+    // https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/checking_for_apple_pay_availability#overview
+    if (window['ApplePaySession']) {
+      this.applePayEnabled = true;
+    }
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.authSubscription$ = this.authService.getAuth$().subscribe((auth) => {
       if (this.auth?.user?.userId !== auth?.user?.userId) {
         this.auth = auth;
@@ -158,13 +176,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       this.moveToStep('summary');
     }
 
-    this.servicesApiService.setupSquare$().subscribe(ids => {
-      this.square = {
-        appId: ids.squareAppId,
-        locationId: ids.squareLocationId
-      };
-    });
-
     this.conversionsSubscription = this.stateService.conversions$.subscribe(
       async (conversions) => {
         this.conversions = conversions;
@@ -172,7 +183,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     );
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     if (this.estimateSubscription) {
       this.estimateSubscription.unsubscribe();
     }
@@ -192,7 +203,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     }
   }
 
-  moveToStep(step: CheckoutStep) {
+  moveToStep(step: CheckoutStep): void {
     this._step = step;
     if (this.timeoutTimer) {
       clearTimeout(this.timeoutTimer);
@@ -201,6 +212,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       this.fetchEstimate();
     }
     if (this._step === 'checkout') {
+      this.insertSquare();
       this.enterpriseService.goal(8);
     }
     if (this._step === 'checkout' && this.canPayWithBitcoin) {
@@ -210,15 +222,23 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       this.requestBTCPayInvoice();
     } else if (this._step === 'cashapp' && this.cashappEnabled) {
       this.loadingCashapp = true;
-      this.insertSquare();
       this.setupSquare();
+      this.scrollToElementWithTimeout('confirm-title', 'center', 100);
+    } else if (this._step === 'applepay' && this.applePayEnabled) {
+      this.loadingApplePay = true;
+      this.setupSquare();
+      this.scrollToElementWithTimeout('confirm-title', 'center', 100);
+    } else if (this._step === 'googlepay' && this.googlePayEnabled) {
+      this.loadingGooglePay = true;
+      this.setupSquare();
+      this.scrollToElementWithTimeout('confirm-title', 'center', 100);
     } else if (this._step === 'paid') {
       this.timePaid = Date.now();
       this.timeoutTimer = setTimeout(() => {
         if (this.step === 'paid') {
           this.accelerateError = 'internal_server_error';
         }
-      }, 120000)
+      }, 120000);
     }
     this.hasDetails.emit(this._step === 'quote');
   }
@@ -229,14 +249,14 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   }
 
   /**
-  * Scroll to element id with or without setTimeout
-  */
+   * Scroll to element id with or without setTimeout
+   */
   scrollToElementWithTimeout(id: string, position: ScrollLogicalPosition, timeout: number = 1000): void {
     setTimeout(() => {
       this.scrollToElement(id, position);
     }, timeout);
   }
-  scrollToElement(id: string, position: ScrollLogicalPosition) {
+  scrollToElement(id: string, position: ScrollLogicalPosition): void {
     const acceleratePreviewAnchor = document.getElementById(id);
     if (acceleratePreviewAnchor) {
       this.cd.markForCheck();
@@ -251,7 +271,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   /**
    * Accelerator
    */
-  fetchEstimate() {
+  fetchEstimate(): void {
     if (this.estimateSubscription) {
       this.estimateSubscription.unsubscribe();
     }
@@ -315,7 +335,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
         }
       }),
 
-      catchError((response) => {
+      catchError(() => {
         this.estimate = undefined;
         this.quoteError = `cannot_accelerate_tx`;
         this.estimateSubscription.unsubscribe();
@@ -370,10 +390,11 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       this.accelerationUUID
     ).subscribe({
       next: () => {
+        this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
         this.audioService.playSound('ascend-chime-cartoon');
         this.showSuccess = true;
         this.estimateSubscription.unsubscribe();
-        this.moveToStep('paid')
+        this.moveToStep('paid');
       },
       error: (response) => {
         this.accelerateError = response.error;
@@ -385,57 +406,248 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
    * Square
    */
   insertSquare(): void {
-    //@ts-ignore
-    if (window.Square) {
+    if (!this.isProdDomain && !isDevMode()) {
+      return;
+    }
+    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';
+    if (this.isProdDomain) {
+      statsUrl = '/square/v1/square.js';
     }
 
-    (function() {
+    (function(): void {
       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 = () => {
+  setupSquare(): void {
+    if (!this.isProdDomain && !isDevMode()) {
+      return;
+    }
+    const init = (): void => {
       this.initSquare();
     };
 
-    //@ts-ignore
-    if (!window.Square) {
-      console.debug('Square.js failed to load properly. Retrying in 1 second.');
-      setTimeout(init, 1000);
+    if (!window['Square']) {
+      console.debug('Square.js failed to load properly. Retrying.');
+      setTimeout(this.setupSquare.bind(this), 100);
     } else {
       init();
     }
   }
   async initSquare(): Promise<void> {
     try {
-      //@ts-ignore
-      this.payments = window.Square.payments(this.square.appId, this.square.locationId)
-      await this.requestCashAppPayment();
+      this.servicesApiService.setupSquare$().subscribe({
+        next: async (ids) => {
+          this.payments = window['Square'].payments(ids.squareAppId, ids.squareLocationId);
+          const urlParams = new URLSearchParams(window.location.search);
+          if (this._step === 'cashapp' || urlParams.get('cash_request_id')) {
+            await this.requestCashAppPayment();
+          } else if (this._step === 'applepay') {
+            await this.requestApplePayPayment();
+          } else if (this._step === 'googlepay') {
+            await this.requestGooglePayPayment();
+          }
+        },
+        error: () => {
+          console.debug('Error loading Square Payments');
+          this.accelerateError = 'cannot_setup_square';
+        }
+      });
     } catch (e) {
       console.debug('Error loading Square Payments', e);
-      this.cashappError = true;
-      return;
+      this.accelerateError = 'cannot_setup_square';
     }
   }
-  async requestCashAppPayment() {
-    if (this.cashAppSubscription) {
-      this.cashAppSubscription.unsubscribe();
-    }
+
+  /**
+   * APPLE PAY
+   */
+  async requestApplePayPayment(): Promise<void> {
     if (this.conversionsSubscription) {
       this.conversionsSubscription.unsubscribe();
     }
-    
+
+    this.conversionsSubscription = this.stateService.conversions$.subscribe(
+      async (conversions) => {
+        this.conversions = conversions;
+        if (this.applePay) {
+          this.applePay.destroy();
+        }
+
+        const costUSD = this.cost / 100_000_000 * conversions.USD;
+        const paymentRequest = this.payments.paymentRequest({
+          countryCode: 'US',
+          currencyCode: 'USD',
+          total: {
+            amount: costUSD.toFixed(2),
+            label: 'Total',
+          },
+        });
+
+        try {
+          this.applePay = await this.payments.applePay(paymentRequest);
+          const applePayButton = document.getElementById('apple-pay-button');
+          if (!applePayButton) {
+            console.error(`Unable to find apple pay button id='apple-pay-button'`);
+            // Try again
+            setTimeout(this.requestApplePayPayment.bind(this), 500);
+            return;
+          }
+          this.loadingApplePay = false;
+          applePayButton.addEventListener('click', async event => {
+            event.preventDefault();
+            const tokenResult = await this.applePay.tokenize();
+            if (tokenResult?.status === 'OK') {
+              const card = tokenResult.details?.card;
+              if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
+                console.error(`Cannot retreive payment card details`);
+                this.accelerateError = 'apple_pay_no_card_details';
+                return;
+              }
+              const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
+              this.servicesApiService.accelerateWithApplePay$(
+                this.tx.txid,
+                tokenResult.token,
+                cardTag,
+                `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
+                this.accelerationUUID
+              ).subscribe({
+                next: () => {
+                  this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
+                  this.audioService.playSound('ascend-chime-cartoon');
+                  if (this.applePay) {
+                    this.applePay.destroy();
+                  }
+                  setTimeout(() => {
+                    this.moveToStep('paid');
+                  }, 1000);
+                },
+                error: (response) => {
+                  this.accelerateError = response.error;
+                  if (!(response.status === 403 && response.error === 'not_available')) {
+                    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);
+                  }
+                }
+              });
+            } else {
+              let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
+              if (tokenResult.errors) {
+                errorMessage += ` and errors: ${JSON.stringify(
+                  tokenResult.errors,
+                )}`;
+              }
+              throw new Error(errorMessage);
+            }
+          });
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    );
+  }
+
+  /**
+   * GOOGLE PAY
+   */
+  async requestGooglePayPayment(): Promise<void> {
+    if (this.conversionsSubscription) {
+      this.conversionsSubscription.unsubscribe();
+    }
+
+    this.conversionsSubscription = this.stateService.conversions$.subscribe(
+      async (conversions) => {
+        this.conversions = conversions;
+        if (this.googlePay) {
+          this.googlePay.destroy();
+        }
+
+        const costUSD = this.cost / 100_000_000 * conversions.USD;
+        const paymentRequest = this.payments.paymentRequest({
+          countryCode: 'US',
+          currencyCode: 'USD',
+          total: {
+            amount: costUSD.toFixed(2),
+            label: 'Total'
+          }
+        });
+        this.googlePay = await this.payments.googlePay(paymentRequest , {
+          referenceId: `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
+        });
+
+        await this.googlePay.attach(`#google-pay-button`, {
+          buttonType: 'pay',
+          buttonSizeMode: 'fill',
+        });
+        this.loadingGooglePay = false;
+
+        document.getElementById('google-pay-button').addEventListener('click', async event => {
+          event.preventDefault();
+          const tokenResult = await this.googlePay.tokenize();
+          if (tokenResult?.status === 'OK') {
+            const card = tokenResult.details?.card;
+            if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
+              console.error(`Cannot retreive payment card details`);
+              this.accelerateError = 'apple_pay_no_card_details';
+              return;
+            }
+            const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
+            this.servicesApiService.accelerateWithGooglePay$(
+              this.tx.txid,
+              tokenResult.token,
+              cardTag,
+              `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
+              this.accelerationUUID
+            ).subscribe({
+              next: () => {
+                this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
+                this.audioService.playSound('ascend-chime-cartoon');
+                if (this.googlePay) {
+                  this.googlePay.destroy();
+                }
+                setTimeout(() => {
+                  this.moveToStep('paid');
+                }, 1000);
+              },
+              error: (response) => {
+                this.accelerateError = response.error;
+                if (!(response.status === 403 && response.error === 'not_available')) {
+                  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);
+                }
+              }
+            });
+          } else {
+            let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
+            if (tokenResult.errors) {
+              errorMessage += ` and errors: ${JSON.stringify(
+                tokenResult.errors,
+              )}`;
+            }
+            throw new Error(errorMessage);
+          }
+        });
+      }
+    );
+  }
+
+  /**
+   * CASHAPP
+   */
+  async requestCashAppPayment(): Promise<void> {
+    if (this.conversionsSubscription) {
+      this.conversionsSubscription.unsubscribe();
+    }
+
     this.conversionsSubscription = this.stateService.conversions$.subscribe(
       async (conversions) => {
         this.conversions = conversions;
@@ -449,41 +661,37 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
           countryCode: 'US',
           currencyCode: 'USD',
           total: {
-            amount: costUSD.toString(),
+            amount: costUSD.toFixed(2),
             label: 'Total',
             pending: true,
-            productUrl: `${redirectHostname}/tracker/${this.tx.txid}`,
-          },
-          button: { shape: 'semiround', size: 'small', theme: 'light'}
+            productUrl: `${redirectHostname}/tx/${this.tx.txid}`,
+          }
         });
         this.cashAppPay = await this.payments.cashAppPay(paymentRequest, {
-          redirectURL: `${redirectHostname}/tracker/${this.tx.txid}`,
-          referenceId: `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
-          button: { shape: 'semiround', size: 'small', theme: 'light'}
+          redirectURL: `${redirectHostname}/tx/${this.tx.txid}`,
+          referenceId: `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`
         });
 
-        if (this.step === 'cashapp') {
-          await this.cashAppPay.attach(`#cash-app-pay`, { theme: 'light', size: 'small', shape: 'semiround' })
-        }
+        await this.cashAppPay.attach(`#cash-app-pay`, { theme: 'dark' });
         this.loadingCashapp = false;
 
-        const that = this;
-        this.cashAppPay.addEventListener('ontokenization', function (event) {
+        this.cashAppPay.addEventListener('ontokenization', event => {
           const { tokenResult, error } = event.detail;
           if (error) {
             this.accelerateError = error;
           } else if (tokenResult.status === 'OK') {
-            that.servicesApiService.accelerateWithCashApp$(
-              that.tx.txid,
+            this.servicesApiService.accelerateWithCashApp$(
+              this.tx.txid,
               tokenResult.token,
               tokenResult.details.cashAppPay.cashtag,
               tokenResult.details.cashAppPay.referenceId,
-              that.accelerationUUID
+              this.accelerationUUID
             ).subscribe({
               next: () => {
-                that.audioService.playSound('ascend-chime-cartoon');
-                if (that.cashAppPay) {
-                  that.cashAppPay.destroy();
+                this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
+                this.audioService.playSound('ascend-chime-cartoon');
+                if (this.cashAppPay) {
+                  this.cashAppPay.destroy();
                 }
                 setTimeout(() => {
                   this.moveToStep('paid');
@@ -494,7 +702,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                 }, 1000);
               },
               error: (response) => {
-                that.accelerateError = response.error;
+                this.accelerateError = response.error;
                 if (!(response.status === 403 && response.error === 'not_available')) {
                   setTimeout(() => {
                     // Reset everything by reloading the page :D, can be improved
@@ -513,7 +721,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   /**
    * BTCPay
    */
-  async requestBTCPayInvoice() {
+  async requestBTCPayInvoice(): Promise<void> {
     this.servicesApiService.generateBTCPayAcceleratorInvoice$(this.tx.txid, this.userBid).pipe(
       switchMap(response => {
         return this.servicesApiService.retreiveInvoice$(response.btcpayInvoiceId);
@@ -530,9 +738,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   }
 
   bitcoinPaymentCompleted(): void {
+    this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
     this.audioService.playSound('ascend-chime-cartoon');
     this.estimateSubscription.unsubscribe();
-    this.moveToStep('paid')
+    this.moveToStep('paid');
   }
 
   isLoggedIn(): boolean {
@@ -542,47 +751,61 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   /**
    * UI events
    */
-  selectedOptionChanged(event) {
+  selectedOptionChanged(event): void {
     this.selectedOption = event.target.id;
   }
 
-  get step() {
+  get step(): CheckoutStep {
     return this._step;
   }
 
-  get paymentMethods() {
-    return Object.keys(this.estimate?.availablePaymentMethods || {});
+  get paymentMethods(): PaymentMethod[] {
+    return Object.keys(this.estimate?.availablePaymentMethods || {}) as PaymentMethod[];
   }
 
-  get couldPayWithBitcoin() {
+  get couldPayWithBitcoin(): boolean {
     return !!this.estimate?.availablePaymentMethods?.bitcoin;
   }
 
-  get couldPayWithCashapp() {
+  get couldPayWithCashapp(): boolean {
     if (!this.cashappEnabled) {
       return false;
     }
     return !!this.estimate?.availablePaymentMethods?.cashapp;
   }
 
-  get couldPayWithBalance() {
+  get couldPayWithApplePay(): boolean {
+    if (!this.applePayEnabled) {
+      return false;
+    }
+    return !!this.estimate?.availablePaymentMethods?.applePay;
+  }
+
+  get couldPayWithGooglePay(): boolean {
+    if (!this.googlePayEnabled) {
+      return false;
+    }
+    return !!this.estimate?.availablePaymentMethods?.googlePay;
+  }
+
+  get couldPayWithBalance(): boolean {
     if (!this.hasAccessToBalanceMode) {
       return false;
     }
     return !!this.estimate?.availablePaymentMethods?.balance;
   }
 
-  get couldPay() {
-    return this.couldPayWithBalance || this.couldPayWithBitcoin || this.couldPayWithCashapp;
+  get couldPay(): boolean {
+    return this.couldPayWithBalance || this.couldPayWithBitcoin || this.couldPayWithCashapp || this.couldPayWithApplePay || this.couldPayWithGooglePay;
   }
 
-  get canPayWithBitcoin() {
+  get canPayWithBitcoin(): boolean {
     const paymentMethod = this.estimate?.availablePaymentMethods?.bitcoin;
     return paymentMethod && this.cost >= paymentMethod.min && this.cost <= paymentMethod.max;
   }
 
-  get canPayWithCashapp() {
-    if (!this.cashappEnabled || !this.conversions) {
+  get canPayWithCashapp(): boolean {
+    if (!this.cashappEnabled || !this.conversions || (!this.isProdDomain && !isDevMode())) {
       return false;
     }
 
@@ -593,11 +816,43 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
         return true;
       }
     }
-    
+
     return false;
   }
 
-  get canPayWithBalance() {
+  get canPayWithApplePay(): boolean {
+    if (!this.applePayEnabled || !this.conversions || (!this.isProdDomain && !isDevMode())) {
+      return false;
+    }
+
+    const paymentMethod = this.estimate?.availablePaymentMethods?.applePay;
+    if (paymentMethod) {
+      const costUSD = (this.cost / 100_000_000 * this.conversions.USD);
+      if (costUSD >= paymentMethod.min && costUSD <= paymentMethod.max) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  get canPayWithGooglePay(): boolean {
+    if (!this.googlePayEnabled || !this.conversions || (!this.isProdDomain && !isDevMode())) {
+      return false;
+    }
+
+    const paymentMethod = this.estimate?.availablePaymentMethods?.googlePay;
+    if (paymentMethod) {
+      const costUSD = (this.cost / 100_000_000 * this.conversions.USD);
+      if (costUSD >= paymentMethod.min && costUSD <= paymentMethod.max) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  get canPayWithBalance(): boolean {
     if (!this.hasAccessToBalanceMode) {
       return false;
     }
@@ -605,11 +860,11 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     return paymentMethod && this.cost >= paymentMethod.min && this.cost <= paymentMethod.max && this.cost <= this.estimate?.userBalance;
   }
 
-  get canPay() {
-    return this.canPayWithBalance || this.canPayWithBitcoin || this.canPayWithCashapp;
+  get canPay(): boolean {
+    return this.canPayWithBalance || this.canPayWithBitcoin || this.canPayWithCashapp || this.canPayWithApplePay || this.canPayWithGooglePay;
   }
 
-  get hasAccessToBalanceMode() {
+  get hasAccessToBalanceMode(): boolean {
     return this.isLoggedIn() && this.estimate?.hasAccess;
   }
 

frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html

@@ -0,0 +1,62 @@
+<div
+  #tooltip
+  *ngIf="accelerationInfo && tooltipPosition !== null"
+  class="acceleration-tooltip"
+  [style.left]="tooltipPosition.x + 'px'"
+  [style.top]="tooltipPosition.y + 'px'"
+>
+  <table>
+    <tbody>
+      <tr>
+        <td class="label" i18n="transaction.status|Transaction Status">Status</td>
+        <td class="value">
+          @if (accelerationInfo.status === 'seen') {
+          <span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span>
+          } @else if (accelerationInfo.status === 'accelerated') {
+          <span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span>
+          } @else if (accelerationInfo.status === 'mined') {
+          <span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
+          }
+        </td>
+      </tr>
+      <tr *ngIf="accelerationInfo.fee">
+        <td class="label" i18n="transaction.fee|Transaction fee">Fee</td>
+        <td class="value">{{ accelerationInfo.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
+      </tr>
+      <tr *ngIf="accelerationInfo.bidBoost >= 0 || accelerationInfo.feeDelta">
+        <td class="label" i18n="transaction.out-of-band-fees">Out-of-band fees</td>
+        @if (accelerationInfo.status === 'accelerated') {
+          <td class="value oobFees">{{ accelerationInfo.feeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
+        } @else {
+          <td class="value oobFees">{{ accelerationInfo.bidBoost | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
+        }
+      </tr>
+      <tr *ngIf="accelerationInfo.fee && accelerationInfo.weight">
+        @if (accelerationInfo.status === 'seen') {
+          <td class="label" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
+          <td class="value"><app-fee-rate [fee]="accelerationInfo.fee" [weight]="accelerationInfo.weight"></app-fee-rate></td>
+        } @else if (accelerationInfo.status === 'accelerated' || accelerationInfo.status === 'mined') {
+          <td class="label" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
+          @if (accelerationInfo.status === 'accelerated') {
+            <td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.feeDelta || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
+          } @else {
+            <td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.bidBoost || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
+          }
+        }
+      </tr>
+      <tr *ngIf="['accelerated', 'mined'].includes(accelerationInfo.status) && hasPoolsData()">
+        <td class="label" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td>
+        <td class="value" *ngIf="accelerationInfo.pools">
+          <ng-container *ngFor="let pool of accelerationInfo.pools">
+            <img *ngIf="accelerationInfo.poolsData[pool]" 
+              class="pool-logo" 
+              [style.opacity]="accelerationInfo?.minedByPoolUniqueId && pool !== accelerationInfo?.minedByPoolUniqueId ? '0.3' : '1'"
+              [src]="'/resources/mining-pools/' + accelerationInfo.poolsData[pool].slug + '.svg'" 
+              onError="this.src = '/resources/mining-pools/default.svg'" 
+              [alt]="'Logo of ' + pool.name + ' mining pool'">
+          </ng-container>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss

@@ -0,0 +1,39 @@
+.acceleration-tooltip {
+  position: fixed;
+  z-index: 3;
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
+  border-radius: 4px;
+  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
+  color: var(--tooltip-grey);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px 15px;
+  text-align: left;
+  pointer-events: none;
+
+  .badge.badge-accelerated {
+    background-color: var(--tertiary);
+    color: white;
+  }
+
+  .value {
+    text-align: end;
+  }
+
+  .label {
+    padding-right: 30px;
+  }
+
+  .pool-logo {
+    width: 22px;
+    height: 22px;
+    position: relative;
+    top: -1px;
+    margin-right: 3px;
+  }
+
+  .oobFees {
+    color: #905cf4;
+  }
+}

frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.ts

@@ -0,0 +1,38 @@
+import { Component, ElementRef, ViewChild, Input, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'app-acceleration-timeline-tooltip',
+  templateUrl: './acceleration-timeline-tooltip.component.html',
+  styleUrls: ['./acceleration-timeline-tooltip.component.scss'],
+})
+export class AccelerationTimelineTooltipComponent implements OnChanges {
+  @Input() accelerationInfo: any;
+  @Input() cursorPosition: { x: number, y: number };
+
+  tooltipPosition: any = null;
+
+  @ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
+
+  constructor() {}
+
+  ngOnChanges(changes): void {
+    if (changes.cursorPosition && changes.cursorPosition.currentValue) {
+      let x = Math.max(10, changes.cursorPosition.currentValue.x - 50);
+      let y = changes.cursorPosition.currentValue.y + 20;
+      if (this.tooltipElement) {
+        const elementBounds = this.tooltipElement.nativeElement.getBoundingClientRect();
+        if ((x + elementBounds.width) > (window.innerWidth - 10)) {
+          x = Math.max(0, window.innerWidth - elementBounds.width - 10);
+        }
+        if (y + elementBounds.height > (window.innerHeight - 20)) {
+          y = y - elementBounds.height - 20;
+        }
+      }
+      this.tooltipPosition = { x, y };
+    }
+  }
+
+  hasPoolsData(): boolean {
+    return Object.keys(this.accelerationInfo.poolsData).length > 0;
+  }
+}

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

@@ -26,7 +26,7 @@
         <div class="node" [id]="'confirmed'">
           <div class="acc-to-confirmed left go-faster"></div>
           <div class="shape-border waiting">
-            <div class="shape animate"></div>
+            <div class="shape"></div>
           </div>
           <div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
         </div>
@@ -58,7 +58,7 @@
       <div class="nodes">
         <div class="node" [id]="'first-seen'">
           <div class="seen-to-acc right"></div>
-          <div class="shape-border">
+          <div class="shape-border hovering" (pointerover)="onHover($event, 'seen');" (pointerout)="onBlur($event);">
             <div class="shape"></div>
           </div>
           <div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
@@ -80,7 +80,7 @@
           } @else {
           <div class="seen-to-acc right"></div>
           }
-          <div  class="shape-border">
+          <div  class="shape-border hovering" (pointerover)="onHover($event, 'accelerated');" (pointerout)="onBlur($event);">
             <div class="shape"></div>
             @if (!tx.status.confirmed) {
             <div class="connector down loading"></div>
@@ -89,14 +89,14 @@
           @if (tx.status.confirmed) {
             <div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
           }
-          <div class="time offset-left" [class.no-margin]="!tx.status.confirmed">
+          <div class="time" [class.no-margin]="!tx.status.confirmed" [class.offset-left]="!tx.status.confirmed">
             @if (!tx.status.confirmed) {
             <span i18n="transaction.audit.accelerated">Accelerated</span>{{ "" }} 
             }
             @if (useAbsoluteTime) {
             <span>{{ acceleratedAt * 1000 | date }}</span>
             } @else {
-            <app-time kind="since" [time]="acceleratedAt" [lowercaseStart]="true"></app-time>
+            <app-time kind="since" [time]="acceleratedAt" [lowercaseStart]="!tx.status.confirmed"></app-time>
             }
           </div>
         </div>
@@ -113,7 +113,10 @@
           } @else {
           <div class="seen-to-acc left"></div>
           }
-          <div class="shape-border" [class.waiting]="!tx.status.confirmed">
+          <div class="shape-border" 
+              [ngClass]="{'waiting': !tx.status.confirmed, 'hovering': tx.status.confirmed}"
+              (pointerover)="onHover($event, tx.status.confirmed ? 'mined' : null)" 
+              (pointerout)="onBlur($event);">
             <div class="shape"></div>
           </div>
           @if (tx.status.confirmed) {
@@ -130,4 +133,10 @@
       </div>
     </div>
   </div>
+
+  <app-acceleration-timeline-tooltip
+  [accelerationInfo]="hoverInfo"
+  [cursorPosition]="tooltipPosition"
+></app-acceleration-timeline-tooltip>
+
 </div>

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

@@ -152,9 +152,16 @@
         margin-bottom: -8px;
         transform: translateY(-50%);
         border-radius: 50%;
-        cursor: pointer;
         padding: 4px;
         background: transparent;
+        transition: background-color 300ms, padding 300ms;
+
+        &.hovering {
+          cursor: pointer;
+          &:hover {
+            padding: 0px;
+          }
+        }
     
         .shape {
           position: relative;

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

@@ -1,6 +1,8 @@
-import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, HostListener } from '@angular/core';
 import { ETA } from '../../services/eta.service';
 import { Transaction } from '../../interfaces/electrs.interface';
+import { Acceleration, SinglePoolStats } from '../../interfaces/node-api.interface';
+import { MiningService } from '../../services/mining.service';
 
 @Component({
   selector: 'app-acceleration-timeline',
@@ -10,6 +12,7 @@ import { Transaction } from '../../interfaces/electrs.interface';
 export class AccelerationTimelineComponent implements OnInit, OnChanges {
   @Input() transactionTime: number;
   @Input() tx: Transaction;
+  @Input() accelerationInfo: Acceleration;
   @Input() eta: ETA;
   // A mined transaction has standard ETA and accelerated ETA undefined
   // A transaction in mempool has either standardETA defined (if accelerated) or acceleratedETA defined (if not accelerated yet)
@@ -22,13 +25,25 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
   useAbsoluteTime: boolean = false;
   interval: number;
 
-  constructor() {}
+  tooltipPosition = null;
+  hoverInfo: any = null;
+  poolsData: { [id: number]: SinglePoolStats } = {};
+
+  constructor(
+    private miningService: MiningService,
+  ) {}
 
   ngOnInit(): void {
     this.acceleratedAt = this.tx.acceleratedAt ?? new Date().getTime() / 1000;
     this.now = Math.floor(new Date().getTime() / 1000);
     this.useAbsoluteTime = this.tx.status.block_time < this.now - 7 * 24 * 3600;
 
+    this.miningService.getPools().subscribe(pools => {
+      for (const pool of pools) {
+        this.poolsData[pool.unique_id] = pool;
+      }
+    });
+
     this.interval = window.setInterval(() => {
       this.now = Math.floor(new Date().getTime() / 1000);
       this.useAbsoluteTime = this.tx.status.block_time < this.now - 7 * 24 * 3600;
@@ -52,4 +67,42 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
   ngOnDestroy(): void {
     clearInterval(this.interval);
   }
+  
+  onHover(event, status: string): void {
+    if (status === 'seen') {
+      this.hoverInfo = {
+        status,
+        fee: this.tx.fee,
+        weight: this.tx.weight
+      };
+    } else if (status === 'accelerated') {
+      this.hoverInfo = {
+        status,
+        fee: this.accelerationInfo?.effectiveFee || this.tx.fee,
+        weight: this.tx.weight,
+        feeDelta: this.accelerationInfo?.feeDelta || this.tx.feeDelta,
+        pools: this.tx.acceleratedBy || this.accelerationInfo?.pools,
+        poolsData: this.poolsData
+      };
+    } else if (status === 'mined') {
+      this.hoverInfo = {
+        status,
+        fee: this.accelerationInfo?.effectiveFee,
+        weight: this.tx.weight,
+        bidBoost: this.accelerationInfo?.bidBoost,
+        minedByPoolUniqueId: this.accelerationInfo?.minedByPoolUniqueId,
+        pools: this.tx.acceleratedBy || this.accelerationInfo?.pools,
+        poolsData: this.poolsData
+      };
+    }
+  }
+
+  onBlur(event): void {
+    this.hoverInfo = null;
+  }
+
+  @HostListener('pointermove', ['$event'])
+  onPointerMove(event) {
+    this.tooltipPosition = { x: event.clientX, y: event.clientY };
+  }
 }

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

@@ -23,7 +23,7 @@ import { RelativeUrlPipe } from '../../../shared/pipes/relative-url/relative-url
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -4,8 +4,8 @@
 
   <div class="clearfix"></div>
 
-  <div class="acceleration-list" *ngIf="accelerationList$ | async as accelerations">
-    <table *ngIf="!accelerations || accelerations.length; else noData" class="table table-borderless table-fixed">
+  <div class="acceleration-list">
+    <table *ngIf="nonEmptyAccelerations; else noData" class="table table-borderless table-fixed">
       <thead>
         <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
         <ng-container *ngIf="pending">
@@ -16,11 +16,12 @@
         <ng-container *ngIf="!pending">
           <th class="fee text-right" i18n="transaction.bid-boost|Bid Boost">Bid Boost</th>
           <th class="block text-right" i18n="shared.block-title">Block</th>
+          <th class="pool text-right" i18n="mining.pool-name" *ngIf="!this.widget">Pool</th>
           <th class="status text-right" i18n="transaction.status|Transaction Status">Status</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' : ''">
+      <tbody *ngIf="accelerationList$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <tr *ngFor="let acceleration of accelerations; let i= index;">
           <td class="txid text-left">
             <a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
@@ -49,10 +50,21 @@
               <a *ngIf="acceleration.blockHeight" [routerLink]="['/block' | relativeUrl, acceleration.blockHeight]">{{ acceleration.blockHeight }}</a>
               <span *ngIf="!acceleration.blockHeight">~</span>
             </td>
+            <td class="pool text-right" *ngIf="!this.widget">
+              @if (acceleration.minedByPoolUniqueId && pools[acceleration.minedByPoolUniqueId]) {
+                <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pools[acceleration.minedByPoolUniqueId].slug]" class="badge" style="color: #FFF;padding:0;">
+                  <img class="pool-logo" [src]="'/resources/mining-pools/' + pools[acceleration.minedByPoolUniqueId].slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pools[acceleration.minedByPoolUniqueId].name + ' mining pool'">
+                  {{ pools[acceleration.minedByPoolUniqueId].name }}
+                </a>
+              } @else {
+                ~
+              }
+            </td>
             <td class="status text-right">
               <span *ngIf="acceleration.status === 'accelerating'" class="badge badge-warning" i18n="accelerator.pending">Pending</span>
-              <span *ngIf="acceleration.status.includes('completed')" class="badge badge-success" i18n="">Completed <span *ngIf="acceleration.status === 'completed_provisional'">🔄</span></span>
-              <span *ngIf="acceleration.status.includes('failed')" class="badge badge-danger" i18n="accelerator.canceled">Failed <span *ngIf="acceleration.status === 'failed_provisional'">🔄</span></span>
+              <span *ngIf="acceleration.status.includes('completed') && acceleration.minedByPoolUniqueId && pools[acceleration.minedByPoolUniqueId]" class="badge badge-success"><ng-container i18n="accelerator.completed">Completed</ng-container><span *ngIf="acceleration.status === 'completed_provisional'">&nbsp;⌛</span></span>
+              <span *ngIf="acceleration.status.includes('completed') && (!acceleration.minedByPoolUniqueId || !pools[acceleration.minedByPoolUniqueId])" class="badge badge-success"><ng-container i18n="transaction.rbf.mined">Mined</ng-container><span *ngIf="acceleration.status === 'completed_provisional'">&nbsp;⌛</span></span>
+              <span *ngIf="acceleration.status.includes('failed')" class="badge badge-danger"><ng-container i18n="accelerator.canceled">Failed</ng-container><span *ngIf="acceleration.status === 'failed_provisional'">&nbsp;⌛</span></span>
             </td>
             <td class="date text-right" *ngIf="!this.widget">
               <app-time kind="since" [time]="acceleration.added" [fastRender]="true" [showTooltip]="true"></app-time>
@@ -61,22 +73,47 @@
         </tr>
       </tbody>
       <ng-template #skeleton>
-        <tbody>
-          <tr *ngFor="let item of skeletonLines">
-            <td class="txid text-left">
-              <span class="skeleton-loader" style="max-width: 75px"></span>
-            </td>
-            <td class="fee text-right">
-              <span class="skeleton-loader" style="max-width: 75px"></span>
-            </td>
-            <td class="fee-delta text-right">
-              <span class="skeleton-loader" style="max-width: 75px"></span>
-            </td>
-            <td class="status text-right">
-              <span class="skeleton-loader" style="max-width: 75px"></span>
-            </td>
-          </tr>
-        </tbody>
+        @if (!pending) {
+          <tbody>
+            <tr *ngFor="let item of skeletonLines">
+              <td class="txid text-left">
+                <span class="skeleton-loader" style="max-width: 200px"></span>
+              </td>
+              <td class="fee text-right">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+              <td class="block text-right">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+              <td class="pool text-right" *ngIf="!this.widget">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+              <td class="status text-right">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+              <td class="date text-right" *ngIf="!this.widget">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+            </tr>
+          </tbody>
+        } @else {
+          <tbody>
+            <tr *ngFor="let item of skeletonLines">
+              <td class="txid text-left">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+              <td class="fee-rate text-right">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+              <td class="bid text-right">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+              <td class="time text-right">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+            </tr>
+          </tbody>
+        }
       </ng-template>
     </table>
 

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

@@ -12,7 +12,7 @@
   padding-bottom: 0px;
 }
 .container-xl.legacy {
-  max-width: 1140px;
+  max-width: 1200px;
 }
 .container-xl.widget-container {
   min-height: 335px;
@@ -72,9 +72,25 @@ tr, td, th {
 
 .block {
   width: 15%;
+  @media (max-width: 900px) {
+    display: none;
+  }
+}
+
+.pool {
+  width: 15%;
+  
   @media (max-width: 700px) {
     display: none;
   }
+
+  .pool-logo {
+    width: 18px;
+    height: 18px;
+    position: relative;
+    top: -1px;
+    margin-right: 2px;
+  }
 }
 
 .status {

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

@@ -1,11 +1,12 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy, Inject, LOCALE_ID } from '@angular/core';
 import { BehaviorSubject, Observable, Subscription, catchError, filter, of, switchMap, tap, throttleTime } from 'rxjs';
-import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
+import { Acceleration, BlockExtended, SinglePoolStats } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { ServicesApiServices } from '../../../services/services-api.service';
 import { SeoService } from '../../../services/seo.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { MiningService } from '../../../services/mining.service';
 
 @Component({
   selector: 'app-accelerations-list',
@@ -30,11 +31,14 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
   keyNavigationSubscription: Subscription;
   dir: 'rtl' | 'ltr' = 'ltr';
   paramSubscription: Subscription;
+  pools: { [id: number]: SinglePoolStats } = {};
+  nonEmptyAccelerations: boolean = true;
 
   constructor(
     private servicesApiService: ServicesApiServices,
     private websocketService: WebsocketService,
     public stateService: StateService,
+    private miningService: MiningService,
     private cd: ChangeDetectorRef,
     private seoService: SeoService,
     private route: ActivatedRoute,
@@ -47,6 +51,12 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.miningService.getPools().subscribe(pools => {
+      for (const pool of pools) {
+        this.pools[pool.unique_id] = pool;
+      }
+    });
+
     if (!this.widget) {
       this.websocketService.want(['blocks']);
       this.seoService.setTitle($localize`:@@02573b6980a2d611b4361a2595a4447e390058cd:Accelerations`);
@@ -106,6 +116,7 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
             for (const acc of accelerations) {
               acc.boost = acc.boostCost != null ? acc.boostCost : acc.bidBoost;
             }
+            this.nonEmptyAccelerations = accelerations.length > 0;
             if (this.widget) {
               return of(accelerations.slice(0, 6));
             } else {

frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html

@@ -1,7 +1,7 @@
 @if (chartOnly) {
   <ng-container *ngTemplateOutlet="pieChart"></ng-container>
 } @else {
-<table>
+<table style="width: 100%;">
   <tbody>
     <tr>
       <td class="td-width field-label" [class]="chartPositionLeft ? 'chart-left' : ''" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td>
@@ -11,9 +11,9 @@
       <td class="field-value" [class]="chartPositionLeft ? 'chart-left' : ''">
         <div class="effective-fee-container">
           @if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize)) {
-            <app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
+            <app-fee-rate class="oobFees" [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
           } @else {
-            <app-fee-rate [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
+            <app-fee-rate class="oobFees" [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
           }
         </div>
       </td>

frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss

@@ -61,4 +61,8 @@
   & > div, & > div > svg {
     overflow: visible !important;
   }
+}
+
+.oobFees {
+  color: #905cf4;
 }

frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts

@@ -67,12 +67,17 @@ export class ActiveAccelerationBox implements OnChanges {
 
     const acceleratingPools = (poolList || []).filter(id => pools[id]).sort((a,b) => pools[a].lastEstimatedHashrate - pools[b].lastEstimatedHashrate);
     const totalAcceleratedHashrate = acceleratingPools.reduce((total, pool) => total + pools[pool].lastEstimatedHashrate, 0);
+    // Find the first pool with at least 1% of the total network hashrate
+    const firstSignificantPool = acceleratingPools.findIndex(pool => pools[pool].lastEstimatedHashrate > this.miningStats.lastEstimatedHashrate / 100);
+    const numSignificantPools = acceleratingPools.length - firstSignificantPool;
     acceleratingPools.forEach((poolId, index) => {
       const pool = pools[poolId];
       const poolShare = ((pool.lastEstimatedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1);
       data.push(getDataItem(
         pool.lastEstimatedHashrate,
-        toRGB(lighten({ r: 147, g: 57, b: 244 }, index * .08)),
+        index >= firstSignificantPool
+          ? toRGB(lighten({ r: 147, g: 57, b: 244 }, 1 - (index - firstSignificantPool) / (numSignificantPools - 1)))
+          : 'white',
         `<b style="color: white">${pool.name} (${poolShare}%)</b>`,
         true,
       ) as PieSeriesOption);

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

@@ -0,0 +1,5 @@
+<div class="sparkles" #sparkleAnchor>
+  <div *ngFor="let sparkle of sparkles" class="sparkle" [style]="sparkle.style">
+    <span class="inner-sparkle" [style]="sparkle.rotation">+</span>
+  </div>
+</div>

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

@@ -0,0 +1,45 @@
+.sparkles {
+  position: absolute;
+  top: var(--block-size);
+  height: 50px;
+  right: 0;
+}
+
+.sparkle {
+  position: absolute;
+  color: rgba(152, 88, 255, 0.75);
+  opacity: 0;
+  transform: scale(0.8) rotate(0deg);
+  animation: pop ease 2000ms forwards, sparkle ease 500ms infinite;
+}
+
+.inner-sparkle {
+  display: block;
+}
+
+@keyframes pop {
+  0% {
+    transform: scale(0.8) rotate(0deg);
+    opacity: 0;
+  }
+  20% {
+    transform: scale(1) rotate(72deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0) rotate(360deg);
+    opacity: 0;
+  }
+}
+
+@keyframes sparkle {
+  0% {
+    color: rgba(152, 88, 255, 0.75);
+  }
+  50% {
+    color: rgba(198, 162, 255, 0.75);
+  }
+  100% {
+    color: rgba(152, 88, 255, 0.75);
+  }
+}

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

@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-acceleration-sparkles',
+  templateUrl: './acceleration-sparkles.component.html',
+  styleUrls: ['./acceleration-sparkles.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccelerationSparklesComponent implements OnChanges {
+  @Input() arrow: ElementRef<HTMLDivElement>;
+  @Input() run: boolean = false;
+
+  @ViewChild('sparkleAnchor')
+  sparkleAnchor: ElementRef<HTMLDivElement>;
+
+  constructor(
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  endTimeout: any;
+  lastSparkle: number = 0;
+  sparkleWidth: number = 0;
+  sparkles: any[] = [];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.run) {
+      if (this.endTimeout) {
+        clearTimeout(this.endTimeout);
+        this.endTimeout = null;
+      }
+      if (this.run) {
+        this.doSparkle();
+      } else {
+        this.endTimeout = setTimeout(() => {
+          this.sparkles = [];
+        }, 2000);
+      }
+    }
+  }
+
+  doSparkle(): void {
+    if (this.run) {
+      const now = performance.now();
+      if (now - this.lastSparkle > 20) {
+        this.lastSparkle = now;
+        if (this.arrow?.nativeElement && this.sparkleAnchor?.nativeElement) {
+          const anchor = this.sparkleAnchor.nativeElement.getBoundingClientRect().right;
+          const right = this.arrow.nativeElement.getBoundingClientRect().right;
+          const dx = (anchor - right) + 30;
+          const numSparkles = Math.ceil(Math.random() * 3);
+          for (let i = 0; i < numSparkles; i++) {
+            this.sparkles.push({
+              style: {
+                right: (dx + (Math.random() * 10)) + 'px',
+                top: (15 + (Math.random() * 30)) + 'px',
+              },
+              rotation: {
+                transform: `rotate(${Math.random() * 360}deg)`,
+              }
+            });
+          }
+          while (this.sparkles.length > 200) {
+            this.sparkles.shift();
+          }
+          this.cd.markForCheck();
+        }
+      }
+      requestAnimationFrame(() => {
+        this.doSparkle();
+      });
+    }
+  }
+}

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

@@ -30,7 +30,7 @@ const periodSeconds = {
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -55,7 +55,7 @@ export class AddressLabelsComponent implements OnChanges {
   }
 
   handleVin() {
-    const address = new AddressTypeInfo(this.network || 'mainnet', this.vin.prevout?.scriptpubkey_address, this.vin.prevout?.scriptpubkey_type as AddressType, [this.vin])
+    const address = new AddressTypeInfo(this.network || 'mainnet', this.vin.prevout?.scriptpubkey_address, this.vin.prevout?.scriptpubkey_type as AddressType, [this.vin]);
     if (address?.scripts.size) {
       const script = address?.scripts.values().next().value;
       if (script.template?.label) {

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

@@ -249,7 +249,7 @@
 </ng-template>
 
 <ng-template #pendingBalanceRow>
-  <td i18n="address.unconfirmed-balance" class="font-italic">Unconfirmed balance</td>
+  <td i18n="accelerator.pending-state" class="font-italic">Pending</td>
   <td *ngIf="mempoolStats.funded_txo_sum !== undefined; else confidentialTd" class="font-italic wrap-cell"><app-amount [satoshis]="mempoolStats.balance" [noFiat]="true" [addPlus]="true"></app-amount> <span class="fiat"><app-fiat [value]="mempoolStats.balance"></app-fiat></span></td>
 </ng-template>
 
@@ -259,7 +259,7 @@
 </ng-template>
 
 <ng-template #pendingUtxoRow>
-  <td i18n="address.unconfirmed-utxos" class="font-italic">Unconfirmed UTXOs</td>
+  <td i18n="address.pending-utxos" class="font-italic">Pending UTXOs</td>
   <td class="font-italic wrap-cell">{{ mempoolStats.utxos > 0 ? '+' : ''}}{{ mempoolStats.utxos }}</td>
 </ng-template>
 

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

@@ -23,7 +23,7 @@ import { ActivatedRoute, Router } from '@angular/router';
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -23,7 +23,7 @@ import { StateService } from '../../services/state.service';
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -24,7 +24,7 @@ import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pi
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -1,6 +1,5 @@
 <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&trade; tooltip" ngbTooltip="select filter categories to highlight matching transactions">
-    <span class="badge badge-pill badge-warning beta" i18n="beta">beta</span>
+  <a *ngIf="menuOpen" [routerLink]="['/docs/faq' | relativeUrl]" fragment="how-do-mempool-goggles-work" class="info-badges float-right" i18n-ngbTooltip="Mempool Goggles&trade; tooltip" ngbTooltip="select filter categories to highlight matching transactions">
     <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" size="lg"></fa-icon>
   </a>
   <div class="filter-bar">

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

@@ -24,7 +24,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    float: right;
 
     &:hover, &:active {
       text-decoration: none;

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

@@ -21,7 +21,7 @@ import { StateService } from '../../services/state.service';
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -2,10 +2,12 @@
 <div class="graph-alignment" [class.grid-align]="!autofit" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'">
   <div class="block-overview-graph">
     <canvas *browserOnly class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
-    <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
-      <div *ngIf="!unavailable" class="spinner-border ml-3 loading" role="status"></div>
-      <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>
-    </div>
+    @if (!disableSpinner) {
+      <div class="loader-wrapper" [class.hidden]="!isLoading && !unavailable">
+        <div *ngIf="!unavailable" class="spinner-border ml-3 loading" role="status"></div>
+        <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>
+      </div>
+    }
     <app-block-overview-tooltip
       [tx]="selectedTx || hoverTx"
       [cursorPosition]="tooltipPosition"

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

@@ -18,6 +18,7 @@ const unmatchedAuditColors = {
   censored: setOpacity(defaultAuditColors.censored, unmatchedOpacity),
   missing: setOpacity(defaultAuditColors.missing, unmatchedOpacity),
   added: setOpacity(defaultAuditColors.added, unmatchedOpacity),
+  added_prioritized: setOpacity(defaultAuditColors.added_prioritized, unmatchedOpacity),
   prioritized: setOpacity(defaultAuditColors.prioritized, unmatchedOpacity),
   accelerated: setOpacity(defaultAuditColors.accelerated, unmatchedOpacity),
 };
@@ -25,6 +26,7 @@ const unmatchedContrastAuditColors = {
   censored: setOpacity(contrastAuditColors.censored, unmatchedOpacity),
   missing: setOpacity(contrastAuditColors.missing, unmatchedOpacity),
   added: setOpacity(contrastAuditColors.added, unmatchedOpacity),
+  added_prioritized: setOpacity(contrastAuditColors.added_prioritized, unmatchedOpacity),
   prioritized: setOpacity(contrastAuditColors.prioritized, unmatchedOpacity),
   accelerated: setOpacity(contrastAuditColors.accelerated, unmatchedOpacity),
 };
@@ -196,7 +198,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   }
 
   // initialize the scene without any entry transition
-  setup(transactions: TransactionStripped[]): void {
+  setup(transactions: TransactionStripped[], sort: boolean = false): void {
     const filtersAvailable = transactions.reduce((flagSet, tx) => flagSet || tx.flags > 0, false);
     if (filtersAvailable !== this.filtersAvailable) {
       this.setFilterFlags();
@@ -204,7 +206,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     this.filtersAvailable = filtersAvailable;
     if (this.scene) {
       this.clearUpdateQueue();
-      this.scene.setup(transactions);
+      this.scene.setup(transactions, sort);
       this.readyNextFrame = true;
       this.start();
       this.updateSearchHighlight();

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

@@ -88,16 +88,19 @@ export default class BlockScene {
   }
 
   // set up the scene with an initial set of transactions, without any transition animation
-  setup(txs: TransactionStripped[]) {
+  setup(txs: TransactionStripped[], sort: boolean = false) {
     // clean up any old transactions
     Object.values(this.txs).forEach(tx => {
       tx.destroy();
       delete this.txs[tx.txid];
     });
     this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
-    txs.forEach(tx => {
-      const txView = new TxView(tx, this);
-      this.txs[tx.txid] = txView;
+    let txViews = txs.map(tx => new TxView(tx, this));
+    if (sort) {
+      txViews = txViews.sort(feeRateDescending);
+    }
+    txViews.forEach(txView => {
+      this.txs[txView.txid] = txView;
       this.place(txView);
       this.saveGridToScreenPosition(txView);
       this.applyTxUpdate(txView, {

frontend/src/app/components/block-overview-graph/tx-view.ts

@@ -33,7 +33,7 @@ export default class TxView implements TransactionStripped {
   flags: number;
   bigintFlags?: bigint | null = 0b00000100_00000000_00000000_00000000n;
   time?: number;
-  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'prioritized' | 'censored' | 'selected' | 'rbf' | 'accelerated';
+  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'added_prioritized' | 'prioritized' | 'added_deprioritized' | 'deprioritized' | 'censored' | 'selected' | 'rbf' | 'accelerated';
   context?: 'projected' | 'actual';
   scene?: BlockScene;
 

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

@@ -71,6 +71,7 @@ export const defaultAuditColors = {
   censored: hexToColor('f344df'),
   missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
   added: hexToColor('0099ff'),
+  added_prioritized: darken(desaturate(hexToColor('0099ff'), 0.15), 0.85),
   prioritized: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7),
   accelerated: hexToColor('8f5ff6'),
 };
@@ -101,6 +102,7 @@ export const contrastAuditColors = {
   censored: hexToColor('ffa8ff'),
   missing: darken(desaturate(hexToColor('ffa8ff'), 0.3), 0.7),
   added: hexToColor('00bb98'),
+  added_prioritized: darken(desaturate(hexToColor('00bb98'), 0.15), 0.85),
   prioritized: darken(desaturate(hexToColor('00bb98'), 0.3), 0.7),
   accelerated: hexToColor('8f5ff6'),
 };
@@ -136,8 +138,14 @@ export function defaultColorFunction(
       return auditColors.missing;
     case 'added':
       return auditColors.added;
+    case 'added_prioritized':
+      return auditColors.added_prioritized;
     case 'prioritized':
       return auditColors.prioritized;
+    case 'added_deprioritized':
+      return auditColors.added_prioritized;
+    case 'deprioritized':
+      return auditColors.prioritized;
     case 'selected':
       return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1];
     case 'accelerated':

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

@@ -51,7 +51,7 @@
       <tr *ngIf="hasEffectiveRate && effectiveRate != null">
         <td *ngIf="!this.acceleration" class="label" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
         <td *ngIf="this.acceleration" class="label" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
-        <td class="value">
+        <td class="value" [class.oobFees]="this.acceleration">
           <app-fee-rate [fee]="effectiveRate"></app-fee-rate>
         </td>
       </tr>
@@ -75,6 +75,15 @@
             <span *ngSwitchCase="'freshcpfp'" class="badge badge-warning" i18n="transaction.audit.recently-cpfped">Recently CPFP'd</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>
+            <ng-container *ngSwitchCase="'added_prioritized'">
+              <span class="badge badge-warning" i18n="tx-features.tag.added|Added">Added</span>
+              <span class="badge badge-warning ml-1" i18n="tx-features.tag.prioritized|Prioritized">Prioritized</span>
+            </ng-container>
+            <span *ngSwitchCase="'deprioritized'" class="badge badge-warning" i18n="tx-features.tag.prioritized|Deprioritized">Deprioritized</span>
+            <ng-container *ngSwitchCase="'added_deprioritized'">
+              <span class="badge badge-warning" i18n="tx-features.tag.added|Added">Added</span>
+              <span class="badge badge-warning ml-1" i18n="tx-features.tag.prioritized|Deprioritized">Deprioritized</span>
+            </ng-container>
             <span *ngSwitchCase="'selected'" class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</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>

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

@@ -27,6 +27,9 @@ th, td {
     width: 70%;
     text-align: end;
   }
+  &.oobFees {
+    color: #905cf4;
+  }
 }
 
 .badge.badge-accelerated {

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

@@ -23,7 +23,7 @@ import { StateService } from '../../services/state.service';
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -21,7 +21,7 @@ import { StateService } from '../../services/state.service';
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -78,6 +78,25 @@
                   </ng-template>
                 </td>
               </tr>
+              <tr *ngIf="this.stateService.network === '' && block.height % 2016 === 0">
+                <td i18n="mining.difficulty-adjustment">Adjustment</td>
+                <td>
+                  <ng-container *ngIf="cacheService.daCache[block.height]?.adjustment > 0; else loadingAdjustment">
+                    <div [style.color]="cacheService.daCache[block.height].adjustment > 1 ? 'var(--green)' : (cacheService.daCache[block.height].adjustment < 1 ? 'var(--red)' : '')">
+                      @if (cacheService.daCache[block.height].adjustment > 1) {
+                        <fa-icon class="retarget-sign up" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
+                      } @else if (cacheService.daCache[block.height].adjustment < 1) {
+                        <fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
+                      }
+                      {{ (cacheService.daCache[block.height].adjustment - 1) * 100 | absolute | number: '1.2-2' }}
+                      <span class="symbol">%</span>
+                    </div>
+                  </ng-container>
+                  <ng-template #loadingAdjustment>
+                    <span class="skeleton-loader" style="max-width: 60px"></span>
+                  </ng-template>
+                </td>
+              </tr>
             </ng-container>
             <ng-template #skeletonRows>
               <tr>
@@ -193,6 +212,10 @@
         </span>
         </td>
       </tr>
+      <tr *ngIf="this.stateService.network === '' && block.height % 2016 === 0">
+        <td i18n="block.difficulty">Difficulty</td>
+        <td>{{ block.difficulty | amountShortener: 2 }}</td>
+      </tr>
     </ng-container>
     <ng-template #loadingRest>
       <tr>

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

@@ -280,3 +280,11 @@ h1 {
   top: -1px;
   margin-right: 2px;
 }
+
+.retarget-sign {
+  margin-right: -3px;
+  &.up {
+    position: relative;
+    top: 2px;
+  }
+}

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

@@ -17,6 +17,7 @@ import { PriceService, Price } from '../../services/price.service';
 import { CacheService } from '../../services/cache.service';
 import { ServicesApiServices } from '../../services/services-api.service';
 import { PreloadService } from '../../services/preload.service';
+import { identifyPrioritizedTransactions } from '../../shared/transaction.utils';
 
 @Component({
   selector: 'app-block',
@@ -98,7 +99,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     private relativeUrlPipe: RelativeUrlPipe,
     private apiService: ApiService,
     private priceService: PriceService,
-    private cacheService: CacheService,
+    public cacheService: CacheService,
     private servicesApiService: ServicesApiServices,
     private cd: ChangeDetectorRef,
     private preloadService: PreloadService,
@@ -521,8 +522,10 @@ export class BlockComponent implements OnInit, OnDestroy {
     if (transactions && blockAudit) {
       const inTemplate = {};
       const inBlock = {};
+      const isUnseen = {};
       const isAdded = {};
       const isPrioritized = {};
+      const isDeprioritized = {};
       const isCensored = {};
       const isMissing = {};
       const isSelected = {};
@@ -534,6 +537,17 @@ export class BlockComponent implements OnInit, OnDestroy {
       this.numUnexpected = 0;
 
       if (blockAudit?.template) {
+        // augment with locally calculated *de*prioritized transactions if possible
+        const { prioritized, deprioritized } = identifyPrioritizedTransactions(transactions);
+        // but if the local calculation produces returns unexpected results, don't use it
+        let useLocalDeprioritized = deprioritized.length < (transactions.length * 0.1);
+        for (const tx of prioritized) {
+          if (!isPrioritized[tx] && !isAccelerated[tx]) {
+            useLocalDeprioritized = false;
+            break;
+          }
+        }
+
         for (const tx of blockAudit.template) {
           inTemplate[tx.txid] = true;
           if (tx.acc) {
@@ -543,12 +557,20 @@ export class BlockComponent implements OnInit, OnDestroy {
         for (const tx of transactions) {
           inBlock[tx.txid] = true;
         }
+        for (const txid of blockAudit.unseenTxs || []) {
+          isUnseen[txid] = true;
+        }
         for (const txid of blockAudit.addedTxs) {
           isAdded[txid] = true;
         }
-        for (const txid of blockAudit.prioritizedTxs || []) {
+        for (const txid of blockAudit.prioritizedTxs) {
           isPrioritized[txid] = true;
         }
+        if (useLocalDeprioritized) {
+          for (const txid of deprioritized || []) {
+            isDeprioritized[txid] = true;
+          }
+        }
         for (const txid of blockAudit.missingTxs) {
           isCensored[txid] = true;
         }
@@ -592,18 +614,33 @@ export class BlockComponent implements OnInit, OnDestroy {
             tx.status = 'accelerated';
           }
         }
-        for (const [index, tx] of transactions.entries()) {
+        let anySeen = false;
+        for (let index = transactions.length - 1; index >= 0; index--) {
+          const tx = transactions[index];
           tx.context = 'actual';
           if (index === 0) {
             tx.status = null;
-          } else if (isAdded[tx.txid]) {
-            tx.status = 'added';
           } else if (isPrioritized[tx.txid]) {
-            tx.status = 'prioritized';
+            if (isAdded[tx.txid] || (blockAudit.version > 0 && isUnseen[tx.txid])) {
+              tx.status = 'added_prioritized';
+            } else {
+              tx.status = 'prioritized';
+            }
+          } else if (isDeprioritized[tx.txid]) {
+            if (isAdded[tx.txid] || (blockAudit.version > 0 && isUnseen[tx.txid])) {
+              tx.status = 'added_deprioritized';
+            } else {
+              tx.status = 'deprioritized';
+            }
+          } else if (isAdded[tx.txid] && (blockAudit.version === 0 || isUnseen[tx.txid])) {
+            tx.status = 'added';
           } else if (inTemplate[tx.txid]) {
+            anySeen = true;
             tx.status = 'found';
           } else if (isRbf[tx.txid]) {
             tx.status = 'rbf';
+          } else if (isUnseen[tx.txid] && anySeen) {
+            tx.status = 'added';
           } else {
             tx.status = 'selected';
             isSelected[tx.txid] = true;

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { Observable, Subscription, delay, filter, tap } from 'rxjs';
+import { Observable, Subscription, delay, filter, of, retryWhen, switchMap, take, tap, throwError } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { specialBlocks } from '../../app.constants';
 import { BlockExtended } from '../../interfaces/node-api.interface';
 import { Location } from '@angular/common';
 import { CacheService } from '../../services/cache.service';
+import { ApiService } from '../../services/api.service';
+import { colorFromRetarget } from '../../shared/common.utils';
 
 interface BlockchainBlock extends BlockExtended {
   placeholder?: boolean;
@@ -77,6 +79,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   constructor(
     public stateService: StateService,
     public cacheService: CacheService,
+    public apiService: ApiService,
     private cd: ChangeDetectorRef,
     private location: Location,
   ) {
@@ -334,6 +337,31 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     return this.specialBlocks[height]?.networks.includes(this.stateService.network || 'mainnet') ? true : false;
   }
 
+  isDA(height: number): boolean {
+    const isDA = height % 2016 === 0 && this.stateService.network === '';
+    if (isDA && !this.cacheService.daCache[height]?.exact) {
+      const estimatedAdjustment = this.cacheService.daCache[height]?.adjustment || 0;
+      this.cacheService.daCache[height] = { adjustment: estimatedAdjustment, exact: true };
+      this.apiService.getDifficultyAdjustmentByHeight$(height).pipe(
+        switchMap(da => {
+          const blocksAvailable = (this.height || this.chainTip) && this.blockStyles[(this.height || this.chainTip) - height];
+          return blocksAvailable ? of(da) : throwError(() => new Error());
+        }),
+        retryWhen(errors =>
+          errors.pipe(
+            delay(1000),
+            take(3)
+          )
+        ),
+        tap((da) => {
+          this.cacheService.daCache[height] = { adjustment: da?.adjustment || 1, exact: true };
+          this.blockStyles[(this.height || this.chainTip) - height].background = colorFromRetarget(da?.adjustment);
+        })
+      ).subscribe();
+    }
+    return isDA;
+  }
+
   getStyleForBlock(block: BlockchainBlock, index: number, animateEnterFrom: number = 0) {
     if (!block || block.placeholder) {
       return this.getStyleForPlaceholderBlock(index, animateEnterFrom);
@@ -349,7 +377,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
 
     return {
       left: addLeft + this.blockOffset * index + 'px',
-      background: `repeating-linear-gradient(
+      background: this.isDA(block.height) ? colorFromRetarget(this.cacheService.daCache[block.height]?.adjustment || 1) :
+      `repeating-linear-gradient(
         var(--secondary),
         var(--secondary) ${greenBackgroundHeight}%,
         ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.components.ts

@@ -5,6 +5,7 @@ import { ApiService } from '../../services/api.service';
 import { formatNumber } from '@angular/common';
 import { selectPowerOfTen } from '../../bitcoin.utils';
 import { StateService } from '../../services/state.service';
+import { CacheService } from '../../services/cache.service';
 
 @Component({
   selector: 'app-difficulty-adjustments-table',
@@ -15,7 +16,7 @@ import { StateService } from '../../services/state.service';
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
 })
@@ -27,7 +28,8 @@ export class DifficultyAdjustmentsTable implements OnInit {
   constructor(
     @Inject(LOCALE_ID) public locale: string,
     private apiService: ApiService,
-    public stateService: StateService
+    public stateService: StateService,
+    private cacheService: CacheService,
   ) {
   }
 
@@ -52,6 +54,7 @@ export class DifficultyAdjustmentsTable implements OnInit {
                 adjustment[2] / selectedPowerOfTen.divider,
                 this.locale, `1.${decimals}-${decimals}`) + selectedPowerOfTen.unit
             });
+            this.cacheService.daCache[adjustment[1]] = { adjustment: adjustment[3], exact: true };
           }
           this.isLoading = false;
           return tableData.slice(0, 6);

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -23,7 +23,7 @@ import { seoDescriptionNetwork } from '../../shared/common.utils';
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss

@@ -59,7 +59,7 @@
   position: absolute;
   top: 50%;
   left: calc(50% - 15px);
-  z-index: 100;
+  z-index: 99;
 }
 .loadingGraphs.widget {
   top: 75%;

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts

@@ -28,7 +28,7 @@ interface Hashrate {
       position: absolute;
       top: 50%;
       left: calc(50% - 15px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -17,7 +17,7 @@ const OUTLIERS_MEDIAN_MULTIPLIER = 4;
       position: absolute;
       top: 50%;
       left: calc(50% - 16px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,

frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts

@@ -11,7 +11,7 @@ import { StateService } from '../../services/state.service';
       position: absolute;
       top: 50%;
       left: calc(50% - 16px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   templateUrl: './lbtc-pegs-graph.component.html',

frontend/src/app/components/liquid-master-page/liquid-master-page.component.html

@@ -52,7 +52,7 @@
       <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['mainnet'] || '')" ngbDropdownItem class="mainnet"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>
       <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['signet'] || '/signet')" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><app-svg-images name="signet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Signet</a>
       <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['testnet'] || '/testnet')" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><app-svg-images name="testnet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet3</a>
-      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['testnet4'] || '/testnet4')" ngbDropdownItem *ngIf="env.TESTNET4_ENABLED" class="testnet"><app-svg-images name="testnet4" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet4 <span class="badge badge-pill badge-warning beta-network" i18n="beta">beta</span></a>
+      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['testnet4'] || '/testnet4')" ngbDropdownItem *ngIf="env.TESTNET4_ENABLED" class="testnet"><app-svg-images name="testnet4" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet4</a>
       <h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
       <a ngbDropdownItem class="liquid mr-1" [class.active]="network.val === 'liquid'" [routerLink]="networkPaths['liquid'] || '/'"><app-svg-images name="liquid" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid</a>
       <a ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquidtestnet'" [routerLink]="networkPaths['liquidtestnet'] || '/testnet'"><app-svg-images name="liquidtestnet" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</a>

frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.scss

@@ -2,5 +2,5 @@
   position: absolute;
   top: 50%;
   left: calc(50% - 16px);
-  z-index: 100;
+  z-index: 99;
 }

frontend/src/app/components/loading-indicator/loading-indicator.component.scss

@@ -1,7 +1,7 @@
 .sticky-loading {
   position: absolute;
   right: 10px;
-  z-index: 100;
+  z-index: 99;
   font-size: 14px;
   @media (width >= 992px) {
     left: 32px;

frontend/src/app/components/master-page/master-page.component.html

@@ -70,7 +70,7 @@
       <a ngbDropdownItem *ngIf="env.MAINNET_ENABLED" class="mainnet" [routerLink]="networkPaths['mainnet'] || '/'"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>
       <a ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" [routerLink]="networkPaths['signet'] || '/signet'"><app-svg-images name="signet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Signet</a>
       <a ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" [routerLink]="networkPaths['testnet'] || '/testnet'"><app-svg-images name="testnet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet3</a>
-      <a ngbDropdownItem *ngIf="env.TESTNET4_ENABLED" class="testnet4" [class.active]="network.val === 'testnet4'" [routerLink]="networkPaths['testnet4'] || '/testnet4'"><app-svg-images name="testnet4" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet4 <span class="badge badge-pill badge-warning beta-network" i18n="beta">beta</span></a>
+      <a ngbDropdownItem *ngIf="env.TESTNET4_ENABLED" class="testnet4" [class.active]="network.val === 'testnet4'" [routerLink]="networkPaths['testnet4'] || '/testnet4'"><app-svg-images name="testnet4" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet4</a>
       <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + (networkPaths['liquid'] || '')" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network.val === 'liquid'"><app-svg-images name="liquid" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid</a>
       <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage  + (networkPaths['liquidtestnet'] || '/testnet')" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquid'"><app-svg-images name="liquidtestnet" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</a>
     </div>

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

@@ -31,7 +31,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
 
   lastBlockHeight: number;
   blockIndex: number;
-  isLoading$ = new BehaviorSubject<boolean>(true);
+  isLoading$ = new BehaviorSubject<boolean>(false);
   timeLtrSubscription: Subscription;
   timeLtr: boolean;
   chainDirection: string = 'right';
@@ -95,6 +95,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
             }
           }
           this.updateBlock({
+            block: this.blockIndex,
             removed,
             changed,
             added
@@ -110,8 +111,11 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
       if (this.blockGraph) {
         this.blockGraph.clear(changes.index.currentValue > changes.index.previousValue ? this.chainDirection : this.poolDirection);
       }
-      this.isLoading$.next(true);
-      this.websocketService.startTrackMempoolBlock(changes.index.currentValue);
+      if (!this.websocketService.startTrackMempoolBlock(changes.index.currentValue) && this.stateService.mempoolBlockState && this.stateService.mempoolBlockState.block === changes.index.currentValue) {
+        this.resumeBlock(Object.values(this.stateService.mempoolBlockState.transactions));
+      } else {
+        this.isLoading$.next(true);
+      }
     }
   }
 
@@ -153,6 +157,19 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
     this.isLoading$.next(false);
   }
 
+  resumeBlock(transactionsStripped: TransactionStripped[]): void {
+    if (this.blockGraph) {
+      this.firstLoad = false;
+      this.blockGraph.setup(transactionsStripped, true);
+      this.blockIndex = this.index;
+      this.isLoading$.next(false);
+    } else {
+      requestAnimationFrame(() => {
+        this.resumeBlock(transactionsStripped);
+      });
+    }
+  }
+
   onTxClick(event: { tx: TransactionStripped, keyModifier: boolean }): void {
     const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.tx.txid}`);
     if (!event.keyModifier) {

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

@@ -41,6 +41,25 @@
                 </div>
               </td>
             </tr>
+            <tr *ngIf="this.stateService.network === '' && mempoolBlock.height % 2016 === 0">
+              <td i18n="mining.difficulty-adjustment">Adjustment</td>
+              <td>
+                <ng-container *ngIf="cacheService.daCache[mempoolBlock.height]?.adjustment > 0; else loadingAdjustment">
+                  <div [style.color]="cacheService.daCache[mempoolBlock.height].adjustment > 1 ? 'var(--green)' : (cacheService.daCache[mempoolBlock.height].adjustment < 1 ? 'var(--red)' : '')">
+                    @if (cacheService.daCache[mempoolBlock.height].adjustment > 1) {
+                      <fa-icon class="retarget-sign up" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
+                    } @else if (cacheService.daCache[mempoolBlock.height].adjustment < 1) {
+                      <fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
+                    }
+                    {{ (cacheService.daCache[mempoolBlock.height].adjustment - 1) * 100 | absolute | number: '1.2-2' }}
+                    <span class="symbol">%</span>
+                  </div>
+                </ng-container>
+                <ng-template #loadingAdjustment>
+                  <span class="skeleton-loader" style="max-width: 60px"></span>
+                </ng-template>
+              </td>
+            </tr>
           </tbody>
         </table>
         <app-fee-distribution-graph *ngIf="webGlEnabled" [transactions]="mempoolBlockTransactions$ | async" [feeRange]="mempoolBlock.isStack ? mempoolBlock.feeRange : []" [vsize]="mempoolBlock.blockVSize" ></app-fee-distribution-graph>

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

@@ -36,3 +36,11 @@ h1 {
     margin: auto;
   }
 }
+
+.retarget-sign {
+  margin-right: -3px;
+  &.up {
+    position: relative;
+    top: 2px;
+  }
+}

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

@@ -9,6 +9,7 @@ import { Observable, BehaviorSubject } from 'rxjs';
 import { SeoService } from '../../services/seo.service';
 import { seoDescriptionNetwork } from '../../shared/common.utils';
 import { WebsocketService } from '../../services/websocket.service';
+import { CacheService } from '../../services/cache.service';
 
 @Component({
   selector: 'app-mempool-block',
@@ -30,6 +31,7 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
     public stateService: StateService,
     private seoService: SeoService,
     private websocketService: WebsocketService,
+    public cacheService: CacheService,
     private cd: ChangeDetectorRef,
     @Inject(PLATFORM_ID) private platformId: Object,
   ) {
@@ -71,7 +73,7 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
         })
       );
 
-    this.mempoolBlockTransactions$ = this.stateService.liveMempoolBlockTransactions$.pipe(map(txMap => Object.values(txMap)));
+    this.mempoolBlockTransactions$ = this.stateService.liveMempoolBlockTransactions$.pipe(map(({transactions}) => Object.values(transactions)));
 
     this.network$ = this.stateService.networkChanged$;
   }

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -51,7 +51,8 @@
         </div>
       </ng-template>
     </div>
-    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + (blockWidth * 0.3) + containerOffset + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
+    <app-acceleration-sparkles [style]="{ position: 'absolute', right: 0}" [arrow]="arrowElement" [run]="acceleratingArrow"></app-acceleration-sparkles>
+    <div *ngIf="arrowVisible" #arrowUp id="arrow-up" [ngStyle]="{'right': rightPosition + (blockWidth * 0.3) + containerOffset + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
   </div>
 </ng-container>
 

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -1,10 +1,10 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
-import { Subscription, Observable, of, combineLatest } from 'rxjs';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+import { Subscription, Observable, of, combineLatest, throwError } from 'rxjs';
 import { MempoolBlock } from '../../interfaces/websocket.interface';
 import { StateService } from '../../services/state.service';
 import { EtaService } from '../../services/eta.service';
 import { Router } from '@angular/router';
-import { delay, filter, map, switchMap, tap } from 'rxjs/operators';
+import { delay, filter, map, retryWhen, switchMap, take, tap } from 'rxjs/operators';
 import { feeLevels } from '../../app.constants';
 import { specialBlocks } from '../../app.constants';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
@@ -12,6 +12,8 @@ import { Location } from '@angular/common';
 import { DifficultyAdjustment, MempoolPosition } from '../../interfaces/node-api.interface';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { ThemeService } from '../../services/theme.service';
+import { CacheService } from '../../services/cache.service';
+import { colorFromRetarget } from '../../shared/common.utils';
 
 @Component({
   selector: 'app-mempool-blocks',
@@ -77,6 +79,9 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   maxArrowPosition = 0;
   rightPosition = 0;
   transition = 'background 2s, right 2s, transform 1s';
+  @ViewChild('arrowUp')
+  arrowElement: ElementRef<HTMLDivElement>;
+  acceleratingArrow: boolean = false;
 
   markIndex: number;
   txPosition: MempoolPosition;
@@ -90,6 +95,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   constructor(
     private router: Router,
     public stateService: StateService,
+    public cacheService: CacheService,
     private etaService: EtaService,
     private themeService: ThemeService,
     private cd: ChangeDetectorRef,
@@ -201,6 +207,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
 
     this.markBlocksSubscription = this.stateService.markBlock$
       .subscribe((state) => {
+        const oldTxPosition = this.txPosition;
         this.markIndex = undefined;
         this.txPosition = undefined;
         this.txFeePerVSize = undefined;
@@ -209,6 +216,12 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
         }
         if (state.mempoolPosition) {
           this.txPosition = state.mempoolPosition;
+          if (this.txPosition.accelerated && !oldTxPosition?.accelerated) {
+            this.acceleratingArrow = true;
+            setTimeout(() => {
+              this.acceleratingArrow = false;
+            }, 2000);
+          }
         }
         if (state.txFeePerVSize) {
           this.txFeePerVSize = state.txFeePerVSize;
@@ -377,6 +390,37 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     this.mempoolBlocksFull.forEach((block, i) => this.mempoolBlockStyles.push(this.getStyleForMempoolBlock(block, i)));
   }
 
+  isDA(height: number): boolean {
+    if (this.chainTip === -1) {
+      return false;
+    }
+    const isDA = height % 2016 === 0 && this.stateService.network === '';
+    if (isDA && !this.cacheService.daCache[height]) {
+      this.cacheService.daCache[height] = { adjustment: 0 };
+      this.difficultyAdjustments$.pipe(
+        filter(da => !!da),
+        switchMap(da => {
+          const mempoolBlocksAvailable = this.chainTip && this.mempoolBlockStyles[height - this.chainTip - 1];
+          return mempoolBlocksAvailable ? of(da) : throwError(() => new Error());
+        }),
+        retryWhen(errors =>
+          errors.pipe(
+            delay(100),
+            take(3)
+          )
+        ),
+        tap(da => {
+          const adjustment = parseFloat((1 + da.difficultyChange / 100).toFixed(4));
+          if (adjustment !== this.cacheService.daCache[height].adjustment) {
+            this.cacheService.daCache[height].adjustment = adjustment;
+            this.mempoolBlockStyles[height - this.chainTip - 1].background = colorFromRetarget(adjustment);
+          }
+        })
+      ).subscribe();
+    }
+    return isDA;
+  }
+
   getStyleForMempoolBlock(mempoolBlock: MempoolBlock, index: number) {
     const emptyBackgroundSpacePercentage = Math.max(100 - mempoolBlock.blockVSize / this.stateService.blockVSize * 100, 0);
     const usedBlockSpace = 100 - emptyBackgroundSpacePercentage;
@@ -400,7 +444,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
 
     return {
       'right': this.containerOffset + index * this.blockOffset + 'px',
-      'background': backgroundGradients.join(',') + ')'
+      'background': this.isDA(mempoolBlock.height) ? colorFromRetarget(this.cacheService.daCache[mempoolBlock.height]?.adjustment || 1) : backgroundGradients.join(',') + ')'
     };
   }
 

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

@@ -18,7 +18,7 @@ import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/grap
       position: absolute;
       top: 50%;
       left: calc(50% - 16px);
-      z-index: 100;
+      z-index: 99;
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,