multiblock padding

multiblock fix stale mempool txs
multiblock logos & fix regular visualization
2024-09-23 23:35:30 +00:00 · 2024-09-23 23:19:00 +00:00 · 2024-09-23 23:18:59 +00:00 · 2024-09-23 23:18:59 +00:00 · 2024-09-23 23:18:59 +00:00 · 2024-09-23 23:18:59 +00:00
83 changed files with 3103 additions and 1081 deletions
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -13,10 +13,10 @@
        "@babel/core": "^7.25.2",
        "@mempool/electrum-client": "1.1.9",
        "@types/node": "^18.15.3",
-        "axios": "~1.7.4",
+        "axios": "1.7.2",
        "bitcoinjs-lib": "~6.1.3",
        "crypto-js": "~4.2.0",
-        "express": "~4.19.2",
+        "express": "~4.21.0",
        "maxmind": "~4.3.11",
        "mysql2": "~3.11.0",
        "redis": "^4.7.0",
@@ -2278,9 +2278,10 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
-      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "license": "MIT",
      "dependencies": {
        "follow-redirects": "^1.15.6",
        "form-data": "^4.0.0",
@@ -2489,9 +2490,9 @@
      }
    },
    "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
      "dependencies": {
        "bytes": "3.1.2",
        "content-type": "~1.0.5",
@@ -2501,7 +2502,7 @@
        "http-errors": "2.0.0",
        "iconv-lite": "0.4.24",
        "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
        "raw-body": "2.5.2",
        "type-is": "~1.6.18",
        "unpipe": "1.0.0"
@@ -3030,9 +3031,9 @@
      "dev": true
    },
    "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
      "engines": {
        "node": ">= 0.8"
      }
@@ -3460,36 +3461,36 @@
      }
    },
    "node_modules/express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
      "dependencies": {
        "accepts": "~1.3.8",
        "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
        "content-disposition": "0.5.4",
        "content-type": "~1.0.4",
        "cookie": "0.6.0",
        "cookie-signature": "1.0.6",
        "debug": "2.6.9",
        "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
        "escape-html": "~1.0.3",
        "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
        "fresh": "0.5.2",
        "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
        "methods": "~1.1.2",
        "on-finished": "2.4.1",
        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
        "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
        "range-parser": "~1.2.1",
        "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
        "setprototypeof": "1.2.0",
        "statuses": "2.0.1",
        "type-is": "~1.6.18",
@@ -3602,12 +3603,12 @@
      }
    },
    "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
      "dependencies": {
        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
        "escape-html": "~1.0.3",
        "on-finished": "2.4.1",
        "parseurl": "~1.3.3",
@@ -6051,9 +6052,12 @@
      }
    },
    "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
    },
    "node_modules/merge-stream": {
      "version": "2.0.0",
@@ -6267,9 +6271,12 @@
      }
    },
    "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "engines": {
+        "node": ">= 0.4"
+      },
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@@ -6437,9 +6444,9 @@
      "dev": true
    },
    "node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
    },
    "node_modules/path-type": {
      "version": "4.0.0",
@@ -6647,11 +6654,11 @@
      ]
    },
    "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
      "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
      },
      "engines": {
        "node": ">=0.6"
@@ -6872,9 +6879,9 @@
      }
    },
    "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
      "dependencies": {
        "debug": "2.6.9",
        "depd": "2.0.0",
@@ -6907,6 +6914,14 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/send/node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -6918,14 +6933,14 @@
      "integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q=="
    },
    "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
      "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
        "escape-html": "~1.0.3",
        "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
      },
      "engines": {
        "node": ">= 0.8.0"
@@ -9439,9 +9454,9 @@
      "integrity": "sha512-+H+kuK34PfMaI9PNU/NSjBKL5hh/KDM9J72kwYeYEm0A8B1AC4fuCy3qsjnA7lxklgyXsB68yn8Z2xoZEjgwCQ=="
    },
    "axios": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
-      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
      "requires": {
        "follow-redirects": "^1.15.6",
        "form-data": "^4.0.0",
@@ -9604,9 +9619,9 @@
      }
    },
    "body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
      "requires": {
        "bytes": "3.1.2",
        "content-type": "~1.0.5",
@@ -9616,7 +9631,7 @@
        "http-errors": "2.0.0",
        "iconv-lite": "0.4.24",
        "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
        "raw-body": "2.5.2",
        "type-is": "~1.6.18",
        "unpipe": "1.0.0"
@@ -9997,9 +10012,9 @@
      "dev": true
    },
    "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="
    },
    "error-ex": {
      "version": "1.3.2",
@@ -10304,36 +10319,36 @@
      }
    },
    "express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
      "requires": {
        "accepts": "~1.3.8",
        "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
        "content-disposition": "0.5.4",
        "content-type": "~1.0.4",
        "cookie": "0.6.0",
        "cookie-signature": "1.0.6",
        "debug": "2.6.9",
        "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
        "escape-html": "~1.0.3",
        "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
        "fresh": "0.5.2",
        "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
        "methods": "~1.1.2",
        "on-finished": "2.4.1",
        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
        "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
        "range-parser": "~1.2.1",
        "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
        "setprototypeof": "1.2.0",
        "statuses": "2.0.1",
        "type-is": "~1.6.18",
@@ -10435,12 +10450,12 @@
      }
    },
    "finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
      "requires": {
        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
        "escape-html": "~1.0.3",
        "on-finished": "2.4.1",
        "parseurl": "~1.3.3",
@@ -12237,9 +12252,9 @@
      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
    },
    "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ=="
    },
    "merge-stream": {
      "version": "2.0.0",
@@ -12402,9 +12417,9 @@
      }
    },
    "object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ=="
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g=="
    },
    "on-finished": {
      "version": "2.4.1",
@@ -12521,9 +12536,9 @@
      "dev": true
    },
    "path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
    },
    "path-type": {
      "version": "4.0.0",
@@ -12665,11 +12680,11 @@
      "dev": true
    },
    "qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
      "requires": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
      }
    },
    "queue-microtask": {
@@ -12803,9 +12818,9 @@
      "dev": true
    },
    "send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
      "requires": {
        "debug": "2.6.9",
        "depd": "2.0.0",
@@ -12837,6 +12852,11 @@
            }
          }
        },
+        "encodeurl": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+          "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
+        },
        "ms": {
          "version": "2.1.3",
          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -12850,14 +12870,14 @@
      "integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q=="
    },
    "serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
      "requires": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
        "escape-html": "~1.0.3",
        "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
      }
    },
    "set-function-length": {
--- a/backend/package.json
+++ b/backend/package.json
@@ -42,10 +42,10 @@
    "@babel/core": "^7.25.2",
    "@mempool/electrum-client": "1.1.9",
    "@types/node": "^18.15.3",
-    "axios": "~1.7.4",
+    "axios": "1.7.2",
    "bitcoinjs-lib": "~6.1.3",
    "crypto-js": "~4.2.0",
-    "express": "~4.19.2",
+    "express": "~4.21.0",
    "maxmind": "~4.3.11",
    "mysql2": "~3.11.0",
    "rust-gbt": "file:./rust-gbt",
--- a/backend/src/tests/api/common.ts
+++ b/backend/src/tests/api/common.ts
@@ -1,5 +1,5 @@
 import { Common } from '../../api/common';
-import { MempoolTransactionExtended } from '../../mempool.interfaces';
+import { MempoolTransactionExtended, TransactionExtended } from '../../mempool.interfaces';

 const randomTransactions = require('./test-data/transactions-random.json');
 const replacedTransactions = require('./test-data/transactions-replaced.json');
@@ -10,14 +10,14 @@ describe('Common', () => {
  describe('RBF', () => {
    const newTransactions = rbfTransactions.concat(randomTransactions);
    test('should detect RBF transactions with fast method', () => {
-      const result: { [txid: string]: MempoolTransactionExtended[] } = Common.findRbfTransactions(newTransactions, replacedTransactions);
+      const result: { [txid: string]: { replaced: MempoolTransactionExtended[], replacedBy: TransactionExtended }} = Common.findRbfTransactions(newTransactions, replacedTransactions);
      expect(Object.values(result).length).toEqual(2);
      expect(result).toHaveProperty('7219d95161f3718335991ac6d967d24eedec370908c9879bb1e192e6d797d0a6');
      expect(result).toHaveProperty('5387881d695d4564d397026dc5f740f816f8390b4b2c5ec8c20309122712a875');
    });

    test('should detect RBF transactions with scalable method', () => {
-      const result: { [txid: string]: MempoolTransactionExtended[] } = Common.findRbfTransactions(newTransactions, replacedTransactions, true);
+      const result: { [txid: string]: { replaced: MempoolTransactionExtended[], replacedBy: TransactionExtended }} = Common.findRbfTransactions(newTransactions, replacedTransactions, true);
      expect(Object.values(result).length).toEqual(2);
      expect(result).toHaveProperty('7219d95161f3718335991ac6d967d24eedec370908c9879bb1e192e6d797d0a6');
      expect(result).toHaveProperty('5387881d695d4564d397026dc5f740f816f8390b4b2c5ec8c20309122712a875');
--- a/backend/src/api/bitcoin/bitcoin.routes.ts
+++ b/backend/src/api/bitcoin/bitcoin.routes.ts
@@ -20,6 +20,7 @@ import difficultyAdjustment from '../difficulty-adjustment';
 import transactionRepository from '../../repositories/TransactionRepository';
 import rbfCache from '../rbf-cache';
 import { calculateMempoolTxCpfp } from '../cpfp';
+import { handleError } from '../../utils/api';

 class BitcoinRoutes {
  public initRoutes(app: Application) {
@@ -86,7 +87,7 @@ class BitcoinRoutes {
      res.set('Content-Type', 'application/json');
      res.send(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -105,13 +106,13 @@ class BitcoinRoutes {
      const result = mempoolBlocks.getMempoolBlocks();
      res.json(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

  private getTransactionTimes(req: Request, res: Response) {
    if (!Array.isArray(req.query.txId)) {
-      res.status(500).send('Not an array');
+      handleError(req, res, 500, 'Not an array');
      return;
    }
    const txIds: string[] = [];
@@ -128,12 +129,12 @@ class BitcoinRoutes {
  private async $getBatchedOutspends(req: Request, res: Response): Promise<IEsploraApi.Outspend[][] | void> {
    const txids_csv = req.query.txids;
    if (!txids_csv || typeof txids_csv !== 'string') {
-      res.status(500).send('Invalid txids format');
+      handleError(req, res, 500, 'Invalid txids format');
      return;
    }
    const txids = txids_csv.split(',');
    if (txids.length > 50) {
-      res.status(400).send('Too many txids requested');
+      handleError(req, res, 400, 'Too many txids requested');
      return;
    }

@@ -141,13 +142,13 @@ class BitcoinRoutes {
      const batchedOutspends = await bitcoinApi.$getBatchedOutspends(txids);
      res.json(batchedOutspends);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

  private async $getCpfpInfo(req: Request, res: Response) {
    if (!/^[a-fA-F0-9]{64}$/.test(req.params.txId)) {
-      res.status(501).send(`Invalid transaction ID.`);
+      handleError(req, res, 501, `Invalid transaction ID.`);
      return;
    }

@@ -180,7 +181,7 @@ class BitcoinRoutes {
        try {
          cpfpInfo = await transactionRepository.$getCpfpInfo(req.params.txId);
        } catch (e) {
-          res.status(500).send('failed to get CPFP info');
+          handleError(req, res, 500, 'failed to get CPFP info');
          return;
        }
      }
@@ -209,7 +210,7 @@ class BitcoinRoutes {
      if (e instanceof Error && e instanceof Error && e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
        statusCode = 404;
      }
-      res.status(statusCode).send(e instanceof Error ? e.message : e);
+      handleError(req, res, statusCode, e instanceof Error ? e.message : e);
    }
  }

@@ -223,7 +224,7 @@ class BitcoinRoutes {
      if (e instanceof Error && e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
        statusCode = 404;
      }
-      res.status(statusCode).send(e instanceof Error ? e.message : e);
+      handleError(req, res, statusCode, e instanceof Error ? e.message : e);
    }
  }

@@ -284,13 +285,13 @@ class BitcoinRoutes {
        // Not modified
        // 422 Unprocessable Entity
        // https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/422
-        res.status(422).send(`Psbt had no missing nonWitnessUtxos.`);
+        handleError(req, res, 422, `Psbt had no missing nonWitnessUtxos.`);
      }
    } catch (e: any) {
      if (e instanceof Error && new RegExp(notFoundError).test(e.message)) {
-        res.status(404).send(e.message);
+        handleError(req, res, 404, e.message);
      } else {
-        res.status(500).send(e instanceof Error ? e.message : e);
+        handleError(req, res, 500, e instanceof Error ? e.message : e);
      }
    }
  }
@@ -304,7 +305,7 @@ class BitcoinRoutes {
      if (e instanceof Error && e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
        statusCode = 404;
      }
-      res.status(statusCode).send(e instanceof Error ? e.message : e);
+      handleError(req, res, statusCode, e instanceof Error ? e.message : e);
    }
  }

@@ -314,7 +315,7 @@ class BitcoinRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 3600 * 24 * 30).toUTCString());
      res.json(transactions);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -336,7 +337,7 @@ class BitcoinRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * cacheDuration).toUTCString());
      res.json(block);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -346,7 +347,7 @@ class BitcoinRoutes {
      res.setHeader('content-type', 'text/plain');
      res.send(blockHeader);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -357,10 +358,11 @@ class BitcoinRoutes {
        res.setHeader('Expires', new Date(Date.now() + 1000 * 3600 * 24 * 30).toUTCString());
        res.json(auditSummary);
      } else {
-        return res.status(404).send(`audit not available`);
+        handleError(req, res, 404, `audit not available`);
+        return;
      }
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -371,7 +373,8 @@ class BitcoinRoutes {
        res.setHeader('Expires', new Date(Date.now() + 1000 * 3600 * 24 * 30).toUTCString());
        res.json(auditSummary);
      } else {
-        return res.status(404).send(`transaction audit not available`);
+        handleError(req, res, 404, `transaction audit not available`);
+        return;
      }
    } catch (e) {
      res.status(500).send(e instanceof Error ? e.message : e);
@@ -388,42 +391,49 @@ class BitcoinRoutes {
        return await this.getLegacyBlocks(req, res);
      }
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

  private async getBlocksByBulk(req: Request, res: Response) {
    try {
      if (['mainnet', 'testnet', 'signet'].includes(config.MEMPOOL.NETWORK) === false) { // Liquid - Not implemented
-        return res.status(404).send(`This API is only available for Bitcoin networks`);
+        handleError(req, res, 404, `This API is only available for Bitcoin networks`);
+        return;
      }
      if (config.MEMPOOL.MAX_BLOCKS_BULK_QUERY <= 0) {
-        return res.status(404).send(`This API is disabled. Set config.MEMPOOL.MAX_BLOCKS_BULK_QUERY to a positive number to enable it.`);
+        handleError(req, res, 404, `This API is disabled. Set config.MEMPOOL.MAX_BLOCKS_BULK_QUERY to a positive number to enable it.`);
+        return;
      }
      if (!Common.indexingEnabled()) {
-        return res.status(404).send(`Indexing is required for this API`);
+        handleError(req, res, 404, `Indexing is required for this API`);
+        return;
      }

      const from = parseInt(req.params.from, 10);
      if (!req.params.from || from < 0) {
-        return res.status(400).send(`Parameter 'from' must be a block height (integer)`);
+        handleError(req, res, 400, `Parameter 'from' must be a block height (integer)`);
+        return;
      }
      const to = req.params.to === undefined ? await bitcoinApi.$getBlockHeightTip() : parseInt(req.params.to, 10);
      if (to < 0) {
-        return res.status(400).send(`Parameter 'to' must be a block height (integer)`);
+        handleError(req, res, 400, `Parameter 'to' must be a block height (integer)`);
+        return;
      }
      if (from > to) {
-        return res.status(400).send(`Parameter 'to' must be a higher block height than 'from'`);
+        handleError(req, res, 400, `Parameter 'to' must be a higher block height than 'from'`);
+        return;
      }
      if ((to - from + 1) > config.MEMPOOL.MAX_BLOCKS_BULK_QUERY) {
-        return res.status(400).send(`You can only query ${config.MEMPOOL.MAX_BLOCKS_BULK_QUERY} blocks at once.`);
+        handleError(req, res, 400, `You can only query ${config.MEMPOOL.MAX_BLOCKS_BULK_QUERY} blocks at once.`);
+        return;
      }

      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(await blocks.$getBlocksBetweenHeight(from, to));

    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -458,10 +468,10 @@ class BitcoinRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(returnBlocks);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }
-  
+
  private async getBlockTransactions(req: Request, res: Response) {
    try {
      loadingIndicators.setProgress('blocktxs-' + req.params.hash, 0);
@@ -483,7 +493,7 @@ class BitcoinRoutes {
      res.json(transactions);
    } catch (e) {
      loadingIndicators.setProgress('blocktxs-' + req.params.hash, 100);
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -492,13 +502,13 @@ class BitcoinRoutes {
      const blockHash = await bitcoinApi.$getBlockHash(parseInt(req.params.height, 10));
      res.send(blockHash);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

  private async getAddress(req: Request, res: Response) {
    if (config.MEMPOOL.BACKEND === 'none') {
-      res.status(405).send('Address lookups cannot be used with bitcoind as backend.');
+      handleError(req, res, 405, 'Address lookups cannot be used with bitcoind as backend.');
      return;
    }

@@ -507,15 +517,16 @@ class BitcoinRoutes {
      res.json(addressData);
    } catch (e) {
      if (e instanceof Error && e.message && (e.message.indexOf('too long') > 0 || e.message.indexOf('confirmed status') > 0)) {
-        return res.status(413).send(e instanceof Error ? e.message : e);
+        handleError(req, res, 413, e instanceof Error ? e.message : e);
+        return;
      }
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

  private async getAddressTransactions(req: Request, res: Response): Promise<void> {
    if (config.MEMPOOL.BACKEND === 'none') {
-      res.status(405).send('Address lookups cannot be used with bitcoind as backend.');
+      handleError(req, res, 405, 'Address lookups cannot be used with bitcoind as backend.');
      return;
    }

@@ -528,23 +539,23 @@ class BitcoinRoutes {
      res.json(transactions);
    } catch (e) {
      if (e instanceof Error && e.message && (e.message.indexOf('too long') > 0 || e.message.indexOf('confirmed status') > 0)) {
-        res.status(413).send(e instanceof Error ? e.message : e);
+        handleError(req, res, 413, e instanceof Error ? e.message : e);
        return;
      }
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

  private async getAddressTransactionSummary(req: Request, res: Response): Promise<void> {
    if (config.MEMPOOL.BACKEND !== 'esplora') {
-      res.status(405).send('Address summary lookups require mempool/electrs backend.');
+      handleError(req, res, 405, 'Address summary lookups require mempool/electrs backend.');
      return;
    }
  }

  private async getScriptHash(req: Request, res: Response) {
    if (config.MEMPOOL.BACKEND === 'none') {
-      res.status(405).send('Address lookups cannot be used with bitcoind as backend.');
+      handleError(req, res, 405, 'Address lookups cannot be used with bitcoind as backend.');
      return;
    }

@@ -555,15 +566,16 @@ class BitcoinRoutes {
      res.json(addressData);
    } catch (e) {
      if (e instanceof Error && e.message && (e.message.indexOf('too long') > 0 || e.message.indexOf('confirmed status') > 0)) {
-        return res.status(413).send(e instanceof Error ? e.message : e);
+        handleError(req, res, 413, e instanceof Error ? e.message : e);
+        return;
      }
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

  private async getScriptHashTransactions(req: Request, res: Response): Promise<void> {
    if (config.MEMPOOL.BACKEND === 'none') {
-      res.status(405).send('Address lookups cannot be used with bitcoind as backend.');
+      handleError(req, res, 405, 'Address lookups cannot be used with bitcoind as backend.');
      return;
    }

@@ -578,16 +590,16 @@ class BitcoinRoutes {
      res.json(transactions);
    } catch (e) {
      if (e instanceof Error && e.message && (e.message.indexOf('too long') > 0 || e.message.indexOf('confirmed status') > 0)) {
-        res.status(413).send(e instanceof Error ? e.message : e);
+        handleError(req, res, 413, e instanceof Error ? e.message : e);
        return;
      }
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

  private async getScriptHashTransactionSummary(req: Request, res: Response): Promise<void> {
    if (config.MEMPOOL.BACKEND !== 'esplora') {
-      res.status(405).send('Scripthash summary lookups require mempool/electrs backend.');
+      handleError(req, res, 405, 'Scripthash summary lookups require mempool/electrs backend.');
      return;
    }
  }
@@ -597,7 +609,7 @@ class BitcoinRoutes {
      const blockHash = await bitcoinApi.$getAddressPrefix(req.params.prefix);
      res.send(blockHash);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -624,7 +636,7 @@ class BitcoinRoutes {
      const rawMempool = await bitcoinApi.$getRawMempool();
      res.send(rawMempool);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -632,12 +644,13 @@ class BitcoinRoutes {
    try {
      const result = blocks.getCurrentBlockHeight();
      if (!result) {
-        return res.status(503).send(`Service Temporarily Unavailable`);
+        handleError(req, res, 503, `Service Temporarily Unavailable`);
+        return;
      }
      res.setHeader('content-type', 'text/plain');
      res.send(result.toString());
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -647,7 +660,7 @@ class BitcoinRoutes {
      res.setHeader('content-type', 'text/plain');
      res.send(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -657,7 +670,7 @@ class BitcoinRoutes {
      res.setHeader('content-type', 'application/octet-stream');
      res.send(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -666,7 +679,7 @@ class BitcoinRoutes {
      const result = await bitcoinApi.$getTxIdsForBlock(req.params.hash);
      res.json(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -675,7 +688,7 @@ class BitcoinRoutes {
      const result = await bitcoinClient.validateAddress(req.params.address);
      res.json(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -688,7 +701,7 @@ class BitcoinRoutes {
        replaces
      });
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -697,7 +710,7 @@ class BitcoinRoutes {
      const result = rbfCache.getRbfTrees(false);
      res.json(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -706,7 +719,7 @@ class BitcoinRoutes {
      const result = rbfCache.getRbfTrees(true);
      res.json(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -719,7 +732,7 @@ class BitcoinRoutes {
        res.status(204).send();
      }
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -728,7 +741,7 @@ class BitcoinRoutes {
      const result = await bitcoinApi.$getOutspends(req.params.txId);
      res.json(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -738,10 +751,10 @@ class BitcoinRoutes {
      if (da) {
        res.json(da);
      } else {
-        res.status(503).send(`Service Temporarily Unavailable`);
+        handleError(req, res, 503, `Service Temporarily Unavailable`);
      }
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -752,7 +765,7 @@ class BitcoinRoutes {
      const txIdResult = await bitcoinApi.$sendRawTransaction(rawTx);
      res.send(txIdResult);
    } catch (e: any) {
-      res.status(400).send(e.message && e.code ? 'sendrawtransaction RPC error: ' + JSON.stringify({ code: e.code, message: e.message })
+      handleError(req, res, 400, e.message && e.code ? 'sendrawtransaction RPC error: ' + JSON.stringify({ code: e.code, message: e.message })
        : (e.message || 'Error'));
    }
  }
@@ -764,7 +777,7 @@ class BitcoinRoutes {
      const txIdResult = await bitcoinClient.sendRawTransaction(txHex);
      res.send(txIdResult);
    } catch (e: any) {
-      res.status(400).send(e.message && e.code ? 'sendrawtransaction RPC error: ' + JSON.stringify({ code: e.code, message: e.message })
+      handleError(req, res, 400, e.message && e.code ? 'sendrawtransaction RPC error: ' + JSON.stringify({ code: e.code, message: e.message })
        : (e.message || 'Error'));
    }
  }
@@ -776,8 +789,7 @@ class BitcoinRoutes {
      const result = await bitcoinApi.$testMempoolAccept(rawTxs, maxfeerate);
      res.send(result);
    } catch (e: any) {
-      res.setHeader('content-type', 'text/plain');
-      res.status(400).send(e.message && e.code ? 'testmempoolaccept RPC error: ' + JSON.stringify({ code: e.code, message: e.message })
+      handleError(req, res, 400, e.message && e.code ? 'testmempoolaccept RPC error: ' + JSON.stringify({ code: e.code, message: e.message })
        : (e.message || 'Error'));
    }
  }
--- a/backend/src/api/common.ts
+++ b/backend/src/api/common.ts
@@ -79,8 +79,8 @@ export class Common {
    return arr;
  }

-  static findRbfTransactions(added: MempoolTransactionExtended[], deleted: MempoolTransactionExtended[], forceScalable = false): { [txid: string]: MempoolTransactionExtended[] } {
-    const matches: { [txid: string]: MempoolTransactionExtended[] } = {};
+  static findRbfTransactions(added: MempoolTransactionExtended[], deleted: MempoolTransactionExtended[], forceScalable = false): { [txid: string]: { replaced: MempoolTransactionExtended[], replacedBy: TransactionExtended }} {
+    const matches: { [txid: string]: { replaced: MempoolTransactionExtended[], replacedBy: TransactionExtended }} = {};

    // For small N, a naive nested loop is extremely fast, but it doesn't scale
    if (added.length < 1000 && deleted.length < 50 && !forceScalable) {
@@ -95,7 +95,7 @@ export class Common {
              addedTx.vin.some((vin) => vin.txid === deletedVin.txid && vin.vout === deletedVin.vout));
            });
        if (foundMatches?.length) {
-          matches[addedTx.txid] = [...new Set(foundMatches)];
+          matches[addedTx.txid] = { replaced: [...new Set(foundMatches)], replacedBy: addedTx };
        }
      });
    } else {
@@ -123,7 +123,7 @@ export class Common {
            foundMatches.add(deletedTx);
          }
          if (foundMatches.size) {
-            matches[addedTx.txid] = [...foundMatches];
+            matches[addedTx.txid] = { replaced: [...foundMatches], replacedBy: addedTx };
          }
        }
      }
@@ -138,17 +138,17 @@ export class Common {
      const replaced: Set<MempoolTransactionExtended> = new Set();
      for (let i = 0; i < tx.vin.length; i++) {
        const vin = tx.vin[i];
-        const match = spendMap.get(`${vin.txid}:${vin.vout}`);
+        const key = `${vin.txid}:${vin.vout}`;
+        const match = spendMap.get(key);
        if (match && match.txid !== tx.txid) {
          replaced.add(match);
          // remove this tx from the spendMap
          // prevents the same tx being replaced more than once
          for (const replacedVin of match.vin) {
-            const key = `${replacedVin.txid}:${replacedVin.vout}`;
-            spendMap.delete(key);
+            const replacedKey = `${replacedVin.txid}:${replacedVin.vout}`;
+            spendMap.delete(replacedKey);
          }
        }
-        const key = `${vin.txid}:${vin.vout}`;
        spendMap.delete(key);
      }
      if (replaced.size) {
--- a/backend/src/api/disk-cache.ts
+++ b/backend/src/api/disk-cache.ts
@@ -257,6 +257,7 @@ class DiskCache {
          trees: rbfData.rbf.trees,
          expiring: rbfData.rbf.expiring.map(([txid, value]) => ({ key: txid, value })),
          mempool: memPool.getMempool(),
+          spendMap: memPool.getSpendMap(),
        });
      }
    } catch (e) {
--- a/backend/src/api/explorer/channels.routes.ts
+++ b/backend/src/api/explorer/channels.routes.ts
@@ -1,6 +1,7 @@
 import config from '../../config';
 import { Application, Request, Response } from 'express';
 import channelsApi from './channels.api';
+import { handleError } from '../../utils/api';

 class ChannelsRoutes {
  constructor() { }
@@ -22,7 +23,7 @@ class ChannelsRoutes {
      const channels = await channelsApi.$searchChannelsById(req.params.search);
      res.json(channels);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -38,7 +39,7 @@ class ChannelsRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(channel);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -53,11 +54,11 @@ class ChannelsRoutes {
      const status: string = typeof req.query.status === 'string' ? req.query.status : '';

      if (index < -1) {
-        res.status(400).send('Invalid index');
+        handleError(req, res, 400, 'Invalid index');
        return;
      }
      if (['open', 'active', 'closed'].includes(status) === false) {
-        res.status(400).send('Invalid status');
+        handleError(req, res, 400, 'Invalid status');
        return;
      }

@@ -69,14 +70,14 @@ class ChannelsRoutes {
      res.header('X-Total-Count', channelsCount.toString());
      res.json(channels);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

  private async $getChannelsByTransactionIds(req: Request, res: Response): Promise<void> {
    try {
      if (!Array.isArray(req.query.txId)) {
-        res.status(400).send('Not an array');
+        handleError(req, res, 400, 'Not an array');
        return;
      }
      const txIds: string[] = [];
@@ -107,7 +108,7 @@ class ChannelsRoutes {

      res.json(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -119,7 +120,7 @@ class ChannelsRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(channels);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -132,7 +133,7 @@ class ChannelsRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(channels);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

--- a/backend/src/api/explorer/general.routes.ts
+++ b/backend/src/api/explorer/general.routes.ts
@@ -3,6 +3,8 @@ import { Application, Request, Response } from 'express';
 import nodesApi from './nodes.api';
 import channelsApi from './channels.api';
 import statisticsApi from './statistics.api';
+import { handleError } from '../../utils/api';
+
 class GeneralLightningRoutes {
  constructor() { }

@@ -27,7 +29,7 @@ class GeneralLightningRoutes {
        channels: channels,
      });
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -41,7 +43,7 @@ class GeneralLightningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(statistics);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -50,7 +52,7 @@ class GeneralLightningRoutes {
      const statistics = await statisticsApi.$getLatestStatistics();
      res.json(statistics);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }
 }
--- a/backend/src/api/explorer/nodes.routes.ts
+++ b/backend/src/api/explorer/nodes.routes.ts
@@ -3,6 +3,7 @@ import { Application, Request, Response } from 'express';
 import nodesApi from './nodes.api';
 import DB from '../../database';
 import { INodesRanking } from '../../mempool.interfaces';
+import { handleError } from '../../utils/api';

 class NodesRoutes {
  constructor() { }
@@ -31,7 +32,7 @@ class NodesRoutes {
      const nodes = await nodesApi.$searchNodeByPublicKeyOrAlias(req.params.search);
      res.json(nodes);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -181,13 +182,13 @@ class NodesRoutes {
          }
        } catch (e) {}
      }
-      
+
      res.header('Pragma', 'public');
      res.header('Cache-control', 'public');
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(nodes);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -195,7 +196,7 @@ class NodesRoutes {
    try {
      const node = await nodesApi.$getNode(req.params.public_key);
      if (!node) {
-        res.status(404).send('Node not found');
+        handleError(req, res, 404, 'Node not found');
        return;
      }
      res.header('Pragma', 'public');
@@ -203,7 +204,7 @@ class NodesRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(node);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -215,7 +216,7 @@ class NodesRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(statistics);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -223,7 +224,7 @@ class NodesRoutes {
    try {
      const node = await nodesApi.$getFeeHistogram(req.params.public_key);
      if (!node) {
-        res.status(404).send('Node not found');
+        handleError(req, res, 404, 'Node not found');
        return;
      }
      res.header('Pragma', 'public');
@@ -231,7 +232,7 @@ class NodesRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(node);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -247,7 +248,7 @@ class NodesRoutes {
        topByChannels: topChannelsNodes,
      });
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -259,7 +260,7 @@ class NodesRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(topCapacityNodes);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -271,7 +272,7 @@ class NodesRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(topCapacityNodes);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -283,7 +284,7 @@ class NodesRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(topCapacityNodes);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -295,7 +296,7 @@ class NodesRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 600).toUTCString());
      res.json(nodesPerAs);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -307,7 +308,7 @@ class NodesRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 600).toUTCString());
      res.json(worldNodes);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -322,7 +323,7 @@ class NodesRoutes {
      );

      if (country.length === 0) {
-        res.status(404).send(`This country does not exist or does not host any lightning nodes on clearnet`);
+        handleError(req, res, 404, `This country does not exist or does not host any lightning nodes on clearnet`);
        return;
      }

@@ -335,7 +336,7 @@ class NodesRoutes {
        nodes: nodes,
      });
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -349,7 +350,7 @@ class NodesRoutes {
      );

      if (isp.length === 0) {
-        res.status(404).send(`This ISP does not exist or does not host any lightning nodes on clearnet`);
+        handleError(req, res, 404, `This ISP does not exist or does not host any lightning nodes on clearnet`);
        return;
      }

@@ -362,7 +363,7 @@ class NodesRoutes {
        nodes: nodes,
      });
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -374,7 +375,7 @@ class NodesRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 600).toUTCString());
      res.json(nodesPerAs);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }
 }
--- a/backend/src/api/liquid/liquid.routes.ts
+++ b/backend/src/api/liquid/liquid.routes.ts
@@ -3,6 +3,7 @@ import { Application, Request, Response } from 'express';
 import config from '../../config';
 import elementsParser from './elements-parser';
 import icons from './icons';
+import { handleError } from '../../utils/api';

 class LiquidRoutes {
  public initRoutes(app: Application) {
@@ -42,7 +43,7 @@ class LiquidRoutes {
      res.setHeader('content-length', result.length);
      res.send(result);
    } else {
-      res.status(404).send('Asset icon not found');
+      handleError(req, res, 404, 'Asset icon not found');
    }
  }

@@ -51,7 +52,7 @@ class LiquidRoutes {
    if (result) {
      res.json(result);
    } else {
-      res.status(404).send('Asset icons not found');
+      handleError(req, res, 404, 'Asset icons not found');
    }
  }

@@ -82,7 +83,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60 * 60).toUTCString());
      res.json(pegs);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -94,7 +95,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60 * 60).toUTCString());
      res.json(reserves);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -106,7 +107,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(currentSupply);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -118,7 +119,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(currentReserves);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -130,7 +131,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(auditStatus);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -142,7 +143,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(federationAddresses);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -154,7 +155,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(federationAddresses);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -166,7 +167,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(federationUtxos);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -178,7 +179,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(expiredUtxos);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -190,7 +191,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(federationUtxos);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -202,7 +203,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(emergencySpentUtxos);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -214,7 +215,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(emergencySpentUtxos);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -226,7 +227,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(recentPegs);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -238,7 +239,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(pegsVolume);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -250,7 +251,7 @@ class LiquidRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
      res.json(pegsCount);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

--- a/backend/src/api/mempool-blocks.ts
+++ b/backend/src/api/mempool-blocks.ts
@@ -369,7 +369,7 @@ class MempoolBlocks {
    const lastBlockIndex = blocks.length - 1;
    let hasBlockStack = blocks.length >= 8;
    let stackWeight;
-    let feeStatsCalculator: OnlineFeeStatsCalculator | void;
+    let feeStatsCalculator: OnlineFeeStatsCalculator | null = null;
    if (hasBlockStack) {
      if (blockWeights && blockWeights[7] !== null) {
        stackWeight = blockWeights[7];
@@ -380,28 +380,36 @@ class MempoolBlocks {
      feeStatsCalculator = new OnlineFeeStatsCalculator(stackWeight, 0.5, [10, 20, 30, 40, 50, 60, 70, 80, 90]);
    }

+    const ancestors: Ancestor[] = [];
+    const descendants: Ancestor[] = [];
+    let ancestor: MempoolTransactionExtended
    for (const cluster of clusters) {
      for (const memberTxid of cluster) {
        const mempoolTx = mempool[memberTxid];
        if (mempoolTx) {
-          const ancestors: Ancestor[] = [];
-          const descendants: Ancestor[] = [];
+          // ugly micro-optimization to avoid allocating new arrays
+          ancestors.length = 0;
+          descendants.length = 0;
          let matched = false;
          cluster.forEach(txid => {
+            ancestor = mempool[txid];
            if (txid === memberTxid) {
              matched = true;
            } else {
-              if (!mempool[txid]) {
+              if (!ancestor) {
                console.log('txid missing from mempool! ', txid, candidates?.txs[txid]);
+                return;
              }
              const relative = {
                txid: txid,
-                fee: mempool[txid].fee,
-                weight: (mempool[txid].adjustedVsize * 4),
+                fee: ancestor.fee,
+                weight: (ancestor.adjustedVsize * 4),
              };
              if (matched) {
                descendants.push(relative);
-                mempoolTx.lastBoosted = Math.max(mempoolTx.lastBoosted || 0, mempool[txid].firstSeen || 0);
+                if (!mempoolTx.lastBoosted || (ancestor.firstSeen && ancestor.firstSeen > mempoolTx.lastBoosted)) {
+                  mempoolTx.lastBoosted = ancestor.firstSeen;
+                }
              } else {
                ancestors.push(relative);
              }
@@ -410,7 +418,20 @@ class MempoolBlocks {
          if (mempoolTx.ancestors?.length !== ancestors.length || mempoolTx.descendants?.length !== descendants.length) {
            mempoolTx.cpfpDirty = true;
          }
-          Object.assign(mempoolTx, {ancestors, descendants, bestDescendant: null, cpfpChecked: true});
+          // ugly micro-optimization to avoid allocating new arrays or objects
+          if (mempoolTx.ancestors) {
+            mempoolTx.ancestors.length = 0;
+          } else {
+            mempoolTx.ancestors = [];
+          }
+          if (mempoolTx.descendants) {
+            mempoolTx.descendants.length = 0;
+          } else {
+            mempoolTx.descendants = [];
+          }
+          mempoolTx.ancestors.push(...ancestors);
+          mempoolTx.descendants.push(...descendants);
+          mempoolTx.cpfpChecked = true;
        }
      }
    }
@@ -420,7 +441,10 @@ class MempoolBlocks {
    const sizeLimit = (config.MEMPOOL.BLOCK_WEIGHT_UNITS / 4) * 1.2;
    // update this thread's mempool with the results
    let mempoolTx: MempoolTransactionExtended;
-    const mempoolBlocks: MempoolBlockWithTransactions[] = blocks.map((block, blockIndex) => {
+    let acceleration: Acceleration;
+    const mempoolBlocks: MempoolBlockWithTransactions[] = [];
+    for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
+      const block = blocks[blockIndex];
      let totalSize = 0;
      let totalVsize = 0;
      let totalWeight = 0;
@@ -436,7 +460,8 @@ class MempoolBlocks {
        }
      }

-      for (const txid of block) {
+      for (let i = 0; i < block.length; i++) {
+        const txid = block[i];
        if (txid) {
          mempoolTx = mempool[txid];
          // save position in projected blocks
@@ -445,30 +470,37 @@ class MempoolBlocks {
            vsize: totalVsize + (mempoolTx.vsize / 2),
          };

-          const acceleration = accelerations[txid];
-          if (isAcceleratedBy[txid] || (acceleration && (!accelerationPool || acceleration.pools.includes(accelerationPool)))) {
-            if (!mempoolTx.acceleration) {
-              mempoolTx.cpfpDirty = true;
-            }
-            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;
+          if (txid in accelerations) {
+            acceleration = accelerations[txid];
+            if (isAcceleratedBy[txid] || (acceleration && (!accelerationPool || acceleration.pools.includes(accelerationPool)))) {
+              if (!mempoolTx.acceleration) {
+                mempoolTx.cpfpDirty = true;
+              }
+              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;
+                }
+                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 {
+              if (mempoolTx.acceleration) {
+                mempoolTx.cpfpDirty = true;
+                delete mempoolTx.acceleration;
              }
-              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 {
            if (mempoolTx.acceleration) {
              mempoolTx.cpfpDirty = true;
+              delete mempoolTx.acceleration;
            }
-            delete mempoolTx.acceleration;
          }

          // online calculation of stack-of-blocks fee stats
@@ -486,7 +518,7 @@ class MempoolBlocks {
          }
        }
      }
-      return this.dataToMempoolBlocks(
+      mempoolBlocks[blockIndex] = this.dataToMempoolBlocks(
        block,
        transactions,
        totalSize,
@@ -494,7 +526,7 @@ class MempoolBlocks {
        totalFees,
        (hasBlockStack && blockIndex === lastBlockIndex && feeStatsCalculator) ? feeStatsCalculator.getRawFeeStats() : undefined,
      );
-    });
+    };

    if (saveResults) {
      const deltas = this.calculateMempoolDeltas(this.mempoolBlocks, mempoolBlocks);
--- a/backend/src/api/mempool.ts
+++ b/backend/src/api/mempool.ts
@@ -19,12 +19,13 @@ class Mempool {
  private mempoolCache: { [txId: string]: MempoolTransactionExtended } = {};
  private mempoolCandidates: { [txid: string ]: boolean } = {};
  private spendMap = new Map<string, MempoolTransactionExtended>();
+  private recentlyDeleted: MempoolTransactionExtended[][] = []; // buffer of transactions deleted in recent mempool updates
  private mempoolInfo: IBitcoinApi.MempoolInfo = { loaded: false, size: 0, bytes: 0, usage: 0, total_fee: 0,
                                                    maxmempool: 300000000, mempoolminfee: Common.isLiquid() ? 0.00000100 : 0.00001000, minrelaytxfee: Common.isLiquid() ? 0.00000100 : 0.00001000 };
  private mempoolChangedCallback: ((newMempool: {[txId: string]: MempoolTransactionExtended; }, newTransactions: MempoolTransactionExtended[],
-    deletedTransactions: MempoolTransactionExtended[], accelerationDelta: string[]) => void) | undefined;
+    deletedTransactions: MempoolTransactionExtended[][], accelerationDelta: string[]) => void) | undefined;
  private $asyncMempoolChangedCallback: ((newMempool: {[txId: string]: MempoolTransactionExtended; }, mempoolSize: number, newTransactions: MempoolTransactionExtended[],
-    deletedTransactions: MempoolTransactionExtended[], accelerationDelta: string[], candidates?: GbtCandidates) => Promise<void>) | undefined;
+    deletedTransactions: MempoolTransactionExtended[][], accelerationDelta: string[], candidates?: GbtCandidates) => Promise<void>) | undefined;

  private accelerations: { [txId: string]: Acceleration } = {};
  private accelerationPositions: { [txid: string]: { poolId: number, pool: string, block: number, vsize: number }[] } = {};
@@ -74,12 +75,12 @@ class Mempool {
  }

  public setMempoolChangedCallback(fn: (newMempool: { [txId: string]: MempoolTransactionExtended; },
-    newTransactions: MempoolTransactionExtended[], deletedTransactions: MempoolTransactionExtended[], accelerationDelta: string[]) => void): void {
+    newTransactions: MempoolTransactionExtended[], deletedTransactions: MempoolTransactionExtended[][], accelerationDelta: string[]) => void): void {
    this.mempoolChangedCallback = fn;
  }

  public setAsyncMempoolChangedCallback(fn: (newMempool: { [txId: string]: MempoolTransactionExtended; }, mempoolSize: number,
-    newTransactions: MempoolTransactionExtended[], deletedTransactions: MempoolTransactionExtended[], accelerationDelta: string[],
+    newTransactions: MempoolTransactionExtended[], deletedTransactions: MempoolTransactionExtended[][], accelerationDelta: string[],
    candidates?: GbtCandidates) => Promise<void>): void {
    this.$asyncMempoolChangedCallback = fn;
  }
@@ -362,12 +363,15 @@ class Mempool {

    const candidatesChanged = candidates?.added?.length || candidates?.removed?.length;

-    if (this.mempoolChangedCallback && (hasChange || deletedTransactions.length)) {
-      this.mempoolChangedCallback(this.mempoolCache, newTransactions, deletedTransactions, accelerationDelta);
+    this.recentlyDeleted.unshift(deletedTransactions);
+    this.recentlyDeleted.length = Math.min(this.recentlyDeleted.length, 10); // truncate to the last 10 mempool updates
+
+    if (this.mempoolChangedCallback && (hasChange || newTransactions.length || deletedTransactions.length)) {
+      this.mempoolChangedCallback(this.mempoolCache, newTransactions, this.recentlyDeleted, accelerationDelta);
    }
-    if (this.$asyncMempoolChangedCallback && (hasChange || deletedTransactions.length || candidatesChanged)) {
+    if (this.$asyncMempoolChangedCallback && (hasChange || newTransactions.length || deletedTransactions.length || candidatesChanged)) {
      this.updateTimerProgress(timer, 'running async mempool callback');
-      await this.$asyncMempoolChangedCallback(this.mempoolCache, newMempoolSize, newTransactions, deletedTransactions, accelerationDelta, candidates);
+      await this.$asyncMempoolChangedCallback(this.mempoolCache, newMempoolSize, newTransactions, this.recentlyDeleted, accelerationDelta, candidates);
      this.updateTimerProgress(timer, 'completed async mempool callback');
    }

@@ -541,16 +545,7 @@ class Mempool {
    }
  }

-  public handleRbfTransactions(rbfTransactions: { [txid: string]: MempoolTransactionExtended[]; }): void {
-    for (const rbfTransaction in rbfTransactions) {
-      if (this.mempoolCache[rbfTransaction] && rbfTransactions[rbfTransaction]?.length) {
-        // Store replaced transactions
-        rbfCache.add(rbfTransactions[rbfTransaction], this.mempoolCache[rbfTransaction]);
-      }
-    }
-  }
-
-  public handleMinedRbfTransactions(rbfTransactions: { [txid: string]: { replaced: MempoolTransactionExtended[], replacedBy: TransactionExtended }}): void {
+  public handleRbfTransactions(rbfTransactions: { [txid: string]: { replaced: MempoolTransactionExtended[], replacedBy: TransactionExtended }}): void {
    for (const rbfTransaction in rbfTransactions) {
      if (rbfTransactions[rbfTransaction].replacedBy && rbfTransactions[rbfTransaction]?.replaced?.length) {
        // Store replaced transactions
--- a/backend/src/api/mining/mining-routes.ts
+++ b/backend/src/api/mining/mining-routes.ts
@@ -10,6 +10,7 @@ import mining from "./mining";
 import PricesRepository from '../../repositories/PricesRepository';
 import AccelerationRepository from '../../repositories/AccelerationRepository';
 import accelerationApi from '../services/acceleration';
+import { handleError } from '../../utils/api';

 class MiningRoutes {
  public initRoutes(app: Application) {
@@ -53,12 +54,12 @@ class MiningRoutes {
      res.header('Cache-control', 'public');
      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
      if (['testnet', 'signet', 'liquidtestnet'].includes(config.MEMPOOL.NETWORK)) {
-        res.status(400).send('Prices are not available on testnets.');
+        handleError(req, res, 400, 'Prices are not available on testnets.');
        return;
      }
      const timestamp = parseInt(req.query.timestamp as string, 10) || 0;
      const currency = req.query.currency as string;
-      
+
      let response;
      if (timestamp && currency) {
        response = await PricesRepository.$getNearestHistoricalPrice(timestamp, currency);
@@ -71,7 +72,7 @@ class MiningRoutes {
      }
      res.status(200).send(response);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -84,9 +85,9 @@ class MiningRoutes {
      res.json(stats);
    } catch (e) {
      if (e instanceof Error && e.message.indexOf('This mining pool does not exist') > -1) {
-        res.status(404).send(e.message);
+        handleError(req, res, 404, e.message);
      } else {
-        res.status(500).send(e instanceof Error ? e.message : e);
+        handleError(req, res, 500, e instanceof Error ? e.message : e);
      }
    }
  }
@@ -103,9 +104,9 @@ class MiningRoutes {
      res.json(poolBlocks);
    } catch (e) {
      if (e instanceof Error && e.message.indexOf('This mining pool does not exist') > -1) {
-        res.status(404).send(e.message);
+        handleError(req, res, 404, e.message);
      } else {
-        res.status(500).send(e instanceof Error ? e.message : e);
+        handleError(req, res, 500, e instanceof Error ? e.message : e);
      }
    }
  }
@@ -129,7 +130,7 @@ class MiningRoutes {
        res.json(pools);
      }
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -143,7 +144,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(stats);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -157,7 +158,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
      res.json(hashrates);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -172,9 +173,9 @@ class MiningRoutes {
      res.json(hashrates);
    } catch (e) {
      if (e instanceof Error && e.message.indexOf('This mining pool does not exist') > -1) {
-        res.status(404).send(e.message);
+        handleError(req, res, 404, e.message);
      } else {
-        res.status(500).send(e instanceof Error ? e.message : e);
+        handleError(req, res, 500, e instanceof Error ? e.message : e);
      }
    }
  }
@@ -203,7 +204,7 @@ class MiningRoutes {
        currentDifficulty: currentDifficulty,
      });
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -217,7 +218,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(blockFees);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -235,7 +236,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(blockFees);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -249,7 +250,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(blockRewards);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -263,7 +264,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(blockFeeRates);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -281,7 +282,7 @@ class MiningRoutes {
        weights: blockWeights
      });
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -293,7 +294,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
      res.json(difficulty.map(adj => [adj.time, adj.height, adj.difficulty, adj.adjustment]));
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -317,7 +318,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(blocksHealth.map(health => [health.time, health.height, health.match_rate]));
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -326,7 +327,7 @@ class MiningRoutes {
      const audit = await BlocksAuditsRepository.$getBlockAudit(req.params.hash);

      if (!audit) {
-        res.status(204).send(`This block has not been audited.`);
+        handleError(req, res, 204, `This block has not been audited.`);
        return;
      }

@@ -335,7 +336,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 3600 * 24).toUTCString());
      res.json(audit);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -358,7 +359,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
      res.json(result);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -371,7 +372,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(await BlocksAuditsRepository.$getBlockAuditScores(height, height - 15));
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -384,7 +385,7 @@ class MiningRoutes {
      res.setHeader('Expires', new Date(Date.now() + 1000 * 3600 * 24).toUTCString());
      res.json(audit || 'null');
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -394,12 +395,12 @@ class MiningRoutes {
      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.');
+        handleError(req, res, 400, 'Acceleration data is not available.');
        return;
      }
      res.status(200).send(await AccelerationRepository.$getAccelerationInfo(req.params.slug));
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -409,13 +410,13 @@ class MiningRoutes {
      res.header('Cache-control', 'public');
      res.setHeader('Expires', new Date(Date.now() + 1000 * 3600 * 24).toUTCString());
      if (!config.MEMPOOL_SERVICES.ACCELERATIONS || ['testnet', 'signet', 'liquidtestnet', 'liquid'].includes(config.MEMPOOL.NETWORK)) {
-        res.status(400).send('Acceleration data is not available.');
+        handleError(req, res, 400, 'Acceleration data is not available.');
        return;
      }
      const height = req.params.height === undefined ? undefined : parseInt(req.params.height, 10);
      res.status(200).send(await AccelerationRepository.$getAccelerationInfo(null, height));
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -425,12 +426,12 @@ class MiningRoutes {
      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.');
+        handleError(req, res, 400, 'Acceleration data is not available.');
        return;
      }
      res.status(200).send(await AccelerationRepository.$getAccelerationInfo(null, null, req.params.interval));
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -440,12 +441,12 @@ class MiningRoutes {
      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.');
+        handleError(req, res, 400, 'Acceleration data is not available.');
        return;
      }
      res.status(200).send(await AccelerationRepository.$getAccelerationTotals(<string>req.query.pool, <string>req.query.interval));
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -455,12 +456,12 @@ class MiningRoutes {
      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.');
+        handleError(req, res, 400, 'Acceleration data is not available.');
        return;
      }
      res.status(200).send(accelerationApi.accelerations || []);
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }

@@ -472,7 +473,7 @@ class MiningRoutes {
      accelerationApi.accelerationRequested(req.params.txid);
      res.status(200).send();
    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
+      handleError(req, res, 500, e instanceof Error ? e.message : e);
    }
  }
 }
--- a/backend/src/api/rbf-cache.ts
+++ b/backend/src/api/rbf-cache.ts
@@ -44,6 +44,22 @@ interface CacheEvent {
  value?: any,
 }

+/**
+ * Singleton for tracking RBF trees
+ *
+ * Maintains a set of RBF trees, where each tree represents a sequence of
+ * consecutive RBF replacements.
+ *
+ * Trees are identified by the txid of the root transaction.
+ *
+ * To maintain consistency, the following invariants must be upheld:
+ *  - Symmetry: replacedBy(A) = B <=> A in replaces(B)
+ *  - Unique id: treeMap(treeMap(X)) = treeMap(X)
+ *  - Unique tree: A in replaces(B) => treeMap(A) == treeMap(B)
+ *  - Existence: X in treeMap => treeMap(X) in rbfTrees
+ *  - Completeness: X in replacedBy => X in treeMap, Y in replaces => Y in treeMap
+ */
+
 class RbfCache {
  private replacedBy: Map<string, string> = new Map();
  private replaces: Map<string, string[]> = new Map();
@@ -61,6 +77,10 @@ class RbfCache {
    setInterval(this.cleanup.bind(this), 1000 * 60 * 10);
  }

+  /**
+   * Low level cache operations
+   */
+
  private addTx(txid: string, tx: MempoolTransactionExtended): void {
    this.txs.set(txid, tx);
    this.cacheQueue.push({ op: CacheOp.Add, type: 'tx', txid });
@@ -92,6 +112,12 @@ class RbfCache {
    this.cacheQueue.push({ op: CacheOp.Remove, type: 'exp', txid });
  }

+  /**
+   * Basic data structure operations
+   * must uphold tree invariants
+   */
+
+
  public add(replaced: MempoolTransactionExtended[], newTxExtended: MempoolTransactionExtended): void {
    if (!newTxExtended || !replaced?.length || this.txs.has(newTxExtended.txid)) {
      return;
@@ -114,6 +140,10 @@ class RbfCache {
      if (!replacedTx.rbf) {
        txFullRbf = true;
      }
+      if (this.replacedBy.has(replacedTx.txid)) {
+        // should never happen
+        continue;
+      }
      this.replacedBy.set(replacedTx.txid, newTx.txid);
      if (this.treeMap.has(replacedTx.txid)) {
        const treeId = this.treeMap.get(replacedTx.txid);
@@ -140,18 +170,47 @@ class RbfCache {
      }
    }
    newTx.fullRbf = txFullRbf;
-    const treeId = replacedTrees[0].tx.txid;
    const newTree = {
      tx: newTx,
      time: newTime,
      fullRbf: treeFullRbf,
      replaces: replacedTrees
    };
-    this.addTree(treeId, newTree);
-    this.updateTreeMap(treeId, newTree);
+    this.addTree(newTree.tx.txid, newTree);
+    this.updateTreeMap(newTree.tx.txid, newTree);
    this.replaces.set(newTx.txid, replacedTrees.map(tree => tree.tx.txid));
  }

+  public mined(txid): void {
+    if (!this.txs.has(txid)) {
+      return;
+    }
+    const treeId = this.treeMap.get(txid);
+    if (treeId && this.rbfTrees.has(treeId)) {
+      const tree = this.rbfTrees.get(treeId);
+      if (tree) {
+        this.setTreeMined(tree, txid);
+        tree.mined = true;
+        this.dirtyTrees.add(treeId);
+        this.cacheQueue.push({ op: CacheOp.Change, type: 'tree', txid: treeId });
+      }
+    }
+    this.evict(txid);
+  }
+
+  // flag a transaction as removed from the mempool
+  public evict(txid: string, fast: boolean = false): void {
+    this.evictionCount++;
+    if (this.txs.has(txid) && (fast || !this.expiring.has(txid))) {
+      const expiryTime = fast ? Date.now() + (1000 * 60 * 10) : Date.now() + (1000 * 86400); // 24 hours
+      this.addExpiration(txid, expiryTime);
+    }
+  }
+
+  /**
+   * Read-only public interface
+   */
+
  public has(txId: string): boolean {
    return this.txs.has(txId);
  }
@@ -232,32 +291,6 @@ class RbfCache {
    return changes;
  }

-  public mined(txid): void {
-    if (!this.txs.has(txid)) {
-      return;
-    }
-    const treeId = this.treeMap.get(txid);
-    if (treeId && this.rbfTrees.has(treeId)) {
-      const tree = this.rbfTrees.get(treeId);
-      if (tree) {
-        this.setTreeMined(tree, txid);
-        tree.mined = true;
-        this.dirtyTrees.add(treeId);
-        this.cacheQueue.push({ op: CacheOp.Change, type: 'tree', txid: treeId });
-      }
-    }
-    this.evict(txid);
-  }
-
-  // flag a transaction as removed from the mempool
-  public evict(txid: string, fast: boolean = false): void {
-    this.evictionCount++;
-    if (this.txs.has(txid) && (fast || !this.expiring.has(txid))) {
-      const expiryTime = fast ? Date.now() + (1000 * 60 * 10) : Date.now() + (1000 * 86400); // 24 hours
-      this.addExpiration(txid, expiryTime);
-    }
-  }
-
  // is the transaction involved in a full rbf replacement?
  public isFullRbf(txid: string): boolean {
    const treeId = this.treeMap.get(txid);
@@ -271,6 +304,10 @@ class RbfCache {
    return tree?.fullRbf;
  }

+  /**
+   * Cache maintenance & utility functions
+   */
+
  private cleanup(): void {
    const now = Date.now();
    for (const txid of this.expiring.keys()) {
@@ -299,10 +336,6 @@ class RbfCache {
      for (const tx of (replaces || [])) {
        // recursively remove prior versions from the cache
        this.replacedBy.delete(tx);
-        // if this is the id of a tree, remove that too
-        if (this.treeMap.get(tx) === tx) {
-          this.removeTree(tx);
-        }
        this.remove(tx);
      }
    }
@@ -370,14 +403,21 @@ class RbfCache {
    };
  }

-  public async load({ txs, trees, expiring, mempool }): Promise<void> {
+  public async load({ txs, trees, expiring, mempool, spendMap }): Promise<void> {
    try {
      txs.forEach(txEntry => {
        this.txs.set(txEntry.value.txid, txEntry.value);
      });
      this.staleCount = 0;
-      for (const deflatedTree of trees) {
-        await this.importTree(mempool, deflatedTree.root, deflatedTree.root, deflatedTree, this.txs);
+      for (const deflatedTree of trees.sort((a, b) => Object.keys(b).length - Object.keys(a).length)) {
+        const tree = await this.importTree(mempool, deflatedTree.root, deflatedTree.root, deflatedTree, this.txs);
+        if (tree) {
+          this.addTree(tree.tx.txid, tree);
+          this.updateTreeMap(tree.tx.txid, tree);
+          if (tree.mined) {
+            this.evict(tree.tx.txid);
+          }
+        }
      }
      expiring.forEach(expiringEntry => {
        if (this.txs.has(expiringEntry.key)) {
@@ -385,6 +425,31 @@ class RbfCache {
        }
      });
      this.staleCount = 0;
+
+      // connect cached trees to current mempool transactions
+      const conflicts: Record<string, { replacedBy: MempoolTransactionExtended, replaces: Set<MempoolTransactionExtended> }> = {};
+      for (const tree of this.rbfTrees.values()) {
+        const tx = this.getTx(tree.tx.txid);
+        if (!tx || tree.mined) {
+          continue;
+        }
+        for (const vin of tx.vin) {
+          const conflict = spendMap.get(`${vin.txid}:${vin.vout}`);
+          if (conflict && conflict.txid !== tx.txid) {
+            if (!conflicts[conflict.txid]) {
+              conflicts[conflict.txid] = {
+                replacedBy: conflict,
+                replaces: new Set(),
+              };
+            }
+            conflicts[conflict.txid].replaces.add(tx);
+          }
+        }
+      }
+      for (const { replacedBy, replaces } of Object.values(conflicts)) {
+        this.add([...replaces.values()], replacedBy);
+      }
+
      await this.checkTrees();
      logger.debug(`loaded ${txs.length} txs, ${trees.length} trees into rbf cache, ${expiring.length} due to expire, ${this.staleCount} were stale`);
      this.cleanup();
@@ -426,6 +491,12 @@ class RbfCache {
      return;
    }

+    // if this tx is already in the cache, return early
+    if (this.treeMap.has(txid)) {
+      this.removeTree(deflated.key);
+      return;
+    }
+
    // recursively reconstruct child trees
    for (const childId of treeInfo.replaces) {
      const replaced = await this.importTree(mempool, root, childId, deflated, txs, mined);
@@ -457,10 +528,6 @@ class RbfCache {
      fullRbf: treeInfo.fullRbf,
      replaces,
    };
-    this.treeMap.set(txid, root);
-    if (root === txid) {
-      this.addTree(root, tree);
-    }
    return tree;
  }

@@ -511,6 +578,7 @@ class RbfCache {
      processTxs(txs);
    }

+    // evict missing transactions
    for (const txid of txids) {
      if (!found[txid]) {
        this.evict(txid, false);
--- a/backend/src/api/redis-cache.ts
+++ b/backend/src/api/redis-cache.ts
@@ -365,6 +365,7 @@ class RedisCache {
      trees: rbfTrees.map(loadedTree => { loadedTree.value.key = loadedTree.key; return loadedTree.value; }),
      expiring: rbfExpirations,
      mempool: memPool.getMempool(),
+      spendMap: memPool.getSpendMap(),
    });
  }

--- a/backend/src/api/websocket-handler.ts
+++ b/backend/src/api/websocket-handler.ts
@@ -3,7 +3,8 @@ import * as WebSocket from 'ws';
 import {
  BlockExtended, TransactionExtended, MempoolTransactionExtended, WebsocketResponse,
  OptimizedStatistic, ILoadingIndicators, GbtCandidates, TxTrackingInfo,
-  MempoolDelta, MempoolDeltaTxids
+  MempoolDelta, MempoolDeltaTxids,
+  TransactionCompressed
 } from '../mempool.interfaces';
 import blocks from './blocks';
 import memPool from './mempool';
@@ -315,6 +316,7 @@ class WebsocketHandler {

          if (parsedMessage && parsedMessage['track-mempool-block'] !== undefined) {
            if (Number.isInteger(parsedMessage['track-mempool-block']) && parsedMessage['track-mempool-block'] >= 0) {
+              client['track-mempool-blocks'] = undefined;
              const index = parsedMessage['track-mempool-block'];
              client['track-mempool-block'] = index;
              const mBlocksWithTransactions = mempoolBlocks.getMempoolBlocksWithTransactions();
@@ -324,7 +326,31 @@ class WebsocketHandler {
                blockTransactions: (mBlocksWithTransactions[index]?.transactions || []).map(mempoolBlocks.compressTx),
              });
            } else {
-              client['track-mempool-block'] = null;
+              client['track-mempool-block'] = undefined;
+            }
+          }
+
+          if (parsedMessage && parsedMessage['track-mempool-blocks'] !== undefined) {
+            if (parsedMessage['track-mempool-blocks'].length > 0) {
+              client['track-mempool-block'] = undefined;
+              const indices: number[] = [];
+              const mBlocksWithTransactions = mempoolBlocks.getMempoolBlocksWithTransactions();
+              const updates: { index: number, sequence: number, blockTransactions: TransactionCompressed[] }[] = [];
+              for (const i of parsedMessage['track-mempool-blocks']) {
+                const index = parseInt(i);
+                if (Number.isInteger(index) && index >= 0) {
+                  indices.push(index);
+                  updates.push({
+                    index: index,
+                    sequence: this.mempoolSequence,
+                    blockTransactions: (mBlocksWithTransactions[index]?.transactions || []).map(mempoolBlocks.compressTx),
+                  });
+                }
+              }
+              client['track-mempool-blocks'] = indices;
+              response['projected-block-transactions'] = JSON.stringify(updates);
+            } else {
+              client['track-mempool-blocks'] = undefined;
            }
          }

@@ -520,8 +546,17 @@ class WebsocketHandler {
    }
  }

+  /**
+   *
+   * @param newMempool
+   * @param mempoolSize
+   * @param newTransactions  array of transactions added this mempool update.
+   * @param recentlyDeletedTransactions array of arrays of transactions removed in the last N mempool updates, most recent first.
+   * @param accelerationDelta
+   * @param candidates
+   */
  async $handleMempoolChange(newMempool: { [txid: string]: MempoolTransactionExtended }, mempoolSize: number,
-    newTransactions: MempoolTransactionExtended[], deletedTransactions: MempoolTransactionExtended[], accelerationDelta: string[],
+    newTransactions: MempoolTransactionExtended[], recentlyDeletedTransactions: MempoolTransactionExtended[][], accelerationDelta: string[],
    candidates?: GbtCandidates): Promise<void> {
    if (!this.webSocketServers.length) {
      throw new Error('No WebSocket.Server have been set');
@@ -529,6 +564,8 @@ class WebsocketHandler {

    this.printLogs();

+    const deletedTransactions = recentlyDeletedTransactions.length ? recentlyDeletedTransactions[0] : [];
+
    const transactionIds = (memPool.limitGBT && candidates) ? Object.keys(candidates?.txs || {}) : Object.keys(newMempool);
    let added = newTransactions;
    let removed = deletedTransactions;
@@ -547,7 +584,7 @@ class WebsocketHandler {
    const mBlockDeltas = mempoolBlocks.getMempoolBlockDeltas();
    const mempoolInfo = memPool.getMempoolInfo();
    const vBytesPerSecond = memPool.getVBytesPerSecond();
-    const rbfTransactions = Common.findRbfTransactions(newTransactions, deletedTransactions);
+    const rbfTransactions = Common.findRbfTransactions(newTransactions, recentlyDeletedTransactions.flat());
    const da = difficultyAdjustment.getDifficultyAdjustment();
    const accelerations = memPool.getAccelerations();
    memPool.handleRbfTransactions(rbfTransactions);
@@ -578,7 +615,7 @@ class WebsocketHandler {
    const replacedTransactions: { replaced: string, by: TransactionExtended }[] = [];
    for (const tx of newTransactions) {
      if (rbfTransactions[tx.txid]) {
-        for (const replaced of rbfTransactions[tx.txid]) {
+        for (const replaced of rbfTransactions[tx.txid].replaced) {
          replacedTransactions.push({ replaced: replaced.txid, by: tx });
        }
      }
@@ -897,6 +934,19 @@ class WebsocketHandler {
            delta: mBlockDeltas[index],
          });
        }
+      } else if (client['track-mempool-blocks']?.length && memPool.isInSync()) {
+        const indices = client['track-mempool-blocks'];
+        const updates: string[] = [];
+        for (const index of indices) {
+          if (mBlockDeltas[index]) {
+            updates.push(getCachedResponse(`projected-block-transactions-${index}`, {
+              index: index,
+              sequence: this.mempoolSequence,
+              delta: mBlockDeltas[index],
+            }));
+          }
+        }
+        response['projected-block-transactions'] = '[' + updates.join(',') + ']';
      }

      if (client['track-rbf'] === 'all' && rbfReplacements) {
@@ -947,7 +997,7 @@ class WebsocketHandler {
    await accelerationRepository.$indexAccelerationsForBlock(block, accelerations, structuredClone(transactions));

    const rbfTransactions = Common.findMinedRbfTransactions(transactions, memPool.getSpendMap());
-    memPool.handleMinedRbfTransactions(rbfTransactions);
+    memPool.handleRbfTransactions(rbfTransactions);
    memPool.removeFromSpendMap(transactions);

    if (config.MEMPOOL.AUDIT && memPool.isInSync()) {
@@ -1285,6 +1335,27 @@ class WebsocketHandler {
            });
          }
        }
+      } else if (client['track-mempool-blocks']?.length && memPool.isInSync()) {
+        const indices = client['track-mempool-blocks'];
+        const updates: string[] = [];
+        for (const index of indices) {
+          if (mBlockDeltas && mBlockDeltas[index] && mBlocksWithTransactions[index]?.transactions?.length) {
+            if (mBlockDeltas[index].added.length > (mBlocksWithTransactions[index]?.transactions.length / 2)) {
+              updates.push(getCachedResponse(`projected-block-transactions-full-${index}`, {
+                index: index,
+                sequence: this.mempoolSequence,
+                blockTransactions: mBlocksWithTransactions[index].transactions.map(mempoolBlocks.compressTx),
+              }));
+            } else {
+              updates.push(getCachedResponse(`projected-block-transactions-delta-${index}`, {
+                index: index,
+                sequence: this.mempoolSequence,
+                delta: mBlockDeltas[index],
+              }));
+            }
+          }
+        }
+        response['projected-block-transactions'] = '[' + updates.join(',') + ']';
      }

      if (client['track-mempool-txids']) {
--- a/backend/src/utils/api.ts
+++ b/backend/src/utils/api.ts
@@ -0,0 +1,9 @@
+import { Request, Response } from 'express';
+
+export function handleError(req: Request, res: Response, statusCode: number, errorMessage: string | unknown): void {
+  if (req.accepts('json')) {
+    res.status(statusCode).json({ error: errorMessage });
+  } else {
+    res.status(statusCode).send(errorMessage);
+  }
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -92,7 +92,7 @@
    "ngx-infinite-scroll": "^17.0.0",
    "qrcode": "1.5.1",
    "rxjs": "~7.8.1",
-    "esbuild": "^0.23.0",
+    "esbuild": "^0.24.0",
    "tinyify": "^4.0.0",
    "tlite": "^0.1.9",
    "tslib": "~2.7.0",
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { AppPreloadingStrategy } from './app.preloading-strategy'
 import { BlockViewComponent } from './components/block-view/block-view.component';
 import { EightBlocksComponent } from './components/eight-blocks/eight-blocks.component';
+import { EightMempoolComponent } from './components/eight-mempool/eight-mempool.component';
 import { MempoolBlockViewComponent } from './components/mempool-block-view/mempool-block-view.component';
 import { ClockComponent } from './components/clock/clock.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
@@ -205,6 +206,10 @@ let routes: Routes = [
    path: 'view/blocks',
    component: EightBlocksComponent,
  },
+  {
+    path: 'view/mempool-blocks',
+    component: EightMempoolComponent,
+  },
  {
    path: 'status',
    data: { networks: ['bitcoin', 'liquid'] },
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
@@ -75,6 +75,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
  @Output() changeMode = new EventEmitter<boolean>();

  calculating = true;
+  processing = false;
  selectedOption: 'wait' | 'accel';
  cantPayReason = '';
  quoteError = ''; // error fetching estimate or initial data
@@ -196,9 +197,11 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
    if (changes.scrollEvent && this.scrollEvent) {
      this.scrollToElement('acceleratePreviewAnchor', 'start');
    }
-    if (changes.accelerating) {
-      if ((this.step === 'processing' || this.step === 'paid') && this.accelerating) {
+    if (changes.accelerating && this.accelerating) {
+      if (this.step === 'processing' || this.step === 'paid') {
        this.moveToStep('success');
+      } else { // Edge case where the transaction gets accelerated by someone else or on another session
+        this.closeModal();
      }
    }
  }
@@ -378,9 +381,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   * Account-based acceleration request
   */
  accelerateWithMempoolAccount(): void {
-    if (!this.canPay || this.calculating) {
+    if (!this.canPay || this.calculating || this.processing) {
      return;
    }
+    this.processing = true;
    if (this.accelerationSubscription) {
      this.accelerationSubscription.unsubscribe();
    }
@@ -390,6 +394,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
      this.accelerationUUID
    ).subscribe({
      next: () => {
+        this.processing = false;
        this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
        this.audioService.playSound('ascend-chime-cartoon');
        this.showSuccess = true;
@@ -397,6 +402,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
        this.moveToStep('paid');
      },
      error: (response) => {
+        this.processing = false;
        this.accelerateError = response.error;
      }
    });
@@ -466,10 +472,14 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   * APPLE PAY
   */
  async requestApplePayPayment(): Promise<void> {
+    if (this.processing) {
+      return;
+    }
    if (this.conversionsSubscription) {
      this.conversionsSubscription.unsubscribe();
    }

+    this.processing = true;
    this.conversionsSubscription = this.stateService.conversions$.subscribe(
      async (conversions) => {
        this.conversions = conversions;
@@ -494,6 +504,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
            console.error(`Unable to find apple pay button id='apple-pay-button'`);
            // Try again
            setTimeout(this.requestApplePayPayment.bind(this), 500);
+            this.processing = false;
            return;
          }
          this.loadingApplePay = false;
@@ -505,6 +516,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
              if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
                console.error(`Cannot retreive payment card details`);
                this.accelerateError = 'apple_pay_no_card_details';
+                this.processing = false;
                return;
              }
              const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
@@ -516,6 +528,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                this.accelerationUUID
              ).subscribe({
                next: () => {
+                  this.processing = false;
                  this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
                  this.audioService.playSound('ascend-chime-cartoon');
                  if (this.applePay) {
@@ -526,6 +539,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                  }, 1000);
                },
                error: (response) => {
+                  this.processing = false;
                  this.accelerateError = response.error;
                  if (!(response.status === 403 && response.error === 'not_available')) {
                    setTimeout(() => {
@@ -537,6 +551,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                }
              });
            } else {
+              this.processing = false;
              let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
              if (tokenResult.errors) {
                errorMessage += ` and errors: ${JSON.stringify(
@@ -547,6 +562,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
            }
          });
        } catch (e) {
+          this.processing = false;
          console.error(e);
        }
      }
@@ -557,10 +573,14 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   * GOOGLE PAY
   */
  async requestGooglePayPayment(): Promise<void> {
+    if (this.processing) {
+      return;
+    }
    if (this.conversionsSubscription) {
      this.conversionsSubscription.unsubscribe();
    }
-
+    
+    this.processing = true;
    this.conversionsSubscription = this.stateService.conversions$.subscribe(
      async (conversions) => {
        this.conversions = conversions;
@@ -595,6 +615,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
            if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
              console.error(`Cannot retreive payment card details`);
              this.accelerateError = 'apple_pay_no_card_details';
+              this.processing = false;
              return;
            }
            const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
@@ -606,6 +627,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
              this.accelerationUUID
            ).subscribe({
              next: () => {
+                this.processing = false;
                this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
                this.audioService.playSound('ascend-chime-cartoon');
                if (this.googlePay) {
@@ -616,6 +638,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                }, 1000);
              },
              error: (response) => {
+                this.processing = false;
                this.accelerateError = response.error;
                if (!(response.status === 403 && response.error === 'not_available')) {
                  setTimeout(() => {
@@ -627,6 +650,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
              }
            });
          } else {
+            this.processing = false;
            let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
            if (tokenResult.errors) {
              errorMessage += ` and errors: ${JSON.stringify(
@@ -644,10 +668,14 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   * CASHAPP
   */
  async requestCashAppPayment(): Promise<void> {
+    if (this.processing) {
+      return;
+    }
    if (this.conversionsSubscription) {
      this.conversionsSubscription.unsubscribe();
    }

+    this.processing = true;
    this.conversionsSubscription = this.stateService.conversions$.subscribe(
      async (conversions) => {
        this.conversions = conversions;
@@ -678,6 +706,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
        this.cashAppPay.addEventListener('ontokenization', event => {
          const { tokenResult, error } = event.detail;
          if (error) {
+            this.processing = false;
            this.accelerateError = error;
          } else if (tokenResult.status === 'OK') {
            this.servicesApiService.accelerateWithCashApp$(
@@ -688,6 +717,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
              this.accelerationUUID
            ).subscribe({
              next: () => {
+                this.processing = false;
                this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
                this.audioService.playSound('ascend-chime-cartoon');
                if (this.cashAppPay) {
@@ -702,6 +732,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                }, 1000);
              },
              error: (response) => {
+                this.processing = false;
                this.accelerateError = response.error;
                if (!(response.status === 403 && response.error === 'not_available')) {
                  setTimeout(() => {
--- a/frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.html
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.html
@@ -12,7 +12,7 @@
          </p>
        </div>
        <div class="spacer"></div>
-        <span class="fee">{{ bar.class === 'tx' ? '' : '+' }}{{ bar.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></span>
+        <span class="fee">{{ bar.class === 'tx' ? '' : '+' }}{{ bar.fee | number }} <span class="symbol" i18n="shared.sats">sats</span></span>
        <div class="spacer"></div>
        <div class="spacer"></div>
      </div>
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
@@ -21,14 +21,14 @@
      </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>
+        <td class="value">{{ accelerationInfo.fee | number }} <span class="symbol" i18n="shared.sats">sats</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>
+          <td class="value oobFees">{{ accelerationInfo.feeDelta | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
        } @else {
-          <td class="value oobFees">{{ accelerationInfo.bidBoost | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
+          <td class="value oobFees">{{ accelerationInfo.bidBoost | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
        }
      </tr>
      <tr *ngIf="accelerationInfo.fee && accelerationInfo.weight">
@@ -47,13 +47,14 @@
      <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">
+          <ng-container *ngFor="let pool of accelerationInfo.pools; let i = index;">
            <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'">
+            <br *ngIf="i % 6 === 5">
          </ng-container>
        </td>
      </tr>
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss
@@ -23,6 +23,7 @@

  .label {
    padding-right: 30px;
+    vertical-align: top;
  }

  .pool-logo {
@@ -30,7 +31,8 @@
    height: 22px;
    position: relative;
    top: -1px;
-    margin-right: 3px;
+    margin-right: 4px;
+    margin-bottom: 4px;
  }

  .oobFees {
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
@@ -264,7 +264,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
          type: 'bar',
          barWidth: '90%',
          large: true,
-          barMinHeight: 1,
+          barMinHeight: 3,
        },
      ],
      dataZoom: (this.widget || data.length === 0 )? undefined : [{
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
@@ -33,7 +33,7 @@
              <app-fee-rate [fee]="acceleration.effectiveFee" [weight]="acceleration.effectiveVsize * 4"></app-fee-rate>
            </td>
            <td class="bid text-right">
-              {{ (acceleration.feeDelta) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+              {{ (acceleration.feeDelta) | number }} <span class="symbol" i18n="shared.sats">sats</span>
            </td>
            <td class="time text-right">
              <app-time kind="since" [time]="acceleration.added" [fastRender]="true" [showTooltip]="true"></app-time>
@@ -41,7 +41,7 @@
          </ng-container>
          <ng-container *ngIf="!pending">
            <td *ngIf="acceleration.boost != null" class="fee text-right">
-              {{ acceleration.boost | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+              {{ acceleration.boost | number }} <span class="symbol" i18n="shared.sats">sats</span>
            </td>
            <td *ngIf="acceleration.boost == null" class="fee text-right">
              ~
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
@@ -1,5 +1,5 @@
 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 { BehaviorSubject, Observable, Subscription, catchError, combineLatest, filter, of, switchMap, tap, throttleTime, timer } from 'rxjs';
 import { Acceleration, BlockExtended, SinglePoolStats } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
 import { WebsocketService } from '../../../services/websocket.service';
@@ -61,8 +61,11 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
      this.websocketService.want(['blocks']);
      this.seoService.setTitle($localize`:@@02573b6980a2d611b4361a2595a4447e390058cd:Accelerations`);

-      this.paramSubscription = this.route.params.pipe(
-        tap(params => {
+      this.paramSubscription = combineLatest([
+        this.route.params,
+        timer(0),
+      ]).pipe(
+        tap(([params]) => {
          this.page = +params['page'] || 1;
          this.pageSubject.next(this.page);
        })
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
@@ -10,10 +10,10 @@
      </td>
      <td class="field-value" [class]="chartPositionLeft ? 'chart-left' : ''">
        <div class="effective-fee-container">
-          @if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize)) {
+          @if (accelerationInfo?.acceleratedFeeRate && (!effectiveFeeRate || accelerationInfo.acceleratedFeeRate >= effectiveFeeRate)) {
            <app-fee-rate class="oobFees" [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
          } @else {
-            <app-fee-rate class="oobFees" [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
+            <app-fee-rate class="oobFees" [fee]="effectiveFeeRate"></app-fee-rate>
          }
        </div>
      </td>
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input, Output, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, Output, OnChanges, SimpleChanges, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { Transaction } from '../../../interfaces/electrs.interface';
 import { Acceleration, SinglePoolStats } from '../../../interfaces/node-api.interface';
 import { EChartsOption, PieSeriesOption } from '../../../graphs/echarts';
@@ -23,7 +23,8 @@ function toRGB({r,g,b}): string {
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ActiveAccelerationBox implements OnChanges {
-  @Input() tx: Transaction;
+  @Input() acceleratedBy?: number[];
+  @Input() effectiveFeeRate?: number;
  @Input() accelerationInfo: Acceleration;
  @Input() miningStats: MiningStats;
  @Input() pools: number[];
@@ -41,10 +42,12 @@ export class ActiveAccelerationBox implements OnChanges {
  timespan = '';
  chartInstance: any = undefined;

-  constructor() {}
+  constructor(
+    private cd: ChangeDetectorRef,
+  ) {}

  ngOnChanges(changes: SimpleChanges): void {
-    const pools = this.pools || this.accelerationInfo?.pools || this.tx.acceleratedBy;
+    const pools = this.pools || this.accelerationInfo?.pools || this.acceleratedBy;
    if (pools && this.miningStats) {
      this.prepareChartOptions(pools);
    }
@@ -132,6 +135,7 @@ export class ActiveAccelerationBox implements OnChanges {
        }
      ]
    };
+    this.cd.markForCheck();
  }

  onChartInit(ec) {
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -94,6 +94,20 @@
      </div>
    </ng-container>

+    <ng-container *ngIf="(stateService.backend$ | async) === 'esplora' && address && utxos && utxos.length > 2">
+      <br>
+      <div class="title-tx">
+        <h2 class="text-left" i18n="address.unspent-outputs">Unspent Outputs</h2>
+      </div>
+      <div class="box">
+        <div class="row">
+          <div class="col-md">
+            <app-utxo-graph [utxos]="utxos" left="80" />
+          </div>
+        </div>
+      </div>
+    </ng-container>
+
    <br>
    <div class="title-tx">
      <h2 class="text-left">
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -2,12 +2,12 @@ import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, filter, catchError, map, tap } from 'rxjs/operators';
-import { Address, ChainStats, Transaction, Vin } from '../../interfaces/electrs.interface';
+import { Address, ChainStats, Transaction, Utxo, Vin } from '../../interfaces/electrs.interface';
 import { WebsocketService } from '../../services/websocket.service';
 import { StateService } from '../../services/state.service';
 import { AudioService } from '../../services/audio.service';
 import { ApiService } from '../../services/api.service';
-import { of, merge, Subscription, Observable } from 'rxjs';
+import { of, merge, Subscription, Observable, forkJoin } from 'rxjs';
 import { SeoService } from '../../services/seo.service';
 import { seoDescriptionNetwork } from '../../shared/common.utils';
 import { AddressInformation } from '../../interfaces/node-api.interface';
@@ -104,6 +104,7 @@ export class AddressComponent implements OnInit, OnDestroy {
  addressString: string;
  isLoadingAddress = true;
  transactions: Transaction[];
+  utxos: Utxo[];
  isLoadingTransactions = true;
  retryLoadMore = false;
  error: any;
@@ -159,6 +160,7 @@ export class AddressComponent implements OnInit, OnDestroy {
          this.address = null;
          this.isLoadingTransactions = true;
          this.transactions = null;
+          this.utxos = null;
          this.addressInfo = null;
          this.exampleChannel = null;
          document.body.scrollTo(0, 0);
@@ -212,11 +214,19 @@ export class AddressComponent implements OnInit, OnDestroy {
          this.updateChainStats();
          this.isLoadingAddress = false;
          this.isLoadingTransactions = true;
-          return address.is_pubkey
+          const utxoCount = this.chainStats.utxos + this.mempoolStats.utxos;
+          return forkJoin([
+            address.is_pubkey
              ? this.electrsApiService.getScriptHashTransactions$((address.address.length === 66 ? '21' : '41') + address.address + 'ac')
-              : this.electrsApiService.getAddressTransactions$(address.address);
+              : this.electrsApiService.getAddressTransactions$(address.address),
+            utxoCount >= 2 && utxoCount <= 500 ? (address.is_pubkey
+              ? this.electrsApiService.getScriptHashUtxos$((address.address.length === 66 ? '21' : '41') + address.address + 'ac')
+              : this.electrsApiService.getAddressUtxos$(address.address)) : of([])
+          ]);
        }),
-        switchMap((transactions) => {
+        switchMap(([transactions, utxos]) => {
+          this.utxos = utxos;
+
          this.tempTransactions = transactions;
          if (transactions.length) {
            this.lastTransactionTxId = transactions[transactions.length - 1].txid;
@@ -334,6 +344,23 @@ export class AddressComponent implements OnInit, OnDestroy {
      }
    }

+    // update utxos in-place
+    for (const vin of transaction.vin) {
+      const utxoIndex = this.utxos.findIndex((utxo) => utxo.txid === vin.txid && utxo.vout === vin.vout);
+      if (utxoIndex !== -1) {
+        this.utxos.splice(utxoIndex, 1);
+      }
+    }
+    for (const [index, vout] of transaction.vout.entries()) {
+      if (vout.scriptpubkey_address === this.address.address) {
+        this.utxos.push({
+          txid: transaction.txid,
+          vout: index,
+          value: vout.value,
+          status: JSON.parse(JSON.stringify(transaction.status)),
+        });
+      }
+    }
    return true;
  }

@@ -346,6 +373,26 @@ export class AddressComponent implements OnInit, OnDestroy {
    this.transactions.splice(index, 1);
    this.transactions = this.transactions.slice();

+    // update utxos in-place
+    for (const vin of transaction.vin) {
+      if (vin.prevout?.scriptpubkey_address === this.address.address) {
+        this.utxos.push({
+          txid: vin.txid,
+          vout: vin.vout,
+          value: vin.prevout.value,
+          status: { confirmed: true }, // Assuming the input was confirmed
+        });
+      }
+    }
+    for (const [index, vout] of transaction.vout.entries()) {
+      if (vout.scriptpubkey_address === this.address.address) {
+        const utxoIndex = this.utxos.findIndex((utxo) => utxo.txid === transaction.txid && utxo.vout === index);
+        if (utxoIndex !== -1) {
+          this.utxos.splice(utxoIndex, 1);
+        }
+      }
+    }
+
    return true;
  }

--- a/frontend/src/app/components/amount-selector/amount-selector.component.html
+++ b/frontend/src/app/components/amount-selector/amount-selector.component.html
@@ -0,0 +1,7 @@
+<div [formGroup]="amountForm" class="text-small text-center">
+    <select formControlName="mode" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 70px;" (change)="changeMode()">
+        <option value="btc" i18n="shared.btc|BTC">BTC</option>
+        <option value="sats" i18n="shared.sats">sats</option>
+        <option value="fiat" i18n="shared.fiat|Fiat">Fiat</option>
+    </select>
+</div>
--- a/frontend/src/app/components/amount-selector/amount-selector.component.scss
+++ b/frontend/src/app/components/amount-selector/amount-selector.component.scss
--- a/frontend/src/app/components/amount-selector/amount-selector.component.ts
+++ b/frontend/src/app/components/amount-selector/amount-selector.component.ts
@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { StorageService } from '../../services/storage.service';
+import { StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-amount-selector',
+  templateUrl: './amount-selector.component.html',
+  styleUrls: ['./amount-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AmountSelectorComponent implements OnInit {
+  amountForm: UntypedFormGroup;
+  modes = ['btc', 'sats', 'fiat'];
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private stateService: StateService,
+    private storageService: StorageService,
+  ) { }
+
+  ngOnInit() {
+    this.amountForm = this.formBuilder.group({
+      mode: ['btc']
+    });
+    this.stateService.viewAmountMode$.subscribe((mode) => {
+      this.amountForm.get('mode')?.setValue(mode);
+    });
+  }
+
+  changeMode() {
+    const newMode = this.amountForm.get('mode')?.value;
+    this.storageService.setValue('view-amount-mode', newMode);
+    this.stateService.viewAmountMode$.next(newMode);
+  }
+}
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -681,10 +681,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On

 // WebGL shader attributes
 const attribs = {
-  offset: { type: 'FLOAT', count: 2, pointer: null, offset: 0 },
+  bounds: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
  posX: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
  posY: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
-  posR: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
  colR: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
  colG: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
  colB: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
@@ -707,10 +706,9 @@ varying lowp vec4 vColor;
 // each attribute contains [x: startValue, y: endValue, z: startTime, w: rate]
 // shader interpolates between start and end values at the given rate, from the given time

-attribute vec2 offset;
+attribute vec4 bounds;
 attribute vec4 posX;
 attribute vec4 posY;
-attribute vec4 posR;
 attribute vec4 colR;
 attribute vec4 colG;
 attribute vec4 colB;
@@ -735,10 +733,7 @@ float interpolateAttribute(vec4 attr) {
 void main() {
  vec4 screenTransform = vec4(2.0 / screenSize.x, 2.0 / screenSize.y, -1.0, -1.0);
  // vec4 screenTransform = vec4(1.0 / screenSize.x, 1.0 / screenSize.y, -0.5, -0.5);
-
-  float radius = interpolateAttribute(posR);
-  vec2 position = vec2(interpolateAttribute(posX), interpolateAttribute(posY)) + (radius * offset);
-
+  vec2 position = clamp(vec2(interpolateAttribute(posX), interpolateAttribute(posY)), bounds.xy, bounds.zw);
  gl_Position = vec4(position * screenTransform.xy + screenTransform.zw, 1.0, 1.0);

  float red = interpolateAttribute(colR);
--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@@ -18,6 +18,8 @@ export default class BlockScene {
  animationOffset: number;
  highlightingEnabled: boolean;
  filterFlags: bigint | null = 0b00000100_00000000_00000000_00000000n;
+  x: number;
+  y: number;
  width: number;
  height: number;
  gridWidth: number;
@@ -31,14 +33,16 @@ export default class BlockScene {
  animateUntil = 0;
  dirty: boolean;

-  constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
-      { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
+  constructor({ x = 0, y = 0, width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
+      { x?: number, y?: number, width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
        orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
  ) {
-    this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction });
+    this.init({ x, y,width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction });
  }

-  resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void {
+  resize({ x = 0, y = 0, width = this.width, height = this.height, animate = true }: { x?: number, y?: number, width?: number, height?: number, animate: boolean }): void {
+    this.x = x;
+    this.y = y;
    this.width = width;
    this.height = height;
    this.gridSize = this.width / this.gridWidth;
@@ -238,8 +242,8 @@ export default class BlockScene {
    this.animateUntil = Math.max(this.animateUntil, tx.setHighlight(value));
  }

-  private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
-      { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
+  private init({ x, y, width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
+      { x: number, y: number, width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
        orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
  ): void {
    this.animationDuration = animationDuration || this.animationDuration || 1000;
@@ -264,7 +268,7 @@ export default class BlockScene {
    this.vbytesPerUnit = blockLimit / Math.pow(resolution / 1.02, 2);
    this.gridWidth = resolution;
    this.gridHeight = resolution;
-    this.resize({ width, height, animate: true });
+    this.resize({ x, y, width, height, animate: true });
    this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });

    this.txs = {};
@@ -274,7 +278,7 @@ export default class BlockScene {
  }

  private applyTxUpdate(tx: TxView, update: ViewUpdateParams): void {
-    this.animateUntil = Math.max(this.animateUntil, tx.update(update));
+    this.animateUntil = Math.max(this.animateUntil, tx.update(update, { minX: this.x, maxX: this.x + this.width, minY: this.y, maxY: this.y + this.height }));
  }

  private updateTxColor(tx: TxView, startTime: number, delay: number, animate: boolean = true, duration?: number): void {
@@ -390,6 +394,7 @@ export default class BlockScene {
          position: {
            x: tx.screenPosition.x + (direction === 'right' ? this.width + this.animationOffset : (direction === 'left' ? -this.width - this.animationOffset : 0)),
            y: tx.screenPosition.y + (direction === 'up' ? this.height + this.animationOffset : (direction === 'down' ? -this.height - this.animationOffset : 0)),
+            s: tx.screenPosition.s
          }
        },
        duration: this.animationDuration,
@@ -449,18 +454,18 @@ export default class BlockScene {
          break;
      }
      return {
-        x: x + this.unitPadding - (slotSize / 2),
-        y: y + this.unitPadding - (slotSize / 2),
+        x: this.x + x + this.unitPadding - (slotSize / 2),
+        y: this.y + y + this.unitPadding - (slotSize / 2),
        s: squareSize
      };
    } else {
-      return { x: 0, y: 0, s: 0 };
+      return { x: this.x, y: this.y, s: 0 };
    }
  }

  private screenToGrid(position: Position): Position {
-    let x = position.x;
-    let y = this.height - position.y;
+    let x = position.x - this.x;
+    let y = this.height - (position.y - this.y);
    let t;

    switch (this.orientation) {
--- a/frontend/src/app/components/block-overview-graph/tx-sprite.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-sprite.ts
@@ -2,12 +2,13 @@ import { FastVertexArray } from './fast-vertex-array';
 import { InterpolatedAttribute, Attributes, OptionalAttributes, SpriteUpdateParams, Update } from './sprite-types';

 const attribKeys = ['a', 'b', 't', 'v'];
-const updateKeys = ['x', 'y', 's', 'r', 'g', 'b', 'a'];
+const updateKeys = ['x', 'y', 'r', 'g', 'b', 'a'];
+const attributeKeys = ['x', 'y', 's', 'r', 'g', 'b', 'a'];

 export default class TxSprite {
-  static vertexSize = 30;
+  static vertexSize = 28;
  static vertexCount = 6;
-  static dataSize: number = (30 * 6);
+  static dataSize: number = (28 * 6);

  vertexArray: FastVertexArray;
  vertexPointer: number;
@@ -16,15 +17,26 @@ export default class TxSprite {
  attributes: Attributes;
  tempAttributes: OptionalAttributes;

+  minX: number;
+  maxX: number;
+  minY: number;
+  maxY: number;

-  constructor(params: SpriteUpdateParams, vertexArray: FastVertexArray) {
+
+  constructor(params: SpriteUpdateParams, vertexArray: FastVertexArray, minX: number, maxX: number, minY: number, maxY: number) {
    const offsetTime = params.start;
    this.vertexArray = vertexArray;
-    this.vertexData = Array(VI.length).fill(0);
+    this.vertexData = Array(TxSprite.dataSize).fill(0);
+
    this.updateMap = {
      x: 0, y: 0, s: 0, r: 0, g: 0, b: 0, a: 0
    };

+    this.minX = minX;
+    this.maxX = maxX;
+    this.minY = minY;
+    this.maxY = maxY;
+
    this.attributes = {
      x: { a: params.x, b: params.x, t: offsetTime, v: 0, d: 0 },
      y: { a: params.y, b: params.y, t: offsetTime, v: 0, d: 0 },
@@ -77,11 +89,24 @@ export default class TxSprite {
      minDuration: minimum remaining transition duration when adjust = true
      temp: if true, this update is only temporary (can be reversed with 'resume')
  */
-  update(params: SpriteUpdateParams): void {
+  update(params: SpriteUpdateParams, minX?: number, maxX?: number, minY?: number, maxY?: number): void {
    const offsetTime = params.start || performance.now();
    const v = params.duration > 0 ? (1 / params.duration) : 0;

-    updateKeys.forEach(key => {
+    if (minX != null) {
+      this.minX = minX;
+    }
+    if (maxX != null) {
+      this.maxX = maxX;
+    }
+    if (minY != null) {
+      this.minY = minY;
+    }
+    if (maxY != null) {
+      this.maxY = maxY;
+    }
+
+    attributeKeys.forEach(key => {
      this.updateMap[key] = params[key];
    });

@@ -139,18 +164,32 @@ export default class TxSprite {
        ...this.tempAttributes
      };
    }
-    const size = attributes.s;

    // update vertex data in place
    // ugly, but avoids overhead of allocating large temporary arrays
-    const vertexStride = VI.length + 2;
+    const vertexStride = VI.length + 4;
    for (let vertex = 0; vertex < 6; vertex++) {
-      this.vertexData[vertex * vertexStride] = vertexOffsetFactors[vertex][0];
-      this.vertexData[(vertex * vertexStride) + 1] = vertexOffsetFactors[vertex][1];
-      for (let step = 0; step < VI.length; step++) {
+      this.vertexData[vertex * vertexStride] = this.minX;
+      this.vertexData[(vertex * vertexStride) + 1] = this.minY;
+      this.vertexData[(vertex * vertexStride) + 2] = this.maxX;
+      this.vertexData[(vertex * vertexStride) + 3] = this.maxY;
+
+      // x
+      this.vertexData[(vertex * vertexStride) + 4] = attributes[VI[0].a][VI[0].f] + (vertexOffsetFactors[vertex][0] * attributes.s.a);
+      this.vertexData[(vertex * vertexStride) + 5] = attributes[VI[1].a][VI[1].f] + (vertexOffsetFactors[vertex][0] * attributes.s.b);
+      this.vertexData[(vertex * vertexStride) + 6] = attributes[VI[2].a][VI[2].f];
+      this.vertexData[(vertex * vertexStride) + 7] = attributes[VI[3].a][VI[3].f];
+
+      // y
+      this.vertexData[(vertex * vertexStride) + 8] = attributes[VI[4].a][VI[4].f] + (vertexOffsetFactors[vertex][1] * attributes.s.a);
+      this.vertexData[(vertex * vertexStride) + 9] = attributes[VI[5].a][VI[5].f] + (vertexOffsetFactors[vertex][1] * attributes.s.b);
+      this.vertexData[(vertex * vertexStride) + 10] = attributes[VI[6].a][VI[6].f];
+      this.vertexData[(vertex * vertexStride) + 11] = attributes[VI[7].a][VI[7].f];
+
+      for (let step = 8; step < VI.length; step++) {
        // components of each field in the vertex array are defined by an entry in VI:
        // VI[i].a is the attribute, VI[i].f is the inner field, VI[i].offA and VI[i].offB are offset factors
-        this.vertexData[(vertex * vertexStride) + step + 2] = attributes[VI[step].a][VI[step].f];
+        this.vertexData[(vertex * vertexStride) + step + 4] = attributes[VI[step].a][VI[step].f];
      }
    }

--- a/frontend/src/app/components/block-overview-graph/tx-view.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-view.ts
@@ -106,7 +106,7 @@ export default class TxView implements TransactionStripped {

    returns minimum transition end time
  */
-  update(params: ViewUpdateParams): number {
+  update(params: ViewUpdateParams, { minX, maxX, minY, maxY }: { minX: number, maxX: number, minY: number, maxY: number }): number {
    if (params.jitter) {
      params.delay += (Math.random() * params.jitter);
    }
@@ -115,21 +115,35 @@ export default class TxView implements TransactionStripped {
      this.initialised = true;
      this.sprite = new TxSprite(
        toSpriteUpdate(params),
-        this.vertexArray
+        this.vertexArray,
+        minX,
+        maxX,
+        minY,
+        maxY
      );
      // apply any pending hover event
      if (this.hover) {
        params.duration = Math.max(params.duration, hoverTransitionTime);
-        this.sprite.update({
-          ...this.hoverColor,
-          duration: hoverTransitionTime,
-          adjust: false,
-          temp: true
-        });
+        this.sprite.update(
+          {
+            ...this.hoverColor,
+            duration: hoverTransitionTime,
+            adjust: false,
+            temp: true
+          },
+          minX,
+          maxX,
+          minY,
+          maxY
+        );
      }
    } else {
      this.sprite.update(
-        toSpriteUpdate(params)
+        toSpriteUpdate(params),
+        minX,
+        maxX,
+        minY,
+        maxY
      );
    }
    this.dirty = false;
--- a/frontend/src/app/components/block-overview-multi/block-overview-multi.component.html
+++ b/frontend/src/app/components/block-overview-multi/block-overview-multi.component.html
@@ -0,0 +1,24 @@
+
+<div class="block-overview-graph">
+  <canvas *browserOnly class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
+  @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"
+    [clickable]="!!selectedTx"
+    [auditEnabled]="auditHighlighting"
+    [blockConversion]="blockConversion"
+    [filterFlags]="activeFilterFlags"
+    [filterMode]="filterMode"
+    [relativeTime]="relativeTime"
+  ></app-block-overview-tooltip>
+  <app-block-filters *ngIf="webGlEnabled && showFilters && filtersAvailable" [excludeFilters]="excludeFilters" [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
+  <div *ngIf="!webGlEnabled" class="placeholder">
+    <span i18n="webgl-disabled">Your browser does not support this feature.</span>
+  </div>
+</div>
--- a/frontend/src/app/components/block-overview-multi/block-overview-multi.component.scss
+++ b/frontend/src/app/components/block-overview-multi/block-overview-multi.component.scss
@@ -0,0 +1,67 @@
+.block-overview-graph {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--stat-box-bg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-column: 1/-1;
+
+  .placeholder {
+    display: flex;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.graph-alignment {
+  position: relative;
+  width: 100%;
+}
+
+.grid-align {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 75px);
+  justify-content: center;
+}
+
+.block-overview-canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &.clickable {
+    cursor: pointer;
+  }
+}
+
+.loader-wrapper {
+  position: absolute;
+  background: #181b2d7f;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 500ms 500ms;
+  pointer-events: none;
+
+  &.hidden {
+    opacity: 0;
+  }
+}
--- a/frontend/src/app/components/block-overview-multi/block-overview-multi.component.ts
+++ b/frontend/src/app/components/block-overview-multi/block-overview-multi.component.ts
@@ -0,0 +1,647 @@
+import { Component, ElementRef, ViewChild, HostListener, Input, Output, EventEmitter, NgZone, AfterViewInit, OnDestroy, OnChanges } from '@angular/core';
+import { TransactionStripped } from '../../interfaces/node-api.interface';
+import { FastVertexArray } from '../block-overview-graph/fast-vertex-array';
+import BlockScene from '../block-overview-graph/block-scene';
+import TxSprite from '../block-overview-graph/tx-sprite';
+import TxView from '../block-overview-graph/tx-view';
+import { Color, Position } from '../block-overview-graph/sprite-types';
+import { Price } from '../../services/price.service';
+import { StateService } from '../../services/state.service';
+import { ThemeService } from '../../services/theme.service';
+import { Subscription } from 'rxjs';
+import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from '../block-overview-graph/utils';
+import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
+import { detectWebGL } from '../../shared/graphs.utils';
+
+const unmatchedOpacity = 0.2;
+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),
+};
+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),
+};
+
+@Component({
+  selector: 'app-block-overview-multi',
+  templateUrl: './block-overview-multi.component.html',
+  styleUrls: ['./block-overview-multi.component.scss'],
+})
+export class BlockOverviewMultiComponent implements AfterViewInit, OnDestroy, OnChanges {
+  @Input() isLoading: boolean;
+  @Input() resolution: number;
+  @Input() numBlocks: number;
+  @Input() padding: number = 0;
+  @Input() blockWidth: number = 360;
+  @Input() autofit: boolean = false;
+  @Input() blockLimit: number;
+  @Input() orientation = 'left';
+  @Input() flip = true;
+  @Input() animationDuration: number = 1000;
+  @Input() animationOffset: number | null = null;
+  @Input() disableSpinner = false;
+  @Input() mirrorTxid: string | void;
+  @Input() unavailable: boolean = false;
+  @Input() auditHighlighting: boolean = false;
+  @Input() showFilters: boolean = false;
+  @Input() excludeFilters: string[] = [];
+  @Input() filterFlags: bigint | null = null;
+  @Input() filterMode: FilterMode = 'and';
+  @Input() gradientMode: 'fee' | 'age' = 'fee';
+  @Input() relativeTime: number | null;
+  @Input() blockConversion: Price;
+  @Input() overrideColors: ((tx: TxView) => Color) | null = null;
+  @Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>();
+  @Output() txHoverEvent = new EventEmitter<string>();
+  @Output() readyEvent = new EventEmitter();
+
+  @ViewChild('blockCanvas')
+  canvas: ElementRef<HTMLCanvasElement>;
+  themeChangedSubscription: Subscription;
+
+  gl: WebGLRenderingContext;
+  animationFrameRequest: number;
+  animationHeartBeat: number;
+  displayWidth: number;
+  displayHeight: number;
+  displayBlockWidth: number;
+  displayPadding: number;
+  cssWidth: number;
+  cssHeight: number;
+  shaderProgram: WebGLProgram;
+  vertexArray: FastVertexArray;
+  running: boolean;
+  scenes: BlockScene[] = [];
+  hoverTx: TxView | void;
+  selectedTx: TxView | void;
+  highlightTx: TxView | void;
+  mirrorTx: TxView | void;
+  tooltipPosition: Position;
+
+  readyNextFrame = false;
+  lastUpdate: number = 0;
+  pendingUpdates: {
+    count: number,
+    add: { [txid: string]: TransactionStripped },
+    remove: { [txid: string]: string },
+    change: { [txid: string]: { txid: string, rate: number | undefined, acc: boolean | undefined } },
+    direction?: string,
+  }[] = [];
+
+  searchText: string;
+  searchSubscription: Subscription;
+  filtersAvailable: boolean = true;
+  activeFilterFlags: bigint | null = null;
+
+  webGlEnabled = true;
+
+  constructor(
+    readonly ngZone: NgZone,
+    readonly elRef: ElementRef,
+    public stateService: StateService,
+    private themeService: ThemeService,
+  ) {
+    this.webGlEnabled = this.stateService.isBrowser && detectWebGL();
+    this.vertexArray = new FastVertexArray(512, TxSprite.dataSize);
+  }
+
+  ngAfterViewInit(): void {
+    if (this.canvas) {
+      this.canvas.nativeElement.addEventListener('webglcontextlost', this.handleContextLost, false);
+      this.canvas.nativeElement.addEventListener('webglcontextrestored', this.handleContextRestored, false);
+      this.gl = this.canvas.nativeElement.getContext('webgl');
+      this.initScenes();
+
+      if (this.gl) {
+        this.initCanvas();
+        this.resizeCanvas();
+        this.themeChangedSubscription = this.themeService.themeChanged$.subscribe(() => {
+          for (const scene of this.scenes) {
+            scene.setColorFunction(this.getColorFunction());
+          }
+        });
+      }
+    }
+  }
+
+  initScenes(): void {
+    for (const scene of this.scenes) {
+      if (scene) {
+        scene.destroy();
+      }
+    }
+    this.scenes = [];
+    this.pendingUpdates = [];
+    for (let i = 0; i < this.numBlocks; i++) {
+      this.scenes.push(null);
+      this.pendingUpdates.push({
+        count: 0,
+        add: {},
+        remove: {},
+        change: {},
+        direction: 'left',
+      });
+    }
+    this.resizeCanvas();
+    this.start();
+  }
+
+  ngOnChanges(changes): void {
+    if (changes.numBlocks) {
+      this.initScenes();
+    }
+    if (changes.orientation || changes.flip) {
+      for (const scene of this.scenes) {
+        scene?.setOrientation(this.orientation, this.flip);
+      }
+    }
+    if (changes.auditHighlighting) {
+      this.setHighlightingEnabled(this.auditHighlighting);
+    }
+    if (changes.overrideColor) {
+      for (const scene of this.scenes) {
+        scene?.setColorFunction(this.getFilterColorFunction(0n, this.gradientMode));
+      }
+    }
+    if ((changes.filterFlags || changes.showFilters || changes.filterMode || changes.gradientMode)) {
+      this.setFilterFlags();
+    }
+  }
+
+  setFilterFlags(goggle?: ActiveFilter): void {
+    this.filterMode = goggle?.mode || this.filterMode;
+    this.gradientMode = goggle?.gradient || this.gradientMode;
+    this.activeFilterFlags = goggle?.filters ? toFlags(goggle.filters) : this.filterFlags;
+    for (const scene of this.scenes) {
+      if (this.activeFilterFlags != null && this.filtersAvailable) {
+        scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags, this.gradientMode));
+      } else {
+        scene.setColorFunction(this.getFilterColorFunction(0n, this.gradientMode));
+      }
+    }
+    this.start();
+  }
+
+  ngOnDestroy(): void {
+    if (this.animationFrameRequest) {
+      cancelAnimationFrame(this.animationFrameRequest);
+      clearTimeout(this.animationHeartBeat);
+    }
+    if (this.canvas) {
+      this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
+      this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
+      this.themeChangedSubscription?.unsubscribe();
+    }
+  }
+
+  clear(block: number, direction): void {
+    this.exit(block, direction);
+    this.start();
+  }
+
+  destroy(block: number): void {
+    if (this.scenes[block]) {
+      this.scenes[block].destroy();
+      this.clearUpdateQueue(block);
+      this.start();
+    }
+  }
+
+  // initialize the scene without any entry transition
+  setup(block: number, transactions: TransactionStripped[], sort: boolean = false): void {
+    const filtersAvailable = transactions.reduce((flagSet, tx) => flagSet || tx.flags > 0, false);
+    if (filtersAvailable !== this.filtersAvailable) {
+      this.setFilterFlags();
+    }
+    this.filtersAvailable = filtersAvailable;
+    if (this.scenes[block]) {
+      this.clearUpdateQueue(block);
+      this.scenes[block].setup(transactions, sort);
+      this.readyNextFrame = true;
+      this.start();
+    }
+  }
+
+  enter(block: number, transactions: TransactionStripped[], direction: string): void {
+    if (this.scenes[block]) {
+      this.clearUpdateQueue(block);
+      this.scenes[block].enter(transactions, direction);
+      this.start();
+    }
+  }
+
+  exit(block: number, direction: string): void {
+    if (this.scenes[block]) {
+      this.clearUpdateQueue(block);
+      this.scenes[block].exit(direction);
+      this.start();
+    }
+  }
+
+  replace(block: number, transactions: TransactionStripped[], direction: string, sort: boolean = true, startTime?: number): void {
+    if (this.scenes[block]) {
+      this.clearUpdateQueue(block);
+      this.scenes[block].replace(transactions || [], direction, sort, startTime);
+      this.start();
+    }
+  }
+
+  // collates deferred updates into a set of consistent pending changes
+  queueUpdate(block: number, add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left'): void {
+    for (const tx of add) {
+      this.pendingUpdates[block].add[tx.txid] = tx;
+      delete this.pendingUpdates[block].remove[tx.txid];
+      delete this.pendingUpdates[block].change[tx.txid];
+    }
+    for (const txid of remove) {
+      delete this.pendingUpdates[block].add[txid];
+      this.pendingUpdates[block].remove[txid] = txid;
+      delete this.pendingUpdates[block].change[txid];
+    }
+    for (const tx of change) {
+      if (this.pendingUpdates[block].add[tx.txid]) {
+        this.pendingUpdates[block].add[tx.txid].rate = tx.rate;
+        this.pendingUpdates[block].add[tx.txid].acc = tx.acc;
+      } else {
+        this.pendingUpdates[block].change[tx.txid] = tx;
+      }
+    }
+    this.pendingUpdates[block].direction = direction;
+    this.pendingUpdates[block].count++;
+  }
+
+  deferredUpdate(block: number, add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left'): void {
+    this.queueUpdate(block, add, remove, change, direction);
+    this.applyQueuedUpdates();
+  }
+
+  applyQueuedUpdates(): void {
+    for (const [index, pendingUpdate] of this.pendingUpdates.entries()) {
+      if (pendingUpdate.count && performance.now() > (this.lastUpdate + this.animationDuration)) {
+        this.applyUpdate(index, Object.values(pendingUpdate.add), Object.values(pendingUpdate.remove), Object.values(pendingUpdate.change), pendingUpdate.direction);
+        this.clearUpdateQueue(index);
+      }
+    }
+  }
+
+  clearUpdateQueue(block: number): void {
+    this.pendingUpdates[block] = {
+      count: 0,
+      add: {},
+      remove: {},
+      change: {},
+    };
+    this.lastUpdate = performance.now();
+  }
+
+  update(block: number, add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
+    // merge any pending changes into this update
+    this.queueUpdate(block, add, remove, change, direction);
+    this.applyUpdate(block,Object.values(this.pendingUpdates[block].add), Object.values(this.pendingUpdates[block].remove), Object.values(this.pendingUpdates[block].change), direction, resetLayout);
+    this.clearUpdateQueue(block);
+  }
+
+  applyUpdate(block: number, add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
+    if (this.scenes[block]) {
+      add = add.filter(tx => !this.scenes[block].txs[tx.txid]);
+      remove = remove.filter(txid => this.scenes[block].txs[txid]);
+      change = change.filter(tx => this.scenes[block].txs[tx.txid]);
+
+      if (this.gradientMode === 'age') {
+        this.scenes[block].updateAllColors();
+      }
+      this.scenes[block].update(add, remove, change, direction, resetLayout);
+      this.start();
+      this.lastUpdate = performance.now();
+    }
+  }
+
+  initCanvas(): void {
+    if (!this.canvas || !this.gl) {
+      return;
+    }
+
+    this.gl.clearColor(0.0, 0.0, 0.0, 0.0);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+
+    const shaderSet = [
+      {
+        type: this.gl.VERTEX_SHADER,
+        src: vertShaderSrc
+      },
+      {
+        type: this.gl.FRAGMENT_SHADER,
+        src: fragShaderSrc
+      }
+    ];
+
+    this.shaderProgram = this.buildShaderProgram(shaderSet);
+
+    this.gl.useProgram(this.shaderProgram);
+
+    // Set up alpha blending
+    this.gl.enable(this.gl.BLEND);
+    this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
+
+    const glBuffer = this.gl.createBuffer();
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, glBuffer);
+
+    /* SET UP SHADER ATTRIBUTES */
+    Object.keys(attribs).forEach((key, i) => {
+      attribs[key].pointer = this.gl.getAttribLocation(this.shaderProgram, key);
+      this.gl.enableVertexAttribArray(attribs[key].pointer);
+    });
+
+    this.start();
+  }
+
+  handleContextLost(event): void {
+    event.preventDefault();
+    cancelAnimationFrame(this.animationFrameRequest);
+    this.animationFrameRequest = null;
+    this.running = false;
+    this.gl = null;
+  }
+
+  handleContextRestored(event): void {
+    if (this.canvas?.nativeElement) {
+      this.gl = this.canvas.nativeElement.getContext('webgl');
+      if (this.gl) {
+        this.initCanvas();
+      }
+    }
+  }
+
+  @HostListener('window:resize', ['$event'])
+  resizeCanvas(): void {
+    if (this.canvas) {
+      this.cssWidth = this.canvas.nativeElement.offsetParent.clientWidth;
+      this.cssHeight = this.canvas.nativeElement.offsetParent.clientHeight;
+      this.displayWidth = window.devicePixelRatio * this.cssWidth;
+      this.displayHeight = window.devicePixelRatio * this.cssHeight;
+      this.displayBlockWidth = window.devicePixelRatio * this.blockWidth;
+      this.displayPadding = window.devicePixelRatio * this.padding;
+      this.canvas.nativeElement.width = this.displayWidth;
+      this.canvas.nativeElement.height = this.displayHeight;
+      if (this.gl) {
+        this.gl.viewport(0, 0, this.displayWidth, this.displayHeight);
+      }
+      for (let i = 0; i < this.scenes.length; i++) {
+        const blocksPerRow = Math.floor(this.displayWidth / (this.displayBlockWidth + (this.displayPadding * 2)));
+        const x = this.displayPadding + ((i % blocksPerRow) * (this.displayBlockWidth + (this.displayPadding * 2)));
+        const row = Math.floor(i / blocksPerRow);
+        const y = this.displayPadding + this.displayHeight - ((row + 1) * (this.displayBlockWidth + (this.displayPadding * 2)));
+        if (this.scenes[i]) {
+          this.scenes[i].resize({ x, y, width: this.displayBlockWidth, height: this.displayBlockWidth, animate: false });
+          this.start();
+        } else {
+          this.scenes[i] = new BlockScene({ x, y, width: this.displayBlockWidth, height: this.displayBlockWidth, resolution: this.resolution,
+            blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, theme: this.themeService,
+            highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset,
+          colorFunction: this.getColorFunction() });
+          this.start();
+        }
+      }
+    }
+  }
+
+  compileShader(src, type): WebGLShader {
+    if (!this.gl) {
+      return;
+    }
+    const shader = this.gl.createShader(type);
+
+    this.gl.shaderSource(shader, src);
+    this.gl.compileShader(shader);
+
+    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+      console.log(`Error compiling ${type === this.gl.VERTEX_SHADER ? 'vertex' : 'fragment'} shader:`);
+      console.log(this.gl.getShaderInfoLog(shader));
+    }
+    return shader;
+  }
+
+  buildShaderProgram(shaderInfo): WebGLProgram {
+    if (!this.gl) {
+      return;
+    }
+    const program = this.gl.createProgram();
+
+    shaderInfo.forEach((desc) => {
+      const shader = this.compileShader(desc.src, desc.type);
+      if (shader) {
+        this.gl.attachShader(program, shader);
+      }
+    });
+
+    this.gl.linkProgram(program);
+
+    if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+      console.log('Error linking shader program:');
+      console.log(this.gl.getProgramInfoLog(program));
+    }
+
+    return program;
+  }
+
+  start(): void {
+    this.running = true;
+    this.ngZone.runOutsideAngular(() => this.doRun());
+  }
+
+  doRun(): void {
+    if (this.animationFrameRequest) {
+      cancelAnimationFrame(this.animationFrameRequest);
+    }
+    this.animationFrameRequest = requestAnimationFrame(() => this.run());
+  }
+
+  run(now?: DOMHighResTimeStamp): void {
+    if (!now) {
+      now = performance.now();
+    }
+    this.applyQueuedUpdates();
+    // skip re-render if there's no change to the scene
+    if (this.scenes.length && this.gl) {
+      /* SET UP SHADER UNIFORMS */
+      // screen dimensions
+      this.gl.uniform2f(this.gl.getUniformLocation(this.shaderProgram, 'screenSize'), this.displayWidth, this.displayHeight);
+      // frame timestamp
+      this.gl.uniform1f(this.gl.getUniformLocation(this.shaderProgram, 'now'), now);
+
+      if (this.vertexArray.dirty) {
+        /* SET UP SHADER ATTRIBUTES */
+        Object.keys(attribs).forEach((key, i) => {
+          this.gl.vertexAttribPointer(attribs[key].pointer,
+          attribs[key].count,  // number of primitives in this attribute
+          this.gl[attribs[key].type],  // type of primitive in this attribute (e.g. gl.FLOAT)
+          false, // never normalised
+          stride,   // distance between values of the same attribute
+          attribs[key].offset);  // offset of the first value
+        });
+
+        const pointArray = this.vertexArray.getVertexData();
+
+        if (pointArray.length) {
+          this.gl.bufferData(this.gl.ARRAY_BUFFER, pointArray, this.gl.DYNAMIC_DRAW);
+          this.gl.drawArrays(this.gl.TRIANGLES, 0, pointArray.length / TxSprite.vertexSize);
+        }
+        this.vertexArray.dirty = false;
+      } else {
+        const pointArray = this.vertexArray.getVertexData();
+        if (pointArray.length) {
+          this.gl.drawArrays(this.gl.TRIANGLES, 0, pointArray.length / TxSprite.vertexSize);
+        }
+      }
+
+      if (this.readyNextFrame) {
+        this.readyNextFrame = false;
+        this.readyEvent.emit();
+      }
+    }
+
+    /* LOOP */
+    if (this.running && this.scenes.length && now <= (this.scenes.reduce((max, scene) => scene.animateUntil > max ? scene.animateUntil : max, 0) + 500)) {
+      this.doRun();
+    } else {
+      if (this.animationHeartBeat) {
+        clearTimeout(this.animationHeartBeat);
+      }
+      this.animationHeartBeat = window.setTimeout(() => {
+        this.start();
+      }, 1000);
+    }
+  }
+
+  setHighlightingEnabled(enabled: boolean): void {
+    for (const scene of this.scenes) {
+      scene.setHighlighting(enabled);
+    }
+    this.start();
+  }
+
+  getColorFunction(): ((tx: TxView) => Color) {
+    if (this.overrideColors) {
+      return this.overrideColors;
+    } else if (this.filterFlags) {
+      return this.getFilterColorFunction(this.filterFlags, this.gradientMode);
+    } else if (this.activeFilterFlags) {
+      return this.getFilterColorFunction(this.activeFilterFlags, this.gradientMode);
+    } else {
+      return this.getFilterColorFunction(0n, this.gradientMode);
+    }
+  }
+
+  getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
+    return (tx: TxView) => {
+      if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
+        if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
+          return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
+        } else {
+          return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000));
+        }
+      } else {
+        if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
+          return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
+            tx,
+            defaultColors.unmatchedfee,
+            unmatchedAuditColors,
+            this.relativeTime || (Date.now() / 1000)
+          );
+        } else {
+          return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : contrastColorFunction(
+            tx,
+            contrastColors.unmatchedfee,
+            unmatchedContrastAuditColors,
+            this.relativeTime || (Date.now() / 1000)
+          );
+        }
+      }
+    };
+  }
+}
+
+// WebGL shader attributes
+const attribs = {
+  bounds: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  posX: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  posY: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  colR: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  colG: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  colB: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  colA: { type: 'FLOAT', count: 4, pointer: null, offset: 0 }
+};
+// Calculate the number of bytes per vertex based on specified attributes
+const stride = Object.values(attribs).reduce((total, attrib) => {
+  return total + (attrib.count * 4);
+}, 0);
+// Calculate vertex attribute offsets
+for (let i = 0, offset = 0; i < Object.keys(attribs).length; i++) {
+  const attrib = Object.values(attribs)[i];
+  attrib.offset = offset;
+  offset += (attrib.count * 4);
+}
+
+const vertShaderSrc = `
+varying lowp vec4 vColor;
+
+// each attribute contains [x: startValue, y: endValue, z: startTime, w: rate]
+// shader interpolates between start and end values at the given rate, from the given time
+
+attribute vec4 bounds;
+attribute vec4 posX;
+attribute vec4 posY;
+attribute vec4 colR;
+attribute vec4 colG;
+attribute vec4 colB;
+attribute vec4 colA;
+
+uniform vec2 screenSize;
+uniform float now;
+
+float smootherstep(float x) {
+  x = clamp(x, 0.0, 1.0);
+  float ix = 1.0 - x;
+  x = x * x;
+  return x / (x + ix * ix);
+}
+
+float interpolateAttribute(vec4 attr) {
+  float d = (now - attr.z) * attr.w;
+  float delta = smootherstep(d);
+  return mix(attr.x, attr.y, delta);
+}
+
+void main() {
+  vec4 screenTransform = vec4(2.0 / screenSize.x, 2.0 / screenSize.y, -1.0, -1.0);
+  // vec4 screenTransform = vec4(1.0 / screenSize.x, 1.0 / screenSize.y, -0.5, -0.5);
+  vec2 position = clamp(vec2(interpolateAttribute(posX), interpolateAttribute(posY)), bounds.xy, bounds.zw);
+  gl_Position = vec4(position * screenTransform.xy + screenTransform.zw, 1.0, 1.0);
+
+  float red = interpolateAttribute(colR);
+  float green = interpolateAttribute(colG);
+  float blue = interpolateAttribute(colB);
+  float alpha = interpolateAttribute(colA);
+
+  vColor = vec4(red, green, blue, alpha);
+}
+`;
+
+const fragShaderSrc = `
+varying lowp vec4 vColor;
+
+void main() {
+  gl_FragColor = vColor;
+  // premultiply alpha
+  gl_FragColor.rgb *= gl_FragColor.a;
+}
+`;
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
@@ -40,7 +40,7 @@
      </tr>
      <tr>
        <td class="label" i18n="transaction.fee|Transaction fee">Fee</td>
-        <td class="value">{{ fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span>
+        <td class="value">{{ fee | number }} <span class="symbol" i18n="shared.sats">sats</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span>
      </tr>
      <tr>
        <td class="label" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
--- a/frontend/src/app/components/block/block-preview.component.ts
+++ b/frontend/src/app/components/block/block-preview.component.ts
@@ -137,7 +137,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
                })
              ),
            this.stateService.env.ACCELERATOR === true && block.height > 819500
-              ? this.servicesApiService.getAccelerationHistory$({ blockHeight: block.height })
+              ? this.servicesApiService.getAllAccelerationHistory$({ blockHeight: block.height })
                .pipe(catchError(() => {
                  return of([]);
                }))
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -319,7 +319,7 @@ export class BlockComponent implements OnInit, OnDestroy {
    this.accelerationsSubscription = this.block$.pipe(
      switchMap((block) => {
        return this.stateService.env.ACCELERATOR === true && block.height > 819500
-          ? this.servicesApiService.getAccelerationHistory$({ blockHeight: block.height })
+          ? this.servicesApiService.getAllAccelerationHistory$({ blockHeight: block.height })
            .pipe(catchError(() => {
              return of([]);
            }))
@@ -327,7 +327,7 @@ export class BlockComponent implements OnInit, OnDestroy {
      })
    ).subscribe((accelerations) => {
      this.accelerations = accelerations;
-      if (accelerations.length) {
+      if (accelerations.length && this.strippedTransactions) { // Don't call setupBlockAudit if we don't have transactions yet; it will be called later in overviewSubscription
        this.setupBlockAudit();
      }
    });
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -1,7 +1,10 @@
 <app-indexing-progress *ngIf="!widget"></app-indexing-progress>

 <div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget, 'legacy': !isMempoolModule}">
-  <h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Blocks</h1>
+  <div *ngIf="!widget" class="float-left" style="display: flex; width: 100%; align-items: center;">
+    <h1 i18n="master-page.blocks">Blocks</h1>
+    <app-svg-images name="blocks-2-3" style="width: 275px; max-width: 90%; margin-top: -10px"></app-svg-images>
+  </div>
  <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>

  <div class="clearfix"></div>
--- a/frontend/src/app/components/calculator/calculator.component.html
+++ b/frontend/src/app/components/calculator/calculator.component.html
@@ -12,7 +12,7 @@
          <div class="input-group-prepend">
            <span class="input-group-text">{{ currency$ | async }}</span>
          </div>
-          <input type="text" class="form-control" formControlName="fiat" (input)="transformInput('fiat')" (click)="selectAll($event)">
+          <input type="text" inputmode="numeric" class="form-control" formControlName="fiat" (input)="transformInput('fiat')" (click)="selectAll($event)">
          <app-clipboard [button]="true" [text]="form.get('fiat').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
        </div>

@@ -20,7 +20,7 @@
          <div class="input-group-prepend">
            <span class="input-group-text">BTC</span>
          </div>
-          <input type="text" class="form-control" formControlName="bitcoin" (input)="transformInput('bitcoin')" (click)="selectAll($event)">
+          <input type="text" inputmode="numeric" class="form-control" formControlName="bitcoin" (input)="transformInput('bitcoin')" (click)="selectAll($event)">
          <app-clipboard [button]="true" [text]="form.get('bitcoin').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
        </div>

@@ -28,7 +28,7 @@
          <div class="input-group-prepend">
            <span class="input-group-text" i18n="shared.sats">sats</span>
          </div>
-          <input type="text" class="form-control" formControlName="satoshis" (input)="transformInput('satoshis')" (click)="selectAll($event)">
+          <input type="text" inputmode="numeric" class="form-control" formControlName="satoshis" (input)="transformInput('satoshis')" (click)="selectAll($event)">
          <app-clipboard [button]="true" [text]="form.get('satoshis').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
        </div>
      </form>
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
@@ -77,7 +77,7 @@ export class DifficultyMiningComponent implements OnInit {
          base: `${da.progressPercent.toFixed(2)}%`,
          change: da.difficultyChange,
          progress: da.progressPercent,
-          remainingBlocks: da.remainingBlocks - 1,
+          remainingBlocks: da.remainingBlocks,
          colorAdjustments,
          colorPreviousAdjustments,
          newDifficultyHeight: da.nextRetargetHeight,
--- a/frontend/src/app/components/difficulty/difficulty.component.ts
+++ b/frontend/src/app/components/difficulty/difficulty.component.ts
@@ -153,8 +153,8 @@ export class DifficultyComponent implements OnInit {
          base: `${da.progressPercent.toFixed(2)}%`,
          change: da.difficultyChange,
          progress: da.progressPercent,
-          minedBlocks: this.currentIndex + 1,
-          remainingBlocks: da.remainingBlocks - 1,
+          minedBlocks: this.currentIndex,
+          remainingBlocks: da.remainingBlocks,
          expectedBlocks: Math.floor(da.expectedBlocks),
          colorAdjustments,
          colorPreviousAdjustments,
--- a/frontend/src/app/components/eight-blocks/eight-blocks.component.html
+++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.html
@@ -1,23 +1,25 @@
+
+<app-block-overview-multi
+  #blockGraph
+  [isLoading]="false"
+  [numBlocks]="numBlocks"
+  [padding]="padding"
+  [blockWidth]="blockWidth"
+  [resolution]="resolution"
+  [blockLimit]="stateService.blockVSize"
+  [orientation]="'top'"
+  [flip]="false"
+  [animationDuration]="animationDuration"
+  [animationOffset]="animationOffset"
+  [disableSpinner]="true"
+></app-block-overview-multi>
 <div class="blocks" [class.wrap]="wrapBlocks">
  <ng-container *ngFor="let i of blockIndices">
    <div class="block-wrapper" [style]="wrapperStyle">
      <div class="block-container" [style]="containerStyle">
-        <app-block-overview-graph
-          #blockGraph
-          [isLoading]="false"
-          [resolution]="resolution"
-          [blockLimit]="stateService.blockVSize"
-          [orientation]="'top'"
-          [flip]="false"
-          [animationDuration]="animationDuration"
-          [animationOffset]="animationOffset"
-          [disableSpinner]="true"
-          [relativeTime]="blockInfo[i]?.timestamp"
-          (txClickEvent)="onTxClick($event)"
-        ></app-block-overview-graph>
        <div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
          <h1 class="height">{{ blockInfo[i].height }}</h1>
-          <h2 class="mined-by">by {{ blockInfo[i].extras.pool.name || 'Unknown' }}</h2>
+          <h2 class="mined-by">by {{ blockInfo[i].extras.pool.name || 'Unknown' }} <img class="pool-logo" [src]="'/resources/mining-pools/' + blockInfo[i].extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'"> </h2>
        </div>
      </div>
    </div>
--- a/frontend/src/app/components/eight-blocks/eight-blocks.component.scss
+++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.scss
@@ -1,4 +1,7 @@
 .blocks {
+  position: absolute;
+  left: 0;
+  top: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
@@ -66,4 +69,12 @@
  .block-container {
    overflow: hidden;
  }
+}
+
+.pool-logo {
+  width: 1.2em;
+  height: 1.2em;
+  position: relative;
+  top: -1px;
+  margin-right: 2px;
 }
--- a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
+++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
@@ -1,16 +1,16 @@
-import { Component, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { catchError, startWith } from 'rxjs/operators';
+import { catchError } from 'rxjs/operators';
 import { Subject, Subscription, of } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from '../../services/websocket.service';
-import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { BlockExtended, TransactionStripped } from '../../interfaces/node-api.interface';
 import { ApiService } from '../../services/api.service';
-import { BlockOverviewGraphComponent } from '../block-overview-graph/block-overview-graph.component';
 import { detectWebGL } from '../../shared/graphs.utils';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { BytesPipe } from '../../shared/pipes/bytes-pipe/bytes.pipe';
+import { BlockOverviewMultiComponent } from '../block-overview-multi/block-overview-multi.component';
+import { CacheService } from '../../services/cache.service';

 function bestFitResolution(min, max, n): number {
  const target = (min + max) / 2;
@@ -48,24 +48,26 @@ interface BlockInfo extends BlockExtended {
 })
 export class EightBlocksComponent implements OnInit, OnDestroy {
  network = '';
-  latestBlocks: BlockExtended[] = [];
+  latestBlocks: (BlockExtended | null)[] = [];
+  pendingBlocks: Record<number, ((b: BlockExtended) => void)[]> = {};
  isLoadingTransactions = true;
  strippedTransactions: { [height: number]: TransactionStripped[] } = {};
  webGlEnabled = true;
  hoverTx: string | null = null;

-  blocksSubscription: Subscription;
+  tipSubscription: Subscription;
  cacheBlocksSubscription: Subscription;
  networkChangedSubscription: Subscription;
  queryParamsSubscription: Subscription;
  graphChangeSubscription: Subscription;

+  height: number = 0;
  numBlocks: number = 8;
  blockIndices: number[] = [...Array(8).keys()];
  autofit: boolean = false;
  padding: number = 0;
  wrapBlocks: boolean = false;
-  blockWidth: number = 1080;
+  blockWidth: number = 360;
  animationDuration: number = 2000;
  animationOffset: number = 0;
  stagger: number = 0;
@@ -79,13 +81,14 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
  wrapperStyle = {
    '--block-width': '1080px',
    width: '1080px',
+    height: '1080px',
    maxWidth: '1080px',
-    padding: '',
+    margin: '',
  };
  containerStyle = {};
  resolution: number = 86;

-  @ViewChildren('blockGraph') blockGraphs: QueryList<BlockOverviewGraphComponent>;
+  @ViewChild('blockGraph') blockGraph: BlockOverviewMultiComponent;

  constructor(
    private route: ActivatedRoute,
@@ -93,6 +96,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
    public stateService: StateService,
    private websocketService: WebsocketService,
    private apiService: ApiService,
+    private cacheService: CacheService,
    private bytesPipe: BytesPipe,
  ) {
    this.webGlEnabled = this.stateService.isBrowser && detectWebGL();
@@ -111,7 +115,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
      this.wrapBlocks = params.wrap !== 'false';
      this.stagger = Number.isInteger(Number(params.stagger)) ? Number(params.stagger) : 0;
      this.animationDuration = Number.isInteger(Number(params.animationDuration)) ? Number(params.animationDuration) : 2000;
-      this.animationOffset = this.padding * 2;
+      this.animationOffset = 0;

      if (this.autofit) {
        this.resolution = bestFitResolution(76, 96, this.blockWidth - this.padding * 2);
@@ -122,22 +126,26 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
      this.wrapperStyle = {
        '--block-width': this.blockWidth + 'px',
        width: this.blockWidth + 'px',
+        height: this.blockWidth + 'px',
        maxWidth: this.blockWidth + 'px',
-        padding: (this.padding || 0) +'px 0px',
+        margin: (this.padding || 0) +'px ',
      };

-      if (params.test === 'true') {
-        if (this.blocksSubscription) {
-          this.blocksSubscription.unsubscribe();
+      this.cacheBlocksSubscription = this.cacheService.loadedBlocks$.subscribe((block: BlockExtended) => {
+        if (this.pendingBlocks[block.height]) {
+          this.pendingBlocks[block.height].forEach(resolve => resolve(block));
+          delete this.pendingBlocks[block.height];
        }
-        this.blocksSubscription = (new Subject<BlockExtended[]>()).subscribe((blocks) => {
-          this.handleNewBlock(blocks.slice(0, this.numBlocks));
-        });
+      });
+
+      this.tipSubscription?.unsubscribe();
+      if (params.test === 'true') {
        this.shiftTestBlocks();
-      } else if (!this.blocksSubscription) {
-        this.blocksSubscription = this.stateService.blocks$
-          .subscribe((blocks) => {
-            this.handleNewBlock(blocks.slice(0, this.numBlocks));
+      } else {
+        this.tipSubscription = this.stateService.chainTip$
+          .subscribe((height) => {
+            this.height = height;
+            this.handleNewBlock(height);
          });
      }
    });
@@ -149,15 +157,13 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
  }

  ngAfterViewInit(): void {
-    this.graphChangeSubscription = this.blockGraphs.changes.pipe(startWith(null)).subscribe(() => {
-      this.setupBlockGraphs();
-    });
+    this.setupBlockGraphs();
  }

  ngOnDestroy(): void {
    this.stateService.markBlock$.next({});
-    if (this.blocksSubscription) {
-      this.blocksSubscription?.unsubscribe();
+    if (this.tipSubscription) {
+      this.tipSubscription?.unsubscribe();
    }
    this.cacheBlocksSubscription?.unsubscribe();
    this.networkChangedSubscription?.unsubscribe();
@@ -167,32 +173,27 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
  shiftTestBlocks(): void {
    const sub = this.apiService.getBlocks$(this.testHeight).subscribe(result => {
      sub.unsubscribe();
-      this.handleNewBlock(result.slice(0, this.numBlocks));
+      this.handleNewBlock(this.testHeight);
      this.testHeight++;
      clearTimeout(this.testShiftTimeout);
      this.testShiftTimeout = window.setTimeout(() => { this.shiftTestBlocks(); }, 10000);
    });
  }

-  async handleNewBlock(blocks: BlockExtended[]): Promise<void> {
+  async handleNewBlock(height: number): Promise<void> {
    const readyPromises: Promise<TransactionStripped[]>[] = [];
    const previousBlocks = this.latestBlocks;
+
+    const blocks = await this.loadBlocks(height, this.numBlocks);
+    console.log('loaded ', blocks.length, ' blocks from height ', height);
+    console.log(blocks);
+
    const newHeights = {};
    this.latestBlocks = blocks;
    for (const block of blocks) {
      newHeights[block.height] = true;
      if (!this.strippedTransactions[block.height]) {
-        readyPromises.push(new Promise((resolve) => {
-          const subscription = this.apiService.getStrippedBlockTransactions$(block.id).pipe(
-            catchError(() => {
-              return of([]);
-            }),
-          ).subscribe((transactions) => {
-            this.strippedTransactions[block.height] = transactions;
-            subscription.unsubscribe();
-            resolve(transactions);
-          });
-        }));
+        readyPromises.push(this.loadBlockTransactions(block));
      }
    }
    await Promise.allSettled(readyPromises);
@@ -206,12 +207,45 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
    });
  }

+  async loadBlocks(height: number, numBlocks: number): Promise<BlockExtended[]> {
+    console.log('loading ', numBlocks, ' blocks from height ', height);
+    const promises: Promise<BlockExtended>[] = [];
+    for (let i = 0; i < numBlocks; i++) {
+      this.cacheService.loadBlock(height - i);
+      const cachedBlock = this.cacheService.getCachedBlock(height - i);
+      if (cachedBlock) {
+        promises.push(Promise.resolve(cachedBlock));
+      } else {
+        promises.push(new Promise((resolve) => {
+          if (!this.pendingBlocks[height - i]) {
+            this.pendingBlocks[height - i] = [];
+          }
+          this.pendingBlocks[height - i].push(resolve);
+        }));
+      }
+    }
+    return Promise.all(promises);
+  }
+
+  async loadBlockTransactions(block: BlockExtended): Promise<TransactionStripped[]> {
+    return new Promise((resolve) => {
+      this.apiService.getStrippedBlockTransactions$(block.id).pipe(
+        catchError(() => {
+          return of([]);
+        }),
+      ).subscribe((transactions) => {
+        this.strippedTransactions[block.height] = transactions;
+        resolve(transactions);
+      });
+    });
+  }
+
  updateBlockGraphs(blocks): void {
    const startTime = performance.now() + 1000 - (this.stagger < 0 ? this.stagger * 8 : 0);
-    if (this.blockGraphs) {
-      this.blockGraphs.forEach((graph, index) => {
-        graph.replace(this.strippedTransactions[blocks?.[index]?.height] || [], 'right', false, startTime + (this.stagger * index));
-      });
+    if (this.blockGraph) {
+      for (let i = 0; i < this.numBlocks; i++) {
+        this.blockGraph.replace(i, this.strippedTransactions[blocks?.[i]?.height] || [], 'right', false, startTime + (this.stagger * i));
+      }
    }
    this.showInfo = false;
    setTimeout(() => {
@@ -226,28 +260,11 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
  }

  setupBlockGraphs(): void {
-    if (this.blockGraphs) {
-      this.blockGraphs.forEach((graph, index) => {
-        graph.destroy();
-        graph.setup(this.strippedTransactions[this.latestBlocks?.[index]?.height] || []);
-      });
-    }
-  }
-
-  onTxClick(event: { tx: TransactionStripped, keyModifier: boolean }): void {
-    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.tx.txid}`);
-    if (!event.keyModifier) {
-      this.router.navigate([url]);
-    } else {
-      window.open(url, '_blank');
-    }
-  }
-
-  onTxHover(txid: string): void {
-    if (txid && txid.length) {
-      this.hoverTx = txid;
-    } else {
-      this.hoverTx = null;
+    if (this.blockGraph) {
+      for (let i = 0; i < this.numBlocks; i++) {
+        this.blockGraph.destroy(i);
+        this.blockGraph.setup(i, this.strippedTransactions[this.latestBlocks?.[i]?.height] || []);
+      }
    }
  }
 }
--- a/frontend/src/app/components/eight-mempool/eight-mempool.component.html
+++ b/frontend/src/app/components/eight-mempool/eight-mempool.component.html
@@ -0,0 +1,25 @@
+<app-block-overview-multi
+  #blockGraph
+  [isLoading]="false"
+  [numBlocks]="numBlocks"
+  [padding]="padding"
+  [blockWidth]="blockWidth"
+  [resolution]="resolution"
+  [blockLimit]="stateService.blockVSize"
+  [orientation]="'left'"
+  [flip]="true"
+  [animationDuration]="animationDuration"
+  [animationOffset]="animationOffset"
+  [disableSpinner]="true"
+></app-block-overview-multi>
+<div class="blocks" [class.wrap]="wrapBlocks">
+  <ng-container *ngFor="let i of blockIndices">
+    <div class="block-wrapper" [style]="wrapperStyle">
+      <div class="block-container" [style]="containerStyle">
+        <div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
+          <h1 class="height">{{ blockInfo[i].label }}</h1>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>
--- a/frontend/src/app/components/eight-mempool/eight-mempool.component.scss
+++ b/frontend/src/app/components/eight-mempool/eight-mempool.component.scss
@@ -0,0 +1,72 @@
+.blocks {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  min-width: 100vw;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-content: flex-start;
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  .block-wrapper {
+    flex-grow: 0;
+    flex-shrink: 0;
+    position: relative;
+    --block-width: 1080px;
+
+    .info {
+      position: absolute;
+      left: 8%;
+      top: 8%;
+      right: 8%;
+      bottom: 8%;
+      height: 84%;
+      width: 84%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: calc(var(--block-width) * 0.03);
+      text-shadow: 0 0 calc(var(--block-width) * 0.05) black;
+
+      h1 {
+        font-size: 6em;
+        line-height: 1;
+        margin-bottom: calc(var(--block-width) * 0.03);
+      }
+      h2 {
+        font-size: 1.8em;
+        line-height: 1;
+        margin-bottom: calc(var(--block-width) * 0.03);
+      }
+
+      .hash {
+        font-family: monospace;
+        word-wrap: break-word;
+        font-size: 1.4em;
+        line-height: 1;
+        margin-bottom: calc(var(--block-width) * 0.03);
+      }
+
+      .mined-by {
+        position: absolute;
+        bottom: 0;
+        margin: auto;
+        text-align: center;
+      }
+    }
+  }
+
+  .block-container {
+    overflow: hidden;
+  }
+}
--- a/frontend/src/app/components/eight-mempool/eight-mempool.component.ts
+++ b/frontend/src/app/components/eight-mempool/eight-mempool.component.ts
@@ -0,0 +1,208 @@
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { catchError } from 'rxjs/operators';
+import { Subject, Subscription, of } from 'rxjs';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
+import { BlockExtended, TransactionStripped } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { detectWebGL } from '../../shared/graphs.utils';
+import { animate, style, transition, trigger } from '@angular/animations';
+import { BytesPipe } from '../../shared/pipes/bytes-pipe/bytes.pipe';
+import { BlockOverviewMultiComponent } from '../block-overview-multi/block-overview-multi.component';
+import { CacheService } from '../../services/cache.service';
+import { isMempoolDelta, MempoolBlockDelta } from '../../interfaces/websocket.interface';
+
+function bestFitResolution(min, max, n): number {
+  const target = (min + max) / 2;
+  let bestScore = Infinity;
+  let best = null;
+  for (let i = min; i <= max; i++) {
+    const remainder = (n % i);
+    if (remainder < bestScore || (remainder === bestScore && (Math.abs(i - target) < Math.abs(best - target)))) {
+      bestScore = remainder;
+      best = i;
+    }
+  }
+  return best;
+}
+
+@Component({
+  selector: 'app-eight-mempool',
+  templateUrl: './eight-mempool.component.html',
+  styleUrls: ['./eight-mempool.component.scss'],
+  animations: [
+    trigger('infoChange', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('1000ms', style({ opacity: 1 })),
+      ]),
+      transition(':leave', [
+        animate('1000ms 500ms', style({ opacity: 0 }))
+      ])
+    ]),
+  ],
+})
+export class EightMempoolComponent implements OnInit, OnDestroy {
+  network = '';
+  strippedTransactions: { [height: number]: TransactionStripped[] } = {};
+  webGlEnabled = true;
+  hoverTx: string | null = null;
+
+  networkChangedSubscription: Subscription;
+  queryParamsSubscription: Subscription;
+  graphChangeSubscription: Subscription;
+  blockSub: Subscription;
+  mempoolBlockSub: Subscription;
+
+  chainDirection: string = 'right';
+  poolDirection: string = 'left';
+
+  lastBlockHeight: number = 0;
+  lastBlockHeightUpdate: number[] = [];
+  numBlocks: number = 8;
+  blockIndices: number[] = [];
+  autofit: boolean = false;
+  padding: number = 0;
+  wrapBlocks: boolean = false;
+  blockWidth: number = 360;
+  animationDuration: number = 2000;
+  animationOffset: number = 0;
+  stagger: number = 0;
+  testing: boolean = true;
+  testHeight: number = 800000;
+  testShiftTimeout: number;
+
+  showInfo: boolean = true;
+  blockInfo: { label: string}[] = [
+    { label: '' },
+    { label: 'mempool' },
+    { label: 'blocks' },
+  ];
+
+  wrapperStyle = {
+    '--block-width': '1080px',
+    width: '1080px',
+    height: '1080px',
+    maxWidth: '1080px',
+    margin: '',
+  };
+  containerStyle = {};
+  resolution: number = 86;
+
+  @ViewChild('blockGraph') blockGraph: BlockOverviewMultiComponent;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    public stateService: StateService,
+    private websocketService: WebsocketService,
+    private apiService: ApiService,
+    private cacheService: CacheService,
+    private bytesPipe: BytesPipe,
+  ) {
+    this.webGlEnabled = this.stateService.isBrowser && detectWebGL();
+  }
+
+  ngOnInit(): void {
+    this.websocketService.want(['blocks', 'mempool-blocks']);
+    this.network = this.stateService.network;
+
+    this.blockSub = this.stateService.mempoolBlockUpdate$.subscribe((update) => {
+      // process update
+      if (isMempoolDelta(update)) {
+        // delta
+        this.updateBlock(update);
+      } else {
+        const transactionsStripped = update.transactions;
+        const inOldBlock = {};
+        const inNewBlock = {};
+        const added: TransactionStripped[] = [];
+        const changed: { txid: string, rate: number | undefined, flags: number, acc: boolean | undefined }[] = [];
+        const removed: string[] = [];
+        for (const tx of transactionsStripped) {
+          inNewBlock[tx.txid] = true;
+        }
+        for (const txid of Object.keys(this.blockGraph?.scenes[this.numBlocks - update.block - 1]?.txs || {})) {
+          inOldBlock[txid] = true;
+          if (!inNewBlock[txid]) {
+            removed.push(txid);
+          }
+        }
+        for (const tx of transactionsStripped) {
+          if (!inOldBlock[tx.txid]) {
+            added.push(tx);
+          } else {
+            changed.push({
+              txid: tx.txid,
+              rate: tx.rate,
+              flags: tx.flags,
+              acc: tx.acc
+            });
+          }
+        }
+        this.updateBlock({
+          block: update.block,
+          removed,
+          changed,
+          added
+        });
+      }
+    });
+
+    this.mempoolBlockSub = this.stateService.mempoolBlocks$.subscribe((blocks) => {
+      this.blockInfo[0].label = `+${blocks.length - this.numBlocks}`;
+    });
+
+    this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
+      this.numBlocks = Number.isInteger(Number(params.numBlocks)) ? Number(params.numBlocks) : 8;
+      this.blockIndices = [...Array(this.numBlocks).keys()];
+      this.lastBlockHeightUpdate = this.blockIndices.map(() => 0);
+      this.autofit = params.autofit !== 'false';
+      this.blockWidth = Number.isInteger(Number(params.blockWidth)) ? Number(params.blockWidth) : 540;
+      this.padding = Number.isInteger(Number(params.padding)) ? Number(params.padding) : 0;
+      this.wrapBlocks = params.wrap !== 'false';
+      this.stagger = Number.isInteger(Number(params.stagger)) ? Number(params.stagger) : 0;
+      this.animationDuration = Number.isInteger(Number(params.animationDuration)) ? Number(params.animationDuration) : 2000;
+      this.animationOffset = 0;
+
+      if (this.autofit) {
+        this.resolution = bestFitResolution(76, 96, this.blockWidth - this.padding * 2);
+      } else {
+        this.resolution = 86;
+      }
+
+      this.wrapperStyle = {
+        '--block-width': this.blockWidth + 'px',
+        width: this.blockWidth + 'px',
+        height: this.blockWidth + 'px',
+        maxWidth: this.blockWidth + 'px',
+        margin: (this.padding || 0) +'px ',
+      };
+
+      this.websocketService.startTrackMempoolBlocks(this.blockIndices);
+    });
+
+    this.networkChangedSubscription = this.stateService.networkChanged$
+      .subscribe((network) => this.network = network);
+  }
+
+  ngOnDestroy(): void {
+    this.stateService.markBlock$.next({});
+    this.blockSub.unsubscribe();
+    this.mempoolBlockSub.unsubscribe();
+    this.networkChangedSubscription?.unsubscribe();
+    this.queryParamsSubscription?.unsubscribe();
+  }
+
+  updateBlock(delta: MempoolBlockDelta): void {
+    const blockMined = (this.stateService.latestBlockHeight > this.lastBlockHeightUpdate[delta.block]);
+    if (blockMined) {
+      this.blockGraph.update(this.numBlocks - delta.block - 1, delta.added, delta.removed, delta.changed || [], blockMined ? this.chainDirection : this.poolDirection, blockMined);
+    } else {
+      this.blockGraph.update(this.numBlocks - delta.block - 1, delta.added, delta.removed, delta.changed || [], this.poolDirection);
+    }
+
+    this.lastBlockHeightUpdate[delta.block] = this.stateService.latestBlockHeight;
+  }
+}
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html
@@ -19,7 +19,7 @@
      </tr>
      <tr>
        <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
-        <td>{{ rbfInfo.tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
+        <td>{{ rbfInfo.tx.fee | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
      </tr>
      <tr *only-vsize>
        <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
--- a/frontend/src/app/components/svg-images/svg-images.component.html
+++ b/frontend/src/app/components/svg-images/svg-images.component.html
--- a/frontend/src/app/components/test-transactions/test-transactions.component.html
+++ b/frontend/src/app/components/test-transactions/test-transactions.component.html
@@ -1,5 +1,8 @@
 <div class="container-xl">
-  <h1 class="text-left" i18n="shared.test-transactions|Test Transactions">Test Transactions</h1>
+  <div style="display: flex; width: 100%; align-items: center; flex-wrap: wrap;">
+    <h1 class="text-left" i18n="shared.test-transactions|Test Transactions">Test Transactions</h1>
+    <app-svg-images name="blocks-3-2" style="width: 275px; max-width: 90%; margin-top: -9px"></app-svg-images>
+  </div>

  <form [formGroup]="testTxsForm" (submit)="testTxsForm.valid && testTxs()" novalidate>
    <label for="maxfeerate" i18n="test.tx.raw-hex">Raw hex</label>
--- a/frontend/src/app/components/tracker/tracker.component.html
+++ b/frontend/src/app/components/tracker/tracker.component.html
@@ -42,7 +42,7 @@
      <div class="blockchain-wrapper" [style]="{ height: blockchainHeight * 1.16 + 'px' }">
        <app-clockchain [height]="blockchainHeight" [width]="blockchainWidth" mode="none"></app-clockchain>
      </div>
-    <div class="panel">
+    <div class="panel" *ngIf="!error || waitingForTransaction">
      @if (replaced) {
        <div class="alert-replaced" role="alert">
          <span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
@@ -65,23 +65,25 @@
              }
            </div>
          </div>
-          <div class="field narrower">
-            <div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
-            <div class="value">
-              <ng-container *ngIf="(ETA$ | async) as eta; else etaSkeleton">
-                <span class="justify-content-end d-flex align-items-center">
-                  @if (eta.blocks >= 7) {
-                    <span i18n="transaction.eta.not-any-time-soon|Transaction ETA mot any time soon">Not any time soon</span>
-                  } @else {
-                    <app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
-                  }
-                </span>
-              </ng-container>
-              <ng-template #etaSkeleton>
-                <span class="skeleton-loader" style="max-width: 200px;"></span>
-              </ng-template>
-            </div>
-          </div>
+          @if (!replaced) {
+            <div class="field narrower">
+              <div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
+              <div class="value">
+                <ng-container *ngIf="(ETA$ | async) as eta; else etaSkeleton">
+                  <span class="justify-content-end d-flex align-items-center">
+                    @if (eta.blocks >= 7) {
+                      <span i18n="transaction.eta.not-any-time-soon|Transaction ETA mot any time soon">Not any time soon</span>
+                    } @else {
+                      <app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
+                    }
+                  </span>
+                </ng-container>
+                <ng-template #etaSkeleton>
+                  <span class="skeleton-loader" style="max-width: 200px;"></span>
+                </ng-template>
+              </div>
+            </div>  
+          }
        } @else if (tx && tx.status?.confirmed) {
          <div class="field narrower mt-2">
            <div class="label" i18n="transaction.confirmed-at">Confirmed at</div>
@@ -111,7 +113,7 @@
      </div>
    </div>

-    <div class="bottom-panel">
+    <div class="bottom-panel" *ngIf="!error || waitingForTransaction">
      @if (isLoading) {
        <div class="progress-icon">
          <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
@@ -184,6 +186,12 @@
        </div>
      }
    </div>
+    
+    <div class="bottom-panel" *ngIf="error && !waitingForTransaction">
+      <app-http-error [error]="error">
+        <span i18n="transaction.error.loading-transaction-data">Error loading transaction data.</span>
+      </app-http-error>
+    </div>

    <div class="footer-link"
      [routerLink]="['/tx' | relativeUrl, tx?.txid || txId]"
--- a/frontend/src/app/components/tracker/tracker.component.ts
+++ b/frontend/src/app/components/tracker/tracker.component.ts
@@ -286,7 +286,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
        this.accelerationInfo = null;
      }),
      switchMap((blockHash: string) => {
-        return this.servicesApiService.getAccelerationHistory$({ blockHash });
+        return this.servicesApiService.getAllAccelerationHistory$({ blockHash }, null, this.txId);
      }),
      catchError(() => {
        return of(null);
--- a/frontend/src/app/components/trademark-policy/trademark-policy.component.html
+++ b/frontend/src/app/components/trademark-policy/trademark-policy.component.html
@@ -95,7 +95,7 @@
            <p>The mempool Square Logo</p>
            <br><br>

-            <app-svg-images name="accelerator" height="76px"></app-svg-images>
+            <app-svg-images name="accelerator" style="width: 500px; max-width: 80%"></app-svg-images>
            <br><br>
            <p>The Mempool Accelerator Logo</p>
            <br><br>
--- a/frontend/src/app/components/transaction/transaction-preview.component.html
+++ b/frontend/src/app/components/transaction/transaction-preview.component.html
@@ -21,7 +21,7 @@
      </ng-template>
    </span>
    <span class="field col-sm-4 text-center"><ng-container *ngIf="transactionTime > 0">&lrm;{{ transactionTime * 1000 | date:'yyyy-MM-dd HH:mm' }}</ng-container></span>
-    <span class="field col-sm-4 text-right"><span class="label" i18n="transaction.fee|Transaction fee">Fee</span> {{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></span>
+    <span class="field col-sm-4 text-right"><span class="label" i18n="transaction.fee|Transaction fee">Fee</span> {{ tx.fee | number }} <span class="symbol" i18n="shared.sats">sats</span></span>
  </div>


--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -551,23 +551,23 @@
        <td class="td-width align-items-center align-middle" i18n="transaction.eta|Transaction ETA">ETA</td>
        <td>
          <ng-container *ngIf="(ETA$ | async) as eta; else etaSkeleton">
-            @if (eta.blocks >= 7) {
-              <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) ? 'etaDeepMempool justify-content-end align-items-center' : ''">
-                <span i18n="transaction.eta.not-any-time-soon|Transaction ETA mot any time soon">Not any time soon</span>
-                @if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) {
-                  <a class="btn btn-sm accelerateDeepMempool btn-small-height float-right" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
-                }
-              </span>
-            } @else if (network === 'liquid' || network === 'liquidtestnet') {
+            @if (network === 'liquid' || network === 'liquidtestnet') {
              <app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
            } @else {
-              <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) ? 'etaDeepMempool justify-content-end align-items-center' : ''">
-                <app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
-                @if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) {
-                  <a class="btn btn-sm accelerateDeepMempool btn-small-height float-right" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+              <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && notAcceleratedOnLoad) ? 'etaDeepMempool d-flex justify-content-between' : ''">
+                @if (eta.blocks >= 7) {
+                  <span i18n="transaction.eta.not-any-time-soon|Transaction ETA mot any time soon">Not any time soon</span>
+                } @else {
+                  <app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
+                }
+                @if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && notAcceleratedOnLoad) {
+                  <div class="d-flex accelerate">
+                    <a class="btn btn-sm accelerateDeepMempool btn-small-height" [class.disabled]="!eligibleForAcceleration" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+                    <a *ngIf="!eligibleForAcceleration" href="https://mempool.space/accelerator#why-cant-accelerate" target="_blank" class="info-badges ml-1" i18n-ngbTooltip="Mempool Accelerator&trade; tooltip" ngbTooltip="This transaction cannot be accelerated">
+                        <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+                    </a>
+                  </div>
                }
-              </span>
-              <span class="eta justify-content-end">
              </span>
            }
          </ng-container>
@@ -606,9 +606,9 @@
  @if (!isLoadingTx) {
    <tr>
      <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
-      <td class="text-wrap">{{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+      <td class="text-wrap">{{ tx.fee | number }} <span class="symbol" i18n="shared.sats">sats</span>
        @if (accelerationInfo?.bidBoost ?? tx.feeDelta > 0) {
-          <span class="oobFees" i18n-ngbTooltip="Acceleration Fees" ngbTooltip="Acceleration fees paid out-of-band"> +{{ accelerationInfo?.bidBoost ?? tx.feeDelta | number }} </span><span class="symbol" i18n="shared.sat|sat">sat</span>
+          <span class="oobFees" i18n-ngbTooltip="Acceleration Fees" ngbTooltip="Acceleration fees paid out-of-band"> +{{ accelerationInfo?.bidBoost ?? tx.feeDelta | number }} </span><span class="symbol" i18n="shared.sats">sats</span>
        }
        <span class="fiat"><app-fiat [blockConversion]="tx.price" [value]="tx.fee + ((accelerationInfo?.bidBoost ?? tx.feeDelta) || 0)"></app-fiat></span>
      </td>
@@ -670,7 +670,7 @@
 <ng-template #acceleratingRow>
  <tr>
    <td rowspan="2" colspan="2" style="padding: 0;">
-      <app-active-acceleration-box [tx]="tx" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [hasCpfp]="hasCpfp" (toggleCpfp)="showCpfpDetails = !showCpfpDetails" [chartPositionLeft]="isMobile"></app-active-acceleration-box>
+      <app-active-acceleration-box [acceleratedBy]="tx.acceleratedBy" [effectiveFeeRate]="tx.effectiveFeePerVsize" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [hasCpfp]="hasCpfp" (toggleCpfp)="showCpfpDetails = !showCpfpDetails" [chartPositionLeft]="isMobile"></app-active-acceleration-box>
    </td>
  </tr>
  <tr></tr>
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -287,37 +287,21 @@
 }

 .accelerate {
-  display: flex !important;
-  align-self: auto;
-  margin-left: auto;
-  background-color: var(--tertiary);
-  @media (max-width: 849px) {
-    margin-left: 5px;
-  }
+  @media (min-width: 850px) {
+    margin-left: auto;
+  }  
 }

 .etaDeepMempool {
-  justify-content: flex-end;
  flex-wrap: wrap;
-  align-content: center;
-  @media (max-width: 995px) {
-    justify-content: left !important;
-  }
  @media (max-width: 849px) {
    justify-content: right !important;
  }
 }

 .accelerateDeepMempool {
-  align-self: auto;
-  margin-left: auto;
  background-color: var(--tertiary);
-  @media (max-width: 995px) {
-    margin-left: 0px;
-  }
-  @media (max-width: 849px) {
-    margin-left: 5px;
-  }
+  margin-left: 5px;
 }

 .goggles-icon {
@@ -335,4 +319,9 @@

 .oobFees {
  color: #905cf4;
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -139,6 +139,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
  firstLoad = true;
  waitingForAccelerationInfo: boolean = false;
  isLoadingFirstSeen = false;
+  notAcceleratedOnLoad: boolean = null;

  featuresEnabled: boolean;
  segwitEnabled: boolean;
@@ -191,7 +192,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
    this.hideAccelerationSummary = this.stateService.isMempoolSpaceBuild ? this.storageService.getValue('hide-accelerator-pref') == 'true' : true;

    if (!this.stateService.isLiquid()) {
-      this.miningService.getMiningStats('1w').subscribe(stats => {
+      this.miningService.getMiningStats('1m').subscribe(stats => {
        this.miningStats = stats;
      });
    }
@@ -343,7 +344,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
        this.setIsAccelerated();
      }),
      switchMap((blockHeight: number) => {
-        return this.servicesApiService.getAccelerationHistory$({ blockHeight }).pipe(
+        return this.servicesApiService.getAllAccelerationHistory$({ blockHeight }, null, this.txId).pipe(
          switchMap((accelerationHistory: Acceleration[]) => {
            if (this.tx.acceleration && !accelerationHistory.length) { // If the just mined transaction was accelerated, but services backend did not return any acceleration data, retry
              return throwError('retry');
@@ -490,7 +491,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
          if (this.stateService.network === '') {
            if (!this.mempoolPosition.accelerated) {
              if (!this.accelerationFlowCompleted && !this.hideAccelerationSummary && !this.showAccelerationSummary) {
-                this.miningService.getMiningStats('1w').subscribe(stats => {
+                this.miningService.getMiningStats('1m').subscribe(stats => {
                  this.miningStats = stats;
                });
              }
@@ -848,6 +849,10 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
      this.tx.feeDelta = cpfpInfo.feeDelta;
      this.setIsAccelerated(firstCpfp);
    }
+    
+    if (this.notAcceleratedOnLoad === null) {
+      this.notAcceleratedOnLoad = !this.isAcceleration;
+    }

    if (!this.isAcceleration && this.fragmentParams.has('accelerate')) {
      this.forceAccelerationSummary = true;
@@ -966,6 +971,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
    this.filters = [];
    this.showCpfpDetails = false;
    this.showAccelerationDetails = false;
+    this.accelerationFlowCompleted = false;
    this.accelerationInfo = null;
    this.cashappEligible = false;
    this.txInBlockIndex = null;
@@ -1083,6 +1089,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
        (!this.hideAccelerationSummary && !this.accelerationFlowCompleted)
        || this.forceAccelerationSummary
      )
+      && this.notAcceleratedOnLoad // avoid briefly showing accelerator checkout on already accelerated txs
    );
  }

--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -321,7 +321,7 @@
      <div class="float-left mt-2-5" *ngIf="!transactionPage && !tx.vin[0].is_coinbase && tx.fee !== -1">
        <app-fee-rate [fee]="tx.fee" [weight]="tx.weight"></app-fee-rate>
        <span class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span class="symbol"
-            i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [blockConversion]="tx.price" [value]="tx.fee"></app-fiat></span></span>
+            i18n="shared.sats">sats</span> <span class="fiat"><app-fiat [blockConversion]="tx.price" [value]="tx.fee"></app-fiat></span></span>
      </div>
      <div class="float-left mt-2-5 grey-info-text" *ngIf="tx.fee === -1" i18n="transactions-list.load-to-reveal-fee-info">Show more inputs to reveal fee data</div>

--- a/frontend/src/app/components/utxo-graph/utxo-graph.component.html
+++ b/frontend/src/app/components/utxo-graph/utxo-graph.component.html
@@ -0,0 +1,21 @@
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
+
+<div [class.full-container]="!widget">
+  <ng-container *ngIf="!error">
+    <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null, paddingBottom: !widget}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+      (chartInit)="onChartInit($event)">
+    </div>
+    <div class="text-center loadingGraphs" *ngIf="isLoading">
+      <div class="spinner-border text-light"></div>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="error">
+    <div class="error-wrapper">
+      <p class="error">{{ error }}</p>
+    </div>
+  </ng-container>
+
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
+</div>
--- a/frontend/src/app/components/utxo-graph/utxo-graph.component.scss
+++ b/frontend/src/app/components/utxo-graph/utxo-graph.component.scss
@@ -0,0 +1,59 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
+}
+
+.main-title {
+  position: relative;
+  color: var(--fg);
+  opacity: var(--opacity);
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.full-container {
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  width: 100%;
+  height: 400px;
+}
+
+.error-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 15px;
+  color: grey;
+  font-weight: bold;
+}
+
+.chart {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  padding-right: 10px;
+}
+.chart-widget {
+  width: 100%;
+  height: 100%;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
--- a/frontend/src/app/components/utxo-graph/utxo-graph.component.ts
+++ b/frontend/src/app/components/utxo-graph/utxo-graph.component.ts
@@ -0,0 +1,285 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { EChartsOption } from '../../graphs/echarts';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { Utxo } from '../../interfaces/electrs.interface';
+import { StateService } from '../../services/state.service';
+import { Router } from '@angular/router';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { renderSats } from '../../shared/common.utils';
+
+@Component({
+  selector: 'app-utxo-graph',
+  templateUrl: './utxo-graph.component.html',
+  styleUrls: ['./utxo-graph.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 15px);
+      z-index: 99;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UtxoGraphComponent implements OnChanges, OnDestroy {
+  @Input() utxos: Utxo[];
+  @Input() height: number = 200;
+  @Input() right: number | string = 10;
+  @Input() left: number | string = 70;
+  @Input() widget: boolean = false;
+
+  subscription: Subscription;
+  redraw$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+
+  error: any;
+  isLoading = true;
+  chartInstance: any = undefined;
+
+  constructor(
+    public stateService: StateService,
+    private cd: ChangeDetectorRef,
+    private zone: NgZone,
+    private router: Router,
+    private relativeUrlPipe: RelativeUrlPipe,
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.isLoading = true;
+    if (!this.utxos) {
+      return;
+    }
+    if (changes.utxos) {
+      this.prepareChartOptions(this.utxos);
+    }
+  }
+
+  prepareChartOptions(utxos: Utxo[]) {
+    if (!utxos || utxos.length === 0) {
+      return;
+    }
+
+    this.isLoading = false;
+
+    // Helper functions
+    const distance = (x1: number, y1: number, x2: number, y2: number): number => Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    const intersectionPoints = (x1: number, y1: number, r1: number, x2: number, y2: number, r2: number): [number, number][] => {
+      const d = distance(x1, y1, x2, y2);
+      const a = (r1 * r1 - r2 * r2 + d * d) / (2 * d);
+      const h = Math.sqrt(r1 * r1 - a * a);
+      const x3 = x1 + a * (x2 - x1) / d;
+      const y3 = y1 + a * (y2 - y1) / d;
+      return [
+        [x3 + h * (y2 - y1) / d, y3 - h * (x2 - x1) / d],
+        [x3 - h * (y2 - y1) / d, y3 + h * (x2 - x1) / d]
+      ];
+    };
+
+    // Naive algorithm to pack circles as tightly as possible without overlaps
+    const placedCircles: { x: number, y: number, r: number, utxo: Utxo, distances: number[] }[] = [];
+    // Pack in descending order of value, and limit to the top 500 to preserve performance
+    const sortedUtxos = utxos.sort((a, b) => b.value - a.value).slice(0, 500);
+    let centerOfMass = { x: 0, y: 0 };
+    let weightOfMass = 0;
+    sortedUtxos.forEach((utxo, index) => {
+      // area proportional to value
+      const r = Math.sqrt(utxo.value);
+
+      // special cases for the first two utxos
+      if (index === 0) {
+        placedCircles.push({ x: 0, y: 0, r, utxo, distances: [0] });
+        return;
+      }
+      if (index === 1) {
+        const c = placedCircles[0];
+        placedCircles.push({ x: c.r + r, y: 0, r, utxo, distances: [c.r + r, 0] });
+        c.distances.push(c.r + r);
+        return;
+      }
+
+      // The best position will be touching two other circles
+      // generate a list of candidate points by finding all such positions
+      // where the circle can be placed without overlapping other circles
+      const candidates: [number, number, number[]][] = [];
+      const numCircles = placedCircles.length;
+      for (let i = 0; i < numCircles; i++) {
+        for (let j = i + 1; j < numCircles; j++) {
+          const c1 = placedCircles[i];
+          const c2 = placedCircles[j];
+          if (c1.distances[j] > (c1.r + c2.r + r + r)) {
+            // too far apart for new circle to touch both
+            continue;
+          }
+          const points = intersectionPoints(c1.x, c1.y, c1.r + r, c2.x, c2.y, c2.r + r);
+          points.forEach(([x, y]) => {
+            const distances: number[] = [];
+            let valid = true;
+            for (let k = 0; k < numCircles; k++) {
+              const c = placedCircles[k];
+              const d = distance(x, y, c.x, c.y);
+              if (k !== i && k !== j && d < (r + c.r)) {
+                valid = false;
+                break;
+              } else {
+                distances.push(d);
+              }
+            }
+            if (valid) {
+              candidates.push([x, y, distances]);
+            }
+          });
+        }
+      }
+
+      // Pick the candidate closest to the center of mass
+      const [x, y, distances] = candidates.length ? candidates.reduce((closest, candidate) =>
+        distance(candidate[0], candidate[1], centerOfMass[0], centerOfMass[1]) <
+        distance(closest[0], closest[1], centerOfMass[0], centerOfMass[1])
+          ? candidate
+          : closest
+      ) : [0, 0, []];
+
+      placedCircles.push({ x, y, r, utxo, distances });
+      for (let i = 0; i < distances.length; i++) {
+        placedCircles[i].distances.push(distances[i]);
+      }
+      distances.push(0);
+
+      // Update center of mass
+      centerOfMass = {
+        x: (centerOfMass.x * weightOfMass + x) / (weightOfMass + r),
+        y: (centerOfMass.y * weightOfMass + y) / (weightOfMass + r),
+      };
+      weightOfMass += r;
+    });
+
+    // Precompute the bounding box of the graph
+    const minX = Math.min(...placedCircles.map(d => d.x - d.r));
+    const maxX = Math.max(...placedCircles.map(d => d.x + d.r));
+    const minY = Math.min(...placedCircles.map(d => d.y - d.r));
+    const maxY = Math.max(...placedCircles.map(d => d.y + d.r));
+    const width = maxX - minX;
+    const height = maxY - minY;
+
+    const data = placedCircles.map((circle, index) => [
+      circle.utxo,
+      index,
+      circle.x,
+      circle.y,
+      circle.r
+    ]);
+
+    this.chartOptions = {
+      series: [{
+        type: 'custom',
+        coordinateSystem: undefined,
+        data,
+        renderItem: (params, api) => {
+          const idx = params.dataIndex;
+          const datum = data[idx];
+          const utxo = datum[0] as Utxo;
+          const chartWidth = api.getWidth();
+          const chartHeight = api.getHeight();
+          const scale = Math.min(chartWidth / width, chartHeight / height);
+          const scaledWidth = width * scale;
+          const scaledHeight = height * scale;
+          const offsetX = (chartWidth - scaledWidth) / 2 - minX * scale;
+          const offsetY = (chartHeight - scaledHeight) / 2 - minY * scale;
+          const x = datum[2] as number;
+          const y = datum[3] as number;
+          const r = datum[4] as number;
+          if (r * scale < 3) {
+            // skip items too small to render cleanly
+            return;
+          }
+          const valueStr = renderSats(utxo.value, this.stateService.network);
+          const elements: any[] = [
+            {
+              type: 'circle',
+              autoBatch: true,
+              shape: {
+                cx: (x * scale) + offsetX,
+                cy: (y * scale) + offsetY,
+                r: (r * scale) - 1,
+              },
+              style: {
+                fill: '#5470c6',
+              }
+            },
+          ];
+          const labelFontSize = Math.min(36, r * scale * 0.25);
+          if (labelFontSize > 8) {
+            elements.push({
+              type: 'text',
+              x: (x * scale) + offsetX,
+              y: (y * scale) + offsetY,
+              style: {
+                text: valueStr,
+                fontSize: labelFontSize,
+                fill: '#fff',
+                align: 'center',
+                verticalAlign: 'middle',
+              },
+            });
+          }
+          return {
+            type: 'group',
+            children: elements,
+          };
+        }
+      }],
+      tooltip: {
+        backgroundColor: 'rgba(17, 19, 31, 1)',
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+        textStyle: {
+          color: 'var(--tooltip-grey)',
+          align: 'left',
+        },
+        borderColor: '#000',
+        formatter: (params: any): string => {
+          const utxo = params.data[0] as Utxo;
+          const valueStr = renderSats(utxo.value, this.stateService.network);
+          return `
+          <b style="color: white;">${utxo.txid.slice(0, 6)}...${utxo.txid.slice(-6)}:${utxo.vout}</b>
+          <br>
+          ${valueStr}`;
+        },
+      }
+    };
+
+    this.cd.markForCheck();
+  }
+
+  onChartClick(e): void {
+    if (e.data?.[0]?.txid) {
+      this.zone.run(() => {
+        const url = this.relativeUrlPipe.transform(`/tx/${e.data[0].txid}`);
+        if (e.event.event.shiftKey || e.event.event.ctrlKey || e.event.event.metaKey) {
+          window.open(url + '?mode=details#vout=' + e.data[0].vout);
+        } else {
+          this.router.navigate([url], { fragment: `vout=${e.data[0].vout}` });
+        }
+      });
+    }
+  }
+
+  onChartInit(ec): void {
+    this.chartInstance = ec;
+    this.chartInstance.on('click', 'series', this.onChartClick.bind(this));
+  }
+
+  ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  isMobile(): boolean {
+    return (window.innerWidth <= 767.98);
+  }
+}
--- a/frontend/src/app/graphs/echarts.ts
+++ b/frontend/src/app/graphs/echarts.ts
@@ -1,6 +1,6 @@
 // Import tree-shakeable echarts
 import * as echarts from 'echarts/core';
-import { LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart, GaugeChart } from 'echarts/charts';
+import { LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart, GaugeChart, CustomChart } from 'echarts/charts';
 import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GeoComponent, DataZoomComponent, VisualMapComponent, MarkLineComponent } from 'echarts/components';
 import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
 // Typescript interfaces
@@ -12,6 +12,7 @@ echarts.use([
  TitleComponent, TooltipComponent, GridComponent,
  LegendComponent, GeoComponent, DataZoomComponent,
  VisualMapComponent, MarkLineComponent,
-  LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart, GaugeChart
+  LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart, GaugeChart,
+  CustomChart,
 ]);
 export { echarts, EChartsOption, TreemapSeriesOption, LineSeriesOption, PieSeriesOption };
--- a/frontend/src/app/graphs/graphs.module.ts
+++ b/frontend/src/app/graphs/graphs.module.ts
@@ -36,6 +36,7 @@ import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools
 import { BlockHealthGraphComponent } from '../components/block-health-graph/block-health-graph.component';
 import { AddressComponent } from '../components/address/address.component';
 import { AddressGraphComponent } from '../components/address-graph/address-graph.component';
+import { UtxoGraphComponent } from '../components/utxo-graph/utxo-graph.component';
 import { ActiveAccelerationBox } from '../components/acceleration/active-acceleration-box/active-acceleration-box.component';
 import { CommonModule } from '@angular/common';

@@ -76,6 +77,7 @@ import { CommonModule } from '@angular/common';
    HashrateChartPoolsComponent,
    BlockHealthGraphComponent,
    AddressGraphComponent,
+    UtxoGraphComponent,
    ActiveAccelerationBox,
  ],
  imports: [
--- a/frontend/src/app/interfaces/electrs.interface.ts
+++ b/frontend/src/app/interfaces/electrs.interface.ts
@@ -233,3 +233,10 @@ interface AssetStats {
  peg_out_amount: number;
  burn_count: number;
 }
+
+export interface Utxo {
+  txid: string;
+  vout: number;
+  value: number;
+  status: Status;
+}
--- a/frontend/src/app/interfaces/websocket.interface.ts
+++ b/frontend/src/app/interfaces/websocket.interface.ts
@@ -33,6 +33,7 @@ export interface WebsocketResponse {
  'track-scriptpubkeys'?: string[];
  'track-asset'?: string;
  'track-mempool-block'?: number;
+  'track-mempool-blocks'?: number[];
  'track-rbf'?: string;
  'track-rbf-summary'?: boolean;
  'track-accelerations'?: boolean;
--- a/frontend/src/app/route-guards.ts
+++ b/frontend/src/app/route-guards.ts
@@ -13,7 +13,8 @@ class GuardService {

  trackerGuard(route: Route, segments: UrlSegment[]): boolean {
    const preferredRoute = this.router.getCurrentNavigation()?.extractedUrl.queryParams?.mode;
-    return (preferredRoute === 'status' || (preferredRoute !== 'details' && this.navigationService.isInitialLoad())) && window.innerWidth <= 767.98;
+    const path = this.router.getCurrentNavigation()?.extractedUrl.root.children.primary.segments;
+    return (preferredRoute === 'status' || (preferredRoute !== 'details' && this.navigationService.isInitialLoad())) && window.innerWidth <= 767.98 && !(path.length === 2 && ['push', 'test'].includes(path[1].path));
  }
 }

--- a/frontend/src/app/services/electrs-api.service.ts
+++ b/frontend/src/app/services/electrs-api.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { BehaviorSubject, Observable, catchError, filter, from, of, shareReplay, switchMap, take, tap } from 'rxjs';
-import { Transaction, Address, Outspend, Recent, Asset, ScriptHash, AddressTxSummary } from '../interfaces/electrs.interface';
+import { Transaction, Address, Outspend, Recent, Asset, ScriptHash, AddressTxSummary, Utxo } from '../interfaces/electrs.interface';
 import { StateService } from './state.service';
 import { BlockExtended } from '../interfaces/node-api.interface';
 import { calcScriptHash$ } from '../bitcoin.utils';
@@ -166,6 +166,16 @@ export class ElectrsApiService {
    );
  }

+  getAddressUtxos$(address: string): Observable<Utxo[]> {
+    return this.httpClient.get<Utxo[]>(this.apiBaseUrl + this.apiBasePath + '/api/address/' + address + '/utxo');
+  }
+
+  getScriptHashUtxos$(script: string): Observable<Utxo[]> {
+    return from(calcScriptHash$(script)).pipe(
+      switchMap(scriptHash => this.httpClient.get<Utxo[]>(this.apiBaseUrl + this.apiBasePath + '/api/scripthash/' + scriptHash + '/utxo')),
+    );
+  }
+
  getAsset$(assetId: string): Observable<Asset> {
    return this.httpClient.get<Asset>(this.apiBaseUrl + this.apiBasePath + '/api/asset/' + assetId);
  }
--- a/frontend/src/app/services/eta.service.ts
+++ b/frontend/src/app/services/eta.service.ts
@@ -28,7 +28,7 @@ export class EtaService {
    return combineLatest([
      this.stateService.mempoolTxPosition$.pipe(map(p => p?.position)),
      this.stateService.difficultyAdjustment$,
-      miningStats ? of(miningStats) : this.miningService.getMiningStats('1w'),
+      miningStats ? of(miningStats) : this.miningService.getMiningStats('1m'),
    ]).pipe(
      map(([mempoolPosition, da, miningStats]) => {
        if (!mempoolPosition || !estimate?.pools?.length || !miningStats || !da) {
@@ -166,7 +166,7 @@ export class EtaService {
        pools[pool.poolUniqueId] = pool;
      }
      const unacceleratedPosition = this.mempoolPositionFromFees(getUnacceleratedFeeRate(tx, true), mempoolBlocks);
-      const totalAcceleratedHashrate = accelerationPositions.reduce((total, pos) => total + (pools[pos.poolId].lastEstimatedHashrate), 0);
+      const totalAcceleratedHashrate = accelerationPositions.reduce((total, pos) => total + (pools[pos.poolId]?.lastEstimatedHashrate || 0), 0);
      const shares = [
        {
          block: unacceleratedPosition.block,
@@ -174,7 +174,7 @@ export class EtaService {
        },
        ...accelerationPositions.map(pos => ({
          block: pos.block,
-          hashrateShare: ((pools[pos.poolId].lastEstimatedHashrate) / miningStats.lastEstimatedHashrate)
+          hashrateShare: ((pools[pos.poolId]?.lastEstimatedHashrate || 0) / miningStats.lastEstimatedHashrate)
        }))
      ];
      return this.calculateETAFromShares(shares, da);
@@ -204,7 +204,7 @@ export class EtaService {

      let tailProb = 0;
      let Q = 0;
-      for (let i = 0; i < max; i++) {
+      for (let i = 0; i <= max; i++) {
        // find H_i
        const H = shares.reduce((total, share) => total + (share.block <= i ? share.hashrateShare : 0), 0);
        // find S_i
@@ -215,7 +215,7 @@ export class EtaService {
        tailProb += S;
      }
      // at max depth, the transaction is guaranteed to be mined in the next block if it hasn't already
-      Q += (1-tailProb);
+      Q += ((max + 1) * (1-tailProb));
      const eta = da.timeAvg * Q; // T x Q

      return {
--- a/frontend/src/app/services/services-api.service.ts
+++ b/frontend/src/app/services/services-api.service.ts
@@ -4,7 +4,7 @@ import { HttpClient } from '@angular/common/http';
 import { StateService } from './state.service';
 import { StorageService } from './storage.service';
 import { MenuGroup } from '../interfaces/services.interface';
-import { Observable, of, ReplaySubject, tap, catchError, share, filter, switchMap } from 'rxjs';
+import { Observable, of, ReplaySubject, tap, catchError, share, filter, switchMap, map } from 'rxjs';
 import { IBackendInfo } from '../interfaces/websocket.interface';
 import { Acceleration, AccelerationHistoryParams } from '../interfaces/node-api.interface';
 import { AccelerationStats } from '../components/acceleration/acceleration-stats/acceleration-stats.component';
@@ -160,6 +160,29 @@ export class ServicesApiServices {
    return this.httpClient.get<Acceleration[]>(`${this.stateService.env.SERVICES_API}/accelerator/accelerations/history`, { params: { ...params } });
  }

+  getAllAccelerationHistory$(params: AccelerationHistoryParams, limit?: number, findTxid?: string): Observable<Acceleration[]> {
+    const getPage$ = (page: number, accelerations: Acceleration[] = []): Observable<{ page: number, total: number, accelerations: Acceleration[] }> => {
+      return this.getAccelerationHistoryObserveResponse$({...params, page}).pipe(
+        map((response) => ({
+          page,
+          total: parseInt(response.headers.get('X-Total-Count'), 10),
+          accelerations: accelerations.concat(response.body || []),
+        })),
+        switchMap(({page, total, accelerations}) => {
+          if (accelerations.length >= Math.min(total, limit ?? Infinity) || (findTxid && accelerations.find((acc) => acc.txid === findTxid))) {
+            return of({ page, total, accelerations });
+          } else {
+            return getPage$(page + 1, accelerations);
+          }
+        }),
+      );
+    };
+
+    return getPage$(1).pipe(
+      map(({ accelerations }) => accelerations),
+    );
+  }
+
  getAccelerationHistoryObserveResponse$(params: AccelerationHistoryParams): Observable<any> {
    return this.httpClient.get<any>(`${this.stateService.env.SERVICES_API}/accelerator/accelerations/history`, { params: { ...params }, observe: 'response'});
  }
--- a/frontend/src/app/services/websocket.service.ts
+++ b/frontend/src/app/services/websocket.service.ts
@@ -29,12 +29,14 @@ export class WebsocketService {
  private isTrackingTx = false;
  private trackingTxId: string;
  private isTrackingMempoolBlock = false;
+  private isTrackingMempoolBlocks = false;
  private isTrackingRbf: 'all' | 'fullRbf' | false = false;
  private isTrackingRbfSummary = false;
  private isTrackingAddress: string | false = false;
  private isTrackingAddresses: string[] | false = false;
  private isTrackingAccelerations: boolean = false;
  private trackingMempoolBlock: number;
+  private trackingMempoolBlocks: number[];
  private stoppingTrackMempoolBlock: any | null = null;
  private latestGitCommit = '';
  private onlineCheckTimeout: number;
@@ -122,6 +124,9 @@ export class WebsocketService {
          if (this.isTrackingMempoolBlock) {
            this.startTrackMempoolBlock(this.trackingMempoolBlock, true);
          }
+          if (this.isTrackingMempoolBlocks) {
+            this.startTrackMempoolBlocks(this.trackingMempoolBlocks);
+          }
          if (this.isTrackingRbf) {
            this.startTrackRbf(this.isTrackingRbf);
          }
@@ -218,6 +223,13 @@ export class WebsocketService {
    return false;
  }

+  startTrackMempoolBlocks(blocks: number[], force: boolean = false): boolean {
+    this.websocketSubject.next({ 'track-mempool-blocks': blocks });
+    this.isTrackingMempoolBlocks = true;
+    this.trackingMempoolBlocks = blocks;
+    return true;
+  }
+
  stopTrackMempoolBlock(): void {
    if (this.stoppingTrackMempoolBlock) {
      clearTimeout(this.stoppingTrackMempoolBlock);
@@ -231,6 +243,11 @@ export class WebsocketService {
    }, 2000);
  }

+  stopTrackMempoolBlocks(): void {
+    this.websocketSubject.next({ 'track-mempool-blocks': [] });
+    this.isTrackingMempoolBlocks = false;
+  }
+
  startTrackRbf(mode: 'all' | 'fullRbf') {
    this.websocketSubject.next({ 'track-rbf': mode });
    this.isTrackingRbf = mode;
@@ -433,20 +450,25 @@ export class WebsocketService {
    }

    if (response['projected-block-transactions']) {
-      if (response['projected-block-transactions'].index == this.trackingMempoolBlock) {
-        if (response['projected-block-transactions'].blockTransactions) {
-          this.stateService.mempoolSequence = response['projected-block-transactions'].sequence;
+      if (response['projected-block-transactions'].index != null) {
+        const update = response['projected-block-transactions'];
+        if (update.blockTransactions) {
          this.stateService.mempoolBlockUpdate$.next({
-            block: this.trackingMempoolBlock,
-            transactions: response['projected-block-transactions'].blockTransactions.map(uncompressTx),
+            block: update.index,
+            transactions: update.blockTransactions.map(uncompressTx),
          });
-        } else if (response['projected-block-transactions'].delta) {
-          if (this.stateService.mempoolSequence && response['projected-block-transactions'].sequence !== this.stateService.mempoolSequence + 1) {
-            this.stateService.mempoolSequence = 0;
-            this.startTrackMempoolBlock(this.trackingMempoolBlock, true);
-          } else {
-            this.stateService.mempoolSequence = response['projected-block-transactions'].sequence;
-            this.stateService.mempoolBlockUpdate$.next(uncompressDeltaChange(this.trackingMempoolBlock, response['projected-block-transactions'].delta));
+        } else if (update.delta) {
+          this.stateService.mempoolBlockUpdate$.next(uncompressDeltaChange(update.index, update.delta));
+        }
+      } else if (response['projected-block-transactions'].length) {
+        for (const update of response['projected-block-transactions']) {
+          if (update.blockTransactions) {
+            this.stateService.mempoolBlockUpdate$.next({
+              block: update.index,
+              transactions: update.blockTransactions.map(uncompressTx),
+            });
+          } else if (update.delta) {
+            this.stateService.mempoolBlockUpdate$.next(uncompressDeltaChange(update.index, update.delta));
          }
        }
      }
--- a/frontend/src/app/shared/common.utils.ts
+++ b/frontend/src/app/shared/common.utils.ts
@@ -1,5 +1,7 @@
 import { MempoolBlockDelta, MempoolBlockDeltaCompressed, MempoolDeltaChange, TransactionCompressed } from "../interfaces/websocket.interface";
 import { TransactionStripped } from "../interfaces/node-api.interface";
+import { AmountShortenerPipe } from "./pipes/amount-shortener.pipe";
+const amountShortenerPipe = new AmountShortenerPipe();

 export function isMobile(): boolean {
  return (window.innerWidth <= 767.98);
@@ -184,6 +186,33 @@ export function uncompressDeltaChange(block: number, delta: MempoolBlockDeltaCom
  };
 }

+export function renderSats(value: number, network: string, mode: 'sats' | 'btc' | 'auto' = 'auto'): string {
+  let prefix = '';
+  switch (network) {
+    case 'liquid':
+      prefix = 'L';
+      break;
+    case 'liquidtestnet':
+      prefix = 'tL';
+      break;
+    case 'testnet':
+    case 'testnet4':
+      prefix = 't';
+      break;
+    case 'signet':
+      prefix = 's';
+      break;
+  }
+  if (mode === 'btc' || (mode === 'auto' && value >= 1000000)) {
+    return `${amountShortenerPipe.transform(value / 100000000)} ${prefix}BTC`;
+  } else {
+    if (prefix.length) {
+      prefix += '-';
+    }
+    return `${amountShortenerPipe.transform(value)} ${prefix}sats`;
+  }
+}
+
 export function insecureRandomUUID(): string {
  const hexDigits = '0123456789abcdef';
  const uuidLengths = [8, 4, 4, 4, 12];
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -13,8 +13,13 @@
        </div>
        @if (!enterpriseInfo?.footer_img) {
          <p class="explore-tagline-mobile">
-            <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
-            <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
+            @if (officialMempoolSpace) {
+              <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
+              <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>  
+            } @else {
+              <ng-container i18n="shared.be-your-own-explorer">Be your own explorer</ng-container>
+              <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&trade;</ng-template>
+            }
          </p>
        }
        <div class="site-options language-selector d-flex justify-content-center align-items-center" [class]="{'services': isServicesPage}">
@@ -27,29 +32,38 @@
          <div class="selector">
            <app-rate-unit-selector></app-rate-unit-selector>
          </div>
+          <div class="selector d-none" [ngClass]="isServicesPage ? 'd-lg-flex' : 'd-md-flex'">
+            <app-amount-selector></app-amount-selector>
+          </div>
          @if (!env.customize?.theme) {
-            <div class="selector d-none d-sm-flex">
+            <div class="selector d-none" [ngClass]="isServicesPage ? 'd-lg-flex' : 'd-md-flex'">
              <app-theme-selector></app-theme-selector>
            </div>
          }
-          <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login']">
+          <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none justify-content-center" [ngClass]="isServicesPage ? 'd-lg-flex' : 'd-md-flex'" [routerLink]="['/login']">
            <span *ngIf="user" i18n="shared.my-account" class="nowrap">My Account</span>
            <span *ngIf="!user" i18n="shared.sign-in" class="nowrap">Sign In</span>
          </a>
        </div>
        @if (!env.customize?.theme) {
-          <div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0">
-            <app-theme-selector></app-theme-selector>
+          <div class="selector d-flex justify-content-center ml-auto mr-auto mt-0" [ngClass]="isServicesPage ? 'd-lg-none' : 'd-md-none'">
+            <app-amount-selector class="add-margin"></app-amount-selector>
+            <app-theme-selector class="add-margin"></app-theme-selector>
          </div>
        }
        @if (!enterpriseInfo?.footer_img) {
-          <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login']">
+          <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex justify-content-center ml-auto mr-auto mt-0 mb-2" [ngClass]="isServicesPage ? 'd-lg-none' : 'd-md-none'" [routerLink]="['/login']">
            <span *ngIf="user" i18n="shared.my-account" class="nowrap">My Account</span>
            <span *ngIf="!user" i18n="shared.sign-in" class="nowrap">Sign In</span>
          </a>
          <p class="explore-tagline-desktop">
-            <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
-            <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
+            @if (officialMempoolSpace) {
+              <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
+              <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>  
+            } @else {
+              <ng-container i18n="shared.be-your-own-explorer">Be your own explorer</ng-container>
+              <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&trade;</ng-template>
+            }
          </p>
        }
      </div>
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.scss
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
@@ -76,6 +76,11 @@ footer .selector {
  display: inline-block;
 }

+footer .add-margin {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
 footer .row.link-tree {
  max-width: 1140px;
  margin: 0 auto;
@@ -154,7 +159,7 @@ footer .nowrap {
  display: block;
 }

-@media (min-width: 951px) {
+@media (min-width: 1020px) {
  :host-context(.ltr-layout) .language-selector {
    float: right !important;
  }
@@ -172,7 +177,24 @@ footer .nowrap {
 }

 .services {
-  @media (min-width: 951px) and (max-width: 1147px) {
+  @media (min-width: 1300px) {
+    :host-context(.ltr-layout) .language-selector {
+      float: right !important;
+    }
+    :host-context(.rtl-layout) .language-selector {
+      float: left !important;
+    }
+  
+    .explore-tagline-desktop {
+      display: block;
+    }
+  
+    .explore-tagline-mobile {
+      display: none;
+    }
+  }
+
+  @media (max-width: 1300px) {
    :host-context(.ltr-layout) .services .language-selector {
      float: none !important;
    }
@@ -248,7 +270,7 @@ footer .nowrap {

 }

-@media (max-width: 950px) {
+@media (max-width: 1019px) {

  .main-logo {
    width: 220px;
@@ -287,7 +309,7 @@ footer .nowrap {
  }
 }

-@media (max-width: 1147px) {
+@media (max-width: 1300px) {

  .services.main-logo {
    width: 220px;
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -35,6 +35,7 @@ import { LanguageSelectorComponent } from '../components/language-selector/langu
 import { FiatSelectorComponent } from '../components/fiat-selector/fiat-selector.component';
 import { RateUnitSelectorComponent } from '../components/rate-unit-selector/rate-unit-selector.component';
 import { ThemeSelectorComponent } from '../components/theme-selector/theme-selector.component';
+import { AmountSelectorComponent } from '../components/amount-selector/amount-selector.component';
 import { BrowserOnlyDirective } from './directives/browser-only.directive';
 import { ServerOnlyDirective } from './directives/server-only.directive';
 import { ColoredPriceDirective } from './directives/colored-price.directive';
@@ -47,6 +48,7 @@ import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
 import { StartComponent } from '../components/start/start.component';
 import { TransactionsListComponent } from '../components/transactions-list/transactions-list.component';
 import { BlockOverviewGraphComponent } from '../components/block-overview-graph/block-overview-graph.component';
+import { BlockOverviewMultiComponent } from '../components/block-overview-multi/block-overview-multi.component';
 import { BlockOverviewTooltipComponent } from '../components/block-overview-tooltip/block-overview-tooltip.component';
 import { BlockFiltersComponent } from '../components/block-filters/block-filters.component';
 import { AddressGroupComponent } from '../components/address-group/address-group.component';
@@ -104,6 +106,7 @@ import { AccelerationSparklesComponent } from '../components/acceleration/sparkl

 import { BlockViewComponent } from '../components/block-view/block-view.component';
 import { EightBlocksComponent } from '../components/eight-blocks/eight-blocks.component';
+import { EightMempoolComponent } from '../components/eight-mempool/eight-mempool.component';
 import { MempoolBlockViewComponent } from '../components/mempool-block-view/mempool-block-view.component';
 import { MempoolBlockOverviewComponent } from '../components/mempool-block-overview/mempool-block-overview.component';
 import { ClockchainComponent } from '../components/clockchain/clockchain.component';
@@ -131,6 +134,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
    FiatSelectorComponent,
    ThemeSelectorComponent,
    RateUnitSelectorComponent,
+    AmountSelectorComponent,
    ScriptpubkeyTypePipe,
    RelativeUrlPipe,
    NoSanitizePipe,
@@ -153,6 +157,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
    BlockchainComponent,
    BlockViewComponent,
    EightBlocksComponent,
+    EightMempoolComponent,
    MempoolBlockViewComponent,
    MempoolBlocksComponent,
    BlockchainBlocksComponent,
@@ -161,6 +166,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
    PreviewTitleComponent,
    StartComponent,
    BlockOverviewGraphComponent,
+    BlockOverviewMultiComponent,
    BlockOverviewTooltipComponent,
    BlockFiltersComponent,
    TransactionsListComponent,
@@ -215,6 +221,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
    BitcoinsatoshisPipe,
    BlockViewComponent,
    EightBlocksComponent,
+    EightMempoolComponent,
    MempoolBlockViewComponent,
    MempoolBlockOverviewComponent,
    ClockchainComponent,
@@ -278,6 +285,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
    FiatSelectorComponent,
    RateUnitSelectorComponent,
    ThemeSelectorComponent,
+    AmountSelectorComponent,
    ScriptpubkeyTypePipe,
    RelativeUrlPipe,
    Hex2asciiPipe,
@@ -303,6 +311,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
    AmountComponent,
    StartComponent,
    BlockOverviewGraphComponent,
+    BlockOverviewMultiComponent,
    BlockOverviewTooltipComponent,
    BlockFiltersComponent,
    TransactionsListComponent,
--- a/production/bitcoin.conf
+++ b/production/bitcoin.conf
@@ -15,6 +15,7 @@ rpcpassword=__BITCOIN_RPC_PASS__
 whitelist=127.0.0.1
 whitelist=103.99.168.0/22
 whitelist=2401:b140::/32
+blocksxor=0
 #uacomment=@wiz

 [main]
--- a/production/mempool-reset-all
+++ b/production/mempool-reset-all
@@ -1,3 +1,5 @@
 #!/usr/bin/env zsh
-rm $HOME/*/backend/mempool-config.json
-rm $HOME/*/frontend/mempool-frontend-config.json
+rm -f $HOME/*/backend/mempool-config.json
+rm -f $HOME/*/frontend/mempool-frontend-config.json
+rm -f $HOME/*/frontend/projects/mempool/mempool-frontend-config.json
+exit 0
Author	SHA1	Message	Date
Mononaut	6efb435033	multiblock padding	2024-09-23 23:35:30 +00:00
Mononaut	7b3d2b983c	multiblock fix stale mempool txs	2024-09-23 23:19:00 +00:00
Mononaut	beb128b5e0	multiblock logos & fix regular visualization	2024-09-23 23:18:59 +00:00
Mononaut	2dee0b8ba6	multiblock label overlays	2024-09-23 23:18:59 +00:00
Mononaut	b14a354a06	multiblock better scene bounds	2024-09-23 23:18:59 +00:00
Mononaut	7b04ff72cd	multiblock mempool page	2024-09-23 23:18:59 +00:00
Mononaut	62c8766e24	multiblock support >8 blocks	2024-09-23 23:18:59 +00:00
Mononaut	3a49e528fa	multiblock enforce block boundaries	2024-09-23 23:18:58 +00:00
Mononaut	a33de8bc8c	Test rendering multiple blocks on one canvas	2024-09-23 23:18:57 +00:00
softsimon	05e88a25be	npm audit fix	2024-09-23 14:15:00 +08:00
softsimon	574a800520	Merge pull request #5542 from mempool/dependabot/npm_and_yarn/frontend/esbuild-0.24.0 Bump esbuild from 0.23.0 to 0.24.0 in /frontend	2024-09-23 13:44:14 +08:00
softsimon	1b4bbc24ba	Merge pull request #5541 from mempool/mononaut/update-pool-pie Update accelerating pie chart in real time	2024-09-23 12:57:07 +08:00
dependabot[bot]	0e5698955f	Bump esbuild from 0.23.0 to 0.24.0 in /frontend Bumps [esbuild](https://github.com/evanw/esbuild) from 0.23.0 to 0.24.0. - [Release notes](https://github.com/evanw/esbuild/releases) - [Changelog](https://github.com/evanw/esbuild/blob/main/CHANGELOG.md) - [Commits](https://github.com/evanw/esbuild/compare/v0.23.0...v0.24.0) --- updated-dependencies: - dependency-name: esbuild dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2024-09-23 02:09:59 +00:00
Mononaut	e144e139b7	Update accelerating pie chart in real time	2024-09-22 18:06:55 +00:00
softsimon	07a0850f99	Merge pull request #5437 from mempool/simon/use-sats only use sats, not sat	2024-09-23 00:33:19 +08:00
softsimon	72a5f4a521	amount selector sat -> sats	2024-09-23 00:18:59 +08:00
softsimon	04605e10a5	only use sats, not sat	2024-09-23 00:15:12 +08:00
softsimon	407ce3c76d	Merge pull request #5491 from mempool/nymkappa/accel-bidboost-graph [accelerator] make bid boost graph bar min height taller	2024-09-22 23:48:41 +08:00
softsimon	a99278320b	Merge pull request #5451 from mempool/mononaut/optimize-gbt-process-blocks optimize processNewBlocks	2024-09-22 23:46:29 +08:00
softsimon	367ee68fe0	Merge branch 'master' into mononaut/optimize-gbt-process-blocks	2024-09-22 12:41:51 +08:00
softsimon	1038b4f908	Merge pull request #5538 from mempool/natsoni/fix-wrong-block-skeleton Fix race condition between accelerations and block audit api calls	2024-09-22 12:39:19 +08:00
natsoni	e41829d5e0	Fix race condition between accelerations and block audit api calls	2024-09-20 16:24:33 +02:00
softsimon	156bf12034	Merge pull request #5521 from mempool/dependabot/npm_and_yarn/backend/multi-d66d039ac5 Bump serve-static and express in /backend	2024-09-20 16:12:48 +08:00
softsimon	fc1cdbac22	Merge pull request #5522 from mempool/dependabot/npm_and_yarn/frontend/multi-9423f4c335 Bump body-parser and express in /frontend	2024-09-20 16:05:32 +08:00
softsimon	5c839aced3	Merge pull request #5486 from mempool/natsoni/remove-da-offset Remove difficulty adjustment block offset	2024-09-20 15:37:14 +08:00
softsimon	3345a60863	Merge pull request #5532 from mempool/natsoni/fix-accelerations-list Fix accelerations list page navigation on first load	2024-09-20 01:11:40 +08:00
mononaut	36844f5b70	Merge pull request #5533 from mempool/natsoni/add-blocks-logo Add logos to blocks and test transactions pages	2024-09-19 10:44:53 -06:00
mononaut	46d99db167	Merge branch 'master' into natsoni/add-blocks-logo	2024-09-19 10:44:38 -06:00
softsimon	76dcb0830a	Merge pull request #5529 from mempool/natsoni/footer-tm "Be your own explorer" on non official mempool instance	2024-09-19 23:13:41 +08:00
natsoni	0b29b61e93	"Be your own explorer" on non official mempool instance	2024-09-19 17:07:31 +02:00
softsimon	f4425ed7fe	Merge pull request #5524 from mempool/simon/calculator-numeric-fix Fix critical calculator inputmode	2024-09-19 22:53:24 +08:00
softsimon	7c02eab630	Merge pull request #5525 from mempool/mononaut/utxo-chart Add utxo chart to address page	2024-09-19 22:51:49 +08:00
softsimon	8867ef9680	Merge pull request #5534 from mempool/natsoni/mining-1m Only fetch 1m mining stats	2024-09-19 22:50:29 +08:00
softsimon	1048a0ea83	Merge pull request #5536 from mempool/natsoni/fix-timeline-tooltip-width Wrap pool logos in timeline tooltip	2024-09-19 22:46:40 +08:00
softsimon	7b216f7ec7	Merge pull request #5535 from mempool/natsoni/fix-eta-error Fix ETA calculation error	2024-09-19 22:41:25 +08:00
natsoni	32cc2f0c63	Blocks logo wraps before 'Test Transactions' text	2024-09-19 16:33:31 +02:00
natsoni	c6b0e5ff0e	Acceleration timeline tooltip: wrap pool logos	2024-09-19 16:08:39 +02:00
natsoni	68a580466f	Fix ETA calculation error	2024-09-19 15:17:24 +02:00
natsoni	bb06a66a03	Only fetch 1m mining stats	2024-09-19 14:59:34 +02:00
natsoni	ec6372464f	Add logos to blocks and test transactions pages	2024-09-19 14:38:37 +02:00
softsimon	c13b8029d3	Merge pull request #5527 from mempool/natsoni/hide-eta-replaced-tx Pizza tracker: don't show ETA on replaced tx	2024-09-19 19:10:35 +08:00
softsimon	88e92b1b34	Merge pull request #5513 from mempool/nymkappa/fix-double-click [accelerator] avoid duplicated accel request with double click	2024-09-19 17:46:15 +08:00
softsimon	b0fa3efbbb	Merge pull request #5526 from mempool/natsoni/fix-mobile-tx-push Fix mobile routing to tx push and test pages	2024-09-19 17:44:33 +08:00
softsimon	0ccb5618f6	Merge pull request #5530 from mempool/mononaut/fix-acc-eta Fix off-by-one error in multi-pool eta calculation	2024-09-19 01:28:43 +08:00
natsoni	556313a676	Fix accelerations list page navigation on fist load	2024-09-18 16:56:00 +02:00
softsimon	1fe08a9ecc	Merge pull request #5528 from mempool/natsoni/tracker-support-error Show http error in pizza tracker	2024-09-18 22:33:48 +08:00
softsimon	a11116ff3a	Merge pull request #5531 from mempool/natsoni/accelerator-logo-width Fix accelerator logo in trademark policy on mobile	2024-09-18 22:33:18 +08:00
natsoni	ede0ccfd2e	Fix accelerator logo width in trademark policy	2024-09-18 15:38:36 +02:00
Mononaut	b64caf8f4b	Fix off-by-one error in multi-pool eta calculation	2024-09-17 20:30:25 +00:00
natsoni	99290a7946	Show http error in pizza tracker	2024-09-17 15:08:03 +02:00
natsoni	2d9709a427	Pizza tracker: hide ETA on replaced tx	2024-09-17 14:56:25 +02:00
natsoni	a76d6c2949	Fix mobile routing to tx push and test pages	2024-09-17 14:50:44 +02:00
softsimon	d8cfc6e32d	Merge pull request #5471 from mempool/natsoni/hide-acc-checkout-on-accelerations Avoid brief display of accelerator checkout on already accelerated txs	2024-09-15 16:07:58 +08:00
softsimon	9457032ab1	Merge branch 'master' into natsoni/hide-acc-checkout-on-accelerations	2024-09-14 23:12:43 +08:00
softsimon	74998e7f56	Merge pull request #5482 from mempool/natsoni/hide-acc-panel-on-acceleration Hide accelerator panel if tx gets accelerated on another session	2024-09-14 20:15:39 +08:00
softsimon	db0f968749	Merge pull request #5481 from mempool/natsoni/fix-acceleration-flow-state Reset acceleration flow state when leaving transaction	2024-09-14 17:52:50 +08:00
Mononaut	a1968e01e5	Add utxo chart to address page	2024-09-13 18:16:29 +00:00
softsimon	c7ab6b03fb	Fix critical calculator inputmode	2024-09-13 23:23:22 +08:00
softsimon	2b206a7bcc	Merge branch 'master' into natsoni/hide-acc-checkout-on-accelerations	2024-09-13 23:02:23 +08:00
softsimon	c4b90c2a18	Merge pull request #5485 from mempool/mononaut/paginated-accel-history Handle paginated acceleration results	2024-09-13 22:56:57 +08:00
softsimon	2a7d5760e0	Merge branch 'master' into mononaut/paginated-accel-history	2024-09-13 22:16:28 +08:00
softsimon	c8719f1f1e	Merge pull request #5479 from mempool/mononaut/rbf-tracking-fixes RBF tracking fixes	2024-09-13 22:11:27 +08:00
natsoni	d199c7746e	Merge branch 'master' into natsoni/hide-acc-checkout-on-accelerations	2024-09-13 11:57:20 +02:00
dependabot[bot]	67eb815992	Bump body-parser and express in /frontend Bumps [body-parser](https://github.com/expressjs/body-parser) and [express](https://github.com/expressjs/express). These dependencies needed to be updated together. Updates `body-parser` from 1.20.2 to 1.20.3 - [Release notes](https://github.com/expressjs/body-parser/releases) - [Changelog](https://github.com/expressjs/body-parser/blob/master/HISTORY.md) - [Commits](https://github.com/expressjs/body-parser/compare/1.20.2...1.20.3) Updates `express` from 4.19.2 to 4.21.0 - [Release notes](https://github.com/expressjs/express/releases) - [Changelog](https://github.com/expressjs/express/blob/4.21.0/History.md) - [Commits](https://github.com/expressjs/express/compare/4.19.2...4.21.0) --- updated-dependencies: - dependency-name: body-parser dependency-type: indirect - dependency-name: express dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2024-09-13 09:10:42 +00:00
dependabot[bot]	4ccd3c8525	Bump serve-static and express in /backend Bumps [serve-static](https://github.com/expressjs/serve-static) to 1.16.2 and updates ancestor dependency [express](https://github.com/expressjs/express). These dependencies need to be updated together. Updates `serve-static` from 1.15.0 to 1.16.2 - [Release notes](https://github.com/expressjs/serve-static/releases) - [Changelog](https://github.com/expressjs/serve-static/blob/v1.16.2/HISTORY.md) - [Commits](https://github.com/expressjs/serve-static/compare/v1.15.0...v1.16.2) Updates `express` from 4.19.2 to 4.21.0 - [Release notes](https://github.com/expressjs/express/releases) - [Changelog](https://github.com/expressjs/express/blob/4.21.0/History.md) - [Commits](https://github.com/expressjs/express/compare/4.19.2...4.21.0) --- updated-dependencies: - dependency-name: serve-static dependency-type: indirect - dependency-name: express dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com>	2024-09-13 09:10:33 +00:00
softsimon	fc5af24b68	Merge branch 'master' into mononaut/rbf-tracking-fixes	2024-09-13 17:10:12 +08:00
softsimon	b17b66a52f	Merge pull request #5476 from mempool/dependabot/npm_and_yarn/frontend/micromatch-4.0.8 Bump micromatch from 4.0.4 to 4.0.8 in /frontend	2024-09-13 17:09:53 +08:00
softsimon	819dedbc88	Merge pull request #5464 from mempool/natsoni/amount-selector Add amount mode selector to footer	2024-09-13 17:03:24 +08:00
softsimon	8717051a06	Merge pull request #5472 from mempool/mononaut/json-errors respect json Accept header in API error responses	2024-09-13 16:13:48 +08:00
nymkappa	3e78b636d6	[accelerator] avoid duplicated accel request with double click	2024-09-12 16:02:11 +02:00
softsimon	75316e60d0	Merge branch 'master' into mononaut/json-errors	2024-09-10 18:37:27 +04:00
softsimon	31469ad361	Merge pull request #5478 from mempool/natsoni/ineligible-for-acceleration Ineligible transaction link to accelerator FAQ	2024-09-10 18:36:19 +04:00
wiz	485a58e453	Merge pull request #5503 from mempool/mononaut/axios-socket-hotfix-2 hotfix option 2 for axios breaking change to unix sockets	2024-09-09 16:54:28 +09:00
wiz	92090399cc	Merge pull request #5504 from mempool/revert-5502-mononaut/axios-socket-hotfix-1 Revert "hotfix option 1 for axios breaking change to unix sockets"	2024-09-09 16:54:12 +09:00
wiz	893c3cd87d	Revert "hotfix option 1 for axios breaking change to unix sockets"	2024-09-09 16:53:56 +09:00
wiz	c93159414c	Merge pull request #5502 from mempool/mononaut/axios-socket-hotfix-1 hotfix option 1 for axios breaking change to unix sockets	2024-09-09 16:42:23 +09:00
Mononaut	b2d4f4078f	alternate hotfix for broken socket support (rollback axios to 1.7.2)	2024-09-08 20:18:04 +00:00
Mononaut	be17e45785	hotfix for axios breaking change to unix sockets	2024-09-08 20:16:06 +00:00
wiz	dbe774cc64	ops: Clear all mempool frontend configs on build env reset	2024-09-09 02:45:16 +09:00
wiz	64223c4744	ops: Set blocksxor=0 in bitcoin.conf	2024-09-05 02:15:08 +09:00
natsoni	eab008c707	Ineligible transaction link to accelerator FAQ	2024-08-30 12:19:58 +02:00
nymkappa	0f1def5822	[accelerator] make bid boost graph bar min height taller	2024-08-29 20:53:40 +02:00
natsoni	0a5a2c3c7e	Remove difficulty epoch block offset	2024-08-28 16:50:00 +02:00
Mononaut	b526ee0877	Handle paginated acceleration results	2024-08-28 14:47:42 +00:00
dependabot[bot]	98d98b2478	Bump micromatch from 4.0.4 to 4.0.8 in /frontend Bumps [micromatch](https://github.com/micromatch/micromatch) from 4.0.4 to 4.0.8. - [Release notes](https://github.com/micromatch/micromatch/releases) - [Changelog](https://github.com/micromatch/micromatch/blob/4.0.8/CHANGELOG.md) - [Commits](https://github.com/micromatch/micromatch/compare/4.0.4...4.0.8) --- updated-dependencies: - dependency-name: micromatch dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2024-08-28 05:01:52 +00:00
natsoni	624b3473fc	Hide accelerator panel if tx gets accelerated on another session	2024-08-27 12:32:21 +02:00
natsoni	a3e61525fe	Reset acceleration flow state when leaving transaction	2024-08-27 11:42:13 +02:00
Mononaut	9e05060af4	fix tests	2024-08-27 00:17:17 +00:00
Mononaut	ee53597fe9	Resume RBF trees after restart	2024-08-26 23:43:29 +00:00
Mononaut	e362003746	Catch RBF replacements across mempool update boundaries	2024-08-26 23:43:15 +00:00
Mononaut	185eae00e9	Fix RBF tracking inconsistencies	2024-08-26 23:41:38 +00:00
Mononaut	b47e148677	respect json Accept header in API error responses	2024-08-22 19:51:28 +00:00
natsoni	d22743c4b8	Don't display accelerator checkout on already accelerated txs	2024-08-22 15:39:20 +02:00
natsoni	e59308c2f5	Fix global footer css	2024-08-19 18:21:01 +02:00
natsoni	c7f48b4390	Add amount mode selector to footer	2024-08-19 16:29:34 +02:00
Mononaut	fbf27560b3	optimize processNewBlocks	2024-08-10 13:53:49 +00:00